updating toggle ui component

ui/src/components/toggle/index-old.js

@@ -0,0 +1,136 @@
+const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  boxes,
+  colors,
+  typography
+} = constants;
+
+const {
+  pseudoEl
+} = composers;
+
+const {
+  remcalc,
+  rndId
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const classNames = {
+  label: rndId()
+};
+
+const StyledLabel = styled.label`
+  border-radius: ${boxes.borderRadius};
+  color: #464646;
+  height: 2.5rem;
+  width: ${remcalc(110)};
+`;
+
+const StyledToggleLabel = styled.div`
+  background-color: #E6E6E6;
+  border: solid 1px #D8D8D8;
+  border-radius: ${boxes.borderRadius};
+  color: #000000;
+  height: ${remcalc(54)};
+  margin: 0.125rem;
+  padding-left: ${remcalc(12)};
+  position: relative;
+  text-align: right;
+  width: ${remcalc(106)};
+
+  &::before {
+    content: "${props => props.labelRight}";
+    font-family: ${typography.fontPrimary};
+    font-size: inherit;
+    font-weight: bold;
+    position: absolute;
+    right: 24px;
+    top: 19px;
+  }
+
+  &::after {
+    content: "${props => props.labelLeft}";
+    background-color: #FFFFFF;
+    border-radius: ${boxes.borderRadius};
+    height: ${remcalc(46)};
+    width: ${remcalc(46)};
+
+    ${pseudoEl({
+      top: '3px',
+      left: '3px',
+    })}
+  }
+`;
+
+const StyledInput = styled.input`
+  display: none;
+
+  &:checked {
+    & + .${classNames.label} {
+      background: ${colors.confirmation};
+      border: ${boxes.border.confirmed};
+      color: #FFFFFF;
+      padding-left: 0;
+      padding-right: ${remcalc(12)};
+      text-align: left;
+
+      &::before {
+        content: "${props => props.labelLeft}";
+
+        left: 20px;
+        right: auto;
+      }
+
+      &::after {
+        left: auto;
+        right: 3px;
+      }
+    }
+  }
+`;
+
+const Toggle = ({
+  checked,
+  className,
+  defaultChecked,
+  labelLeft = "On",
+  labelRight = "Off",
+  id = rndId(),
+  style
+}) => {
+  return (
+    <StyledLabel
+      className={className}
+      htmlFor={id}
+      style={style}
+    >
+      <StyledInput
+        id={id}
+        labelLeft={labelLeft}
+        type='checkbox'
+      />
+      <StyledToggleLabel
+        className={classNames.label}
+        labelRight={labelRight}
+      />
+    </StyledLabel>
+  );
+};
+
+Toggle.propTypes = {
+  checked: React.PropTypes.bool,
+  className: React.PropTypes.string,
+  defaultChecked: React.PropTypes.bool,
+  id: React.PropTypes.string,
+  style: React.PropTypes.object
+};
+
+module.exports = Toggle;

ui/src/components/toggle/index.js

@@ -11,7 +11,8 @@ const {
 } = constants;
 
 const {
-  pseudoEl
+  pseudoEl,
+  baseBox
 } = composers;
 
 const {
@@ -20,100 +21,118 @@ const {
 } = fns;
 
 const {
-  default: styled
+  default: styled,
+  keyframes
 } = Styled;
 
 const classNames = {
   label: rndId()
 };
 
-const StyledLabel = styled.label`
+const slide = (
-  border-radius: ${boxes.borderRadius};
+  direction = 'left'
-  color: #464646;
+) => {
-  height: 2.5rem;
+  keyframes`
-  width: ${remcalc(110)};
+    from {
+      left: 0;
+    }
+  
+    to {
+      left: 100%;
+    }
+  `;
+}
+
+const backgroundGradient = (index) => {
+  const colorDefault = index === 1  ? 'red' : 'blue';
+  const colorAlt = index === 1  ? 'blue' : 'red';
+  debugger
+  return css`
+    background: linear-gradient(to right, ${colorDefault} 50%, ${colorAlt} 50%);
+  `;
+}
+
+
+const StyledText = styled.span`
+  padding: 1rem;
+  display: inline-block;
 `;
 
-const StyledToggleLabel = styled.div`
+const StyledDiv = styled.div`
-  background-color: #E6E6E6;
+  display: inline-block;
-  border: solid 1px #D8D8D8;
+  background-color: ${colors.brandInactive};
-  border-radius: ${boxes.borderRadius};
+  animation: ${slide} 0.5s forwards;
-  color: #000000;
+  
-  height: ${remcalc(54)};
+  ${baseBox()}
-  margin: 0.125rem;
-  padding-left: ${remcalc(12)};
-  position: relative;
-  text-align: right;
-  width: ${remcalc(106)};
-
-  &::before {
-    content: "Off";
-    font-family: ${typography.fontPrimary};
-    font-size: inherit;
-    font-weight: bold;
-    position: absolute;
-    right: 24px;
-    top: 19px;
-  }
-
-  &::after {
-    background-color: #FFFFFF;
-    border-radius: ${boxes.borderRadius};
-    height: ${remcalc(46)};
-    width: ${remcalc(46)};
-
-    ${pseudoEl({
-      top: '3px',
-      left: '3px',
-    })}
-  }
 `;
 
-const StyledInput = styled.input`
+
+const StyledInput_1 = styled.input`
   display: none;
 
+  & + span {
+    background: #ff3232;
+    background: linear-gradient(to right, red 50%, blue 50%);
+    background-size: 200% 100%;
+    background-position:left bottom;
+    transition:all .5s ease;
+  }
+  
   &:checked {
-    & + .${classNames.label} {
+      
-      background: ${colors.confirmation};
+      
-      border: ${boxes.border.confirmed};
+    & + span {
-      color: #FFFFFF;
+      background-position: right bottom;
-      padding-left: 0;
-      padding-right: ${remcalc(12)};
-      text-align: left;
-
-      &::before {
-        content: "On";
-        left: 20px;
-        right: auto;
-      }
-
-      &::after {
-        left: auto;
-        right: 3px;
-      }
     }
   }
 `;
 
+const StyledInput_2 = styled.input`
+  display: none;
+
+  & + span {
+    background: #ff3232;
+    background: linear-gradient(to right, blue 50%, red 50%);
+    background-size: 200% 100%;
+    background-position:right bottom;
+    transition:all .5s ease;
+  }
+  
+  &:checked {
+      
+      
+    & + span {
+      background-position: left bottom;
+    }
+  }
+`;
+
+const StyledLabel = styled.label`
+`;
+
+
 const Toggle = ({
   checked,
   className,
   defaultChecked,
+  options = [
+    "On",
+    "Off"
+  ],
   id = rndId(),
   style
 }) => {
   return (
-    <StyledLabel
+    <StyledDiv>
-      className={className}
+      <StyledLabel>
-      htmlFor={id}
+        <StyledInput_1 defaultChecked name="toggler" type="radio" value={options[0]} index={1} />
-      style={style}
+        <StyledText>{options[0]}</StyledText>
-    >
+      </StyledLabel>
-      <StyledInput
+      <StyledLabel>
-        id={id}
+        <StyledInput_2 name="toggler" type="radio" value={options[1]} index={2} />
-        type='checkbox'
+        <StyledText>{options[1]}</StyledText>
-      />
+      </StyledLabel>
-      <StyledToggleLabel className={classNames.label} />
+    </StyledDiv>
-    </StyledLabel>
   );
 };
 

ui/src/components/toggle/readme.md

@@ -16,7 +16,11 @@ nmodule.exports = ReactDOM.renderToString(
   <Base>  
     <Row>
       <Column>
-        <Toggle checked />
+        <Toggle 
+          checked 
+          labelLeft='Topology' 
+          lavelRight='List'
+        />
       </Column>
     </Row>
   </Base>

ui/stories/index.js

@@ -333,17 +333,22 @@ storiesOf('Tabs', module)
   ));
 
 storiesOf('Toggle', module)
-  .add('checked', () => (
+  .add('default', () => (
     <Toggle checked />
   ))
-  .add('unchecked', () => (
+  .add('checked', () => (
-    <Toggle checked={false} />
+    <Toggle
-  ))
+      defaultChecked
-  .add('defaultChecked', () => (
+      labelLeft='Topology'
-    <Toggle defaultChecked />
+      labelRight='List'
+    />
   ))
   .add('no props', () => (
-    <Toggle />
+    <Toggle
+      checked
+      labelLeft='Topology'
+      labelRight='List'
+    />
   ));
 
 storiesOf('Tooltip', module)