From 88df5fce3441fcb660ba12581f8410d751277296 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 26 Oct 2016 14:04:32 +0100
Subject: [PATCH] initial implementation of checkbox ui component

---
 ui/src/components/checkbox/index.js  | 44 ++++++++++++++++++++++++++++
 ui/src/components/checkbox/readme.md | 42 ++++++++++++++++++++++++++
 ui/src/components/checkbox/style.css |  8 +++++
 ui/src/docs.js                       |  3 +-
 ui/src/index.js                      |  1 +
 5 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/checkbox/index.js
 create mode 100644 ui/src/components/checkbox/readme.md
 create mode 100644 ui/src/components/checkbox/style.css

diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js
new file mode 100644
index 00000000..6858452e
--- /dev/null
+++ b/ui/src/components/checkbox/index.js
@@ -0,0 +1,44 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Checkbox = ({
+  checked = false,
+  className,
+  children,
+  disabled = false,
+  onChange,
+  style
+}) => {
+  const cn = classNames(
+    className,
+    styles.checkbox,
+    checked ? styles.checked : '',
+    disabled ? styles.disabled : ''
+  );
+
+  return (
+    <label className={styles.label}>
+      <input
+        className={cn}
+        style={style}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        type='checkbox'
+      />
+      <span>{children}</span>
+    </label>
+  );
+};
+
+Checkbox.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  checked: React.PropTypes.bool,
+  disabled: React.PropTypes.bool,
+  onChange: React.PropTypes.func,
+  style: React.PropTypes.object
+};
+
+module.exports = Checkbox;
diff --git a/ui/src/components/checkbox/readme.md b/ui/src/components/checkbox/readme.md
new file mode 100644
index 00000000..7842807f
--- /dev/null
+++ b/ui/src/components/checkbox/readme.md
@@ -0,0 +1,42 @@
+# `<Checkbox>`
+
+## 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 Checkbox = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Container>
+      <Row>
+        <Column>
+          <Checkbox checked>
+            Checkbox checked
+          </Checkbox>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <Checkbox>
+            Checkbox unchecked
+          </Checkbox>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <Checkbox disabled>
+            Checkbox disabled
+          </Checkbox>
+        </Column>
+      </Row>
+    </Container>
+  </Base>
+);
+```
diff --git a/ui/src/components/checkbox/style.css b/ui/src/components/checkbox/style.css
new file mode 100644
index 00000000..e5c67c7a
--- /dev/null
+++ b/ui/src/components/checkbox/style.css
@@ -0,0 +1,8 @@
+input[type='checkbox'] {
+  &.checkbox {
+  }
+}
+
+.label {
+  color: #646464;
+}
diff --git a/ui/src/docs.js b/ui/src/docs.js
index b1722ee0..00c55c78 100644
--- a/ui/src/docs.js
+++ b/ui/src/docs.js
@@ -10,7 +10,8 @@ module.exports = {
     Row: require('./components/row/readme.md'),
     Column: require('./components/column/readme.md'),
     Button: require('./components/button/readme.md'),
-    Toggle: require('./components/toggle/readme.md')
+    Toggle: require('./components/toggle/readme.md'),
+    Checkbox: require('./components/checkbox/readme.md')
   },
   FAQ: require('./faq.md')
 };
diff --git a/ui/src/index.js b/ui/src/index.js
index 69e4fd6c..3de7a107 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,6 +1,7 @@
 module.exports = {
   Base: require('./components/base'),
   Button: require('./components/button'),
+  Checkbox: require('./components/checkbox'),
   Column: require('./components/column'),
   Container: require('./components/container'),
   Row: require('./components/row'),