feat(ui-toolkit): toggles implementation according to spec

packages/ui-toolkit/src/boxes/index.js

@@ -2,8 +2,8 @@ import { css } from 'styled-components';
 import remcalc from 'remcalc';
 
 export const borderRadius = remcalc(4);
-export const bottomShaddow = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`;
-export const bottomShaddowDarker = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`;
+export const bottomShadow = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`;
+export const bottomShadowDarker = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`;
 export const insetShaddow = `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`;
 export const tooltipShadow = `0 ${remcalc(2)} ${remcalc(6)} ${remcalc(
   1

packages/ui-toolkit/src/card/card.js

@@ -1,7 +1,7 @@
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
 import Baseline from '../baseline';
 import paperEffect from '../paper-effect';
-import { bottomShaddow, bottomShaddowDarker } from '../boxes';
+import { bottomShadow, bottomShadowDarker } from '../boxes';
 import remcalc from 'remcalc';
 import is, { isNot } from 'styled-is';
 import { Row } from 'react-styled-flexboxgrid';
@@ -15,7 +15,7 @@ const StyledCard = Row.extend`
   margin-bottom: ${remcalc(10)};
   border: ${remcalc(1)} solid ${props => props.theme.grey};
   background-color: ${props => props.theme.white};
-  box-shadow: ${bottomShaddow};
+  box-shadow: ${bottomShadow};
   flex-direction: column;
 
   margin-right: ${remcalc(0)};
@@ -28,7 +28,7 @@ const StyledCard = Row.extend`
   `};
 
   ${is('collapsed', 'headed')`
-    box-shadow: ${bottomShaddowDarker};
+    box-shadow: ${bottomShadowDarker};
   `};
 
   ${is('flat')`

packages/ui-toolkit/src/form/toggle.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'normalized-styled-components';
+import { Subscriber } from 'joy-react-broadcast';
 import remcalc from 'remcalc';
 import unitcalc from 'unitcalc';
 import rndId from 'rnd-id';
 import is from 'styled-is';
-import { Subscriber } from 'joy-react-broadcast';
 
-import { bottomShaddow, border, borderRadius } from '../boxes';
+import { bottomShadow, border, borderRadius } from '../boxes';
 import Baseline from '../baseline';
 import BaseInput from './base/input';
 import typography from '../typography';
@@ -16,36 +16,40 @@ const StyledInput = Input.extend`
   display: none;
 
   &:checked + label {
-    border-radius: ${remcalc(4)};
-    background-color: ${props => props.theme.white};
-    box-shadow: ${bottomShaddow};
     color: ${props => props.theme.secondary};
+    font-weight: bold;
+    width: 100%;
+    position: relative;
   }
 
   &:selected + label {
-    border-radius: ${remcalc(4)};
-    background-color: ${props => props.theme.white};
-    box-shadow: ${bottomShaddow};
     color: ${props => props.theme.secondary};
+    font-weight: bold;
+    width: 100%;
   }
 
   &:disabled + label {
     color: ${props => props.theme.grey};
+
+    & + .background {
+      display: none;
+    }
   }
 `;
 
 const Label = styled.label`
   ${typography.normal};
 
-  position: absolute;
   box-sizing: border-box;
-  width: ${unitcalc(20)};
-  height: ${unitcalc(8)};
-  top: 0;
-  left: 0;
-  text-align: center;
-  padding-top: ${unitcalc(2)};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: ${props => props.theme.text};
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  z-index: 1;
 
   ${is('error')`
     border-color: ${props => props.theme.redDark}
@@ -74,24 +78,49 @@ const InputContainer = styled.div`
 const Li = BaseInput(styled.li`
   display: inline-block;
   list-style-type: none;
-  vertical-align: text-bottom;
-  border-top: ${border.unchecked};
-  border-bottom: ${border.unchecked};
-  border-left: ${border.unchecked};
-  &:first-of-type {
-    border-radius: ${borderRadius} 0 0 ${borderRadius};
-  }
-  &:last-of-type {
-    border-radius: 0 ${borderRadius} ${borderRadius} 0;
-    border-right: ${border.unchecked};
-  }
+  box-sizing: border-box;
 `);
 
+const Background = styled.span`
+  border-right: ${border.unchecked};
+  background-color: ${props => props.theme.white};
+  display: block;
+  border-radius: ${borderRadius};
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 0;
+  transition: ${props => props.theme.transition};
+  border: ${props => `${remcalc(1)} solid ${props.theme.grey}`};
+  top: ${remcalc(-1)};
+`;
+
 const Ul = styled.ul`
   display: inline-block;
   margin: 0;
   padding: 0;
-  box-shadow: ${bottomShaddow};
+  height: ${remcalc(48)};
+  display: inline-flex;
+  align-items: flex-end;
+  background-color: ${props => props.theme.disabled};
+  border-radius: ${borderRadius};
+  border: ${border.unchecked};
+  position: relative;
+  margin-top: ${unitcalc(1)};
+
+  li:first-of-type {
+    input + label + .background {
+      transform: translateX(calc(100% - ${remcalc(3)}));
+    }
+
+    input:checked + label + .background {
+      transform: translateX(${remcalc(-1)});
+    }
+  }
+
+  li:last-of-type .background {
+    display: none;
+  }
 `;
 
 const BaseToggle = BaseInput(({ children, ...rest }) => {
@@ -100,13 +129,7 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
     return (
       <Li>
         <InputContainer>
-          <StyledInput
-            checked={value.value === rest.value}
-            {...value}
-            {...rest}
-            id={id}
-            type="radio"
-          />
+          <StyledInput {...value} {...rest} id={id} type="radio" />
           <Label
             htmlFor={id}
             error={rest.error}
@@ -115,6 +138,7 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
           >
             {children}
           </Label>
+          <Background className="background" />
         </InputContainer>
       </Li>
     );

packages/ui-toolkit/src/form/usage-toggle.md

@@ -3,23 +3,7 @@ const { ToggleList } = require('./toggle');
 const FormGroup = require('./group').default;
 const Legend = require('./legend').default;
 
-<FormGroup name='who-killed'>
-  <Legend>Who killed the radio star?</Legend>
-  <ToggleList>
-    <Toggle value='video'>Video</Toggle>
-    <Toggle value='tv'>TV</Toggle>
-  </ToggleList>
-</FormGroup>
-```
-
-#### selected
-
-```
-const { ToggleList } = require('./toggle');
-const FormGroup = require('./group').default;
-const Legend = require('./legend').default;
-
-<FormGroup name='who-killed'>
+<FormGroup name='who-killed-1'>
   <Legend>Who killed the radio star?</Legend>
   <ToggleList>
     <Toggle value='video' checked>Video</Toggle>
@@ -28,14 +12,14 @@ const Legend = require('./legend').default;
 </FormGroup>
 ```
 
-#### `disabled`
+#### Toggle > Disabled
 
 ```
 const { ToggleList } = require('./toggle');
 const FormGroup = require('./group').default;
 const Legend = require('./legend').default;
 
-<FormGroup name='who-killed' disabled>
+<FormGroup name='who-killed-2' disabled>
   <Legend>Who killed the radio star?</Legend>
   <ToggleList>
     <Toggle value='video'>Video</Toggle>

packages/ui-toolkit/src/icon-button/usage.md

@@ -1,7 +0,0 @@
-```
-const CloseIcon = require('../icons/close').default;
-
-<IconButton>
-  <CloseIcon/>
-</IconButton>
-```

packages/ui-toolkit/src/index.js

@@ -38,8 +38,8 @@ export {
 
 export {
   borderRadius,
-  bottomShaddow,
-  bottomShaddowDarker,
+  bottomShadow,
+  bottomShadowDarker,
   insetShaddow,
   tooltipShadow,
   border

packages/ui-toolkit/src/message/index.js

@@ -8,13 +8,13 @@ import remcalc from 'remcalc';
 import { H4 } from '../text/headings';
 import P from '../text/p';
 import CloseButton from '../close-button';
-import { border, bottomShaddow } from '../boxes';
+import { border, bottomShadow } from '../boxes';
 
 const Container = styled.div`
   position: relative;
   margin-bottom: ${unitcalc(2)};
   background-color: ${props => props.theme.white};
-  box-shadow: ${bottomShaddow};
+  box-shadow: ${bottomShadow};
   border: ${border.confirmed};
   width: 100%;
   display: flex;

packages/ui-toolkit/src/theme/index.js

@@ -105,6 +105,8 @@ export const seperator = '#D9DEF3'; */
 
 export const topologyBackground = base.secondaryActive;
 
+export const transition = 'all 200ms ease-out';
+
 export default {
   ...base,
   fonts,
@@ -113,5 +115,6 @@ export default {
   inputError,
   inputWarning,
   topologyBackground,
-  brandBackground
+  brandBackground,
+  transition
 };

packages/ui-toolkit/styleguide.config.js

@@ -97,7 +97,6 @@ module.exports = {
         'src/card/card.js',
         'src/form/checkbox.js',
         'src/header/index.js',
-        'src/icon-button/index.js',
         'src/icons/icons.js',
         'src/form/input.js',
         'src/message/index.js',
@@ -105,10 +104,8 @@ module.exports = {
         'src/form/radio.js',
         'src/section-list/index.js',
         'src/form/select.js',
-        'src/slider/index.js',
         'src/form/toggle.js',
-        'src/topology/index.js',
-        'src/form/number-input.js'
+        'src/topology/index.js'
       ]
     }
   ],