Lens app source code (#119)

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

dashboard/client/components/stepper/index.ts

@@ -0,0 +1 @@
+export * from './stepper'

dashboard/client/components/stepper/stepper.scss

@@ -0,0 +1,53 @@
+
+.Stepper {
+  --stepper-color: $contentColor;
+  --stepper-color-text: $textColorPrimary;
+  --stepper-color-active: var(--color-primary);
+  --stepper-color-point: var(--stepper-color);
+
+  $pointSize: $unit * 2.5;
+  font-size: $font-size-small;
+
+  .step {
+    position: relative;
+    text-align: center;
+    &.active, &.done {
+      .point {
+        color: $textColorAccent;
+        background: var(--stepper-color-active);
+      }
+    }
+    &.active {
+      .step-title {
+        color: $textColorAccent;
+      }
+    }
+    &.done > .line {
+      background: var(--stepper-color-active);
+    }
+    .step-title {
+      font-size: 120%
+    }
+  }
+
+  .point {
+    position: relative;
+    display: block;
+    margin: auto;
+    width: $pointSize;
+    height: $pointSize;
+    line-height: $pointSize;
+    background: var(--stepper-color-point);
+    color: var(--stepper-color-text);
+    font-size: $font-size-small;
+    border-radius: 50%;
+  }
+
+  .line {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    top: $pointSize / 2;
+    background: var(--stepper-color-point);
+  }
+}

dashboard/client/components/stepper/stepper.tsx

@@ -0,0 +1,40 @@
+import "./stepper.scss";
+import * as React from "react";
+import { cssNames } from "../../utils";
+
+interface Props extends React.HTMLProps<any> {
+  step: number;
+  steps: Step[];
+}
+
+interface Step {
+  title?: string;
+}
+
+export class Stepper extends React.Component<Props, {}> {
+  render() {
+    const { className, steps, ...props } = this.props;
+    const stepsCount = steps.length;
+    let { step } = this.props;
+    step = Math.min(Math.max(1, step), stepsCount);
+    return (
+      <div {...props} className={cssNames('Stepper flex auto', className)}>
+        {steps.map(({ title }, i) => {
+          const stepNumber = i + 1;
+          const isLast = i === stepsCount - 1;
+          const stepClass = {
+            done: stepNumber < step,
+            active: stepNumber === step
+          };
+          return (
+            <div key={i} className={cssNames("box step", stepClass)}>
+              {!isLast ? <span className="line"/> : null}
+              <div className="point">{stepNumber}</div>
+              <span className="step-title">{title}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}