feat(ui-toolkit): tooltip and popover

packages/cloudapi-gql/README.md

@@ -8,10 +8,10 @@ Server that exposes [CloudApi](https://apidocs.joyent.com/cloudapi/) through
 
 ## Table of Contents
 
-- [Install](#install)
+* [Install](#install)
-- [Usage](#usage)
+* [Usage](#usage)
-- [Todo](#todo)
+* [Todo](#todo)
-- [License](#license)
+* [License](#license)
 
 ## Install
 
@@ -25,10 +25,10 @@ yarn add cloudapi-gql
 yarn run start
 ```
 
-- [GraphiQL](http://0.0.0.0:4000/graphiql)
+* [GraphiQL](http://0.0.0.0:4000/graphiql)
-- [Graphidoc](http://0.0.0.0:4000/doc)
+* [Graphidoc](http://0.0.0.0:4000/doc)
-- [Voyager](http://0.0.0.0:4000/voyager)
+* [Voyager](http://0.0.0.0:4000/voyager)
-- [Playground](http://0.0.0.0:4000/playground)
+* [Playground](http://0.0.0.0:4000/playground)
 
 ![](https://cldup.com/StGgfIbD3N.png) ![](https://cldup.com/fhpul_AJ13.png)
 ![](https://cldup.com/A-VwSbvWBe.png) ![](https://cldup.com/08P360Skhx.png)
@@ -37,16 +37,16 @@ yarn run start
 yarn run faker
 ```
 
-- [GraphQL Faker Interactive Editor](http://0.0.0.0:9002/editor)
+* [GraphQL Faker Interactive Editor](http://0.0.0.0:9002/editor)
-- [GraphQL Faker API](http://0.0.0.0:9002/graphql)
+* [GraphQL Faker API](http://0.0.0.0:9002/graphql)
 
 ![](https://cldup.com/VWadVMorQ0.png)
 
 ## Todo
 
-- [ ] Finish missing connections, transforms, and mutations
+* [ ] Finish missing connections, transforms, and mutations
-- [ ] remove node-triton dependency
+* [ ] remove node-triton dependency
-- [ ] support multiple users on the same server
+* [ ] support multiple users on the same server
 
 ## License
 

packages/my-joy-beta/README.md

@@ -5,8 +5,8 @@
 
 ## Table of Contents
 
-- [Usage](#usage)
+* [Usage](#usage)
-- [License](#license)
+* [License](#license)
 
 ## Usage
 

packages/ui-toolkit/README.md

@@ -8,9 +8,9 @@
 
 ## Table of Contents
 
-- [Install](#install)
+* [Install](#install)
-- [Usage](#usage)
+* [Usage](#usage)
-- [License](#license)
+* [License](#license)
 
 ## Install
 

packages/ui-toolkit/package.json

@@ -35,11 +35,13 @@
     "lodash.isstring": "^4.0.1",
     "moment": "^2.19.1",
     "normalized-styled-components": "^1.0.17",
+    "outy": "^0.1.2",
     "pascal-case": "^2.0.1",
     "prop-types": "^15.6.0",
     "react-bundle": "^1.0.4",
     "react-input-range": "^1.2.1",
-    "react-responsive": "^3.0.0",
+    "react-popper": "^0.7.3",
+    "react-responsive": "^2.0.0",
     "react-styled-flexboxgrid": "^2.1.0",
     "redrun": "^5.9.18",
     "remcalc": "^1.0.9",
@@ -92,8 +94,6 @@
     "stylelint": "^8.2.0",
     "stylelint-config-joyent-portal": "^2.0.1",
     "svg-inline-loader": "^0.8.0",
-    "tinycolor2": "^1.4.1",
-    "title-case": "^2.1.1",
     "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
     "url-loader": "^0.6.2",
     "webpack": "^3.8.1"

packages/ui-toolkit/src/baseline/readme.md

@@ -30,21 +30,21 @@ corresponding prop and calculates the `rem`.
 
 List of supported props:
 
-- `border`
+* `border`
-- `margin`
+* `margin`
-- `marginTop`
+* `marginTop`
-- `marginRight`
+* `marginRight`
-- `marginBottom`
+* `marginBottom`
-- `marginLeft`
+* `marginLeft`
-- `padding`
+* `padding`
-- `paddingTop`
+* `paddingTop`
-- `paddingRight`
+* `paddingRight`
-- `paddingBottom`
+* `paddingBottom`
-- `paddingLeft`
+* `paddingLeft`
-- `borderTopWidth`
+* `borderTopWidth`
-- `borderRightWidth`
+* `borderRightWidth`
-- `borderBottomWidth`
+* `borderBottomWidth`
-- `borderLeftWidth`
+* `borderLeftWidth`
 
 To use this composer, you just do it as you would with any other HOC:
 

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

@@ -11,19 +11,9 @@ export const tooltipShadow = `0 ${remcalc(2)} ${remcalc(6)} ${remcalc(
 export const modalShadow = `0 0 ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)`;
 
 export const border = {
-  checked: css`
+  checked: css`${remcalc(1)} solid ${props => props.theme.primary};`,
-    ${remcalc(1)} solid ${props => props.theme.primary};
+  unchecked: css`${remcalc(1)} solid ${props => props.theme.grey};`,
-  `,
+  confirmed: css`${remcalc(1)} solid ${props => props.theme.grey};`,
-  unchecked: css`
+  error: css`${remcalc(1)} solid ${props => props.theme.red};`,
-    ${remcalc(1)} solid ${props => props.theme.grey};
+  secondary: css`${remcalc(1)} solid ${props => props.theme.secondaryActive};`
-  `,
-  confirmed: css`
-    ${remcalc(1)} solid ${props => props.theme.grey};
-  `,
-  error: css`
-    ${remcalc(1)} solid ${props => props.theme.red};
-  `,
-  secondary: css`
-    ${remcalc(1)} solid ${props => props.theme.secondaryActive};
-  `
 };

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
 import { Row, Col } from 'react-styled-flexboxgrid';
-import remcalc from 'remcalc';
 
 import View from '../layout/view-container';
 

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

@@ -259,7 +259,7 @@ Button.defaultProps = {
   tertiary: false,
   small: false,
   loading: false,
-  selected: false,
+  selected: false
 };
 
 export default Baseline(Button);

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

@@ -26,7 +26,9 @@ const { InstancesIconLight } = require('../icons');
           <CardInfoIconContainer>
             <InstancesIconLight />
           </CardInfoIconContainer>
-          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+          <CardInfoLabel left light>
+            4 of 4 instances
+          </CardInfoLabel>
         </CardInfo>
       </CardDescription>
     </CardMeta>
@@ -63,7 +65,9 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
           <CardInfoIconContainer>
             <InstancesIconLight />
           </CardInfoIconContainer>
-          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+          <CardInfoLabel left light>
+            4 of 4 instances
+          </CardInfoLabel>
         </CardInfo>
       </CardDescription>
     </CardMeta>
@@ -110,7 +114,9 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
           <CardInfoIconContainer>
             <InstancesIconLight />
           </CardInfoIconContainer>
-          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+          <CardInfoLabel left light>
+            4 of 4 instances
+          </CardInfoLabel>
         </CardInfo>
       </CardDescription>
     </CardMeta>
@@ -186,7 +192,9 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
           <CardInfoIconContainer>
             <InstancesIconLight />
           </CardInfoIconContainer>
-          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+          <CardInfoLabel left light>
+            4 of 4 instances
+          </CardInfoLabel>
         </CardInfo>
       </CardDescription>
     </CardMeta>

packages/ui-toolkit/src/download.md

@@ -1,7 +1,7 @@
 The code can be found in:
 
-- [GitHub](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit)
+* [GitHub](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit)
-- [npm](https://www.npmjs.com/package/joyent-ui-toolkit)
+* [npm](https://www.npmjs.com/package/joyent-ui-toolkit)
 
 ### Install
 

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

@@ -44,7 +44,9 @@ const RadioStyled = Baseline(
 /**
  * @example ./usage-radio.md
  */
-const Radio = ({ children, ...rest }) => <RadioStyled {...rest}>{children}</RadioStyled>;
+const Radio = ({ children, ...rest }) => (
+  <RadioStyled {...rest}>{children}</RadioStyled>
+);
 
 export const RadioList = Baseline(Ul);
 export default Radio;

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

@@ -73,25 +73,25 @@ const Icons = () => (
       <Icon>
         <ArrowIcon width="6" />
       </Icon>
-      <Label>Arrow > Light</Label>
+      <Label>Arrow &gt; Light</Label>
     </ListItem>
     <ListItem>
       <Icon dark>
         <ArrowIconLight width="6" />
       </Icon>
-      <Label>Arrow > Dark</Label>
+      <Label>Arrow &gt; Dark</Label>
     </ListItem>
     <ListItem>
       <Icon>
         <InstancesIcon width="18" />
       </Icon>
-      <Label>Instances > Dark</Label>
+      <Label>Instances &gt; Dark</Label>
     </ListItem>
     <ListItem>
       <Icon dark>
         <InstancesIconLight width="18" />
       </Icon>
-      <Label>Instances > Light</Label>
+      <Label>Instances &gt; Light</Label>
     </ListItem>
     <ListItem>
       <Icon>
@@ -115,13 +115,13 @@ const Icons = () => (
       <Icon>
         <IconActions width="4" height="16" />
       </Icon>
-      <Label>Actions > Light</Label>
+      <Label>Actions &gt; Light</Label>
     </ListItem>
     <ListItem>
       <Icon dark>
         <IconActionsLight width="4" height="16" />
       </Icon>
-      <Label>Actions > Dark</Label>
+      <Label>Actions &gt; Dark</Label>
     </ListItem>
     <ListItem>
       <Icon>
@@ -187,13 +187,13 @@ const Icons = () => (
       <Icon>
         <DataCenterIcon width="9" height="13" />
       </Icon>
-      <Label>Data Centre > Dark</Label>
+      <Label>Data Centre &gt; Dark</Label>
     </ListItem>
     <ListItem>
       <Icon dark>
         <DataCenterIconLight width="9" height="13" />
       </Icon>
-      <Label>Data Centre > Light</Label>
+      <Label>Data Centre &gt; Light</Label>
     </ListItem>
     <ListItem>
       <Icon dark>

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

@@ -0,0 +1,19 @@
+```jsx
+const { default: Popover, Container, Target, Item, Divider } = require('./');
+const { Row, Col } = require('react-styled-flexboxgrid');
+
+<Row center="xs" between="xs">
+  <Col xs={2}>
+    <Container>
+      <Target>Hello</Target>
+      <Popover placement="right">
+        <Item>Scale</Item>
+        <Item>Restart</Item>
+        <Item>Stop</Item>
+        <Divider />
+        <Item>Delete</Item>
+      </Popover>
+    </Container>
+  </Col>
+</Row>;
+```

packages/ui-toolkit/src/popover/divider.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+export default styled.div`
+  width: calc(100% + ${remcalc(36)});
+  border-top: ${remcalc(1)} solid ${props => props.theme.grey};
+  margin: 0 0 ${remcalc(12)} ${remcalc(-18)};
+`;

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

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Popper as BasePopper, Arrow } from 'react-popper';
+import rndId from 'rnd-id';
+import remcalc from 'remcalc';
+
+import style from '../tooltip/style';
+
+const arrowClassName = rndId();
+
+const Popper = styled(BasePopper)`
+  min-width: ${remcalc(152)};
+  box-shadow: 0 ${remcalc(2)} ${remcalc(6)} rgba(0, 0, 0, 0.1);
+  border: ${remcalc(1)} solid ${props => props.theme.grey};
+
+  padding: ${remcalc(15)} ${remcalc(18)};
+
+  ${style({
+    background: 'white',
+    color: 'text',
+    border: 'grey',
+    arrow: arrowClassName
+  })};
+`;
+
+export default class Popover extends Component {
+  static contextTypes = {
+    ttpContMangr: PropTypes.object.isRequired
+  };
+
+  render = () => {
+    const { children, placement = 'auto', ...rest } = this.props;
+    const { isOpen, setRef } = this.context.ttpContMangr;
+
+    return (
+      isOpen() && (
+        <Popper innerRef={setRef('popper')} placement={placement} {...rest}>
+          {children}
+          <Arrow>
+            <span className={arrowClassName} />
+          </Arrow>
+        </Popper>
+      )
+    );
+  };
+}
+
+export { default as Divider } from './divider';
+export { default as Item } from './item';
+export { default as Container } from '../tooltip/container';
+export { default as Target } from '../tooltip/target';

packages/ui-toolkit/src/popover/item.js

@@ -0,0 +1,18 @@
+import remcalc from 'remcalc';
+import { H4 } from '../text/headings';
+
+export default H4.extend`
+  font-size: ${remcalc(16)};
+  text-align: left;
+
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+
+  cursor: pointer;
+  color: ${props => props.theme.secondary};
+
+  &:hover {
+    color: ${props => props.theme.secondaryActive};
+  }
+`;

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

@@ -1,10 +1,9 @@
 ```
-const SectionListItem = require('./SectionListItem').default;
+const { default: SectionListItem, Anchor } = require('./item');
-const Anchor = require('./SectionListItem').Anchor;
 
 <SectionList>
   <SectionListItem>
-    <Anchor className='active'>
+    <Anchor active>
       Overview
     </Anchor>
   </SectionListItem>

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

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import { ThemeProvider, injectGlobal } from 'styled-components';
+
 import theme from '../theme';
 import Base from '../base';
 import { loadedFontFamily } from '../typography';
+import { RootContainer } from '../layout';
 import 'codemirror/mode/jsx/jsx';
 
 const StyledBase = Base.extend`
@@ -10,50 +12,10 @@ const StyledBase = Base.extend`
   background-color: transparent;
 `;
 
-export default class Wrapper extends Component {
+export default ({ children }) => (
-  componentWillMount() {
-    // eslint-disable-next-line no-unused-expressions
-    injectGlobal`
-      [hidden] {
-        display: none;
-      }
-
-      html {
-        line-height: 1.15;
-        text-size-adjust: 100%;
-      }
-
-      body {
-        font-size: 15px;
-        margin: 0;
-        padding: 0;
-        background: ${theme.background};
-
-        ${loadedFontFamily};
-      }
-
-      html,
-      body,
-      #root {
-        height: 100%;
-      }
-
-      .CodeMirror,
-      .ReactCodeMirror {
-        height: 100% !important;
-      }
-
-      .CodeMirror {
-        border: solid 1px ${theme.grey};
-      }
-    `;
-  }
-
-  render() {
-    return (
   <ThemeProvider theme={theme}>
-        <StyledBase>{this.props.children}</StyledBase>
+    <StyledBase>
+      <RootContainer>{children}</RootContainer>
+    </StyledBase>
   </ThemeProvider>
 );
-  }
-}

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

@@ -1,11 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Strong } from 'normalized-styled-components';
 import remcalc from 'remcalc';
-import titleCase from 'title-case';
-import tinycolor from 'tinycolor2';
 import { P, H2 } from '../text';
-import theme, { base } from './';
+import theme from './';
 
 const Box = styled.div`
   width: ${remcalc(130)};
@@ -59,20 +56,7 @@ const Color = ({ name, hex }) => (
   </Box>
 );
 
-export default () => {
+export default () => (
-  const colors = Object.keys(base)
-    .filter(name => typeof theme[name] === 'string')
-    .sort((a, b) => {
-      const _a = tinycolor(theme[a]).toHsl().h;
-      const _b = tinycolor(theme[b]).toHsl().h;
-
-      return _a >= _b ? -1 : 1;
-    })
-    .map(name => <Color key={name} name={name} hex={theme[name]} />);
-
-  // return <tr>{colors}</tr>;
-
-  return (
   <Table>
     <thead>
       <tr>
@@ -110,9 +94,9 @@ export default () => {
           <Color key="disabled" name="disabled" hex={theme.disabled} />
         </Data>
         <Data>
-            Fill for primary buttons, text anchors (including interactive parts
+          Fill for primary buttons, text anchors (including interactive parts of
-            of the breadcrumb) and other UI components, whose priority or
+          the breadcrumb) and other UI components, whose priority or prominence
-            prominence is emphasized with color.
+          is emphasized with color.
         </Data>
       </tr>
       <tr>
@@ -132,8 +116,8 @@ export default () => {
           <Color key="disabled" name="disabled" hex={theme.disabled} />
         </Data>
         <Data>
-            Borders of primary buttons and other UI components, whose priority
+          Borders of primary buttons and other UI components, whose priority or
-            or prominence is emphasized with color.
+          prominence is emphasized with color.
         </Data>
       </tr>
       <tr>
@@ -147,19 +131,15 @@ export default () => {
           <Color key="whiteHover" name="whiteHover" hex={theme.whiteHover} />
         </Data>
         <Data>
-            <Color
+          <Color key="whiteActive" name="whiteActive" hex={theme.whiteActive} />
-              key="whiteActive"
-              name="whiteActive"
-              hex={theme.whiteActive}
-            />
         </Data>
         <Data>
           <Color key="disabled" name="disabled" hex={theme.disabled} />
         </Data>
         <Data>
           Fill for secondary buttons, inputs, dropdown menus, tables, service
-            and instance cards and other components that need to be
+          and instance cards and other components that need to be distinguished
-            distinguished from the overall layout.
+          from the overall layout.
         </Data>
       </tr>
       <tr>
@@ -245,11 +225,7 @@ export default () => {
           <ColorName>Example Text</ColorName>
         </Data>
         <Data>
-            <Color
+          <Color key="placeholder" name="placeholder" hex={theme.placeholder} />
-              key="placeholder"
-              name="placeholder"
-              hex={theme.placeholder}
-            />
         </Data>
         <Data />
         <Data />
@@ -331,4 +307,3 @@ export default () => {
     </tbody>
   </Table>
 );
-};

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

@@ -123,5 +123,6 @@ export default {
   inputWarning,
   topologyBackground,
   brandBackground,
-  transition
+  transition,
+  transparent: 'transparent'
 };

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

@@ -0,0 +1,75 @@
+```jsx
+const { default: Tooltip, Container, Target } = require('./');
+const { Row, Col } = require('react-styled-flexboxgrid');
+
+<Row center="xs" between="xs">
+  <Col xs={2}>
+    <Container>
+      <Target>Hello</Target>
+      <Tooltip placement="top">
+        <code>top</code>
+      </Tooltip>
+    </Container>
+  </Col>
+  <Col xs={2}>
+    <Container>
+      <Target>Hello</Target>
+      <Tooltip placement="right">
+        <code>right</code>
+      </Tooltip>
+    </Container>
+  </Col>
+  <Col xs={2}>
+    <Container>
+      <Target>Hello</Target>
+      <Tooltip placement="bottom">
+        <code>bottom</code>
+      </Tooltip>
+    </Container>
+  </Col>
+  <Col xs={2}>
+    <Container>
+      <Target>Hello</Target>
+      <Tooltip placement="left">
+        <code>left</code>
+      </Tooltip>
+    </Container>
+  </Col>
+</Row>;
+```
+
+#### Tooltip > hover
+
+```jsx
+const { default: Tooltip, Container, Target } = require('./');
+const { Row, Col } = require('react-styled-flexboxgrid');
+
+<Row center="xs" between="xs">
+  <Col xs={2}>
+    <Container hoverable>
+      <Target>Hover here</Target>
+      <Tooltip placement="top">
+        <code>top</code>
+      </Tooltip>
+    </Container>
+  </Col>
+</Row>;
+```
+
+#### Tooltip > click
+
+```jsx
+const { default: Tooltip, Container, Target } = require('./');
+const { Row, Col } = require('react-styled-flexboxgrid');
+
+<Row center="xs" between="xs">
+  <Col xs={2}>
+    <Container clickable>
+      <Target>Click here</Target>
+      <Tooltip placement="top">
+        <code>top</code>
+      </Tooltip>
+    </Container>
+  </Col>
+</Row>;
+```

packages/ui-toolkit/src/tooltip/container.js

@@ -0,0 +1,95 @@
+import { findDOMNode } from 'react-dom';
+import React, { Component } from 'react';
+import { Manager } from 'react-popper';
+import PropTypes from 'prop-types';
+import outy from 'outy';
+
+export default class Container extends Component {
+  static childContextTypes = {
+    ttpContMangr: PropTypes.object.isRequired
+  };
+
+  getChildContext = () => ({
+    ttpContMangr: {
+      setRef: this._ref,
+      handleTargetClick: this._handleTargetClick,
+      handleTargetMouseEnter: this._handleTargetMouseEnter,
+      handleTargetMouseLeave: this._handleTargetMouseLeave,
+      isOpen: this._isOpen,
+      hoverable: () => Boolean(this.props.hoverable),
+      clickable: () => Boolean(this.props.clickable)
+    }
+  });
+
+  _refs = {};
+
+  state = {
+    isOpen: false
+  };
+
+  _ref = name => c =>
+    Object.assign(this._refs, {
+      [name]: findDOMNode(c)
+    });
+
+  componentDidMount = () => {
+    this._setOusideTap();
+  };
+
+  componentDidUpdate = (lastProps, { isOpen: wasOpen }) => {
+    const { isOpen } = this.state;
+
+    if (wasOpen !== isOpen) {
+      setTimeout(() => this._setOusideTap());
+    }
+  };
+
+  componentWillUnmount = () => this._removeOutsideTap();
+
+  _setOusideTap = () => {
+    const elements = Object.values(this._refs);
+
+    this._removeOutsideTap();
+
+    if (!elements.length) {
+      return;
+    }
+
+    this.outsideTap = outy(
+      elements,
+      ['click', 'touchstart'],
+      this._handleOutsideTap
+    );
+  };
+
+  _handleOutsideTap = ev =>
+    this.state.isOpen && this.setState({ isOpen: false });
+
+  _handleTargetClick = ev => {
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    return this.setState({ isOpen: !this.state.isOpen });
+  };
+
+  _handleTargetMouseEnter = () =>
+    !this.state.isOpen && this.setState({ isOpen: true });
+
+  _handleTargetMouseLeave = () =>
+    this.state.isOpen && this.setState({ isOpen: false });
+
+  _removeOutsideTap = () => this.outsideTap && this.outsideTap.remove();
+
+  _isOpen = () =>
+    !this.props.hoverable && !this.props.clickable ? true : this.state.isOpen;
+
+  open = () => this.setState({ isOpen: true });
+
+  close = () => this.setState({ isOpen: false });
+
+  render = () => {
+    const { children } = this.props;
+
+    return <Manager tag={false}>{children}</Manager>;
+  };
+}

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

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Popper as BasePopper, Arrow } from 'react-popper';
+import rndId from 'rnd-id';
+import remcalc from 'remcalc';
+
+import style from './style';
+
+const arrowClassName = rndId();
+
+const Popper = styled(BasePopper)`
+  box-shadow: 0 0 ${remcalc(2)} rgba(0, 0, 0, 0.5);
+  padding: ${remcalc(13)} ${remcalc(18)};
+
+  ${style({
+    background: 'secondaryHover',
+    color: 'white',
+    border: 'transparent',
+    arrow: arrowClassName
+  })};
+`;
+
+export default class Tooltip extends Component {
+  static propTypes = {
+    // List of accepted placements to use as values of the `placement` option. Variations are interpreted easily if you think of them as the left to right written languages. Horizontally (`top` and `bottom`), `start` is left and `end` is right. Vertically (`left` and `right`), `start` is top and `end` is bottom.
+    placement: PropTypes.oneOf([
+      'auto-start',
+      'auto',
+      'auto-end',
+      'top-start',
+      'top',
+      'top-end',
+      'right-start',
+      'right',
+      'right-end',
+      'bottom-end',
+      'bottom',
+      'bottom-start',
+      'left-end',
+      'left',
+      'left-start'
+    ])
+  };
+
+  static contextTypes = {
+    ttpContMangr: PropTypes.object.isRequired
+  };
+
+  render = () => {
+    const { children, placement = 'auto', ...rest } = this.props;
+    const { isOpen, setRef } = this.context.ttpContMangr;
+
+    return (
+      isOpen() && (
+        <Popper innerRef={setRef('popper')} placement={placement} {...rest}>
+          {children}
+          <Arrow>
+            <span className={arrowClassName} />
+          </Arrow>
+        </Popper>
+      )
+    );
+  };
+}
+
+export { default as Container } from './container';
+export { default as Target } from './target';

packages/ui-toolkit/src/tooltip/style.js

@@ -0,0 +1,147 @@
+import { css } from 'styled-components';
+import remcalc from 'remcalc';
+
+export default ({ background, color, border, arrow }) => css`
+  background: ${props => props.theme[background]};
+  color: ${props => props.theme[color]};
+
+  border-radius: ${remcalc(4)};
+
+  & .${arrow} {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: ${remcalc(6)};
+  }
+
+  /* top */
+  &[data-placement^='top'] .${arrow} {
+    border-width: ${remcalc(6)} ${remcalc(6)} 0 ${remcalc(6)};
+    border-color: ${props => props.theme[background]} transparent transparent
+      transparent;
+    bottom: ${remcalc(-6)};
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &:after {
+      border-width: ${remcalc(7)} ${remcalc(7)} 0 ${remcalc(7)};
+      border-color: ${props => props.theme[background]} transparent transparent
+        transparent;
+      bottom: ${remcalc(-6)};
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  /* bottom */
+  &[data-placement^='bottom'] .${arrow} {
+    border-width: 0 ${remcalc(6)} ${remcalc(6)} ${remcalc(6)};
+    border-color: transparent transparent ${props => props.theme[background]}
+      transparent;
+    top: ${remcalc(-6)};
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  /* top & bottom */
+  &[data-placement^='top'],
+  &[data-placement^='bottom'] {
+    margin-bottom: ${remcalc(6)};
+  }
+
+  &[data-placement='top-start']
+    .${arrow},
+    &[data-placement='bottom-start']
+    .${arrow} {
+    left: ${remcalc(6)};
+  }
+
+  &[data-placement='top-end']
+    .${arrow},
+    &[data-placement='bottom-end']
+    .${arrow} {
+    right: ${remcalc(6)};
+  }
+
+  &[data-placement='top'] .${arrow}, &[data-placement='bottom'] .${arrow} {
+    left: calc(50% - ${remcalc(11)});
+  }
+
+  /* left */
+  &[data-placement^='left'] {
+    margin-right: ${remcalc(6)};
+  }
+
+  &[data-placement^='left'] .${arrow} {
+    border-width: ${remcalc(6)} 0 ${remcalc(6)} ${remcalc(6)};
+    border-color: transparent transparent transparent
+      ${props => props.theme[background]};
+    right: ${remcalc(-12)};
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      border-width: ${remcalc(7)} 0 ${remcalc(7)} ${remcalc(7)};
+      border-color: transparent transparent transparent
+        ${props => props.theme[border]};
+      border-style: solid;
+      left: ${remcalc(-2)};
+      width: 0;
+      height: 0;
+      top: ${remcalc(-7)};
+      z-index: -1;
+    }
+  }
+
+  /* right */
+  &[data-placement^='right'] {
+    margin-left: ${remcalc(6)};
+  }
+
+  &[data-placement^='right'] .${arrow} {
+    border-width: ${remcalc(6)} ${remcalc(6)} ${remcalc(6)} 0;
+    border-color: transparent ${props => props.theme[background]} transparent
+      transparent;
+    left: ${remcalc(-12)};
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      border-width: ${remcalc(7)} ${remcalc(7)} ${remcalc(7)} 0;
+      border-color: transparent ${props => props.theme[border]} transparent
+        transparent;
+      border-style: solid;
+      left: ${remcalc(-2)};
+      width: 0;
+      height: 0;
+      top: ${remcalc(-7)};
+      z-index: -1;
+    }
+  }
+
+  /* left & right */
+  &[data-placement='left-start']
+    .${arrow},
+    &[data-placement='right-start']
+    .${arrow} {
+    top: ${remcalc(6)};
+  }
+
+  &[data-placement='left-end']
+    .${arrow},
+    &[data-placement='right-end']
+    .${arrow} {
+    bottom: ${remcalc(6)};
+  }
+
+  &[data-placement='left'] .${arrow}, &[data-placement='right'] .${arrow} {
+    top: calc(50% - ${remcalc(6)});
+  }
+`;

packages/ui-toolkit/src/tooltip/target.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { Target as BaseTarget } from 'react-popper';
+import PropTypes from 'prop-types';
+
+export default class Target extends Component {
+  static contextTypes = {
+    ttpContMangr: PropTypes.object.isRequired
+  };
+
+  render = () => {
+    const { children, ...rest } = this.props;
+
+    const {
+      setRef,
+      handleTargetClick,
+      handleTargetMouseEnter,
+      handleTargetMouseLeave,
+      hoverable,
+      clickable
+    } = this.context.ttpContMangr;
+
+    const onMouseEnter =
+      hoverable() && handleTargetMouseEnter
+        ? handleTargetMouseEnter
+        : undefined;
+
+    const onMouseLeave =
+      hoverable() && handleTargetMouseLeave
+        ? handleTargetMouseLeave
+        : undefined;
+
+    const onClick =
+      clickable() && handleTargetClick ? handleTargetClick : undefined;
+
+    return (
+      <BaseTarget
+        innerRef={setRef('target')}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        {...rest}
+      >
+        {children}
+      </BaseTarget>
+    );
+  };
+}

packages/ui-toolkit/styleguide.config.js

@@ -106,7 +106,9 @@ module.exports = {
         'src/form/radio.js',
         'src/section-list/index.js',
         'src/form/select.js',
-        'src/form/toggle.js'
+        'src/form/toggle.js',
+        'src/tooltip/index.js',
+        'src/popover/index.js'
       ]
     }
   ],

prototypes/create-instance/README.md

@@ -6,8 +6,8 @@
 
 ## Table of Contents
 
-- [Usage](#usage)
+* [Usage](#usage)
-- [License](#license)
+* [License](#license)
 
 ## Usage
 

prototypes/create-instance/src/components/empty/index.js

@@ -18,7 +18,10 @@ const Title = styled(CardTitle)`
   margin-bottom: ${remcalc(8)};
 `;
 
-const SubTitle = styled(Title)`font-weight: normal;`;
+const SubTitle = styled(Title)`
+  /* trick prettier */
+  font-weight: normal;
+`;
 
 const CardStyled = styled(Card)`
   flex-direction: column;

yarn.lock

@@ -246,8 +246,8 @@ ajv@^4.9.1:
     json-stable-stringify "^1.0.1"
 
 ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3:
-  version "5.2.3"
+  version "5.2.5"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.5.tgz#b637234d3e2675eb5f79fc652242a853a48cb49f"
   dependencies:
     co "^4.6.0"
     fast-deep-equal "^1.0.0"
@@ -378,13 +378,6 @@ apollo-link-core@^0.5.0:
     graphql-tag "^2.4.2"
     zen-observable-ts "^0.4.4"
 
-apollo-link@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-0.8.0.tgz#efce6b35ae9ea5f6966a87054ba4893a5b6d960a"
-  dependencies:
-    apollo-utilities "^0.2.0-beta.0"
-    zen-observable "^0.6.0"
-
 apollo-server-core@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/apollo-server-core/-/apollo-server-core-1.1.7.tgz#4d7df340a44e949e98ab6ca405f54e862ef5416e"
@@ -409,9 +402,9 @@ apollo-tracing@^0.0.x:
   dependencies:
     graphql-tools "^2.2.0"
 
-apollo-utilities@^0.2.0-beta.0:
+apollo-utilities@^0.1.1-0:
-  version "0.2.0-rc.0"
+  version "0.1.1-1"
-  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-0.2.0-rc.0.tgz#5ac93a839c5688e8f655dc7d5789a5d878f4351f"
+  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-0.1.1-1.tgz#a637c2a5b49e06f20dd9adf7c55ec1ff69a97592"
 
 apollo@^0.2.2:
   version "0.2.2"
@@ -767,11 +760,11 @@ autoprefixer@^6.3.1:
     postcss-value-parser "^3.2.3"
 
 autoprefixer@^7.1.2:
-  version "7.1.5"
+  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.5.tgz#d65d14b83c7cd1dd7bc801daa00557addf5a06b2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
   dependencies:
-    browserslist "^2.5.0"
+    browserslist "^2.5.1"
-    caniuse-lite "^1.0.30000744"
+    caniuse-lite "^1.0.30000748"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
     postcss "^6.0.13"
@@ -2229,7 +2222,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.1.2, browserslist@^2.1.5, browserslist@^2.5.0:
+browserslist@^2.1.2, browserslist@^2.1.5, browserslist@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.5.1.tgz#68e4bc536bbcc6086d62843a2ffccea8396821c6"
   dependencies:
@@ -2318,6 +2311,24 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
+cacache@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.0.tgz#3bba88bf62b0773fd9a691605f60c9d3c595e853"
+  dependencies:
+    bluebird "^3.5.0"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^1.3.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.1"
+    ssri "^5.0.0"
+    unique-filename "^1.1.0"
+    y18n "^3.2.1"
+
 cacache@^9.2.9:
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-9.3.0.tgz#9cd58f2dd0b8c8cacf685b7067b416d6d3cf9db1"
@@ -2407,12 +2418,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000748"
+  version "1.0.30000749"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000748.tgz#785d9edfcd645bf795c6ff3ced33c45d580c48a0"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000749.tgz#556773aa3aa704f581d748fa63b46ca087aac67d"
 
-caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000744:
+caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000744, caniuse-lite@^1.0.30000748:
-  version "1.0.30000748"
+  version "1.0.30000749"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000748.tgz#44c8d6da52ad65a5d7b9dca4efebd0bdd982ba09"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000749.tgz#2ff382865aead8cca35dacfbab04f58effa4c01c"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -2474,8 +2485,8 @@ chalk@2.1.0:
     supports-color "^4.0.0"
 
 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
-  version "2.2.0"
+  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.2.0.tgz#477b3bf2f9b8fd5ca9e429747e37f724ee7af240"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
   dependencies:
     ansi-styles "^3.1.0"
     escape-string-regexp "^1.0.5"
@@ -2871,6 +2882,14 @@ common-sequence@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/common-sequence/-/common-sequence-1.0.2.tgz#30e07f3f8f6f7f9b3dee854f20b2d39eee086de8"
 
+common-shake@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/common-shake/-/common-shake-2.0.2.tgz#2c016fa2aa36c6461afdde5cb7605c77ccbb855f"
+  dependencies:
+    acorn "^5.1.1"
+    debug "^2.6.8"
+    escope "^3.6.0"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2883,10 +2902,10 @@ compare-func@^1.3.1:
     dot-prop "^3.0.0"
 
 compressible@~2.0.11:
-  version "2.0.11"
+  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.11.tgz#16718a75de283ed8e604041625a2064586797d8a"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
   dependencies:
-    mime-db ">= 1.29.0 < 2"
+    mime-db ">= 1.30.0 < 2"
 
 compression@^1.5.2, compression@^1.6.2:
   version "1.7.1"
@@ -2964,8 +2983,8 @@ content-disposition@0.5.2:
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
 
 content-type-parser@^1.0.1:
-  version "1.0.1"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.1.tgz#c3e56988c53c65127fb46d4032a3a900246fdc94"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
 
 content-type@^1.0.2, content-type@~1.0.2, content-type@~1.0.4:
   version "1.0.4"
@@ -3168,8 +3187,8 @@ copy-to-clipboard@^3:
     toggle-selection "^1.0.3"
 
 copy-webpack-plugin@^4.0.1:
-  version "4.1.1"
+  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.1.1.tgz#53ae69e04955ebfa9fda411f54cbb968531d71fd"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.2.0.tgz#252bb94597f96399d23d7fad355f8d3a661ac096"
   dependencies:
     bluebird "^3.5.1"
     fs-extra "^4.0.2"
@@ -3565,13 +3584,13 @@ dateformat@^1.0.11, dateformat@^1.0.12:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
-debug@2, debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8:
+debug@2, debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.0.1:
+debug@^3.0.0, debug@^3.0.1, debug@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
@@ -3903,6 +3922,14 @@ duplexify@^3.1.2, duplexify@^3.4.2:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+duplicate-package-checker-webpack-plugin@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/duplicate-package-checker-webpack-plugin/-/duplicate-package-checker-webpack-plugin-1.2.6.tgz#1366e549facc29cb946bfc27a120238b1c6cd481"
+  dependencies:
+    chalk "^1.1.3"
+    find-root "^1.0.0"
+    lodash "^4.17.4"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -3923,8 +3950,8 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.24:
-  version "1.3.26"
+  version "1.3.27"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.26.tgz#996427294861a74d9c7c82b9260ea301e8c02d66"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz#78ecb8a399066187bb374eede35d9c70565a803d"
 
 elliptic@^6.0.0:
   version "6.4.0"
@@ -4131,10 +4158,14 @@ escope@^3.6.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-config-joyent-portal@3.1.0, eslint-config-joyent-portal@^3.0.0:
+eslint-config-joyent-portal@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/eslint-config-joyent-portal/-/eslint-config-joyent-portal-3.1.0.tgz#7a77270d118627e59461db29d35639cf146d1dfc"
 
+eslint-config-joyent-portal@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-joyent-portal/-/eslint-config-joyent-portal-3.2.0.tgz#20de54035938ea6918160393dc4b387e2792d57f"
+
 eslint-config-prettier@^2.3.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.6.0.tgz#f21db0ebb438ad678fb98946097c4bb198befccc"
@@ -4869,6 +4900,10 @@ find-root@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.0.0.tgz#962ff211aab25c6520feeeb8d6287f8f6e95807a"
 
+find-root@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -5470,8 +5505,8 @@ graphcool-tmp-ui@^0.0.11:
     react-modal "^1.6.5"
 
 graphiql@^0.11.2:
-  version "0.11.5"
+  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-0.11.5.tgz#0924c934d035c69eddfbbae30d3e59e46e29afc9"
+  resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-0.11.6.tgz#5d24d3609c9dd7c8a24306f76d8402899a9dc5e0"
   dependencies:
     codemirror "^5.26.0"
     codemirror-graphql "^0.6.11"
@@ -5545,8 +5580,8 @@ graphql-language-service-utils@0.0.17:
     graphql-language-service-types "0.0.21"
 
 graphql-playground@^1.0.8:
-  version "1.0.22"
+  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/graphql-playground/-/graphql-playground-1.0.22.tgz#376f997dea0dd4a31f9699482a3f8800940c46b9"
+  resolved "https://registry.yarnpkg.com/graphql-playground/-/graphql-playground-1.0.34.tgz#ecd6e7d8c79c42885e28043f9ebb930d3e58392f"
   dependencies:
     calculate-size "^1.1.1"
     classnames "^2.2.5"
@@ -5595,15 +5630,15 @@ graphql-subscriptions@^0.4.4:
     es6-promise "^4.0.5"
     iterall "^1.1.1"
 
-graphql-tag@^2.0.0, graphql-tag@^2.4.2:
+graphql-tag@^2.0.0, graphql-tag@^2.4.2, graphql-tag@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.5.0.tgz#b43bfd8b5babcd2c205ad680c03e98b238934e0f"
 
 graphql-tools@^2.2.0, graphql-tools@^2.3.0:
-  version "2.5.1"
+  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-2.5.1.tgz#542c48d4f9a532e09280ae216084813ea7ba4b18"
+  resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-2.6.1.tgz#9f6d1600951a05b18b83c52986c42eee4fd3cb1b"
   dependencies:
-    apollo-link "^0.8.0"
+    apollo-utilities "^0.1.1-0"
     deprecated-decorator "^0.1.6"
     uuid "^3.1.0"
 
@@ -5874,8 +5909,8 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
 
 html-encoding-sniffer@^1.0.1:
-  version "1.0.1"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz#79bf7a785ea495fe66165e734153f363ff5437da"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
   dependencies:
     whatwg-encoding "^1.0.1"
 
@@ -6056,8 +6091,8 @@ ignore-by-default@^1.0.1:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
 
 ignore@^3.3.3:
-  version "3.3.5"
+  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.5.tgz#c4e715455f6073a8d7e5dae72d2fc9d71663dba6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.6.tgz#b6f3196b38ed92f0c86e52f6f79b7fc4c8266c8d"
 
 image-ssim@^0.2.0:
   version "0.2.0"
@@ -6073,6 +6108,13 @@ import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
 
+import-local@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-0.1.1.tgz#b1179572aacdc11c6a91009fb430dbcab5f668a8"
+  dependencies:
+    pkg-dir "^2.0.0"
+    resolve-cwd "^2.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -6606,17 +6648,17 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
 istanbul-api@^1.1.1:
-  version "1.1.14"
+  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.14.tgz#25bc5701f7c680c0ffff913de46e3619a3a6e680"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
   dependencies:
     async "^2.1.4"
     fileset "^2.0.2"
     istanbul-lib-coverage "^1.1.1"
-    istanbul-lib-hook "^1.0.7"
+    istanbul-lib-hook "^1.1.0"
-    istanbul-lib-instrument "^1.8.0"
+    istanbul-lib-instrument "^1.9.1"
-    istanbul-lib-report "^1.1.1"
+    istanbul-lib-report "^1.1.2"
-    istanbul-lib-source-maps "^1.2.1"
+    istanbul-lib-source-maps "^1.2.2"
-    istanbul-reports "^1.1.2"
+    istanbul-reports "^1.1.3"
     js-yaml "^3.7.0"
     mkdirp "^0.5.1"
     once "^1.4.0"
@@ -6625,15 +6667,15 @@ istanbul-lib-coverage@^1.0.1, istanbul-lib-coverage@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
 
-istanbul-lib-hook@^1.0.7:
+istanbul-lib-hook@^1.1.0:
-  version "1.0.7"
+  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.7.tgz#dd6607f03076578fe7d6f2a630cf143b49bacddc"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.1.0.tgz#8538d970372cb3716d53e55523dd54b557a8d89b"
   dependencies:
     append-transform "^0.4.0"
 
-istanbul-lib-instrument@^1.4.2, istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.8.0:
+istanbul-lib-instrument@^1.4.2, istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.9.1:
-  version "1.8.0"
+  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.8.0.tgz#66f6c9421cc9ec4704f76f2db084ba9078a2b532"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
   dependencies:
     babel-generator "^6.18.0"
     babel-template "^6.16.0"
@@ -6643,28 +6685,28 @@ istanbul-lib-instrument@^1.4.2, istanbul-lib-instrument@^1.7.5, istanbul-lib-ins
     istanbul-lib-coverage "^1.1.1"
     semver "^5.3.0"
 
-istanbul-lib-report@^1.1.1:
+istanbul-lib-report@^1.1.2:
-  version "1.1.1"
+  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#f0e55f56655ffa34222080b7a0cd4760e1405fc9"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz#922be27c13b9511b979bd1587359f69798c1d425"
   dependencies:
     istanbul-lib-coverage "^1.1.1"
     mkdirp "^0.5.1"
     path-parse "^1.0.5"
     supports-color "^3.1.2"
 
-istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.1:
+istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.2:
-  version "1.2.1"
+  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.1.tgz#a6fe1acba8ce08eebc638e572e294d267008aa0c"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
   dependencies:
-    debug "^2.6.3"
+    debug "^3.1.0"
     istanbul-lib-coverage "^1.1.1"
     mkdirp "^0.5.1"
     rimraf "^2.6.1"
     source-map "^0.5.3"
 
-istanbul-reports@^1.1.2:
+istanbul-reports@^1.1.3:
-  version "1.1.2"
+  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.2.tgz#0fb2e3f6aa9922bd3ce45d05d8ab4d5e8e07bd4f"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.3.tgz#3b9e1e8defb6d18b1d425da8e8b32c5a163f2d10"
   dependencies:
     handlebars "^4.0.3"
 
@@ -7126,8 +7168,8 @@ jest-snapshot@^21.2.1:
     pretty-format "^21.2.1"
 
 jest-styled-components@^4.7.0, jest-styled-components@^4.7.1:
-  version "4.7.1"
+  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-4.7.1.tgz#589cd3caafcfca359055590d889f073003277531"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-4.9.0.tgz#459ccb37d0f5720007c8dba358bfff93c8cf4aed"
   dependencies:
     css "^2.2.1"
 
@@ -7248,19 +7290,21 @@ joyent-manifest-editor@^1.4.0:
     react-codemirror "^1.0.0"
 
 joyent-react-scripts@^2.2.1, joyent-react-scripts@^2.3.0:
-  version "2.3.0"
+  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/joyent-react-scripts/-/joyent-react-scripts-2.3.0.tgz#9e48f93d67284b8149dc73b35ccdfc11d27131d9"
+  resolved "https://registry.yarnpkg.com/joyent-react-scripts/-/joyent-react-scripts-2.6.0.tgz#15d183729f1b762ac6a8da6442de5ccc88e84909"
   dependencies:
     apr-for-each "^1.0.6"
     apr-main "^1.0.7"
     babel-minify-webpack-plugin "^0.2.0"
+    duplicate-package-checker-webpack-plugin "^1.2.6"
     execa "^0.8.0"
     graphql "^0.11.7"
-    graphql-tag "^2.4.2"
+    graphql-tag "^2.5.0"
     lodash-webpack-plugin "^0.11.4"
     lodash.isstring "^4.0.1"
     mz "^2.7.0"
     react-scripts "^1.0.14"
+    webpack-common-shake "^1.5.3"
 
 jpeg-js@0.1.2, jpeg-js@^0.1.2:
   version "0.1.2"
@@ -7959,10 +8003,10 @@ magic-string@^0.14.0:
     vlq "^0.2.1"
 
 make-dir@^1.0.0:
-  version "1.0.0"
+  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.1.0.tgz#19b4369fe48c116f53c2af95ad102c0e39e85d51"
   dependencies:
-    pify "^2.3.0"
+    pify "^3.0.0"
 
 make-error@^1.1.1:
   version "1.3.0"
@@ -8140,7 +8184,7 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.x.x, "mime-db@>= 1.29.0 < 2", mime-db@~1.30.0:
+mime-db@1.x.x, "mime-db@>= 1.30.0 < 2", mime-db@~1.30.0:
   version "1.30.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
 
@@ -8793,6 +8837,10 @@ output-file-sync@^1.1.2:
     mkdirp "^0.5.1"
     object-assign "^4.1.0"
 
+outy@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/outy/-/outy-0.1.2.tgz#598d395e43f92e52d98aadff23b72a3e7128b572"
+
 p-cancelable@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
@@ -8975,8 +9023,8 @@ path-to-regexp@^1.0.1, path-to-regexp@^1.7.0:
     isarray "0.0.1"
 
 path-to-regexp@^2.0.0:
-  version "2.0.0"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.0.0.tgz#b77a8168c2e78bc31f3d312d71b1ace97df23870"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.1.0.tgz#7e30f9f5b134bd6a28ffc2e3ef1e47075ac5259b"
 
 path-type@3.0.0:
   version "3.0.0"
@@ -9101,6 +9149,10 @@ podium@^1.3.0:
     items "2.x.x"
     joi "10.x.x"
 
+popper.js@^1.12.5:
+  version "1.12.6"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.6.tgz#91e12a97b07815258b76915d64044e8ac053d426"
+
 portfinder@^1.0.13, portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -9984,6 +10036,13 @@ react-modal@2.4.1, react-modal@^1.6.5, react-modal@^2.3.2:
     exenv "^1.2.0"
     prop-types "^15.5.10"
 
+react-popper@^0.7.3:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.4.tgz#8649d539837e7c6f47bc9b24c9cf57a404e199a1"
+  dependencies:
+    popper.js "^1.12.5"
+    prop-types "^15.5.10"
+
 react-redux@^5.0.5, react-redux@^5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946"
@@ -9995,9 +10054,9 @@ react-redux@^5.0.5, react-redux@^5.0.6:
     loose-envify "^1.1.0"
     prop-types "^15.5.10"
 
-react-responsive@^3.0.0:
+react-responsive@^2.0.0:
-  version "3.0.0"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-3.0.0.tgz#26e895dbdf748d4473c76cf46d29cb9d824e02ec"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-2.0.0.tgz#4019fd493b6619c12cf0b06911ed543c2d94e504"
   dependencies:
     hyphenate-style-name "^1.0.0"
     matchmediaquery "^0.2.1"
@@ -10076,8 +10135,8 @@ react-side-effect@^1.1.0:
     shallowequal "^1.0.1"
 
 react-style-proptype@^3.0.0:
-  version "3.0.0"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.0.0.tgz#89e0b646f266c656abb0f0dd8202dbd5036c31e6"
+  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.1.0.tgz#c8912fc13460f5b0c1ec1114c729d535b52b8073"
   dependencies:
     prop-types "^15.5.4"
 
@@ -10765,6 +10824,12 @@ reselect@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
 
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  dependencies:
+    resolve-from "^3.0.0"
+
 resolve-dir@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-0.1.1.tgz#b219259a5602fac5c5c496ad894a6e8cc430261e"
@@ -11588,6 +11653,12 @@ ssri@^4.1.6:
   dependencies:
     safe-buffer "^5.1.0"
 
+ssri@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.0.0.tgz#13c19390b606c821f2a10d02b351c1729b94d8cf"
+  dependencies:
+    safe-buffer "^5.1.0"
+
 staged-git-files@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-0.0.4.tgz#d797e1b551ca7a639dec0237dc6eb4bb9be17d35"
@@ -11607,7 +11678,11 @@ statehood@^5.0.3:
     items "2.x.x"
     joi "10.x.x"
 
-"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
@@ -11919,8 +11994,8 @@ stylelint@^8.2.0:
     table "^4.0.1"
 
 stylis@^3.2.1:
-  version "3.3.2"
+  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.3.2.tgz#95ef285836e98243f8b8f64a9a72706ea6c893ea"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.0.tgz#55c6530ebceeca5976d54fb4adc67578afee828d"
 
 subscriptions-transport-ws@^0.8.1:
   version "0.8.3"
@@ -12220,10 +12295,6 @@ tiny-emitter@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
 
-tinycolor2@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
-
 title-case@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"
@@ -12460,16 +12531,16 @@ ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
-uglify-es@^3.0.24:
+uglify-es@^3.0.24, uglify-es@^3.1.3:
-  version "3.1.3"
+  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.1.3.tgz#a21eeb149cb120a1f8302563689e19496550780b"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.1.5.tgz#63bae0fd4f9feeda417fee7c0ff685a673819683"
   dependencies:
     commander "~2.11.0"
-    source-map "~0.5.1"
+    source-map "~0.6.1"
 
 uglify-js@3.1.x, uglify-js@^3.0.13:
-  version "3.1.4"
+  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.4.tgz#8e1efa1244b207588e525c9c1835a33458b90aee"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.5.tgz#4c1a6d53b2fe77e4710dd94631853effd3ff5143"
   dependencies:
     commander "~2.11.0"
     source-map "~0.6.1"
@@ -12487,7 +12558,7 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
-uglifyjs-webpack-plugin@1.0.0-beta.3, uglifyjs-webpack-plugin@^1.0.0-beta.3:
+uglifyjs-webpack-plugin@1.0.0-beta.3:
   version "1.0.0-beta.3"
   resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.0.0-beta.3.tgz#0715c2ee70bd927685c7cbccda678c6ceab6fc0f"
   dependencies:
@@ -12507,6 +12578,18 @@ uglifyjs-webpack-plugin@^0.4.6:
     uglify-js "^2.8.29"
     webpack-sources "^1.0.1"
 
+uglifyjs-webpack-plugin@^1.0.0-beta.3:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.0.1.tgz#d324da7144d321202df0968c09f6f8e057d5cdc2"
+  dependencies:
+    cacache "^10.0.0"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.3.0"
+    source-map "^0.5.6"
+    uglify-es "^3.1.3"
+    webpack-sources "^1.0.1"
+    worker-farm "^1.4.1"
+
 uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -12968,6 +13051,15 @@ webidl-conversions@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
+webpack-common-shake@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/webpack-common-shake/-/webpack-common-shake-1.5.3.tgz#d239321a71a2d5128e5fb871616ce340db729bbb"
+  dependencies:
+    acorn "^5.1.1"
+    common-shake "^2.0.2"
+    webpack "^3.1.0"
+    webpack-sources "^1.0.1"
+
 webpack-dev-middleware@^1.10.2, webpack-dev-middleware@^1.11.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
@@ -13026,8 +13118,8 @@ webpack-dev-server@^1.16.2:
     webpack-dev-middleware "^1.10.2"
 
 webpack-dev-server@^2.8.2:
-  version "2.9.2"
+  version "2.9.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.2.tgz#0fbab915701d25a905a60e1e784df19727da800f"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.3.tgz#f0554e88d129e87796a6f74a016b991743ca6f81"
   dependencies:
     ansi-html "0.0.7"
     array-includes "^3.0.3"
@@ -13035,10 +13127,12 @@ webpack-dev-server@^2.8.2:
     chokidar "^1.6.0"
     compression "^1.5.2"
     connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
     del "^3.0.0"
     express "^4.13.3"
     html-entities "^1.2.0"
     http-proxy-middleware "~0.17.4"
+    import-local "^0.1.1"
     internal-ip "1.2.0"
     ip "^1.1.5"
     loglevel "^1.4.1"
@@ -13101,7 +13195,7 @@ webpack@3.5.1:
     webpack-sources "^1.0.1"
     yargs "^8.0.2"
 
-webpack@^3.8.1:
+webpack@^3.1.0, webpack@^3.8.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.8.1.tgz#b16968a81100abe61608b0153c9159ef8bb2bd83"
   dependencies:
@@ -13144,8 +13238,8 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.2.tgz#0e18781de629a18308ce1481650f67ffa2693a5d"
 
 whatwg-encoding@^1.0.1:
-  version "1.0.1"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz#3c6c451a198ee7aec55b1ec61d0920c67801a5f4"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.2.tgz#bd68ad169c3cf55080562257714bf012e668a165"
   dependencies:
     iconv-lite "0.4.13"
 
@@ -13480,7 +13574,3 @@ yn@^2.0.0:
 zen-observable-ts@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.4.4.tgz#c244c71eaebef79a985ccf9895bc90307a6e9712"
-
-zen-observable@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.6.0.tgz#8a6157ed15348d185d948cfc4a59d90a2c0f70ee"