Radio Input - implimenting UI component and styling

ui/src/components/radio/index.js

@@ -0,0 +1,46 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Radio = ({
+  name,
+  value,
+  label,
+  checked,
+  disabled = false,
+  className,
+  id,
+  onChange,
+  style
+}) => {
+
+  const cn = classNames(
+    className,
+    styles.radio
+  );
+
+  return (
+    <label className={cn}>
+      <input
+        name={name}
+        value={value}
+        disabled={disabled}
+        checked={checked}
+        onChange={onChange}
+        type="radio"
+      />
+      <span>{label}</span>
+    </label>
+  );
+};
+
+Radio.propTypes = {
+  className: React.PropTypes.string,
+  name: React.PropTypes.string,
+  value: React.PropTypes.string,
+  label: React.PropTypes.string,
+  checked: React.PropTypes.bool,
+  onChange: React.PropTypes.func
+};
+
+module.exports = Radio;

ui/src/components/radio/readme.md

@@ -0,0 +1,42 @@
+# `<Radio>`
+
+## 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 Radio = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Container>
+      <Row>
+        <Column>
+          <Radio name='gender' value='female' label='Female' checked={false}/>
+          <Radio name='gender' value='male' label='Male' checked={true}/>
+        </Column>
+      </Row>
+    </Container>
+  </Base>
+);
+```
+
+
+## usage
+
+```js
+const React = require('react');
+const Radio = require('ui/radio');
+
+module.exports = () => {
+  return (
+    <Radio name='gender' value='female' label='Female' />
+    <Radio name='gender' value='male' label='Male' checked/>
+  );
+}
+```

ui/src/components/radio/style.css

@@ -0,0 +1,48 @@
+:root {
+  --radio-radius: 20px;
+}
+
+.radio {
+  cursor: pointer;
+
+  label {
+    display: block;
+  }
+
+  & span {
+    margin-left: 30px;
+    margin-right: 20px;
+    position: relative;
+
+    &:before {
+      content: '';
+      border : calc( var(--radio-radius) / 4 ) solid white;
+      border-radius: 50%;
+      box-shadow: 0 0 0 1px #cfd1d1;
+      display: inline-block;
+      height: var(--radio-radius);
+      left: -30px;
+      position: absolute;
+      top: -1px;
+      width: var(--radio-radius);
+    }
+  }
+
+  & input[type="radio"] {
+    display: none;
+    visibility: hidden;
+
+
+    &:checked {
+      & ~ span:before {
+        background: #D8D8D8;
+        border : calc( var(--radio-radius) / 4 ) solid white;
+        border-radius: 50%;
+        box-shadow: 0 0 0 1px #cfd1d1;
+        height: var(--radio-radius);
+        position: absolute;
+        width: var(--radio-radius);
+      }
+    }
+  }
+}

ui/src/docs.js

@@ -8,6 +8,7 @@ module.exports = {
     Base: require('./components/base/readme.md'),
     Container: require('./components/container/readme.md'),
     Row: require('./components/row/readme.md'),
+    Radio: require('./components/radio/readme.md'),
     Column: require('./components/column/readme.md'),
     Button: require('./components/button/readme.md'),
     Toggle: require('./components/toggle/readme.md'),

ui/src/index.js

@@ -8,4 +8,6 @@ module.exports = {
   Toggle: require('./components/toggle'),
   Tab: require('./components/tab'),
   Tabs: require('./components/tabs')
+  Toggle: require('./components/toggle')
+  Radio: require('./components/radio'),
 };