Update Button and Checkbox

ui/src/components/button/index.js

@@ -19,39 +19,40 @@ const {
 
 // TODO: this should come from constants
 // and be calculated accordingly
-const colors = {
+const styles = {
-  primaryBackground: colors.brandPrimary;
+  primaryBackground: colors.brandPrimary,
-  primaryBorder: '#2532BB';
+  primaryBorder: '#2532BB',
-  primaryColor: '#FFFFFF';
+  primaryColor: '#FFFFFF',
-  secondaryBackgroud: '#FFFFFF';
+  secondaryBackgroud: '#FFFFFF',
-  secondaryBorder: '#D8D8D8';
+  secondaryBorder: '#D8D8D8',
-  secondaryColor: '#646464';
+  secondaryColor: '#646464',
-  inactiveBackground: '#F9F9F9';
+  inactiveBackground: '#F9F9F9',
-  inactiveBorder: '#D8D8D8';
+  inactiveBorder: '#D8D8D8',
-  inactiveColor: '#737373';
+  inactiveColor: '#737373',
+  ...colors
 };
 
 const background = match({
-  secondary: colors.secondaryBackgroud,
+  secondary: styles.secondaryBackgroud,
-  inactive: colors.inactiveBackground
+  inactive: styles.inactiveBackground
-}, colors.primaryBackground);
+}, styles.primaryBackground);
 
 const border = match({
-  secondary: colors.secondaryBorder,
+  secondary: styles.secondaryBorder,
-  inactive: colors.inactiveBorder
+  inactive: styles.inactiveBorder
-}, colors.primaryBorder);
+}, styles.primaryBorder);
 
 const color = match({
-  secondary: colors.secondaryColor,
+  secondary: styles.secondaryColor,
-  inactive: colors.inactiveColor
+  inactive: styles.inactiveColor
-}, colors.primaryColor);
+}, 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};

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}>
+    <StyledLabel className={styles.label} htmlFor={id}>
-      <input
+      <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>
   );
 };
 

ui/src/components/checkbox/style.css

@@ -1,3 +0,0 @@
-.label {
-  color: #646464;
-}

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'),

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>
+  ));