initial toggle implementation

ui/src/components/toggle/index.js

@@ -0,0 +1,36 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Toggle = ({
+  off = false,
+  className,
+  style
+}) => {
+  const tgl = classNames(
+    className,
+    styles.toggle,
+    off ? styles.off : styles.on,
+  );
+
+  const btn = classNames(
+    className,
+    styles.btn
+  );
+
+  return (
+    <div className={tgl} style={style}>
+      <div className={btn} />
+      <span className={styles.label}>
+        {off ? 'Off' : 'On'}
+      </span>
+    </div>
+  );
+};
+
+Toggle.propTypes = {
+  className: React.PropTypes.string,
+  style: React.PropTypes.object
+};
+
+module.exports = Toggle;

ui/src/components/toggle/readme.md

@@ -0,0 +1,29 @@
+# `<Button>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Toggle = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Container>
+      <Row>
+        <Column>
+          <Toggle />
+        </Column>
+        <Column>
+          <Toggle off />
+        </Column>
+      </Row>
+    </Container>
+  </Base>
+);
+```

ui/src/components/toggle/style.css

@@ -0,0 +1,52 @@
+.toggle {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: #464646;
+  border-radius: 4px;
+  width: 5rem;
+  height: 2.5rem;
+
+  & .btn,
+  & .label {
+    height: 2.188rem;
+    width: 2.188rem;
+    margin: 0.125rem;
+  }
+
+  & .label {
+    padding-top: 4px;
+    text-align: center;
+  }
+
+  & .btn {
+    background: #FFFFFF;
+    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05);
+    border-radius: 3px;
+  }
+
+  &.on {
+    background: #38C647;
+    border: 1px solid #23AC32;
+
+    & .label {
+      float: right;
+      color: #FFFFFF;
+    }
+
+    & .btn {
+      float: left;
+    }
+  }
+
+  &.off {
+    background: #E6E6E6;
+    border: 1px solid #D8D8D8;
+
+    & .label {
+      float: left;
+    }
+
+    & .btn {
+      float: right;
+    }
+  }
+}

ui/src/docs.js

@@ -9,7 +9,8 @@ module.exports = {
     Container: require('./components/container/readme.md'),
     Row: require('./components/row/readme.md'),
     Column: require('./components/column/readme.md'),
-    Button: require('./components/button/readme.md')
+    Button: require('./components/button/readme.md'),
+    Toggle: require('./components/toggle/readme.md')
   },
   FAQ: require('./faq.md')
 };

ui/src/index.js

@@ -3,5 +3,6 @@ module.exports = {
   Button: require('./components/button'),
   Column: require('./components/column'),
   Container: require('./components/container'),
-  Row: require('./components/row')
+  Row: require('./components/row'),
+  Toggle: require('./components/toggle')
 };