convert toggle

ui/package.json

@@ -27,7 +27,8 @@
     "react-dom": "^15.4.1",
     "react-icons": "^2.2.1",
     "reduce-css-calc": "^1.3.0",
-    "styled-components": "^1.1.3"
+    "styled-components": "^1.1.3",
+    "uuid": "^3.0.1"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.34.0",

ui/src/components/toggle/index.js

@@ -1,48 +1,116 @@
-// TODO: use a checkbox
+const constants = require('../../shared/constants');
-
+const fns = require('../../shared/functions');
-const classNames = require('classnames');
 const React = require('react');
-const styles = require('./style.css');
+const Styled = require('styled-components');
+const uuid = require('uuid').v4;
+
+const {
+  boxes,
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledLabel = styled.label`
+  border-radius: ${boxes.borderRadius};
+  color: #464646;
+  height: 2.5rem;
+  width: 110px;
+`;
+
+const StyledToggleLabel = styled.div`
+  background-color: #E6E6E6;
+  border: solid 1px #D8D8D8;
+  border-radius: ${boxes.borderRadius};
+  color: #000000;
+  height: ${remcalc(54)};
+  margin: 0.125rem;
+  padding: ${remcalc('12 12 12 0')};
+  position: relative;
+  text-align: right;
+  width: ${remcalc(106)};
+
+  &::before {
+    content: "Off";
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: bold;
+    position: absolute;
+    right: 14px;
+    top: 13px;
+  }
+
+  &::after {
+    background-color: #FFFFFF;
+    border-radius: ${boxes.borderRadius};
+    content: "";
+    height: ${remcalc(46)};
+    left: 3px;
+    position: absolute;
+    top: 3px;
+    width: ${remcalc(46)};
+  }
+`;
+
+const StyledInput = styled.input`
+  display: none;
+
+  &:checked {
+    & + .tgl-label {
+      background: ${colors.confirmation};
+      border: ${boxes.border.confirmed};
+      color: #FFFFFF;
+      padding: ${remcalc('12 0 12 12')};
+      text-align: left;
+
+      &::before {
+        content: "On";
+        left: 14px;
+        right: auto;
+      }
+
+      &::after {
+        left: auto;
+        right: 3px;
+      }
+    }
+  }
+`;
 
 const Toggle = ({
-  checked = false,
+  checked,
   className,
+  defaultChecked,
+  id = uuid(),
   style
 }) => {
-  const tgl = classNames(
-    className,
-    styles.tgl,
-    checked ? styles.on : styles.off,
-  );
-
-  const input = classNames(
-    className,
-    styles.input
-  );
-
-  const label = classNames(
-    className,
-    styles['tgl-label']
-  );
-
   return (
-    <div className='' style={style}>
+    <StyledLabel
-      <label className={tgl} htmlFor='toggle' >
+      className={className}
-        <input
+      htmlFor={id}
-          checked={checked}
+      style={style}
-          className={input}
+    >
-          id='toggle'
+      <StyledInput
-          type='checkbox'
+        checked={checked}
-        />
+        id={id}
-        <div className={label} />
+        type='checkbox'
-      </label>
+      />
-    </div>
+      <StyledToggleLabel className='tgl-label' />
+    </StyledLabel>
   );
 };
 
 Toggle.propTypes = {
   checked: React.PropTypes.bool,
   className: React.PropTypes.string,
+  defaultChecked: React.PropTypes.bool,
+  id: React.PropTypes.string,
   style: React.PropTypes.object
 };
 

ui/src/components/toggle/style.css

@@ -1,83 +0,0 @@
-/*
- * - This can probably be achieved with flexbox so that we don't use any
- * margins or paddings
- * - We shouldn't use #FFFFFF but a variation of it to have less contrast
- */
-
-~boxes: "../../shared/constants.js";
-~colors: "../../shared/constants.js";
-
-:root {
-  --background-confirmed: ~colors.confirmation;
-  --border-confirmed: ~boxes.border.confirmed;
-  --border-unchecked: ~boxes.border.unchecked;
-  --border-radius: remcalc(~boxes.borderRadius);
-  --bottom-shaddow: ~boxes.bottomShaddow;
-}
-
-.tgl {
-  border-radius: var(--border-radius);
-  color: #464646;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  height: 2.5rem;
-  width: 110px;
-}
-
-.tgl-label {
-  background-color: #E6E6E6;
-  border: solid 1px #D8D8D8;
-  border-radius: var(--border-radius);
-  color: #000000;
-  height: remcalc(54);
-  margin: 0.125rem;
-  padding: remcalc(12 12 12 0);
-  position: relative;
-  text-align: right;
-  width: remcalc(106);
-
-  &::before {
-    content: "Off";
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: bold;
-    position: absolute;
-    right: 14px;
-    top: 13px;
-  }
-
-  &::after {
-    background-color: #FFFFFF;
-    border-radius: var(--border-radius);
-    content: "";
-    height: remcalc(46);
-    left: 3px;
-    position: absolute;
-    top: 3px;
-    width: remcalc(46);
-  }
-}
-
-.input {
-  display: none;
-
-  &:checked {
-    & + .tgl-label {
-      background: var(--background-confirmed);
-      border: var(--border-confirmed);
-      color: #FFFFFF;
-      padding: remcalc(12 0 12 12);
-      text-align: left;
-
-      &::before {
-        content: "On";
-        left: 14px;
-        right: auto;
-      }
-
-      &::after {
-        left: auto;
-        right: 3px;
-      }
-    }
-  }
-}

ui/src/index.js

@@ -9,7 +9,7 @@ module.exports = {
   Row: require('./components/row'),
   // Tab: require('./components/tabs/tab'),
   // Tabs: require('./components/tabs'),
-  // Toggle: require('./components/toggle'),
+  Toggle: require('./components/toggle'),
   // Notificaton: require('./components/notification'),
   // Input: require('./components/input'),
   // Icon: require('./components/icon'),

ui/stories/index.js

@@ -13,6 +13,7 @@ const {
   Row,
   Column,
   Avatar,
+  Toggle,
   Widget
 } = require('../src/');
 
@@ -125,6 +126,20 @@ storiesOf('Checkbox', module)
     <Checkbox disabled />
   ));
 
+storiesOf('Toggle', module)
+  .add('checked', () => (
+    <Toggle checked />
+  ))
+  .add('unchecked', () => (
+    <Toggle checked={false} />
+  ))
+  .add('defaultChecked', () => (
+    <Toggle defaultChecked />
+  ))
+  .add('no props', () => (
+    <Toggle />
+  ))
+
 storiesOf('Widget', module)
   .add('single', () => (
     <Widget checked selectable='single' name='flag' value='flag_1'>

ui/yarn.lock

@@ -5910,14 +5910,14 @@ utils-merge@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
 
+uuid, uuid@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+
 uuid@^2.0.1, uuid@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
 
-uuid@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
-
 v8flags@^2.0.10:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"