fix(ui-toolkit): header, button, and checkbox. new toggle

packages/ui-toolkit/etc/style.css

@@ -1,6 +1,10 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
 @import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
 
+body {
+    overflow-x: hidden;
+}
+
 body .rsg--sidebar-4 {
     padding: 36px 30px;
 }

packages/ui-toolkit/package.json

@@ -45,14 +45,14 @@
     "pascal-case": "^2.0.1",
     "prop-types": "^15.6.0",
     "react-bundle": "^1.0.4",
-    "react-input-range": "^1.2.1",
+    "react-input-range": "^1.2.2",
     "react-popper": "^0.7.4",
     "react-responsive": "^3.0.0",
     "react-styled-flexboxgrid": "^2.1.1",
     "redrun": "^5.10.0",
     "remcalc": "^1.0.9",
     "rnd-id": "^2.0.0",
-    "styled-components": "^2.2.3",
+    "styled-components": "^2.2.4",
     "styled-is": "^1.1.0",
     "unitcalc": "^1.1.1"
   },
@@ -64,8 +64,8 @@
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-joyent-portal": "^3.3.3",
-    "codemirror": "^5.31.0",
+    "codemirror": "^5.32.0",
-    "eslint": "^4.11.0",
+    "eslint": "^4.12.1",
     "eslint-config-joyent-portal": "^3.2.0",
     "http-server": "^0.10.0",
     "jest": "^21.2.1",
@@ -77,26 +77,26 @@
     "joyent-react-scripts": "^3.1.1",
     "lodash.isboolean": "^3.0.3",
     "navalia": "^1.2.0",
-    "react": "^16.1.1",
+    "react": "^16.2.0",
     "react-docgen": "^3.0.0-beta8",
     "react-docgen-displayname-handler": "^1.0.1",
-    "react-dom": "^16.1.1",
+    "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "react-styleguidist": "^6.0.33",
-    "react-test-renderer": "^16.1.1",
+    "react-test-renderer": "^16.2.0",
     "redux": "^3.7.2",
-    "redux-form": "^7.1.2",
+    "redux-form": "^7.2.0",
     "serve-static": "^1.13.1",
-    "stylelint": "^8.2.0",
+    "stylelint": "^8.3.1",
     "stylelint-config-joyent-portal": "^2.0.1",
-    "webpack": "^3.8.1"
+    "webpack": "^3.10.0"
   },
   "peerDependencies": {
     "joyent-manifest-editor": "^1.4.0",
-    "react": "^16.1.1",
+    "react": "^16.2.0",
-    "react-dom": "^16.1.1",
+    "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
-    "redux-form": "^7.1.2"
+    "redux-form": "^7.2.0"
   }
 }

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

@@ -22,7 +22,7 @@ const style = css`
   min-width: ${remcalc(120)};
   margin-bottom: ${remcalc(8)};
   margin-top: ${remcalc(8)};
-  padding: ${remcalc(13)} ${remcalc(18)};
+  padding: ${remcalc(15)} ${remcalc(18)};
   position: relative;
 
   ${typography.normal};
@@ -182,13 +182,16 @@ const style = css`
   `};
 
   ${is('small')`
-    padding: ${remcalc(14)} ${remcalc(14)};
+    padding: ${remcalc(9)} ${remcalc(18)};
-    min-width: ${remcalc(48)};
+    font-size: ${remcalc(13)};
+    min-width: ${remcalc(0)};
   `};
 
   ${is('icon')`
     display: inline-flex;
     align-items: center;
+    min-width: ${remcalc(0)};
+
 
     & svg + span {
       margin-left: ${remcalc(12)};

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

@@ -1,3 +1,7 @@
+#### Button > Primary
+Primary button to be used once per page. Only use to indicate main action per pattern. 
+Min. width: 120px
+
 ```jsx
 const React = require('react');
 const { default: Button } = require('./');
@@ -5,11 +9,13 @@ const { default: Button } = require('./');
 <span>
   <Button>Inspire the lazy</Button>
   <span> </span>
-  <Button href="#1">Inspire the lazy (anchor)</Button>
+  <Button disabled>Inspire the lazy</Button>
 </span>;
 ```
 
 #### Button > Secondary
+Secondary buttons can be used freely to indicate other actions on patterns.
+Min. width: 120px
 
 ```jsx
 const React = require('react');
@@ -18,43 +24,19 @@ const { default: Button } = require('./');
 <span>
   <Button secondary>Inspire the brave</Button>
   <span> </span>
-  <Button href="#2" secondary>
+  <Button secondary disabled>Inspire the brave</Button>  
-    Inspire the brave (anchor)
-  </Button>
 </span>;
 ```
 
-#### Button > Tertiary
+#### Button > Small
+Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
 
 ```jsx
 const React = require('react');
 const { default: Button } = require('./');
 
 <span>
-  <Button tertiary>Inspire the tertiary</Button>
+  <Button secondary small>Inspire the brave</Button>
-  <span> </span>
-  <Button href="#3" tertiary>
-    Inspire the tertiary (anchor)
-  </Button>
-  <span> </span>
-  <Button tertiary selected>
-    Inspire the tertiary
-  </Button>
-</span>;
-```
-
-#### Button > Disabled
-
-```jsx
-const React = require('react');
-const { default: Button } = require('./');
-
-<span>
-  <Button disabled>Inspire the liars</Button>
-  <span> </span>
-  <Button href="#4" disabled>
-    Inspire the liars (anchor)
-  </Button>
 </span>;
 ```
 
@@ -70,3 +52,85 @@ const { default: Button } = require('./');
   </Button>
 </span>;
 ```
+
+#### Button > Quick Action
+Quick action buttons are to be imbedded in components to give additional functionality. They can be used in either primary or secondary colour palettes depending on importance
+
+```jsx
+const React = require('react');
+const { default: Button } = require('./');
+const { Actions } = require('../icons');
+<span>
+  <Button secondary icon rect>
+    <Actions />
+  </Button>
+    <Button secondary icon rect disabled>
+    <Actions />
+  </Button>
+</span>
+```
+
+#### Primary
+
+Primary anchor is a type of a link that sits outside the body text.
+
+```jsx
+const React = require('react');
+const Anchor = require('../text').Anchor;
+
+<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
+```
+
+#### Reversed
+
+Reversed anchors is used on dark backgrounds, where a default anchor would not
+provide enough contrast.
+
+```jsx
+const React = require('react');
+const Anchor = require('../text').Anchor;
+
+<span
+  style={{
+    'background-color': '#3B46CC',
+    height: 80,
+    width: 250,
+    display: 'flex',
+    'align-items': 'center',
+    'justify-content': 'center'
+  }}
+>
+  <Anchor href="https://joyent.com" reversed>
+    Inspire the lazy secondary
+  </Anchor>
+</span>;
+```
+
+#### In text anchor
+
+In-paragraph anchor is a link that sits inside a text components. The default
+state does not have an underline. The underline appears on hover and click.
+
+```jsx
+const React = require('react');
+const Anchor = require('../text').Anchor;
+
+<p>
+  Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
+  momma's back. When a problem comes along.You must whip it.
+  <Anchor href="#">Learn More</Anchor>
+</p>;
+```
+
+#### Disabled
+
+Disabled anchors cannot be actioned and the cursor is disabled.
+
+```jsx
+const React = require('react');
+const Anchor = require('../text').Anchor;
+
+<Anchor disabled href="https://joyent.com">
+  Inspire the lazy disabled
+</Anchor>;
+```

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
 import { Input } from 'normalized-styled-components';
 import remcalc from 'remcalc';
-import is from 'styled-is';
+import is, { isNot } from 'styled-is';
 import rndId from 'rnd-id';
 
 import BaseInput from './input';
@@ -19,12 +19,18 @@ const StyledInput = Input.extend`
     opacity: 1;
   }
 
-  &:disabled + label {
+  ${isNot('error', 'warning', 'success')`
-    background-color: rgb(249, 249, 249);
+    &:checked + label {
+      border-color: ${props => props.theme.primary};
     }
 
-  &:disabled + label::after {
+    &:selected + label {
-    opacity: 0.3;
+      border-color: ${props => props.theme.primary};
+    }
+  `};
+
+  &:disabled + label {
+    background-color: rgb(249, 249, 249);
   }
 `;
 
@@ -108,6 +114,14 @@ const InnerContainer = styled.div`
   height: ${remcalc(18)};
   position: relative;
   cursor: pointer;
+  ${isNot('noMargin')`
+    margin-bottom: ${remcalc(12)};
+  `}
+`;
+
+const Container = styled.div`
+  margin-bottom: ${remcalc(12)};
+  margin-left: ${remcalc(12)};
 `;
 
 const ToggleBase = ({ container = null, type = 'radio' }) =>
@@ -132,7 +146,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
         (rest.value === true || rest.checked === true);
 
       const toggle = (
-        <InnerContainer {...types} type={type}>
+        <InnerContainer {...types} type={type} {...rest}>
           <StyledInput
             {...rest}
             id={newValue.id}
@@ -152,7 +166,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
       const el = OuterContainer ? (
         <OuterContainer>
           {toggle}
-          {children}
+          <Container>{children}</Container>
         </OuterContainer>
       ) : (
         toggle

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

@@ -2,6 +2,7 @@ import { Subscriber } from 'joy-react-broadcast';
 import is from 'styled-is';
 import PropTypes from 'prop-types';
 import React from 'react';
+import remcalc from 'remcalc';
 
 import Baseline from '../baseline';
 import Label from '../label';
@@ -22,6 +23,10 @@ const StyledLabel = Label.extend`
   ${is('success')`
     color: ${props => props.theme.green};
   `};
+
+  font-size: ${remcalc(13)};
+  float: none;
+  margin-left: ${remcalc(28)};
 `;
 
 const Meta = props => {

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

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import React from 'react';
-import remcalc from 'remcalc';
 import PropTypes from 'prop-types';
 
 import BaseToggle from './base/toggle';
@@ -22,12 +21,6 @@ const Li = styled.li`
 const Ul = styled.ul`
   margin: 0;
   padding: 0;
-  margin-bottom: ${remcalc(8)};
-
-  + label {
-    margin-left: ${remcalc(26)};
-    font-size: ${remcalc(13)};
-  }
 `;
 
 const RadioItem = BaseInput(({ children, id, ...rest }) => (

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

@@ -1,146 +1,140 @@
 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 Label from './label';
 import is from 'styled-is';
 
-import { border, borderRadius } from '../boxes';
-import Baseline from '../baseline';
 import BaseInput from './base/input';
-import typography from '../typography';
-
-const StyledInput = Input.extend`
-  display: none;
-
-  &:checked + label {
-    color: ${props => props.theme.secondary};
-    font-weight: bold;
-    width: 100%;
-    position: relative;
-  }
-
-  &:selected + label {
-    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};
-
-  box-sizing: border-box;
-  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}
-  `};
-
-  ${is('warning')`
-    border-color: ${props => props.theme.orangeDark}
-  `};
-
-  ${is('success')`
-    border-color: ${props => props.theme.greenDark}
-  `};
-
-  &:hover {
-    color: ${props => props.theme.secondaryHover};
-  }
-`;
 
 const InputContainer = styled.div`
   position: relative;
   vertical-align: text-bottom;
-  width: ${unitcalc(20)};
+  display: flex;
-  height: ${unitcalc(8)};
+  align-items: center;
 `;
 
-const Li = BaseInput(styled.li`
+const Input = styled.input`
-  display: inline-block;
+    display: none;
-  list-style-type: none;
-  box-sizing: border-box;
-`);
 
-const Background = styled.span`
+    &:checked + label {
-  border-right: ${border.unchecked};
+      background: #3B46CC;
-  background-color: ${props => props.theme.white};
+      border: ${remcalc(1)} solid ${props => props.theme.primary};
+
+      &:after {
+        left: 50%;
+        box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary};
+      }
+      
+      &:active {
+        box-shadow: none;
+        &:after {
+          margin-left: -0${remcalc(12)}
+        }
+      }
+    }
+  }
+`;
+
+const InputLabel = styled.label`
+  outline: 0;
   display: block;
-  border-radius: ${borderRadius};
+  width: ${remcalc(46)};
-  position: absolute;
+  height: ${remcalc(24)};
-  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;
-  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)};
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  background: ${props => props.theme.background};
+  border-radius: ${remcalc(23)};
+  transition: all 0.3s ease;
+  border: ${remcalc(1)} solid ${props => props.theme.grey};
+  margin-right: ${remcalc(6)};
 
-  li:first-of-type {
+  &::selection {
-    input + label + .background {
+    background: none;
-      transform: translateX(calc(100% - ${remcalc(3)}));
   }
 
-    input:checked + label + .background {
+  &:active {
-      transform: translateX(${remcalc(-1)});
+    box-shadow: inset 0 0 0 ${remcalc(24)} ${props => props.theme.grey};
+    &:after {
+      padding-right: ${remcalc(12)};
     }
   }
 
-  li:last-of-type .background {
+  &:hover {
+    border: ${remcalc(1)} solid ${props => props.theme.primary};
+
+    &:after {
+      box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary};
+    }
+  }
+
+  &:after,
+  &:before {
+    position: relative;
+    display: block;
+    content: '';
+    width: 50%;
+    height: 100%;
+  }
+
+  &:after {
+    left: 0;
+    border-radius: 2em;
+    background: ${props => props.theme.white};
+    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+      padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;
+
+    box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
+  }
+
+  &:active {
+    box-shadow: inset 0 0 0 2em ${props => props.theme.grey};
+    &:after {
+      padding-right: ${remcalc(12)};
+    }
+  }
+
+  &:before {
     display: none;
   }
+  ${is('disabled')`
+      &:active {
+        box-shadow: none;
+        &:after {
+          padding-right: 0;
+        }
+      }
+      &:after {
+        background: ${props => props.theme.whiteActive};
+      }
+      &:hover {
+        border: ${remcalc(1)} solid ${props => props.theme.grey};
+
+        &:after { 
+          box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
+        }
+      }
+  `};
 `;
 
 const BaseToggle = BaseInput(({ children, ...rest }) => {
   const render = value => {
     const id = rndId();
     return (
-      <Li>
       <InputContainer>
-          <StyledInput {...value} {...rest} id={id} type="radio" />
+        <Input {...value} {...rest} id={id} type="checkbox" />
-          <Label
+        <InputLabel
+          {...rest}
           htmlFor={id}
           error={rest.error}
           warning={rest.warning}
           success={rest.success}
-          >
+        />
-            {children}
+        <Label {...rest}> {children}</Label>
-          </Label>
-          <Background className="background" />
       </InputContainer>
-      </Li>
     );
   };
 
@@ -155,5 +149,3 @@ const Toggle = ({ children, ...rest }) => (
 );
 
 export default Toggle;
-
-export const ToggleList = Baseline(Ul);

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

@@ -1,9 +1,34 @@
-```
+
+####  Checkbox > Default
+```jsx
 const React = require('react');
 const { default: FormGroup } = require('./group');
 const { default: Label } = require('./label');
+const { FormLabel } = require('./');
 
 <FormGroup name="test">
+  <FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
+  <Checkbox>
+      <Label>Detailed explanations</Label>
+  </Checkbox>
+  <Checkbox>
+      <Label>Tips and tricks</Label>
+  </Checkbox>
+  <Checkbox>
+      <Label>Hints</Label>
+  </Checkbox>
+</FormGroup>
+```
+
+####  Checkbox > Active/Focused
+```jsx
+const React = require('react');
+const { default: FormGroup } = require('./group');
+const { default: Label } = require('./label');
+const { FormLabel } = require('./');
+
+<FormGroup name="test">
+  <FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
   <Checkbox checked>
       <Label>Detailed explanations</Label>
   </Checkbox>
@@ -13,44 +38,51 @@ const { default: Label } = require('./label');
   <Checkbox>
       <Label>Hints</Label>
   </Checkbox>
+</FormGroup>
+```
+####  Checkbox > Disabled
+```jsx
+const React = require('react');
+const { default: FormGroup } = require('./group');
+const { default: Label } = require('./label');
+const { FormLabel } = require('./');
+
+<FormGroup name="test">
+  <FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
   <Checkbox disabled>
-      <Label>How to</Label>
+      <Label>Detailed explanations</Label>
+  </Checkbox>
+  <Checkbox disabled>
+      <Label>Tips and tricks</Label>
+  </Checkbox>
+  <Checkbox disabled>
+      <Label>Hints</Label>
   </Checkbox>
 </FormGroup>
 ```
 
-#### Checkbox input validation
+#### Checkbox > Error
 
-```
+```jsx
 const React = require('react');
 const { default: FormMeta } = require('./meta');
 const { default: FormGroup } = require('./group');
 const { default: Label } = require('./label');
+const { FormLabel } = require('./');
 
-<div>
+<FormGroup name="test">
-  <FormGroup>
+  <FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
-    <Checkbox checked success>
-      <Label>Check this out!</Label>
-      <FormMeta left success>
-        Everything looks great
-      </FormMeta>
-    </Checkbox>
-  </FormGroup>
-  <FormGroup>
-    <Checkbox checked warning>
-      <Label>Check this out!</Label>
-    <FormMeta left warning>
-     Are you sure ?
-    </FormMeta>
-    </Checkbox>
-  </FormGroup>
-  <FormGroup>
   <Checkbox error checked>
-      <Label>Check this out!</Label>
+      <Label>Detailed explanations</Label>
-    <FormMeta left error>
+  </Checkbox>
+  <Checkbox checked>
+      <Label>Tips and tricks</Label>
+  </Checkbox>
+  <Checkbox>
+      <Label>Hints</Label>
+  </Checkbox>
+  <FormMeta error>
     Something’s missing
   </FormMeta>
-    </Checkbox>
 </FormGroup>
-</div>
 ```

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

@@ -1,12 +1,39 @@
+####  Radio > Default
+
 ```jsx
 const React = require('react');
 const { default: Radio, RadioList } = require('./radio');
 const { default: FormGroup } = require('./group');
 const { default: Label } = require('./label');
 const { default: Legend } = require('./legend');
+const { FormLabel } = require('./');
 
 <FormGroup name="who-killed">
-  <Legend>Who killed the radio star?</Legend>
+  <FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
+  <RadioList>
+    <Radio name="one" value="video">
+      <Label>Video</Label>
+    </Radio>
+    <Radio name="one" value="tv">
+      <Label>TV</Label>
+    </Radio>
+    <Radio name="one" value="netflix">
+      <Label>Netflix</Label>
+    </Radio>
+  </RadioList>
+</FormGroup>;
+```
+####  Checkbox > Active/Focused
+```jsx
+const React = require('react');
+const { default: Radio, RadioList } = require('./radio');
+const { default: FormGroup } = require('./group');
+const { default: Label } = require('./label');
+const { default: Legend } = require('./legend');
+const { FormLabel } = require('./');
+
+<FormGroup name="test">
+  <FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
   <RadioList>
     <Radio name="one" value="video" checked>
       <Label>Video</Label>
@@ -14,74 +41,63 @@ const { default: Legend } = require('./legend');
     <Radio name="one" value="tv">
       <Label>TV</Label>
     </Radio>
-    <Radio disabled name="one" value="netflix">
+    <Radio name="one" value="netflix">
       <Label>Netflix</Label>
     </Radio>
   </RadioList>
-</FormGroup>;
+</FormGroup>
 ```
 
+####  Checkbox > Disabled
+```jsx
+const React = require('react');
+const { default: Radio, RadioList } = require('./radio');
+const { default: FormGroup } = require('./group');
+const { default: Label } = require('./label');
+const { default: Legend } = require('./legend');
+const { FormLabel } = require('./');
+
+<FormGroup name="test">
+  <FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
+  <RadioList>
+    <Radio name="one" value="video" disabled>
+      <Label>Video</Label>
+    </Radio>
+    <Radio name="one" value="tv" disabled>
+      <Label>TV</Label>
+    </Radio>
+    <Radio name="one" value="netflix" disabled>
+      <Label>Netflix</Label>
+    </Radio>
+  </RadioList>
+</FormGroup>
+```
 #### Radio input validation
 
 ```jsx
 const React = require('react');
 const { default: Radio, RadioList } = require('./radio');
 const { default: FormGroup } = require('./group');
-const { default: Legend } = require('./legend');
-const { default: FormMeta } = require('./meta');
 const { default: Label } = require('./label');
+const { default: Legend } = require('./legend');
+const { FormLabel } = require('./');
+const { default: FormMeta } = require('./meta');
 
-<div>
+<FormGroup name="test">
-  <FormGroup name="who-killed">
+  <FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
-    <Legend>Who killed the radio star?</Legend>
   <RadioList>
-      <Radio name="two" success value="video">
+    <Radio name="one" value="video" error>
       <Label>Video</Label>
     </Radio>
-      <Radio name="two" success checked value="tv">
+    <Radio name="one" value="tv" error>
-        TV
+      <Label>TV</Label>
     </Radio>
-      <Radio name="two" success value="netflix">
+    <Radio name="one" value="netflix" error>
-        Netflix
+      <Label>Netflix</Label>
     </Radio>
   </RadioList>
-    <FormMeta left success>
+  <FormMeta error>
-      You are the best !
+    Something’s missing
   </FormMeta>
 </FormGroup>
-  <FormGroup name="who-killed">
-    <Legend>Who killed the radio star?</Legend>
-    <RadioList>
-      <Radio name="three" warning checked value="video">
-        <Label>Video</Label>
-      </Radio>
-      <Radio name="three" warning value="tv">
-        TV
-      </Radio>
-      <Radio name="three" warning value="netflix">
-        Netflix
-      </Radio>
-    </RadioList>
-    <FormMeta left warning>
-      Are you sure ?
-    </FormMeta>
-  </FormGroup>
-  <FormGroup name="who-killed">
-    <Legend>Who killed the radio star?</Legend>
-    <RadioList>
-      <Radio name="four" error value="video">
-        <Label>Video</Label>
-      </Radio>
-      <Radio name="four" error value="tv">
-        TV
-      </Radio>
-      <Radio name="four" error value="netflix">
-        Netflix
-      </Radio>
-    </RadioList>
-    <FormMeta error left>
-      You need to select one
-    </FormMeta>
-  </FormGroup>
-</div>;
 ```

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

@@ -6,13 +6,9 @@ const { default: Legend } = require('./legend');
 const { default: Toggle } = require('./toggle');
 
 <FormGroup name="who-killed-1">
-  <Legend>Who killed the radio star?</Legend>
+  <Toggle value="video">
-  <ToggleList>
-    <Toggle value="video" checked>
     Video
   </Toggle>
-    <Toggle value="tv">TV</Toggle>
-  </ToggleList>
 </FormGroup>;
 ```
 
@@ -26,10 +22,6 @@ const { default: Legend } = require('./legend');
 const { default: Toggle } = require('./toggle');
 
 <FormGroup name="who-killed-2" disabled>
-  <Legend>Who killed the radio star?</Legend>
+  <Toggle value="video" disabled>Video</Toggle>
-  <ToggleList>
-    <Toggle value="video">Video</Toggle>
-    <Toggle value="tv">TV</Toggle>
-  </ToggleList>
 </FormGroup>;
 ```

packages/ui-toolkit/src/header/brand.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
+import is from 'styled-is';
 
 import { H2 } from '../text/headings';
 
@@ -9,6 +10,12 @@ const Brand = H2.extend`
   color: ${props => props.theme.white};
   font-size: ${remcalc(29)};
   margin: 0 auto;
+
+  ${is('center')`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `}
 `;
 
 const Box = styled.div`

packages/ui-toolkit/src/header/usage.md

@@ -1,17 +1,18 @@
-```
+```jsx
 const React = require('react');
 const { default: HeaderBrand } = require('./brand.js');
 const { default: HeaderItem } = require('./item.js');
+const { Anchor: HeaderAnchor } = require('./item.js');
 const { default: HeaderNav } = require('./nav.js');
 const { Triton, DataCenter, User } = require('../icons');
 
 <Header>
-  <HeaderBrand beta>
+  <HeaderBrand beta center>
-    <Triton />
+    <Triton light />
   </HeaderBrand>
   <HeaderNav>
     <li>
-      Compute
+      <HeaderAnchor>Compute</HeaderAnchor>
     </li>
   </HeaderNav>
   <HeaderItem>

packages/ui-toolkit/src/section-list/usage.md

@@ -1,4 +1,4 @@
-```
+```jsx
 const { default: SectionListItem, Anchor } = require('./item');
 
 <SectionList>

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

@@ -125,6 +125,7 @@ const BaseTable = styled.table`
 
 const BaseTfoot = styled.tfoot`
   width: 100%;
+  background: ${props => props.theme.background};
 
   th:first-child {
     border-bottom-left-radius: ${remcalc(4)};
@@ -141,6 +142,7 @@ const BaseTfoot = styled.tfoot`
 
 const BaseThead = styled.thead`
   width: 100%;
+  background: ${props => props.theme.background};
 
   th:first-child {
     border-top-left-radius: ${remcalc(4)};
@@ -149,10 +151,6 @@ const BaseThead = styled.thead`
   th:last-child {
     border-top-right-radius: ${remcalc(4)};
   }
-
-  th {
-    border-bottom-width: 0;
-  }
 `;
 
 const BaseTbody = styled.tbody`
@@ -169,6 +167,10 @@ const BaseTbody = styled.tbody`
   ${is('disabled')`
     border-color: ${props => props.theme.grey};
   `};
+
+  tr:first-child td {
+    border-top: none;
+  }
 `;
 
 const BaseTh = styled.th`
@@ -207,6 +209,10 @@ const BaseTd = styled.td`
     border-right-width: 0;
   }
 
+  ${is('bold')`
+    font-weight: bold
+  `};
+
   ${is('selected')`
     border-color: ${props => props.theme.primary};
     background-color: rgba(59, 70, 204, 0.05);
@@ -335,7 +341,7 @@ export const Tbody = Baseline(({ children, ...rest }) => (
 export const Td = Baseline(({ children, ...rest }) => (
   <Propagate {...rest}>
     {value => (
-      <BaseTd {...value} name="td">
+      <BaseTd {...value} {...rest} name="td">
         {children}
       </BaseTd>
     )}

packages/ui-toolkit/src/table/usage.md

@@ -1,3 +1,4 @@
+#### Table > Header
 ```jsx
 const React = require('react');
 const remcalc = require('remcalc');
@@ -9,11 +10,80 @@ const { Dot, Actions } = require('../icons');
   <Thead>
     <Tr>
       <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
-        <FormGroup paddingTop={remcalc(4)}>
+        <FormGroup style={{display: 'flex', alignItems: 'center'}}>
-          <Checkbox />
+          <Checkbox noMargin/>
         </FormGroup>
       </Th>
-      <Th sortOrder="asc" showSort left middle actionable>
+      <Th sortOrder="asc" showSort left middle selected actionable>
+        <span>Name </span>
+      </Th>
+      <Th xs="150" left middle actionable>
+        <span>Status </span>
+      </Th>
+      <Th xs="0" sm="160" left middle actionable>
+        <span>Created </span>
+      </Th>
+      <Th xs="0" sm="130" left middle actionable>
+        <span>Short ID </span>
+      </Th>
+      <Th xs="60" padding="0" />
+    </Tr>
+  </Thead>
+    <Tbody/>
+</Table>
+  ```
+
+  #### Table > Footer
+```jsx
+const React = require('react');
+const remcalc = require('remcalc');
+const { FormGroup, Checkbox } = require('../form');
+const { default: Table, Tfoot, Tr, Th, Td } = require('./');
+const { Dot, Actions } = require('../icons');
+
+<Table>
+  <Tfoot>
+    <Tr>
+      <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
+        <FormGroup style={{display: 'flex', alignItems: 'center'}}>
+          <Checkbox noMargin/>
+        </FormGroup>
+      </Th>
+      <Th sortOrder="asc" showSort left middle selected actionable>
+        <span>Name </span>
+      </Th>
+      <Th xs="150" left middle actionable>
+        <span>Status </span>
+      </Th>
+      <Th xs="0" sm="160" left middle actionable>
+        <span>Created </span>
+      </Th>
+      <Th xs="0" sm="130" left middle actionable>
+        <span>Short ID </span>
+      </Th>
+      <Th xs="60" padding="0" />
+    </Tr>
+  </Tfoot>
+</Table>
+  ```
+
+#### Table > Multiple Selection List
+```jsx
+const React = require('react');
+const remcalc = require('remcalc');
+const { FormGroup, Checkbox } = require('../form');
+const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
+const { Dot, Actions } = require('../icons');
+
+<Table>
+  <Thead>
+    <Tr>
+      <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
+        <FormGroup>
+          <Checkbox noMargin/>
+        </FormGroup>
+      </Th>
+      <Th sortOrder="asc" showSort left middle selected actionable>
         <span>Name </span>
       </Th>
       <Th xs="150" left middle actionable>
@@ -32,11 +102,11 @@ const { Dot, Actions } = require('../icons');
     <Tr>
       <Td padding="0" paddingLeft={remcalc(12)} middle left>
         <FormGroup paddingTop={remcalc(4)}>
-          <Checkbox />
+          <Checkbox noMargin checked/>
         </FormGroup>
       </Td>
-      <Td middle left>
+      <Td middle left bold>
-        <a href="/instances/hello">hello</a>
+        percona_high-ram-32_1_snapshot_1
       </Td>
       <Td middle left>
         <span>
@@ -62,11 +132,11 @@ const { Dot, Actions } = require('../icons');
     <Tr>
       <Td padding="0" paddingLeft={remcalc(12)} middle left>
         <FormGroup paddingTop={remcalc(4)}>
-          <Checkbox />
+          <Checkbox noMargin/>
         </FormGroup>
       </Td>
-      <Td middle left>
+      <Td middle left bold>
-        <a href="/instances/world">world</a>
+        percona_high-ram-32_1_snapshot_2
       </Td>
       <Td middle left>
         <span>
@@ -92,3 +162,89 @@ const { Dot, Actions } = require('../icons');
   </Tbody>
 </Table>;
 ```
+
+#### Table > Single Selection List
+```jsx
+const React = require('react');
+const remcalc = require('remcalc');
+const { FormGroup, Checkbox } = require('../form');
+const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
+const { Dot, Actions } = require('../icons');
+
+<Table>
+  <Thead>
+    <Tr>
+      <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
+      </Th>
+      <Th sortOrder="asc" showSort left middle selected actionable>
+        <span>Name </span>
+      </Th>
+      <Th xs="150" left middle actionable>
+        <span>Status </span>
+      </Th>
+      <Th xs="0" sm="160" left middle actionable>
+        <span>Created </span>
+      </Th>
+      <Th xs="0" sm="130" left middle actionable>
+        <span>Short ID </span>
+      </Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    <Tr>
+      <Td padding="0" paddingLeft={remcalc(12)} middle left selected>
+        <FormGroup paddingTop={remcalc(4)}>
+          <Radio noMargin checked/>
+        </FormGroup>
+      </Td>
+      <Td middle left bold selected>
+        percona_high-ram-32_1_snapshot_1
+      </Td>
+      <Td middle left selected>
+        <span>
+          <Dot
+            width={remcalc(11)}
+            height={remcalc(11)}
+            borderRadius={remcalc(11)}
+            color="primary"
+          />{' '}
+          Provisioning
+        </span>
+      </Td>
+      <Td xs="0" sm="160" middle left selected>
+        about 2 months
+      </Td>
+      <Td xs="0" sm="130" middle left selected>
+        <code>2252839</code>
+      </Td>
+    </Tr>
+    <Tr>
+      <Td padding="0" paddingLeft={remcalc(12)} middle left>
+        <FormGroup paddingTop={remcalc(4)}>
+          <Radio noMargin/>
+        </FormGroup>
+      </Td>
+      <Td middle left bold>
+        percona_high-ram-32_1_snapshot_2
+      </Td>
+      <Td middle left>
+        <span>
+          <Dot
+            width={remcalc(11)}
+            height={remcalc(11)}
+            borderRadius={remcalc(11)}
+            color="green"
+          />{' '}
+          Running
+        </span>
+      </Td>
+      <Td xs="0" sm="160" middle left>
+        about 1 hour
+      </Td>
+      <Td xs="0" sm="130" middle left>
+        <code>6739567</code>
+      </Td>
+    </Tr>
+  </Tbody>
+</Table>;
+```

packages/ui-toolkit/src/text/Readme.md

@@ -98,74 +98,3 @@ const Label = require('/').Label;
   native applications
 </Label>;
 ```
-
-### Anchors
-
-Links in the toolkit are named `Anchor`. This is to avoid confusion with `Link`,
-which is a
-[React Router routing link](http://knowbody.github.io/react-router-docs/api/Link.html).
-
-#### Primary
-
-Primary anchor is a type of a link that sits outside the body text.
-
-```
-const React = require('react');
-const Anchor = require('/').Anchor;
-
-<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
-```
-
-#### Reversed
-
-Reversed anchors is used on dark backgrounds, where a default anchor would not
-provide enough contrast.
-
-```jsx
-const React = require('react');
-const Anchor = require('/').Anchor;
-
-<span
-  style={{
-    'background-color': '#3B46CC',
-    height: 80,
-    width: 250,
-    display: 'flex',
-    'align-items': 'center',
-    'justify-content': 'center'
-  }}
->
-  <Anchor href="https://joyent.com" reversed>
-    Inspire the lazy secondary
-  </Anchor>
-</span>;
-```
-
-#### In text anchor
-
-In-paragraph anchor is a link that sits inside a text components. The default
-state does not have an underline. The underline appears on hover and click.
-
-```jsx
-const React = require('react');
-const Anchor = require('/').Anchor;
-
-<p>
-  Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
-  momma's back. When a problem comes along.You must whip it.
-  <Anchor href="#">Learn More</Anchor>
-</p>;
-```
-
-#### Disabled
-
-Disabled anchors cannot be actioned and the cursor is disabled.
-
-```jsx
-const React = require('react');
-const Anchor = require('/').Anchor;
-
-<Anchor disabled href="https://joyent.com">
-  Inspire the lazy disabled
-</Anchor>;
-```

packages/ui-toolkit/styleguide.config.js

@@ -52,10 +52,6 @@ module.exports = {
           name: 'Typography',
           content: 'src/text/Readme.md'
         },
-        {
-          name: 'Baseline',
-          content: 'src/baseline/readme.md'
-        },
         {
           name: 'Colors',
           content: 'src/theme/colors.md'
@@ -69,10 +65,9 @@ module.exports = {
     {
       name: 'Components',
       components: () => [
-        'src/card/card.js',
-        'src/table/index.js',
         'src/breadcrumb/index.js',
         'src/button/index.js',
+        'src/card/card.js',
         'src/form/checkbox.js',
         'src/header/index.js',
         'src/form/input.js',
@@ -82,6 +77,7 @@ module.exports = {
         'src/form/radio.js',
         'src/section-list/index.js',
         'src/form/select.js',
+        'src/table/index.js',
         'src/form/toggle.js',
         'src/tooltip/index.js'
       ]

yarn.lock

@@ -8725,7 +8725,7 @@ react-styled-flexboxgrid@^2.1.1:
   dependencies:
     lodash.isinteger "^4.0.4"
 
-react-styleguidist@^6.0.33:
+react-styleguidist@^6.0.31:
   version "6.0.33"
   resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.33.tgz#3025d9b5d47ad6a83bdbed571e3146d8c5ce8bbf"
   dependencies: