feat(my-joy-beta): create instane page starter

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

@@ -0,0 +1,433 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Toolbar /> without throwing 1`] = `
+Array [
+  .c2 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c2 + p,
+.c2 + small,
+.c2 + h1,
+.c2 + h2,
+.c2 + label,
+.c2 + h3,
+.c2 + h4,
+.c2 + h5,
+.c2 + div,
+.c2 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c1 {
+  margin-right: 0.25rem;
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1"
+    />
+    <p
+        className="c2"
+    />
+</div>,
+  .c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c0 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1 c2"
+        height="0.0625rem"
+    />
+</div>,
+]
+`;
+
+exports[`renders <Toolbar icon="NameIcon"/> without throwing 1`] = `
+Array [
+  .c2 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c2 + p,
+.c2 + small,
+.c2 + h1,
+.c2 + h2,
+.c2 + label,
+.c2 + h3,
+.c2 + h4,
+.c2 + h5,
+.c2 + div,
+.c2 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c1 {
+  margin-right: 0.25rem;
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1"
+    >
+        <svg
+            className=""
+            height="17"
+            style={
+                Object {
+                    "transform": "rotate(0deg)",
+                  }
+            }
+            version="1.1"
+            viewBox="0 0 16.24 13.55"
+            width="17"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+        >
+            <path
+                d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
+                fill="rgba(73, 73, 73, 1)"
+            />
+        </svg>
+    </div>
+    <p
+        className="c2"
+    />
+</div>,
+  .c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c0 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1 c2"
+        height="0.0625rem"
+    />
+</div>,
+]
+`;
+
+exports[`renders <Toolbar icon="Test" label="Instance name"/> without throwing 1`] = `
+Array [
+  .c2 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c2 + p,
+.c2 + small,
+.c2 + h1,
+.c2 + h2,
+.c2 + label,
+.c2 + h3,
+.c2 + h4,
+.c2 + h5,
+.c2 + div,
+.c2 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c1 {
+  margin-right: 0.25rem;
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1"
+    >
+        <svg
+            className=""
+            height="17"
+            style={
+                Object {
+                    "transform": "rotate(0deg)",
+                  }
+            }
+            version="1.1"
+            viewBox="0 0 16.24 13.55"
+            width="17"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+        >
+            <path
+                d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
+                fill="rgba(73, 73, 73, 1)"
+            />
+        </svg>
+    </div>
+    <p
+        className="c2"
+    >
+        Instance name
+    </p>
+</div>,
+  .c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c0 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1 c2"
+        height="0.0625rem"
+    />
+</div>,
+]
+`;
+
+exports[`renders <Toolbar label="Test"/> without throwing 1`] = `
+Array [
+  .c2 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c2 + p,
+.c2 + small,
+.c2 + h1,
+.c2 + h2,
+.c2 + label,
+.c2 + h3,
+.c2 + h4,
+.c2 + h5,
+.c2 + div,
+.c2 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c1 {
+  margin-right: 0.25rem;
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1"
+    />
+    <p
+        className="c2"
+    >
+        Test
+    </p>
+</div>,
+  .c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c0 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1 c2"
+        height="0.0625rem"
+    />
+</div>,
+]
+`;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Name from '../name';
+import Theme from '@mocks/theme';
+
+it('renders <Name /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Name />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Name expanded /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Name expanded />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Name name="test" /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Name name="test" />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Name pristine={false} /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Name pristine={false} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { NameIcon } from 'joyent-ui-toolkit';
+
+import Title from '../title';
+import Theme from '@mocks/theme';
+
+it('renders <Toolbar /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Title />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Toolbar label="Test"/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Title label="Test" />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Toolbar icon="NameIcon"/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Title icon={<NameIcon />} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Toolbar icon="Test" label="Instance name"/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Title icon={<NameIcon />} label="Instance name" />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});

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

@@ -0,0 +1,48 @@
+import React, { Fragment } from 'react';
+import { Field } from 'redux-form';
+import { Margin } from 'styled-components-spacing';
+
+import {
+  NameIcon,
+  H3,
+  P,
+  FormGroup,
+  FormLabel,
+  Input,
+  FormMeta,
+  Button
+} from 'joyent-ui-toolkit';
+
+import Title from './title';
+
+export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
+  <form onSubmit={handleSubmit}>
+    <Title icon={<NameIcon />} label="Instance name" />
+    {expanded ? (
+      <Fragment>
+        <Margin bottom={3}>
+          <P>
+            Your instance name will be used to identify this specific instance.
+          </P>
+        </Margin>
+        <FormGroup name="name" fluid field={Field}>
+          <FormLabel>Name</FormLabel>
+          <Input />
+          <FormMeta />
+        </FormGroup>
+        <Button type="submit" disabled={pristine}>
+          Next
+        </Button>
+      </Fragment>
+    ) : (
+      <Fragment>
+        <Margin bottom={2} top={3}>
+          <H3>{name}</H3>
+        </Margin>
+        <Button type="button" secondary onClick={onCancel}>
+          Edit
+        </Button>
+      </Fragment>
+    )}
+  </form>
+);

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

@@ -0,0 +1,18 @@
+import React, { Fragment } from 'react';
+import Flex from 'styled-flex-component';
+import { Margin } from 'styled-components-spacing';
+import remcalc from 'remcalc';
+
+import { Divider, P } from 'joyent-ui-toolkit';
+
+export default ({ icon, label }) => (
+  <Fragment>
+    <Flex>
+      <Margin right={1}>{icon}</Margin>
+      <P>{label}</P>
+    </Flex>
+    <Margin top={1} bottom={3}>
+      <Divider height={remcalc(1)} />
+    </Margin>
+  </Fragment>
+);

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

@@ -1268,7 +1268,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    28 days
+    about 1 month
   </td>
   <td
     className="c12"
@@ -1276,7 +1276,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    28 days
+    about 1 month
   </td>
   <td
     className="c13 c14"

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

@@ -716,6 +716,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c6 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -2877,6 +2878,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c6 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -5208,6 +5210,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c6 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -7426,6 +7429,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c6 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -9479,6 +9483,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c6 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -11641,6 +11646,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c6 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -13637,6 +13643,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c6 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;

packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap

@@ -104,6 +104,7 @@ exports[`renders <Header /> without throwing 1`] = `
 
 .c3 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Margin } from 'styled-components-spacing';
+
+import { ViewContainer, H2 } from 'joyent-ui-toolkit';
+
+import Name from '@containers/create-instance/name';
+
+export default ({ step }) => (
+  <ViewContainer>
+    <Margin top={4} bottom={4}>
+      <H2>Create Instances</H2>
+    </Margin>
+    <Name expanded={step === 'name'} />
+  </ViewContainer>
+);

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { compose } from 'react-apollo';
+import ReduxForm from 'declarative-redux-form';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+
+import Name from '@components/create-instance/name';
+
+const NameContainer = ({ expanded, name, handleSubmit, handleCancel }) => (
+  <ReduxForm
+    form="create-instance-name"
+    destroyOnUnmount={false}
+    forceUnregisterOnUnmount={true}
+    onSubmit={handleSubmit}
+  >
+    {props => (
+      <Name
+        {...props}
+        name={name}
+        expanded={expanded}
+        onCancel={handleCancel}
+      />
+    )}
+  </ReduxForm>
+);
+
+export default compose(
+  withRouter,
+  connect(
+    (state, ownProps) => ({
+      ...ownProps,
+      name: get(state, 'form.create-instance-name.values.name')
+    }),
+    (dispatch, { history }) => ({
+      handleSubmit: () => history.push(`/instances/~create/image`),
+      handleCancel: () => history.push(`/instances/~create/name`)
+    })
+  )
+)(NameContainer);

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -75,11 +75,6 @@ exports[`renders <List /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -118,23 +113,6 @@ exports[`renders <List /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c10:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c10:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c10 svg + span {
   margin-left: 0.75rem;
 }
@@ -841,11 +819,11 @@ exports[`renders <List /> without throwing 1`] = `
           </label>
           <button
             className="c10 c11 c12"
-            disabled={true}
+            disabled={false}
             href=""
             icon={true}
-            onClick={undefined}
+            onClick={[Function]}
-            type="submit"
+            type="button"
           >
             Create Instance
           </button>
@@ -1088,11 +1066,6 @@ exports[`renders <List error /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1131,23 +1104,6 @@ exports[`renders <List error /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c10:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c10:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c10 svg + span {
   margin-left: 0.75rem;
 }
@@ -1906,11 +1862,11 @@ exports[`renders <List error /> without throwing 1`] = `
           </label>
           <button
             className="c10 c11 c12"
-            disabled={true}
+            disabled={false}
             href=""
             icon={true}
-            onClick={undefined}
+            onClick={[Function]}
-            type="submit"
+            type="button"
           >
             Create Instance
           </button>
@@ -2187,11 +2143,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2230,23 +2181,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c10:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c10:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c10 svg + span {
   margin-left: 0.75rem;
 }
@@ -3112,11 +3046,11 @@ exports[`renders <List instances /> without throwing 1`] = `
           </label>
           <button
             className="c10 c11 c12"
-            disabled={true}
+            disabled={false}
             href=""
             icon={true}
-            onClick={undefined}
+            onClick={[Function]}
-            type="submit"
+            type="button"
           >
             Create Instance
           </button>
@@ -3652,11 +3586,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3695,23 +3624,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c10:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c10:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c10 svg + span {
   margin-left: 0.75rem;
 }
@@ -5287,11 +5199,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </label>
           <button
             className="c10 c11 c12"
-            disabled={true}
+            disabled={false}
             href=""
             icon={true}
-            onClick={undefined}
+            onClick={[Function]}
-            type="submit"
+            type="button"
           >
             Create Instance
           </button>
@@ -6307,11 +6219,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6350,23 +6257,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c10:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c10:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c10 svg + span {
   margin-left: 0.75rem;
 }
@@ -7942,11 +7832,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </label>
           <button
             className="c10 c11 c12"
-            disabled={true}
+            disabled={false}
             href=""
             icon={true}
-            onClick={undefined}
+            onClick={[Function]}
-            type="submit"
+            type="button"
           >
             Create Instance
           </button>
@@ -8962,11 +8852,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9005,23 +8890,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   pointer-events: none;
 }
 
-.c10:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c10:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c10 svg + span {
   margin-left: 0.75rem;
 }
@@ -10806,11 +10674,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </label>
           <button
             className="c10 c11 c12"
-            disabled={true}
+            disabled={false}
             href=""
             icon={true}
-            onClick={undefined}
+            onClick={[Function]}
-            type="submit"
+            type="button"
           >
             Create Instance
           </button>
@@ -12278,8 +12146,8 @@ exports[`renders <List loading /> without throwing 1`] = `
             disabled={true}
             href=""
             icon={true}
-            onClick={undefined}
+            onClick={[Function]}
-            type="submit"
+            type="button"
           >
             Create Instance
           </button>

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -173,6 +173,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 
 .c16 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -1009,6 +1010,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c34 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -2099,6 +2101,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 
 .c22 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -3824,6 +3827,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c16 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -1442,6 +1442,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c7 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -3811,6 +3812,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c7 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -173,6 +173,7 @@ exports[`renders <Tags /> without throwing 1`] = `
 
 .c16 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -1025,6 +1026,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 
 .c34 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -2085,6 +2087,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 
 .c16 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -2958,6 +2961,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 
 .c34 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -4458,6 +4462,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 
 .c38 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -5511,6 +5516,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
 
 .c16 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -6611,6 +6617,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 
 .c16 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;

packages/my-joy-beta/src/containers/instances/list.js

@@ -52,7 +52,8 @@ export const List = ({
   submitting,
   handleAction,
   toggleSelectAll,
-  handleSortBy
+  handleSortBy,
+  history
 }) => {
   const _instances = forceArray(instances);
 
@@ -137,7 +138,7 @@ export const List = ({
             searchPlaceholder="Search for name, state, tags, etc..."
             searchable={!_loading}
             actionLabel="Create Instance"
-            actionable={false}
+            onActionClick={() => history.push(`/instances/~create`)}
           />
         )}
       </ReduxForm>

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

@@ -39,6 +39,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 
 .c5 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -208,6 +209,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 
 .c5 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;

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

@@ -19,6 +19,8 @@ import {
   Resize as InstanceResize
 } from '@containers/instances';
 
+import CreateInstance from '@containers/create-instance';
+
 export default () => (
   <BrowserRouter>
     <PageContainer>
@@ -93,6 +95,63 @@ export default () => (
 
       {/* Actions */}
       <Switch>
+        {/* Create Instance */}
+        <Route
+          path="/instances/~create/"
+          exact
+          component={({ match }) => <Redirect to="/instances/~create/name" />}
+        />
+        <Route
+          path="/instances/~create/name"
+          exact
+          component={() => <CreateInstance step="name" />}
+        />
+        <Route
+          path="/instances/~create/image"
+          exact
+          component={() => <CreateInstance step="image" />}
+        />
+        <Route
+          path="/instances/~create/package"
+          exact
+          component={() => <CreateInstance step="package" />}
+        />
+        <Route
+          path="/instances/~create/tags"
+          exact
+          component={() => <CreateInstance step="tags" />}
+        />
+        <Route
+          path="/instances/~create/metadata"
+          exact
+          component={() => <CreateInstance step="metadata" />}
+        />
+        <Route
+          path="/instances/~create/networks"
+          exact
+          component={() => <CreateInstance step="networks" />}
+        />
+        <Route
+          path="/instances/~create/firewall"
+          exact
+          component={() => <CreateInstance step="firewall" />}
+        />
+        <Route
+          path="/instances/~create/cns"
+          exact
+          component={() => <CreateInstance step="cns" />}
+        />
+        <Route
+          path="/instances/~create/affinity"
+          exact
+          component={() => <CreateInstance step="affinity" />}
+        />
+        <Route
+          path="/instances/~create/summary"
+          exact
+          component={() => <CreateInstance step="summary" />}
+        />
+
         <Route
           path="/instances/~resize/:instance"
           exact

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

@@ -3,6 +3,7 @@
 exports[`Breadcrumb Default Breadcrumb 1`] = `
 .c5 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -259,6 +260,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 exports[`Breadcrumb Default Item 1`] = `
 .c1 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;

packages/ui-toolkit/src/index.js

@@ -102,7 +102,8 @@ export {
   Stop as StopIcon,
   Tags as TagsIcon,
   Triton as TritonIcon,
-  User as UserIcon
+  User as UserIcon,
+  Name as NameIcon
 } from './icons';
 
 export {

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

@@ -8,7 +8,7 @@ exports[`Button H1 1`] = `
   font-size: 2.25rem;
   line-height: 2.8125rem;
   font-style: normal;
-  font-stretch: normal;
+  font-weight: normal;
   margin: 0;
 }
 
@@ -35,6 +35,7 @@ exports[`Button H1 1`] = `
 exports[`Button H2 1`] = `
 .c0 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
   margin: 0;
@@ -63,6 +64,7 @@ exports[`Button H2 1`] = `
 exports[`Button H3 1`] = `
 .c0 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
   margin: 0;
@@ -120,6 +122,7 @@ exports[`Button H4 1`] = `
 exports[`Button H5 1`] = `
 .c0 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
@@ -148,6 +151,7 @@ exports[`Button H5 1`] = `
 exports[`Button H6 1`] = `
 .c0 {
   color: rgba(73,73,73,1);
+  font-weight: normal;
   line-height: 1.125rem;
   font-size: 0.8125rem;
   margin: 0;

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

@@ -9,7 +9,7 @@ export const H1 = NH1.extend`
   font-size: ${remcalc(36)};
   line-height: ${remcalc(45)};
   font-style: normal;
-  font-stretch: normal;
+  font-weight: normal;
   margin: 0;
 
   ${is('inline')`
@@ -37,7 +37,7 @@ export const H1 = NH1.extend`
 
 export const H2 = styled.h2`
   color: ${props => props.theme.text};
-
+  font-weight: normal;
   line-height: ${remcalc(30)};
   font-size: ${remcalc(24)};
   margin: 0;
@@ -67,7 +67,7 @@ export const H2 = styled.h2`
 
 export const H3 = styled.h3`
   color: ${props => props.theme.text};
-
+  font-weight: normal;
   line-height: ${remcalc(26)};
   font-size: ${remcalc(21)};
   margin: 0;
@@ -128,7 +128,7 @@ export const H4 = styled.h4`
 
 export const H5 = styled.h4`
   color: ${props => props.theme.text};
-
+  font-weight: normal;
   line-height: ${remcalc(24)};
   font-size: ${remcalc(15)};
   margin: 0;
@@ -158,7 +158,7 @@ export const H5 = styled.h4`
 
 export const H6 = styled.h6`
   color: ${props => props.theme.text};
-
+  font-weight: normal;
   line-height: ${remcalc(18)};
   font-size: ${remcalc(13)};
   margin: 0;