feat(my-joy-beta): create instance networks

fixes #985

packages/icons/src/index.js

@@ -3,17 +3,19 @@ export { default as Affinity } from './affinity';
 export { default as Arrow } from './arrow';
 export { default as Bin } from './bin';
 export { default as Checkcircle } from './checkcircle';
-export { default as Chevron } from './chevron';
 export { default as Clipboard } from './clipboard';
 export { default as Close } from './close';
 export { default as Cns } from './cns';
 export { default as Copy } from './copy';
+export { default as Cpu } from './cpu';
 export { default as DataCenter } from './data-center';
 export { default as Delete } from './delete';
 export { default as Dot } from './dot';
 export { default as Duplicate } from './duplicate';
 export { default as Edit } from './edit';
+export { default as Fabric } from './fabric';
 export { default as Firewall } from './firewall';
+export { default as General } from './general';
 export { default as Health } from './health';
 export { default as Id } from './id';
 export { default as Import } from './import';
@@ -22,21 +24,21 @@ export { default as InstanceType } from './instance-type';
 export { default as Instances } from './instances';
 export { default as Loading } from './loading';
 export { default as Login } from './login';
+export { default as Memory } from './memory';
 export { default as Metadata } from './metadata';
 export { default as Minus } from './minus';
+export { default as Name } from './name';
 export { default as Network } from './network';
 export { default as Package } from './package';
 export { default as Plus } from './plus';
+export { default as Private } from './private';
+export { default as Public } from './public';
+export { default as Randomize } from './randomize';
 export { default as Reset } from './reset';
+export { default as Restart } from './restart';
 export { default as Start } from './start';
 export { default as Stop } from './stop';
+export { default as Storage } from './storage';
 export { default as Tags } from './tags';
 export { default as Triton } from './triton';
 export { default as User } from './user';
-export { default as Randomize } from './randomize';
-export { default as Name } from './name';
-export { default as Fabric } from './fabric';
-export { default as Cpu } from './cpu';
-export { default as Memory } from './memory';
-export { default as Storage } from './storage';
-export { default as General } from './general';

packages/icons/src/private.js

@@ -17,18 +17,16 @@ export default ({
       <Rotate direction={direction}>
         {({ style: rotateStyle }) => (
           <svg
-            width="6"
-            height="10"
-            viewBox="0 0 6 10"
             xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 12 16"
+            width="12"
+            height="16"
             style={{ ...style, ...rotateStyle }}
             {...rest}
           >
             <path
               fill={calcFill({ fill, disabled, light, colors })}
-              fillRule="evenodd"
+              d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
-              opacity=".5"
             />
           </svg>
         )}

packages/icons/src/public.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Colors from './colors';
+import Rotate from './rotate';
+import calcFill from './fill';
+
+export default ({
+  fill = null,
+  light = false,
+  disabled = false,
+  direction = 'down',
+  style = {},
+  ...rest
+}) => (
+  <Colors white text grey>
+    {colors => (
+      <Rotate direction={direction}>
+        {({ style: rotateStyle }) => (
+          <svg
+            viewBox="0 0 12 16"
+            width="12"
+            height="16"
+            style={{ ...style, ...rotateStyle }}
+            {...rest}
+          >
+            <g>
+              <path
+                fill={calcFill({ fill, disabled, light, colors })}
+                d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"
+              />
+            </g>
+          </svg>
+        )}
+      </Rotate>
+    )}
+  </Colors>
+);

packages/my-joy-beta/package.json

@@ -6,14 +6,11 @@
   "repository": "github:yldio/joyent-portal",
   "main": "build/",
   "scripts": {
-    "dev":
+    "dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
-      "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
     "start": "PORT=3069 joyent-react-scripts start",
     "build": "NODE_ENV=production joyent-react-scripts build",
-    "lint-ci":
+    "lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-      "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-    "lint":
-      "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
     "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
     "test-ci": "npm run test",
     "prepublish": "echo 0"

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap

@@ -316,7 +316,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
 
 .c4 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -281,10 +281,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
         </div>
         <div
-          checked={false}
           className="c8"
-          disabled={false}
-          id="a"
         >
           <label
             className="c9"
@@ -349,10 +346,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
         </div>
         <div
-          checked={false}
           className="c8"
-          disabled={false}
-          id="bc"
         >
           <label
             className="c9"
@@ -417,10 +411,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
         </div>
         <div
-          checked={false}
           className="c8"
-          disabled={false}
-          id="be"
         >
           <label
             className="c9"
@@ -485,10 +476,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
         </div>
         <div
-          checked={false}
           className="c8"
-          disabled={false}
-          id="bg"
         >
           <label
             className="c9"
@@ -553,10 +541,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
         </div>
         <div
-          checked={false}
           className="c8"
-          disabled={false}
-          id="bi"
         >
           <label
             className="c9"
@@ -1192,6 +1177,7 @@ exports[`renders <Package /> without throwing 1`] = `
 
 .c7 {
   margin-left: 0.75rem;
+  margin-bottom: 0.75rem;
 }
 
 .c2 {
@@ -1306,8 +1292,6 @@ exports[`renders <Package /> without throwing 1`] = `
         </div>
         <div
           className="c7"
-          disabled={false}
-          id="Y"
         >
           <div
             className="c8"

packages/my-joy-beta/src/components/create-instance/__tests__/network.spec.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Collapsed, Expanded } from '../network';
+import Theme from '@mocks/theme';
+
+it('renders <Network /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Expanded />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Collapsed />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Network {...network} /> without throwing', () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: false,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: false
+  };
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Expanded {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Collapsed {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Network {...network} /> without throwing', () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: false,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: false
+  };
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Expanded {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Collapsed {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Network {...network} public /> without throwing', () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: false,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: false,
+    public: true
+  };
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Expanded {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Collapsed {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Network {...network} fabric /> without throwing', () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: true,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: false
+  };
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Expanded {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Collapsed {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Network {...network} infoExpanded /> without throwing', () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: true,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: true
+  };
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Expanded {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Collapsed {...network} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});

packages/my-joy-beta/src/components/create-instance/network.js

@@ -0,0 +1,205 @@
+import React from 'react';
+import { Field } from 'redux-form';
+import { Margin, Padding } from 'styled-components-spacing';
+import styled from 'styled-components';
+import Flex, { FlexItem } from 'styled-flex-component';
+import remcalc from 'remcalc';
+
+import {
+  H4,
+  P,
+  Card,
+  CardHeader,
+  CardHeaderMeta,
+  CardHeaderBox,
+  CardOutlet,
+  FormGroup,
+  FormLabel,
+  Input,
+  Checkbox,
+  Divider,
+  FabricIcon,
+  DataCenterIcon,
+  PublicIcon,
+  PrivateIcon,
+  ArrowIcon
+} from 'joyent-ui-toolkit';
+
+const Box = styled.div`
+  display: inline-block;
+  background-color: ${props => props.theme.white};
+  border: ${remcalc(1)} solid ${props => props.theme.grey};
+  border-radius: ${remcalc(4)};
+  min-width: ${remcalc(300)};
+`;
+
+export const Collapsed = ({ name, fabric, ...network }) => (
+  <Margin inline right={3} top={3}>
+    <Box>
+      <Flex column>
+        <FlexItem>
+          <Margin left={3} right={3} top={2} bottom={2}>
+            <P>{name}</P>
+          </Margin>
+        </FlexItem>
+        <FlexItem>
+          <Divider height={remcalc(1)} />
+        </FlexItem>
+        <FlexItem>
+          <Margin left={3} right={3} top={2} bottom={2}>
+            <Flex>
+              <Margin right={4}>
+                <FlexItem>
+                  <Flex alignCenter>
+                    <FlexItem>
+                      <Margin right={1}>
+                        {network.public ? <PublicIcon /> : <PrivateIcon />}
+                      </Margin>
+                    </FlexItem>
+                    <FlexItem>
+                      <P>{network.public ? 'Public' : 'Private'}</P>
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+              </Margin>
+              <Margin>
+                <FlexItem>
+                  <Flex alignCenter>
+                    <FlexItem>
+                      <Margin right={1}>
+                        {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                      </Margin>
+                    </FlexItem>
+                    <FlexItem>
+                      <P>{fabric ? 'Fabric' : 'Data center network'}</P>
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+              </Margin>
+            </Flex>
+          </Margin>
+        </FlexItem>
+      </Flex>
+    </Box>
+  </Margin>
+);
+
+export const Expanded = ({
+  id,
+  name,
+  fabric,
+  subnet,
+  description,
+  provision_start_ip,
+  provision_end_ip,
+  selected = false,
+  infoExpanded = false,
+  onInfoClick,
+  ...network
+}) => (
+  <Margin bottom={4}>
+    <Card shadow>
+      <CardHeader secondary={selected}>
+        <CardHeaderBox>
+          <FormGroup name={id} field={Field}>
+            <Checkbox noMargin />
+          </FormGroup>
+        </CardHeaderBox>
+        <CardHeaderMeta paddingLeft={0}>
+          <H4 white={selected}>{name}</H4>
+        </CardHeaderMeta>
+      </CardHeader>
+      <CardOutlet>
+        <Padding all={4}>
+          {description && (
+            <Margin bottom={3}>
+              <P>{description}</P>
+            </Margin>
+          )}
+          <Flex>
+            <Margin right={4}>
+              <FlexItem>
+                <Flex alignCenter>
+                  <FlexItem>
+                    <Margin right={1}>
+                      {network.public ? <PublicIcon /> : <PrivateIcon />}
+                    </Margin>
+                  </FlexItem>
+                  <FlexItem>
+                    <P>{network.public ? 'Public' : 'Private'}</P>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+            </Margin>
+            <Margin right={4}>
+              <FlexItem>
+                <Flex alignCenter>
+                  <FlexItem>
+                    <Margin right={1}>
+                      {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                    </Margin>
+                  </FlexItem>
+                  <FlexItem>
+                    <P>{fabric ? 'Fabric' : 'Data center network'}</P>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+            </Margin>
+          </Flex>
+          {fabric ? (
+            <Margin top={3}>
+              <Card collapsed={!infoExpanded} actionable={!infoExpanded}>
+                <CardHeader
+                  secondary={false}
+                  transparent={false}
+                  onClick={onInfoClick}
+                >
+                  <CardHeaderMeta>
+                    <Padding left={3} right={3}>
+                      <P>Network information</P>
+                    </Padding>
+                  </CardHeaderMeta>
+                  <CardHeaderBox>
+                    <ArrowIcon direction={infoExpanded ? 'up' : 'down'} />
+                  </CardHeaderBox>
+                </CardHeader>
+                {infoExpanded ? (
+                  <CardOutlet>
+                    <Padding all={3}>
+                      <Flex column>
+                        <FlexItem>
+                          <FormGroup name="id">
+                            <FormLabel>ID</FormLabel>
+                            <Input type="text" value={id} />
+                          </FormGroup>
+                        </FlexItem>
+                        <FlexItem>
+                          <FormGroup name="subnet">
+                            <FormLabel>Subnet</FormLabel>
+                            <Input type="text" value={subnet} />
+                          </FormGroup>
+                        </FlexItem>
+                        <FlexItem>
+                          <FormGroup name="ip-range">
+                            <FormLabel>IP range</FormLabel>
+                            <Input
+                              type="text"
+                              value={`${provision_start_ip} - ${provision_end_ip}`}
+                            />
+                          </FormGroup>
+                        </FlexItem>
+                      </Flex>
+                    </Padding>
+                  </CardOutlet>
+                ) : null}
+              </Card>
+            </Margin>
+          ) : null}
+        </Padding>
+      </CardOutlet>
+    </Card>
+  </Margin>
+);
+
+export default ({ small = false, ...rest }) =>
+  small ? <Collapsed {...rest} /> : <Expanded {...rest} />;

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap

@@ -195,7 +195,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
 
 .c4 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;
@@ -558,7 +558,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
 
 .c4 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;
@@ -943,7 +943,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
 
 .c4 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;
@@ -1306,7 +1306,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
 
 .c4 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;
@@ -1669,7 +1669,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
 
 .c4 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;
@@ -2032,7 +2032,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
 
 .c4 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;
@@ -2417,7 +2417,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
 
 .c4 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;

packages/my-joy-beta/src/components/instances/key-value.js

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { Padding } from 'styled-components-spacing';
 import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
 import { Row, Col } from 'react-styled-flexboxgrid';
@@ -6,7 +7,6 @@ import { Field } from 'redux-form';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import titleCase from 'title-case';
-import { Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
@@ -138,24 +138,26 @@ export const KeyValue = ({
         actionable={Boolean(handleHeaderClick)}
         onClick={handleHeaderClick}
       >
-        <CardHeaderMeta>
+        <Padding left={3} right={3}>
-          {method === 'add' || method === 'create' ? (
+          <CardHeaderMeta>
-            <H4>{`${titleCase(method)} ${type}`}</H4>
+            {method === 'add' || method === 'create' ? (
-          ) : (
+              <H4>{`${titleCase(method)} ${type}`}</H4>
-            <CollapsedKeyValue>
+            ) : (
-              {expanded ? (
+              <CollapsedKeyValue>
-                <span>{`${initialValues.name}: `}</span>
+                {expanded ? (
-              ) : (
+                  <span>{`${initialValues.name}: `}</span>
-                <b>{`${initialValues.name}: `}</b>
+                ) : (
-              )}
+                  <b>{`${initialValues.name}: `}</b>
-              <span>{initialValues.value}</span>
+                )}
-            </CollapsedKeyValue>
+                <span>{initialValues.value}</span>
-          )}
+              </CollapsedKeyValue>
-        </CardHeaderMeta>
+            )}
+          </CardHeaderMeta>
+        </Padding>
       </CardHeader>
       {expanded ? (
         <CardOutlet>
-          <Padding all={1}>
+          <Padding all={3}>
             {error && !submitting ? (
               <Row>
                 <Col xs={12}>

packages/my-joy-beta/src/components/instances/summary.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Row, Col } from 'react-styled-flexboxgrid';
 import styled, { withTheme } from 'styled-components';
-import { Margin } from 'styled-components-spacing';
+import { Margin, Padding } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 import is from 'styled-is';
 import titleCase from 'title-case';
@@ -209,169 +209,171 @@ export default withTheme(
     <Row>
       <Col xs={12} sm={12} md={9}>
         <Card>
-          <CardOutlet big>
+          <CardOutlet>
-            <Meta {...instance} />
+            <Padding all={4}>
-            <Row between="xs">
+              <Meta {...instance} />
-              <Col xs={9}>
+              <Row between="xs">
-                <SmallOnly>
+                <Col xs={9}>
-                  <Button
+                  <SmallOnly>
-                    type="button"
+                    <Button
-                    loading={starting}
+                      type="button"
-                    disabled={instance.state !== 'STOPPED'}
+                      loading={starting}
-                    onClick={() => onAction('start')}
+                      disabled={instance.state !== 'STOPPED'}
-                    secondary
+                      onClick={() => onAction('start')}
-                    small
+                      secondary
-                    icon
+                      small
-                  >
+                      icon
-                    <StartIcon disabled={instance.state !== 'STOPPED'} />
+                    >
-                  </Button>
+                      <StartIcon disabled={instance.state !== 'STOPPED'} />
-                </SmallOnly>
+                    </Button>
-                <Medium>
+                  </SmallOnly>
-                  <Button
+                  <Medium>
-                    type="button"
+                    <Button
-                    loading={starting}
+                      type="button"
-                    disabled={instance.state !== 'STOPPED'}
+                      loading={starting}
-                    onClick={() => onAction('start')}
+                      disabled={instance.state !== 'STOPPED'}
-                    secondary
+                      onClick={() => onAction('start')}
-                    bold
+                      secondary
-                    icon
+                      bold
-                  >
+                      icon
-                    <StartIcon disabled={instance.state !== 'STOPPED'} />
+                    >
-                    <span>Start</span>
+                      <StartIcon disabled={instance.state !== 'STOPPED'} />
-                  </Button>
+                      <span>Start</span>
-                </Medium>
+                    </Button>
-                <SmallOnly>
+                  </Medium>
-                  <Button
+                  <SmallOnly>
-                    type="button"
+                    <Button
-                    loading={stopping}
+                      type="button"
-                    disabled={instance.state !== 'RUNNING'}
+                      loading={stopping}
-                    onClick={() => onAction('stop')}
+                      disabled={instance.state !== 'RUNNING'}
-                    secondary
+                      onClick={() => onAction('stop')}
-                    small
+                      secondary
-                    icon
+                      small
-                  >
+                      icon
-                    <StopIcon disabled={instance.state !== 'RUNNING'} />
+                    >
-                  </Button>
+                      <StopIcon disabled={instance.state !== 'RUNNING'} />
-                </SmallOnly>
+                    </Button>
-                <Medium>
+                  </SmallOnly>
-                  <Button
+                  <Medium>
-                    type="button"
+                    <Button
-                    loading={stopping}
+                      type="button"
-                    disabled={instance.state !== 'RUNNING'}
+                      loading={stopping}
-                    onClick={() => onAction('stop')}
+                      disabled={instance.state !== 'RUNNING'}
-                    secondary
+                      onClick={() => onAction('stop')}
-                    bold
+                      secondary
-                    icon
+                      bold
-                  >
+                      icon
-                    <StopIcon disabled={instance.state !== 'RUNNING'} />
+                    >
-                    <span>Stop</span>
+                      <StopIcon disabled={instance.state !== 'RUNNING'} />
-                  </Button>
+                      <span>Stop</span>
-                </Medium>
+                    </Button>
-                <SmallOnly>
+                  </Medium>
-                  <Button
+                  <SmallOnly>
-                    type="button"
+                    <Button
-                    loading={rebooting}
+                      type="button"
-                    disabled={instance.state !== 'RUNNING'}
+                      loading={rebooting}
-                    onClick={() => onAction('reboot')}
+                      disabled={instance.state !== 'RUNNING'}
-                    secondary
+                      onClick={() => onAction('reboot')}
-                    small
+                      secondary
-                    icon
+                      small
-                  >
+                      icon
-                    <ResetIcon disabled={instance.state !== 'RUNNING'} />
+                    >
-                  </Button>
+                      <ResetIcon disabled={instance.state !== 'RUNNING'} />
-                </SmallOnly>
+                    </Button>
-                <Medium>
+                  </SmallOnly>
-                  <Button
+                  <Medium>
-                    type="button"
+                    <Button
-                    loading={rebooting}
+                      type="button"
-                    disabled={instance.state !== 'RUNNING'}
+                      loading={rebooting}
-                    onClick={() => onAction('reboot')}
+                      disabled={instance.state !== 'RUNNING'}
-                    secondary
+                      onClick={() => onAction('reboot')}
-                    bold
+                      secondary
-                    icon
+                      bold
-                  >
+                      icon
-                    <ResetIcon disabled={instance.state !== 'RUNNING'} />
+                    >
-                    <span>Reboot</span>
+                      <ResetIcon disabled={instance.state !== 'RUNNING'} />
-                  </Button>
+                      <span>Reboot</span>
-                </Medium>
+                    </Button>
-              </Col>
+                  </Medium>
-              <Col xs={3}>
+                </Col>
-                <SmallOnly>
+                <Col xs={3}>
-                  <Button
+                  <SmallOnly>
-                    type="button"
+                    <Button
-                    loading={removing}
+                      type="button"
-                    disabled={
+                      loading={removing}
-                      ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                    }
-                    onClick={() => onAction('remove')}
-                    secondary
-                    small
-                    right
-                    icon
-                    error
-                  >
-                    <DeleteIcon
-                      fill={theme.red}
                       disabled={
                         ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
                       }
-                    />
+                      onClick={() => onAction('remove')}
-                  </Button>
+                      secondary
-                </SmallOnly>
+                      small
-                <Medium>
+                      right
-                  <Button
+                      icon
-                    type="button"
+                      error
-                    loading={removing}
+                    >
-                    disabled={
+                      <DeleteIcon
-                      ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                        fill={theme.red}
-                    }
+                        disabled={
-                    onClick={() => onAction('remove')}
+                          ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                    secondary
+                        }
-                    bold
+                      />
-                    right
+                    </Button>
-                    icon
+                  </SmallOnly>
-                    error
+                  <Medium>
-                  >
+                    <Button
-                    <DeleteIcon
+                      type="button"
-                      fill={
+                      loading={removing}
-                        ['RUNNING', 'STOPPED'].indexOf(instance.state) >= 0
-                          ? theme.red
-                          : undefined
-                      }
                       disabled={
                         ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
                       }
-                    />
+                      onClick={() => onAction('remove')}
-                    <span>Remove</span>
+                      secondary
-                  </Button>
+                      bold
-                </Medium>
+                      right
-              </Col>
+                      icon
-            </Row>
+                      error
-            <Margin bottom={5} top={4}>
+                    >
-              <Divider height={remcalc(1)} />
+                      <DeleteIcon
-            </Margin>
+                        fill={
-            <CopiableField
+                          ['RUNNING', 'STOPPED'].indexOf(instance.state) >= 0
-              text={(instance.id || '').split('-')[0]}
+                            ? theme.red
-              label="Short ID"
+                            : undefined
-            />
+                        }
-            <CopiableField text={instance.id} label="ID" />
+                        disabled={
-            <CopiableField text={instance.compute_node} label="CN UUID" />
+                          ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-            {instance.image &&
+                        }
-              instance.image.id && (
+                      />
-                <CopiableField text={instance.image.id} label="Image UUID" />
+                      <span>Remove</span>
-              )}
+                    </Button>
-            <CopiableField
+                  </Medium>
-              text={`ssh root@${instance.primary_ip}`}
+                </Col>
-              label="Login"
+              </Row>
-            />
+              <Margin bottom={5} top={4}>
-            {(instance.ips || []).map((ip, i) => (
+                <Divider height={remcalc(1)} />
+              </Margin>
               <CopiableField
-                key={i}
+                text={(instance.id || '').split('-')[0]}
-                noMargin={i === instance.ips.length - 1}
+                label="Short ID"
-                text={ip}
-                label={`IP address ${i + 1}`}
               />
-            ))}
+              <CopiableField text={instance.id} label="ID" />
+              <CopiableField text={instance.compute_node} label="CN UUID" />
+              {instance.image &&
+                instance.image.id && (
+                  <CopiableField text={instance.image.id} label="Image UUID" />
+                )}
+              <CopiableField
+                text={`ssh root@${instance.primary_ip}`}
+                label="Login"
+              />
+              {(instance.ips || []).map((ip, i) => (
+                <CopiableField
+                  key={i}
+                  noMargin={i === instance.ips.length - 1}
+                  text={ip}
+                  label={`IP address ${i + 1}`}
+                />
+              ))}
+            </Padding>
           </CardOutlet>
         </Card>
       </Col>

packages/my-joy-beta/src/containers/create-instance/__tests__/networks.spec.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Theme from '@mocks/theme';
+import { Networks } from '../networks';
+
+it('renders <Networks /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Networks />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Networks loading /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Networks loading />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Networks loading expanded /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Networks loading expanded />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Networks networks=[] /> without throwing', () => {
+  const networks = [
+    {
+      id: '1',
+      name: 'name',
+      description: 'description',
+      fabric: true,
+      subnet: '255.255.255.0',
+      provision_start_ip: '192.168.1.2',
+      provision_end_ip: '192.168.1.253',
+      selected: false
+    },
+    {
+      id: '2',
+      name: 'name2',
+      description: 'description2',
+      fabric: false,
+      subnet: '255.255.255.0',
+      provision_start_ip: '192.168.1.2',
+      provision_end_ip: '192.168.1.253',
+      selected: true
+    }
+  ];
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Networks networks={networks} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Networks networks=[] expanded /> without throwing', () => {
+  const networks = [
+    {
+      id: '1',
+      name: 'name',
+      description: 'description',
+      fabric: true,
+      subnet: '255.255.255.0',
+      provision_start_ip: '192.168.1.2',
+      provision_end_ip: '192.168.1.253',
+      selected: false
+    },
+    {
+      id: '2',
+      name: 'name2',
+      description: 'description2',
+      fabric: false,
+      subnet: '255.255.255.0',
+      provision_start_ip: '192.168.1.2',
+      provision_end_ip: '192.168.1.253',
+      selected: true
+    }
+  ];
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Networks networks={networks} expanded />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Networks networks=[] proceeded /> without throwing', () => {
+  const networks = [
+    {
+      id: '1',
+      name: 'name',
+      description: 'description',
+      fabric: true,
+      subnet: '255.255.255.0',
+      provision_start_ip: '192.168.1.2',
+      provision_end_ip: '192.168.1.253',
+      selected: false
+    },
+    {
+      id: '2',
+      name: 'name2',
+      description: 'description2',
+      fabric: false,
+      subnet: '255.255.255.0',
+      provision_start_ip: '192.168.1.2',
+      provision_end_ip: '192.168.1.253',
+      selected: true
+    }
+  ];
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Networks networks={networks} proceeded />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});

packages/my-joy-beta/src/containers/create-instance/index.js

@@ -8,6 +8,7 @@ import Image from '@containers/create-instance/image';
 import Metadata from '@containers/create-instance/metadata';
 import Tags from '@containers/create-instance/tags';
 import Package from '@containers/create-instance/package';
+import Networks from '@containers/create-instance/networks';
 
 export default ({ step, ...props }) => (
   <ViewContainer>
@@ -29,5 +30,8 @@ export default ({ step, ...props }) => (
     <Margin bottom={4}>
       <Metadata {...props} expanded={step === 'metadata'} />
     </Margin>
+    <Margin bottom={4}>
+      <Networks {...props} expanded={step === 'networks'} />
+    </Margin>
   </ViewContainer>
 );

packages/my-joy-beta/src/containers/create-instance/metadata.js

@@ -18,6 +18,7 @@ const FORM_NAME_EDIT = i => `CREATE-INSTANCE-METADATA-EDIT-${i}`;
 export const Metadata = ({
   metadata = [],
   expanded,
+  proceeded,
   addOpen,
   handleAddMetadata,
   handleRemoveMetadata,
@@ -45,11 +46,13 @@ export const Metadata = ({
         </P>
       </Margin>
     ) : null}
-    <Margin bottom={4}>
+    {proceeded ? (
-      <H3>
+      <Margin bottom={4}>
-        {metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}
+        <H3>
-      </H3>
+          {metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}
-    </Margin>
+        </H3>
+      </Margin>
+    ) : null}
     {metadata.map(({ name, value, expanded }, index) => (
       <ReduxForm
         form={FORM_NAME_EDIT(index)}
@@ -107,22 +110,27 @@ export const Metadata = ({
             Next
           </Button>
         </Fragment>
-      ) : (
+      ) : proceeded ? (
         <Button type="button" onClick={handleEdit} secondary>
           Edit
         </Button>
-      )}
+      ) : null}
     </div>
   </Fragment>
 );
 
 export default compose(
   connect(({ values }, ownProps) => ({
+    proceeded: get(values, 'create-instance-metadata-proceeded', false),
     addOpen: get(values, 'create-instance-metadata-add-open', false),
     metadata: get(values, 'create-instance-metadata', [])
   })),
   connect(null, (dispatch, { metadata = [], history }) => ({
     handleNext: () => {
+      dispatch(
+        set({ name: 'create-instance-metadata-proceeded', value: true })
+      );
+
       return history.push(`/instances/~create/networks`);
     },
     handleEdit: () => {

packages/my-joy-beta/src/containers/create-instance/networks.js

@@ -0,0 +1,148 @@
+import React, { Fragment } from 'react';
+import { set } from 'react-redux-values';
+import { Margin } from 'styled-components-spacing';
+import { compose, graphql } from 'react-apollo';
+import ReduxForm from 'declarative-redux-form';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+import forceArray from 'force-array';
+
+import { NetworkIcon, P, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
+
+import Title from '@components/create-instance/title';
+import Network from '@components/create-instance/network';
+import ListNetworks from '@graphql/list-networks.gql';
+
+const FORM_NAME = 'CREATE-INSTANCE-NETWORKS';
+
+export const Networks = ({
+  networks = [],
+  expanded = false,
+  proceeded = false,
+  loading = false,
+  setInfoExpanded,
+  handleNext,
+  handleEdit
+}) => {
+  const selected = networks.filter(({ selected }) => selected);
+
+  return (
+    <Fragment>
+      <Title icon={<NetworkIcon />}>Networks</Title>
+      {expanded ? (
+        <Margin bottom={3}>
+          <P>
+            Instances are automatically connected to a private fabric network,
+            which is the best choice for internal communication within your
+            application. Data center networks are the best choice for exposing
+            your application to the public internet (if the data center network
+            is a public network).{' '}
+            <a
+              target="__blank"
+              href="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read more
+            </a>
+          </P>
+        </Margin>
+      ) : null}
+      {proceeded && !expanded ? (
+        <H3>
+          {selected.length} network{selected.length === 1 ? '' : 's'} added
+        </H3>
+      ) : null}
+      {loading && expanded ? <StatusLoader /> : null}
+      {!loading ? (
+        <ReduxForm
+          form={FORM_NAME}
+          destroyOnUnmount={false}
+          forceUnregisterOnUnmount={true}
+        >
+          {props => (
+            <form>
+              {networks.map(
+                ({ id, selected, infoExpanded, ...network }) =>
+                  !expanded && !selected ? null : (
+                    <Network
+                      key={id}
+                      id={id}
+                      selected={selected}
+                      infoExpanded={infoExpanded}
+                      small={!expanded && selected}
+                      onInfoClick={() => setInfoExpanded(id, !infoExpanded)}
+                      {...network}
+                    />
+                  )
+              )}
+            </form>
+          )}
+        </ReduxForm>
+      ) : null}
+      <div>
+        {expanded ? (
+          <Button type="button" onClick={handleNext}>
+            Next
+          </Button>
+        ) : proceeded ? (
+          <Button type="button" onClick={handleEdit} secondary>
+            Edit
+          </Button>
+        ) : null}
+      </div>
+    </Fragment>
+  );
+};
+
+export default compose(
+  graphql(ListNetworks, {
+    props: ({ data }) => {
+      const { networks = [], loading = false, error = null, refetch } = data;
+
+      return {
+        networks: forceArray(networks),
+        loading,
+        error,
+        refetch
+      };
+    }
+  }),
+  connect(
+    ({ values, form }, { networks }) => {
+      const selected = get(form, `${FORM_NAME}.values`, {});
+
+      return {
+        proceeded: get(values, 'create-instance-networks-proceeded', false),
+        networks: networks.map(({ id, ...network }) => ({
+          ...network,
+          selected: Boolean(selected[id]),
+          infoExpanded: get(
+            values,
+            `create-instance-networks-${id}-expanded`,
+            false
+          ),
+          id
+        }))
+      };
+    },
+    (dispatch, { history }) => ({
+      handleNext: () => {
+        dispatch(
+          set({ name: 'create-instance-networks-proceeded', value: true })
+        );
+
+        return history.push('/instances/~create/firewall');
+      },
+      handleEdit: () => {
+        return history.push('/instances/~create/networks');
+      },
+      setInfoExpanded: (id, expanded) => {
+        return dispatch(
+          set({
+            name: `create-instance-networks-${id}-expanded`,
+            value: expanded
+          })
+        );
+      }
+    })
+  )
+)(Networks);

packages/my-joy-beta/src/containers/create-instance/tags.js

@@ -19,6 +19,7 @@ const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
 export const Tags = ({
   tags = [],
   expanded,
+  proceeded,
   addOpen,
   handleAddTag,
   handleRemoveTag,
@@ -45,21 +46,25 @@ export const Tags = ({
         </P>
       </Margin>
     ) : null}
-    <Margin bottom={4}>
+    {proceeded ? (
-      <H3>
+      <Margin bottom={4}>
-        {tags.length} Tag{tags.length === 1 ? '' : 's'}
+        <H3>
-      </H3>
+          {tags.length} Tag{tags.length === 1 ? '' : 's'}
-    </Margin>
+        </H3>
-    <TagList>
+      </Margin>
-      {tags.map(({ name, value }, index) => (
+    ) : null}
-        <Tag
+    {proceeded || expanded ? (
-          key={index}
+      <TagList>
-          name={name}
+        {tags.map(({ name, value }, index) => (
-          value={value}
+          <Tag
-          onRemoveClick={() => handleRemoveTag(index)}
+            key={index}
-        />
+            name={name}
-      ))}
+            value={value}
-    </TagList>
+            onRemoveClick={expanded && (() => handleRemoveTag(index))}
+          />
+        ))}
+      </TagList>
+    ) : null}
     {expanded && addOpen ? (
       <ReduxForm
         form={FORM_NAME_CREATE}
@@ -93,22 +98,25 @@ export const Tags = ({
             Next
           </Button>
         </Fragment>
-      ) : (
+      ) : proceeded ? (
         <Button type="button" onClick={handleEdit} secondary>
           Edit
         </Button>
-      )}
+      ) : null}
     </div>
   </Fragment>
 );
 
 export default compose(
   connect(({ values }, ownProps) => ({
+    proceeded: get(values, 'create-instance-tags-proceeded', false),
     addOpen: get(values, 'create-instance-tags-add-open', false),
     tags: get(values, 'create-instance-tags', [])
   })),
   connect(null, (dispatch, { tags = [], history }) => ({
     handleNext: () => {
+      dispatch(set({ name: 'create-instance-tags-proceeded', value: true }));
+
       return history.push(`/instances/~create/metadata`);
     },
     handleEdit: () => {

packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap

@@ -61,7 +61,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 }
 
 .c6 {
-  margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
+  margin: 0.1875rem 0.625rem;
 }
 
 .c4 {
@@ -146,21 +146,20 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
           </h2>
           <svg
             className="c6 "
-            height="10"
+            height="6"
             style={
               Object {
-                "transform": "rotate(0deg)",
+                "transform": "rotate(-90deg)",
               }
             }
-            viewBox="0 0 6 10"
+            viewBox="0 0 9 6"
-            width="6"
+            width="9"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-              fill="rgba(73, 73, 73, 1)"
+              fill="rgb(151, 151, 151)"
               fillRule="evenodd"
-              opacity=".5"
             />
           </svg>
         </div>
@@ -231,7 +230,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 }
 
 .c6 {
-  margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
+  margin: 0.1875rem 0.625rem;
 }
 
 .c4 {
@@ -316,21 +315,20 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
           </h2>
           <svg
             className="c6 "
-            height="10"
+            height="6"
             style={
               Object {
-                "transform": "rotate(0deg)",
+                "transform": "rotate(-90deg)",
               }
             }
-            viewBox="0 0 6 10"
+            viewBox="0 0 9 6"
-            width="6"
+            width="9"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-              fill="rgba(73, 73, 73, 1)"
+              fill="rgb(151, 151, 151)"
               fillRule="evenodd"
-              opacity=".5"
             />
           </svg>
         </div>
@@ -345,21 +343,20 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
           </h2>
           <svg
             className="c6 "
-            height="10"
+            height="6"
             style={
               Object {
-                "transform": "rotate(0deg)",
+                "transform": "rotate(-90deg)",
               }
             }
-            viewBox="0 0 6 10"
+            viewBox="0 0 9 6"
-            width="6"
+            width="9"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-              fill="rgba(73, 73, 73, 1)"
+              fill="rgb(151, 151, 151)"
               fillRule="evenodd"
-              opacity=".5"
             />
           </svg>
         </div>

packages/my-joy-beta/src/graphql/list-networks.gql

@@ -1,19 +1,15 @@
-query instance($name: String!) {
+query {
-  machines(name: $name) {
+  networks {
     id
     name
-    networks {
+    public
-      id
+    fabric
-      name
+    description
-      public
+    subnet
-      fabric
+    provision_start_ip
-      description
+    provision_end_ip
-      subnet
+    gateway
-      provision_start_ip
+    resolvers
-      provision_end_ip
+    internet_nat
-      gateway
-      resolvers
-      internet_nat
-    }
   }
 }

packages/my-joy-beta/src/router.js

@@ -131,6 +131,11 @@ export default () => (
           exact
           component={props => <CreateInstance {...props} step="metadata" />}
         />
+        <Route
+          path="/instances/~create/user-script"
+          exact
+          component={props => <CreateInstance {...props} step="user-script" />}
+        />
         <Route
           path="/instances/~create/networks"
           exact

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

@@ -25,7 +25,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 }
 
 .c6 {
-  margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
+  margin: 0.1875rem 0.625rem;
 }
 
 .c4 {
@@ -146,21 +146,20 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
           </h2>
           <svg
             className="c6 "
-            height="10"
+            height="6"
             style={
               Object {
-                "transform": "rotate(0deg)",
+                "transform": "rotate(-90deg)",
               }
             }
-            viewBox="0 0 6 10"
+            viewBox="0 0 9 6"
-            width="6"
+            width="9"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-              fill="rgba(73, 73, 73, 1)"
+              fill="rgb(151, 151, 151)"
               fillRule="evenodd"
-              opacity=".5"
             />
           </svg>
         </div>
@@ -175,21 +174,20 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
           </h2>
           <svg
             className="c6 "
-            height="10"
+            height="6"
             style={
               Object {
-                "transform": "rotate(0deg)",
+                "transform": "rotate(-90deg)",
               }
             }
-            viewBox="0 0 6 10"
+            viewBox="0 0 9 6"
-            width="6"
+            width="9"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-              fill="rgba(73, 73, 73, 1)"
+              fill="rgb(151, 151, 151)"
               fillRule="evenodd"
-              opacity=".5"
             />
           </svg>
         </div>
@@ -204,21 +202,20 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
           </h2>
           <svg
             className="c6 "
-            height="10"
+            height="6"
             style={
               Object {
-                "transform": "rotate(0deg)",
+                "transform": "rotate(-90deg)",
               }
             }
-            viewBox="0 0 6 10"
+            viewBox="0 0 9 6"
-            width="6"
+            width="9"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-              fill="rgba(73, 73, 73, 1)"
+              fill="rgb(151, 151, 151)"
               fillRule="evenodd"
-              opacity=".5"
             />
           </svg>
         </div>
@@ -233,21 +230,20 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
           </h2>
           <svg
             className="c6 "
-            height="10"
+            height="6"
             style={
               Object {
-                "transform": "rotate(0deg)",
+                "transform": "rotate(-90deg)",
               }
             }
-            viewBox="0 0 6 10"
+            viewBox="0 0 9 6"
-            width="6"
+            width="9"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-              fill="rgba(73, 73, 73, 1)"
+              fill="rgb(151, 151, 151)"
               fillRule="evenodd"
-              opacity=".5"
             />
           </svg>
         </div>
@@ -282,7 +278,7 @@ exports[`Breadcrumb Default Item 1`] = `
 }
 
 .c2 {
-  margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
+  margin: 0.1875rem 0.625rem;
 }
 
 .c0 {
@@ -307,21 +303,20 @@ exports[`Breadcrumb Default Item 1`] = `
   </h2>
   <svg
     className="c2 "
-    height="10"
+    height="6"
     style={
       Object {
-        "transform": "rotate(0deg)",
+        "transform": "rotate(-90deg)",
       }
     }
-    viewBox="0 0 6 10"
+    viewBox="0 0 9 6"
-    width="6"
+    width="9"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+      d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-      fill="rgba(73, 73, 73, 1)"
+      fill="rgb(151, 151, 151)"
       fillRule="evenodd"
-      opacity=".5"
     />
   </svg>
 </div>

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

@@ -1,17 +1,17 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import remcalc from 'remcalc';
 
 import { H2 } from '../text/headings';
-import { Chevron } from '../icons';
+import { Arrow as BaseArrow } from '../icons';
 
 const Name = H2.extend`
   color: ${props => props.theme.primary};
   margin: ${remcalc(12)} 0;
 `;
 
-const Arrow = styled(Chevron)`
+const Arrow = styled(BaseArrow)`
-  margin: ${remcalc(8)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
+  margin: ${remcalc(3)} ${remcalc(10)};
 `;
 
 const Container = styled.div`
@@ -31,7 +31,7 @@ const BaseLink = styled(({ component, children, ...rest }) =>
   }
 `;
 
-export default ({ children, component, ...rest }) => {
+export default withTheme(({ children, component, theme, ...rest }) => {
   const _child = component ? (
     <BaseLink {...rest} component={component}>
       {children}
@@ -43,7 +43,7 @@ export default ({ children, component, ...rest }) => {
   return (
     <Container>
       <Name name="breadcrum-item">{_child}</Name>
-      <Arrow />
+      <Arrow direction="left" fill={theme.greyDark} />
     </Container>
   );
-};
+});

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

@@ -13,8 +13,6 @@ exports[`Card Card With Header 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: auto;
-  min-height: 7.8125rem;
   position: relative;
   border-width: 0.0625rem;
   border-style: solid;
@@ -37,8 +35,6 @@ exports[`Card Card With Header 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: auto;
-  min-height: 7.8125rem;
   position: relative;
   border-width: 0.0625rem;
   border-style: solid;
@@ -97,8 +93,6 @@ exports[`Card Default Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: auto;
-  min-height: 7.8125rem;
   position: relative;
   border-width: 0.0625rem;
   border-style: solid;
@@ -131,8 +125,6 @@ exports[`Card Disabled Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: auto;
-  min-height: 7.8125rem;
   position: relative;
   border-width: 0.0625rem;
   border-style: solid;
@@ -169,8 +161,6 @@ exports[`Card Secondary Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: auto;
-  min-height: 7.8125rem;
   position: relative;
   border-width: 0.0625rem;
   border-style: solid;
@@ -206,8 +196,6 @@ exports[`Card Shadow Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: auto;
-  min-height: 7.8125rem;
   position: relative;
   border-width: 0.0625rem;
   border-style: solid;

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

@@ -22,8 +22,6 @@ export const BaseCard = styled.div`
   flex: 1 0 auto;
   flex-direction: column;
 
-  height: auto;
-  min-height: ${remcalc(125)};
   position: relative;
 
   border-width: ${remcalc(1)};

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

@@ -42,8 +42,8 @@ const BaseHeader = BaseCard.extend`
 `;
 
 const BaseBox = BaseCard.extend`
-  width: ${remcalc(49)};
+  width: ${remcalc(46)};
-  min-width: ${remcalc(49)};
+  min-width: ${remcalc(46)};
   min-height: ${remcalc(46)};
 
   display: inline-flex;
@@ -85,7 +85,6 @@ const BaseMeta = BaseCard.extend`
   min-height: ${remcalc(47)};
   width: auto;
   height: auto;
-  padding: ${remcalc(12)};
 
   display: inline-flex;
   flex: 1 1 auto;
@@ -141,7 +140,7 @@ Box.defaultProps = {
   border: null
 };
 
-export const Meta = ({ children, ...rest }) => (
+export const Meta = Baseline(({ children, ...rest }) => (
   <Subscriber channel="card">
     {value => (
       <BaseMeta {...rest} {...value} name="card-header-meta" collapsed>
@@ -149,7 +148,7 @@ export const Meta = ({ children, ...rest }) => (
       </BaseMeta>
     )}
   </Subscriber>
-);
+));
 
 const Header = ({ children, transparent, shadow, ...rest }) => {
   const render = ({ secondary, tertiary, collapsed, actionable, ...value }) => {

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

@@ -14,13 +14,8 @@ const BaseOutlet = BaseCard.extend`
   flex: 1 1 auto;
   flex-direction: column;
   border-width: 0;
-  padding: ${remcalc(12)};
   margin-bottom: 0;
 
-  ${is('big')`
-      padding: ${remcalc(24)};
-  `};
-
   background-color: transparent;
 
   ${is('collapsed')`

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

@@ -164,10 +164,7 @@ exports[`Form Checkbox 1`] = `
     />
   </div>
   <div
-    checked={false}
     className="c4"
-    disabled={false}
-    id=""
   >
     <label
       className="c5"
@@ -293,7 +290,7 @@ exports[`Form FormMeta 1`] = `
 exports[`Form Input 1`] = `
 .c0 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;
@@ -542,8 +539,6 @@ exports[`Form Radio 1`] = `
   </div>
   <div
     className="c4"
-    disabled={false}
-    id=""
   >
     <label
       className="c5"
@@ -583,7 +578,7 @@ exports[`Form Select 1`] = `
 
 .c2 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
   margin-bottom: 0.5rem;
@@ -683,7 +678,7 @@ exports[`Form Select 1`] = `
 exports[`Form Textarea 1`] = `
 .c1 {
   box-sizing: border-box;
-  width: 100%;
+  width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
   margin-bottom: 0.5rem;

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

@@ -24,7 +24,7 @@ const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
 const style = css`
   box-sizing: border-box;
 
-  width: 100%;
+  width: ${remcalc(300)};
   height: ${height};
   min-height: ${height};
 

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

@@ -181,7 +181,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
       const el = OuterContainer ? (
         <OuterContainer {...rest}>
           {toggle}
-          <Container {...rest}>{children}</Container>
+          {children ? <Container>{children}</Container> : null}
         </OuterContainer>
       ) : (
         toggle

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

@@ -6,17 +6,19 @@ import {
   Arrow as BaseArrow,
   Bin as BaseBin,
   Checkcircle as BaseCheckcircle,
-  Chevron as BaseChevron,
   Clipboard as BaseClipboard,
   Close as BaseClose,
   Cns as BaseCns,
   Copy as BaseCopy,
+  Cpu as BaseCpu,
   DataCenter as BaseDataCenter,
   Delete as BaseDelete,
   Dot as BaseDot,
   Duplicate as BaseDuplicate,
   Edit as BaseEdit,
+  Fabric as BaseFabric,
   Firewall as BaseFirewall,
+  General as BaseGeneral,
   Health as BaseHealth,
   Id as BaseId,
   Import as BaseImport,
@@ -25,49 +27,44 @@ import {
   Instances as BaseInstances,
   Loading as BaseLoading,
   Login as BaseLogin,
+  Memory as BaseMemory,
   Metadata as BaseMetadata,
   Minus as BaseMinus,
+  Name as BaseName,
   Network as BaseNetwork,
   Package as BasePackage,
   Plus as BasePlus,
+  Private as BasePrivate,
+  Public as BasePublic,
+  Randomize as BaseRandomize,
   Reset as BaseReset,
+  Restart as BaseRestart,
   Start as BaseStart,
   Stop as BaseStop,
+  Storage as BaseStorage,
   Tags as BaseTags,
   Triton as BaseTriton,
-  User as BaseUser,
+  User as BaseUser
-  Fabric as BaseFabric,
-  Name as BaseName,
-  Randomize as BaseRandomize,
-  Cpu as BaseCpu,
-  Memory as BaseMemory,
-  Storage as BaseStorage,
-  General as BaseGeneral
 } from 'joyent-icons';
 
-export const General = Baseline(BaseGeneral);
-export const Storage = Baseline(BaseStorage);
-export const Cpu = Baseline(BaseCpu);
-export const Memory = Baseline(BaseMemory);
-export const Fabric = Baseline(BaseFabric);
-export const Name = Baseline(BaseName);
-export const Randomize = Baseline(BaseRandomize);
 export const Actions = Baseline(BaseActions);
 export const Affinity = Baseline(BaseAffinity);
 export const Arrow = Baseline(BaseArrow);
 export const Bin = Baseline(BaseBin);
 export const Checkcircle = Baseline(BaseCheckcircle);
-export const Chevron = Baseline(BaseChevron);
 export const Clipboard = Baseline(BaseClipboard);
 export const Close = Baseline(BaseClose);
 export const Cns = Baseline(BaseCns);
 export const Copy = Baseline(BaseCopy);
+export const Cpu = Baseline(BaseCpu);
 export const DataCenter = Baseline(BaseDataCenter);
 export const Delete = Baseline(BaseDelete);
 export const Dot = Baseline(BaseDot);
 export const Duplicate = Baseline(BaseDuplicate);
 export const Edit = Baseline(BaseEdit);
+export const Fabric = Baseline(BaseFabric);
 export const Firewall = Baseline(BaseFirewall);
+export const General = Baseline(BaseGeneral);
 export const Health = Baseline(BaseHealth);
 export const Id = Baseline(BaseId);
 export const Import = Baseline(BaseImport);
@@ -76,14 +73,21 @@ export const InstanceType = Baseline(BaseInstanceType);
 export const Instances = Baseline(BaseInstances);
 export const Loading = Baseline(BaseLoading);
 export const Login = Baseline(BaseLogin);
+export const Memory = Baseline(BaseMemory);
 export const Metadata = Baseline(BaseMetadata);
 export const Minus = Baseline(BaseMinus);
+export const Name = Baseline(BaseName);
 export const Network = Baseline(BaseNetwork);
 export const Package = Baseline(BasePackage);
 export const Plus = Baseline(BasePlus);
+export const Private = Baseline(BasePrivate);
+export const Public = Baseline(BasePublic);
+export const Randomize = Baseline(BaseRandomize);
 export const Reset = Baseline(BaseReset);
+export const Restart = Baseline(BaseRestart);
 export const Start = Baseline(BaseStart);
 export const Stop = Baseline(BaseStop);
+export const Storage = Baseline(BaseStorage);
 export const Tags = Baseline(BaseTags);
 export const Triton = Baseline(BaseTriton);
 export const User = Baseline(BaseUser);

packages/ui-toolkit/src/index.js

@@ -73,17 +73,19 @@ export {
   Arrow as ArrowIcon,
   Bin as BinIcon,
   Checkcircle as CheckcircleIcon,
-  Chevron as ChevronIcon,
   Clipboard as ClipboardIcon,
   Close as CloseIcon,
   Cns as CnsIcon,
   Copy as CopyIcon,
+  Cpu as CpuIcon,
   DataCenter as DataCenterIcon,
   Delete as DeleteIcon,
   Dot as DotIcon,
   Duplicate as DuplicateIcon,
   Edit as EditIcon,
+  Fabric as FabricIcon,
   Firewall as FirewallIcon,
+  General as GeneralIcon,
   Health as HealthIcon,
   Id as IdIcon,
   Import as ImportIcon,
@@ -92,22 +94,24 @@ export {
   Instances as InstancesIcon,
   Loading as LoadingIcon,
   Login as LoginIcon,
+  Memory as MemoryIcon,
   Metadata as MetadataIcon,
   Minus as MinusIcon,
+  Name as NameIcon,
   Network as NetworkIcon,
   Package as PackageIcon,
   Plus as PlusIcon,
+  Private as PrivateIcon,
+  Public as PublicIcon,
+  Randomize as RandomizeIcon,
   Reset as ResetIcon,
+  Restart as RestartIcon,
   Start as StartIcon,
   Stop as StopIcon,
+  Storage as StorageIcon,
   Tags as TagsIcon,
   Triton as TritonIcon,
   User as UserIcon,
-  Name as NameIcon,
-  General as GeneralIcon,
-  Storage as StorageIcon,
-  Cpu as CpuIcon,
-  Memory as MemoryIcon
 } from './icons';
 
 export {

yarn.lock

@@ -1872,10 +1872,10 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     electron-to-chromium "^1.2.7"
 
 browserslist@^2.1.2, browserslist@^2.10.2, browserslist@^2.5.1:
-  version "2.11.0"
+  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.0.tgz#50350d6873a82ebe0f3ae5483658c571ae5f9d7d"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.1.tgz#02fda29d9a2164b879100126e7b0d0b57e43a7bb"
   dependencies:
-    caniuse-lite "^1.0.30000784"
+    caniuse-lite "^1.0.30000789"
     electron-to-chromium "^1.3.30"
 
 bser@1.0.2:
@@ -2042,12 +2042,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.30000789"
+  version "1.0.30000790"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000789.tgz#5cf3fec75480041ab162ca06413153141e234325"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000790.tgz#a8023e6eb9fe9c0ef3d60b4427ce104ea87d381c"
 
-caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000784:
+caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000784, caniuse-lite@^1.0.30000789:
-  version "1.0.30000789"
+  version "1.0.30000790"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000789.tgz#2e3d937b267133f63635ef7f441fac66360fc889"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000790.tgz#c954cca780046f34c4b433d324ef419e1db51a53"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -2196,13 +2196,12 @@ clap@^1.0.9:
     chalk "^1.1.3"
 
 class-utils@^0.3.5:
-  version "0.3.5"
+  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.5.tgz#17e793103750f9627b2176ea34cfd1b565903c80"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
   dependencies:
     arr-union "^3.1.0"
     define-property "^0.2.5"
     isobject "^3.0.0"
-    lazy-cache "^2.0.2"
     static-extend "^0.1.1"
 
 classnames@^2.2.5:
@@ -2392,10 +2391,14 @@ command-join@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf"
 
-commander@2.12.x, commander@^2.11.0, commander@^2.9.0, commander@~2.12.1:
+commander@2.12.x, commander@~2.12.1:
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
 
+commander@^2.11.0, commander@^2.9.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
 commander@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
@@ -3268,8 +3271,8 @@ dns-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
 
 dns-packet@^1.0.1:
-  version "1.2.2"
+  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.2.2.tgz#a8a26bec7646438963fc86e06f8f8b16d6c8bf7a"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.0.tgz#7e2b33bf992678a44534c7117d39196bda684d33"
   dependencies:
     ip "^1.1.0"
     safe-buffer "^5.0.1"
@@ -3392,9 +3395,9 @@ duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
-duplexify@^3.1.2, duplexify@^3.4.2:
+duplexify@^3.4.2, duplexify@^3.5.3:
-  version "3.5.1"
+  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.1.tgz#4e1516be68838bc90a49994f0b39a6e5960befcd"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.3.tgz#8b5818800df92fd0125b27ab896491912858243e"
   dependencies:
     end-of-stream "^1.0.0"
     inherits "^2.0.1"
@@ -3402,12 +3405,13 @@ duplexify@^3.1.2, duplexify@^3.4.2:
     stream-shift "^1.0.0"
 
 duplicate-package-checker-webpack-plugin@^2.0.2:
-  version "2.0.2"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/duplicate-package-checker-webpack-plugin/-/duplicate-package-checker-webpack-plugin-2.0.2.tgz#2b01772ec781ec507c8b96615e06deca3552110a"
+  resolved "https://registry.yarnpkg.com/duplicate-package-checker-webpack-plugin/-/duplicate-package-checker-webpack-plugin-2.1.0.tgz#6723ee32d89947997470778973c10788cb69e496"
   dependencies:
     chalk "^2.3.0"
     find-root "^1.0.0"
     lodash "^4.17.4"
+    semver "^5.4.1"
 
 ecc-jsbn@~0.1.1:
   version "0.1.1"
@@ -3464,8 +3468,8 @@ encoding@^0.1.11:
     iconv-lite "~0.4.13"
 
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
-  version "1.4.0"
+  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
   dependencies:
     once "^1.4.0"
 
@@ -6536,8 +6540,8 @@ log-update@^1.0.2:
     cli-cursor "^1.0.2"
 
 loglevel@^1.4.1:
-  version "1.6.0"
+  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.0.tgz#ae0caa561111498c5ba13723d6fb631d24003934"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
 
 longest-streak@^2.0.1:
   version "2.0.2"
@@ -8031,8 +8035,8 @@ prettier@1.7.4:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
 
 prettier@^1.7.4:
-  version "1.10.1"
+  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.1.tgz#01423fea6957ea23618d37d339ef0e7f7c967fc6"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.2.tgz#1af8356d1842276a99a5b5529c82dd9e9ad3cc93"
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -8128,13 +8132,20 @@ pump@^1.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-pumpify@^1.3.3:
+pump@^2.0.0:
-  version "1.3.5"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.3.5.tgz#1b671c619940abcaeac0ad0e3a3c164be760993b"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.0.tgz#7946da1c8d622b098e2ceb2d3476582470829c9d"
   dependencies:
-    duplexify "^3.1.2"
+    end-of-stream "^1.1.0"
-    inherits "^2.0.1"
+    once "^1.3.1"
-    pump "^1.0.0"
+
+pumpify@^1.3.3:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.3.6.tgz#00d40e5ded0a3bf1e0788b1c0cf426a42882ab64"
+  dependencies:
+    duplexify "^3.5.3"
+    inherits "^2.0.3"
+    pump "^2.0.0"
 
 punycode@1.3.2:
   version "1.3.2"
@@ -8250,8 +8261,8 @@ randomatic@^1.1.3:
     kind-of "^4.0.0"
 
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
-  version "2.0.5"
+  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
   dependencies:
     safe-buffer "^5.1.0"
 
@@ -8594,7 +8605,7 @@ react@16.2.0, react@^0.14.0, react@^15.5.4, react@^16.2.0:
 
 read-all-stream@^3.0.0:
   version "3.1.0"
-  resolved "http://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
+  resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
   dependencies:
     pinkie-promise "^2.0.0"
     readable-stream "^2.0.0"
@@ -10115,8 +10126,8 @@ stylelint@^8.4.0:
     table "^4.0.1"
 
 stylis@^3.0.0, stylis@^3.4.0:
-  version "3.4.7"
+  version "3.4.8"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.7.tgz#4fa57ef276d1ed20aafda4e1a97c35b5b87d59ce"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3"
 
 sugarss@^1.0.0:
   version "1.0.1"