Merge pull request #100 from yldio/styled-components

updating styled components

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,67 @@
-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 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>
+    </RadioItem>
   );
 };
 
@@ -33,6 +69,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

@@ -1,52 +1,71 @@
 const React = require('react');
 const constants = require('../../shared/constants');
 const Styled = require('styled-components');
+const fns = require('../../shared/functions');
 
 const {
-  boxes
+  boxes,
+  colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled,
 } = Styled;
 
+const CustomInputCircle = `
+  content: '';
+  position: absolute;
+  width: 8px;
+	height: 8px;
+  background: #646464;
+  top: -14px;
+  left: 14px;
+  border-radius: 100%;
+`;
+
 const StyledInput = styled.input`
   visibility: hidden;
+  display: none;
 
-  &:checked + label::after {
+  &:checked + span::after {
-    opacity: 1;
+    ${CustomInputCircle}
   }
-  &:disabled + label {
+  &:disabled + span {
-    background-color: rgb(249, 249, 249);
+    background-color: ${colors.inactiveBackground};
   }
-  &:disabled + label::after {
+  &:disabled + span::after {
     opacity: 0.3;
+    ${CustomInputCircle}
   }
 `;
 
-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 {
+const StyledContent = styled.div`
-    opacity: 0;
+  margin-left: ${remcalc(45)};
+  padding-top: ${remcalc(10)};
+`;
+
+const StyledSpan = styled.span`
+  color: #646464;
+  position: relative;
+
+  &::before {
     content: '';
     position: absolute;
-    width: 8px;
+    width: ${remcalc(24)};
-    height: 8px;
+    height: ${remcalc(24)};
-    background: rgb(100, 100, 100);
+    background-color: ${colors.inactiveBackground};
-    top: ${(23 / 2) - 4}px;
+    box-shadow: ${boxes.insetShaddow};
-    left: ${(23 / 2) - 4}px;
+    border: ${boxes.border.unchecked};
+    top: 5px;
+    left: 5px;
     border-radius: 100%;
-    transform: rotate(-45deg);
   }
 
   &:hover {
@@ -56,15 +75,6 @@ const StyledLabel = styled.label`
   }
 `;
 
-const StyledDiv = styled.div`
-  width: 24px;
-  height: 24px;
-  position: relative;
-`;
-
-const TextLabel = styled.label`
-`;
-
 const Radio = ({
   checked,
   children,
@@ -83,32 +93,30 @@ const Radio = ({
   tabIndex,
   value
 }) => {
-  const _children = label && children ? children : null;
 
   return (
-    <TextLabel>
+    <StyledLabel>
-      <StyledDiv>
+      <StyledInput
-        <StyledInput
+        checked={checked}
-          checked={checked}
+        defaultChecked={defaultChecked}
-          defaultChecked={defaultChecked}
+        disabled={disabled}
-          disabled={disabled}
+        form={form}
-          form={form}
+        id={id}
-          id={id}
+        name={name}
-          name={name}
+        onChange={onChange}
-          onChange={onChange}
+        readOnly={readOnly}
-          readOnly={readOnly}
+        required={required}
-          required={required}
+        selectionDirection={selectionDirection}
-          selectionDirection={selectionDirection}
+        tabIndex={tabIndex}
-          tabIndex={tabIndex}
+        type='radio'
-          type='radio'
+        value={value}
-          value={value}
+      />
-        />
+      <StyledSpan>
-        <StyledLabel />
+        <StyledContent>
-      </StyledDiv>
+          {children}
-      <span>
+        </StyledContent>
-        {_children}
+      </StyledSpan>
-      </span>
+    </StyledLabel>
-    </TextLabel>
   );
 };
 
@@ -121,7 +129,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/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 {
+    & option {
-      padding-left: 15px;
+      padding-left: ${remcalc(15)};
-      padding-right: 15px;
+      padding-right: ${remcalc(15)};
       width: 100%;
     }
   }
@@ -51,19 +86,22 @@ const Select = ({
       <StyledLabel htmlFor={id}>
         {label}
       </StyledLabel>
-      <StyledSelect
+
-        autoFocus={autoFocus}
+      <SelectWrapper>
-        disabled={disabled}
+        <StyledSelect
-        form={form}
+          autoFocus={autoFocus}
-        id={id}
+          disabled={disabled}
-        label={label}
+          form={form}
-        multiple={multiple}
+          id={id}
-        name={name}
+          label={label}
-        required={required}
+          multiple={multiple}
-        selected={selected}
+          name={name}
-      >
+          required={required}
-        {children}
+          selected={selected}
-      </StyledSelect>
+        >
+          {children}
+        </StyledSelect>
+      </SelectWrapper>
     </div>
   );
 };

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;
+    right: 24px;
-    top: 13px;
+    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'
       />

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'};
   `
 };

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>
@@ -223,11 +223,10 @@ storiesOf('RangeSlider', module)
 storiesOf('Select', module)
   .add('Default', () => (
     <Select label='example select'>
-      <option>1</option>
+      <option>Apple</option>
-      <option>2</option>
+      <option>Banana</option>
-      <option>3</option>
+      <option>Pear</option>
-      <option>4</option>
+      <option>Orange</option>
-      <option>5</option>
     </Select>
   ))
   .add('multiple', () => (