Merge branch 'v5-style-refinements' of https://github.com/storybooks/storybook into v5-style-refinements

2025-04-04 22:11:15 +08:00 · 2019-02-06 15:48:22 -05:00 · 2019-02-06 15:48:22 -05:00 · d8832b85c2
commit d8832b85c2
parent 1e6cd11bc0 0b504e6575
36 changed files with 4955 additions and 1904 deletions
--- a/addons/a11y/src/components/ColorBlindness.js
+++ b/addons/a11y/src/components/ColorBlindness.js
@ -23,6 +23,7 @@ const ColorIcon = styled.span(

 class ColorBlindness extends Component {
  state = {
+    expanded: false,
    filter: false,
  };

@ -31,8 +32,8 @@ class ColorBlindness extends Component {

    if (iframe) {
      iframe.style.filter = filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`;
-
      this.setState({
+        expanded: false,
        filter,
      });
    } else {
@ -41,7 +42,7 @@ class ColorBlindness extends Component {
  };

  render() {
-    const { filter } = this.state;
+    const { filter, expanded } = this.state;

    let colorList = [
      'protanopia',
@ -54,9 +55,10 @@ class ColorBlindness extends Component {
      'achromatomaly',
      'mono',
    ].map(i => ({
+      id: i,
      title: i,
      onClick: () => {
-        this.setFilter(filter === i ? null : i);
+        this.setFilter(i);
      },
      right: <ColorIcon filter={i} />,
    }));
@ -77,6 +79,8 @@ class ColorBlindness extends Component {
      <WithTooltip
        placement="top"
        trigger="click"
+        tooltipShown={expanded}
+        onVisibilityChange={s => this.setState({ expanded: s })}
        tooltip={<TooltipLinkList links={colorList} />}
        closeOnClick
      >
--- a/addons/backgrounds/src/Tool.js
+++ b/addons/backgrounds/src/Tool.js
@ -20,9 +20,10 @@ export const ColorIcon = styled.span(({ background }) => ({

 const iframeId = 'storybook-preview-background';

-const createItem = memoize(1000)((name, value, hasSwatch, change) =>
+const createItem = memoize(1000)((id, name, value, hasSwatch, change) =>
  hasSwatch
    ? {
+        id: id || name,
        title: name,
        onClick: () => {
          change({ selected: value });
@ -30,6 +31,7 @@ const createItem = memoize(1000)((name, value, hasSwatch, change) =>
        right: <ColorIcon background={value} />,
      }
    : {
+        id: id || name,
        title: name,
        onClick: () => {
          change({ selected: value });
@ -43,11 +45,13 @@ const getState = memoize(10)((props, state, change) => {

  const initial =
    state.selected === 'transparent'
-      ? [createItem('Reset background', 'transparent', false, change)]
+      ? [createItem('reset', 'Reset background', 'transparent', false, change)]
      : [];

  const items = list.length
-    ? initial.concat(list.map(({ name, styles: value }) => createItem(name, value, true, change)))
+    ? initial.concat(
+        list.map(({ id, name, styles: value }) => createItem(id, name, value, true, change))
+      )
    : list;

  const selected =
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@ -34,7 +34,7 @@
  "devDependencies": {
    "@types/prop-types": "^15.5.7",
    "@types/util-deprecate": "^1.0.0",
-    "@types/webpack-env": "^1.13.6"
+    "@types/webpack-env": "^1.13.7"
  },
  "peerDependencies": {
    "react": "*"
--- a/addons/storyshots/storyshots-puppeteer/src/index.js
+++ b/addons/storyshots/storyshots-puppeteer/src/index.js
@ -90,7 +90,7 @@ export const imageSnapshot = (customConfig = {}) => {
    } else {
      // add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
      browser = await puppeteer.launch({
-        args: ['--no-sandbox ', '--disable-setuid-sandbox'],
+        args: ['--no-sandbox ', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
        executablePath: chromeExecutablePath,
      });
    }
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@ -26,7 +26,7 @@
    "core-js": "^2.6.2",
    "estraverse": "^4.2.0",
    "loader-utils": "^1.2.1",
-    "prettier": "^1.16.1",
+    "prettier": "^1.16.4",
    "prop-types": "^15.6.2",
    "react-syntax-highlighter": "^8.0.1",
    "regenerator-runtime": "^0.12.1"
--- a/addons/viewport/src/Tool.js
+++ b/addons/viewport/src/Tool.js
@ -12,14 +12,16 @@ import { PARAM_KEY } from './constants';
 const toList = memoize(50)(items =>
  items ? Object.entries(items).map(([id, value]) => ({ ...value, id })) : []
 );
-const iframeId = 'storybook-preview-background';
+const iframeId = 'storybook-preview-iframe';

-const createItem = memoize(1000)((name, value, change) => ({
+const createItem = memoize(1000)((id, name, value, change) => ({
+  id: id || name,
  title: name,
  onClick: () => {
-    change({ selected: value });
+    change({ selected: id, expanded: false });
  },
  right: `${value.width}-${value.height}`,
+  value,
 }));

 const flip = ({ width, height }) => ({ height: width, widht: height });
@ -34,24 +36,26 @@ const getState = memoize(10)((props, state, change) => {
      : list.find(i => i.default) || 'responsive';

  const resets =
-    selected === 'responsive'
+    selected !== 'responsive'
      ? [
          {
+            id: 'reset',
            title: 'Reset viewport',
            onClick: () => {
-              change({ selected: undefined });
+              change({ selected: undefined, expanded: false });
            },
          },
          {
+            id: 'rotate',
            title: 'Rotate viewport',
            onClick: () => {
-              change({ isRotated: !state.isRotate });
+              change({ isRotated: !state.isRotate, expanded: false });
            },
          },
        ]
      : [];
  const items = list.length
-    ? resets.concat(list.map(({ name, styles: value }) => createItem(name, value, change)))
+    ? resets.concat(list.map(({ id, name, styles: value }) => createItem(id, name, value, change)))
    : list;

  return {
@ -69,6 +73,7 @@ export default class ViewportTool extends Component {
      isRotated: false,
      items: [],
      selected: 'responsive',
+      expanded: false,
    };

    this.listener = () => {
@ -91,6 +96,7 @@ export default class ViewportTool extends Component {
  change = (...args) => this.setState(...args);

  render() {
+    const { expanded } = this.state;
    const { items, selected, isRotated } = getState(this.props, this.state, this.change);
    const item = items.find(i => i.id === selected);

@ -112,6 +118,8 @@ export default class ViewportTool extends Component {
        <WithTooltip
          placement="top"
          trigger="click"
+          tooltipShown={expanded}
+          onVisibilityChange={s => this.setState({ expanded: s })}
          tooltip={<TooltipLinkList links={items} />}
          closeOnClick
        >
--- a/docs/package.json
+++ b/docs/package.json
@ -36,7 +36,7 @@
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-transformer-remark": "^1.7.44",
    "global": "^4.3.2",
-    "highlight.js": "^9.13.1",
+    "highlight.js": "^9.14.2",
    "lodash": "^4.17.11",
    "marked": "^0.5.2",
    "prop-types": "^15.6.2",
@ -47,7 +47,7 @@
    "react-router": "^4.3.1",
    "react-stack-grid": "^0.7.1",
    "sitemap": "^2.1.0",
-    "snyk": "^1.123.0"
+    "snyk": "^1.124.1"
  },
  "snyk": true
 }
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -8560,10 +8560,10 @@ he@1.2.x:
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

-highlight.js@^9.13.1:
-  version "9.13.1"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
-  integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
+highlight.js@^9.14.2:
+  version "9.14.2"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.14.2.tgz#efbfb22dc701406e4da406056ef8c2b70ebe5b26"
+  integrity sha512-Nc6YNECYpxyJABGYJAyw7dBAYbXEuIzwzkqoJnwbc1nIpCiN+3ioYf0XrBnLiyyG0JLuJhpPtt2iTSbXiKLoyA==

 highlight.js@~9.12.0:
  version "9.12.0"
@ -10898,11 +10898,6 @@ lodash@4.11.1:
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.11.1.tgz#a32106eb8e2ec8e82c241611414773c9df15f8bc"
  integrity sha1-oyEG644uyOgsJBYRQUdzyd8V+Lw=

-lodash@4.17.10:
-  version "4.17.10"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
-  integrity sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==
-
 log-symbols@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@ -15634,14 +15629,14 @@ snyk-mvn-plugin@2.0.1:
  resolved "https://registry.yarnpkg.com/snyk-mvn-plugin/-/snyk-mvn-plugin-2.0.1.tgz#c52d5320e34ff3ab6d50d8b9549a4b32243ed6ae"
  integrity sha512-TBrdcFXHdYuRYFCvpyUeFC+mCi6SOV3vdxgHrP7JRNnJwO8PYaKCObLJyhpRWa8IaHv/8CjJTmnEbWIh7BPHAA==

-snyk-nodejs-lockfile-parser@1.10.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.10.1.tgz#de5572091e0eda4860e90cc7175144508f842f95"
-  integrity sha512-0k0QWB4bgmIy81GQVEODwaSjkXldJStM6ooSNiTrwT7cjzJmpN9r6r1WXWTZpSuAyADvGwTfSyzdvl2xzQXAEA==
+snyk-nodejs-lockfile-parser@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.10.2.tgz#22c5b042478239c076741c45a4a4eb9a38d9d584"
+  integrity sha512-EUYDS3vHmYoRDf3wN11/rVo1tBuDhx2d2ywTjqy3nvuJehzqoz53E9eG57SJLj8qPzmL+Hlp44vrlIwFspfJKQ==
  dependencies:
    "@yarnpkg/lockfile" "^1.0.2"
    graphlib "^2.1.5"
-    lodash "4.17.10"
+    lodash "^4.17.11"
    source-map-support "^0.5.7"
    tslib "^1.9.3"
    uuid "^3.3.2"
@ -15737,10 +15732,10 @@ snyk-try-require@1.3.1, snyk-try-require@^1.1.1, snyk-try-require@^1.3.1:
    lru-cache "^4.0.0"
    then-fs "^2.0.0"

-snyk@^1.123.0:
-  version "1.123.0"
-  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.123.0.tgz#f961b5901005b99058aa24b630c8a251f23189bf"
-  integrity sha512-cvletQMZsQ5yyNnyPYFmT46uA9F9nFomlru3ujCxKWYO2LvD+tTXlogz2nS9Z/78dfqjRg/588FAPJ0PmabXmQ==
+snyk@^1.124.1:
+  version "1.124.1"
+  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.124.1.tgz#89f9d01cb1761f92e84febe37a679d6a9768693c"
+  integrity sha512-RmFXKWMecIyBxh3puq8ZDmclqe9QkI8RP8cDG5YAd1bWtGGEg+oRFflfPLCkIzrYTq/SJvWVAYMl6PA5kTusRg==
  dependencies:
    "@snyk/dep-graph" "1.1.2"
    "@snyk/gemfile" "1.1.0"
@ -15766,7 +15761,7 @@ snyk@^1.123.0:
    snyk-gradle-plugin "2.1.3"
    snyk-module "1.9.1"
    snyk-mvn-plugin "2.0.1"
-    snyk-nodejs-lockfile-parser "1.10.1"
+    snyk-nodejs-lockfile-parser "1.10.2"
    snyk-nuget-plugin "1.6.5"
    snyk-php-plugin "1.5.2"
    snyk-policy "1.13.3"
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@ -48,7 +48,7 @@
    "@types/core-js": "^2.5.0",
    "@types/jest": "^23.3.13",
    "@types/node": "~10.12.19",
-    "@types/webpack-env": "^1.13.6",
+    "@types/webpack-env": "^1.13.7",
    "global": "^4.3.2",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
@ -56,6 +56,6 @@
    "jest-preset-angular": "^6.0.1",
    "protractor": "~5.4.2",
    "ts-node": "~8.0.2",
-    "typescript": "^3.2.4"
+    "typescript": "^3.3.1"
  }
 }
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@ -34,7 +34,7 @@
    "@storybook/client-logger": "5.0.0-beta.1",
    "@storybook/react": "5.0.0-beta.1",
    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.8.0",
+    "enzyme-adapter-react-16": "^1.9.0",
    "enzyme-to-json": "^3.3.4",
    "jest": "^23.6.0",
    "jest-emotion": "^10.0.5",
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@ -31,13 +31,13 @@
    "@types/storybook__addon-info": "^3.4.2",
    "@types/storybook__react": "^4.0.0",
    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.8.0",
+    "enzyme-adapter-react-16": "^1.9.0",
    "enzyme-to-json": "^3.3.5",
    "fork-ts-checker-webpack-plugin": "^0.5.2",
    "react-docgen-typescript-loader": "^3.0.1",
    "react-scripts": "^2.1.3",
    "tslint": "^5.12.1",
    "tslint-config-airbnb": "^5.11.1",
-    "typescript": "^3.2.4"
+    "typescript": "^3.3.1"
  }
 }
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@ -28,7 +28,7 @@
    "@storybook/addon-storysource": "5.0.0-beta.1",
    "@storybook/addons": "5.0.0-beta.1",
    "@storybook/marko": "5.0.0-beta.1",
-    "prettier": "^1.16.1",
+    "prettier": "^1.16.4",
    "webpack": "^4.29.0"
  }
 }
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@ -49,7 +49,7 @@
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
-    "storybook-chromatic": "^1.2.5",
+    "storybook-chromatic": "^1.2.6",
    "ts-loader": "^5.3.3",
    "uuid": "^3.3.2",
    "webpack": "^4.29.0"
--- a/examples/official-storybook/stories/snapshots/addon-a11y.stories.storyshot
+++ b/examples/official-storybook/stories/snapshots/addon-a11y.stories.storyshot
@ -257,91 +257,34 @@ exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
 `;

 exports[`Storyshots Addons|A11y/Image Presentation 1`] = `
-.emotion-0 {
-  display: block;
-}
-
 <img
-  class="emotion-0"
  role="presentation"
  src="http://placehold.it/350x150"
 />
 `;

 exports[`Storyshots Addons|A11y/Image With alt 1`] = `
-.emotion-0 {
-  display: block;
-}
-
 <img
  alt="Testing the a11y addon"
-  class="emotion-0"
  src="http://placehold.it/350x150"
 />
 `;

 exports[`Storyshots Addons|A11y/Image Without alt 1`] = `
-.emotion-0 {
-  display: block;
-}
-
 <img
-  class="emotion-0"
  src="http://placehold.it/350x150"
 />
 `;

 exports[`Storyshots Addons|A11y/Typography Correct 1`] = `
 Array [
-  .emotion-0 {
-  color: currentColor;
-  font-weight: normal;
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-  margin: 0;
-  padding: 0;
-  line-height: 1.2em;
-  display: block;
-  color: #333;
-  line-height: 1em;
-}
-
-.emotion-0 > sub {
-  display: block;
-  padding-top: 5px;
-  line-height: 1.2em;
-  font-size: 14px;
-}
-
-.emotion-0 > sub {
-  color: rgba(0,0,0,0.4);
-}
-
-<header
-    class="emotion-1"
-  >
-    <h1
-      class="emotion-0"
-    >
-      <span>
-        Testing the a11y addon
-      </span>
-    </h1>
-  </header>,
-  .emotion-0 {
-  color: inherit;
-}
-
-<p
-    class="emotion-0"
-  >
+  <h1>
+    Testing the a11y addon
+  </h1>,
+  <p>
    Testing the a11y addon
  </p>,
-  .emotion-0 {
-  color: inherit;
-}
-
-<a
-    class="emotion-0"
+  <a
    href="javascript:void 0"
  >
    Testing the a11y addon...
@ -349,68 +292,18 @@ Array [
 ]
 `;

-exports[`Storyshots Addons|A11y/Typography Empty Heading 1`] = `
-.emotion-0 {
-  color: currentColor;
-  font-weight: normal;
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-  margin: 0;
-  padding: 0;
-  line-height: 1.2em;
-  display: block;
-  color: #333;
-  line-height: 1em;
-}
-
-.emotion-0 > sub {
-  display: block;
-  padding-top: 5px;
-  line-height: 1.2em;
-  font-size: 14px;
-}
-
-.emotion-0 > sub {
-  color: rgba(0,0,0,0.4);
-}
-
-<header
-  class="emotion-1"
->
-  <h1
-    class="emotion-0"
-  />
-</header>
-`;
+exports[`Storyshots Addons|A11y/Typography Empty Heading 1`] = `<h1 />`;

 exports[`Storyshots Addons|A11y/Typography Empty Link 1`] = `
-.emotion-0 {
-  color: inherit;
-}
-
 <a
-  class="emotion-0"
  href="javascript:void 0"
 />
 `;

-exports[`Storyshots Addons|A11y/Typography Empty Paragraph 1`] = `
-.emotion-0 {
-  color: inherit;
-}
-
-<p
-  class="emotion-0"
-/>
-`;
+exports[`Storyshots Addons|A11y/Typography Empty Paragraph 1`] = `<p />`;

 exports[`Storyshots Addons|A11y/Typography Link without href 1`] = `
-.emotion-0 {
-  color: inherit;
-}
-
-<a
-  class="emotion-0"
->
+<a>
  Testing the a11y addon...
 </a>
 `;
--- a/examples/official-storybook/tests/snapshots/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/snapshots/storyshots.test.js.snap
--- a/examples/official-storybook/tests/storyshots.test.js
+++ b/examples/official-storybook/tests/storyshots.test.js
@ -4,6 +4,10 @@ import { render as renderer } from 'enzyme';
 import { createSerializer as enzymeSerializer } from 'enzyme-to-json';
 import { createSerializer as emotionSerializer } from 'jest-emotion';

+jest.mock('react-dom', () => ({
+  createPortal: node => node,
+}));
+
 // HTML Snapshots
 initStoryshots({
  framework: 'react',
--- a/lib/components/src/syntaxhighlighter/snapshots/syntaxhighlighter.stories.storyshot
+++ b/lib/components/src/syntaxhighlighter/snapshots/syntaxhighlighter.stories.storyshot
@ -8,7 +8,6 @@ exports[`Storyshots Basics|SyntaxHighlighter bash 1`] = `

 .emotion-2 code {
  padding-right: 10px;
-  opacity: 0.7;
 }

 .emotion-2 * .token {
@ -230,7 +229,6 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `

 .emotion-2 code {
  padding-right: 10px;
-  opacity: 0.7;
 }

 .emotion-2 * .token {
@ -664,7 +662,6 @@ exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = `

 .emotion-2 code {
  padding-right: 10px;
-  opacity: 0.7;
 }

 .emotion-2 * .token {
@ -1075,7 +1072,6 @@ exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = `

 .emotion-2 code {
  padding-right: 10px;
-  opacity: 0.7;
 }

 .emotion-2 * .token {
@ -1488,7 +1484,6 @@ exports[`Storyshots Basics|SyntaxHighlighter story 1`] = `

 .emotion-2 code {
  padding-right: 10px;
-  opacity: 0.7;
 }

 .emotion-2 * .token {
--- a/lib/components/src/tabs/snapshots/tabs.stories.storyshot
+++ b/lib/components/src/tabs/snapshots/tabs.stories.storyshot
@ -1319,7 +1319,7 @@ exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
    <div
      class="emotion-1"
    >
-      Learn how to
+      Learn how to 
      <a
        href="https://storybook.js.org/addons"
        rel="noopener noreferrer"
--- a/lib/components/src/tooltip/ListItem.js
+++ b/lib/components/src/tooltip/ListItem.js
@ -1,124 +1,163 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled, css } from '@storybook/theming';
+import { styled } from '@storybook/theming';
+import memoize from 'memoizerific';

-const Left = styled.span``;
-const Title = styled.span`
-  font-weight: ${props => props.theme.typography.weight.normal};
-`;
-const Center = styled.span``;
-const Right = styled.span``;
-
-const ItemInner = styled.span`
-  /* Layout */
-  line-height: 18px;
-  padding: 7px 15px;
-  display: flex;
-  align-items: center;
-
-  .Left,
-  .Title,
-  .Center,
-  .Right {
-    display: inline-flex;
-  }
-
-  .Title,
-  .Center {
-    flex: 1;
-  }
-
-  .Left,
-  .Right {
-    flex: 0 1 auto;
-  }
-
-  .Right {
-    text-align: right;
-    margin-left: 20px;
-  }
-`;
-
-const Item = styled.a`
-  font-size: ${props => props.theme.typography.size.s1}px;
-  transition: all 150ms ease-out;
-  color: ${props => props.theme.color.mediumdark};
-  text-decoration: none;
-  display: block;
-
-  &:not(:first-child) {
-    border-top: 1px solid ${props => props.theme.color.mediumlight};
-  }
-
-  /* Styling */
-  .Title {
-    color: ${props => props.theme.color.darker};
-  }
-
-  .Right svg {
-    transition: all 200ms ease-out;
-    opacity: 0;
-    height: 12px;
-    width: 12px;
-    margin: 3px 0;
-    vertical-align: top;
-
-    path {
-      fill: inherit;
-    }
-  }
-
-  &:hover {
-    background: #e3f3ff;
-    cursor: pointer;
-
-    .Right svg {
-      opacity: 1;
-    }
-  }
-
-  ${props =>
-    props.active &&
-    css`
-      .Title {
-        font-weight: ${props.theme.typography.weight.extrabold};
-      }
-      .Title,
-      .Center {
-        color: ${props.theme.color.primary};
-      }
-
-      .Right,
-      .Left {
-        svg {
-          opacity: 1;
-          path {
-            fill: ${props.theme.color.primary};
-          }
+const Title = styled.span(
+  ({ theme }) => ({
+    color: theme.color.darker,
+    fontWeight: theme.typography.weight.normal,
+  }),
+  ({ active, theme }) =>
+    active
+      ? {
+          color: theme.color.primary,
+          fontWeight: theme.typography.weight.extrabold,
        }
-      }
-    `};
+      : {},
+  ({ loading, theme }) =>
+    loading
+      ? {
+          display: 'inline-block',
+          flex: 'none',
+          ...theme.animation.inlineGlow,
+        }
+      : {},
+  ({ disabled, theme }) =>
+    disabled
+      ? {
+          color: theme.color.mediumdark,
+        }
+      : {}
+);

-  ${props =>
-    props.loading &&
-    css`
-      .Title {
-        ${props.theme.animation.inlineGlow};
-        flex: none !important;
-        display: inline-block;
-      }
-    `};
+const Right = styled.span(
+  {
+    '& svg': {
+      transition: 'all 200ms ease-out',
+      opacity: '0',
+      height: '12px',
+      width: '12px',
+      margin: '3px 0',
+      verticalAlign: 'top',
+    },
+    '& path': {
+      fill: 'inherit',
+    },
+  },
+  ({ active, theme }) =>
+    active
+      ? {
+          '& svg': {
+            opacity: 1,
+          },
+          '& path': {
+            fill: theme.color.primary,
+          },
+        }
+      : {}
+);

-  ${props =>
-    props.disabled &&
-    css`
-      cursor: not-allowed !important;
-      .Title,
-      .Center {
-        color: ${props.theme.color.mediumdark};
+const Center = styled.span({
+  flex: 1,
+  textAlign: 'left',
+  display: 'inline-flex',
+
+  '& > * + *': {
+    paddingLeft: 10,
+  },
+});
+
+const CenterText = styled.span(
+  {
+    flex: 1,
+    textAlign: 'center',
+  },
+  ({ active, theme }) =>
+    active
+      ? {
+          color: theme.color.primary,
+        }
+      : {},
+  ({ theme, disabled }) =>
+    disabled
+      ? {
+          color: theme.color.mediumdark,
+        }
+      : {}
+);
+
+const Left = styled.span(({ active, theme }) =>
+  active
+    ? {
+        '& svg': {
+          opacity: 1,
+        },
+        '& path': {
+          fill: theme.color.primary,
+        },
      }
-    `};
-`;
+    : {}
+);
+
+const Item = styled.a(
+  ({ theme }) => ({
+    fontSize: `${theme.typography.size.s1}px`,
+    transition: 'all 150ms ease-out',
+    color: theme.color.mediumdark,
+    textDecoration: 'none',
+    cursor: 'pointer',
+    justifyContent: 'space-between',
+
+    lineHeight: '18px',
+    padding: '7px 15px',
+    display: 'flex',
+    alignItems: 'center',
+
+    '& + &': {
+      borderTop: `1px solid ${theme.color.mediumlight}`,
+    },
+
+    '& > * + *': {
+      paddingLeft: 10,
+    },
+
+    '&:hover': {
+      background: theme.background.select,
+    },
+    '&:hover svg': {
+      opacity: 1,
+    },
+  }),
+  ({ disabled }) =>
+    disabled
+      ? {
+          cursor: 'not-allowed',
+        }
+      : {}
+);
+
+const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
+  const result = {};
+
+  if (onClick) {
+    Object.assign(result, {
+      onClick,
+    });
+  }
+  if (href) {
+    Object.assign(result, {
+      href,
+    });
+  }
+  if (LinkWrapper && href) {
+    Object.assign(result, {
+      to: href,
+      as: LinkWrapper,
+    });
+  }
+  return result;
+});

 export default function ListItem({
  loading,
@ -131,28 +170,21 @@ export default function ListItem({
  href,
  onClick,
  LinkWrapper,
-  ...props
+  ...rest
 }) {
-  const linkInner = (
-    <ItemInner onClick={onClick} role="presentation">
-      {left && <Left className="Left">{left}</Left>}
-      {title && <Title className="Title">{title}</Title>}
-      {center && <Center className="Center">{center}</Center>}
-      {right && <Right className="Right">{right}</Right>}
-    </ItemInner>
-  );
+  const itemProps = getItemProps(onClick, href, LinkWrapper);
+  const commonProps = { active, disabled, loading };

  return (
-    <Item
-      as={LinkWrapper && href ? LinkWrapper : null}
-      href={!LinkWrapper ? href : undefined}
-      to={LinkWrapper ? href : undefined}
-      active={active}
-      loading={loading}
-      disabled={disabled}
-      {...props}
-    >
-      {linkInner}
+    <Item {...commonProps} {...rest} {...itemProps}>
+      {left && <Left {...commonProps}>{left}</Left>}
+      {title || center ? (
+        <Center>
+          {title && <Title {...commonProps}>{title}</Title>}
+          {center && <CenterText {...commonProps}>{center}</CenterText>}
+        </Center>
+      ) : null}
+      {right && <Right {...commonProps}>{right}</Right>}
    </Item>
  );
 }
--- a/lib/components/src/tooltip/TooltipLinkList.js
+++ b/lib/components/src/tooltip/TooltipLinkList.js
@ -1,30 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
+
 import ListItem from './ListItem';

-const List = styled.div`
-  min-width: 180px;
-`;
+const List = styled.div({
+  minWidth: 180,
+});

-function TooltipLinkList({ links, LinkWrapper }) {
-  return (
-    <List>
-      {links.map(({ title, href, onClick, active, isGatsby, ...props }, index) => (
-        <ListItem
-          /* eslint-disable react/no-array-index-key */
-          key={index}
-          title={title}
-          onClick={onClick}
-          active={active}
-          href={href}
-          LinkWrapper={isGatsby ? LinkWrapper : null}
-          {...props}
-        />
-      ))}
-    </List>
-  );
-}
+const TooltipLinkList = ({ links, LinkWrapper }) => (
+  <List>
+    {links.map(({ id, title, href, onClick, active, isGatsby, ...props }) => (
+      <ListItem
+        key={id || title}
+        title={title}
+        onClick={onClick}
+        active={active}
+        href={href}
+        LinkWrapper={isGatsby ? LinkWrapper : null}
+        {...props}
+      />
+    ))}
+  </List>
+);

 TooltipLinkList.propTypes = {
  links: PropTypes.arrayOf(
--- a/lib/components/src/tooltip/WithTooltip.js
+++ b/lib/components/src/tooltip/WithTooltip.js
@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
-import TooltipTrigger from 'react-popper-tooltip';
 import { withState } from 'recompose';

+import TooltipTrigger from 'react-popper-tooltip';
 import Tooltip from './Tooltip';

 // A target that doesn't speak popper
@ -17,7 +17,7 @@ const TargetSvgContainer = styled.g`
  cursor: ${props => (props.mode === 'hover' ? 'default' : 'pointer')};
 `;

-function WithTooltip({
+const WithTooltip = ({
  svg,
  trigger,
  closeOnClick,
@ -29,15 +29,22 @@ function WithTooltip({
  tooltipShown,
  onVisibilityChange,
  ...props
-}) {
+}) => {
  const Container = svg ? TargetSvgContainer : TargetContainer;
+
+  if (tooltipShown !== undefined) {
+    Object.assign(props, { tooltipShown });
+  }
+  if (onVisibilityChange !== undefined) {
+    Object.assign(props, { onVisibilityChange });
+  }
+
  return (
    <TooltipTrigger
      placement={placement}
      trigger={trigger}
-      tooltipShown={tooltipShown}
-      onVisibilityChange={onVisibilityChange}
      modifiers={modifiers}
+      {...props}
      tooltip={({
        getTooltipProps,
        getArrowProps,
@ -66,7 +73,7 @@ function WithTooltip({
      )}
    </TooltipTrigger>
  );
-}
+};

 WithTooltip.propTypes = {
  svg: PropTypes.bool,
@ -91,6 +98,12 @@ WithTooltip.defaultProps = {
  tooltipShown: false,
 };

-export default withState('tooltipShown', 'onVisibilityChange', ({ startOpen }) => startOpen)(
-  WithTooltip
-);
+export default WithTooltip;
+
+const WithToolTipState = withState(
+  'tooltipShown',
+  'onVisibilityChange',
+  ({ startOpen }) => startOpen
+)(WithTooltip);
+
+export { WithToolTipState };
--- a/lib/components/src/tooltip/WithTooltip.stories.js
+++ b/lib/components/src/tooltip/WithTooltip.stories.js
@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { styled } from '@storybook/theming';

 import TooltipMessage from './TooltipMessage';
-import WithTooltip from './WithTooltip';
+import { WithToolTipState as WithTooltip } from './WithTooltip';

 const ViewPort = styled.div`
  height: 300px;
--- a/lib/components/src/tooltip/snapshots/ListItem.stories.storyshot
+++ b/lib/components/src/tooltip/snapshots/ListItem.stories.storyshot
--- a/lib/components/src/tooltip/snapshots/TooltipLinkList.stories.storyshot
+++ b/lib/components/src/tooltip/snapshots/TooltipLinkList.stories.storyshot
@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+<div
+  style="height:300px"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      Tooltip
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+<div
+  style="height:300px"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      Tooltip
+    </div>
+  </div>
+</div>
+`;
--- a/lib/components/src/tooltip/snapshots/TooltipMessage.stories.storyshot
+++ b/lib/components/src/tooltip/snapshots/TooltipMessage.stories.storyshot
@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots basics/Tooltip/TooltipMessage default 1`] = `
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+<div
+  style="height:300px"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      Tooltip
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots basics/Tooltip/TooltipMessage minimal message 1`] = `
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+<div
+  style="height:300px"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      Tooltip
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots basics/Tooltip/TooltipMessage with link 1`] = `
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+<div
+  style="height:300px"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      Tooltip
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+<div
+  style="height:300px"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      Tooltip
+    </div>
+  </div>
+</div>
+`;
--- a/lib/components/src/tooltip/snapshots/TooltipNote.stories.storyshot
+++ b/lib/components/src/tooltip/snapshots/TooltipNote.stories.storyshot
@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots basics/Tooltip/TooltipNote default 1`] = `
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+<div
+  style="height:300px"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      Tooltip
+    </div>
+  </div>
+</div>
+`;
--- a/lib/components/src/tooltip/snapshots/WithTooltip.stories.storyshot
+++ b/lib/components/src/tooltip/snapshots/WithTooltip.stories.storyshot
@ -153,6 +153,152 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click closeOnClick 1`] = `
 </div>
 `;

+exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
+.emotion-2 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.emotion-12 {
+  height: 300px;
+}
+
+.emotion-11 {
+  width: 500px;
+  height: 500px;
+  overflow-y: scroll;
+  background: #eee;
+  position: relative;
+}
+
+.emotion-0 {
+  height: 100px;
+}
+
+.emotion-1 {
+  width: 200px;
+  height: 100px;
+  background-color: red;
+  color: white;
+}
+
+.emotion-10 {
+  display: inline-block;
+  z-index: 2147483647;
+  margin-bottom: 10px;
+  margin-top: 0px;
+  margin-left: 0px;
+  margin-right: 0px;
+  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  -webkit-filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.1)) drop-shadow(0 2px 5px rgba(0,0,0,0.05));
+  filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.1)) drop-shadow(0 2px 5px rgba(0,0,0,0.05));
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.emotion-3 {
+  position: absolute;
+  border-style: solid;
+  margin-bottom: 0px;
+  margin-top: 8px;
+  margin-right: 8px;
+  margin-left: 8px;
+  bottom: -8px;
+  top: autopx;
+  right: autopx;
+  left: autopx;
+  border-bottom-width: 0px;
+  border-top-width: 8px;
+  border-right-width: 8px;
+  border-left-width: 8px;
+  border-top-color: #FFFFFF;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
+.emotion-9 {
+  padding: 15px;
+  width: 280px;
+  box-sizing: border-box;
+}
+
+.emotion-6 {
+  color: #444444;
+  line-height: 18px;
+}
+
+.emotion-4 {
+  font-weight: 900;
+}
+
+.emotion-8 {
+  margin-top: 8px;
+  text-align: center;
+}
+
+.emotion-8 > * {
+  margin: 0 8px;
+  font-weight: 900;
+}
+
+<div
+  class="emotion-12"
+>
+  <div
+    class="emotion-11"
+  >
+    <div
+      class="emotion-0"
+    />
+    <div
+      class="emotion-2"
+    >
+      <div
+        class="emotion-1"
+      >
+        Click me!
+      </div>
+    </div>
+    <div
+      class="emotion-10"
+      style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
+    >
+      <div
+        class="emotion-3"
+      />
+      <div
+        class="emotion-9"
+      >
+        <div
+          class="emotion-6"
+        >
+          <div
+            class="emotion-4"
+          >
+            Lorem ipsum dolor sit
+          </div>
+          <span
+            class="emotion-5"
+          >
+            Amet consectatur vestibulum concet durum politu coret weirom
+          </span>
+        </div>
+        <div
+          class="emotion-8"
+        >
+          <a
+            class="emotion-5"
+          >
+            Continue
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots basics/Tooltip/WithTooltip simple hover 1`] = `
 .emotion-2 {
  display: inline-block;
--- a/lib/components/src/typography/snapshots/typography.stories.storyshot
+++ b/lib/components/src/typography/snapshots/typography.stories.storyshot
@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Basics|typography all 1`] = `
+.emotion-16 {
+  padding: 3rem;
+}
+
+.emotion-0 {
+  margin-bottom: 3rem;
+}
+
+.emotion-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.emotion-15 > * {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding-right: 40px;
+}
+
+.emotion-10 {
+  font-weight: 900;
+}
+
+.emotion-10 > * {
+  margin-bottom: 1rem;
+}
+
+.emotion-1 {
+  font-size: 48px;
+}
+
+.emotion-2 {
+  font-size: 40px;
+}
+
+.emotion-3 {
+  font-size: 32px;
+}
+
+.emotion-4 {
+  font-size: 28px;
+}
+
+.emotion-6 {
+  font-size: 20px;
+}
+
+.emotion-7 {
+  font-size: 16px;
+}
+
+.emotion-8 {
+  font-size: 14px;
+}
+
+.emotion-9 {
+  font-size: 12px;
+}
+
+.emotion-14 > * {
+  margin-bottom: 1rem;
+}
+
+<div
+  class="emotion-16"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      <b>
+        Font-family:
+      </b>
+       "Nunito sans", Apple system font ... sans-serif
+    </div>
+    <div>
+      <b>
+        Code font:
+      </b>
+       
+      <code>
+        Operator Mono, Fira Code, Consolas ... monospace
+      </code>
+    </div>
+    <div>
+      <b>
+        Weights:
+      </b>
+       400(normal), 600(bold), 900(black)
+    </div>
+  </div>
+  <div
+    class="emotion-15"
+  >
+    <div
+      class="emotion-10"
+    >
+      <div
+        class="emotion-1"
+      >
+        48 heading
+      </div>
+      <div
+        class="emotion-2"
+      >
+        40 heading
+      </div>
+      <div
+        class="emotion-3"
+      >
+        32 heading
+      </div>
+      <div
+        class="emotion-4"
+      >
+        28 heading
+      </div>
+      <div
+        class="emotion-4"
+      >
+        24 heading
+      </div>
+      <div
+        class="emotion-6"
+      >
+        20 heading
+      </div>
+      <div
+        class="emotion-7"
+      >
+        16 heading
+      </div>
+      <div
+        class="emotion-8"
+      >
+        14 heading
+      </div>
+      <div
+        class="emotion-9"
+      >
+        12 heading
+      </div>
+    </div>
+    <div
+      class="emotion-14"
+    >
+      <div
+        class="emotion-7"
+      >
+        16 The quick brown fox jumps over the lazy dog
+      </div>
+      <div
+        class="emotion-8"
+      >
+        14 The quick brown fox jumps over the lazy dog
+      </div>
+      <div
+        class="emotion-9"
+      >
+        12 The quick brown fox jumps over the lazy dog
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/lib/components/src/typography/link/snapshots/link.stories.storyshot
+++ b/lib/components/src/typography/link/snapshots/link.stories.storyshot
@ -1,53 +1,720 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Storyshots Basics|Typography/Link cancel w/ href 1`] = `
-.emotion-0 {
-  color: inherit;
+exports[`Storyshots Basics|Link cancel w/ href 1`] = `
+.emotion-1 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-1 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-1:hover svg path,
+.emotion-1:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-1:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-1:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-1 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
 }

 <a
-  class="emotion-0"
+  class="emotion-1"
  href="http://example.com"
 >
-  Link
+  <span
+    class="emotion-0"
+  >
+    Link
+  </span>
 </a>
 `;

-exports[`Storyshots Basics|Typography/Link cancel w/ onClick 1`] = `
-.emotion-0 {
-  color: inherit;
+exports[`Storyshots Basics|Link cancel w/ onClick 1`] = `
+.emotion-1 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-1 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-1:hover svg path,
+.emotion-1:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-1:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-1:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-1 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
 }

 <a
-  class="emotion-0"
+  class="emotion-1"
  href="/"
 >
-  Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
+  <span
+    class="emotion-0"
+  >
+    Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
+  </span>
 </a>
 `;

-exports[`Storyshots Basics|Typography/Link no-cancel w/ href 1`] = `
-.emotion-0 {
-  color: inherit;
+exports[`Storyshots Basics|Link no-cancel w/ href 1`] = `
+.emotion-1 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-1 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-1:hover svg path,
+.emotion-1:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-1:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-1:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-1 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
 }

 <a
-  class="emotion-0"
+  class="emotion-1"
  href="http://example.com"
 >
-  Link
+  <span
+    class="emotion-0"
+  >
+    Link
+  </span>
 </a>
 `;

-exports[`Storyshots Basics|Typography/Link no-cancel w/ onClick 1`] = `
-.emotion-0 {
-  color: inherit;
+exports[`Storyshots Basics|Link no-cancel w/ onClick 1`] = `
+.emotion-1 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-1 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-1:hover svg path,
+.emotion-1:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-1:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-1:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-1 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
 }

 <a
-  class="emotion-0"
+  class="emotion-1"
  href="/"
 >
-  any click will go through
+  <span
+    class="emotion-0"
+  >
+    any click will go through
+  </span>
 </a>
 `;
+
+exports[`Storyshots Basics|Link styled links 1`] = `
+.emotion-9 {
+  display: block;
+}
+
+.emotion-8 {
+  fill: currentColor;
+}
+
+.emotion-3 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+  color: #999999;
+}
+
+.emotion-3 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-3:hover,
+.emotion-3:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-3:hover svg path,
+.emotion-3:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-3:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-3:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-3 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
+.emotion-3 svg path {
+  fill: #999999;
+}
+
+.emotion-3:hover {
+  color: #666666;
+}
+
+.emotion-3:hover svg path {
+  fill: #666666;
+}
+
+.emotion-3:active {
+  color: #444444;
+}
+
+.emotion-3:active svg path {
+  fill: #444444;
+}
+
+.emotion-1 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-1 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-1:hover svg path,
+.emotion-1:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-1:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-1:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-1 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
+.emotion-5 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+  color: #666666;
+}
+
+.emotion-5 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-5:hover svg path,
+.emotion-5:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-5:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-5 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
+.emotion-5 svg path {
+  fill: #666666;
+}
+
+.emotion-5:hover {
+  color: #333333;
+}
+
+.emotion-5:hover svg path {
+  fill: #333333;
+}
+
+.emotion-5:active {
+  color: #999999;
+}
+
+.emotion-5:active svg path {
+  fill: #999999;
+}
+
+.emotion-7 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+  color: inherit;
+}
+
+.emotion-7 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-7:hover,
+.emotion-7:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-7:hover svg path,
+.emotion-7:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-7:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-7:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-7 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
+.emotion-7:hover,
+.emotion-7:active {
+  color: inherit;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-14 svg {
+  height: 1em;
+  width: 1em;
+  vertical-align: middle;
+  position: relative;
+  bottom: 0;
+  margin-right: 0;
+}
+
+.emotion-18 > svg:last-of-type {
+  height: 0.7em;
+  width: 0.7em;
+  margin-right: 0;
+  margin-left: 0.25em;
+  bottom: auto;
+  vertical-align: inherit;
+}
+
+.emotion-18 svg {
+  height: 1em;
+  width: 1em;
+  vertical-align: middle;
+  position: relative;
+  bottom: 0;
+  margin-right: 0;
+}
+
+.emotion-21 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+  color: #FFFFFF;
+}
+
+.emotion-21 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-21:hover,
+.emotion-21:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-21:hover svg path,
+.emotion-21:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-21:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-21:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-21 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
+.emotion-21 svg path {
+  fill: #FFFFFF;
+}
+
+.emotion-21:hover {
+  color: #F8F8F8;
+}
+
+.emotion-21:hover svg path {
+  fill: #F8F8F8;
+}
+
+.emotion-21:active {
+  color: #F3F3F3;
+}
+
+.emotion-21:active svg path {
+  fill: #F3F3F3;
+}
+
+<div>
+  <a
+    class="emotion-1"
+    href="http://google.com"
+  >
+    <span
+      class="emotion-0"
+    >
+      Default
+    </span>
+  </a>
+  <br />
+  <a
+    class="emotion-3"
+    href="http://google.com"
+  >
+    <span
+      class="emotion-0"
+    >
+      Secondary
+    </span>
+  </a>
+  <br />
+  <a
+    class="emotion-5"
+    href="http://google.com"
+  >
+    <span
+      class="emotion-0"
+    >
+      tertiary
+    </span>
+  </a>
+  <br />
+  <a
+    class="emotion-7"
+    href="http://google.com"
+  >
+    <span
+      class="emotion-0"
+    >
+      nochrome
+    </span>
+  </a>
+  <br />
+  <a
+    class="emotion-1"
+    href="http://google.com"
+  >
+    <span
+      class="emotion-0"
+    >
+      <svg
+        class="emotion-9"
+        height="20px"
+        viewBox="0 0 1024 1024"
+        width="20px"
+      >
+        <path
+          class="emotion-8"
+          d="M371 147c-14 0-126 3-245 91 0 0-126 227-126 507 0 0 74 126 268 132l58-71c-111-34-153-103-153-103l24 15 4 2 8 4a668 668 0 0 0 420 68 629 629 0 0 0 228-89s-44 71-159 103l58 71c194-7 268-133 268-132 0-280-126-507-126-507-126-94-246-91-246-91l-12 14a576 576 0 0 1 218 110 729 729 0 0 0-441-81l-15 1c-31 4-105 14-199 56-33 14-52 24-52 24s72-69 230-114l-9-10h-1zm-23 323c50 0 91 43 90 97 0 53-40 96-90 96-49 0-89-43-89-96 0-54 39-97 89-97zm321 0c49 0 89 43 89 97 0 53-39 96-89 96s-90-43-90-96c0-54 40-97 90-97z"
+        />
+      </svg>
+      With icon in front
+    </span>
+  </a>
+  <br />
+  <a
+    class="emotion-1"
+    href="http://google.com"
+  >
+    <span
+      class="emotion-14"
+    >
+      <svg
+        class="emotion-9"
+        height="20px"
+        viewBox="0 0 1024 1024"
+        width="20px"
+      >
+        <path
+          class="emotion-8"
+          d="M920.032 127.858h-816c-22.092 0-40 17.908-40 40v688c0 22.092 17.908 40 40 40h316.578c1.13 0.096 2.266 0.172 3.422 0.172s2.292-0.078 3.424-0.172h492.576c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40zM144.032 207.858h240v608h-240v-608zM880.032 815.858h-416v-608h416v608zM198.734 288.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32zM198.734 416.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32zM198.734 544.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32z"
+        />
+      </svg>
+    </span>
+  </a>
+  <br />
+  <a
+    class="emotion-1"
+    href="http://google.com"
+  >
+    <span
+      class="emotion-18"
+    >
+      With arrow behind
+      <svg
+        class="emotion-9"
+        height="20px"
+        viewBox="0 0 1024 1024"
+        width="20px"
+      >
+        <path
+          class="emotion-8"
+          d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z"
+        />
+      </svg>
+    </span>
+  </a>
+  <br />
+  <span
+    style="background:#333"
+  >
+    <a
+      class="emotion-21"
+      href="http://google.com"
+    >
+      <span
+        class="emotion-0"
+      >
+        Inverted colors
+      </span>
+    </a>
+  </span>
+  <br />
+</div>
+`;
--- a/lib/theming/src/base.ts
+++ b/lib/theming/src/base.ts
@ -69,6 +69,7 @@ export const color = {
 export const background = {
  app: '#F6F9FC',
  appInverse: '#7A8997',
+  select: '#e3f3ff',

  // Notification, error, and warning backgrounds
  positive: '#E1FFD4',
--- a/lib/ui/src/components/panel/snapshots/panel.stories.storyshot
+++ b/lib/ui/src/components/panel/snapshots/panel.stories.storyshot
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Storyshots UI|Panel default 1`] = `
-.emotion-14 {
+.emotion-13 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
@ -14,7 +14,7 @@ exports[`Storyshots UI|Panel default 1`] = `
  flex-direction: column;
 }

-.emotion-12 {
+.emotion-11 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -149,25 +149,18 @@ exports[`Storyshots UI|Panel default 1`] = `
  border-bottom-color: #1EA7FD;
 }

-.emotion-11 {
+.emotion-10 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 }

-.emotion-11 > * {
+.emotion-10 > * {
  margin-right: 15px;
 }

-.emotion-4 {
-  width: 1px;
-  height: 24px;
-  background: rgba(0,0,0,0.1);
-  margin-top: 8px;
-}
-
-.emotion-7 {
+.emotion-6 {
  height: 40px;
  background: none;
  color: inherit;
@ -180,25 +173,25 @@ exports[`Storyshots UI|Panel default 1`] = `
  transition: color 0.2s linear,border-bottom-color 0.2s linear;
 }

-.emotion-7:hover,
-.emotion-7:focus {
+.emotion-6:hover,
+.emotion-6:focus {
  outline: 0 none;
  color: #1EA7FD;
 }

-.emotion-7 > svg {
+.emotion-6 > svg {
  width: 15px;
 }

-.emotion-6 {
+.emotion-5 {
  display: block;
 }

-.emotion-5 {
+.emotion-4 {
  fill: currentColor;
 }

-.emotion-13 {
+.emotion-12 {
  display: block;
  position: relative;
  position: relative;
@ -210,14 +203,14 @@ exports[`Storyshots UI|Panel default 1`] = `
 }

 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;width:800px;height:300px;margin:1rem auto;background:white"
 >
  <div
-    class="emotion-14"
+    class="emotion-13"
    id="storybook-panel-root"
  >
    <div
-      class="emotion-12"
+      class="emotion-11"
    >
      <div
        class="emotion-3"
@ -243,37 +236,34 @@ exports[`Storyshots UI|Panel default 1`] = `
        </div>
      </div>
      <div
-        class="emotion-11"
+        class="emotion-10"
      >
-        <span
-          class="emotion-4"
-        />
        <button
-          class="emotion-7"
+          class="emotion-6"
        >
          <svg
-            class="emotion-6"
+            class="emotion-5"
            height="20px"
            viewBox="0 0 1024 1024"
            width="20px"
          >
            <path
-              class="emotion-5"
+              class="emotion-4"
              d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
            />
          </svg>
        </button>
        <button
-          class="emotion-7"
+          class="emotion-6"
        >
          <svg
-            class="emotion-6"
+            class="emotion-5"
            height="20px"
            viewBox="0 0 1024 1024"
            width="20px"
          >
            <path
-              class="emotion-5"
+              class="emotion-4"
              d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
            />
          </svg>
@ -281,7 +271,7 @@ exports[`Storyshots UI|Panel default 1`] = `
      </div>
    </div>
    <div
-      class="emotion-13"
+      class="emotion-12"
    >
      <div
        id="test2"
@ -306,7 +296,7 @@ exports[`Storyshots UI|Panel no panels 1`] = `
 }

 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;width:800px;height:300px;margin:1rem auto;background:white"
 >
  <div
    class="emotion-2"
@ -319,7 +309,7 @@ exports[`Storyshots UI|Panel no panels 1`] = `
    <div
      class="emotion-1"
    >
-      Learn how to
+      Learn how to 
      <a
        href="https://storybook.js.org/addons"
        rel="noopener noreferrer"
--- a/lib/ui/src/components/preview/snapshots/preview.stories.storyshot
+++ b/lib/ui/src/components/preview/snapshots/preview.stories.storyshot
@ -89,7 +89,7 @@ Array [
 .emotion-9 {
  width: 1px;
  height: 24px;
-  background: rgba(0,0,0,0.1);
+  background: rgba(0,0,0,.05);
  margin-top: 8px;
 }

@ -475,7 +475,7 @@ Array [
 .emotion-5 {
  width: 1px;
  height: 24px;
-  background: rgba(0,0,0,0.1);
+  background: rgba(0,0,0,.05);
  margin-top: 8px;
 }

--- a/lib/ui/src/settings/snapshots/about.stories.storyshot
+++ b/lib/ui/src/settings/snapshots/about.stories.storyshot
--- a/package.json
+++ b/package.json
@ -69,7 +69,7 @@
    "@types/jest": "^23.3.13",
    "@types/node": "^10.12.19",
    "@types/react": "^16.7.22",
-    "@types/webpack-env": "^1.13.6",
+    "@types/webpack-env": "^1.13.7",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
@ -89,11 +89,11 @@
    "cross-env": "^5.2.0",
    "danger": "^7.0.7",
    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.8.0",
+    "enzyme-adapter-react-16": "^1.9.0",
    "eslint": "^5.12.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^3.6.0",
-    "eslint-plugin-import": "^2.15.0",
+    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jest": "^22.2.1",
    "eslint-plugin-json": "^1.2.1",
    "eslint-plugin-jsx-a11y": "^6.2.0",
@ -122,7 +122,7 @@
    "lint-staged": "^8.1.1",
    "lodash": "^4.17.11",
    "npmlog": "^4.1.2",
-    "prettier": "^1.16.1",
+    "prettier": "^1.16.4",
    "raf": "^3.4.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
@ -138,7 +138,7 @@
    "tslint": "~5.12.1",
    "tslint-config-prettier": "^1.15.0",
    "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^3.2.4"
+    "typescript": "^3.3.1"
  },
  "husky": {
    "hooks": {
--- a/scripts/jest.init.js
+++ b/scripts/jest.init.js
@ -27,6 +27,7 @@ configure({ adapter: new Adapter() });
 */

 const ignoreList = [
+  error => error.message.includes('":nth-child" is potentially unsafe'),
  error => error.message.includes('":first-child" is potentially unsafe'),
  error => error.message.includes('Failed prop type') && error.stack.includes('storyshots'),
 ];
--- a/yarn.lock
+++ b/yarn.lock
@ -2204,9 +2204,10 @@
    "@types/unist" "*"
    "@types/vfile-message" "*"

-"@types/webpack-env@*", "@types/webpack-env@^1.13.6":
-  version "1.13.6"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"
+"@types/webpack-env@*", "@types/webpack-env@^1.13.7":
+  version "1.13.7"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.7.tgz#137a4e57aa31ab57b1baf66f5dc3b6bf085e9944"
+  integrity sha512-rzi6fw7hhxPcCoNVsgysHFlKnhYYvVj7AJwdAO0HQNP5vg9sY0DoRRC1pfuCQm94cOa1sab82HGUtdFlWHIhBg==

 "@vue/component-compiler-utils@^2.5.1":
  version "2.5.1"
@ -8043,9 +8044,10 @@ envinfo@^3.0.0:
    os-name "^2.0.1"
    which "^1.2.14"

-enzyme-adapter-react-16@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.8.0.tgz#7055d8e908d8d27b807cf4292244db3c815ca11d"
+enzyme-adapter-react-16@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.9.0.tgz#b3bc951cb90d619ead85b49760300be1bbaced80"
+  integrity sha512-tUqmeLi0Y3PxuiPSykjn8ZMqzCnaRIVywNx0i50+nhd4y/b3JtXRbsvIc8HKxn3heE4t969EI2461Kc9FYxjdw==
  dependencies:
    enzyme-adapter-utils "^1.10.0"
    function.prototype.name "^1.1.0"
@ -8326,9 +8328,10 @@ eslint-plugin-import@2.14.0:
    read-pkg-up "^2.0.0"
    resolve "^1.6.0"

-eslint-plugin-import@^2.15.0:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.15.0.tgz#d8f3c28b8988ccde5df964706faa7c1e52f0602a"
+eslint-plugin-import@^2.16.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.16.0.tgz#97ac3e75d0791c4fac0e15ef388510217be7f66f"
+  integrity sha512-z6oqWlf1x5GkHIFgrSvtmudnqM6Q60KM4KvpWi5ubonMjycLjndvd5+8VAZIsTlHC03djdgJuyKG6XO577px6A==
  dependencies:
    contains-path "^0.1.0"
    debug "^2.6.9"
@ -16353,9 +16356,10 @@ prettier@1.16.0:
  version "1.16.0"
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.0.tgz#104dd25f5ee3d0c9d0a6ce4bb40ced8481d51219"

-prettier@^1.14.2, prettier@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.1.tgz#534c2c9d7853f8845e5e078384e71973bd74089f"
+prettier@^1.14.2, prettier@^1.16.4:
+  version "1.16.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
+  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==

 pretty-bytes@^4.0.2:
  version "4.0.2"
@ -19355,9 +19359,10 @@ stealthy-require@^1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"

-storybook-chromatic@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-1.2.5.tgz#71fc2f3a56b0e7e110afa5adc06875cf38b0bc79"
+storybook-chromatic@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-1.2.6.tgz#bada3ea3b15469378cd85b5048309af954e43ad0"
+  integrity sha512-rJ0Qr95PwXp1//l8SDDCYkv9++YOsqTeJSIOIUTncDkNar2Tggj5IRDnJZkYvccGJQ5PeOlxHjie4Cnol2bz3Q==
  dependencies:
    "@chromaui/localtunnel" "1.9.1-chromatic.3"
    apollo-fetch "^0.6.0"
@ -20468,9 +20473,10 @@ typescript@3.2.2:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5"

-typescript@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.4.tgz#c585cb952912263d915b462726ce244ba510ef3d"
+typescript@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.1.tgz#6de14e1db4b8a006ac535e482c8ba018c55f750b"
+  integrity sha512-cTmIDFW7O0IHbn1DPYjkiebHxwtCMU+eTy30ZtJNBPF9j2O1ITu5XH2YnBeVRKWHqF+3JQwWJv0Q0aUgX8W7IA==

 ua-parser-js@^0.7.18:
  version "0.7.19"