Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/slider/index.ts

@@ -0,0 +1 @@
+export * from "./slider"

dashboard/client/components/slider/slider.scss

@@ -0,0 +1,17 @@
+.Slider {
+  .track {
+    background: $kontenaBlue;
+  }
+
+  .thumb {
+    background: $kontenaBlue;
+
+    &.activated, &.jumped, &.focused {
+      box-shadow: 0 0 0 $unit * 2 rgba($kontenaBlue, 0.16)!important;
+    }
+
+    &:hover{
+      box-shadow: 0 0 0 $unit rgba($kontenaBlue, 0.16);
+    }
+  }
+}

dashboard/client/components/slider/slider.tsx

@@ -0,0 +1,41 @@
+// Wrapper for <Slider/> component
+// API docs: https://material-ui.com/lab/api/slider/
+import "./slider.scss";
+
+import React, { Component } from "react";
+import { cssNames } from "../../utils";
+import MaterialSlider, { SliderClassKey, SliderProps } from "@material-ui/core/Slider";
+
+interface Props extends SliderProps {
+  className?: string;
+}
+
+const defaultProps: Partial<Props> = {
+  step: 1,
+  min: 0,
+  max: 100,
+};
+
+export class Slider extends Component<Props> {
+  static defaultProps = defaultProps as object;
+
+  private classNames: Partial<{ [P in SliderClassKey]: string }> = {
+    track: "track",
+    thumb: "thumb",
+    disabled: "disabled",
+    vertical: "vertical",
+  };
+
+  render() {
+    const { className, ...sliderProps } = this.props;
+    return (
+      <MaterialSlider
+        {...sliderProps}
+        classes={{
+          root: cssNames("Slider", className),
+          ...this.classNames
+        }}
+      />
+    )
+  }
+}