test(ui-toolkit): initial tests

.yarnrc

@@ -1 +0,0 @@
-workspaces-experimental true

packages/icons/package.json

@@ -23,10 +23,10 @@
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-preset-joyent-portal": "^4.0.4",
+    "babel-preset-joyent-portal": "^6.0.1",
     "eslint": "^4.13.1",
     "eslint-config-joyent-portal": "^3.2.0",
-    "joyent-react-scripts": "^6.2.0",
+    "joyent-react-scripts": "^6.5.0",
     "react": "^16.2.0",
     "redrun": "^5.10.0"
   },

packages/my-joy-beta/package.json

@@ -15,7 +15,7 @@
     "lint":
       "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
     "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
-    "test-ci": "redrun test",
+    "test-ci": "echo 0",
     "prepublish": "echo 0"
   },
   "dependencies": {
@@ -25,7 +25,7 @@
     "clipboard-copy": "^1.2.0",
     "date-fns": "^1.29.0",
     "declarative-redux-form": "^1.0.4",
-    "joyent-ui-toolkit": "^3.1.6",
+    "joyent-ui-toolkit": "^4.0.0",
     "joyent-manifest-editor": "^1.4.0",
     "lodash.find": "^4.6.0",
     "lodash.get": "^4.4.2",
@@ -51,8 +51,7 @@
     "title-case": "^2.1.1"
   },
   "devDependencies": {
-    "babel-plugin-inline-react-svg": "^0.5.2",
+    "babel-preset-joyent-portal": "^6.0.1",
-    "babel-preset-joyent-portal": "^4.0.4",
     "eslint": "^4.13.1",
     "eslint-config-joyent-portal": "^3.2.0",
     "jest": "^21.2.1",
@@ -64,7 +63,7 @@
     "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
     "jest-transform-graphql": "^2.1.0",
-    "joyent-react-scripts": "^6.2.0",
+    "joyent-react-scripts": "^6.5.0",
     "react-test-renderer": "^16.2.0",
     "redrun": "^5.10.0",
     "serve": "^6.4.1",

packages/ui-toolkit/.babelrc

@@ -1,8 +1,3 @@
 {
-  "presets": ["joyent-portal"],
+  "presets": ["joyent-portal"]
-  "plugins": [
-    ["inline-react-svg", {
-      "ignorePattern": "libre-franklin"
-    }]
-  ]
 }

packages/ui-toolkit/package.json

@@ -7,20 +7,15 @@
   "jsnext:main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "scripts": {
-    "lint-ci":
+    "lint-ci": "eslint . --ext .js --ext .md",
-      "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint": "eslint . --fix --ext .js --ext .md",
-    "lint":
+    "test-ci": "redrun test",
-      "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "test": "redrun -p lint jest",
-    "test-ci": "echo 0",
+    "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
-    "test": "echo 0",
+    "compile:es": "babel src --out-dir dist/es --ignore spec.js",
-    "test:visual": "run-p serve jest",
+    "compile:umd": "UMD=1 babel src --out-dir dist/umd --ignore spec.js",
-    "jest": "jest",
-    "serve": "http-server styleguide -p 6060 -s",
-    "compile:es": "NODE_ENV='production' babel src --out-dir dist/es",
-    "compile:umd": "UMD=1 babel src --out-dir dist/umd",
     "compile": "redrun -p compile:*",
-    "dev":
+    "dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
-      "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
     "styleguide:build": "NODE_ENV=production styleguidist build",
     "styleguide": "NODE_ENV=development styleguidist server",
     "prepublish": "NODE_ENV=production npm run compile"
@@ -30,17 +25,14 @@
     "joy-react-broadcast": "^0.6.9",
     "joyent-icons": "^2.0.0",
     "lodash.isboolean": "^3.0.3",
-    "lodash.isstring": "^4.0.1",
     "normalized-styled-components": "^1.0.17",
     "outy": "^0.1.2",
     "pascal-case": "^2.0.1",
     "prop-types": "^15.6.0",
     "react-bundle": "^1.0.4",
-    "react-input-range": "^1.2.2",
     "react-popper": "^0.7.4",
     "react-responsive": "^4.0.3",
     "react-styled-flexboxgrid": "^2.1.1",
-    "redrun": "^5.10.0",
     "remcalc": "^1.0.9",
     "rnd-id": "^2.0.0",
     "styled-components": "^2.3.0",
@@ -49,40 +41,28 @@
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-plugin-inline-react-svg": "^0.5.2",
+    "babel-preset-joyent-portal": "^6.0.1",
-    "babel-plugin-lodash": "^3.3.2",
-    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
-    "babel-plugin-transform-es3-property-literals": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-joyent-portal": "^4.0.4",
     "classnames": "^2.2.5",
-    "codemirror": "^5.32.0",
     "eslint": "^4.13.1",
     "eslint-config-joyent-portal": "^3.2.0",
-    "http-server": "^0.10.0",
-    "jest": "^21.2.1",
-    "jest-diff": "^21.2.1",
-    "jest-image-snapshot": "^2.2.0",
-    "jest-matcher-utils": "^21.2.1",
-    "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
-    "joyent-react-scripts": "^6.2.0",
+    "joyent-react-scripts": "^6.5.0",
     "lodash.isboolean": "^3.0.3",
-    "navalia": "^1.2.0",
     "react": "^16.2.0",
     "react-docgen": "^3.0.0-beta8",
     "react-docgen-displayname-handler": "^1.0.1",
     "react-dom": "^16.2.0",
     "react-styleguidist": "^6.0.33",
     "react-test-renderer": "^16.2.0",
+    "redrun": "^5.10.0",
     "redux": "^3.7.2",
-    "serve-static": "^1.13.1",
     "stylelint": "^8.4.0",
     "stylelint-config-joyent-portal": "^2.0.1",
     "webpack": "^3.10.0"
   },
   "peerDependencies": {
     "joyent-manifest-editor": "^1.4.0",
+    "codemirror": "^5.32.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   }

packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Anchor Default Anchor 1`] = `
+.c1 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c0 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c0:hover {
+  text-decoration: none;
+}
+
+<a
+  className="c0 c1"
+  href="https://joyent.com"
+>
+  Inspire the lazy
+</a>
+`;
+
+exports[`Anchor Disabled Anchor 1`] = `
+.c1 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c0 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+  color: rgb(216,216,216);
+  -webkit-text-fill-color: currentcolor;
+  pointer-events: none;
+}
+
+.c0:hover {
+  text-decoration: none;
+}
+
+.c0:hover {
+  text-decoration: underline;
+}
+
+<a
+  className="c0 c1"
+  disabled={true}
+  href="https://joyent.com"
+>
+  Inspire the lazy
+</a>
+`;
+
+exports[`Anchor Reversed Anchor 1`] = `
+.c1 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c0 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c0:hover {
+  text-decoration: none;
+}
+
+<a
+  className="c0 c1"
+  href="https://joyent.com"
+  reversed={true}
+>
+  Inspire the lazy
+</a>
+`;

packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Anchor from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Anchor', () => {
+  test('Default Anchor', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Anchor href="https://joyent.com">Inspire the lazy</Anchor>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.primary.replace(/ /g, ''));
+  });
+
+  test('Reversed Anchor', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Anchor reversed href="https://joyent.com">
+            Inspire the lazy
+          </Anchor>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, ''));
+  });
+
+  test('Disabled Anchor', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Anchor disabled href="https://joyent.com">
+            Inspire the lazy
+          </Anchor>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.grey.replace(/ /g, ''));
+  });
+});

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

@@ -1,52 +0,0 @@
-import { css } from 'styled-components';
-import remcalc from 'remcalc';
-
-export const borderRadius = remcalc(4);
-
-export const bottomShadow = `
-  /* trick prettier */
-  0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)
-`;
-
-export const bottomShadowDarker = `
-  /* trick prettier */
-  0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)
-`;
-
-export const insetShadow = `
-  /* trick prettier */
-  inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)
-`;
-
-export const tooltipShadow = `
-  /* trick prettier */
-  0 ${remcalc(2)} ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)
-`;
-
-export const modalShadow = `
-  /* trick prettier */
-  0 0 ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)
-`;
-
-export const border = {
-  checked: css`
-    /* trick prettier */
-    ${remcalc(1)} solid ${props => props.theme.primary};
-  `,
-  unchecked: css`
-    /* trick prettier */
-    ${remcalc(1)} solid ${props => props.theme.grey};
-  `,
-  confirmed: css`
-    /* trick prettier */
-    ${remcalc(1)} solid ${props => props.theme.grey};
-  `,
-  error: css`
-    /* trick prettier */
-    ${remcalc(1)} solid ${props => props.theme.red};
-  `,
-  secondary: css`
-    /* trick prettier */
-    ${remcalc(1)} solid ${props => props.theme.secondaryActive};
-  `
-};

packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,326 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumb Default Breadcrumb 1`] = `
+.c5 {
+  color: rgba(73,73,73,1);
+  line-height: 1.875rem;
+  font-size: 1.5rem;
+  margin: 0;
+  color: rgb(59,70,204);
+  margin: 0.75rem 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+  margin-top: 1.5rem;
+}
+
+.c6 {
+  margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c3 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 2rem;
+  padding-left: 2rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  border-bottom: 0.0625rem solid rgb(216,216,216);
+}
+
+@media only screen and (min-width:0em) {
+  .c3 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c1 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      name="breadcrum"
+    >
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          <h2
+            className="c5"
+            name="breadcrum-item"
+          >
+            Home
+          </h2>
+          <svg
+            className="c6 "
+            height="10"
+            style={
+              Object {
+                "transform": "rotate(0deg)",
+              }
+            }
+            viewBox="0 0 6 10"
+            width="6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              fill="rgba(73, 73, 73, 1)"
+              fillRule="evenodd"
+              opacity=".5"
+            />
+          </svg>
+        </div>
+        <div
+          className="c4"
+        >
+          <h2
+            className="c5"
+            name="breadcrum-item"
+          >
+            Warp Records Blog
+          </h2>
+          <svg
+            className="c6 "
+            height="10"
+            style={
+              Object {
+                "transform": "rotate(0deg)",
+              }
+            }
+            viewBox="0 0 6 10"
+            width="6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              fill="rgba(73, 73, 73, 1)"
+              fillRule="evenodd"
+              opacity=".5"
+            />
+          </svg>
+        </div>
+        <div
+          className="c4"
+        >
+          <h2
+            className="c5"
+            name="breadcrum-item"
+          >
+            Services
+          </h2>
+          <svg
+            className="c6 "
+            height="10"
+            style={
+              Object {
+                "transform": "rotate(0deg)",
+              }
+            }
+            viewBox="0 0 6 10"
+            width="6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              fill="rgba(73, 73, 73, 1)"
+              fillRule="evenodd"
+              opacity=".5"
+            />
+          </svg>
+        </div>
+        <div
+          className="c4"
+        >
+          <h2
+            className="c5"
+            name="breadcrum-item"
+          >
+            Nginx
+          </h2>
+          <svg
+            className="c6 "
+            height="10"
+            style={
+              Object {
+                "transform": "rotate(0deg)",
+              }
+            }
+            viewBox="0 0 6 10"
+            width="6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              fill="rgba(73, 73, 73, 1)"
+              fillRule="evenodd"
+              opacity=".5"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Breadcrumb Default Item 1`] = `
+.c1 {
+  color: rgba(73,73,73,1);
+  line-height: 1.875rem;
+  font-size: 1.5rem;
+  margin: 0;
+  color: rgb(59,70,204);
+  margin: 0.75rem 0;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  margin-top: 1.5rem;
+}
+
+.c2 {
+  margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+  className="c0"
+>
+  <h2
+    className="c1"
+    name="breadcrum-item"
+  >
+    Home
+  </h2>
+  <svg
+    className="c2 "
+    height="10"
+    style={
+      Object {
+        "transform": "rotate(0deg)",
+      }
+    }
+    viewBox="0 0 6 10"
+    width="6"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+      fill="rgba(73, 73, 73, 1)"
+      fillRule="evenodd"
+      opacity=".5"
+    />
+  </svg>
+</div>
+`;

packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Anchor from '../';
+import Breadcrumb, { Item } from '../';
+import { Theme } from '../../mocks'
+
+describe('Breadcrumb', () => {
+  test('Default Breadcrumb', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Breadcrumb>
+            <Item>Home</Item>
+            <Item>Warp Records Blog</Item>
+            <Item>Services</Item>
+            <Item>Nginx</Item>
+          </Breadcrumb>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Default Item', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Item>Home</Item>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap

@@ -0,0 +1,571 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Default Button 1`] = `
+.c3 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c2 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c2:hover {
+  text-decoration: none;
+}
+
+.c1 {
+  display: inline-block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c0:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<a
+  className="c0 c1 c2 c3"
+  href="https://joyent.com"
+>
+  Inspire the lazy
+</a>
+`;
+
+exports[`Button Disabled Button 1`] = `
+.c3 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c2 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+  color: rgb(216,216,216);
+  -webkit-text-fill-color: currentcolor;
+  pointer-events: none;
+}
+
+.c2:hover {
+  text-decoration: none;
+}
+
+.c2:hover {
+  text-decoration: underline;
+}
+
+.c1 {
+  display: inline-block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c0:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c0:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+<a
+  className="c0 c1 c2 c3"
+  disabled={true}
+  href="https://joyent.com"
+>
+  Inspire the lazy
+</a>
+`;
+
+exports[`Button Error Button 1`] = `
+.c3 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c2 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c2:hover {
+  text-decoration: none;
+}
+
+.c1 {
+  display: inline-block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c0:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c0:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+<a
+  className="c0 c1 c2 c3"
+  href="https://joyent.com"
+>
+  Inspire the lazy
+</a>
+`;
+
+exports[`Button Loading Button 1`] = `
+.c3 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c2 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+  color: rgb(216,216,216);
+  -webkit-text-fill-color: currentcolor;
+  pointer-events: none;
+}
+
+.c2:hover {
+  text-decoration: none;
+}
+
+.c2:hover {
+  text-decoration: underline;
+}
+
+.c1 {
+  display: inline-block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c0:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c0:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+<a
+  className="c0 c1 c2 c3"
+  disabled={true}
+  href="https://joyent.com"
+>
+  Inspire the lazy
+</a>
+`;
+
+exports[`Button Secondary Button 1`] = `
+.c3 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c2 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c2:hover {
+  text-decoration: none;
+}
+
+.c1 {
+  display: inline-block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c0:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c0:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+<a
+  className="c0 c1 c2 c3"
+  href="https://joyent.com"
+>
+  Inspire the lazy
+</a>
+`;

packages/ui-toolkit/src/button/__tests___/button.spec.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Button from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Button', () => {
+  test('Default Button', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Button href="https://joyent.com">Inspire the lazy</Button>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.primary.replace(/ /g, '')
+    );
+  });
+
+  test('Secondary Button', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Button secondary href="https://joyent.com">
+            Inspire the lazy
+          </Button>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.white.replace(/ /g, '')
+    );
+  });
+
+  test('Error Button', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Button error href="https://joyent.com">
+            Inspire the lazy
+          </Button>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.red.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('border-color', theme.red.replace(/ /g, ''));
+  });
+
+  test('Disabled Button', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Button disabled href="https://joyent.com">
+            Inspire the lazy
+          </Button>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.grey.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.disabled.replace(/ /g, '')
+    );
+  });
+
+  test('Loading Button', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Button disabled href="https://joyent.com">
+            Inspire the lazy
+          </Button>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.grey.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.disabled.replace(/ /g, '')
+    );
+  });
+});

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

@@ -5,7 +5,6 @@ import is, { isOr } from 'styled-is';
 import styled from 'styled-components';
 import { Button as NButton } from 'normalized-styled-components';
 
-import { borderRadius } from '../boxes';
 import BaseAnchor from '../anchor';
 import Baseline from '../baseline';
 import StatusLoader from '../status-loader';
@@ -107,7 +106,7 @@ const Button = styled(BaseButton)`
   -webkit-text-fill-color: currentcolor;
   background-image: none;
   background-color: ${props => props.theme.primary};
-  border-radius: ${borderRadius};
+  border-radius: ${props => props.theme.borderRadius};
   border: solid ${remcalc(1)} ${props => props.theme.primaryActive};
 
   &:focus {

packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap

@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card Card With Header 1`] = `
+.c0 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c1 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(255,255,255);
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+  >
+    Inspire the lazy
+  </div>
+</div>
+`;
+
+exports[`Card Default Card 1`] = `
+.c0 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  Inspire the lazy
+</div>
+`;
+
+exports[`Card Disabled Card 1`] = `
+.c0 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  border-color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  color: rgba(73,73,73,1);
+  cursor: default;
+}
+
+<div
+  className="c0"
+  disabled={true}
+  name="card"
+>
+  Inspire the lazy
+</div>
+`;
+
+exports[`Card Secondary Card 1`] = `
+.c0 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(255,255,255);
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  Inspire the lazy
+</div>
+`;
+
+exports[`Card Shadow Card 1`] = `
+.c0 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  Inspire the lazy
+</div>
+`;

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Card, { Header } from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Card', () => {
+  test('Default Card', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Card>Inspire the lazy</Card>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.white.replace(/ /g, '')
+    );
+  });
+
+  test('Disabled Card', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Card disabled>Inspire the lazy</Card>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.disabled.replace(/ /g, '')
+    );
+  });
+
+  test('Secondary Card', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Card secondary>Inspire the lazy</Card>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.primary.replace(/ /g, '')
+    );
+  });
+
+  test('Shadow Card', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Card shadow>Inspire the lazy</Card>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule(
+      'box-shadow',
+      '0 0.125rem 0 0 rgba(0,0,0,0.05)'
+    );
+  });
+
+  test('Card With Header', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Card>
+            <Header>Inspire the lazy</Header>
+          </Card>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -6,7 +6,6 @@ import is, { isNot } from 'styled-is';
 import remcalc from 'remcalc';
 
 import Baseline from '../baseline';
-import { bottomShadow, bottomShadowDarker } from '../boxes';
 
 const paperEffect = css`
   margin-bottom: ${remcalc(16)};
@@ -39,12 +38,12 @@ export const BaseCard = styled.div`
 
   ${is('shadow')`
     /* primary */
-    box-shadow: ${bottomShadow};
+    box-shadow: ${props => props.theme.shadows.bottomShadow};
 
     /* if disabled, shadow is the same */
     ${isNot('disabled')`
       ${is('secondary')`
-        box-shadow: ${bottomShadowDarker};
+        box-shadow: ${props => props.theme.shadows.bottomShadowDarker};
       `};
 
       ${is('tertiary')`
@@ -63,20 +62,6 @@ export const BaseCard = styled.div`
     border-color: ${props => props.theme.primaryActive};
   `};
 
-  ${is('tertiary')`
-    color: ${props => props.theme.text};
-    background-color: ${props => props.theme.background};
-    border-color: ${props => props.theme.grey};
-    border-radius: ${remcalc(4)};
-    min-width: ${remcalc(292)};
-
-    ${is('active')`
-      border-color: ${props => props.theme.primary};
-      background: ${props => props.theme.tertiaryActive};
-      box-shadow: none;
-    `};
-  `};
-
   ${is('actionable')`
     cursor: pointer;
   `};

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

@@ -21,13 +21,6 @@ const BaseHeader = BaseCard.extend`
     box-shadow: none;
   `};
 
-  ${isOr('tertiary', 'transparent')`
-    box-shadow: none;
-    background-color: transparent;
-    border-width: 0;
-    margin: 0;
-  `};
-
   ${isNot('secondary', 'tertiary')`
     ${is('transparent')`
       color: ${props => props.theme.text};

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import unitcalc from 'unitcalc';
-import theme from '../theme';
-import Button from '../button';
-import { Close } from '../icons';
-
-const StyledCloseButton = Button.extend`
-  background-color: ${theme.white};
-  padding: ${unitcalc(2)};
-  min-width: auto;
-  border: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &:active:hover,
-  &:active:focus {
-    background-color: ${theme.white};
-    border: none;
-    box-shadow: none;
-  }
-`;
-
-/**
- * @example ./usage.md
- */
-const CloseButton = props => (
-  <StyledCloseButton {...props}>
-    <Close />
-  </StyledCloseButton>
-);
-
-export default CloseButton;

packages/ui-toolkit/src/divider/__tests___/__snapshots__/divider.spec.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider Default Divider 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c0 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+}
+
+<div
+  className="c0 c1"
+/>
+`;
+
+exports[`Divider Transparent Divider 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c0 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+}
+
+<div
+  className="c0 c1"
+/>
+`;

packages/ui-toolkit/src/divider/__tests___/divider.spec.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Divider from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Divider', () => {
+  test('Default Divider', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Divider />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.grey.replace(/ /g, '')
+    );
+  });
+
+  test('Transparent Divider', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Divider transparent />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('background-color', 'transparent');
+  });
+});

packages/ui-toolkit/src/footer/__tests__/__snapshots__/footer.spec.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer Footer 1`] = `
+.c2 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  background-color: rgb(30,49,59);
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  line-height: 1.5625rem;
+}
+
+.c0 {
+  background-color: rgba(241,241,241,1);
+  border-top: 0.0625rem solid rgb(216,216,216);
+  height: 4.375rem;
+  max-height: 4.375rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c2 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c2 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c2 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c2 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0 c1"
+>
+  <div
+    className="c2"
+  />
+</div>
+`;

packages/ui-toolkit/src/footer/__tests__/footer.spec.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import remcalc from 'remcalc';
+
+import Footer from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Footer', () => {
+  test('Footer', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Footer />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('background-color', 'rgba(241,241,241,1)');
+    expect(tree).toHaveStyleRule(
+      'border-top',
+      `${remcalc(1)} solid ${theme.grey.replace(/ /g, '')}`
+    );
+  });
+});

packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap

@@ -0,0 +1,948 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form Checkbox 1`] = `
+.c2 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  display: none;
+}
+
+.c2[type='checkbox'],
+.c2[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c2[type='number']::-webkit-inner-spin-button,
+.c2[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c2[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c2[type='search']::-webkit-search-cancel-button,
+.c2[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c2::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c2:checked + label::after {
+  opacity: 1;
+}
+
+.c2:selected + label::after {
+  opacity: 1;
+}
+
+.c2:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c2:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c2:disabled + label {
+  background-color: rgb(249,249,249);
+}
+
+.c3 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c3::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c1 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+  margin-bottom: 0.75rem;
+}
+
+.c4 {
+  margin-bottom: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c0 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 label {
+  font-weight: 400;
+}
+
+.c5 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+<li
+  className="c0"
+>
+  <div
+    checked={false}
+    className="c1"
+    disabled={false}
+    id=""
+    type="checkbox"
+  >
+    <input
+      checked={false}
+      className="c2"
+      disabled={false}
+      id="b"
+      type="checkbox"
+    />
+    <label
+      className="c3"
+      htmlFor="b"
+    />
+  </div>
+  <div
+    className="c4"
+  >
+    <label
+      className="c5"
+      htmlFor="b"
+    >
+      Detailed explanations
+    </label>
+  </div>
+</li>
+`;
+
+exports[`Form Fieldset 1`] = `
+.c0 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+<div
+  className="c0"
+  role="group"
+>
+  Detailed explanations
+</div>
+`;
+
+exports[`Form FormLabel 1`] = `
+.c0 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+<label
+  className="c0"
+  htmlFor=""
+>
+  Detailed explanations
+</label>
+`;
+
+exports[`Form FormMeta 1`] = `
+.c0 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c1 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  color: rgb(227,130,0);
+  -webkit-text-fill-color: currentcolor;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c2 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  color: rgb(0,152,88);
+  -webkit-text-fill-color: currentcolor;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+<div>
+  <label
+    className="c0"
+  >
+    Unexpected children error!
+  </label>
+  <label
+    className="c1"
+  >
+    Unexpected children warning!
+  </label>
+  <label
+    className="c2"
+  >
+    Unexpected children success!
+  </label>
+</div>
+`;
+
+exports[`Form Input 1`] = `
+.c0 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c0::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c0::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c0:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c0:invalid {
+  box-shadow: none;
+}
+
+.c0:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c0:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c0:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c0:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c0:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+<input
+  className="c0"
+  disabled={false}
+  id=""
+  placeholder="Example: JarJarBinks"
+/>
+`;
+
+exports[`Form Legend 1`] = `
+.c0 {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+  font-weight: 600;
+}
+
+<legend
+  className="c0"
+>
+  I am the legend 
+</legend>
+`;
+
+exports[`Form Radio 1`] = `
+.c2 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  display: none;
+}
+
+.c2[type='checkbox'],
+.c2[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c2[type='number']::-webkit-inner-spin-button,
+.c2[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c2[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c2[type='search']::-webkit-search-cancel-button,
+.c2[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c2::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c2:checked + label::after {
+  opacity: 1;
+}
+
+.c2:selected + label::after {
+  opacity: 1;
+}
+
+.c2:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c2:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c2:disabled + label {
+  background-color: rgb(249,249,249);
+}
+
+.c3 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+}
+
+.c3::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background-color: rgba(73,73,73,1);
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.c1 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+  margin-bottom: 0.75rem;
+}
+
+.c4 {
+  margin-bottom: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.c5 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c0 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 label {
+  font-weight: 400;
+}
+
+<li
+  className="c0"
+>
+  <div
+    checked={false}
+    className="c1"
+    disabled={false}
+    id=""
+    type="radio"
+  >
+    <input
+      checked={false}
+      className="c2"
+      disabled={false}
+      id="c"
+      type="radio"
+    />
+    <label
+      className="c3"
+      htmlFor="c"
+    />
+  </div>
+  <div
+    className="c4"
+  >
+    <label
+      className="c5"
+      htmlFor="c"
+    >
+      Detailed explanations
+    </label>
+  </div>
+</li>
+`;
+
+exports[`Form Select 1`] = `
+.c0 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 18.75rem;
+}
+
+.c0:after {
+  content: '';
+  width: 0.625rem;
+  height: 0.625rem;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
+  display: block;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0.75rem;
+}
+
+.c2 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c2::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c2::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c2:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c2:invalid {
+  box-shadow: none;
+}
+
+.c2:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c2:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c2:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c2:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c2:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c1 {
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+}
+
+<div
+  className="c0"
+  disabled={false}
+>
+  <select
+    className="c1 c2"
+    disabled={false}
+    id=""
+  >
+    <option
+      disabled={true}
+      selected={true}
+    >
+      Select a datacenter
+    </option>
+    <option>
+      Amsterdam, EU
+    </option>
+    <option>
+      San Francisco, USA
+    </option>
+    <option>
+      Seoul, South Korea
+    </option>
+    <option>
+      Tokyo, Japan
+    </option>
+  </select>
+</div>
+`;
+
+exports[`Form Textarea 1`] = `
+.c1 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 6rem;
+  min-height: 6rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c1::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c1::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c1:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c1:invalid {
+  box-shadow: none;
+}
+
+.c1:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c1:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c1:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c1:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c1:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c0 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+<textarea
+  className="c0 c1"
+  disabled={false}
+  id=""
+/>
+`;
+
+exports[`Form Toggle 1`] = `
+.c0 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c4 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+  color: rgb(216,216,216);
+}
+
+.c1 {
+  position: relative;
+  vertical-align: text-bottom;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  display: none;
+}
+
+.c2:checked + label {
+  background: #3B46CC;
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c2:checked + label:after {
+  left: 50%;
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c2:checked + label:active {
+  box-shadow: none;
+}
+
+.c2:checked + label:active:after {
+  margin-left: -00.75rem;
+}
+
+.c3 {
+  outline: 0;
+  display: block;
+  width: 2.875rem;
+  height: 1.5rem;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  background: rgb(250,250,250);
+  border-radius: 1.4375rem;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  border: 0.0625rem solid rgb(216,216,216);
+  margin-right: 0.375rem;
+}
+
+.c3::selection {
+  background: none;
+}
+
+.c3:active {
+  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c3:active:after {
+  padding-right: 0.75rem;
+}
+
+.c3:hover {
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c3:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c3:after,
+.c3:before {
+  position: relative;
+  display: block;
+  content: '';
+  width: 50%;
+  height: 100%;
+}
+
+.c3:after {
+  left: 0;
+  border-radius: 2em;
+  background: rgb(255,255,255);
+  -webkit-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;
+  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 0.0625rem rgb(216,216,216);
+}
+
+.c3:active {
+  box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c3:active:after {
+  padding-right: 0.75rem;
+}
+
+.c3:before {
+  display: none;
+}
+
+.c3:active {
+  box-shadow: none;
+}
+
+.c3:active:after {
+  padding-right: 0;
+}
+
+.c3:after {
+  background: rgb(230,230,230);
+}
+
+.c3:hover {
+  border: 0.0625rem solid rgb(216,216,216);
+}
+
+.c3:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
+<div
+  className="c0"
+  disabled={true}
+  name="who-killed-2"
+  role="group"
+  style={undefined}
+>
+  <div
+    className="c1"
+  >
+    <input
+      className="c2"
+      disabled={true}
+      id="e"
+      name="who-killed-2"
+      type="checkbox"
+      value="video"
+    />
+    <label
+      className="c3"
+      disabled={true}
+      htmlFor="e"
+      id="d"
+      value="video"
+    />
+    <label
+      className="c4"
+      disabled={true}
+      htmlFor="d"
+      id="d"
+      value="video"
+    >
+       
+      Video
+    </label>
+  </div>
+</div>
+`;

packages/ui-toolkit/src/form/__tests__/form.spec.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+import {
+  Checkbox,
+  Fieldset,
+  FormGroup,
+  Input,
+  Textarea,
+  FormLabel,
+  Legend,
+  FormMeta,
+  Radio,
+  Select,
+  Toggle
+} from '../';
+
+describe('Form', () => {
+  test('Checkbox', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Checkbox>
+            <FormLabel>Detailed explanations</FormLabel>
+          </Checkbox>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Radio', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Radio>
+            <FormLabel>Detailed explanations</FormLabel>
+          </Radio>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('FormLabel', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <FormLabel>Detailed explanations</FormLabel>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
+  });
+
+  test('Fieldset', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Fieldset>Detailed explanations</Fieldset>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('FormMeta', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <div>
+            <FormMeta error>Unexpected children error!</FormMeta>
+            <FormMeta warning>Unexpected children warning!</FormMeta>
+            <FormMeta success>Unexpected children success!</FormMeta>
+          </div>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Toggle', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <FormGroup name="who-killed-2" disabled>
+            <Toggle value="video" disabled>
+              Video
+            </Toggle>
+          </FormGroup>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Textarea', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Textarea />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Legend', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Legend>I am the legend </Legend>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Input', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Input placeholder="Example: JarJarBinks" type="email" />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Select', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Select>
+            <option selected disabled>
+              Select a datacenter
+            </option>
+            <option>Amsterdam, EU</option>
+            <option>San Francisco, USA</option>
+            <option>Seoul, South Korea</option>
+            <option>Tokyo, Japan</option>
+          </Select>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -5,8 +5,6 @@ import remcalc from 'remcalc';
 import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';
 
-import { borderRadius, border } from '../../boxes';
-
 const colorWithDisabled = props =>
   props.disabled ? props.theme.disabled : props.theme.text;
 
@@ -34,9 +32,9 @@ const style = css`
   margin-top: ${remcalc(8)};
   padding: ${paddingTop} ${remcalc(18)};
 
-  border-radius: ${borderRadius};
+  border-radius: ${props => props.theme.borderRadius};
   background-color: ${props => props.theme.white};
-  border: ${border.unchecked};
+  border: ${remcalc(1)} solid ${props => props.theme.grey};
   color: ${color};
 
   &::-webkit-input-placeholder {

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

@@ -135,7 +135,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
     const render = ({
       id, // ignore id from value
       ...oldValue
-    }) => {
+    } = {}) => {
       const newValue = {
         ...oldValue,
         id: rndId()

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

@@ -33,7 +33,7 @@ const StyledLabel = Label.extend`
 `;
 
 const Meta = props => {
-  const render = value => {
+  const render = (value = {}) => {
     const { meta = {} } = value;
 
     const msg =

packages/ui-toolkit/src/getting-started.md

@@ -1 +0,0 @@
-

packages/ui-toolkit/src/guidelines/layout.md

@@ -1 +0,0 @@
-

packages/ui-toolkit/src/guidelines/overview.md

@@ -1 +0,0 @@
-

packages/ui-toolkit/src/index.js

@@ -7,10 +7,7 @@ export { PageContainer, RootContainer, ViewContainer } from './layout';
 export { H1, H2, H3, H4, H5, H6 } from './text/headings';
 export { default as P } from './text/p';
 export { default as Small } from './text/small';
-export { default as Title } from './text/title';
 export { default as theme } from './theme';
-export { default as Modal, ModalHeading, ModalText } from './modal';
-export { default as CloseButton } from './close-button';
 export { default as Divider } from './divider';
 export { default as Footer } from './footer';
 export { Grid, Row, Col } from './grid';
@@ -18,15 +15,6 @@ export { default as StatusLoader } from './status-loader';
 
 export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
 
-export {
-  borderRadius,
-  bottomShadow,
-  bottomShadowDarker,
-  insetShadow,
-  tooltipShadow,
-  border
-} from './boxes';
-
 export {
   styled as StyledBreakpoints,
   query as QueryBreakpoints

packages/ui-toolkit/src/label/__test__/__snapshots__/label.spec.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`label label 1`] = `
+.c0 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+<label
+  className="c0"
+>
+  I am a label
+</label>
+`;

packages/ui-toolkit/src/label/__test__/label.spec.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import remcalc from 'remcalc';
+
+import Label from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('label', () => {
+  test('label', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Label>I am a label</Label>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('font-size', remcalc(15));
+    expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
+  });
+});

packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout PageContainer 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  position: relative;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`Layout ViewContainer 1`] = `
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`Layout ViewContainer center 1`] = `
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`Layout ViewContainer fluid 1`] = `
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 2rem;
+  padding-left: 2rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`Layout ViewContainer main 1`] = `
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0"
+/>
+`;

packages/ui-toolkit/src/layout/__tests__/layout.spec.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import remcalc from 'remcalc';
+
+import { PageContainer, ViewContainer } from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Layout', () => {
+  test('PageContainer', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <PageContainer />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('display', 'flex');
+    expect(tree).toHaveStyleRule('flex-flow', 'column');
+    expect(tree).toHaveStyleRule('flex', '1 1 auto');
+  });
+
+  test('ViewContainer', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <ViewContainer />
+        </Theme>
+      )
+      .toJSON();
+      
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('max-width', remcalc(1000));
+  });
+
+  test('ViewContainer fluid', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <ViewContainer fluid />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('padding-left', '0');
+    expect(tree).toHaveStyleRule('padding-right', '0');
+  });
+
+  test('ViewContainer main', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <ViewContainer main />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('padding-bottom', remcalc(18));
+  });
+
+  test('ViewContainer center', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <ViewContainer center />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('display', 'flex');
+    expect(tree).toHaveStyleRule('flex-direction', 'column');
+    expect(tree).toHaveStyleRule('justify-content', 'center');
+    expect(tree).toHaveStyleRule('align-content', 'center');
+    expect(tree).toHaveStyleRule('align-items', 'center');
+  });
+});

packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap

@@ -0,0 +1,402 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message Description 1`] = `
+.c0 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  padding-bottom: 2.25rem;
+}
+
+<p
+  className="c0"
+>
+  Choosing deployment data center
+</p>
+`;
+
+exports[`Message Message 1`] = `
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c4 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c4 + p,
+.c4 + small,
+.c4 + h1,
+.c4 + h2,
+.c4 + label,
+.c4 + h3,
+.c4 + h4,
+.c4 + h5,
+.c4 + div,
+.c4 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c1 {
+  min-width: 2.25rem;
+  margin-right: 1.125rem;
+  min-height: 100%;
+  background-color: rgb(0,152,88);
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c5 {
+  position: absolute;
+  right: 0.1875rem;
+  margin: 0;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  />
+  <div
+    className="c2"
+  >
+    <h4
+      className="c3"
+    >
+      Choosing deployment data center
+    </h4>
+    <p
+      className="c4"
+    >
+      Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
+    </p>
+  </div>
+  <svg
+    className="c5 "
+    height="12"
+    onClick={[Function]}
+    style={
+      Object {
+        "transform": "rotate(0deg)",
+      }
+    }
+    viewBox="0 0 12 12"
+    width="12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+      fill="rgba(73, 73, 73, 1)"
+      fillRule="evenodd"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Message Message Error 1`] = `
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c4 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c4 + p,
+.c4 + small,
+.c4 + h1,
+.c4 + h2,
+.c4 + label,
+.c4 + h3,
+.c4 + h4,
+.c4 + h5,
+.c4 + div,
+.c4 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c1 {
+  min-width: 2.25rem;
+  margin-right: 1.125rem;
+  min-height: 100%;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c5 {
+  position: absolute;
+  right: 0.1875rem;
+  margin: 0;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  />
+  <div
+    className="c2"
+  >
+    <h4
+      className="c3"
+    >
+      Choosing deployment data center
+    </h4>
+    <p
+      className="c4"
+    >
+      Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
+    </p>
+  </div>
+  <svg
+    className="c5 "
+    height="12"
+    onClick={[Function]}
+    style={
+      Object {
+        "transform": "rotate(0deg)",
+      }
+    }
+    viewBox="0 0 12 12"
+    width="12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+      fill="rgba(73, 73, 73, 1)"
+      fillRule="evenodd"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Message Message Warning 1`] = `
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c4 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c4 + p,
+.c4 + small,
+.c4 + h1,
+.c4 + h2,
+.c4 + label,
+.c4 + h3,
+.c4 + h4,
+.c4 + h5,
+.c4 + div,
+.c4 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c1 {
+  min-width: 2.25rem;
+  margin-right: 1.125rem;
+  min-height: 100%;
+  background-color: rgb(0,152,88);
+  background-color: rgb(227,130,0);
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c5 {
+  position: absolute;
+  right: 0.1875rem;
+  margin: 0;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  />
+  <div
+    className="c2"
+  >
+    <h4
+      className="c3"
+    >
+      Choosing deployment data center
+    </h4>
+    <p
+      className="c4"
+    >
+      Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
+    </p>
+  </div>
+  <svg
+    className="c5 "
+    height="12"
+    onClick={[Function]}
+    style={
+      Object {
+        "transform": "rotate(0deg)",
+      }
+    }
+    viewBox="0 0 12 12"
+    width="12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+      fill="rgba(73, 73, 73, 1)"
+      fillRule="evenodd"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Message Title 1`] = `
+.c0 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 0.75rem;
+}
+
+<h4
+  className="c0"
+>
+  Choosing deployment data center
+</h4>
+`;

packages/ui-toolkit/src/message/__tests__/message.spec.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Message, Title, Description } from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Message', () => {
+  test('Message', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Message>
+            <Title>Choosing deployment data center</Title>
+            <Description>
+              Not all data centres have all configurations of instances
+              available. Make sure that you choose the data center that suits
+              your requirements. Learn more
+            </Description>
+          </Message>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Message Error', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Message error>
+            <Title>Choosing deployment data center</Title>
+            <Description>
+              Not all data centres have all configurations of instances
+              available. Make sure that you choose the data center that suits
+              your requirements. Learn more
+            </Description>
+          </Message>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Message Warning', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Message warning>
+            <Title>Choosing deployment data center</Title>
+            <Description>
+              Not all data centres have all configurations of instances
+              available. Make sure that you choose the data center that suits
+              your requirements. Learn more
+            </Description>
+          </Message>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Title', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Title>Choosing deployment data center</Title>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Description', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Description>Choosing deployment data center</Description>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -7,15 +7,14 @@ import remcalc from 'remcalc';
 
 import { H4 } from '../text/headings';
 import P from '../text/p';
-import CloseButton from '../close-button';
+import { Close } from '../icons';
-import { border, bottomShadow } from '../boxes';
 
 const Container = styled.div`
   position: relative;
   margin-bottom: ${unitcalc(2)};
   background-color: ${props => props.theme.white};
-  box-shadow: ${bottomShadow};
+  box-shadow: ${props => props.theme.shadows.bottomShadow};
-  border: ${border.confirmed};
+  border: ${remcalc(1)} solid ${props => props.theme.grey};
   width: 100%;
   display: flex;
 `;
@@ -40,7 +39,7 @@ const Outlet = styled.div`
   padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0;
 `;
 
-const Close = styled(CloseButton)`
+const CloseButton = styled(Close)`
   position: absolute;
   right: ${unitcalc(0.5)};
   margin: 0;
@@ -50,7 +49,7 @@ export const Message = ({ onCloseClick, children, ...type }) => (
   <Container>
     <Color {...type} />
     <Outlet>{children}</Outlet>
-    {onCloseClick && <Close onClick={onCloseClick} />}
+    {onCloseClick && <CloseButton onClick={onCloseClick} />}
   </Container>
 );
 

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

@@ -0,0 +1 @@
+export { default as Theme } from './theme';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import theme from '../theme';
+
+export default ({ children }) => (
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+);

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

@@ -1,81 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-// import disableScroll from 'disable-scroll';
-import remcalc from 'remcalc';
-import { modalShadow } from '../boxes';
-import CloseButton from '../close-button';
-import P from '../text/p';
-import { H2 } from '../text/headings';
-
-const StyledBackground = styled.div`
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-color: rgba(250, 250, 250, 0.5);
-  z-index: 100;
-`;
-
-const StyledModal = styled.div`
-  position: absolute;
-  left: 50%;
-  top: 33.33%;
-  padding: ${remcalc(36)} ${remcalc(36)} ${remcalc(36)} ${remcalc(36)};
-  background-color: ${props => props.theme.white};
-  box-shadow: ${modalShadow};
-
-  width: ${props => remcalc(props.width)};
-  margin: 0 auto 0 -${props => remcalc(props.width / 2)};
-  z-index: 101;
-`;
-
-// tmp
-const StyledClose = styled(CloseButton)`
-  position: absolute;
-  right: ${remcalc(6)};
-  top: ${remcalc(3)};
-`;
-
-class Modal extends Component {
-  componentDidMount() {
-    // disableScroll.on();
-  }
-
-  componentWillUnmount() {
-    // disableScroll.off();
-  }
-
-  render() {
-    const { children, width, onCloseClick } = this.props;
-
-    return (
-      <StyledBackground>
-        <StyledModal width={width}>
-          <StyledClose onClick={onCloseClick}>X</StyledClose>
-          {children}
-        </StyledModal>
-      </StyledBackground>
-    );
-  }
-}
-
-Modal.propTypes = {
-  children: PropTypes.node,
-  width: PropTypes.number,
-  onCloseClick: PropTypes.func
-};
-
-export default Modal;
-
-export const ModalHeading = styled(H2)`
-  line-height: 1.25;
-  color: ${props => props.theme.secondary};
-  margin: 0 0 ${remcalc(12)} 0;
-`;
-
-export const ModalText = styled(P)`
-  color: ${props => props.theme.secondary};
-  margin: ${remcalc(12)} 0 ${remcalc(30)} 0;
-`;

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

@@ -1,5 +0,0 @@
-```
-const React = require('react');
-
-<Modal />
-```

packages/ui-toolkit/src/overview.md

@@ -1,7 +0,0 @@
-The Joyent UI Toolkit allows anyone designing and building new
-[Joyent](https://www.joyent.com/) cloud products to rapidly create designs and
-prototypes that follow a considered and consistent design direction.
-
-As any style guide and design system, this toolkit is a work in progress, and
-everyone is encouraged to
-[contribute and improve it](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit).

packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap

@@ -0,0 +1,225 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover Divider 1`] = `
+.c0 {
+  width: calc(100% + 2.25rem);
+  border-top: 0.0625rem solid rgb(216,216,216);
+  margin: 0 0 0.75rem -1.125rem;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`Popover Popover 1`] = `
+Array [
+  <div
+    box={false}
+    className=""
+    onClick={undefined}
+    onMouseEnter={undefined}
+    onMouseLeave={undefined}
+    tag={false}
+>
+    Hello
+</div>,
+  .c2 {
+  width: calc(100% + 2.25rem);
+  border-top: 0.0625rem solid rgb(216,216,216);
+  margin: 0 0 0.75rem -1.125rem;
+}
+
+.c1 {
+  display: block;
+  cursor: pointer;
+}
+
+.c1:not(:last-child) {
+  margin-bottom: 0.75rem;
+}
+
+.c1:hover {
+  color: rgb(53,53,53);
+}
+
+.c0 {
+  min-width: 9.5rem;
+  box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.1);
+  border: 0.0625rem solid rgb(216,216,216);
+  padding: 0.9375rem 1.125rem;
+  background: rgb(255,255,255);
+  color: rgba(73,73,73,1);
+  -webkit-text-fill-color: currentcolor;
+  z-index: 999;
+  border-radius: 0.25rem;
+}
+
+.c0 .b {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 0.375rem;
+}
+
+.c0[data-placement^='top'] .b {
+  border-width: 0.375rem 0.375rem 0 0.375rem;
+  border-color: rgb(255,255,255) transparent transparent transparent;
+  bottom: -0.375rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='top'] .b:after {
+  border-width: 0.4375rem 0.4375rem 0 0.4375rem;
+  border-color: rgb(255,255,255) transparent transparent transparent;
+  bottom: -0.375rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='bottom'] .b {
+  border-width: 0 0.375rem 0.375rem 0.375rem;
+  border-color: transparent transparent rgb(255,255,255) transparent;
+  top: -0.375rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='top'],
+.c0[data-placement^='bottom'] {
+  margin-bottom: 0.375rem;
+}
+
+.c0[data-placement='top-start'] .b,
+.c0[data-placement='bottom-start'] .b {
+  left: 0.375rem;
+}
+
+.c0[data-placement='top-end'] .b,
+.c0[data-placement='bottom-end'] .b {
+  right: 0.375rem;
+}
+
+.c0[data-placement='top'] .b,
+.c0[data-placement='bottom'] .b {
+  left: calc(50% - 0.6875rem);
+}
+
+.c0[data-placement^='left'] {
+  margin-right: 0.375rem;
+}
+
+.c0[data-placement^='left'] .b {
+  border-width: 0.375rem 0 0.375rem 0.375rem;
+  border-color: transparent transparent transparent rgb(255,255,255);
+  right: -0.75rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='left'] .b:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-width: 0.4375rem 0 0.4375rem 0.4375rem;
+  border-color: transparent transparent transparent rgb(216,216,216);
+  border-style: solid;
+  left: -0.375rem;
+  width: 0;
+  height: 0;
+  top: -0.4375rem;
+  z-index: -1;
+}
+
+.c0[data-placement^='right'] {
+  margin-left: 0.375rem;
+}
+
+.c0[data-placement^='right'] .b {
+  border-width: 0.375rem 0.375rem 0.375rem 0;
+  border-color: transparent rgb(255,255,255) transparent transparent;
+  left: -0.75rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='right'] .b:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-width: 0.4375rem 0.4375rem 0.4375rem 0;
+  border-color: transparent rgb(216,216,216) transparent transparent;
+  border-style: solid;
+  left: -0.125rem;
+  width: 0;
+  height: 0;
+  top: -0.4375rem;
+  z-index: -1;
+}
+
+.c0[data-placement='left-start'] .b,
+.c0[data-placement='right-start'] .b {
+  top: 0.375rem;
+}
+
+.c0[data-placement='left-end'] .b,
+.c0[data-placement='right-end'] .b {
+  bottom: 0.375rem;
+}
+
+.c0[data-placement='left'] .b,
+.c0[data-placement='right'] .b {
+  top: calc(50% - 0.375rem);
+}
+
+<div
+    className="c0"
+    data-placement={undefined}
+    data-x-out-of-boundaries={undefined}
+    style={
+        Object {
+            "opacity": 0,
+            "pointerEvents": "none",
+            "position": "absolute",
+          }
+    }
+>
+    <span
+        className="c1"
+        onClick={[Function]}
+    >
+        Scale
+    </span>
+    <span
+        className="c1"
+        onClick={[Function]}
+    >
+        Restart
+    </span>
+    <span
+        className="c1"
+        onClick={[Function]}
+    >
+        Stop
+    </span>
+    <div
+        className="c2"
+    />
+    <span
+        className="c1"
+        onClick={[Function]}
+    >
+        Delete
+    </span>
+    <span
+        style={Object {}}
+    >
+        <span
+            className="b"
+        />
+    </span>
+</div>,
+]
+`;

packages/ui-toolkit/src/popover/__tests__/popover.spec.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import remcalc from 'remcalc';
+
+import Popover, { Container, Target, Item, Divider } from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Popover', () => {
+  test('Popover', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Container>
+            <Target>Hello</Target>
+            <Popover placement="right">
+              <Item>Scale</Item>
+              <Item>Restart</Item>
+              <Item>Stop</Item>
+              <Divider />
+              <Item>Delete</Item>
+            </Popover>
+          </Container>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Divider', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Divider />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule(
+      'border-top',
+      `${remcalc(1)} solid ${theme.grey.replace(/ /g, '')}`
+    );
+  });
+});

packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap

@@ -0,0 +1,198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SectionList Anchor 1`] = `
+.c2 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c1 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c1:hover {
+  text-decoration: none;
+}
+
+.c0 {
+  color: rgb(70,70,70);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c0.active {
+  color: rgb(59,70,204);
+  cursor: default;
+}
+
+<a
+  className="c0 c1 c2"
+>
+  Instances
+</a>
+`;
+
+exports[`SectionList Anchor 2`] = `
+.c2 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c1 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c1:hover {
+  text-decoration: none;
+}
+
+.c0 {
+  color: rgb(70,70,70);
+  text-decoration: none;
+  cursor: pointer;
+  color: rgb(59,70,204);
+  cursor: default;
+}
+
+.c0.active {
+  color: rgb(59,70,204);
+  cursor: default;
+}
+
+<a
+  className="c0 c1 c2"
+>
+  Instances
+</a>
+`;
+
+exports[`SectionList Item 1`] = `
+.c3 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c2 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c2:hover {
+  text-decoration: none;
+}
+
+.c0 {
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c1 {
+  color: rgb(70,70,70);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c1.active {
+  color: rgb(59,70,204);
+  cursor: default;
+}
+
+<li
+  className="c0"
+>
+  <a
+    className="c1 c2 c3"
+  >
+    Instances
+  </a>
+</li>
+`;
+
+exports[`SectionList SectionList 1`] = `
+.c4 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+}
+
+.c3 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c3:hover {
+  text-decoration: none;
+}
+
+.c1 {
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c2 {
+  color: rgb(70,70,70);
+  text-decoration: none;
+  cursor: pointer;
+  color: rgb(59,70,204);
+  cursor: default;
+}
+
+.c2.active {
+  color: rgb(59,70,204);
+  cursor: default;
+}
+
+.c5 {
+  color: rgb(70,70,70);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c5.active {
+  color: rgb(59,70,204);
+  cursor: default;
+}
+
+.c0 {
+  list-style-type: none;
+  padding: 0;
+  margin: 1.125rem 0 0 0;
+}
+
+<ul
+  className="c0"
+>
+  <li
+    className="c1"
+  >
+    <a
+      className="c2 c3 c4"
+    >
+      Overview
+    </a>
+  </li>
+  <li
+    className="c1"
+  >
+    <a
+      className="c5 c3 c4"
+    >
+      Services
+    </a>
+  </li>
+  <li
+    className="c1"
+  >
+    <a
+      className="c5 c3 c4"
+    >
+      Instances
+    </a>
+  </li>
+</ul>
+`;

packages/ui-toolkit/src/section-list/__tests__/section.spec.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import remcalc from 'remcalc';
+
+import SectionList, { Item, Anchor } from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('SectionList', () => {
+  test('SectionList', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <SectionList>
+            <Item>
+              <Anchor active>Overview</Anchor>
+            </Item>
+            <Item>
+              <Anchor>Services</Anchor>
+            </Item>
+            <Item>
+              <Anchor>Instances</Anchor>
+            </Item>
+          </SectionList>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('Item', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Item>
+            <Anchor>Instances</Anchor>
+          </Item>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('font-size', remcalc(15));
+  });
+
+  test('Anchor', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Anchor>Instances</Anchor>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
+  });
+
+  test('Anchor', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Anchor active>Instances</Anchor>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.primary.replace(/ /g, ''));
+  });
+});

packages/ui-toolkit/src/status-loader/__tests__/__snapshots__/loading.spec.js.snap

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusLoader StatusLoader 1`] = `
+.c1 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c2 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c3 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 1.25rem;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
+.c4 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+  margin-left: 0.375rem;
+}
+
+.c4 + p,
+.c4 + small,
+.c4 + h1,
+.c4 + h2,
+.c4 + label,
+.c4 + h3,
+.c4 + h4,
+.c4 + h5,
+.c4 + div,
+.c4 + span {
+  padding-bottom: 2.25rem;
+}
+
+<div
+  className="c0"
+>
+  <svg
+    height="10"
+    width="28"
+  >
+    <rect
+      className="c1"
+      height="6"
+      width="6"
+      x="2"
+      y="2"
+    />
+    <rect
+      className="c2"
+      height="6"
+      width="6"
+      x="11"
+      y="2"
+    />
+    <rect
+      className="c3"
+      height="6"
+      width="6"
+      x="20"
+      y="2"
+    />
+  </svg>
+  <p
+    className="c4"
+  >
+    Loading...
+  </p>
+</div>
+`;

packages/ui-toolkit/src/status-loader/__tests__/loading.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import StatusLoader from '../';
+import { Theme } from '../../mocks'
+
+describe('StatusLoader', () => {
+  test('StatusLoader', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <StatusLoader />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/ui-toolkit/src/table/__tests__/__snapshots__/table.spec.js.snap

@@ -0,0 +1,184 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table Table 1`] = `
+.c0 {
+  overflow: hidden;
+  border-spacing: 0;
+  border-collapse: separate;
+  table-layout: fixed;
+  width: 100%;
+  max-width: 100%;
+}
+
+<table
+  className="c0"
+/>
+`;
+
+exports[`Table Tbody 1`] = `
+.c0 {
+  width: 100%;
+}
+
+.c0 tr:first-child td {
+  border-top: none;
+}
+
+<tbody
+  className="c0"
+  disabled={undefined}
+  name="tbody"
+  selected={undefined}
+/>
+`;
+
+exports[`Table Tbody disabled 1`] = `
+.c0 {
+  width: 100%;
+  border-color: rgb(216,216,216);
+}
+
+.c0 tr:first-child td {
+  border-top: none;
+}
+
+<tbody
+  className="c0"
+  disabled={true}
+  name="tbody"
+  selected={undefined}
+/>
+`;
+
+exports[`Table Td 1`] = `
+.c0 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+}
+
+.c0:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c0:not(:last-child) {
+  border-right-width: 0;
+}
+
+<td
+  className="c0"
+  disabled={undefined}
+  name="td"
+  selected={undefined}
+/>
+`;
+
+exports[`Table Tfoot 1`] = `
+.c0 {
+  width: 100%;
+  background: rgb(250,250,250);
+}
+
+.c0 th:first-child {
+  border-bottom-left-radius: 0.25rem;
+}
+
+.c0 th:last-child {
+  border-bottom-right-radius: 0.25rem;
+}
+
+.c0 th {
+  border-top-width: 0;
+}
+
+<tfoot
+  className="c0"
+  disabled={undefined}
+  name="tfoot"
+  selected={undefined}
+/>
+`;
+
+exports[`Table Th 1`] = `
+.c0 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c0:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c0:not(:last-child) {
+  border-right-width: 0;
+}
+
+<th
+  className="c0"
+  disabled={undefined}
+  name="th"
+  selected={undefined}
+/>
+`;
+
+exports[`Table Thead 1`] = `
+.c0 {
+  width: 100%;
+  background: rgb(250,250,250);
+}
+
+.c0 th:first-child {
+  border-top-left-radius: 0.25rem;
+}
+
+.c0 th:last-child {
+  border-top-right-radius: 0.25rem;
+}
+
+<thead
+  className="c0"
+  disabled={undefined}
+  name="thdead"
+  selected={undefined}
+/>
+`;
+
+exports[`Table Tr 1`] = `
+.c0 {
+  display: table-row;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
+  box-sizing: border-box;
+}
+
+.c0:last-child {
+  box-shadow: none;
+}
+
+.c0:last-child td {
+  border-bottom-width: 0.0625rem;
+}
+
+<tr
+  className="c0"
+  disabled={undefined}
+  name="tr"
+  selected={undefined}
+/>
+`;

packages/ui-toolkit/src/table/__tests__/table.spec.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import remcalc from 'remcalc';
+
+import Table, { Thead, Tfoot, Tr, Th, Tbody, Td } from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Table', () => {
+  test('Table', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Table />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('width', '100%');
+    expect(tree).toHaveStyleRule('border-collapse', 'separate');
+    expect(tree).toHaveStyleRule('table-layout', 'fixed');
+  });
+
+  test('Tr', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Tr />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule(
+      'background-color',
+      theme.white.replace(/ /g, '')
+    );
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+  });
+
+  test('Td', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Td />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
+  });
+
+  test('Tbody', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Tbody />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('width', '100%');
+  });
+
+  test('Tbody disabled', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Tbody disabled />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
+  });
+
+  test('Th', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Th />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('border-color', theme.grey.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('color', theme.greyLight.replace(/ /g, ''));
+  });
+
+  test('Thead', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Thead />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('width', '100%');
+    expect(tree).toHaveStyleRule(
+      'background',
+      theme.background.replace(/ /g, '')
+    );
+  });
+
+  test('Tfoot', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Tfoot />
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('width', '100%');
+    expect(tree).toHaveStyleRule(
+      'background',
+      theme.background.replace(/ /g, '')
+    );
+  });
+});

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

@@ -6,7 +6,6 @@ import is from 'styled-is';
 import remcalc from 'remcalc';
 
 import Baseline from '../baseline';
-import { bottomShadow } from '../boxes';
 import * as breakpoints from '../breakpoints';
 import { Arrow as ArrowIcon } from '../icons';
 
@@ -157,7 +156,7 @@ const BaseTbody = styled.tbody`
   width: 100%;
 
   ${is('shadow')`
-    box-shadow: ${bottomShadow};
+    box-shadow: ${props => props.theme.shadows.bottomShadow};
   `};
 
   ${is('actionable')`

packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap

@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button H1 1`] = `
+.c0 {
+  font-size: 2rem;
+  margin: 0.625rem 0;
+  color: rgba(73,73,73,1);
+  font-size: 2.25rem;
+  line-height: 2.8125rem;
+  font-style: normal;
+  font-stretch: normal;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 1.5rem;
+}
+
+<h1
+  className="c0"
+>
+  Inspire the lazy
+</h1>
+`;
+
+exports[`Button H2 1`] = `
+.c0 {
+  color: rgba(73,73,73,1);
+  line-height: 1.875rem;
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 1.5rem;
+}
+
+<h2
+  className="c0"
+>
+  Inspire the lazy
+</h2>
+`;
+
+exports[`Button H3 1`] = `
+.c0 {
+  color: rgba(73,73,73,1);
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 1.5rem;
+}
+
+<h3
+  className="c0"
+>
+  Inspire the lazy
+</h3>
+`;
+
+exports[`Button H4 1`] = `
+.c0 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 0.75rem;
+}
+
+<h4
+  className="c0"
+>
+  Inspire the lazy
+</h4>
+`;
+
+exports[`Button H5 1`] = `
+.c0 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 0.75rem;
+}
+
+<h4
+  className="c0"
+>
+  Inspire the lazy
+</h4>
+`;
+
+exports[`Button H6 1`] = `
+.c0 {
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 0.75rem;
+}
+
+<h6
+  className="c0"
+>
+  Inspire the lazy
+</h6>
+`;
+
+exports[`Button Paragraph 1`] = `
+.c0 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  padding-bottom: 2.25rem;
+}
+
+<p
+  className="c0"
+>
+  Inspire the lazy
+</p>
+`;
+
+exports[`Button Small 1`] = `
+.c0 {
+  font-size: 80%;
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+  padding-bottom: 0.75rem;
+}
+
+<small
+  className="c0"
+>
+  Inspire the lazy
+</small>
+`;

packages/ui-toolkit/src/text/__tests__/text.spec.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import remcalc from 'remcalc';
+
+import { P, H1, H2, H3, H4, H5, H6, Small } from '../';
+import { Theme } from '../../mocks'
+import theme from '../../theme'
+
+describe('Button', () => {
+  test('Paragraph', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <P>Inspire the lazy</P>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(15));
+  });
+
+  test('Small', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Small>Inspire the lazy</Small>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(13));
+  });
+
+  test('H1', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <H1>Inspire the lazy</H1>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(36));
+  });
+
+  test('H2', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <H2>Inspire the lazy</H2>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(24));
+  });
+
+  test('H3', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <H3>Inspire the lazy</H3>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(21));
+  });
+
+  test('H4', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <H4>Inspire the lazy</H4>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(15));
+    expect(tree).toHaveStyleRule(
+      'font-weight',
+      `${theme.font.weight.semibold}`
+    );
+  });
+
+  test('H5', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <H5>Inspire the lazy</H5>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(15));
+  });
+
+  test('H6', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <H6>Inspire the lazy</H6>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(13));
+  });
+});

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

@@ -2,7 +2,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 { H1, H2, H3, H4, H5, H6 } from './headings';
 export { default as P } from './p';
 export { default as Small } from './small';
 export { default as Label } from '../label';

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

@@ -1,10 +0,0 @@
-import remcalc from 'remcalc';
-import { H2 } from './headings';
-
-export default H2.extend`
-  margin-top: ${remcalc(19)};
-  margin-bottom: ${remcalc(29)};
-
-  flex: 0 0 auto;
-  align-self: stretch;
-`;

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

@@ -1,3 +1,5 @@
+import remcalc from 'remcalc';
+
 /*
 * There should be no string value to keys outside the `base` object.
 * If a new colors needs to be used, check it doesn't already exist, or
@@ -85,9 +87,8 @@ export const font = {
   textMuted: base.secondary,
   family: '"Libre Franklin"',
   href: () =>
-    `${document.location.protocol}//${
+    `${document.location.protocol}//${document.location
-      document.location.host
+      .host}/fonts/css?family=Libre+Franklin:400,500,600`,
-    }/fonts/css?family=Libre+Franklin:400,500,600`,
   weight: {
     semibold: 600,
     medium: 500,
@@ -127,6 +128,13 @@ export const topologyBackground = base.secondaryActive;
 
 export const transition = 'all 200ms ease-out';
 
+export const borderRadius = remcalc(4);
+
+export const shadows = {
+  bottomShadow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
+  bottomShadowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`
+};
+
 export default {
   ...base,
   font,
@@ -137,5 +145,7 @@ export default {
   topologyBackground,
   brandBackground,
   transition,
+  borderRadius,
+  shadows,
   transparent: 'transparent'
 };

packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap

@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip Tooltip 1`] = `
+Array [
+  <div
+    onClick={undefined}
+    onMouseEnter={undefined}
+    onMouseLeave={undefined}
+    tag={false}
+>
+    Hello
+</div>,
+  .c0 {
+  padding: 0.8125rem 1.125rem;
+  font-weight: normal;
+  background: rgba(73,73,73,1);
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  z-index: 999;
+  border-radius: 0.25rem;
+}
+
+.c0 .b {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 0.375rem;
+}
+
+.c0[data-placement^='top'] .b {
+  border-width: 0.375rem 0.375rem 0 0.375rem;
+  border-color: rgba(73,73,73,1) transparent transparent transparent;
+  bottom: -0.375rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='top'] .b:after {
+  border-width: 0.4375rem 0.4375rem 0 0.4375rem;
+  border-color: rgba(73,73,73,1) transparent transparent transparent;
+  bottom: -0.375rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='bottom'] .b {
+  border-width: 0 0.375rem 0.375rem 0.375rem;
+  border-color: transparent transparent rgba(73,73,73,1) transparent;
+  top: -0.375rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='top'],
+.c0[data-placement^='bottom'] {
+  margin-bottom: 0.375rem;
+}
+
+.c0[data-placement='top-start'] .b,
+.c0[data-placement='bottom-start'] .b {
+  left: 0.375rem;
+}
+
+.c0[data-placement='top-end'] .b,
+.c0[data-placement='bottom-end'] .b {
+  right: 0.375rem;
+}
+
+.c0[data-placement='top'] .b,
+.c0[data-placement='bottom'] .b {
+  left: calc(50% - 0.6875rem);
+}
+
+.c0[data-placement^='left'] {
+  margin-right: 0.375rem;
+}
+
+.c0[data-placement^='left'] .b {
+  border-width: 0.375rem 0 0.375rem 0.375rem;
+  border-color: transparent transparent transparent rgba(73,73,73,1);
+  right: -0.75rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='left'] .b:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-width: 0.4375rem 0 0.4375rem 0.4375rem;
+  border-color: transparent transparent transparent transparent;
+  border-style: solid;
+  left: -0.375rem;
+  width: 0;
+  height: 0;
+  top: -0.4375rem;
+  z-index: -1;
+}
+
+.c0[data-placement^='right'] {
+  margin-left: 0.375rem;
+}
+
+.c0[data-placement^='right'] .b {
+  border-width: 0.375rem 0.375rem 0.375rem 0;
+  border-color: transparent rgba(73,73,73,1) transparent transparent;
+  left: -0.75rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0[data-placement^='right'] .b:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-width: 0.4375rem 0.4375rem 0.4375rem 0;
+  border-color: transparent transparent transparent transparent;
+  border-style: solid;
+  left: -0.125rem;
+  width: 0;
+  height: 0;
+  top: -0.4375rem;
+  z-index: -1;
+}
+
+.c0[data-placement='left-start'] .b,
+.c0[data-placement='right-start'] .b {
+  top: 0.375rem;
+}
+
+.c0[data-placement='left-end'] .b,
+.c0[data-placement='right-end'] .b {
+  bottom: 0.375rem;
+}
+
+.c0[data-placement='left'] .b,
+.c0[data-placement='right'] .b {
+  top: calc(50% - 0.375rem);
+}
+
+<div
+    className="c0"
+    data-placement={undefined}
+    data-x-out-of-boundaries={undefined}
+    style={
+        Object {
+            "opacity": 0,
+            "pointerEvents": "none",
+            "position": "absolute",
+          }
+    }
+>
+    <code>
+        top
+    </code>
+    <span
+        style={Object {}}
+    >
+        <span
+            className="b"
+        />
+    </span>
+</div>,
+]
+`;

packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Tooltip, { Container, Target } from '../';
+import { Theme } from '../../mocks'
+
+describe('Tooltip', () => {
+  test('Tooltip', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Container>
+            <Target>Hello</Target>
+            <Tooltip placement="top">
+              <code>top</code>
+            </Tooltip>
+          </Container>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/ui-toolkit/test/cards.spec.js

@@ -1,41 +0,0 @@
-const { Chrome } = require('navalia');
-const { toMatchImageSnapshot } = require('jest-image-snapshot');
-
-expect.extend({ toMatchImageSnapshot });
-
-describe('Visual Regressions', () => {
-  let chrome = null;
-
-  beforeEach(() => {
-    chrome = new Chrome();
-  });
-
-  afterEach(() => {
-    chrome.done();
-  });
-
-  it('Card > Headed > Collapsed', () =>
-    chrome
-      .goto('http://0.0.0.0:6060/#!/Card/1')
-      .wait('div[name="card"]')
-      .then(() => chrome.screenshot())
-      .then(image => expect(image).toMatchImageSnapshot()));
-
-  it('Card > Headed', () =>
-    chrome
-      .goto('http://0.0.0.0:6060/#!/Card/2')
-      .then(() => chrome.screenshot())
-      .then(image => expect(image).toMatchImageSnapshot()));
-
-  it('Card > Headed > Collapsed', () =>
-    chrome
-      .goto('http://0.0.0.0:6060/#!/Card/3')
-      .then(() => chrome.screenshot())
-      .then(image => expect(image).toMatchImageSnapshot()));
-
-  it('Card > Headed', () =>
-    chrome
-      .goto('http://0.0.0.0:6060/#!/Card/4')
-      .then(() => chrome.screenshot())
-      .then(image => expect(image).toMatchImageSnapshot()));
-});

packages/ui-toolkit/test/start.js

@@ -1,12 +0,0 @@
-const http = require('http');
-const serveStatic = require('serve-static');
-// const jest = require('jest');
-
-const serve = serveStatic('styleguide/');
-const server = http.createServer((req, res) => {
-  // eslint-disable-next-line no-console
-  serve(req, res, (req, res) => console.log('yay'));
-});
-// "test": "cross-env NODE_ENV=test run-s styleguide:build test:visual",
-// Listen
-server.listen(6060);

prototypes/cra-boilerplate/package.json

@@ -29,10 +29,10 @@
     "styled-components": "^2.3.0"
   },
   "devDependencies": {
-    "babel-preset-joyent-portal": "^4.0.4",
+    "babel-preset-joyent-portal": "^6.0.1",
     "eslint": "^4.11.0",
     "eslint-config-joyent-portal": "^3.2.0",
-    "joyent-react-scripts": "^6.2.0",
+    "joyent-react-scripts": "^6.5.0",
     "prettier": "^1.8.2",
     "stylelint": "^8.4.0",
     "stylelint-config-joyent-portal": "^2.0.1"

prototypes/create-instance-icons/package.json

@@ -46,8 +46,7 @@
     "apr-for-each": "^1.0.6",
     "apr-main": "^2.0.2",
     "babel-minify-webpack-plugin": "^0.2.0",
-    "babel-plugin-inline-react-svg": "^0.4.0",
+    "babel-preset-joyent-portal": "^6.0.1",
-    "babel-preset-joyent-portal": "^4.0.4",
     "commitizen": "^2.9.6",
     "cross-env": "^5.1.1",
     "eslint": "^4.11.0",
@@ -63,7 +62,7 @@
     "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
     "jest-transform-graphql": "^2.1.0",
-    "joyent-react-scripts": "^6.2.0",
+    "joyent-react-scripts": "^6.5.0",
     "lodash.sortby": "^4.7.0",
     "mz": "^2.7.0",
     "react-scripts": "^1.0.17",

prototypes/create-instance/package.json

@@ -42,8 +42,7 @@
     "apr-for-each": "^1.0.6",
     "apr-main": "^2.0.2",
     "babel-minify-webpack-plugin": "^0.2.0",
-    "babel-plugin-inline-react-svg": "^0.4.0",
+    "babel-preset-joyent-portal": "^6.0.1",
-    "babel-preset-joyent-portal": "^4.0.4",
     "commitizen": "^2.9.6",
     "cross-env": "^5.1.1",
     "eslint": "^4.11.0",
@@ -57,7 +56,7 @@
     "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
     "jest-transform-graphql": "^2.1.0",
-    "joyent-react-scripts": "^6.2.0",
+    "joyent-react-scripts": "^6.5.0",
     "lodash.sortby": "^4.7.0",
     "mz": "^2.7.0",
     "react-scripts": "^1.0.17",