updating radio group component

ui/src/components/radio-group/index.js

@@ -19,7 +19,7 @@ const RadioGroup = React.createClass({
     children: React.PropTypes.node,
     className: React.PropTypes.string,
     id: React.PropTypes.string,
-    name: React.PropTypes.string.isRequired,
+    name: React.PropTypes.string,
     onChange: React.PropTypes.func,
     style: React.PropTypes.object
   },
@@ -105,6 +105,7 @@ const RadioGroup = React.createClass({
       const tabIndex = i + 1;
       const disabled = get(child, 'props.disabled');
       const value = get(child, 'props.value');
+      const itemContent = get(child, 'props.children');
 
       const _handleChange = (!hasChecked && !disabled)
         ? handleChange(value)
@@ -129,6 +130,7 @@ const RadioGroup = React.createClass({
         <Item
           checked={_checked}
           disabled={disabled}
+          itemContent={itemContent}
           onClick={_handleChange}
           tabIndex={tabIndex}
         >

ui/src/components/radio-group/item.js

@@ -1,31 +1,74 @@
-const classNames = require('classnames');
 const React = require('react');
-const styles = require('./style.css');
+// const composers = require('../../shared/composers');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+
+// const {
+//   verticallyAlignCenter
+// } = composers;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  boxes
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+const RadioItem = styled.div`
+  background: #FFFFFF;
+  border: ${boxes.border.unchecked};
+  cursor: pointer;
+  flaot: left;
+  margin-bottom: ${remcalc(15)};
+  padding: ${remcalc(25)};
+  outline: none;
+
+  &:last-child {
+    margin-bottom: initial;
+  }
+
+  &[aria-checked="true"] {
+    border: ${boxes.border.checked};
+    box-shadow: ${remcalc(boxes.borderRadius)};
+  }
+
+  &.disabled {
+    cursor: default;
+  }
+`;
+
+const ItemContent = styled.div`
+  display: block;
+  float: left;
+`;
 
 const Item = ({
   children,
   checked = false,
+  itemContent = '',
   disabled = false,
   onClick,
   tabIndex
 }) => {
-  const cn = classNames(
-    styles.item,
-    disabled ? styles.disabled : '',
-    checked ? styles.checked : ''
-  );
-
   return (
-    <div
+    <RadioItem
       aria-checked={checked}
       aria-disabled={disabled}
-      className={cn}
       onClick={onClick}
       role='radio'
       tabIndex={tabIndex}
     >
       {children}
-    </div>
+      <ItemContent>
+        {itemContent}
+      </ItemContent>
+    </RadioItem>
   );
 };
 
@@ -33,6 +76,7 @@ Item.propTypes = {
   checked: React.PropTypes.bool,
   children: React.PropTypes.node,
   disabled: React.PropTypes.bool,
+  itemContent: React.PropTypes.node,
   onClick: React.PropTypes.func,
   tabIndex: React.PropTypes.number
 };

ui/src/components/radio/index.js

@@ -121,7 +121,7 @@ Radio.propTypes = {
   form: React.PropTypes.string,
   id: React.PropTypes.string,
   label: React.PropTypes.string,
-  name: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string,
   onChange: React.PropTypes.func,
   readOnly: React.PropTypes.bool,
   required: React.PropTypes.bool,

ui/stories/index.js

@@ -203,13 +203,13 @@ storiesOf('Pagination', module)
 storiesOf('Radio Group', module)
   .add('Default', () => (
     <RadioGroup>
-      <Radio value='default'>
+      <Radio name='hello' value='default'>
        Video killed the radio star
       </Radio>
-      <Radio value='fancy'>
+      <Radio name='hello' value='fancy'>
        Video killed the radio star
       </Radio>
-      <Radio value='none'>
+      <Radio name='hello' value='none'>
        Video killed the radio star
       </Radio>
     </RadioGroup>