From 8f675e7911ea80e17cf3aab7bcc4bc936a17017b Mon Sep 17 00:00:00 2001
From: Tom Gallacher <tomgallacher23@gmail.com>
Date: Thu, 8 Dec 2016 12:41:37 +0000
Subject: [PATCH] Update Button and Checkbox

---
 ui/src/components/button/index.js    | 41 ++++++++++++++--------------
 ui/src/components/checkbox/index.js  | 37 +++++++++++++++++++++----
 ui/src/components/checkbox/style.css |  3 --
 ui/src/index.js                      |  4 +--
 ui/stories/index.js                  | 34 +++++++++++++++++++++++
 5 files changed, 89 insertions(+), 30 deletions(-)
 delete mode 100644 ui/src/components/checkbox/style.css

diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js
index 3325beff..0d927f61 100644
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@@ -19,39 +19,40 @@ const {
 
 // TODO: this should come from constants
 // and be calculated accordingly
-const colors = {
-  primaryBackground: colors.brandPrimary;
-  primaryBorder: '#2532BB';
-  primaryColor: '#FFFFFF';
-  secondaryBackgroud: '#FFFFFF';
-  secondaryBorder: '#D8D8D8';
-  secondaryColor: '#646464';
-  inactiveBackground: '#F9F9F9';
-  inactiveBorder: '#D8D8D8';
-  inactiveColor: '#737373';
+const styles = {
+  primaryBackground: colors.brandPrimary,
+  primaryBorder: '#2532BB',
+  primaryColor: '#FFFFFF',
+  secondaryBackgroud: '#FFFFFF',
+  secondaryBorder: '#D8D8D8',
+  secondaryColor: '#646464',
+  inactiveBackground: '#F9F9F9',
+  inactiveBorder: '#D8D8D8',
+  inactiveColor: '#737373',
+  ...colors
 };
 
 const background = match({
-  secondary: colors.secondaryBackgroud,
-  inactive: colors.inactiveBackground
-}, colors.primaryBackground);
+  secondary: styles.secondaryBackgroud,
+  inactive: styles.inactiveBackground
+}, styles.primaryBackground);
 
 const border = match({
-  secondary: colors.secondaryBorder,
-  inactive: colors.inactiveBorder
-}, colors.primaryBorder);
+  secondary: styles.secondaryBorder,
+  inactive: styles.inactiveBorder
+}, styles.primaryBorder);
 
 const color = match({
-  secondary: colors.secondaryColor,
-  inactive: colors.inactiveColor
-}, colors.primaryColor);
+  secondary: styles.secondaryColor,
+  inactive: styles.inactiveColor
+}, styles.primaryColor);
 
 module.exports = styled.button`
   border-radius: ${remcalc(boxes.borderRadius)};
   box-shadow: ${boxes.bottomShaddow};
   font-size: ${remcalc(16)};
   min-width: ${remcalc(120)};
-  padding: ${remcalc(18 24)};
+  padding: ${remcalc('18 24')};
 
   background: ${background};
   border: 1px solid ${border};
diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js
index 1410fc67..537aca01 100644
--- a/ui/src/components/checkbox/index.js
+++ b/ui/src/components/checkbox/index.js
@@ -1,6 +1,34 @@
 const classNames = require('classnames');
 const React = require('react');
-const styles = require('./style.css');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const match = require('../../shared/match');
+const Styled = require('styled-components');
+
+const {
+  colors,
+  boxes
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const styles = {
+  ...colors
+};
+
+const StyledInput = styled.input`
+`;
+
+const StyledLabel = styled.label`
+  color: #646464;
+`;
 
 const Checkbox = ({
   checked = false,
@@ -25,8 +53,8 @@ const Checkbox = ({
   );
 
   return (
-    <label className={styles.label} htmlFor={id}>
-      <input
+    <StyledLabel className={styles.label} htmlFor={id}>
+      <StyledInput
         checked={checked}
         className={cn}
         disabled={disabled}
@@ -36,13 +64,12 @@ const Checkbox = ({
         onChange={onChange}
         readOnly={readOnly}
         required={required}
-        selectionDirection={selectionDirection}
         style={style}
         tabIndex={tabIndex}
         type='checkbox'
       />
       <span>{children}</span>
-    </label>
+    </StyledLabel>
   );
 };
 
diff --git a/ui/src/components/checkbox/style.css b/ui/src/components/checkbox/style.css
deleted file mode 100644
index 487448cc..00000000
--- a/ui/src/components/checkbox/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.label {
-  color: #646464;
-}
diff --git a/ui/src/index.js b/ui/src/index.js
index ce1d5ec6..f822d1d2 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,9 +1,9 @@
 module.exports = {
   Avatar: require('./components/avatar'),
   Base: require('./components/base'),
-  // Button: require('./components/button'),
+  Button: require('./components/button'),
   // ButtonIcon: require('./components/button-icon'),
-  // Checkbox: require('./components/checkbox'),
+  Checkbox: require('./components/checkbox'),
   Column: require('./components/column'),
   Container: require('./components/container'),
   Row: require('./components/row'),
diff --git a/ui/stories/index.js b/ui/stories/index.js
index af077b7e..e32510e2 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -7,7 +7,9 @@ const {
 
 const {
   Base,
+  Button,
   Container,
+  Checkbox,
   Row,
   Column,
   Avatar
@@ -91,3 +93,35 @@ storiesOf('Avatar', module)
       />
     </Base>
   ));
+
+storiesOf('Button', module)
+  .add('With text', () => (
+    <Button>
+      Inspire the lazy
+    </Button>
+  )).add('Secondary', () => (
+    <Button secondary>
+      Inspire the brave
+    </Button>
+  )).add('Disabled', () => (
+    <Button disabled>
+      Inspire the liars
+    </Button>
+  ));
+
+storiesOf('Checkbox', module)
+  .add('Default', () => (
+    <Checkbox>
+      Checkbox
+    </Checkbox>
+  ))
+  .add('Checked', () => (
+    <Checkbox checked onChange={function noop() {}}>
+      Checkbox Checked
+    </Checkbox>
+  ))
+  .add('Disabled', () => (
+    <Checkbox disabled>
+      Checkbox Disabled
+    </Checkbox>
+  ));