Updating Toggle component to use input instead of divs

ui/src/components/toggle/index.js

@@ -5,34 +5,44 @@ const React = require('react');
 const styles = require('./style.css');
 
 const Toggle = ({
-  off = false,
+  checked = false,
   className,
   style
 }) => {
   const tgl = classNames(
     className,
-    styles.toggle,
-    off ? styles.off : styles.on,
+    styles.tgl,
+    checked ? styles.on : styles.off,
   );
 
-  const btn = classNames(
+  const input = classNames(
     className,
-    styles.btn
+    styles.input
+  );
+
+  const label = classNames(
+    className,
+    styles.label
   );
 
   return (
-    <div className={tgl} style={style}>
-      <div className={btn} />
-      <span className={styles.label}>
-        {off ? 'Off' : 'On'}
-      </span>
+    <div className='' style={style}>
+      <label className={tgl} htmlFor='toggle' >
+        <input
+          checked={checked}
+          className={input}
+          id='toggle'
+          type='checkbox'
+        />
+        <div className={label} />
+      </label>
     </div>
   );
 };
 
 Toggle.propTypes = {
+  checked: React.PropTypes.bool,
   className: React.PropTypes.string,
-  off: React.PropTypes.bool,
   style: React.PropTypes.object
 };
 

ui/src/components/toggle/readme.md

@@ -1,4 +1,4 @@
-# `<Button>`
+# `<Toggle>`
 
 ## demo
 
@@ -16,10 +16,7 @@ nmodule.exports = ReactDOM.renderToString(
   <Base>  
     <Row>
       <Column>
-        <Toggle />
-      </Column>
-      <Column>
-        <Toggle off />
+        <Toggle checked />
       </Column>
     </Row>
   </Base>

ui/src/components/toggle/style.css

@@ -15,55 +15,69 @@
   --bottom-shaddow: ~boxes.bottomShaddow;
 }
 
-.toggle {
+.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: 5rem;
+  width: 110px;
+}
 
-  & .btn,
-  & .label {
-    height: 2.188rem;
-    margin: 0.125rem;
-    width: 2.188rem;
+.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;
   }
 
-  & .label {
-    padding-top: 4px;
-    text-align: center;
-  }
-
-  & .btn {
-    background: #FFFFFF;
+  &::after {
+    background-color: #FFFFFF;
     border-radius: var(--border-radius);
-    box-shadow: var(--bottom-shaddow);
+    content: "";
+    height: remcalc(46);
+    left: 3px;
+    position: absolute;
+    top: 3px;
+    width: remcalc(46);
   }
+}
 
-  &.on {
-    background: var(--background-confirmed);
-    border: var(--border-confirmed);
+.input {
+  display: none;
 
-    & .label {
+  &:checked {
+    & + .label {
+      background: var(--background-confirmed);
+      border: var(--border-confirmed);
       color: #FFFFFF;
-      float: right;
-    }
+      padding: remcalc(12 0 12 12);
+      text-align: left;
 
-    & .btn {
-      float: left;
-    }
-  }
+      &::before {
+        content: "On";
+        left: 14px;
+        right: auto;
+      }
 
-  &.off {
-    background: #E6E6E6;
-    border: var(--border-unchecked);
-
-    & .label {
-      float: left;
-    }
-
-    & .btn {
-      float: right;
+      &::after {
+        left: auto;
+        right: 3px;
+      }
     }
   }
 }