Add Radio Button

ui/src/components/radio/index.js

@@ -1,6 +1,69 @@
-const classNames = require('classnames');
 const React = require('react');
-const styles = require('./style.css');
+const constants = require('../../shared/constants');
+const Styled = require('styled-components');
+
+const {
+  boxes
+} = constants;
+
+const {
+  default: styled,
+} = Styled;
+
+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 border = 1;
+const StyledLabel = styled.label`
+  color: rgb(100, 100, 100);
+  position: absolute;
+  width: ${24 - border}px;
+  height: ${24 - border}px;
+  top: 0;
+  border-radius: 100%;
+  background-color: rgb(255, 255, 255);
+  box-shadow: ${boxes.insetShaddow};
+  border: ${boxes.border.unchecked};
+
+  &::after {
+    opacity: 0;
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: rgb(100, 100, 100);
+    top: ${(23 / 2) - 4}px;
+    left: ${(23 / 2) - 4}px;
+    border-radius: 100%;
+    transform: rotate(-45deg);
+  }
+
+  &:hover {
+    &::after {
+      opacity: 0.3;
+    }
+  }
+`;
+
+const StyledDiv = styled.div`
+  width: 24px;
+  height: 24px;
+  position: relative;
+`;
+
+const TextLabel = styled.label`
+`;
 
 const Radio = ({
   checked,
@@ -20,23 +83,13 @@ const Radio = ({
   tabIndex,
   value
 }) => {
-  const _label = label || children;
   const _children = label && children ? children : null;
 
-  const cn = classNames(
-    className,
-    styles.radio
-  );
-
-  const labelledby = `${styles.label}-label`;
-
   return (
-    <div className={cn}>
-      <label className={styles.label} htmlFor={id}>
-        <input
-          aria-labelledby={labelledby}
+    <TextLabel>
+      <StyledDiv>
+        <StyledInput
           checked={checked}
-          className={styles.input}
           defaultChecked={defaultChecked}
           disabled={disabled}
           form={form}
@@ -50,14 +103,12 @@ const Radio = ({
           type='radio'
           value={value}
         />
-        <span className={styles.span} id={labelledby}>
-          {_label}
-        </span>
-      </label>
+        <StyledLabel />
+      </StyledDiv>
       <span>
         {_children}
       </span>
-    </div>
+    </TextLabel>
   );
 };
 

ui/src/components/radio/style.css

@@ -1,36 +0,0 @@
-@import "../../shared/mixins.css";
-
-:root {
-  --radio-radius: 20px;
-  --radio-border-size: calc(var(--radio-radius) / 4);
-  --dot-color: #646464;
-  --border-color: #CFD1D1;
-}
-
-.radio {
-  cursor: pointer;
-
-  & .label {
-    display: block;
-  }
-
-  & .span {
-    margin-left: remcalc(30);
-    margin-right: remcalc(20);
-
-    @add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
-      border: var(--radio-border-size) solid white;
-      border-radius: 50%;
-      box-shadow: 0 0 0 1px var(--border-color);
-    }
-  }
-
-  & .input {
-    display: none;
-    visibility: hidden;
-
-    &:checked ~ .span::before {
-      background: var(--dot-color);
-    }
-  }
-}

ui/src/index.js

@@ -14,7 +14,7 @@ module.exports = {
   // Input: require('./components/input'),
   // Icon: require('./components/icon'),
   // RangeSlider: require('./components/range-slider'),
-  // Radio: require('./components/radio'),
+  Radio: require('./components/radio'),
   // RadioGroup: require('./components/radio-group'),
   // Select: require('./components/select'),
   Widget: require('./components/widget'),

ui/stories/index.js

@@ -17,6 +17,7 @@ const {
   Tab,
   Toggle,
   Widget
+  Radio,
 } = require('../src/');
 
 const styles = {
@@ -128,6 +129,7 @@ storiesOf('Checkbox', module)
     <Checkbox disabled />
   ));
 
+<<<<<<< HEAD
 storiesOf('Tabs', module)
   .add('Default', () => (
     <Tabs name='my-tab-group'>
@@ -161,3 +163,15 @@ storiesOf('Widget', module)
       <p>Some text</p>
     </Widget>
   ))
+=======
+storiesOf('Radio', module)
+  .add('Default', () => (
+    <Radio />
+  ))
+  .add('Checked', () => (
+    <Radio checked onChange={function noop() {}} />
+  ))
+  .add('Disabled', () => (
+    <Radio disabled />
+  ));
+>>>>>>> Add Radio Button