docs(ui-toolkit): new styleguide layout

packages/icons/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "remcalc": "^1.0.9",
-    "styled-components": "^2.2.3"
+    "styled-components": "^2.3.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

packages/my-joy-beta/package.json

@@ -45,7 +45,7 @@
     "redux-actions": "^2.2.1",
     "redux-form": "^7.1.2",
     "remcalc": "^1.0.9",
-    "styled-components": "^2.2.3",
+    "styled-components": "^2.3.0",
     "styled-flex-component": "^1.1.0",
     "title-case": "^2.1.1"
   },
@@ -67,7 +67,7 @@
     "react-test-renderer": "^16.1.1",
     "redrun": "^5.10.0",
     "serve": "^6.4.1",
-    "stylelint": "^8.2.0",
+    "stylelint": "^8.4.0",
     "stylelint-config-joyent-portal": "^2.0.1"
   }
 }

packages/ui-toolkit/package.json

@@ -7,25 +7,18 @@
   "jsnext:main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "scripts": {
-    "lint-ci":
+    "lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-      "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-    "lint":
-      "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
     "test-ci": "echo 0",
     "test": "echo 0",
     "test:visual": "run-p serve jest",
     "jest": "jest",
     "serve": "http-server styleguide -p 6060 -s",
-    "copy-fonts":
+    "copy-fonts": "rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
-      "rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
+    "compile-watch:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
-    "compile-watch:es":
+    "compile:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
-      "NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
+    "compile:umd": "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
-    "compile:es":
+    "compile-watch:umd": "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
-      "NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
-    "compile:umd":
-      "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
-    "compile-watch:umd":
-      "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
     "compile": "redrun -p compile:*",
     "dev": "redrun copy-fonts && redrun -p compile-watch:*",
     "styleguide:build": "NODE_ENV=production styleguidist build",
@@ -52,7 +45,7 @@
     "redrun": "^5.10.0",
     "remcalc": "^1.0.9",
     "rnd-id": "^2.0.0",
-    "styled-components": "^2.2.4",
+    "styled-components": "^2.3.0",
     "styled-is": "^1.1.0",
     "unitcalc": "^1.1.1"
   },
@@ -64,6 +57,7 @@
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-joyent-portal": "^3.3.3",
+    "classnames": "^2.2.5",
     "codemirror": "^5.32.0",
     "eslint": "^4.12.1",
     "eslint-config-joyent-portal": "^3.2.0",
@@ -83,12 +77,12 @@
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
-    "react-styleguidist": "^6.0.33",
+    "react-styleguidist": "^6.1.0",
     "react-test-renderer": "^16.2.0",
     "redux": "^3.7.2",
     "redux-form": "^7.2.0",
     "serve-static": "^1.13.1",
-    "stylelint": "^8.3.1",
+    "stylelint": "^8.4.0",
     "stylelint-config-joyent-portal": "^2.0.1",
     "webpack": "^3.10.0"
   },

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

@@ -1,4 +1,4 @@
-#### Button > Primary
+#### Primary Button
 Primary button to be used once per page. Only use to indicate main action per pattern. 
 Min. width: 120px
 
@@ -8,12 +8,10 @@ const { default: Button } = require('./');
 
 <span>
   <Button>Inspire the lazy</Button>
-  <span> </span>
-  <Button disabled>Inspire the lazy</Button>
 </span>;
 ```
 
-#### Button > Secondary
+#### Secondary Button
 Secondary buttons can be used freely to indicate other actions on patterns.
 Min. width: 120px
 
@@ -23,12 +21,23 @@ const { default: Button } = require('./');
 
 <span>
   <Button secondary>Inspire the brave</Button>
-  <span> </span>
+</span>;
+```
+
+#### Disabled Button
+Disabled buttons can be used freely to indicate that no action is permitted in this button.
+Min. width: 120px
+
+```jsx
+const React = require('react');
+const { default: Button } = require('./');
+
+<span>
   <Button secondary disabled>Inspire the brave</Button>
 </span>;
 ```
 
-#### Button > Small
+#### Small Button
 Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
 
 ```jsx
@@ -40,7 +49,7 @@ const { default: Button } = require('./');
 </span>;
 ```
 
-#### Button > Loading
+#### Loading Button
 
 ```jsx
 const React = require('react');
@@ -53,7 +62,7 @@ const { default: Button } = require('./');
 </span>;
 ```
 
-#### Button > Quick Action
+#### 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

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

@@ -95,23 +95,6 @@ const style = css`
     }
   `};
 
-  ${is('tertiary')`
-    color: ${props => props.theme.text};
-    background-color: ${props => props.theme.disabled};
-    border-color: ${props => props.theme.grey};
-    font-weight: 600;
-
-    &:focus,
-    &:hover,
-    &:active,
-    &:active:hover,
-    &:active:focus {
-      color: ${props => props.theme.text};
-      background-color: ${props => props.theme.disabled};
-      border-color: ${props => props.theme.grey};
-    }
-  `};
-
   ${is('error')`
     color: ${props => props.theme.red};
     background-color: ${props => props.theme.white};
@@ -136,22 +119,6 @@ const style = css`
     }
   `};
 
-  ${is('tertiary', 'selected')`
-      background-color: rgba(59, 70, 204, 0.2);
-      color: ${props => props.theme.primaryActive};
-      border-color: ${props => props.theme.primaryActive};
-
-    &:focus,
-    &:hover,
-    &:active,
-    &:active:hover,
-    &:active:focus {
-      background-color: rgba(59, 70, 204, 0.2);
-      color: ${props => props.theme.primaryActive};
-      border-color: ${props => props.theme.primaryActive};
-    }
-  `};
-
   ${isOr('disabled', 'loading')`
     cursor: not-allowed;
     pointer-events: none;
@@ -239,7 +206,7 @@ const StyledLink = styled(Link)`
 `;
 
 /**
- * @example ./usage.md
+ * Buttons are the core of any UI kit, and we are no exception. Here we have documented to most basic variations of the button states, which include but are limited to; Default, Hover, Clicked, and Disabled. 
  */
 const Button = props => {
   const { href = '', to = '', loading = false, secondary } = props;
@@ -282,10 +249,6 @@ Button.propTypes = {
    * Is it secondary ?
    */
   secondary: PropTypes.bool,
-  /**
-   * Is it tertiary ?
-   */
-  tertiary: PropTypes.bool,
   /**
    * When set to true a smaller version of the button will show
    */
@@ -294,19 +257,13 @@ Button.propTypes = {
    * Set to true to show loading animation
    */
   loading: PropTypes.bool,
-  /**
-   * When used, will give button an active state (Only for tertiary for now)
-   */
-  selected: PropTypes.bool
 };
 
 Button.defaultProps = {
   primary: true,
   secondary: false,
-  tertiary: false,
   small: false,
-  loading: false,
+  loading: false
-  selected: false
 };
 
 export default Baseline(Button);

packages/ui-toolkit/src/card/demo.md

@@ -28,10 +28,10 @@ const { Instances, Actions } = require('../icons');
   <Header>
     <HeaderMeta>
       <Row between="xs" middle="xs">
-        <Col xs={4} sm={8} md={9}>
+        <Col xs={4} sm={8}>
           <H4>Nginx</H4>
         </Col>
-        <Col xs={8} sm={4} md={3}>
+        <Col xs={8} sm={4}>
           <P>
             <Instances marginRight="0.5" light /> 4 of 4 instances
           </P>
@@ -59,10 +59,10 @@ const { Instances, Health, Actions } = require('../icons');
   <Header>
     <HeaderMeta>
       <Row between="xs" middle="xs">
-        <Col xs={4} sm={8} md={9}>
+        <Col xs={4} sm={8}>
           <H4>Nginx</H4>
         </Col>
-        <Col xs={8} sm={4} md={3}>
+        <Col xs={8} sm={4}>
           <P>
             <Instances marginRight="0.5" light /> 4 of 4 instances
           </P>
@@ -107,10 +107,10 @@ const { Instances, Actions } = require('../icons');
   <Header>
     <HeaderMeta>
       <Row between="xs" middle="xs">
-        <Col xs={4} sm={8} md={9}>
+        <Col xs={4} sm={8}>
           <H4>Nginx</H4>
         </Col>
-        <Col xs={8} sm={4} md={3}>
+        <Col xs={8} sm={4}>
           <P>
             <Instances marginRight="0.5" light /> 4 of 4 instances
           </P>
@@ -147,10 +147,10 @@ const { Actions, Instances, Health } = require('../icons');
         <Header>
           <HeaderMeta>
             <Row middle="xs">
-              <Col xs={2} sm={1} md={1}>
+              <Col xs={2} sm={3}>
                 <H4>Nginx</H4>
               </Col>
-              <Col xs={8} sm={4} md={2}>
+              <Col xs={8} sm={4}>
                 <StatusLoader marginLeft="0" inline row msg="Provisioning" />
               </Col>
             </Row>
@@ -169,10 +169,10 @@ const { Actions, Instances, Health } = require('../icons');
         <Header>
           <HeaderMeta>
             <Row between="xs" middle="xs">
-              <Col xs={4} sm={8} md={9}>
+              <Col xs={4} sm={8}>
                 <H4>Nginx</H4>
               </Col>
-              <Col xs={8} sm={4} md={3}>
+              <Col xs={8} sm={4}>
                 <P>
                   <Instances marginRight="0.5" light /> 4 of 4 instances
                 </P>
@@ -227,10 +227,10 @@ const { Actions } = require('../icons');
   <Header>
     <HeaderMeta>
       <Row between="xs" middle="xs">
-        <Col xs={2} sm={9} md={10}>
+        <Col xs={2} sm={9} md={9}>
           <H4>Nginx</H4>
         </Col>
-        <Col xs={5} sm={2} md={2}>
+        <Col xs={5} sm={2} md={3}>
           <P>1 Instance</P>
         </Col>
       </Row>
@@ -399,16 +399,22 @@ const { Health, Actions, DataCenter } = require('../icons');
     <Header transparent>
       <HeaderMeta>
         <Row between="xs" middle="xs">
-          <Col xs={2} sm={9} md={8}>
+          <Col xs={2} sm={5}>
             <H4>Nginx</H4>
           </Col>
-          <Col xs={5} sm={2} md={2}>
+          <Col xs={5} sm={3}>
-            <P>
+            <P style={{
+              display: 'flex',
+              alignItems: 'center'
+            }}>
               <Health healthy /> Healthy
             </P>
           </Col>
-          <Col xs={5} sm={2} md={2}>
+          <Col xs={5} sm={3}>
-            <P>
+            <P  style={{
+              display: 'flex',
+              alignItems: 'center'
+            }}>
               <DataCenter /> eu-ams-1
             </P>
           </Col>

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

@@ -1,16 +1,19 @@
 ```jsx
 const React = require('react');
 const { default: Select } = require('./select');
+const { default: FormGroup } = require('./group');
 
-<Select>
+<FormGroup>
-  <option selected disabled>
+  <Select>
-    Select a datacenter
+    <option selected disabled>
-  </option>
+      Select a datacenter
-  <option>Amsterdam, EU</option>
+    </option>
-  <option>San Francisco, USA</option>
+    <option>Amsterdam, EU</option>
-  <option>Seoul, South Korea</option>
+    <option>San Francisco, USA</option>
-  <option>Tokyo, Japan</option>
+    <option>Seoul, South Korea</option>
-</Select>;
+    <option>Tokyo, Japan</option>
+  </Select>
+</FormGroup>
 ```
 
 #### Select > Disabled

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

@@ -1,670 +0,0 @@
-```js noeditor
-const React = require('react');
-const { List, Icon, ListItem } = require('./icons');
-const { default: Label } = require('../label');
-const { default: theme } = require('../theme');
-
-const {
-  Actions,
-  Affinity,
-  Arrow,
-  Bin,
-  Checkcircle,
-  Clipboard,
-  Close,
-  Cns,
-  Copy,
-  DataCenter,
-  Delete,
-  Dot,
-  Duplicate,
-  Edit,
-  Firewall,
-  Health,
-  Id,
-  Import,
-  InstanceCount,
-  InstanceType,
-  Instances,
-  Loading,
-  Login,
-  Metadata,
-  Minus,
-  Network,
-  Package,
-  Plus,
-  Reset,
-  Start,
-  Stop,
-  Tags,
-  Triton,
-  User
-} = require('.');
-
-<List>
-  <ListItem>
-    <Icon>
-      <Actions />
-    </Icon>
-    <Label>Actions &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Actions light />
-    </Icon>
-    <Label>Actions &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Actions disabled />
-    </Icon>
-    <Label>Actions &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Affinity />
-    </Icon>
-    <Label>Affinity &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Affinity light />
-    </Icon>
-    <Label>Affinity &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Affinity disabled />
-    </Icon>
-    <Label>Affinity &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Arrow />
-    </Icon>
-    <Label>Arrow &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Arrow direction="right" />
-    </Icon>
-    <Label>Arrow &gt; Right</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Arrow direction="up" />
-    </Icon>
-    <Label>Arrow &gt; Up</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Arrow direction="left" />
-    </Icon>
-    <Label>Arrow &gt; left</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Arrow light />
-    </Icon>
-    <Label>Arrow &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Arrow disabled />
-    </Icon>
-    <Label>Arrow &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Bin />
-    </Icon>
-    <Label>Bin &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark >
-      <Bin light />
-    </Icon>
-    <Label>Bin &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Bin disabled />
-    </Icon>
-    <Label>Bin &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Checkcircle checked />
-    </Icon>
-    <Label>Tick</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Checkcircle checked fill />
-    </Icon>
-    <Label>Completed</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Checkcircle checked border />
-    </Icon>
-    <Label>Part Completed</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Checkcircle border />
-    </Icon>
-    <Label>Incomplete</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Close />
-    </Icon>
-    <Label>Close</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Clipboard />
-    </Icon>
-    <Label>Clipboard &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Clipboard light />
-    </Icon>
-    <Label>Clipboard &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Clipboard disabled />
-    </Icon>
-    <Label>Clipboard &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Cns />
-    </Icon>
-    <Label>CNS &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Cns light />
-    </Icon>
-    <Label>CNS &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Cns disabled />
-    </Icon>
-    <Label>CNS &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Copy />
-    </Icon>
-    <Label>Copy &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Copy light />
-    </Icon>
-    <Label>Copy &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Copy disabled />
-    </Icon>
-    <Label>Copy &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <DataCenter />
-    </Icon>
-    <Label>Data Centre &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <DataCenter light />
-    </Icon>
-    <Label>Data Centre &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <DataCenter disabled />
-    </Icon>
-    <Label>Data Centre &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Delete fill={theme.red} />
-    </Icon>
-    <Label>Delete &gt; Red</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Delete light />
-    </Icon>
-    <Label>Delete &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Delete />
-    </Icon>
-    <Label>Delete &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Delete disabled />
-    </Icon>
-    <Label>Delete &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Dot color='primary' />
-    </Icon>
-    <Label>Dot &gt; Primary</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Duplicate />
-    </Icon>
-    <Label>Duplicate &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Duplicate light />
-    </Icon>
-    <Label>Duplicate &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Duplicate disabled />
-    </Icon>
-    <Label>Duplicate &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Edit />
-    </Icon>
-    <Label>Edit &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Edit light />
-    </Icon>
-    <Label>Edit &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Edit disabled />
-    </Icon>
-    <Label>Edit &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Firewall />
-    </Icon>
-    <Label>Firewall &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Firewall light />
-    </Icon>
-    <Label>Firewall &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Firewall disabled />
-    </Icon>
-    <Label>Firewall &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Health />
-    </Icon>
-    <Label>Health &gt; Healthy</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Health healthy={false} />
-    </Icon>
-    <Label>Health &gt; Unhealthy</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Id />
-    </Icon>
-    <Label>Id &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Id light />
-    </Icon>
-    <Label>Id &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Id disabled />
-    </Icon>
-    <Label>Id &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Import />
-    </Icon>
-    <Label>Import</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <InstanceCount />
-    </Icon>
-    <Label>InstanceCount &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <InstanceCount light />
-    </Icon>
-    <Label>InstanceCount &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <InstanceCount disabled />
-    </Icon>
-    <Label>InstanceCount &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <InstanceType />
-    </Icon>
-    <Label>InstanceType &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <InstanceType light />
-    </Icon>
-    <Label>InstanceType &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <InstanceType disabled />
-    </Icon>
-    <Label>InstanceType &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Instances />
-    </Icon>
-    <Label>Instances &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Instances light />
-    </Icon>
-    <Label>Instances &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Instances disabled />
-    </Icon>
-    <Label>Instances &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Loading />
-    </Icon>
-    <Label>Loading &gt; Primary</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Loading secondary />
-    </Icon>
-    <Label>Loading &gt; Secondary</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Loading light />
-    </Icon>
-    <Label>Loading &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Loading disabled />
-    </Icon>
-    <Label>Loading &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Login />
-    </Icon>
-    <Label>Login &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Login light />
-    </Icon>
-    <Label>Login &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Login disabled />
-    </Icon>
-    <Label>Login &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Metadata />
-    </Icon>
-    <Label>Metadata &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Metadata light />
-    </Icon>
-    <Label>Metadata &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Metadata disabled />
-    </Icon>
-    <Label>Metadata &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Minus />
-    </Icon>
-    <Label>Minus &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Minus light />
-    </Icon>
-    <Label>Minus &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Minus disabled />
-    </Icon>
-    <Label>Minus &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Network />
-    </Icon>
-    <Label>Network &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Network light />
-    </Icon>
-    <Label>Network &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Network disabled />
-    </Icon>
-    <Label>Network &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Package />
-    </Icon>
-    <Label>Package &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Package light />
-    </Icon>
-    <Label>Package &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Package disabled />
-    </Icon>
-    <Label>Package &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Plus />
-    </Icon>
-    <Label>Plus &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Plus light />
-    </Icon>
-    <Label>Plus &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Plus disabled />
-    </Icon>
-    <Label>Plus &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Reset />
-    </Icon>
-    <Label>Reset &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Reset light />
-    </Icon>
-    <Label>Reset &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Reset disabled />
-    </Icon>
-    <Label>Reset &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Start />
-    </Icon>
-    <Label>Start &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Start light />
-    </Icon>
-    <Label>Start &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Start disabled />
-    </Icon>
-    <Label>Start &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Stop />
-    </Icon>
-    <Label>Stop &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Stop light />
-    </Icon>
-    <Label>Stop &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Stop disabled />
-    </Icon>
-    <Label>Stop &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Tags />
-    </Icon>
-    <Label>Tags &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Tags light />
-    </Icon>
-    <Label>Tags &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Tags disabled />
-    </Icon>
-    <Label>Tags &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Triton />
-    </Icon>
-    <Label>Triton &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Triton light />
-    </Icon>
-    <Label>Triton &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Triton disabled />
-    </Icon>
-    <Label>Triton &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Triton beta />
-    </Icon>
-    <Label>Triton Beta &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <Triton beta light />
-    </Icon>
-    <Label>Triton Beta &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <Triton beta disabled />
-    </Icon>
-    <Label>Triton Beta &gt; Disabled</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <User />
-    </Icon>
-    <Label>User &gt; Dark</Label>
-  </ListItem>
-  <ListItem>
-    <Icon dark>
-      <User light />
-    </Icon>
-    <Label>User &gt; Light</Label>
-  </ListItem>
-  <ListItem>
-    <Icon>
-      <User disabled />
-    </Icon>
-    <Label>User &gt; Disabled</Label>
-  </ListItem>
-</List>;
-```

packages/ui-toolkit/src/icons/functional.md

@@ -0,0 +1,258 @@
+Icons here are used to support funtions and actions users can take withini the Triton service.
+
+```js noeditor
+const React = require('react');
+const { List, Icon, ListItem } = require('./icons');
+const { default: Label } = require('../label');
+const { default: theme } = require('../theme');
+
+const {
+  Actions,
+  Affinity,
+  Arrow,
+  Bin,
+  Checkcircle,
+  Clipboard,
+  Close,
+  Cns,
+  Copy,
+  DataCenter,
+  Delete,
+  Dot,
+  Duplicate,
+  Edit,
+  Firewall,
+  Health,
+  Id,
+  Import,
+  InstanceCount,
+  InstanceType,
+  Instances,
+  Loading,
+  Login,
+  Metadata,
+  Minus,
+  Network,
+  Package,
+  Plus,
+  Reset,
+  Start,
+  Stop,
+  Tags,
+  Triton,
+  User
+} = require('.');
+
+<List>
+  <ListItem>
+    <Icon>
+      <Actions />
+    </Icon>
+    <Label>Actions</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Arrow />
+    </Icon>
+    <Label>Arrow</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Arrow direction="right" />
+    </Icon>
+    <Label>Arrow &gt; Right</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Arrow direction="up" />
+    </Icon>
+    <Label>Arrow &gt; Up</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Arrow direction="left" />
+    </Icon>
+    <Label>Arrow &gt; left</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Bin />
+    </Icon>
+    <Label>Bin</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Checkcircle checked />
+    </Icon>
+    <Label>Tick</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Checkcircle checked fill />
+    </Icon>
+    <Label>Completed</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Checkcircle checked border />
+    </Icon>
+    <Label>Part Completed</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Checkcircle border />
+    </Icon>
+    <Label>Incomplete</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Close />
+    </Icon>
+    <Label>Close</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Clipboard />
+    </Icon>
+    <Label>Clipboard</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Copy />
+    </Icon>
+    <Label>Copy</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <DataCenter />
+    </Icon>
+    <Label>Data Centre</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Delete fill={theme.red} />
+    </Icon>
+    <Label>Delete &gt; Red</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Delete />
+    </Icon>
+    <Label>Delete</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Dot color='primary' />
+    </Icon>
+    <Label>Dot &gt; Primary</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Duplicate />
+    </Icon>
+    <Label>Duplicate</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Edit />
+    </Icon>
+    <Label>Edit</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Health />
+    </Icon>
+    <Label>Health &gt; Healthy</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Health healthy={false} />
+    </Icon>
+    <Label>Health &gt; Unhealthy</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Id />
+    </Icon>
+    <Label>Id</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Import />
+    </Icon>
+    <Label>Import</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Instances />
+    </Icon>
+    <Label>Instances</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Loading />
+    </Icon>
+    <Label>Loading &gt; Primary</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Loading secondary />
+    </Icon>
+    <Label>Loading &gt; Secondary</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Login />
+    </Icon>
+    <Label>Login</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Minus />
+    </Icon>
+    <Label>Minus</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Plus />
+    </Icon>
+    <Label>Plus</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Reset />
+    </Icon>
+    <Label>Reset</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Start />
+    </Icon>
+    <Label>Start</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Stop />
+    </Icon>
+    <Label>Stop</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Triton />
+    </Icon>
+    <Label>Triton</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Triton beta />
+    </Icon>
+    <Label>Triton Beta</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <User />
+    </Icon>
+    <Label>User</Label>
+  </ListItem>
+</List>;
+```

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

@@ -10,8 +10,8 @@ export const List = styled.ul`
 `;
 
 export const Icon = styled.div`
-  width: ${remcalc(180)};
+  width: ${remcalc(165)};
-  height: ${remcalc(180)};
+  height: ${remcalc(165)};
   border: ${remcalc(2)} solid ${props => props.theme.grey};
   align-items: center;
   justify-content: center;

packages/ui-toolkit/src/icons/section.md

@@ -0,0 +1,102 @@
+Icons here are used to denote sperate sections within the Instance Managements space of Triton Compute.
+
+```js noeditor
+const React = require('react');
+const { List, Icon, ListItem } = require('./icons');
+const { default: Label } = require('../label');
+const { default: theme } = require('../theme');
+
+const {
+  Actions,
+  Affinity,
+  Arrow,
+  Bin,
+  Checkcircle,
+  Clipboard,
+  Close,
+  Cns,
+  Copy,
+  DataCenter,
+  Delete,
+  Dot,
+  Duplicate,
+  Edit,
+  Firewall,
+  Health,
+  Id,
+  Import,
+  InstanceCount,
+  InstanceType,
+  Instances,
+  Loading,
+  Login,
+  Metadata,
+  Minus,
+  Network,
+  Package,
+  Plus,
+  Reset,
+  Start,
+  Stop,
+  Tags,
+  Triton,
+  User
+} = require('.');
+
+<List>
+  <ListItem>
+    <Icon>
+      <Affinity />
+    </Icon>
+    <Label>Affinity</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Firewall />
+    </Icon>
+    <Label>Firewall</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Cns />
+    </Icon>
+    <Label>CNS/DNS</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <InstanceCount />
+    </Icon>
+    <Label>InstanceCount</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <InstanceType />
+    </Icon>
+    <Label>InstanceType</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Metadata />
+    </Icon>
+    <Label>Metadata</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Package />
+    </Icon>
+    <Label>Package</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Network />
+    </Icon>
+    <Label>Network</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Tags />
+    </Icon>
+    <Label>Tags</Label>
+  </ListItem>
+</List>;
+```

packages/ui-toolkit/src/styleguide/component.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import remcalc from 'remcalc';
+import { Card, H2, P } from '../';
+import typography from '../typography';
+
+const chevron =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsiIGNsYXNzPSJiYXNlbGluZS1idFRncEsgaGltUHhaIj48cGF0aCBmaWxsPSJyZ2JhKDczLCA3MywgNzMsIDEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiPjwvcGF0aD48L3N2Zz4=';
+
+const CardStyled = styled(Card)`
+  margin-bottom: ${remcalc(36)};
+`;
+
+const Header = styled.header`
+  background: ${props => props.theme.primary};
+  padding: ${remcalc(50)} ${remcalc(120)};
+  position: relative;
+`;
+
+const Main = styled.div`
+  padding: ${remcalc(50)} ${remcalc(120)};
+
+  h4 {
+    margin: 0;
+    ${typography.color};
+    ${typography.fontFamily};
+    ${typography.normal};
+    line-height: ${remcalc(26)};
+    font-size: ${remcalc(21)};
+
+    & + p {
+      margin-top: ${remcalc(12)};
+    }
+  }
+`;
+
+const fadeIn = keyframes`
+   from {opacity: 0;}
+   to {opacity: 1;}
+`;
+
+const Wrapper = styled.div`
+  > div {
+    padding: ${remcalc(16)};
+    animation: ${fadeIn} 250ms ease-in-out;
+    background: ${props => props.theme.whiteHover};
+
+    th[class*='rsg--cellHeading-'] {
+      font-weight: normal;
+      padding-bottom: ${remcalc(16)};
+    }
+
+    thead[class*='rsg--tableHead'] {
+      border: none;
+    }
+
+    table[class*='rsg--table'] {
+      margin: 0;
+    }
+  }
+`;
+
+const Props = styled.div`
+  > div:not(:empty) {
+    position: relative;
+    border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
+  }
+
+  button[class*='rsg--isActive-'] {
+    border: none;
+  }
+
+  button {
+    text-transform: none;
+    color: ${props => props.theme.text};
+    position: relative;
+    cursor: pointer;
+
+    &:after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: ${remcalc(9)};
+      height: ${remcalc(6)};
+      background: url(${chevron});
+      right: ${remcalc(-18)};
+      top: ${remcalc(15)};
+    }
+
+    &:hover {
+      color: ${props => props.theme.text};
+    }
+  }
+`;
+
+const Content = styled.div`
+  margin-top: ${remcalc(40)};
+`;
+
+export default ({
+  name,
+  heading,
+  description,
+  examples,
+  tabButtons,
+  tabBody
+}) => {
+  return (
+    <CardStyled id={name.toLowerCase()}>
+      <Header>
+        <H2 style={{ color: 'white' }}>{heading.props.children}</H2>
+        {description &&
+          description.props && (
+            <P style={{ color: 'white' }}>{description.props.text}</P>
+          )}
+      </Header>
+      <Main>
+        <Props>{tabButtons}</Props>
+        <Wrapper>{tabBody}</Wrapper>
+        <Content>{examples}</Content>
+      </Main>
+    </CardStyled>
+  );
+};

packages/ui-toolkit/src/styleguide/playground.js

@@ -0,0 +1,117 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import is from 'styled-is';
+import remcalc from 'remcalc';
+
+const Wrapper = styled.section`
+  margin-top: ${remcalc(24)};
+  margin-bottom: ${remcalc(46)};
+`;
+
+const Tabs = styled.ul`
+  list-style: none;
+  display: flex;
+  padding: 0;
+  align-items: center;
+  border-bottom: ${remcalc(1)} solid ${props => props.theme.textDisabled};
+`;
+
+const TabHeader = styled.li`
+  position: relative;
+  height: ${remcalc(30)};
+  box-sizing: border-box;
+  line-height: inherit;
+  margin-right: ${remcalc(18)};
+
+  ${is('active')`
+     border-bottom: ${remcalc(1)} solid ${props => props.theme.primary};
+  `};
+
+  li:hover {
+    border-bottom: ${remcalc(1)} solid ${props => props.theme.primary};
+  }
+`;
+
+const Button = styled.button`
+  font-family: 'Libre Franklin';
+  text-transform: uppercase;
+  font-size: ${remcalc(15)};
+  color: ${props => props.theme.textDisabled};
+  border: none;
+  background: ${props => props.theme.white};
+  transition: color 150ms ease-in;
+  cursor: pointer;
+  text-transform: none;
+  padding: 0;
+  margin: 0 ${remcalc(2)};
+
+  ${is('active')`
+    color: ${props => props.theme.primary};
+    font-weight: bold;
+  `};
+
+  &:hover {
+    color: ${props => props.theme.primary};
+  }
+`;
+
+const Tab = styled.div`
+  height: 0;
+  opacity: 0;
+  transition: opacity 150ms ease-in;
+
+  ${is('active')`
+    height: auto;
+    opacity: 1;
+  `};
+
+  .CodeMirror-wrap {
+    border: none;
+    padding: 0;
+  }
+`;
+
+class Playground extends Component {
+  state = {
+    tab: 'component'
+  };
+
+  changeTab = tab => {
+    this.setState({
+      tab
+    });
+  };
+
+  render() {
+    const { name, preview, tabBody } = this.props;
+    return (
+      <Wrapper>
+        <Tabs>
+          <TabHeader active={this.state.tab === 'component'}>
+            <Button
+              active={this.state.tab === 'component'}
+              onClick={() => this.changeTab('component')}
+            >
+              Example
+            </Button>
+          </TabHeader>
+          <TabHeader active={this.state.tab === 'code'}>
+            <Button
+              active={this.state.tab === 'code'}
+              onClick={() => this.changeTab('code')}
+            >
+              Code
+            </Button>
+          </TabHeader>
+        </Tabs>
+
+        <Tab active={this.state.tab === 'component'} data-preview={name}>
+          {preview}
+        </Tab>
+        <Tab active={this.state.tab === 'code'}>{tabBody}</Tab>
+      </Wrapper>
+    );
+  }
+}
+
+export default Playground;

packages/ui-toolkit/src/styleguide/renderer.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { Grid, Row, Col } from '../grid';
+import remcalc from 'remcalc';
+import theme from '../theme';
+import is from 'styled-is';
+import Header, { HeaderBrand } from '../header';
+import { Triton } from '../icons';
+
+const Main = styled(Row)`
+  padding-top: ${remcalc(40)};
+`;
+
+const Sticky = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 9;
+
+  ${is('sidebar')`
+    top: ${remcalc(100)};
+  `};
+`;
+
+const fullTheme = {
+  ...theme,
+  spacing: {
+    0.5: remcalc(4),
+    0: remcalc(0),
+    1: remcalc(6),
+    2: remcalc(12),
+    3: remcalc(18),
+    4: remcalc(24),
+    5: remcalc(30),
+    6: remcalc(36),
+    7: remcalc(42),
+    8: remcalc(48),
+    9: remcalc(54),
+    10: remcalc(60)
+  }
+};
+
+const StyleGuideRenderer = ({
+  title,
+  homepageUrl,
+  children,
+  toc,
+  hasSidebar
+}) => (
+  <ThemeProvider theme={fullTheme}>
+    <div>
+      <Sticky>
+        <Header fluid>
+          <HeaderBrand beta center>
+            <Triton light />
+          </HeaderBrand>
+        </Header>
+      </Sticky>
+      <Grid>
+        <Main>
+          {hasSidebar && (
+            <Col xs={3}>
+              <Sticky sidebar>{toc}</Sticky>
+            </Col>
+          )}
+          <Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
+            {children}
+          </Col>
+        </Main>
+      </Grid>
+    </div>
+  </ThemeProvider>
+);
+
+export default StyleGuideRenderer;

packages/ui-toolkit/src/styleguide/section.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import typography from '../typography';
+import { Card, H2, P } from '../';
+import remcalc from 'remcalc';
+
+const CardStyled = styled(Card)`
+  margin-bottom: ${remcalc(36)};
+`;
+
+const Header = styled.header`
+  background: ${props => props.theme.primary};
+  padding: ${remcalc(50)} ${remcalc(120)};
+  position: relative;
+`;
+
+const Main = styled.div`
+  padding: ${remcalc(50)} ${remcalc(120)};
+
+  h4 {
+    margin: 0;
+    ${typography.color};
+    ${typography.fontFamily};
+    ${typography.normal};
+    line-height: ${remcalc(26)};
+    font-size: ${remcalc(21)};
+
+    & + p {
+      margin-top: ${remcalc(24)};
+    }
+  }
+`;
+
+export default allProps => {
+  const {
+    name,
+    content,
+    components,
+    sections,
+    depth,
+    description
+  } = allProps;
+
+  const Tag = depth === 2 ? CardStyled : 'div';
+  const TagMain = depth === 2 ? Main : 'div';
+  return (
+    <Tag>
+      {name &&
+        depth !== 1 && (
+          <Header>
+            <H2 style={{ color: 'white' }}>{name}</H2>
+            {description && (
+                <P style={{ color: 'white' }}>{description}</P>
+              )}
+          </Header>
+        )}
+      <TagMain>
+        {content}
+        {components}
+        {sections}
+      </TagMain>
+    </Tag>
+  );
+};

packages/ui-toolkit/src/styleguide/sectionHeading.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import cx from 'classnames';
+import Styled from 'react-styleguidist/lib/rsg-components/Styled';
+import remcalc from 'remcalc';
+
+const styles = ({ color, fontFamily, fontSize }) => ({
+  heading: {
+    margin: remcalc(24),
+    marginLeft: 0,
+    color: color.base,
+    fontFamily: fontFamily.base,
+    fontWeight: 'normal'
+  },
+  heading1: {
+    fontSize: remcalc(36)
+  },
+  heading2: {
+    fontSize: remcalc(30)
+  },
+  heading3: {
+    fontSize: remcalc(26)
+  },
+  heading4: {
+    fontSize: remcalc(24)
+  },
+  heading5: {
+    fontSize: remcalc(24)
+  },
+  heading6: {
+    fontSize: remcalc(18)
+  }
+});
+
+const Link = styled.a`
+  color: ${props => props.theme.text};
+  text-decoration: none;
+`;
+
+function HeadingRenderer({ classes, level, children, ...props }) {
+  const Tag = `h${level}`;
+  const headingClasses = cx(classes.heading, classes[`heading${level}`]);
+
+  const Heading = level === 1 ? null : (
+    <Tag {...props} className={headingClasses}>
+      {children}
+    </Tag>
+  )
+
+
+  return Heading
+}
+
+const Heading = Styled(styles)(HeadingRenderer);
+
+export default ({
+  classes,
+  children,
+  toolbar,
+  id,
+  href,
+  depth,
+  deprecated
+}) => {
+  const headingLevel = Math.min(6, depth);
+
+  return (
+    <div>
+      <Heading level={headingLevel} id={id}>
+        <Link href={href}>{children}</Link>
+      </Heading>
+      {/* <div className={classes.toolbar}>{toolbar}</div> */}
+    </div>
+  );
+};

packages/ui-toolkit/src/styleguide/sidebar.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import remcalc from 'remcalc';
+import { H3 } from '../';
+import styled from 'styled-components';
+
+const List = styled.ul`
+  list-style: none;
+  padding: 0;
+
+  ul.rsg--list-1 {
+    padding-left: ${remcalc(6)};
+  }
+
+  a.rsg--link-6 {
+    color: ${props => props.theme.text};
+    margin-bottom: ${remcalc(6)};
+  }
+`;
+
+const Header = styled(H3)`
+  color: #979797;
+  font-size: ${remcalc(18)};
+  margin-bottom: ${remcalc(12)};
+  margin-top: ${remcalc(12)};
+`;
+
+export default ({ children: { props } }) => {
+  const items = props.items.filter(item => item.name);
+
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <List>
+      {items.map(({ heading, name, slug, content }) => (
+        <li key={name}>
+          <Header>{name}</Header>
+          {content}
+        </li>
+      ))}
+    </List>
+  );
+};

packages/ui-toolkit/src/styleguide/tabs.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Styled from 'react-styleguidist/lib/rsg-components/Styled';
+import cx from 'classnames';
+
+export const styles = ({
+  space,
+  color,
+  fontFamily,
+  fontSize,
+  buttonTextTransform
+}) => ({
+  button: {
+    padding: [[space[1], 0]],
+    fontFamily: fontFamily.base,
+    fontSize: fontSize.base,
+    color: color.light,
+    background: 'transparent',
+    textTransform: buttonTextTransform,
+    transition: 'color 750ms ease-out',
+    border: 'none',
+    cursor: 'pointer',
+    '&:hover, &:focus': {
+      isolate: false,
+      outline: 0,
+      color: color.linkHover,
+      transition: 'color 150ms ease-in'
+    },
+    '&:focus:not($isActive)': {
+      isolate: false,
+      outline: [[1, 'dotted', color.linkHover]]
+    },
+    '& + &': {
+      isolate: false,
+      marginLeft: space[1]
+    }
+  },
+  isActive: {
+    borderBottom: [[2, color.linkHover, 'solid']]
+  }
+});
+
+export function TabButtonRenderer({
+  classes,
+  name,
+  className,
+  onClick,
+  active,
+  children
+}) {
+  const classNames = cx(classes.button, className, {
+    [classes.isActive]: active
+  });
+
+  return (
+    <button type="button" name={name} className={classNames} onClick={onClick}>
+      {children}
+      sup
+    </button>
+  );
+}
+
+TabButtonRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  name: PropTypes.string,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  active: PropTypes.bool,
+  children: PropTypes.node
+};
+
+export default Styled(styles)(TabButtonRenderer);

packages/ui-toolkit/src/styleguide/wrapper.js

@@ -14,7 +14,9 @@ const StyledBase = Base.extend`
 export default ({ children }) => (
   <ThemeProvider theme={theme}>
     <StyledBase>
-      <RootContainer>{children}</RootContainer>
+      <RootContainer>
+        {children}
+      </RootContainer>
     </StyledBase>
   </ThemeProvider>
 );

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

@@ -1,4 +1,4 @@
-#### Table > Header
+#### Header
 ```jsx
 const React = require('react');
 const remcalc = require('remcalc');
@@ -23,9 +23,6 @@ const { Dot, Actions } = require('../icons');
       <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>
@@ -33,7 +30,7 @@ const { Dot, Actions } = require('../icons');
 </Table>
   ```
 
-  #### Table > Footer
+  #### Footer
 ```jsx
 const React = require('react');
 const remcalc = require('remcalc');
@@ -58,16 +55,13 @@ const { Dot, Actions } = require('../icons');
       <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
+#### Multiple Selection List
 ```jsx
 const React = require('react');
 const remcalc = require('remcalc');
@@ -92,9 +86,6 @@ const { Dot, Actions } = require('../icons');
       <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>
@@ -106,7 +97,7 @@ const { Dot, Actions } = require('../icons');
         </FormGroup>
       </Td>
       <Td middle left bold>
-        percona_high-ram-32_1_snapshot_1
+        percona-ram-32
       </Td>
       <Td middle left>
         <span>
@@ -122,9 +113,6 @@ const { Dot, Actions } = require('../icons');
       <Td xs="0" sm="160" middle left>
         about 2 months
       </Td>
-      <Td xs="0" sm="130" middle left>
-        <code>2252839</code>
-      </Td>
       <Td padding="0" center hasBorder="left">
         <Actions />
       </Td>
@@ -136,7 +124,7 @@ const { Dot, Actions } = require('../icons');
         </FormGroup>
       </Td>
       <Td middle left bold>
-        percona_high-ram-32_1_snapshot_2
+        percona-ram-32
       </Td>
       <Td middle left>
         <span>
@@ -152,9 +140,6 @@ const { Dot, Actions } = require('../icons');
       <Td xs="0" sm="160" middle left>
         about 1 hour
       </Td>
-      <Td xs="0" sm="130" middle left>
-        <code>6739567</code>
-      </Td>
       <Td padding="0" center hasBorder="left">
         <Actions />
       </Td>
@@ -163,7 +148,7 @@ const { Dot, Actions } = require('../icons');
 </Table>;
 ```
 
-#### Table > Single Selection List
+#### Single Selection List
 ```jsx
 const React = require('react');
 const remcalc = require('remcalc');
@@ -185,9 +170,6 @@ const { Dot, Actions } = require('../icons');
       <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>
@@ -198,7 +180,7 @@ const { Dot, Actions } = require('../icons');
         </FormGroup>
       </Td>
       <Td middle left bold selected>
-        percona_high-ram-32_1_snapshot_1
+        percona-ram-32
       </Td>
       <Td middle left selected>
         <span>
@@ -214,9 +196,6 @@ const { Dot, Actions } = require('../icons');
       <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>
@@ -225,7 +204,7 @@ const { Dot, Actions } = require('../icons');
         </FormGroup>
       </Td>
       <Td middle left bold>
-        percona_high-ram-32_1_snapshot_2
+        percona-ram-32
       </Td>
       <Td middle left>
         <span>
@@ -241,9 +220,6 @@ const { Dot, Actions } = require('../icons');
       <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

@@ -1,100 +1,48 @@
-Joyent's font is Libre Franklin, which is available to use at
+#### Large Type Scale
-[Google Fonts](https://fonts.google.com/specimen/Libre+Franklin).
-
-The font sizes in the toolkit are based on an
-[augmented fourth modular scale](http://www.modularscale.com/?15,24&px&1.414),
-with base font size of **15px**.
-
-### Headings
-
-Headings are available from `h1` through to `h4`. If demand is shown for `h5`
-and `h6`, these will be included in the toolkit.
-
-To learn more about the correct usage of HTML headings, visit
-[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
-
-#### Heading 1
 
 ```jsx
 const React = require('react');
 const H1 = require('/').H1;
-
-<H1>Inspire the lazy</H1>;
-```
-
-#### Heading 2
-
-```jsx
-const React = require('react');
 const H2 = require('/').H2;
-
-<H2>Inspire the lazy</H2>;
-```
-
-#### Heading 3
-
-```jsx
-const React = require('react');
 const H3 = require('/').H3;
-
-<H3>Inspire the lazy</H3>;
-```
-
-#### Heading 4
-
-```jsx
-const React = require('react');
 const H4 = require('/').H4;
-
-<H4>Inspire the lazy</H4>;
-```
-
-### Paragraph
-
-```jsx
-const React = require('react');
 const P = require('/').P;
-
-<P>
-  Joyent experts provide 360 degree support for modern application
-  architectures, including development frameworks, container orchestration
-  tools, and hybrid cloud infrastructures.
-</P>;
-```
-
-### Small
-
-If you need to display content that is less important that the main body text,
-or where space is more constrained, you can use the `<small>` element. This will
-reduce the text size to 13px.
-
-```jsx
-const React = require('react');
 const Small = require('/').Small;
 
-<Small>
+const styles = {
-  Triton is 100% open source and designed to eliminate cloud provider lock-in.
+  color: "#979797",
-  With support for popular container management tools like Kubernetes, augmented
+  marginBottom: '22px',
-  by our own open source project ContainerPilot, we are working with the
+  display: 'block',
-  community to deliver simple to operate platform services that are open and
+  marginTop: '6px',
-  portable.
+  padding: 0
-</Small>;
+};
-```
+
-
+<div>
-### Label
+<H1>H1 - Don’t say it, shout it</H1>
-
+<Small style={styles}>
-The `<label>` element is used for captions in the user interface and information
+  Libre Franklin Regular - 36px with 45px leading
-labels (i.e. text that is not continuous body text).
+</Small>
-
+<H2>H2 - Breadcrumb? More like breadloaf</H2>
-Read more about using the `<label>` element on the
+<Small style={styles}>
-[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
+  Libre Franklin Regular - 24px with 30px leading
-
+</Small>
-```jsx
+<H3>H3 - Your friendly neighbourhood workhorse</H3>
-const React = require('react');
+<Small style={styles}>
-const Label = require('/').Label;
+  Libre Franklin Regular - 21px with 26px leading
-
+</Small>
-<Label>
+<H4>H4 - Bodies bigger brother</H4>
-  Hybrid, Modern and Open, Triton is engineered to run the world’s largest cloud
+<Small style={styles}>
-  native applications
+  Libre Franklin Semibold - 15px with 24px leading
-</Label>;
+</Small>
+<P>
+  P - Body copy 
+</P>
+<Small style={styles}>
+  Libre Franklin Regular - 15px with 24px leading
+</Small>
+<Small> C - Caption text</Small>
+<Small style={styles}>
+  Libre Franklin Regular - 13px with 18px leadings
+</Small>
+</div>
 ```

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

@@ -1,3 +1,7 @@
+/**
+ * Our large typographic scale is based on a modular scale based on 15px and 24px and the augmented fourth scale: http://www.modularscale.com/?15,24&px&1.414
+ */
+
 export { H1, H2, H3, H4, H5 } from './headings';
 export { default as P } from './p';
 export { default as Small } from './small';

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

@@ -1,309 +1,156 @@
 import React from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import { P, H2 } from '../text';
+import { P, H3 } from '../text';
+import is from 'styled-is';
 import theme from './';
+import { Margin } from 'styled-components-spacing';
+
+// Function to convert hex format to a rgb color
+function rgb2hex(rgb) {
+  rgb = rgb.match(
+    /^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i
+  );
+  return rgb && rgb.length === 4
+    ? '#' +
+        ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
+        ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
+        ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2)
+    : '';
+}
 
 const Box = styled.div`
-  width: ${remcalc(130)};
+  height: ${remcalc(48)};
+  background: ${props => props.hex};
+  width: 100%;
   margin: auto;
   text-align: center;
-`;
+  padding: 0 ${remcalc(60)};
-
+  box-sizing: border-box;
-const Data = styled.td`
-  padding: ${remcalc(18)} 0;
-  border-bottom: ${remcalc(1)} solid ${theme.grey};
-  max-width: ${remcalc(250)};
-`;
-
-const Table = styled.table`
-  /** */
-  width: 100%;
-`;
-
-const InnerBox = styled.div`
-  margin-top: ${remcalc(6)};
-  line-height: ${remcalc(24)};
-  font-size: ${remcalc(16)};
-  color: ${theme.text};
-`;
-
-const Preview = styled.div`
-  display: inline-block;
-  background: ${props => props.hex};
-  width: ${remcalc(96)};
-  height: ${remcalc(96)};
-  border: ${remcalc(1)} solid ${theme.grey};
-  box-shadow: 0 ${remcalc(2)} ${remcalc(1)} rgba(0, 0, 0, 0.05);
 `;
 
 const Paragraph = P.extend`
   font-size: ${remcalc(13)};
   margin: 0;
+  font-weight: bold;
+  color: ${props => props.theme.white};
+  width: ${remcalc(193)};
+  text-align: left;
+
+  ${is('dark')`
+    color: ${props => props.theme.text};
+  `};
 `;
 
-const ColorName = styled(H2)`
+const Code = styled.code`
-  /* trick prettier */
+  font-size: ${remcalc(13)};
-  max-width: ${remcalc(100)};
+  margin: 0;
+  color: ${props => props.theme.white};
+
+  ${is('dark')`
+    color: ${props => props.theme.text};
+  `};
 `;
 
-const Color = ({ name, hex }) => (
+const List = styled.ul`
-  <Box>
+  list-style: none;
-    <Preview hex={hex} />
+  display: flex;
-    <InnerBox background={hex}>
+  justify-content: space-between;
-      <Paragraph>{hex.toUpperCase()}</Paragraph>
+  align-items: center;
-    </InnerBox>
+  padding: 0;
+  margin: 0;
+  height: ${remcalc(48)};
+
+  li {
+    padding: 0;
+  }
+`;
+
+const Color = ({ name, color, dark }) => (
+  <Box hex={color}>
+    <List>
+      <li>
+        <Paragraph dark={dark}>{name}</Paragraph>
+      </li>
+      <li>
+        <Code dark={dark}>{rgb2hex(color)}</Code>
+      </li>
+      <li>
+        <Code dark={dark}>{color}</Code>
+      </li>
+    </List>
   </Box>
 );
 
-export default () => (
+export default () => [
-  <Table>
+  <div>
-    <thead>
+    <H3>Action Colors</H3>
-      <tr>
+    <P>
-        <th />
+      This palette is Tritons ‘action and status’ colors. They aim to
-        <th>Default</th>
+      communicate that a component is interactable and has a purpose. They also
-        <th>Hover</th>
+      act as status colors to alert users on the condition and nature of
-        <th>Click</th>
+      components.
-        <th>Disabled</th>
+    </P>
-        <th>Usage</th>
+  </div>,
-      </tr>
+  <Margin top={4} bottom={2}>
-    </thead>
+    <Color
-    <tbody>
+      key="primaryHover"
-      <tr>
+      name="Blue 1 - Aqua Marine"
-        <Data>
+      color={theme.primary}
-          <ColorName>Blue fill / blue text</ColorName>
+    />
-        </Data>
+    <Color
-        <Data>
+      key="primaryActive"
-          <Color key="primary" name="primary" hex={theme.primary} />
+      name="Blue 2 - Lost in Space"
-        </Data>
+      color={theme.primaryActive}
-        <Data>
+    />
-          <Color
+  </Margin>,
-            key="primaryHover"
+  <Margin bottom={2}>
-            name="primaryHover"
+    <Color key="green" name="Green 1 - Confirmaton" color={theme.green} />
-            hex={theme.primaryHover}
+    <Color
-          />
+      key="greenDark"
-        </Data>
+      name="Green 2 - Confirmation Outline"
-        <Data>
+      color={theme.greenDark}
-          <Color
+    />
-            key="primaryActive"
+  </Margin>,
-            name="primaryActive"
+  <Margin bottom={2}>
-            hex={theme.primaryActive}
+    <Color key="orange" name="Orange 1 - Warning" color={theme.orange} />
-          />
+    <Color
-        </Data>
+      key="orangeDark"
-        <Data>
+      name="Orange 2 - Warning Outline"
-          <Color key="disabled" name="disabled" hex={theme.disabled} />
+      color={theme.orangeDark}
-        </Data>
+    />
-        <Data>
+  </Margin>,
-          Fill for primary buttons, text anchors (including interactive parts of
+  <Margin bottom={5}>
-          the breadcrumb) and other UI components, whose priority or prominence
+    <Color key="red" name="Red 1 - Error" color={theme.red} />
-          is emphasized with color.
+    <Color key="redDark" name="Red 2 - Error Outline" color={theme.redDark} />
-        </Data>
+  </Margin>,
-      </tr>
+  <H3>Greys</H3>,
-      <tr>
+  <P>
-        <Data>
+    Colors on this page aim to give Triton a sense of depth and to offer
-          <ColorName>Blue border</ColorName>
+    contrast between potentially similar components. They allow us to make
-        </Data>
+    certain components look clickable, whilst making others appear disabled or
-        <Data>
+    static.
-          <Color
+  </P>,
-            key="primaryActive"
+  <Margin top={4}>
-            name="primaryActive"
+    <Color
-            hex={theme.primaryActive}
+      dark
-          />
+      key="disabled"
-        </Data>
+      name="Grey 1 - Background"
-        <Data />
+      color={theme.disabled}
-        <Data />
+    />
-        <Data>
+    <Color
-          <Color key="disabled" name="disabled" hex={theme.disabled} />
+      dark
-        </Data>
+      key="whiteActive"
-        <Data>
+      name="Grey 2 - Faded"
-          Borders of primary buttons and other UI components, whose priority or
+      color={theme.whiteActive}
-          prominence is emphasized with color.
+    />
-        </Data>
+    <Color dark key="grey" name="Grey 3  - Outline" color={theme.grey} />
-      </tr>
+    <Color key="greyDark" name="Grey 4  - Disabled" color={theme.greyDark} />
-      <tr>
+    <Color key="text" name="Grey 5  - Text" color={theme.text} />
-        <Data>
+    <Color
-          <ColorName>White fill</ColorName>
+      key="greyDarker"
-        </Data>
+      name="Grey 6  - Charcoal"
-        <Data>
+      color={theme.greyDarker}
-          <Color key="white" name="white" hex={theme.white} />
+    />
-        </Data>
+  </Margin>
-        <Data>
+];
-          <Color key="whiteHover" name="whiteHover" hex={theme.whiteHover} />
-        </Data>
-        <Data>
-          <Color key="whiteActive" name="whiteActive" hex={theme.whiteActive} />
-        </Data>
-        <Data>
-          <Color key="disabled" name="disabled" hex={theme.disabled} />
-        </Data>
-        <Data>
-          Fill for secondary buttons, inputs, dropdown menus, tables, service
-          and instance cards and other components that need to be distinguished
-          from the overall layout.
-        </Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Grey border</ColorName>
-        </Data>
-        <Data>
-          <Color key="grey" name="grey" hex={theme.grey} />
-        </Data>
-        <Data />
-        <Data />
-        <Data />
-        <Data>Borders of white or grey UI components and dividers.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Charcoal fill</ColorName>
-        </Data>
-        <Data>
-          <Color key="secondary" name="secondary" hex={theme.secondary} />
-        </Data>
-        <Data>
-          <Color
-            key="secondaryHover"
-            name="secondaryHover"
-            hex={theme.secondaryHover}
-          />
-        </Data>
-        <Data>
-          <Color
-            key="secondaryActive"
-            name="secondaryActive"
-            hex={theme.secondaryActive}
-          />
-        </Data>
-        <Data>
-          <Color key="disabled" name="disabled" hex={theme.disabled} />
-        </Data>
-        <Data>Fill for topology components.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Charcoal border</ColorName>
-        </Data>
-        <Data>
-          <Color
-            key="secondaryActive"
-            name="secondaryActive"
-            hex={theme.secondaryActive}
-          />
-        </Data>
-        <Data />
-        <Data />
-        <Data>
-          <Color
-            key="textDisabled"
-            name="textDisabled"
-            hex={theme.textDisabled}
-          />
-        </Data>
-        <Data>Border for topology components.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Text</ColorName>
-        </Data>
-        <Data>
-          <Color key="text" name="text" hex={theme.text} />
-        </Data>
-        <Data />
-        <Data />
-        <Data>
-          <Color
-            key="textDisabled"
-            name="textDisabled"
-            hex={theme.textDisabled}
-          />
-        </Data>
-        <Data>Any text.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Example Text</ColorName>
-        </Data>
-        <Data>
-          <Color key="placeholder" name="placeholder" hex={theme.placeholder} />
-        </Data>
-        <Data />
-        <Data />
-        <Data />
-        <Data>Input placeholder text.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Red fill / red text</ColorName>
-        </Data>
-        <Data>
-          <Color key="red" name="red" hex={theme.red} />
-        </Data>
-        <Data />
-        <Data />
-        <Data />
-        <Data>Errors</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Red border</ColorName>
-        </Data>
-        <Data>
-          <Color key="redDark" name="redDark" hex={theme.redDark} />
-        </Data>
-        <Data />
-        <Data />
-        <Data />
-        <Data>Complements red fill.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Green fill / green text</ColorName>
-        </Data>
-        <Data>
-          <Color key="redDark" name="greenDark" hex={theme.greenDark} />
-        </Data>
-        <Data />
-        <Data />
-        <Data />
-        <Data>Confirmations and instructional components.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Green border</ColorName>
-        </Data>
-        <Data>
-          <Color key="green" name="green" hex={theme.green} />
-        </Data>
-        <Data />
-        <Data />
-        <Data />
-        <Data>Confirmations and instructional components.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Orange Fill</ColorName>
-        </Data>
-        <Data>
-          <Color key="orange" name="orange" hex={theme.orange} />
-        </Data>
-        <Data />
-        <Data />
-        <Data />
-        <Data>To notify users of things that require their attention.</Data>
-      </tr>
-      <tr>
-        <Data>
-          <ColorName>Orange border / orange text</ColorName>
-        </Data>
-        <Data>
-          <Color key="orangeDark" name="orangeDark" hex={theme.orangeDark} />
-        </Data>
-        <Data />
-        <Data />
-        <Data />
-        <Data>Complements orange fill.</Data>
-      </tr>
-    </tbody>
-  </Table>
-);

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

@@ -35,7 +35,9 @@ const white = {
 const grey = {
   grey: 'rgb(216, 216, 216)',
   greyTransparent: 'rgba(73, 73, 73, 0.8)',
-  greyLight: 'rgb(189, 189, 189)'
+  greyLight: 'rgb(189, 189, 189)',
+  greyDark: 'rgb(151, 151, 151)',
+  greyDarker: 'rgb(052, 052, 052)'
 };
 
 const green = {

packages/ui-toolkit/styleguide.config.js

@@ -18,15 +18,77 @@ module.exports = {
       })
     })
   }),
-  title: 'UI Toolkit',
+  styleguideComponents: {
+    StyleGuideRenderer: path.join(__dirname, 'src/styleguide/renderer'),
+    TableOfContentsRenderer: path.join(__dirname, 'src/styleguide/sidebar'),
+    ReactComponentRenderer: path.join(__dirname, 'src/styleguide/component'),
+    PlaygroundRenderer: path.join(__dirname, 'src/styleguide/playground'),
+    TabButtonRenderer: path.join(__dirname, 'src/styleguide/tabs'),
+    SectionHeadingRenderer: path.join(
+      __dirname,
+      'src/styleguide/sectionHeading'
+    ),
+    SectionRenderer: path.join(__dirname, 'src/styleguide/section')
+  },
+  title: 'Design System',
+  showCode: true,
   sections: [
     {
-      name: 'Get Started',
+      name: 'Base Language',
       sections: [
         {
-          name: 'Overview',
+          name: 'Color Palette',
-          content: 'src/overview.md'
+          description:
+            'Triton’s color palette aim to accessible and clear, whilst making distinctions between elements that are alive and elements that are static. We’ve split our palette into two sections; Action colors and Greys. ',
+          content: 'src/theme/colors.md'
         },
+        {
+          name: 'Typography',
+          content: 'src/text/Readme.md'
+        }
+      ]
+    },
+    {
+      name: 'Basic Components',
+      components: () => [
+        'src/button/index.js',
+        'src/form/input.js',
+        'src/form/radio.js',
+        'src/form/select.js',
+        'src/form/checkbox.js',
+        'src/form/toggle.js',
+        'src/card/card.js',
+        'src/tooltip/index.js',
+        'src/popover/index.js'
+      ]
+    },
+    {
+      name: 'Compound Components',
+      components: () => [
+        'src/table/index.js',
+        'src/header/index.js',
+        'src/message/index.js',
+        'src/section-list/index.js',
+        'src/breadcrumb/index.js',
+        'src/progress-bar/index.js'
+      ]
+    },
+    {
+      name: 'Assets',
+      sections: [
+        {
+          name: 'Section Iconography',
+          content: 'src/icons/section.md'
+        },
+        {
+          name: 'Functional Iconography',
+          content: 'src/icons/functional.md'
+        }
+      ]
+    },
+    {
+      name: 'Developer',
+      sections: [
         {
           name: 'Download',
           content: 'src/download.md'
@@ -35,52 +97,11 @@ module.exports = {
           name: 'Contribute',
           content: 'src/contribute.md'
         },
-        {
-          name: 'Support',
-          content: 'src/support.md'
-        },
         {
           name: 'FAQ',
           content: 'src/faq.md'
         }
       ]
-    },
-    {
-      name: 'Base',
-      sections: [
-        {
-          name: 'Typography',
-          content: 'src/text/Readme.md'
-        },
-        {
-          name: 'Colors',
-          content: 'src/theme/colors.md'
-        },
-        {
-          name: 'Icons',
-          content: 'src/icons/Readme.md'
-        }
-      ]
-    },
-    {
-      name: 'Components',
-      components: () => [
-        'src/breadcrumb/index.js',
-        'src/button/index.js',
-        'src/card/card.js',
-        'src/form/checkbox.js',
-        'src/header/index.js',
-        'src/form/input.js',
-        'src/message/index.js',
-        'src/progress-bar/index.js',
-        'src/popover/index.js',
-        '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'
-      ]
     }
   ],
   theme: {

prototypes/cra-boilerplate/package.json

@@ -26,7 +26,7 @@
     "react-scripts": "1.0.17",
     "redux": "^3.7.2",
     "redux-form": "^7.1.2",
-    "styled-components": "^2.2.3"
+    "styled-components": "^2.3.0"
   },
   "devDependencies": {
     "babel-preset-joyent-portal": "^3.3.3",
@@ -34,7 +34,7 @@
     "eslint-config-joyent-portal": "^3.2.0",
     "joyent-react-scripts": "^3.1.1",
     "prettier": "^1.8.2",
-    "stylelint": "^8.2.0",
+    "stylelint": "^8.4.0",
     "stylelint-config-joyent-portal": "^2.0.1"
   }
 }

prototypes/create-instance-icons/package.json

@@ -37,7 +37,7 @@
     "redux": "^3.7.2",
     "redux-form": "^7.1.2",
     "remcalc": "^1.0.9",
-    "styled-components": "^2.2.3",
+    "styled-components": "^2.3.0",
     "styled-components-spacing": "^2.1.3",
     "styled-is": "^1.1.0",
     "unitcalc": "^1.1.1"
@@ -69,7 +69,7 @@
     "react-scripts": "^1.0.17",
     "react-test-renderer": "^16.1.1",
     "redrun": "^5.10.0",
-    "stylelint": "^8.2.0",
+    "stylelint": "^8.4.0",
     "stylelint-config-joyent-portal": "^2.0.1"
   }
 }

prototypes/create-instance/package.json

@@ -34,7 +34,7 @@
     "redux": "^3.7.2",
     "redux-form": "^7.1.2",
     "remcalc": "^1.0.9",
-    "styled-components": "^2.2.3",
+    "styled-components": "^2.3.0",
     "styled-is": "^1.1.0",
     "unitcalc": "^1.1.1"
   },
@@ -63,7 +63,7 @@
     "react-scripts": "^1.0.17",
     "react-test-renderer": "^16.1.1",
     "redrun": "^5.10.0",
-    "stylelint": "^8.2.0",
+    "stylelint": "^8.4.0",
     "stylelint-config-joyent-portal": "^2.0.1"
   }
 }