Merge pull request #100 from yldio/styled-components

updating styled components
2016-12-15 11:15:19 +00:00 · 2016-12-15 11:15:19 +00:00 · 0287041cc8
parent 4c4ea3c5d2 b67c7d9026
commit 0287041cc8
7 changed files with 207 additions and 107 deletions
--- 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}
        >
--- a/ui/src/components/radio-group/item.js
+++ b/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
 };
--- a/ui/src/components/radio/index.js
+++ b/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 {
-    opacity: 1;
+  &:checked + span::after {
+    ${CustomInputCircle}
  }
-  &:disabled + label {
-    background-color: rgb(249, 249, 249);
+  &:disabled + span {
+    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 {
-    opacity: 0;
+const StyledContent = styled.div`
+  margin-left: ${remcalc(45)};
+  padding-top: ${remcalc(10)};
+`;
+
+const StyledSpan = styled.span`
+  color: #646464;
+  position: relative;
+
+  &::before {
    content: '';
    position: absolute;
-    width: 8px;
-    height: 8px;
-    background: rgb(100, 100, 100);
-    top: ${(23 / 2) - 4}px;
-    left: ${(23 / 2) - 4}px;
+    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%;
-    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>
-      <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>
+        <StyledContent>
+          {children}
+        </StyledContent>
+      </StyledSpan>
+    </StyledLabel>
  );
 };

@ -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,
--- 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>
  );
 };
--- 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'
      />
--- 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'};
  `
 };
--- 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>
@ -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', () => (