Merge pull request #5650 from storybooks/v5-style-qa

Styling bug fixes, story updates, and more QA
2025-04-06 07:21:16 +08:00 · 2019-02-19 11:27:59 +08:00 · 2019-02-19 11:27:59 +08:00 · ba8142f13c
commit ba8142f13c
parent 08441a50d6
26 changed files with 5875 additions and 4366 deletions
--- a/addons/knobs/src/components/types/Date.js
+++ b/addons/knobs/src/components/types/Date.js
@ -6,10 +6,10 @@ import { Form } from '@storybook/components';
 const FlexSpaced = styled.div({
  flex: 1,
  display: 'flex',
-  '& > *': {
+  '&& > *': {
    marginLeft: 10,
  },
-  '& > *:first-child': {
+  '&& > *:first-of-type': {
    marginLeft: 0,
  },
 });
--- a/examples/official-storybook/tests/snapshots/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/snapshots/storyshots.test.js.snap
--- a/lib/components/src/Button/Button.js
+++ b/lib/components/src/Button/Button.js
@ -1,21 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { styled, css } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';

-const Text = styled.span`
-  display: inline-block;
-  vertical-align: top;
-`;
-
-const Loading = styled.span`
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  opacity: 0;
-`;
-
 const ButtonWrapper = styled.button`
  border: 0;
  border-radius: 3em;
@ -77,7 +64,7 @@ const ButtonWrapper = styled.button`

      ${props.small &&
        css`
-          padding: 7px;
+          padding: 9px;
        `}

      ${!props.small &&
@ -233,45 +220,19 @@ const ButtonWrapper = styled.button`

 const ButtonLink = ButtonWrapper.withComponent('a');

-function Button({ loading, loadingText, isLink, children, ...props }) {
-  let buttonInner = children;
-  if (loading) {
-    buttonInner = (
-      <Fragment>
-        <Text>{children}</Text>
-        {loading && (
-          <Loading role="progressbar" aria-busy="true">
-            {loadingText || 'Loading...'}
-          </Loading>
-        )}
-      </Fragment>
-    );
-  }
-
+function Button({ isLink, children, ...props }) {
  if (isLink) {
-    return (
-      <ButtonLink loading={loading} {...props}>
-        {buttonInner}
-      </ButtonLink>
-    );
+    return <ButtonLink {...props}>{children}</ButtonLink>;
  }
-  return (
-    <ButtonWrapper loading={loading} {...props}>
-      {buttonInner}
-    </ButtonWrapper>
-  );
+  return <ButtonWrapper {...props}>{children}</ButtonWrapper>;
 }

 Button.propTypes = {
-  loading: PropTypes.bool,
-  loadingText: PropTypes.node,
  isLink: PropTypes.bool,
  children: PropTypes.node.isRequired,
 };

 Button.defaultProps = {
-  loading: false,
-  loadingText: null,
  isLink: false,
 };

--- a/lib/components/src/Button/Button.stories.js
+++ b/lib/components/src/Button/Button.stories.js
@ -9,10 +9,16 @@ const { Button: FormButton } = Form;

 storiesOf('Basics|Button', module).add('all buttons', () => (
  <div>
+    <p>Button that is used for forms</p>
+    <FormButton>Form.Button</FormButton>
+    <br />
+    <p>Buttons that are used for everything else</p>
    <Button primary>Primary</Button>
    <Button secondary>Secondary</Button>
-    <Button tertiary>Tertiary</Button>
-    <FormButton>FormButton copies teriary w/o hover translate</FormButton>
+    <Button outline containsIcon>
+      <Icon icon="link" />
+    </Button>
+    <br />
    <Button outline>Outline</Button>
    <Button outline primary>
      Outline primary
@ -30,9 +36,6 @@ storiesOf('Basics|Button', module).add('all buttons', () => (
    <Button secondary small>
      Secondary
    </Button>
-    <Button tertiary small>
-      Tertiary
-    </Button>
    <Button outline small>
      Outline
    </Button>
--- a/lib/components/src/Button/snapshots/Button.stories.storyshot
+++ b/lib/components/src/Button/snapshots/Button.stories.storyshot
--- a/lib/components/src/bar/bar.js
+++ b/lib/components/src/bar/bar.js
@ -5,15 +5,9 @@ import { styled } from '@storybook/theming';
 const Side = styled.div(
  {
    display: 'flex',
+    flexBasis: 'auto',
+    flexShrink: 0,
  },
-  ({ right }) =>
-    right
-      ? {
-          '& > *': {
-            marginRight: 15,
-          },
-        }
-      : {},
  ({ left }) =>
    left
      ? {
@ -22,10 +16,13 @@ const Side = styled.div(
          },
        }
      : {},
-  ({ flex }) =>
-    flex
+  ({ right }) =>
+    right
      ? {
-          flex: 1,
+          marginLeft: 30,
+          '& > *': {
+            marginRight: 15,
+          },
        }
      : {}
 );
@ -33,18 +30,55 @@ Side.displayName = 'Side';

 export const Bar = styled.div(
  ({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'space-between',
-    background: theme.barBg,
+    // display: 'flex',
+    // justifyContent: 'space-between',
+    // background: theme.barBg,
    color: theme.barTextColor,
    height: 40,
-    position: 'relative',
-  }),
-  ({ scroll = true }) => ({
-    overflow: scroll ? 'auto' : 'visible',
-    overflowX: scroll ? 'auto' : 'visible',
-    overflowY: scroll ? 'hidden' : 'visible',
  }),
+  ({ theme, scroll = true }) =>
+    scroll
+      ? {
+          overflow: 'auto',
+          overflowX: 'auto',
+          overflowY: 'hidden',
+          scrollbarWidth: ['slim', 3],
+          scrollbarColor: 'transparent transparent',
+
+          '&::-webkit-scrollbar': {
+            height: 3,
+            width: 3,
+            background: 'transparent',
+            boxShadow: 'none',
+          },
+
+          '&::-webkit-scrollbar-track': {
+            borderRadius: 0,
+            background: 'transparent',
+            opacity: 0,
+            border: '0 none',
+            boxShadow: 'none',
+            height: 0,
+            width: 0,
+          },
+
+          '&::-webkit-scrollbar-thumb': {
+            borderRadius: 0,
+            background: theme.color.border,
+            boxShadow: 'none',
+          },
+          '&::-webkit-scrollbar-track-piece': {
+            display: 'none',
+            border: '0 none',
+            opacity: 0,
+            visibility: 'hidden',
+          },
+        }
+      : {
+          overflow: 'visible',
+          overflowX: 'visible',
+          overflowY: 'visible',
+        },
  ({ theme, border }) =>
    border
      ? {
@ -56,14 +90,28 @@ export const Bar = styled.div(
 );
 Bar.displayName = 'Bar';

+const BarInner = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  position: 'relative',
+  whiteSpace: 'nowrap',
+  height: 40,
+});
+
 export const FlexBar = ({ children, ...rest }) => {
  const [left, right] = Children.toArray(children);
  return (
-    <Bar {...rest}>
-      <Side flex left>
+    <Bar {...rest} title="bar">
+      <BarInner>
+        <Side left title="side left">
          {left}
        </Side>
-      {right ? <Side right>{right}</Side> : null}
+        {right ? (
+          <Side right title="side right">
+            {right}
+          </Side>
+        ) : null}
+      </BarInner>
    </Bar>
  );
 };
--- a/lib/components/src/bar/separator.js
+++ b/lib/components/src/bar/separator.js
@ -31,10 +31,10 @@ export const Separator = styled.span(
          '& + &': {
            display: 'none',
          },
-          '&:first-child': {
+          '&:first-of-type': {
            display: 'none',
          },
-          '&:last-child': {
+          '&:last-of-type': {
            display: 'none',
          },
        }
--- a/lib/components/src/form/snapshots/form.stories.storyshot
+++ b/lib/components/src/form/snapshots/form.stories.storyshot
@ -5,7 +5,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
  margin-top: 10px;
 }

-.emotion-6 > *:first-child {
+.emotion-6 > *:first-of-type {
  margin-top: 0;
 }

@ -278,7 +278,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
  margin-top: 10px;
 }

-.emotion-8 > *:first-child {
+.emotion-8 > *:first-of-type {
  margin-top: 0;
 }

@ -762,7 +762,7 @@ exports[`Storyshots Basics|Form/Input alignment 1`] = `
  margin-top: 10px;
 }

-.emotion-6 > *:first-child {
+.emotion-6 > *:first-of-type {
  margin-top: 0;
 }

@ -964,7 +964,7 @@ exports[`Storyshots Basics|Form/Input sizes 1`] = `
  margin-top: 10px;
 }

-.emotion-6 > *:first-child {
+.emotion-6 > *:first-of-type {
  margin-top: 0;
 }

@ -1168,7 +1168,7 @@ exports[`Storyshots Basics|Form/Input validations 1`] = `
  margin-top: 10px;
 }

-.emotion-8 > *:first-child {
+.emotion-8 > *:first-of-type {
  margin-top: 0;
 }

@ -1433,7 +1433,7 @@ exports[`Storyshots Basics|Form/Select sizes 1`] = `
  margin-top: 10px;
 }

-.emotion-6 > *:first-child {
+.emotion-6 > *:first-of-type {
  margin-top: 0;
 }

@ -1706,7 +1706,7 @@ exports[`Storyshots Basics|Form/Select validations 1`] = `
  margin-top: 10px;
 }

-.emotion-4 > *:first-child {
+.emotion-4 > *:first-of-type {
  margin-top: 0;
 }

@ -2063,7 +2063,7 @@ exports[`Storyshots Basics|Form/Textarea alignment 1`] = `
  margin-top: 10px;
 }

-.emotion-6 > *:first-child {
+.emotion-6 > *:first-of-type {
  margin-top: 0;
 }

@ -2274,7 +2274,7 @@ exports[`Storyshots Basics|Form/Textarea sizes 1`] = `
  margin-top: 10px;
 }

-.emotion-6 > *:first-child {
+.emotion-6 > *:first-of-type {
  margin-top: 0;
 }

@ -2484,7 +2484,7 @@ exports[`Storyshots Basics|Form/Textarea validations 1`] = `
  margin-top: 10px;
 }

-.emotion-8 > *:first-child {
+.emotion-8 > *:first-of-type {
  margin-top: 0;
 }

--- a/lib/components/src/spaced/Spaced.js
+++ b/lib/components/src/spaced/Spaced.js
@ -14,7 +14,7 @@ const Container = styled.div(
            marginLeft: col * theme.layoutMargin,
            verticalAlign: 'inherit',
          },
-          '& > *:first-child': {
+          '& > *:first-of-type': {
            marginLeft: 0,
          },
        }
@ -22,7 +22,7 @@ const Container = styled.div(
          '& > *': {
            marginTop: row * theme.layoutMargin,
          },
-          '& > *:first-child': {
+          '& > *:first-of-type': {
            marginTop: 0,
          },
        },
--- a/lib/components/src/spaced/Spaced.stories.js
+++ b/lib/components/src/spaced/Spaced.stories.js
@ -1,4 +1,4 @@
-import React, { div } from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { styled } from '@storybook/theming';

--- a/lib/components/src/spaced/snapshots/Spaced.stories.storyshot
+++ b/lib/components/src/spaced/snapshots/Spaced.stories.storyshot
@ -17,7 +17,7 @@ exports[`Storyshots Basics|Spaced col 1`] = `
  vertical-align: inherit;
 }

-.emotion-4 > *:first-child {
+.emotion-4 > *:first-of-type {
  margin-left: 0;
 }

@ -77,7 +77,7 @@ exports[`Storyshots Basics|Spaced col outer 1`] = `
  vertical-align: inherit;
 }

-.emotion-4 > *:first-child {
+.emotion-4 > *:first-of-type {
  margin-left: 0;
 }

@ -111,7 +111,7 @@ exports[`Storyshots Basics|Spaced row 1`] = `
  margin-top: 10px;
 }

-.emotion-4 > *:first-child {
+.emotion-4 > *:first-of-type {
  margin-top: 0;
 }

@ -170,7 +170,7 @@ exports[`Storyshots Basics|Spaced row multiply 1`] = `
  margin-top: 30px;
 }

-.emotion-4 > *:first-child {
+.emotion-4 > *:first-of-type {
  margin-top: 0;
 }

@ -219,7 +219,7 @@ exports[`Storyshots Basics|Spaced row outer 1`] = `
  margin-top: 10px;
 }

-.emotion-4 > *:first-child {
+.emotion-4 > *:first-of-type {
  margin-top: 0;
 }

--- a/lib/components/src/tabs/snapshots/tabs.stories.storyshot
+++ b/lib/components/src/tabs/snapshots/tabs.stories.storyshot
--- a/lib/components/src/tabs/tabs.js
+++ b/lib/components/src/tabs/tabs.js
@ -29,28 +29,13 @@ const Wrapper = styled.div(
        }
 );

-export const TabBar = styled.div(
-  {
-    whiteSpace: 'nowrap',
-    height: '100%',
+export const TabBar = styled.div({
+  overflow: 'hidden',

-    '&:first-child': {
+  '&:first-of-type': {
    marginLeft: 0,
  },
-  },
-  ({ scroll }) => ({
-    // super lame, hiding of scrollbar
-    paddingBottom: 50,
-    overflowX: scroll ? 'auto' : 'visisble',
-    overflowY: scroll ? 'hidden' : 'visisble',
-  }),
-  ({ flex }) =>
-    flex
-      ? {
-          flex: typeof flex === 'number' ? flex : 1,
-        }
-      : {}
-);
+});

 const Content = styled.div(
  {
@ -111,12 +96,12 @@ const childrenToList = (children, selected) =>
  });

 export const Tabs = React.memo(
-  ({ children, selected, actions, absolute, bordered, scroll, tools, id: htmlId }) => {
+  ({ children, selected, actions, absolute, bordered, tools, id: htmlId }) => {
    const list = childrenToList(children, selected);

    return list.length ? (
-      <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
-        <FlexBar border scroll={!scroll}>
+      <Wrapper absolute={absolute} bordered={bordered} id={htmlId} title="wrapper">
+        <FlexBar border title="flexbar">
          <TabBar role="tablist">
            {list.map(({ title, id, active }) => (
              <TabButton
@ -154,7 +139,6 @@ Tabs.propTypes = {
  }).isRequired,
  absolute: PropTypes.bool,
  bordered: PropTypes.bool,
-  scroll: PropTypes.bool,
 };
 Tabs.defaultProps = {
  id: null,
@ -163,7 +147,6 @@ Tabs.defaultProps = {
  selected: null,
  absolute: false,
  bordered: false,
-  scroll: true,
 };

 // eslint-disable-next-line react/no-multi-comp
--- a/lib/components/src/tooltip/TooltipMessage.js
+++ b/lib/components/src/tooltip/TooltipMessage.js
@ -2,9 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';

-// import Link from '../Link';
-// TODO reenable me
-const Link = styled.a``;
+import Link from '../typography/link/link';

 const Title = styled.div`
  font-weight: ${props => props.theme.typography.weight.black};
--- a/lib/components/src/tooltip/snapshots/TooltipMessage.stories.storyshot
+++ b/lib/components/src/tooltip/snapshots/TooltipMessage.stories.storyshot
@ -187,119 +187,52 @@ exports[`Storyshots basics/Tooltip/TooltipMessage with link 1`] = `
  cursor: pointer;
 }

-.emotion-8 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(0,0,0,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-1 {
-  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: rgba(0,0,0,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-.emotion-7 {
-  padding: 15px;
-  width: 280px;
-  box-sizing: border-box;
-}
-
-.emotion-4 {
-  color: #444444;
-  line-height: 18px;
-}
-
-.emotion-2 {
-  font-weight: 900;
-}
-
 .emotion-6 {
-  margin-top: 8px;
-  text-align: center;
-}
-
-.emotion-6 > * {
-  margin: 0 8px;
-  font-weight: 900;
-}
-
-<div
-  style="height:300px"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      Tooltip
-    </div>
-  </div>
-  <div
-    class="emotion-8"
-    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-7"
-    >
-      <div
-        class="emotion-4"
-      >
-        <div
-          class="emotion-2"
-        >
-          Lorem ipsum dolor sit
-        </div>
-        <span
-          class="emotion-3"
-        >
-          Amet consectatur vestibulum concet durum politu coret weirom
-        </span>
-      </div>
-      <div
-        class="emotion-6"
-      >
-        <a
-          class="emotion-3"
-          href="test"
-        >
-          Continue
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
-.emotion-0 {
  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-6 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-6:hover,
+.emotion-6:focus {
  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-6:hover svg path,
+.emotion-6:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-6:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-6:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-6 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
 }

 .emotion-9 {
@ -400,16 +333,191 @@ exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
        class="emotion-7"
      >
        <a
-          class="emotion-3"
+          class="emotion-6"
          href="test"
        >
-          Get more tips
-        </a>
-        <a
-          class="emotion-3"
-          href="test"
+          <span
+            class="emotion-5"
          >
-          Done
+            Continue
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.emotion-6 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-6 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-6:hover,
+.emotion-6:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-6:hover svg path,
+.emotion-6:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-6:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-6:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-6 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
+.emotion-11 {
+  display: inline-block;
+  z-index: 2147483647;
+  margin-bottom: 10px;
+  margin-top: 0px;
+  margin-left: 0px;
+  margin-right: 0px;
+  background: rgba(0,0,0,0.95);
+  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
+  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.emotion-1 {
+  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: rgba(0,0,0,0.95);
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
+.emotion-10 {
+  padding: 15px;
+  width: 280px;
+  box-sizing: border-box;
+}
+
+.emotion-4 {
+  color: #444444;
+  line-height: 18px;
+}
+
+.emotion-2 {
+  font-weight: 900;
+}
+
+.emotion-9 {
+  margin-top: 8px;
+  text-align: center;
+}
+
+.emotion-9 > * {
+  margin: 0 8px;
+  font-weight: 900;
+}
+
+<div
+  style="height:300px"
+>
+  <div
+    class="emotion-0"
+  >
+    <div>
+      Tooltip
+    </div>
+  </div>
+  <div
+    class="emotion-11"
+    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
+  >
+    <div
+      class="emotion-1"
+    />
+    <div
+      class="emotion-10"
+    >
+      <div
+        class="emotion-4"
+      >
+        <div
+          class="emotion-2"
+        >
+          Lorem ipsum dolor sit
+        </div>
+        <span
+          class="emotion-3"
+        >
+          Amet consectatur vestibulum concet durum politu coret weirom
+        </span>
+      </div>
+      <div
+        class="emotion-9"
+      >
+        <a
+          class="emotion-6"
+          href="test"
+        >
+          <span
+            class="emotion-5"
+          >
+            Get more tips
+          </span>
+        </a>
+        <a
+          class="emotion-6"
+          href="test"
+        >
+          <span
+            class="emotion-5"
+          >
+            Done
+          </span>
        </a>
      </div>
    </div>
--- a/lib/components/src/tooltip/snapshots/WithTooltip.stories.storyshot
+++ b/lib/components/src/tooltip/snapshots/WithTooltip.stories.storyshot
@ -159,7 +159,55 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
  cursor: pointer;
 }

-.emotion-10 {
+.emotion-8 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-8 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-8:hover,
+.emotion-8:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-8:hover svg path,
+.emotion-8:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-8:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-8:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-8 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
+.emotion-11 {
  display: inline-block;
  z-index: 2147483647;
  margin-bottom: 10px;
@ -194,7 +242,7 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
  border-right-color: transparent;
 }

-.emotion-9 {
+.emotion-10 {
  padding: 15px;
  width: 280px;
  box-sizing: border-box;
@ -209,21 +257,21 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
  font-weight: 900;
 }

-.emotion-8 {
+.emotion-9 {
  margin-top: 8px;
  text-align: center;
 }

-.emotion-8 > * {
+.emotion-9 > * {
  margin: 0 8px;
  font-weight: 900;
 }

-.emotion-12 {
+.emotion-13 {
  height: 300px;
 }

-.emotion-11 {
+.emotion-12 {
  width: 500px;
  height: 500px;
  overflow-y: scroll;
@ -243,10 +291,10 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
 }

 <div
-  class="emotion-12"
+  class="emotion-13"
 >
  <div
-    class="emotion-11"
+    class="emotion-12"
  >
    <div
      class="emotion-0"
@ -261,14 +309,14 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
      </div>
    </div>
    <div
-      class="emotion-10"
+      class="emotion-11"
      style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
    >
      <div
        class="emotion-3"
      />
      <div
-        class="emotion-9"
+        class="emotion-10"
      >
        <div
          class="emotion-6"
@ -285,12 +333,16 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
          </span>
        </div>
        <div
-          class="emotion-8"
+          class="emotion-9"
        >
          <a
-            class="emotion-5"
+            class="emotion-8"
+          >
+            <span
+              class="emotion-7"
            >
              Continue
+            </span>
          </a>
        </div>
      </div>
--- a/lib/components/src/typography/DocumentFormatting.js
+++ b/lib/components/src/typography/DocumentFormatting.js
@ -78,7 +78,7 @@ const Wrapper = styled.div(

    /* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */

-    body > *:first-child {
+    body > *:first-of-type {
      margin-top: 0 !important;
    }

@ -118,13 +118,13 @@ const Wrapper = styled.div(
      position: relative;
    }

-    h2:first-child,
-    h1:first-child,
-    h1:first-child + h2,
-    h3:first-child,
-    h4:first-child,
-    h5:first-child,
-    h6:first-child {
+    h2:first-of-type,
+    h1:first-of-type,
+    h1:first-of-type + h2,
+    h3:first-of-type,
+    h4:first-of-type,
+    h5:first-of-type,
+    h6:first-of-type {
      margin-top: 0;
      padding-top: 0;
    }
@ -186,35 +186,35 @@ const Wrapper = styled.div(
      padding: 0;
    }

-    body > h2:first-child {
+    body > h2:first-of-type {
      margin-top: 0;
      padding-top: 0;
    }

-    body > h1:first-child {
+    body > h1:first-of-type {
      margin-top: 0;
      padding-top: 0;
    }

-    body > h1:first-child + h2 {
+    body > h1:first-of-type + h2 {
      margin-top: 0;
      padding-top: 0;
    }

-    body > h3:first-child,
-    body > h4:first-child,
-    body > h5:first-child,
-    body > h6:first-child {
+    body > h3:first-of-type,
+    body > h4:first-of-type,
+    body > h5:first-of-type,
+    body > h6:first-of-type {
      margin-top: 0;
      padding-top: 0;
    }

-    a:first-child h1,
-    a:first-child h2,
-    a:first-child h3,
-    a:first-child h4,
-    a:first-child h5,
-    a:first-child h6 {
+    a:first-of-type h1,
+    a:first-of-type h2,
+    a:first-of-type h3,
+    a:first-of-type h4,
+    a:first-of-type h5,
+    a:first-of-type h6 {
      margin-top: 0;
      padding-top: 0;
    }
@ -237,8 +237,8 @@ const Wrapper = styled.div(
      padding-left: 30px;
    }

-    ul :first-child,
-    ol :first-child {
+    ul :first-of-type,
+    ol :first-of-type {
      margin-top: 0;
    }

@ -259,11 +259,11 @@ const Wrapper = styled.div(
      margin: 15px 0 5px;
    }

-    dl dt:first-child {
+    dl dt:first-of-type {
      padding: 0;
    }

-    dl dt > :first-child {
+    dl dt > :first-of-type {
      margin-top: 0;
    }

@ -276,7 +276,7 @@ const Wrapper = styled.div(
      padding: 0 15px;
    }

-    dl dd > :first-child {
+    dl dd > :first-of-type {
      margin-top: 0;
    }

@ -290,7 +290,7 @@ const Wrapper = styled.div(
      color: ${props.theme.color.dark};
    }

-    blockquote > :first-child {
+    blockquote > :first-of-type {
      margin-top: 0;
    }

@ -309,7 +309,7 @@ const Wrapper = styled.div(
      padding: 0;
    }

-    table tr:nth-child(2n) {
+    table tr:nth-of-type(2n) {
      background-color: ${props.theme.color.lighter};
    }

@ -328,8 +328,8 @@ const Wrapper = styled.div(
      padding: 6px 13px;
    }

-    table tr th :first-child,
-    table tr td :first-child {
+    table tr th :first-of-type,
+    table tr td :first-of-type {
      margin-top: 0;
    }

--- a/lib/components/src/typography/DocumentFormatting.stories.js
+++ b/lib/components/src/typography/DocumentFormatting.stories.js
@ -1,6 +1,8 @@
 import React from 'react';

+import Markdown from 'markdown-to-jsx';
 import DocumentFormatting from './DocumentFormatting';
+import markdownSample from './DocumentFormattingSample.md';

 export default {
  Component: DocumentFormatting,
@ -16,14 +18,15 @@ export default {
  ],
 };

-export const sampleDocument = () => (
-  // This is Markdown to HTML from https://markdown-it.github.io/
-  // Use by wrapping DOM in this component
+export const withMarkdown = () => (
  <DocumentFormatting>
-    <p>
-      Wrap your components in <code>DocumentFormatting</code> to get text styles for body content
-    </p>
-    <h1>h1 Heading 😎</h1>
+    <Markdown>{markdownSample}</Markdown>
+  </DocumentFormatting>
+);
+
+export const withDOM = () => (
+  <DocumentFormatting>
+    <h1>h1 Heading</h1>
    <h2>h2 Heading</h2>
    <h3>h3 Heading</h3>
    <h4>h4 Heading</h4>
@ -183,98 +186,5 @@ export const sampleDocument = () => (
        title="The Stormtroopocat"
      />
    </p>
-    <p>Like links, Images also have a footnote style syntax</p>
-    <p>
-      <img src="https://octodex.github.com/images/dojocat.jpg" alt="Alt text" title="The Dojocat" />
-    </p>
-    <p>With a reference later in the document defining the URL location:</p>
-    <h2>Plugins</h2>
-    <p>
-      The killer feature of <code>markdown-it</code> is very effective support of
-      <a href="https://www.npmjs.org/browse/keyword/markdown-it-plugin">syntax plugins</a>.
-    </p>
-    <h3>
-      <a href="https://github.com/markdown-it/markdown-it-emoji">Emojies</a>
-    </h3>
-    <blockquote>
-      <p>Classic markup: 😉 :crush: 😢 :tear: 😆 😋</p>
-      <p>Shortcuts (emoticons): 😃 😦 😎 😉</p>
-    </blockquote>
-    <p>
-      see{' '}
-      <a href="https://github.com/markdown-it/markdown-it-emoji#change-output">
-        how to change output
-      </a>{' '}
-      with twemoji.
-    </p>
-    <h3>
-      <a href="https://github.com/markdown-it/markdown-it-sub">Subscript</a> /{' '}
-      <a href="https://github.com/markdown-it/markdown-it-sup">Superscript</a>
-    </h3>
-    <ul>
-      <li>
-        19<sup>th</sup>
-      </li>
-      <li>
-        H<sub>2</sub>O
-      </li>
-    </ul>
-    <h3>
-      <a href="https://github.com/markdown-it/markdown-it-deflist">Definition lists</a>
-    </h3>
-    <dl>
-      <dt>Term 1</dt>
-      <dd>
-        <p>Definition 1 with lazy continuation.</p>
-      </dd>
-      <dt>
-        Term 2 with <em>inline markup</em>
-      </dt>
-      <dd>
-        <p>Definition 2</p>
-        <pre>
-          <code> some code, part of Definition 2</code>
-        </pre>
-        <p>Third paragraph of definition 2.</p>
-      </dd>
-    </dl>
-    <p>
-      <em>Compact style:</em>
-    </p>
-    <dl>
-      <dt>Term 1</dt>
-      <dd>Definition 1</dd>
-      <dt>Term 2</dt>
-      <dd>Definition 2a</dd>
-      <dd>Definition 2b</dd>
-    </dl>
-    <p>
-      <em>Compact style:</em>
-    </p>
-    <dl>
-      <dt>Term 1</dt>
-      <dd>Definition 1</dd>
-      <dt>Term 2</dt>
-      <dd>Definition 2a</dd>
-      <dd>Definition 2b</dd>
-    </dl>
-    <h3>
-      <a href="https://github.com/markdown-it/markdown-it-abbr">Abbreviations</a>
-    </h3>
-    <p>
-      This is <abbr title="Hyper Text Markup Language">HTML</abbr> abbreviation example.
-    </p>
-    <p>
-      It converts “<abbr title="Hyper Text Markup Language">HTML</abbr>”, but keep intact partial
-      entries like “xxxHTMLyyy” and so on.
-    </p>
-    <h3>
-      <a href="https://github.com/markdown-it/markdown-it-container">Custom containers</a>
-    </h3>
-    <div className="warning">
-      <p>
-        <em>here be dragons</em>
-      </p>
-    </div>
  </DocumentFormatting>
 );
--- a/lib/components/src/typography/DocumentFormattingSample.md
+++ b/lib/components/src/typography/DocumentFormattingSample.md
@ -0,0 +1,125 @@
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,, -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+## Emphasis
+
+**This is bold text**
+
+**This is bold text**
+
+_This is italic text_
+
+_This is italic text_
+
+~~Strikethrough~~
+
+## Blockquotes
+
+> Blockquotes can also be nested...
+>
+> > ...by using additional greater-than signs right next to each other...
+> >
+> > > ...or with spaces between arrows.
+
+## Lists
+
+Unordered
+
+- Create a list by starting a line with `+`, `-`, or `*`
+- Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    - Ac tristique libero volutpat at
+    * Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
+- Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+1) You can use sequential numbers...
+1) ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+## Code
+
+Inline `code`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+```js
+var foo = function(bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+## Tables
+
+| Option | Description                                                               |
+| ------ | ------------------------------------------------------------------------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default.    |
+| ext    | extension to be used for dest files.                                      |
+
+Right aligned columns
+
+| Option |                                                               Description |
+| -----: | ------------------------------------------------------------------------: |
+|   data | path to data files to supply the data that will be passed into templates. |
+| engine |    engine to be used for processing templates. Handlebars is the default. |
+|    ext |                                      extension to be used for dest files. |
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
+
+Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat')
--- 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-13 {
+.emotion-14 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
@ -14,6 +14,57 @@ exports[`Storyshots UI|Panel default 1`] = `
  flex-direction: column;
 }

+.emotion-12 {
+  color: #999999;
+  height: 40px;
+  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-scrollbar-width: slim;
+  -moz-scrollbar-width: slim;
+  -ms-scrollbar-width: slim;
+  scrollbar-width: slim;
+  -webkit-scrollbar-width: 3px;
+  -moz-scrollbar-width: 3px;
+  -ms-scrollbar-width: 3px;
+  scrollbar-width: 3px;
+  -webkit-scrollbar-color: transparent transparent;
+  -moz-scrollbar-color: transparent transparent;
+  -ms-scrollbar-color: transparent transparent;
+  scrollbar-color: transparent transparent;
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
+.emotion-12::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+  background: transparent;
+  box-shadow: none;
+}
+
+.emotion-12::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: transparent;
+  opacity: 0;
+  border: 0 none;
+  box-shadow: none;
+  height: 0;
+  width: 0;
+}
+
+.emotion-12::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: rgba(0,0,0,.1);
+  box-shadow: none;
+}
+
+.emotion-12::-webkit-scrollbar-track-piece {
+  display: none;
+  border: 0 none;
+  opacity: 0;
+  visibility: hidden;
+}
+
 .emotion-11 {
  display: -webkit-box;
  display: -webkit-flex;
@ -23,14 +74,9 @@ exports[`Storyshots UI|Panel default 1`] = `
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+  white-space: nowrap;
+  height: 40px;
 }

 .emotion-3 {
@ -38,9 +84,12 @@ exports[`Storyshots UI|Panel default 1`] = `
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }

 .emotion-3 > * {
@ -48,14 +97,10 @@ exports[`Storyshots UI|Panel default 1`] = `
 }

 .emotion-2 {
-  white-space: nowrap;
-  height: 100%;
-  padding-bottom: 50px;
-  overflow-x: visisble;
-  overflow-y: visisble;
+  overflow: hidden;
 }

-.emotion-2:first-child {
+.emotion-2:first-of-type {
  margin-left: 0;
 }

@ -154,6 +199,13 @@ exports[`Storyshots UI|Panel default 1`] = `
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 30px;
 }

 .emotion-10 > * {
@ -195,7 +247,7 @@ exports[`Storyshots UI|Panel default 1`] = `
  fill: currentColor;
 }

-.emotion-12 {
+.emotion-13 {
  display: block;
  position: relative;
  font-size: 13px;
@ -208,14 +260,20 @@ exports[`Storyshots UI|Panel default 1`] = `
 }

 <div
-  class="emotion-13"
+  class="emotion-14"
  id="storybook-panel-root"
+  title="wrapper"
+>
+  <div
+    class="emotion-12"
+    title="bar"
  >
    <div
      class="emotion-11"
    >
      <div
        class="emotion-3"
+        title="side left"
      >
        <div
          class="emotion-2"
@ -239,6 +297,7 @@ exports[`Storyshots UI|Panel default 1`] = `
      </div>
      <div
        class="emotion-10"
+        title="side right"
      >
        <button
          class="emotion-6"
@ -270,8 +329,9 @@ exports[`Storyshots UI|Panel default 1`] = `
        </button>
      </div>
    </div>
+  </div>
  <div
-    class="emotion-12"
+    class="emotion-13"
  >
    <div
      id="test2"
--- a/lib/ui/src/components/preview/snapshots/preview.stories.storyshot
+++ b/lib/ui/src/components/preview/snapshots/preview.stories.storyshot
@ -2,14 +2,31 @@

 exports[`Storyshots UI|Preview/Preview no tabs 1`] = `
 Array [
+  .emotion-22 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  white-space: nowrap;
+  height: 40px;
+}
+
 .emotion-13 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }

 .emotion-13 > * {
@ -21,6 +38,13 @@ Array [
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 30px;
 }

 .emotion-21 > * {
@ -62,22 +86,24 @@ Array [
  fill: currentColor;
 }

-.emotion-22 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
+.emotion-23 {
  color: #999999;
  height: 40px;
-  position: relative;
  overflow: auto;
  overflow-x: auto;
  overflow-y: hidden;
+  -webkit-scrollbar-width: slim;
+  -moz-scrollbar-width: slim;
+  -ms-scrollbar-width: slim;
+  scrollbar-width: slim;
+  -webkit-scrollbar-width: 3px;
+  -moz-scrollbar-width: 3px;
+  -ms-scrollbar-width: 3px;
+  scrollbar-width: 3px;
+  -webkit-scrollbar-color: transparent transparent;
+  -moz-scrollbar-color: transparent transparent;
+  -ms-scrollbar-color: transparent transparent;
+  scrollbar-color: transparent transparent;
  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
  position: absolute;
  left: 0;
@ -90,6 +116,36 @@ Array [
  tranform: translateY(0px);
 }

+.emotion-23::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+  background: transparent;
+  box-shadow: none;
+}
+
+.emotion-23::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: transparent;
+  opacity: 0;
+  border: 0 none;
+  box-shadow: none;
+  height: 0;
+  width: 0;
+}
+
+.emotion-23::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: rgba(0,0,0,.1);
+  box-shadow: none;
+}
+
+.emotion-23::-webkit-scrollbar-track-piece {
+  display: none;
+  border: 0 none;
+  opacity: 0;
+  visibility: hidden;
+}
+
 .emotion-9 {
  width: 1px;
  height: 24px;
@ -101,19 +157,24 @@ Array [
  display: none;
 }

-.emotion-9:first-child {
+.emotion-9:first-of-type {
  display: none;
 }

-.emotion-9:last-child {
+.emotion-9:last-of-type {
  display: none;
 }

+<div
+    class="emotion-23"
+    title="bar"
+  >
    <div
      class="emotion-22"
    >
      <div
        class="emotion-13"
+        title="side left"
      >
        <button
          class="emotion-2"
@ -177,6 +238,7 @@ Array [
      </div>
      <div
        class="emotion-21"
+        title="side right"
      >
        <button
          class="emotion-2"
@ -210,6 +272,7 @@ Array [
          </svg>
        </button>
      </div>
+    </div>
  </div>,
  .emotion-2 {
  position: absolute;
@ -284,14 +347,31 @@ Array [

 exports[`Storyshots UI|Preview/Preview with tabs 1`] = `
 Array [
+  .emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  white-space: nowrap;
+  height: 40px;
+}
+
 .emotion-19 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }

 .emotion-19 > * {
@ -299,14 +379,10 @@ Array [
 }

 .emotion-4 {
-  white-space: nowrap;
-  height: 100%;
-  padding-bottom: 50px;
-  overflow-x: visisble;
-  overflow-y: visisble;
+  overflow: hidden;
 }

-.emotion-4:first-child {
+.emotion-4:first-of-type {
  margin-left: 0;
 }

@ -405,6 +481,13 @@ Array [
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 30px;
 }

 .emotion-27 > * {
@ -446,22 +529,24 @@ Array [
  fill: currentColor;
 }

-.emotion-28 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
+.emotion-29 {
  color: #999999;
  height: 40px;
-  position: relative;
  overflow: auto;
  overflow-x: auto;
  overflow-y: hidden;
+  -webkit-scrollbar-width: slim;
+  -moz-scrollbar-width: slim;
+  -ms-scrollbar-width: slim;
+  scrollbar-width: slim;
+  -webkit-scrollbar-width: 3px;
+  -moz-scrollbar-width: 3px;
+  -ms-scrollbar-width: 3px;
+  scrollbar-width: 3px;
+  -webkit-scrollbar-color: transparent transparent;
+  -moz-scrollbar-color: transparent transparent;
+  -ms-scrollbar-color: transparent transparent;
+  scrollbar-color: transparent transparent;
  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
  position: absolute;
  left: 0;
@ -474,6 +559,36 @@ Array [
  tranform: translateY(0px);
 }

+.emotion-29::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+  background: transparent;
+  box-shadow: none;
+}
+
+.emotion-29::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: transparent;
+  opacity: 0;
+  border: 0 none;
+  box-shadow: none;
+  height: 0;
+  width: 0;
+}
+
+.emotion-29::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: rgba(0,0,0,.1);
+  box-shadow: none;
+}
+
+.emotion-29::-webkit-scrollbar-track-piece {
+  display: none;
+  border: 0 none;
+  opacity: 0;
+  visibility: hidden;
+}
+
 .emotion-5 {
  width: 1px;
  height: 24px;
@ -485,11 +600,11 @@ Array [
  display: none;
 }

-.emotion-5:first-child {
+.emotion-5:first-of-type {
  display: none;
 }

-.emotion-5:last-child {
+.emotion-5:last-of-type {
  display: none;
 }

@ -500,11 +615,16 @@ Array [
  display: inline-block;
 }

+<div
+    class="emotion-29"
+    title="bar"
+  >
    <div
      class="emotion-28"
    >
      <div
        class="emotion-19"
+        title="side left"
      >
        <div
          class="emotion-4"
@ -595,6 +715,7 @@ Array [
      </div>
      <div
        class="emotion-27"
+        title="side right"
      >
        <button
          class="emotion-8"
@ -628,6 +749,7 @@ Array [
          </svg>
        </button>
      </div>
+    </div>
  </div>,
  .emotion-2 {
  position: absolute;
--- a/lib/ui/src/components/sidebar/NotificationList.stories.js
+++ b/lib/ui/src/components/sidebar/NotificationList.stories.js
@ -20,5 +20,3 @@ all.storyData = { notifications };

 export const single = () => <NotificationList notifications={notifications.slice(0, 1)} />;
 single.storyData = { notifications: notifications.slice(0, 1) };
-
-export const empty = () => <NotificationList notifications={[]} />;
--- a/lib/ui/src/components/sidebar/SidebarHeading.js
+++ b/lib/ui/src/components/sidebar/SidebarHeading.js
@ -35,6 +35,7 @@ const LogoLink = styled.a(
 const MenuButton = styled(Button)(props => ({
  position: 'relative',
  overflow: 'visible',
+  padding: 7,

  ...(props.highlighted && {
    '&:after': {
--- a/lib/ui/src/settings/snapshots/about.stories.storyshot
+++ b/lib/ui/src/settings/snapshots/about.stories.storyshot
--- a/lib/ui/src/settings/about.js
+++ b/lib/ui/src/settings/about.js
@ -65,7 +65,6 @@ const UpdateMessage = styled.div(

  ({ theme }) => ({
    fontWeight: theme.typography.weight.bold,
-    height: 40,
    padding: '10px 20px',
    marginBottom: 24,
    borderRadius: theme.borderRadius,
--- a/yarn.lock
+++ b/yarn.lock
@ -12,7 +12,6 @@
 "@angular-devkit/architect@0.13.0":
  version "0.13.0"
  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.13.0.tgz#47a9c76ca4c01c357a8670810f29a45e906447cd"
-  integrity sha512-oDBrWlfKh/0t2ag4T8gz9xzPMItxfctinlsHxhw7dPQ+etq1mIcWgQkiKiDrz4l46YiGipBRlC55j+6f37omAA==
  dependencies:
    "@angular-devkit/core" "7.3.0"
    rxjs "6.3.3"
@ -100,7 +99,6 @@
 "@angular-devkit/core@7.3.0":
  version "7.3.0"
  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-7.3.0.tgz#fc272e39b4c307833e9a7db77007418a246f5410"
-  integrity sha512-b0qtAUpgqLpWY8W6vWRv1aj6bXkZCP1rvywl8i8TbGMY67CWRcy5J3fNAMmjiZS+LJixFlIXYf4iOydglyJMfg==
  dependencies:
    ajv "6.7.0"
    chokidar "2.0.4"
@ -111,7 +109,6 @@
 "@angular-devkit/schematics@7.3.0":
  version "7.3.0"
  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-7.3.0.tgz#112c1f59ff2778157aff6fb7484a6c132d4156ac"
-  integrity sha512-glOduymftH0LmJhITWgWUJK8QCDUltgTZ943/OyArIvLXTLL/8zCb+G6xL+3k33EQjwJicgQ3WIjonJmeTK/Ww==
  dependencies:
    "@angular-devkit/core" "7.3.0"
    rxjs "6.3.3"
@ -119,7 +116,6 @@
 "@angular/cli@^7.3.0":
  version "7.3.0"
  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-7.3.0.tgz#8f9301aa7a942385258b35bf86806267073fce17"
-  integrity sha512-6+NoHsW1MYG7GBHUg71zaWIFeIRps/SVksCmRFCpW0RXqErCQmzf0GZuDTZZ2Yo4RzU01150sVp1R8wEvEZfZQ==
  dependencies:
    "@angular-devkit/architect" "0.13.0"
    "@angular-devkit/core" "7.3.0"
@ -160,7 +156,6 @@
 "@angular/compiler@^7.2.3":
  version "7.2.3"
  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-7.2.3.tgz#ffa89911750342c5e4f0359d6e9402479dd6e7bd"
-  integrity sha512-UM6n4MyZkR5+VVjlwhLH8IfqdWBkdFcF5at4ckJXOJ/gkIUq97irbis9pGj1b0TO7MAl8uhF4b68xe5lk8b49g==
  dependencies:
    tslib "^1.9.0"

@ -501,7 +496,6 @@
 "@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.3.1", "@babel/plugin-proposal-object-rest-spread@^7.3.2":
  version "7.3.2"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.2.tgz#6d1859882d4d778578e41f82cc5d7bf3d5daf6c1"
-  integrity sha512-DjeMS+J2+lpANkYLLO+m6GjoTMygYglKmRe6cDTbFv3L9i6mmiE8fe6B8MtCSLZpVXscD5kn7s6SgtHrDoBWoA==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
@ -1045,7 +1039,6 @@
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0":
  version "7.3.1"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.1.tgz#574b03e8e8a9898eaf4a872a92ea20b7846f6f2a"
-  integrity sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==
  dependencies:
    regenerator-runtime "^0.12.0"

@ -1103,7 +1096,6 @@
 "@ember/test-helpers@^1.3.1":
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-1.3.1.tgz#575b30f4b74c888ea8510c6adffb855876c93a3d"
-  integrity sha512-j/o5ouq/i64PHkpkcq5Ji26cqxezHhMFRIiehdBmJQo/dVI3gAEsJJh0+qeDD8MrT8WhFT9oqLcicfjEWDEvaA==
  dependencies:
    broccoli-debug "^0.6.5"
    broccoli-funnel "^2.0.1"
@ -1174,7 +1166,6 @@
 "@emotion/serialize@^0.11.3", "@emotion/serialize@^0.11.4":
  version "0.11.4"
  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.4.tgz#691e615184a23cd3b9ae9b1eaa79eb8798e52379"
-  integrity sha512-JKmn+Qnc8f6OZKSHmNq1RpO27raIi6Kj0uqBaSOUVMW6NI0M3wLpV4pK5hZO4I+1WuCC39hOBPgQ/GcgoHbDeg==
  dependencies:
    "@emotion/hash" "0.7.1"
    "@emotion/memoize" "0.7.1"
@ -1843,7 +1834,6 @@
 "@ngrx/store@^7.2.0":
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-7.2.0.tgz#b22200fd48b721afe0e5cc9eec92f3dc31c078b1"
-  integrity sha512-E9c0cDot0HeE0mXyeqw18SwmJ2+eKnA5mMMfwvoskpMInCYGI2pq1i6/lCVQ2wrEHSH+KvObK4PQbepcA9vP+w==

 "@ngtools/webpack@7.1.4":
  version "7.1.4"
@ -1871,7 +1861,6 @@
 "@octokit/request@2.3.0":
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-2.3.0.tgz#da2672308bcf0b9376ef66f51bddbe5eb87cc00a"
-  integrity sha512-5YRqYNZOAaL7+nt7w3Scp6Sz4P2g7wKFP9npx1xdExMomk8/M/ICXVLYVam2wzxeY0cIc6wcKpjC5KI4jiNbGw==
  dependencies:
    "@octokit/endpoint" "^3.1.1"
    is-plain-object "^2.0.4"
@ -1892,7 +1881,6 @@
 "@octokit/rest@^16.14.1":
  version "16.15.0"
  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.15.0.tgz#648a88d5de055bcf38976709c5b2bdf1227b926f"
-  integrity sha512-Un+e7rgh38RtPOTe453pT/KPM/p2KZICimBmuZCd2wEo8PacDa4h6RqTPZs+f2DPazTTqdM7QU4LKlUjgiBwWw==
  dependencies:
    "@octokit/request" "2.3.0"
    before-after-hook "^1.2.0"
@ -1927,7 +1915,6 @@
 "@schematics/angular@7.3.0":
  version "7.3.0"
  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-7.3.0.tgz#0ed0af8250f767ceb42a3f658888697d95381569"
-  integrity sha512-fOjP/3Rz+Nqrgc+YVaiN88uhPX0FZgUjmMKgMp06lc3xmoc1ScGxoz8AF1fV50Zkvh0Etykzy1LTUczzEUJQqw==
  dependencies:
    "@angular-devkit/core" "7.3.0"
    "@angular-devkit/schematics" "7.3.0"
@ -1936,7 +1923,6 @@
 "@schematics/update@0.13.0":
  version "0.13.0"
  resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.13.0.tgz#d8f7336da8d80d2fd9cecc3d0c97f31295fedb52"
-  integrity sha512-HGpZdIL/0w46UyaxpnIAg6SBwzKfaRixHIEihmgJUqA0DG8GZUixRPr1L0YIWC1EZ81cQ+yWL85XhkKBYR+wQg==
  dependencies:
    "@angular-devkit/core" "7.3.0"
    "@angular-devkit/schematics" "7.3.0"
@ -1950,7 +1936,6 @@
 "@sheerun/mutationobserver-shim@^0.3.2":
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
-  integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==

 "@storybook/addons@5.0.0-beta.4":
  version "5.0.0-beta.4"
@ -2494,7 +2479,6 @@
 "@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"
@ -3392,7 +3376,6 @@ ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
 ast-types@0.11.3:
  version "0.11.3"
  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.3.tgz#c20757fe72ee71278ea0ff3d87e5c2ca30d9edf8"
-  integrity sha512-XA5o5dsNw8MhyW0Q7MWXJWc4oOzZKbdsEJq45h7c8q/d9DwWZ5F2ugUc1PuMLPGsUnphCt/cNDHu8JeBbxf1qA==

 ast-types@0.11.7:
  version "0.11.7"
@ -3815,7 +3798,6 @@ babel-plugin-ember-modules-api-polyfill@^2.6.0:
 babel-plugin-emotion@^10.0.6, babel-plugin-emotion@^10.0.7:
  version "10.0.7"
  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.7.tgz#3634ada6dee762140f27db07387feaec8d2cb619"
-  integrity sha512-5PdLJYme3tFN97M3tBbEUS/rJVkS9EMbo7rs7/7BAUEUVMWehm1kb5DEbp16Rs+UsI3rTXRan1iqpL022T8XxA==
  dependencies:
    "@babel/helper-module-imports" "^7.0.0"
    "@emotion/hash" "0.7.1"
@ -3980,7 +3962,6 @@ babel-plugin-named-asset-import@^0.3.0:
 babel-plugin-react-docgen@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-2.0.2.tgz#3307e27414c370365710576b7fadbcaf8984d862"
-  integrity sha512-fFendfUUU2KqqE1ki2NyQoZm4uHPoEWPUgBZiPBiowcPZos+4q+chdQh0nlwY5hxs08AMHSH4Pp98RQL0VFS/g==
  dependencies:
    lodash "^4.17.10"
    react-docgen "^3.0.0"
@ -5652,7 +5633,6 @@ case-sensitive-paths-webpack-plugin@2.1.2:
 case-sensitive-paths-webpack-plugin@^2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz#3371ef6365ef9c25fa4b81c16ace0e9c7dc58c3e"
-  integrity sha512-u5ElzokS8A1pm9vM3/iDgTcI3xqHxuCao94Oz8etI3cf0Tio0p8izkDYbTIn09uP3yUUr6+veaE6IkjnTYS46g==

 caseless@~0.12.0:
  version "0.12.0"
@ -5699,7 +5679,6 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3
 change-emitter@^0.1.2:
  version "0.1.6"
  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
-  integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=

 char-props@^0.1.5, char-props@~0.1.5:
  version "0.1.5"
@ -7320,7 +7299,6 @@ dom-serializer@0, dom-serializer@~0.1.0:
 dom-testing-library@^3.13.1:
  version "3.16.5"
  resolved "https://registry.yarnpkg.com/dom-testing-library/-/dom-testing-library-3.16.5.tgz#8c71f127c6b4ee48115660798040291b59dfc894"
-  integrity sha512-t3OaTcDdsAqtAZNeZ13KnOJmt+2HaDJqYWyf0iBRzbG6GwrNtpF0122Ygu/qkerIwcnHMX1ihwZVx/DhaLpmTw==
  dependencies:
    "@babel/runtime" "^7.1.5"
    "@sheerun/mutationobserver-shim" "^0.3.2"
@ -7561,7 +7539,6 @@ ember-cli-babel@^6.12.0, ember-cli-babel@^6.16.0, ember-cli-babel@^6.8.1:
 ember-cli-babel@^7.0.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.1.3, ember-cli-babel@^7.4.0, ember-cli-babel@^7.4.1:
  version "7.4.1"
  resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.4.1.tgz#9892f5883f5a6b1f0f86fb1331fc491338f372ad"
-  integrity sha512-h6qZKHyULm5SYhvjNOeXvLl3kHaBdh37g5QqTTiC/vMiWP/xnyNp2bMoq52qq+SLm/bE8+5UcVTKjrNl0+IqXA==
  dependencies:
    "@babel/core" "^7.0.0"
    "@babel/plugin-transform-modules-amd" "^7.0.0"
@ -7823,7 +7800,6 @@ ember-router-generator@^1.2.3:
 ember-source@~3.7.3:
  version "3.7.3"
  resolved "https://registry.yarnpkg.com/ember-source/-/ember-source-3.7.3.tgz#ae66f5c37d928908d2cc6891dab46d24a8168678"
-  integrity sha512-K+jUCR0Q4ef71bBJnq380e0TgsE1KSDP430n3c/vA07HMnvg3BCakpy21TUJuGxpH07Jeuf7HNehI0ZHyIiW/w==
  dependencies:
    broccoli-funnel "^2.0.1"
    broccoli-merge-trees "^3.0.2"
@ -7950,7 +7926,6 @@ env-ci@^2.1.0:
 enzyme-adapter-react-16@^1.9.1:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.9.1.tgz#6d49a3a31c3a0fccf527610f31b837e0f307128a"
-  integrity sha512-Egzogv1y77DUxdnq/CyHxLHaNxmSSKDDSDNNB/EiAXCZVFXdFibaNy2uUuRQ1n24T2m6KH/1Rw16XDRq+1yVEg==
  dependencies:
    enzyme-adapter-utils "^1.10.0"
    function.prototype.name "^1.1.0"
@ -8202,7 +8177,6 @@ eslint-plugin-flowtype@2.50.1:
 eslint-plugin-html@^5.0.3:
  version "5.0.3"
  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-5.0.3.tgz#3db133995e49a73596f6a473c16a1b83634deffd"
-  integrity sha512-46ruAnp3jVQP/5Bi5eEIOooscjUTPFU3vxCxHe/OG6ORdM7Xv5c25/Nz9fAbHklzCpiXuIiH4/mV/XBkm7MINw==
  dependencies:
    htmlparser2 "^3.10.0"

@ -8224,7 +8198,6 @@ eslint-plugin-import@2.14.0:
 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"
@ -8240,7 +8213,6 @@ eslint-plugin-import@^2.16.0:
 eslint-plugin-jest@^22.2.2:
  version "22.2.2"
  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.2.2.tgz#2a80d70a20c27dfb1503a6f32cdcb647fe5476df"
-  integrity sha512-hnWgh9o39VJfz6lJEyQJdTW7dN2yynlGkmPOlU/oMHh+d7WVMsJP1GeDTB520VCDljEdKExCwD5IBpQIUl4mJg==

 eslint-plugin-json@^1.2.1:
  version "1.3.2"
@ -9409,7 +9381,6 @@ fuse.js@^3.3.1:
 fuzzy-search@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/fuzzy-search/-/fuzzy-search-3.0.1.tgz#14a4964508a9607d6e9a88818e7ff634108260b6"
-  integrity sha512-rjUvzdsMlOyarm0oD5k6zVQwgvt4Tb5Xe3YdIGU+Vogw54+ueAGPUTMU2B9jfPQEie5cD11i/S9J9d+MNBSQ3Q==

 g-status@^2.0.2:
  version "2.0.2"
@ -9831,7 +9802,6 @@ graphql-request@^1.5.0:
 graphql@^0.13.2, graphql@^14.1.1:
  version "0.13.2"
  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
-  integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==
  dependencies:
    iterall "^1.2.1"

@ -9909,7 +9879,6 @@ handle-thing@^2.0.0:
 handlebars@^4.0.1, handlebars@^4.0.11, handlebars@^4.0.2, handlebars@^4.0.3, handlebars@^4.0.4:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.0.tgz#0d6a6f34ff1f63cecec8423aa4169827bf787c3a"
-  integrity sha512-l2jRuU1NAWK6AW5qqcTATWQJvNPEwkM7NEKSiv/gqOsoSQbVoWyqVEY5GS+XPQ88zLNmqASRpzfdm8d79hJS+w==
  dependencies:
    async "^2.5.0"
    optimist "^0.6.1"
@ -11304,7 +11273,6 @@ istextorbinary@2.1.0:
 iterall@^1.2.1:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
-  integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==

 jasmine-core@~2.8.0:
  version "2.8.0"
@ -11470,7 +11438,6 @@ jest-each@^24.0.0:
 jest-emotion@^10.0.7:
  version "10.0.7"
  resolved "https://registry.yarnpkg.com/jest-emotion/-/jest-emotion-10.0.7.tgz#c882f6e201cf62c025245f863b8e5ff473d2cef0"
-  integrity sha512-uR6KIw/jnlqVOFBHpeRMirpnWggnUluqzKYSmlp/TpoNaRxSYTGj9+RVrS7kngtyFyn0F0rOJ73CaPRuxL5ebg==
  dependencies:
    "@types/jest" "^23.0.2"
    chalk "^2.4.1"
@ -11580,20 +11547,21 @@ jest-jasmine2@^23.6.0:
    pretty-format "^23.6.0"

 jest-jasmine2@^24.0.0:
-  version "24.0.0"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.0.0.tgz#7d87be9d8b32d34ac5980ad646b7ae7f99e33a19"
+  version "24.1.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.1.0.tgz#8377324b967037c440f0a549ee0bbd9912055db6"
  dependencies:
    "@babel/traverse" "^7.1.0"
    chalk "^2.0.1"
    co "^4.6.0"
-    expect "^24.0.0"
+    expect "^24.1.0"
    is-generator-fn "^2.0.0"
    jest-each "^24.0.0"
    jest-matcher-utils "^24.0.0"
    jest-message-util "^24.0.0"
-    jest-snapshot "^24.0.0"
+    jest-snapshot "^24.1.0"
    jest-util "^24.0.0"
    pretty-format "^24.0.0"
+    throat "^4.0.0"

 jest-leak-detector@^23.6.0:
  version "23.6.0"
@ -11755,16 +11723,16 @@ jest-serializer@^23.0.1:
  version "23.0.1"
  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-23.0.1.tgz#a3776aeb311e90fe83fab9e533e85102bd164165"

-jest-snapshot@>=20.0.3, jest-snapshot@^24.0.0:
-  version "24.0.0"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.0.0.tgz#fb447a753a3271660b3d89d068698014eb14c414"
+jest-snapshot@>=20.0.3:
+  version "24.1.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.1.0.tgz#85e22f810357aa5994ab61f236617dc2205f2f5b"
  dependencies:
    "@babel/types" "^7.0.0"
    chalk "^2.0.1"
    jest-diff "^24.0.0"
    jest-matcher-utils "^24.0.0"
    jest-message-util "^24.0.0"
-    jest-resolve "^24.0.0"
+    jest-resolve "^24.1.0"
    mkdirp "^0.5.1"
    natural-compare "^1.4.0"
    pretty-format "^24.0.0"
@ -11785,6 +11753,21 @@ jest-snapshot@^23.6.0:
    pretty-format "^23.6.0"
    semver "^5.5.0"

+jest-snapshot@^24.0.0:
+  version "24.0.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.0.0.tgz#fb447a753a3271660b3d89d068698014eb14c414"
+  dependencies:
+    "@babel/types" "^7.0.0"
+    chalk "^2.0.1"
+    jest-diff "^24.0.0"
+    jest-matcher-utils "^24.0.0"
+    jest-message-util "^24.0.0"
+    jest-resolve "^24.0.0"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^24.0.0"
+    semver "^5.5.0"
+
 jest-specific-snapshot@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/jest-specific-snapshot/-/jest-specific-snapshot-1.0.0.tgz#157c79e2534a6fea820fd475f5d17740c8f90833"
@ -12600,7 +12583,6 @@ linkify-it@^2.0.0:
 lint-staged@^8.1.3:
  version "8.1.3"
  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-8.1.3.tgz#bb069db5466c0fe16710216e633a84f2b362fa60"
-  integrity sha512-6TGkikL1B+6mIOuSNq2TV6oP21IhPMnV8q0cf9oYZ296ArTVNcbFh1l1pfVOHHbBIYLlziWNsQ2q45/ffmJ4AA==
  dependencies:
    "@iamstarkov/listr-update-renderer" "0.4.1"
    chalk "^2.3.1"
@ -12675,7 +12657,6 @@ listr@^0.14.2:
 lit-html@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.0.0.tgz#3dc3781a8ca68a9b5c2ff2a61e263662b9b2267b"
-  integrity sha512-oeWlpLmBW3gFl7979Wol2LKITpmKTUFNn7PnFbh6YNynF61W74l6x5WhwItAwPRSATpexaX1egNnRzlN4GOtfQ==

 livereload-js@^2.3.0:
  version "2.4.0"
@ -13432,7 +13413,6 @@ markdown-table@^1.1.0:
 markdown-to-jsx@^6.9.1:
  version "6.9.1"
  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.9.1.tgz#a5771d468727e282f54a15ff447bcd79fc2e619f"
-  integrity sha512-SAUZWD//gjhP3Sfy2Q7EqhNOm7YYKTfQKuiuyr8FO9fa0EPkrXSDDE3u28A5SQx6j4BJ9Zs9Va77GBMtIcgAWw==
  dependencies:
    prop-types "^15.6.2"
    unquote "^1.1.0"
@ -15201,7 +15181,6 @@ pnp-webpack-plugin@1.1.0:
 polished@^2.3.3:
  version "2.3.3"
  resolved "https://registry.yarnpkg.com/polished/-/polished-2.3.3.tgz#bdbaba962ba8271b0e11aa287f2befd4c87be99a"
-  integrity sha512-59V4fDbdxtH4I1m9TWxFsoGJbC8nnOpUYo5uFmvMfKp9Qh+6suo4VMUle1TGIIUZIGxfkW+Rs485zPk0wcwR2Q==
  dependencies:
    "@babel/runtime" "^7.2.0"

@ -15875,7 +15854,6 @@ prettier@1.16.0:
 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"
@ -16128,7 +16106,6 @@ punycode@^1.2.4, punycode@^1.3.2, punycode@^1.4.1:
 puppeteer@^1.12.0:
  version "1.12.0"
  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.12.0.tgz#325b97f42aa6cd66ae4d3d27839278e1f0b8e0e5"
-  integrity sha512-+riSxJFPQpwGZvNHFeB7vEefwfdHNSstQmjdzUKZxPp/Qt1Dw9iKRAewl8X0ntdXZz4UR4jODLiM03Iw9HDnyw==
  dependencies:
    debug "^4.1.0"
    extract-zip "^1.6.6"
@ -16442,7 +16419,6 @@ react-docgen-typescript@^1.9.0:
 react-docgen@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0.tgz#79c6e1b1870480c3c2bc1a65bede0577a11c38cd"
-  integrity sha512-2UseoLWabFNXuk1Foz4VDPSIAkxz+1Hmmq4qijzUmYHDq0ZSloKDLXtGLpQRcAi/M76hRpPtH1rV4BI5jNAOnQ==
  dependencies:
    "@babel/parser" "^7.1.3"
    "@babel/runtime" "^7.0.0"
@ -16455,7 +16431,6 @@ react-docgen@^3.0.0:
 react-dom@^16.8.1:
  version "16.8.1"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
-  integrity sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
@ -16509,7 +16484,6 @@ react-helmet-async@^0.2.0:
 react-hotkeys@2.0.0-pre4:
  version "2.0.0-pre4"
  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0-pre4.tgz#a1c248a51bdba4282c36bf3204f80d58abc73333"
-  integrity sha512-oa+UncSWyOwMK3GExt+oELXaR7T3ItgcMolsupQFdKvwkEhVAluJd5rYczsRSQpQlVkdNoHG46De2NUeuS+88Q==
  dependencies:
    prop-types "^15.6.1"

@ -16530,7 +16504,6 @@ react-inspector@^2.3.0, react-inspector@^2.3.1:
 react-is@^16.7.0, react-is@^16.8.1:
  version "16.8.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb"
-  integrity sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA==

 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
  version "3.0.4"
@ -16664,7 +16637,6 @@ react-test-renderer@^16.0.0-0:
 react-test-renderer@^16.8.1:
  version "16.8.1"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.1.tgz#72845ad9269be526126e97853311982f781767be"
-  integrity sha512-Bd21TN3+YVl6GZwav6O0T6m5UwGfOj+2+xZH5VH93ToD6M5uclN/c+R1DGX49ueG413KZPUx7Kw3sOYz2aJgfg==
  dependencies:
    object-assign "^4.1.1"
    prop-types "^15.6.2"
@ -16674,7 +16646,6 @@ react-test-renderer@^16.8.1:
 react-testing-library@^5.4.4:
  version "5.4.4"
  resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-5.4.4.tgz#3fa787999492be94b228e4540a7211556bf4fd94"
-  integrity sha512-/TiERZ+URSNhZQfjrUXh0VLsiLSmhqP1WP+2e2wWqWqrRIWpcAxrfuBxzlT75LYMDNmicEikaXJqRDi/pqCEDg==
  dependencies:
    dom-testing-library "^3.13.1"

@ -16697,7 +16668,6 @@ react-transition-group@^2.2.1:
 react@^16.8.1:
  version "16.8.1"
  resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
-  integrity sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
@ -16912,7 +16882,6 @@ recast@^0.11.3, recast@~0.11.12:
 recast@^0.14.7:
  version "0.14.7"
  resolved "https://registry.yarnpkg.com/recast/-/recast-0.14.7.tgz#4f1497c2b5826d42a66e8e3c9d80c512983ff61d"
-  integrity sha512-/nwm9pkrcWagN40JeJhkPaRxiHXBRkXyRh/hgU088Z/v+qCy+zIHHY6bC6o7NaKAxPqtE6nD8zBH1LfU0/Wx6A==
  dependencies:
    ast-types "0.11.3"
    esprima "~4.0.0"
@ -16937,7 +16906,6 @@ rechoir@^0.6.2:
 recompose@^0.30.0:
  version "0.30.0"
  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
-  integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==
  dependencies:
    "@babel/runtime" "^7.0.0"
    change-emitter "^0.1.2"
@ -17843,7 +17811,6 @@ scheduler@^0.12.0:
 scheduler@^0.13.1:
  version "0.13.1"
  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.1.tgz#1a217df1bfaabaf4f1b92a9127d5d732d85a9591"
-  integrity sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
@ -18629,7 +18596,6 @@ stealthy-require@^1.1.0:
 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"
@ -19165,7 +19131,20 @@ terser-webpack-plugin@1.1.0:
    webpack-sources "^1.1.0"
    worker-farm "^1.5.2"

-terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.1:
+terser-webpack-plugin@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.2.tgz#9bff3a891ad614855a7dde0d707f7db5a927e3d9"
+  dependencies:
+    cacache "^11.0.2"
+    find-cache-dir "^2.0.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    terser "^3.16.1"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
+terser-webpack-plugin@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.1.tgz#7545da9ae5f4f9ae6a0ac961eb46f5e7c845cc26"
  dependencies:
@ -19179,12 +19158,12 @@ terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.1:
    worker-farm "^1.5.2"

 terser@^3.7.5, terser@^3.8.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-3.14.1.tgz#cc4764014af570bc79c79742358bd46926018a32"
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.16.1.tgz#5b0dd4fa1ffd0b0b43c2493b2c364fd179160493"
  dependencies:
    commander "~2.17.1"
    source-map "~0.6.1"
-    source-map-support "~0.5.6"
+    source-map-support "~0.5.9"

 test-exclude@^4.2.1:
  version "4.2.3"
@ -19725,7 +19704,6 @@ typescript@3.2.2:
 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"
@ -20293,7 +20271,6 @@ vue-style-loader@^4.1.0:
 vue-template-compiler@^2.6.3:
  version "2.6.3"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.3.tgz#fe76b7755b038889f5e887895745f0d2bce3f778"
-  integrity sha512-SQ3lJk7fwquz8fGac7MwvP9cEBZntokTWITaDrLC0zmyBKjcOfJtWZkMsv+2uSUBDD8kwz8Bsad9xmBWaNULhg==
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"
@ -20305,7 +20282,6 @@ vue-template-es2015-compiler@^1.6.0:
 vue@^2.6.3:
  version "2.6.3"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.3.tgz#180017ba25b94a9864b2921db8644e1062ea82a0"
-  integrity sha512-yftjtahz4UTAtOlXXuw7UaYD86fWrMDAAzqTdqJJx2FIBqcPmBN6kPBHiBJFGaQELVblb5ijbFMXsx0i0F7q3g==

 vuex@^3.1.0:
  version "3.1.0"
@ -20328,7 +20304,6 @@ w3c-xmlserializer@^1.0.1:
 wait-for-expect@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.1.0.tgz#6607375c3f79d32add35cd2c87ce13f351a3d453"
-  integrity sha512-vQDokqxyMyknfX3luCDn16bSaRcOyH6gGuUXMIbxBLeTo6nWuEWYqMTT9a+44FmW8c2m6TRWBdNvBBjA1hwEKg==

 walk-sync@^0.2.5:
  version "0.2.7"
@ -20444,7 +20419,6 @@ webidl-conversions@^4.0.2:
 webpack-cli@^3.2.3:
  version "3.2.3"
  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.2.3.tgz#13653549adfd8ccd920ad7be1ef868bacc22e346"
-  integrity sha512-Ik3SjV6uJtWIAN5jp5ZuBMWEAaP5E4V78XJ2nI+paFPh8v4HPSwo/myN0r29Xc/6ZKnd2IdrAlpSgNOu2CDQ6Q==
  dependencies:
    chalk "^2.4.1"
    cross-spawn "^6.0.5"