From 458d792a171dc948b0f957a9d6da2b5d19d0d999 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 13 Dec 2016 11:01:18 +0000
Subject: [PATCH 1/6] updating radio group component

---
 ui/src/components/radio-group/index.js |  4 +-
 ui/src/components/radio-group/item.js  | 66 +++++++++++++++++++++-----
 ui/src/components/radio/index.js       |  2 +-
 ui/stories/index.js                    |  6 +--
 4 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/radio-group/index.js b/ui/src/components/radio-group/index.js
index 42c5fdd4..ea442f3e 100644
--- a/ui/src/components/radio-group/index.js
+++ b/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}
         >
diff --git a/ui/src/components/radio-group/item.js b/ui/src/components/radio-group/item.js
index 4f37b437..7a691c83 100644
--- a/ui/src/components/radio-group/item.js
+++ b/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
 };
diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js
index b191b0fb..ce529a85 100644
--- a/ui/src/components/radio/index.js
+++ b/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,
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 6d2730f4..9fca487c 100644
--- a/ui/stories/index.js
+++ b/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>

From 0238d007b8ae84e23ec75a39e298b6b3712449c5 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 14 Dec 2016 12:30:25 +0000
Subject: [PATCH 2/6] refactoing radio input

---
 ui/src/components/radio-group/item.js |   7 --
 ui/src/components/radio/index.js      | 118 +++++++++++++-------------
 2 files changed, 59 insertions(+), 66 deletions(-)

diff --git a/ui/src/components/radio-group/item.js b/ui/src/components/radio-group/item.js
index 7a691c83..565048d5 100644
--- a/ui/src/components/radio-group/item.js
+++ b/ui/src/components/radio-group/item.js
@@ -43,10 +43,6 @@ const RadioItem = styled.div`
   }
 `;
 
-const ItemContent = styled.div`
-  display: block;
-  float: left;
-`;
 
 const Item = ({
   children,
@@ -65,9 +61,6 @@ const Item = ({
       tabIndex={tabIndex}
     >
       {children}
-      <ItemContent>
-        {itemContent}
-      </ItemContent>
     </RadioItem>
   );
 };
diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js
index ce529a85..1ed4a554 100644
--- a/ui/src/components/radio/index.js
+++ b/ui/src/components/radio/index.js
@@ -10,59 +10,61 @@ const {
   default: styled,
 } = Styled;
 
+let top;
+const left = top = 5;
+
+const CustomInputCircle = `
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: rgb(100, 100, 100);
+  top: ${top * 2}px;
+  left: ${left * 2}px;
+  border-radius: 100%;
+`;
+
 const StyledInput = styled.input`
   visibility: hidden;
+  display: none;
 
-  &:checked + label::after {
-    opacity: 1;
+  &:checked + span::after {
+    ${CustomInputCircle}
   }
-  &:disabled + label {
+  &:disabled + span {
     background-color: rgb(249, 249, 249);
   }
-  &:disabled + label::after {
+  &:disabled + span::after {
     opacity: 0.3;
+    ${CustomInputCircle}
   }
 `;
 
-const border = 1;
 const StyledLabel = styled.label`
-  color: rgb(100, 100, 100);
+`;
+
+const StyledSpan = styled.span`
+color: rgb(100, 100, 100);
+position: relative;
+
+&::before {
+  content: '';
   position: absolute;
-  width: ${24 - border}px;
-  height: ${24 - border}px;
-  top: 0;
-  border-radius: 100%;
+  width: 16px;
+  height: 16px;
   background-color: rgb(255, 255, 255);
   box-shadow: ${boxes.insetShaddow};
   border: ${boxes.border.unchecked};
+  top: ${top}px;
+  left: ${left}px;
+  border-radius: 100%;
+}
 
+&:hover {
   &::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);
+    opacity: 0.3;
   }
-
-  &:hover {
-    &::after {
-      opacity: 0.3;
-    }
-  }
-`;
-
-const StyledDiv = styled.div`
-  width: 24px;
-  height: 24px;
-  position: relative;
-`;
-
-const TextLabel = styled.label`
+}
 `;
 
 const Radio = ({
@@ -83,32 +85,30 @@ const Radio = ({
   tabIndex,
   value
 }) => {
-  const _children = label && children ? children : null;
+  // debugger
+  // const _children = label && children ? children : null;
 
   return (
-    <TextLabel>
-      <StyledDiv>
-        <StyledInput
-          checked={checked}
-          defaultChecked={defaultChecked}
-          disabled={disabled}
-          form={form}
-          id={id}
-          name={name}
-          onChange={onChange}
-          readOnly={readOnly}
-          required={required}
-          selectionDirection={selectionDirection}
-          tabIndex={tabIndex}
-          type='radio'
-          value={value}
-        />
-        <StyledLabel />
-      </StyledDiv>
-      <span>
-        {_children}
-      </span>
-    </TextLabel>
+    <StyledLabel>
+      <StyledInput
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        form={form}
+        id={id}
+        name={name}
+        onChange={onChange}
+        readOnly={readOnly}
+        required={required}
+        selectionDirection={selectionDirection}
+        tabIndex={tabIndex}
+        type='radio'
+        value={value}
+      />
+      <StyledSpan>
+        {children}
+      </StyledSpan>
+    </StyledLabel>
   );
 };
 

From 20a05c5de6f84edfeab32e164c46ec36380cd166 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 14 Dec 2016 13:53:19 +0000
Subject: [PATCH 3/6] further refactoing of radio input

---
 ui/src/components/radio/index.js | 43 +++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js
index 1ed4a554..1eb82fd7 100644
--- a/ui/src/components/radio/index.js
+++ b/ui/src/components/radio/index.js
@@ -1,26 +1,28 @@
 const React = require('react');
 const constants = require('../../shared/constants');
 const Styled = require('styled-components');
+const fns = require('../../shared/functions');
 
 const {
   boxes
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled,
 } = Styled;
 
-let top;
-const left = top = 5;
-
 const CustomInputCircle = `
   content: '';
   position: absolute;
-  width: 8px;
-  height: 8px;
-  background: rgb(100, 100, 100);
-  top: ${top * 2}px;
-  left: ${left * 2}px;
+  width: 14px;
+  height: 14px;
+  background: #646464;
+  top: -16px;
+  left: 12px;
   border-radius: 100%;
 `;
 
@@ -32,7 +34,7 @@ const StyledInput = styled.input`
     ${CustomInputCircle}
   }
   &:disabled + span {
-    background-color: rgb(249, 249, 249);
+    background-color: #F9f9F9;
   }
   &:disabled + span::after {
     opacity: 0.3;
@@ -43,20 +45,25 @@ const StyledInput = styled.input`
 const StyledLabel = styled.label`
 `;
 
+const StyledContent = styled.div`
+  margin-left: ${remcalc(45)};
+  padding-top: ${remcalc(10)};
+`;
+
 const StyledSpan = styled.span`
-color: rgb(100, 100, 100);
+color: #646464;
 position: relative;
 
 &::before {
   content: '';
   position: absolute;
-  width: 16px;
-  height: 16px;
-  background-color: rgb(255, 255, 255);
+  width: ${remcalc(26)};
+  height: ${remcalc(26)};
+  background-color: #FFFFFF;
   box-shadow: ${boxes.insetShaddow};
   border: ${boxes.border.unchecked};
-  top: ${top}px;
-  left: ${left}px;
+  top: 5px;
+  left: 5px;
   border-radius: 100%;
 }
 
@@ -85,8 +92,6 @@ const Radio = ({
   tabIndex,
   value
 }) => {
-  // debugger
-  // const _children = label && children ? children : null;
 
   return (
     <StyledLabel>
@@ -106,7 +111,9 @@ const Radio = ({
         value={value}
       />
       <StyledSpan>
-        {children}
+        <StyledContent>
+          {children}
+        </StyledContent>
       </StyledSpan>
     </StyledLabel>
   );

From 2ee92dfb52a107a8d00f133bee963beedf88be46 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 14 Dec 2016 14:35:09 +0000
Subject: [PATCH 4/6] refactoring toggle and adding pseudo element composer

---
 ui/src/components/toggle/index.js | 28 +++++++++++++++++-----------
 ui/src/shared/composers.js        | 10 ++++++++++
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js
index 399411ee..6a22d6a7 100644
--- a/ui/src/components/toggle/index.js
+++ b/ui/src/components/toggle/index.js
@@ -1,4 +1,5 @@
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
@@ -8,6 +9,10 @@ const {
   colors
 } = constants;
 
+const {
+  pseudoEl
+} = composers;
+
 const {
   remcalc,
   rndId
@@ -25,7 +30,7 @@ const StyledLabel = styled.label`
   border-radius: ${boxes.borderRadius};
   color: #464646;
   height: 2.5rem;
-  width: 110px;
+  width: ${remcalc(110)};
 `;
 
 const StyledToggleLabel = styled.div`
@@ -35,7 +40,7 @@ const StyledToggleLabel = styled.div`
   color: #000000;
   height: ${remcalc(54)};
   margin: 0.125rem;
-  padding: ${remcalc('12 12 12 0')};
+  padding-left: ${remcalc(12)};
   position: relative;
   text-align: right;
   width: ${remcalc(106)};
@@ -46,19 +51,20 @@ const StyledToggleLabel = styled.div`
     font-size: inherit;
     font-weight: bold;
     position: absolute;
-    right: 14px;
-    top: 13px;
+    right: 24px;
+    top: 19px;
   }
 
   &::after {
     background-color: #FFFFFF;
     border-radius: ${boxes.borderRadius};
-    content: "";
     height: ${remcalc(46)};
-    left: 3px;
-    position: absolute;
-    top: 3px;
     width: ${remcalc(46)};
+
+    ${pseudoEl({
+      top: '3px',
+      left: '3px',
+    })}
   }
 `;
 
@@ -70,12 +76,13 @@ const StyledInput = styled.input`
       background: ${colors.confirmation};
       border: ${boxes.border.confirmed};
       color: #FFFFFF;
-      padding: ${remcalc('12 0 12 12')};
+      padding-left: 0;
+      padding-right: ${remcalc(12)};
       text-align: left;
 
       &::before {
         content: "On";
-        left: 14px;
+        left: 20px;
         right: auto;
       }
 
@@ -101,7 +108,6 @@ const Toggle = ({
       style={style}
     >
       <StyledInput
-        checked={checked}
         id={id}
         type='checkbox'
       />
diff --git a/ui/src/shared/composers.js b/ui/src/shared/composers.js
index d0451bbc..517b2eeb 100644
--- a/ui/src/shared/composers.js
+++ b/ui/src/shared/composers.js
@@ -37,5 +37,15 @@ module.exports = {
     border: ${border};
     border-radius: ${radius};
     box-shadow: ${shadow};
+  `,
+  pseudoEl: (
+    positions = {}
+  ) => css`
+    content: "";
+    position: absolute;
+    top: ${positions.top || 'auto'};
+    right: ${positions.right || 'auto'};
+    bottom: ${positions.bottom || 'auto'};
+    left: ${positions.left || 'auto'};
   `
 };

From 294a9e26a9a7916e7a36259937d6d44c4f476df8 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 14 Dec 2016 17:22:09 +0000
Subject: [PATCH 5/6] updating option select component

---
 ui/src/components/select/index.js | 74 +++++++++++++++++++++++--------
 ui/stories/index.js               |  9 ++--
 2 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/select/index.js b/ui/src/components/select/index.js
index abe8b35a..5f33b49a 100644
--- a/ui/src/components/select/index.js
+++ b/ui/src/components/select/index.js
@@ -1,11 +1,17 @@
 const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  rndId
+  rndId,
+  remcalc
 } = fns;
 
+const {
+  pseudoEl
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -15,8 +21,37 @@ const StyledLabel = styled.div`
   color: #464646;
 `;
 
+const SelectWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+
+  &:after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid black;
+
+    ${pseudoEl({
+      top: '25px',
+      right: '20px'
+    })}
+  }
+`;
+
+
 const StyledSelect = styled.select`
-  color: #464646;
+  font-size:16px;
+  min-width: ${remcalc(288)};
+  min-height: ${remcalc(54)};
+  border-radius: 4px;
+  padding-left: ${remcalc(20)};
+  background-color: #FFFFFF;
+  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
+  border: solid 1px #D8D8D8;
+  -webkit-appearance: none;
+
+  &:before {
+    ${pseudoEl()}
+  }
 
   /* select[multiple] is valid CSS syntax - not added to lint library yet */
   /* stylelint-disable */
@@ -25,9 +60,9 @@ const StyledSelect = styled.select`
     padding-left: 0;
     padding-right: 0;
 
-    & :global option {
-      padding-left: 15px;
-      padding-right: 15px;
+    & option {
+      padding-left: ${remcalc(15)};
+      padding-right: ${remcalc(15)};
       width: 100%;
     }
   }
@@ -51,19 +86,22 @@ const Select = ({
       <StyledLabel htmlFor={id}>
         {label}
       </StyledLabel>
-      <StyledSelect
-        autoFocus={autoFocus}
-        disabled={disabled}
-        form={form}
-        id={id}
-        label={label}
-        multiple={multiple}
-        name={name}
-        required={required}
-        selected={selected}
-      >
-        {children}
-      </StyledSelect>
+
+      <SelectWrapper>
+        <StyledSelect
+          autoFocus={autoFocus}
+          disabled={disabled}
+          form={form}
+          id={id}
+          label={label}
+          multiple={multiple}
+          name={name}
+          required={required}
+          selected={selected}
+        >
+          {children}
+        </StyledSelect>
+      </SelectWrapper>
     </div>
   );
 };
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 9fca487c..22806a2f 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -223,11 +223,10 @@ storiesOf('RangeSlider', module)
 storiesOf('Select', module)
   .add('Default', () => (
     <Select label='example select'>
-      <option>1</option>
-      <option>2</option>
-      <option>3</option>
-      <option>4</option>
-      <option>5</option>
+      <option>Apple</option>
+      <option>Banana</option>
+      <option>Pear</option>
+      <option>Orange</option>
     </Select>
   ))
   .add('multiple', () => (

From b67c7d90262344482cb61ae8b99bacd4a778e6f0 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Thu, 15 Dec 2016 10:49:18 +0000
Subject: [PATCH 6/6] neating up colors with constnats and correcting
 indentation

---
 ui/src/components/radio/index.js | 51 ++++++++++++++++----------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js
index 1eb82fd7..ce3b19e0 100644
--- a/ui/src/components/radio/index.js
+++ b/ui/src/components/radio/index.js
@@ -4,7 +4,8 @@ const Styled = require('styled-components');
 const fns = require('../../shared/functions');
 
 const {
-  boxes
+  boxes,
+  colors
 } = constants;
 
 const {
@@ -18,11 +19,11 @@ const {
 const CustomInputCircle = `
   content: '';
   position: absolute;
-  width: 14px;
-  height: 14px;
+  width: 8px;
+	height: 8px;
   background: #646464;
-  top: -16px;
-  left: 12px;
+  top: -14px;
+  left: 14px;
   border-radius: 100%;
 `;
 
@@ -34,7 +35,7 @@ const StyledInput = styled.input`
     ${CustomInputCircle}
   }
   &:disabled + span {
-    background-color: #F9f9F9;
+    background-color: ${colors.inactiveBackground};
   }
   &:disabled + span::after {
     opacity: 0.3;
@@ -51,27 +52,27 @@ const StyledContent = styled.div`
 `;
 
 const StyledSpan = styled.span`
-color: #646464;
-position: relative;
+  color: #646464;
+  position: relative;
 
-&::before {
-  content: '';
-  position: absolute;
-  width: ${remcalc(26)};
-  height: ${remcalc(26)};
-  background-color: #FFFFFF;
-  box-shadow: ${boxes.insetShaddow};
-  border: ${boxes.border.unchecked};
-  top: 5px;
-  left: 5px;
-  border-radius: 100%;
-}
-
-&:hover {
-  &::after {
-    opacity: 0.3;
+  &::before {
+    content: '';
+    position: absolute;
+    width: ${remcalc(24)};
+    height: ${remcalc(24)};
+    background-color: ${colors.inactiveBackground};
+    box-shadow: ${boxes.insetShaddow};
+    border: ${boxes.border.unchecked};
+    top: 5px;
+    left: 5px;
+    border-radius: 100%;
+  }
+
+  &:hover {
+    &::after {
+      opacity: 0.3;
+    }
   }
-}
 `;
 
 const Radio = ({