Lens app source code (#119)

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

dashboard/client/components/checkbox/checkbox.scss

@@ -0,0 +1,86 @@
+
+.Checkbox {
+  --checkbox-color: #{$textColorPrimary}; // tick color [√]
+  --checkbox-color-active: #{$contentColor};
+  --checkbox-bgc-active: #{$kontenaBlue};
+
+  flex-shrink: 0;
+
+  &.theme {
+    &-dark {
+      // default
+    }
+    &-light {
+      --checkbox-color-active: #{$kontenaBlue};
+      --checkbox-bgc-active: none;
+    }
+  }
+
+  &:hover {
+    input:not(:checked):not(:disabled) {
+      ~ .tick:after {
+        opacity: 1;
+      }
+    }
+  }
+
+  input[type="checkbox"] {
+    display: none;
+    &:checked {
+      ~ .box {
+        color: var(--checkbox-color-active);
+        background: var(--checkbox-bgc-active);
+        border-color: var(--checkbox-bgc-active);
+        &:after {
+          opacity: 1;
+        }
+      }
+    }
+    &:disabled {
+      ~ .box {
+        color: var(--checkbox-color);
+      }
+      ~ * {
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+    &:not(:disabled) ~ * {
+      cursor: pointer;
+    }
+  }
+
+  .label {
+    margin-right: $margin;
+  }
+
+  > .box {
+    $boxSize: round(1.7 * $unit);
+
+    position: relative;
+    width: $boxSize;
+    height: $boxSize;
+    border-radius: 2px;
+    color: var(--checkbox-color);
+    border: 2px solid currentColor;
+    flex-shrink: 0;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 60%;
+      border: 2px solid currentColor;
+      border-top: 0;
+      border-right: 0;
+      transform: rotate(-45deg);
+      opacity: 0;
+    }
+
+    + * {
+      margin-left: .5em;
+    }
+  }
+}

dashboard/client/components/checkbox/checkbox.tsx

@@ -0,0 +1,51 @@
+import './checkbox.scss'
+import React from 'react'
+import { autobind, cssNames } from "../../utils";
+
+interface Props<T = boolean> {
+  theme?: "dark" | "light";
+  className?: string;
+  label?: React.ReactNode;
+  inline?: boolean;
+  disabled?: boolean;
+  value?: T;
+  onChange?(value: T, evt: React.ChangeEvent<HTMLInputElement>): void;
+}
+
+export class Checkbox extends React.PureComponent<Props> {
+  private input: HTMLInputElement;
+
+  @autobind()
+  onChange(evt: React.ChangeEvent<HTMLInputElement>) {
+    if (this.props.onChange) {
+      this.props.onChange(this.input.checked, evt)
+    }
+  }
+
+  getValue() {
+    if (this.props.value !== undefined) return this.props.value;
+    return this.input.checked;
+  }
+
+  render() {
+    const { label, inline, className, value, theme, children, ...inputProps } = this.props;
+    const componentClass = cssNames('Checkbox flex', className, {
+      inline: inline,
+      checked: value,
+      disabled: this.props.disabled,
+      ["theme-" + theme]: theme,
+    });
+    return (
+      <label className={componentClass}>
+        <input
+          {...inputProps}
+          type="checkbox" checked={value} onChange={this.onChange}
+          ref={e => this.input = e}
+        />
+        <i className="box flex align-center"/>
+        {label ? <span className="label">{label}</span> : null}
+        {children}
+      </label>
+    );
+  }
+}

dashboard/client/components/checkbox/index.ts

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