Implement checkbox

ui/src/components/button/index.js

@@ -55,6 +55,6 @@ module.exports = styled.button`
   padding: ${remcalc('18 24')};
 
   background: ${background};
-  border: 1px solid ${border};
+  border: solid 1px ${border};
   color: ${color};
 `;

ui/src/components/checkbox/index.js

@@ -24,10 +24,55 @@ const styles = {
 };
 
 const StyledInput = styled.input`
+  visibility: hidden;
+  &:checked + label::after {
+    opacity: 1;
+  }
+  &:disabled + label {
+    background-color: rgb(249, 249, 249);
+  }
+  &:disabled + label::after {
+    opacity: 0.3;
+  }
 `;
 
 const StyledLabel = styled.label`
-  color: #646464;
+  color: rgb(100, 100, 100);
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  border-radius: ${boxes.borderRadius};
+  background-color: rgb(255, 255, 255);
+  box-shadow: ${boxes.insetShaddow};
+  border: ${boxes.border.unchecked};
+
+  &::after {
+    opacity: 0;
+    content: '';
+    position: absolute;
+    width: 9px;
+    height: 4px;
+    background: transparent;
+    top: 7px;
+    left: 7px;
+    border: 3px solid #333;
+    border-top: none;
+    border-right: none;
+    transform: rotate(-45deg);
+  }
+
+  &:hover {
+    &::after {
+      opacity: 0.3;
+    }
+  }
+`;
+
+const StyledDiv = styled.div`
+  width: 24px;
+  height: 24px;
+  position: relative;
 `;
 
 const Checkbox = ({
@@ -45,21 +90,12 @@ const Checkbox = ({
   style,
   tabIndex
 }) => {
-  const cn = classNames(
-    className,
-    styles.checkbox,
-    checked ? styles.checked : '',
-    disabled ? styles.disabled : ''
-  );
-
   return (
-    <StyledLabel className={styles.label} htmlFor={id}>
+    <StyledDiv>
       <StyledInput
         checked={checked}
-        className={cn}
         disabled={disabled}
         form={form}
-        id={id}
         name={name}
         onChange={onChange}
         readOnly={readOnly}
@@ -68,8 +104,10 @@ const Checkbox = ({
         tabIndex={tabIndex}
         type='checkbox'
       />
+      <StyledLabel>
         <span>{children}</span>
       </StyledLabel>
+    </StyledDiv>
   );
 };
 

ui/src/shared/constants.js

@@ -1,6 +1,5 @@
 const styled = require('styled-components');
 
-
 const calc = require('reduce-css-calc');
 const traverse = require('traverse');
 const isFunction = require('lodash.isfunction');
@@ -76,7 +75,7 @@ const boxes = {
   insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
   border: {
     checked: '1px solid #2532bb',
-    unchecked: '1px solid #d8d8d8',
+    unchecked: '1px solid rgb(216, 216, 216)',
     confirmed: '1px solid #23AC32'
   }
 };

ui/stories/index.js

@@ -111,17 +111,11 @@ storiesOf('Button', module)
 
 storiesOf('Checkbox', module)
   .add('Default', () => (
-    <Checkbox>
-      Checkbox
-    </Checkbox>
+    <Checkbox />
   ))
   .add('Checked', () => (
-    <Checkbox checked onChange={function noop() {}}>
-      Checkbox Checked
-    </Checkbox>
+    <Checkbox checked onChange={function noop() {}} />
   ))
   .add('Disabled', () => (
-    <Checkbox disabled>
-      Checkbox Disabled
-    </Checkbox>
+    <Checkbox disabled />
   ));