From f6fdb635da9294a9999b2d3f2295e1a850d7c6db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 26 Oct 2016 11:55:27 +0100
Subject: [PATCH] initial toggle implementation

---
 ui/src/components/toggle/index.js  | 36 +++++++++++++++++++++
 ui/src/components/toggle/readme.md | 29 +++++++++++++++++
 ui/src/components/toggle/style.css | 52 ++++++++++++++++++++++++++++++
 ui/src/docs.js                     |  3 +-
 ui/src/index.js                    |  3 +-
 5 files changed, 121 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/toggle/index.js
 create mode 100644 ui/src/components/toggle/readme.md
 create mode 100644 ui/src/components/toggle/style.css

diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js
new file mode 100644
index 00000000..ec2e6577
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/toggle/readme.md b/ui/src/components/toggle/readme.md
new file mode 100644
index 00000000..053f8d32
--- /dev/null
+++ b/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>
+);
+```
diff --git a/ui/src/components/toggle/style.css b/ui/src/components/toggle/style.css
new file mode 100644
index 00000000..b319fbd0
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/ui/src/docs.js b/ui/src/docs.js
index d9a0235a..b1722ee0 100644
--- a/ui/src/docs.js
+++ b/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')
 };
diff --git a/ui/src/index.js b/ui/src/index.js
index c58772cb..69e4fd6c 100644
--- a/ui/src/index.js
+++ b/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')
 };