feat: new tables and affinity prototype

joyent.code-workspace

@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "prototypes/create-instance-icons"
+		},
+		{
+			"path": "packages/ui-toolkit"
+		}
+	],
+	"settings": {}
+}

package.json

@@ -78,6 +78,7 @@
     "react": "16.1.1",
     "react-dom": "16.1.1",
     "react-modal": "2.4.1",
-    "hoist-non-react-statics": "2.3.1"
+    "hoist-non-react-statics": "2.3.1",
+    "webpack-sources": "1.0.1"
   }
 }

packages/my-joy-beta/package.json

@@ -61,7 +61,7 @@
     "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
     "jest-transform-graphql": "^2.1.0",
-    "joyent-react-scripts": "^3.1.0",
+    "joyent-react-scripts": "^3.1.1",
     "react-test-renderer": "^16.1.1",
     "redrun": "^5.10.0",
     "serve": "^6.4.1",

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

@@ -60,7 +60,7 @@ const Item = ({
   onStartSnap
 }) => (
   <TableTr>
-    <TableTd center middle>
+    <TableTd paddingRight="0" paddingLeft="18px" left middle>
       <FormGroup name={name} reduxForm>
         <Checkbox />
       </FormGroup>
@@ -207,7 +207,7 @@ export default ({
     <Table>
       <TableThead>
         <TableTr>
-          <TableTh xs="48" />
+          <TableTh xs="38" padding="0" />
           <TableTh xs="80" left bottom>
             <P>Id</P>
           </TableTh>
@@ -229,10 +229,10 @@ export default ({
   return (
     <form>
       <Row between="xs">
-        <Col xs={8} sm={8} lg={6}>
+        <Col xs={8} sm={8} lg={8}>
           <Row>
             <Col xs={7} sm={7} md={6} lg={6}>
-              <FormGroup name="filter" reduxForm>
+              <FormGroup name="filter" fluid reduxForm>
                 <FormLabel>Filter instances</FormLabel>
                 <Input
                   placeholder="Search for name, state, tags, etc..."
@@ -241,8 +241,8 @@ export default ({
                 />
               </FormGroup>
             </Col>
-            <Col xs={5} sm={3} lg={3}>
+            <Col xs={5} sm={3} lg={4}>
-              <FormGroup name="sort" reduxForm>
+              <FormGroup name="sort" fluidreduxForm>
                 <FormLabel>Sort</FormLabel>
                 <Select disabled={!items.length} fluid>
                   <option value="name">Name</option>
@@ -261,10 +261,10 @@ export default ({
             </Col>
           </Row>
         </Col>
-        <Col xs={4} sm={4} lg={6}>
+        <Col xs={4} sm={4} lg={4}>
           <Row end="xs">
-            <Col xs={6} sm={4} md={3} lg={2}>
+            <Col xs={6} sm={4} md={3} lg={3}>
-              <FormGroup>
+              <FormGroup fluid>
                 <FormLabel>&#8291;</FormLabel>
                 <Select
                   value="actions"
@@ -311,8 +311,8 @@ export default ({
                 </Select>
               </FormGroup>
             </Col>
-            <Col xs={6} sm={6} md={5} lg={2}>
+            <Col xs={6} sm={6} md={5} lg={4}>
-              <FormGroup>
+              <FormGroup fluid>
                 <FormLabel>&#8291;</FormLabel>
                 <Button
                   type="button"

packages/ui-toolkit/package.json

@@ -75,7 +75,7 @@
     "jest-matcher-utils": "^21.2.1",
     "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
-    "joyent-react-scripts": "^3.1.0",
+    "joyent-react-scripts": "^3.1.1",
     "lodash.isboolean": "^3.0.3",
     "navalia": "^1.2.0",
     "react": "^16.1.1",

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

@@ -23,7 +23,7 @@ const style = css`
   position: relative;
 
   ${typography.normal};
-
+  ${typography.loadedFontFamily};
   font-size: ${remcalc(15)};
   text-align: center;
   font-style: normal;
@@ -155,7 +155,7 @@ const style = css`
   `};
 
   ${is('small')`
-    padding: ${remcalc(13)} ${remcalc(18)};
+    padding: ${remcalc(14)} ${remcalc(14)};
   `};
 
   ${is('icon')`
@@ -171,13 +171,18 @@ const style = css`
   ${is('marginless')`
     margin: 0;
   `};
+
+
+  ${is('bold')`
+    font-weight: bold;
+  `};
 `;
 
 const StyledButton = NButton.extend`
   min-width: ${remcalc(120)};
 
   ${style} & + button {
-    margin-left: ${remcalc(20)};
+    margin-left: ${remcalc(6)};
   }
 `;
 

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

@@ -102,6 +102,7 @@ const BaseMeta = BaseCard.extend`
   background-color: transparent;
   border-width: 0;
   box-shadow: none;
+  color: inherit;
 `;
 
 export const Box = ({ children, border, actionable, ...rest }) => {

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

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { Row } from 'react-styled-flexboxgrid';
-import remcalc from 'remcalc';
 import is from 'styled-is';
 
 import Baseline from '../baseline';

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

@@ -26,7 +26,7 @@ const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
 
 const style = css`
   box-sizing: border-box;
-
+  ${typography.loadedFontFamily};
   width: 100%;
   height: ${height};
   min-height: ${height};
@@ -40,6 +40,16 @@ const style = css`
   border: ${border.unchecked};
   color: ${color};
 
+  &::-webkit-input-placeholder {
+    color: rgba(73, 73, 73, 0.5);
+  }
+  &::-moz-placeholder {
+    color: rgba(73, 73, 73, 0.5);
+  }
+  &:-ms-input-placeholder {
+    color: rgba(73, 73, 73, 0.5);
+  }
+
   ${is('disabled')`
     background-color: ${props => props.theme.disabled};
     color: ${props => props.theme.textDisabled};
@@ -77,6 +87,14 @@ const style = css`
     }
   }
 
+  ${is('small')`
+    width: ${remcalc(120)}
+  `};
+
+  ${is('xSmall')`
+    width: ${remcalc(80)}
+  `};
+
   ${is('error')`
     border-color: ${props => props.theme.redDark}
   `};
@@ -85,6 +103,12 @@ const style = css`
     border-color: ${props => props.theme.orangeDark}
   `};
 
+  ${is('wrapped')`
+    margin: 0;
+    border: none;
+    width: ${remcalc(120)};
+  `};
+
   ${is('success')`
     border-color: ${props => props.theme.greenDark}
   `};

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

@@ -33,8 +33,9 @@ const Label = styled.label`
   position: absolute;
   width: ${remcalc(18)};
   height: ${remcalc(18)};
-  top: 0;
   box-sizing: border-box;
+  top: 0;
+  right: 0;
 
   cursor: pointer;
 
@@ -103,7 +104,6 @@ const Label = styled.label`
 const InnerContainer = styled.div`
   display: inline-block;
   vertical-align: text-bottom;
-  margin-right: ${remcalc(8)};
   width: ${remcalc(18)};
   height: ${remcalc(18)};
   position: relative;

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

@@ -1,14 +1,15 @@
-import { Fieldset } from 'normalized-styled-components';
+import React from 'react';
+import styled from 'styled-components';
+import is from 'styled-is';
 
 import Baseline from '../baseline';
 
-const StyledFieldset = Fieldset.extend`
+const StyledFieldset = styled.div`
   display: inline-block;
   margin: 0;
   padding: 0;
   border: none;
   overflow: hidden;
-  width: 100%;
   height: auto;
 
   -webkit-margin-start: 0;
@@ -17,6 +18,16 @@ const StyledFieldset = Fieldset.extend`
   -webkit-padding-start: 0;
   -webkit-padding-end: 0;
   -webkit-padding-after: 0;
+
+  ${is('fluid')`
+    width: 100%;
+  `};
 `;
 
-export default Baseline(StyledFieldset);
+const Fieldset = ({ children, ...rest }) => (
+  <StyledFieldset role="group" {...rest}>
+    {children}
+  </StyledFieldset>
+);
+
+export default Baseline(Fieldset);

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

@@ -3,12 +3,24 @@ import { Broadcast } from 'joy-react-broadcast';
 import { Field } from 'redux-form';
 import PropTypes from 'prop-types';
 import rndId from 'rnd-id';
+import styled from 'styled-components';
+import is from 'styled-is';
 
 import Fieldset from './fieldset';
 import Baseline from '../baseline';
 
 const Noop = ({ children }) => children;
 
+const Wrapper = styled(Fieldset)`
+  ${is('center')`
+    align-items: center;
+  `};
+
+  ${is('flex')`
+    display: flex;
+  `};
+`;
+
 class FormGroup extends Component {
   constructor(props) {
     super(props);
@@ -26,11 +38,11 @@ class FormGroup extends Component {
     };
 
     return (
-      <Fieldset className={className} style={style}>
+      <Wrapper className={className} style={style} {...rest}>
         <Broadcast channel="input-group" value={value}>
           <Noop>{children}</Noop>
         </Broadcast>
-      </Fieldset>
+      </Wrapper>
     );
   }
 

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

@@ -10,4 +10,5 @@ export { default as Radio, RadioList } from './radio';
 export { default as Select } from './select';
 export { default as Toggle, ToggleList } from './toggle';
 export { default as NumberInput } from './number-input';
+export { default as InputDropdown } from './input-dropdown';
 export { NumberInputNormalize } from './number-input';

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const InputDropdown = styled.div`
+  background: ${props => props.theme.white};
+  border: ${remcalc(1)} solid #d8d8d8;
+  box-sizing: border-box;
+  border-radius: ${remcalc(4)};
+  margin-bottom: ${remcalc(8)};
+  margin-top: ${remcalc(8)};
+`;
+
+export default InputDropdown;;

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

@@ -9,6 +9,7 @@ const StyledLabel = Label.extend`
   margin-right: ${remcalc(12)};
   font-weight: bold;
   white-space: pre;
+  font-size: ${remcalc(13)};
 
   ${is('disabled')`
     color:  ${props => props.theme.grey};

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

@@ -43,10 +43,25 @@ const SelectWrapper = styled.div`
 const select = Baseline(BaseInput(Stylable('select')));
 const StyledSelect = select.extend`
   position: relative;
+  padding: ${remcalc(12)};
+  padding-right: ${remcalc(25)};
+  
   ${is('disabled')`
     border-color:  ${props => props.theme.grey};
     color:  ${props => props.theme.grey};
   `};
+
+  ${is('wrapped')`
+    margin: 0;
+    border: none;
+    width: ${remcalc(65)};
+    border-left: ${remcalc(1)} solid ${props => props.theme.grey};
+    border-radius: 0 ${remcalc(4)} ${remcalc(4)} 0;
+
+    &:focus {
+      border-left: ${remcalc(1)} solid ${props => props.theme.grey};
+    }
+  `};
 `;
 
 /**

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

@@ -16,6 +16,12 @@ const Box = styled.div`
   align-self: stretch;
   order: 0;
   width: ${remcalc(150)};
+  display: flex;
+
+  ${is('beta')`
+    align-items: center;
+    margin-top: ${remcalc(6)}
+  `}
 `;
 
 export default ({ children, ...rest }) => (

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

@@ -38,6 +38,7 @@ const Box = styled.section`
   order: 0;
   display: flex;
   align-items: center;
+  padding: 0 ${remcalc(18)};
 
   svg {
     margin-right: ${remcalc(6)};

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

@@ -1,8 +1,30 @@
+import React from 'react';
 import styled from 'styled-components';
+import remcalc from 'remcalc';
 
-export default styled.ul`
+const UL = styled.ul`
   padding: 0;
   margin: 0;
   display: flex;
   list-style: none;
+  a {
+    padding: ${remcalc(15)};
+    line-height: ${remcalc(24)};
+    font-size: ${remcalc(15)};
+    color: ${props => props.theme.white};
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 200ms ease;
+    max-height: ${remcalc(53)};
+    min-height: ${remcalc(53)};
+    box-sizing: border-box;
+    &:hover,
+    &.active {
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
 `;
+
+export default ({ children, ...rest }) => <UL {...rest}>{children}</UL>;

packages/ui-toolkit/src/index.js

@@ -4,7 +4,7 @@ export { default as Baseline } from './baseline';
 export { default as Button } from './button';
 export { default as Label } from './label';
 export { PageContainer, RootContainer, ViewContainer } from './layout';
-export { H1, H2, H3 } from './text/headings';
+export { H1, H2, H3, H4, H5 } from './text/headings';
 export { default as P } from './text/p';
 export { default as Small } from './text/small';
 export { default as Title } from './text/title';
@@ -65,7 +65,8 @@ export {
   Toggle,
   ToggleList,
   NumberInput,
-  NumberInputNormalize
+  NumberInputNormalize,
+  InputDropdown
 } from './form';
 
 export {
@@ -119,7 +120,7 @@ export {
 export {
   Container as TooltipContainer,
   Target as TooltipTarget,
-  default as Tolltip
+  default as Tooltip
 } from './tooltip';
 
 export {

packages/ui-toolkit/src/layout/view-container.js

@@ -5,6 +5,8 @@ import remcalc from 'remcalc';
 import { styled as breakpoints } from '../breakpoints';
 
 export default Grid.extend`
+  max-width: ${remcalc(1000)};
+
   ${breakpoints.smallOnly`
     padding-left: ${remcalc(6)};
     padding-right: ${remcalc(6)};

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

@@ -45,8 +45,8 @@ const Column = css`
   white-space: nowrap;
 
   box-sizing: border-box;
-  padding: 0 ${remcalc(8)} 0 ${remcalc(8)};
+  padding: 0 ${remcalc(18)};
-  height: ${remcalc(48)};
+  height: ${remcalc(60)};
 
   ${handleBreakpoint('xs')};
 
@@ -116,22 +116,33 @@ const Column = css`
 `;
 
 const BaseTable = styled.table`
-  border-collapse: collapse;
+  overflow: hidden;
+  border-spacing: 0;
+  border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  max-width: 100%;
 `;
 
 const BaseThead = styled.thead`
   width: 100%;
+
+  th:first-child {
+    border-top-left-radius: ${remcalc(4)};
+  }
+
+  th:last-child {
+    border-top-right-radius: ${remcalc(4)};
+  }
+
+  th {
+    border-bottom-width: 0;
+  }
 `;
 
 const BaseTbody = styled.tbody`
   width: 100%;
 
-  border-width: ${remcalc(1)};
-  border-style: solid;
-  border-color: ${props => props.theme.grey};
-
   ${is('shadow')`
     box-shadow: ${bottomShadow};
   `};
@@ -148,29 +159,74 @@ const BaseTbody = styled.tbody`
 const BaseTh = styled.th`
   ${Column};
 
-  border-left-width: 0;
+  text-align: left;
-  border-right-width: 0;
+  padding: ${remcalc(12)} ${remcalc(24)};
-  border-top-width: 0;
+  height: ${remcalc(42)};
-  padding-top: 0;
+  color: ${props => props.theme.greyLight};
-  padding-bottom: ${remcalc(5)};
+  font-weight: 500;
+
+  ${is('selected')`
+    color: ${props => props.theme.text};
+  `};
+
+  &:not(:first-child) {
+    border-left-width: 0;
+  }
+
+  &:not(:last-child) {
+    border-right-width: 0;
+  }
+
+  ${is('right')`
+    text-align: right;
+  `};
 
   ${ColumnBorder};
 `;
 
 const BaseTd = styled.td`
   ${Column};
+  transition: all 200ms ease;
+  border-bottom-width: 0;
+  vertical-align: middle;
 
-  border-left-width: 0;
+  * {
-  border-right-width: 0;
+    vertical-align: middle;
+  }
+
+  &:not(:first-child) {
+    border-left-width: 0;
+  }
+
+  &:not(:last-child) {
+    border-right-width: 0;
+  }
+
+  ${is('right')`
+    text-align: right;
+  `};
 
   ${ColumnBorder};
 `;
 
 const BaseTr = styled.tr`
   display: table-row;
-
   color: ${props => props.theme.text};
   background-color: ${props => props.theme.white};
+  box-shadow: 0 ${remcalc(2)} 0 rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+
+  ${is('selected')`
+    box-shadow: none;
+    td {
+      border: 1px solid ${props => props.theme.primary};
+      background-color: rgba(59, 70, 204, 0.05);;
+    }
+  `};
+
+  &:last-child td {
+    border-bottom-width: ${remcalc(1)};
+  }
 
   ${is('actionable')`
     cursor: pointer;
@@ -186,6 +242,8 @@ const BaseTr = styled.tr`
   ${is('header')`
     color: ${props => props.theme.text};
     background-color: transparent;
+    border: none;
+    box-shadow: none;
   `};
 `;
 

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

@@ -93,3 +93,26 @@ export const H4 = styled.h4`
     margin-top: ${remcalc(12)};
   }
 `;
+
+
+export const H5 = styled.h4`
+  margin: 0;
+  ${typography.color};
+  ${typography.fontFamily};
+  ${typography.normal};
+  line-height: ${remcalc(24)};
+  font-size: ${remcalc(15)};
+
+  & + p,
+  & + small,
+  & + h1,
+  & + h2,
+  & + label,
+  & + h3,
+  & + h4,
+  & + h5,
+  & + div,
+  & + span {
+    margin-top: ${remcalc(12)};
+  }
+`;

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

@@ -1,4 +1,4 @@
-export { H1, H2, H3, H4 } from './headings';
+export { H1, H2, H3, H4, H5 } from './headings';
 export { default as P } from './p';
 export { default as Small } from './small';
 export { default as Label } from '../label';

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

@@ -34,7 +34,8 @@ const white = {
 
 const grey = {
   grey: 'rgb(216, 216, 216)',
-  greyTransparent: 'rgba(73, 73, 73, 0.8)'
+  greyTransparent: 'rgba(73, 73, 73, 0.8)',
+  greyLight: 'rgb(189, 189, 189)'
 };
 
 const green = {

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

@@ -10,11 +10,11 @@ import style from './style';
 const arrowClassName = rndId();
 
 const Popper = styled(BasePopper)`
-  box-shadow: 0 0 ${remcalc(2)} rgba(0, 0, 0, 0.5);
   padding: ${remcalc(13)} ${remcalc(18)};
+  font-weight: normal;
 
   ${style({
-    background: 'secondaryHover',
+    background: 'text',
     color: 'white',
     border: 'transparent',
     arrow: arrowClassName

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

@@ -4,6 +4,7 @@ import remcalc from 'remcalc';
 export default ({ background, color, border, arrow }) => css`
   background: ${props => props.theme[background]};
   color: ${props => props.theme[color]};
+  z-index: 999;
 
   border-radius: ${remcalc(4)};
 

prototypes/cra-boilerplate/package.json

@@ -32,7 +32,7 @@
     "babel-preset-joyent-portal": "^3.3.3",
     "eslint": "^4.11.0",
     "eslint-config-joyent-portal": "^3.2.0",
-    "joyent-react-scripts": "^3.1.0",
+    "joyent-react-scripts": "^3.1.1",
     "prettier": "^1.8.2",
     "stylelint": "^8.2.0",
     "stylelint-config-joyent-portal": "^2.0.1"

prototypes/create-instance-icons/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": "joyent-portal",
+  "plugins": [
+    ["inline-react-svg", {
+      "ignorePattern": "libre-franklin"
+    }]
+  ]
+}

prototypes/create-instance-icons/.dockerignore

@@ -0,0 +1,9 @@
+src/components/base/*.css
+node_modules
+coverage
+.nyc_output
+docs/static
+!docs/static/index.html
+docs/node_modules
+dist
+package-lock.json

prototypes/create-instance-icons/.eslintignore

@@ -0,0 +1,4 @@
+.nyc_output
+coverage
+dist
+build

prototypes/create-instance-icons/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": "joyent-portal",
+  "rules": {
+    "no-console": 0,
+    "new-cap": 0,
+    // temp
+    "no-undef": 1,
+    "no-debugger": 1,
+    "no-negated-condition": 0,
+    "jsx-a11y/href-no-hash": 0
+  }
+}

prototypes/create-instance-icons/.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+

prototypes/create-instance-icons/.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-joyent-portal"]
+}

prototypes/create-instance-icons/.tern-project

@@ -0,0 +1,15 @@
+{
+  "libs": [
+    "ecmascript",
+    "browser"
+  ],
+  "plugins": {
+    "doc_comment": true,
+    "local-scope": true,
+    "jsx": true,
+    "node": true,
+    "webpack": {
+      "configPath": "./node_modules/react-scripts/config/webpack.config.dev.js"
+    }
+  }
+}

prototypes/create-instance-icons/.travis.yml

@@ -0,0 +1,9 @@
+
+language: node_js
+node_js:
+  - "8"
+cache:
+  directories:
+    - node_modules
+notifications:
+  email: false

prototypes/create-instance-icons/README.md

@@ -0,0 +1,21 @@
+# my-joyent
+
+[![Docker Repository on Quay](https://quay.io/repository/yldio/my-joyent/status)](https://quay.io/repository/yldio/my-joyent)
+[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
+[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg)](https://github.com/RichardLitt/standard-readme)
+
+## Table of Contents
+
+* [Usage](#usage)
+* [License](#license)
+
+## Usage
+
+```
+npm run start
+open http://0.0.0.0:3069
+```
+
+## License
+
+MPL-2.0

prototypes/create-instance-icons/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "joyent-create-instance-icons",
+  "version": "1.0.0",
+  "license": "MPL-2.0",
+  "private": true,
+  "repository": "github:yldio/joyent-portal",
+  "main": "build/",
+  "scripts": {
+    "dev": "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:css": "echo 0 `# stylelint './src/**/*.js'`",
+    "lint:js": "eslint . --fix",
+    "lint": "redrun -s lint:*",
+    "test": "NODE_ENV=test ./test/run --env=jsdom",
+    "test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
+    "prepublish": "echo 0"
+  },
+  "dependencies": {
+    "apollo": "^0.2.2",
+    "graphql-tag": "^2.5.0",
+    "joyent-ui-toolkit": "^2.0.1",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isequal": "^4.5.0",
+    "normalized-styled-components": "^1.0.17",
+    "prop-types": "^15.6.0",
+    "react": "^16.1.1",
+    "react-apollo": "^1.4.16",
+    "react-dom": "^16.1.1",
+    "react-popper": "^0.7.4",
+    "react-redux": "^5.0.6",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "react-styled-flexboxgrid": "^2.1.1",
+    "redux": "^3.7.2",
+    "redux-form": "^7.1.2",
+    "remcalc": "^1.0.9",
+    "styled-components": "^2.2.3",
+    "styled-components-spacing": "^2.1.3",
+    "styled-is": "^1.1.0",
+    "unitcalc": "^1.1.1"
+  },
+  "devDependencies": {
+    "apr-for-each": "^1.0.6",
+    "apr-main": "^2.0.2",
+    "babel-minify-webpack-plugin": "^0.2.0",
+    "babel-plugin-inline-react-svg": "^0.4.0",
+    "babel-preset-joyent-portal": "^3.3.3",
+    "commitizen": "^2.9.6",
+    "cross-env": "^5.1.1",
+    "eslint": "^4.11.0",
+    "eslint-config-joyent-portal": "3.2.0",
+    "eslint-config-prettier": "^2.7.0",
+    "eslint-plugin-markdown": "^1.0.0-beta.6",
+    "jest": "^21.2.1",
+    "jest-alias-preprocessor": "^1.1.1",
+    "jest-cli": "^21.2.1",
+    "jest-diff": "^21.2.1",
+    "jest-junit": "^3.2.1",
+    "jest-matcher-utils": "^21.2.1",
+    "jest-snapshot": "^21.2.1",
+    "jest-styled-components": "^4.9.0",
+    "jest-transform-graphql": "^2.1.0",
+    "joyent-react-scripts": "^3.1.1",
+    "lodash.sortby": "^4.7.0",
+    "mz": "^2.7.0",
+    "react-scripts": "^1.0.17",
+    "react-test-renderer": "^16.1.1",
+    "redrun": "^5.10.0",
+    "stylelint": "^8.2.0",
+    "stylelint-config-joyent-portal": "^2.0.1"
+  }
+}

prototypes/create-instance-icons/public/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="theme-color" content="#1E313B">
+    <title>My Joyent</title>
+    <style>
+      html, body, #root {
+        height: 100%;
+      }
+
+      #root {
+        display: flex;
+        flex-flow: column;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>
+      You need to enable Javascript to view this page
+    </noscript>
+  </body>
+</html>

prototypes/create-instance-icons/public/manifest.json

@@ -0,0 +1,30 @@
+{
+  "short_name": "Joyent",
+  "name": "My Joyent",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon.ico",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon.ico",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon.ico",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#1E313B",
+  "background_color": "#FAFAFA"
+}

prototypes/create-instance-icons/src/app.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { theme, RootContainer } from 'joyent-ui-toolkit';
+import { ApolloProvider } from 'react-apollo';
+
+import { client, store } from '@state/store';
+import Router from '@root/router';
+
+const fullTheme = {
+  ...theme,
+  flexboxgrid: {
+    gridSize: 12, // rem
+    gutterWidth: 1.25, // rem
+    outerMargin: 1.875, // rem
+    mediaQuery: 'only screen',
+    container: {
+      sm: 46, // rem
+      md: 56, // rem
+      lg: 59 // rem
+    },
+    breakpoints: {
+      xs: 0, // em
+      sm: 48, // em
+      md: 64, // em
+      lg: 75 // em
+    }
+  },
+  spacing: {
+    0.5: '4px',
+    0: '0px',
+    1: '6px',
+    2: '12px',
+    3: '18px',
+    4: '24px',
+    5: '30px',
+    6: '36px',
+    10: '60px'
+  }
+};
+
+export default () => (
+  <ApolloProvider client={client} store={store}>
+    <ThemeProvider theme={fullTheme}>
+      <RootContainer>
+        <Router />
+      </RootContainer>
+    </ThemeProvider>
+  </ApolloProvider>
+);

prototypes/create-instance-icons/src/assets/cloud.svg

@@ -0,0 +1 @@
+<svg width="176" height="60" viewBox="0 0 176 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>joyent-cloud-1</title><desc>Created using Figma</desc><path id="a" fill="#D8D8D8" d="M175.67 60a16.303 16.303 0 0 0-2.724-7.875 16.344 16.344 0 0 0-6.262-5.508 16.37 16.37 0 0 0-16.115.838 38.689 38.689 0 0 0-5.527-30.199 38.775 38.775 0 0 0-11.168-11.013A38.85 38.85 0 0 0 103.561 1.1a38.839 38.839 0 0 0-14.184 6.714 38.77 38.77 0 0 0-10.362 11.773 38.707 38.707 0 0 0-4.843 14.909 25.76 25.76 0 0 0-13.037-7.712 25.79 25.79 0 0 0-15.123.944 25.746 25.746 0 0 0-11.974 9.273 25.684 25.684 0 0 0-4.677 14.39 16.35 16.35 0 0 0-7.919-5.67 16.375 16.375 0 0 0-9.744-.166 16.352 16.352 0 0 0-8.107 5.399A16.31 16.31 0 0 0 0 60h175.67z"/></svg>

prototypes/create-instance-icons/src/assets/cpu.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>cpu</title><path fill="#8043DC" fill-rule="evenodd" d="M8 16h8V8H8v8zm-1 1h10V7H7v10z"/><path fill="#8043DC" fill-rule="evenodd" d="M20 18c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2h12c1.103 0 2 .897 2 2v12zm3-5a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1V6a4 4 0 0 0-4-4h-2V1a1 1 0 1 0-2 0v1h-1V1a1 1 0 1 0-2 0v1h-1V1a1 1 0 1 0-2 0v1H6a4 4 0 0 0-4 4v2H1a1 1 0 1 0 0 2h1v1H1a1 1 0 1 0 0 2h1v1H1a1 1 0 1 0 0 2h1v2a4 4 0 0 0 4 4h2v1a1 1 0 1 0 2 0v-1h1v1a1 1 0 1 0 2 0v-1h1v1a1 1 0 1 0 2 0v-1h2a4 4 0 0 0 4-4v-2h1a1 1 0 1 0 0-2h-1v-1h1z"/></svg>

prototypes/create-instance-icons/src/assets/gp.svg

@@ -0,0 +1 @@
+<svg width="22" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: GP</title><desc>Created using Figma</desc><path fill="#E08A0E" fill-rule="evenodd" d="M17 16a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7 17h1v-2H7v2zm-2 0h1v-2H5v2zm-2 0h1v-2H3v2zm14-7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7 11h1V9H7v2zm-2 0h1V9H5v2zm-2 0h1V9H3v2zm16-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5h1V3H7v2zM5 5h1V3H5v2zM3 5h1V3H3v2zM2 18h18v-4H2v4zm0-6h18V8H2v4zm0-6h18V2H2v4zm20-4a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v4c0 .366.105.705.277 1A1.977 1.977 0 0 0 0 8v4c0 .366.105.705.277 1A1.977 1.977 0 0 0 0 14v4a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2v-4c0-.366-.105-.705-.277-1 .172-.295.277-.634.277-1V8c0-.366-.105-.705-.277-1 .172-.295.277-.634.277-1V2z"/></svg>

prototypes/create-instance-icons/src/assets/mo.svg

@@ -0,0 +1 @@
+<svg width="23" height="23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: MO</title><desc>Created using Figma</desc><path transform="rotate(45 7.8 18.83)" fill="#32ABCF" fill-rule="evenodd" d="M3 15h3v-2H3v2zm0 2.999h3v-2H3v2zm0-6h3v-2H3v2zm0-3h3V7H3v2zM3 6h3V4H3v2zM2 20h7V2H2v18zM12 9a1 1 0 1 0 0-2h-1V6h1a1 1 0 1 0 0-2h-1V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2h1a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1V9h1z"/></svg>

prototypes/create-instance-icons/src/assets/reorder.svg

@@ -0,0 +1,2 @@
+<svg viewBox="0 0 6 11" width="6" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><path transform="matrix(0 1 -1 0 6 7.3)" fill="#464646" fill-rule="evenodd" d="M.685 0L0 .85 2.136 3 0 5.15.685 6l2.982-3L.685 0z"/>
+<path id="b" fill-rule="evenodd" d="M.685 0L0 .85 2.136 3 0 5.15.685 6l2.982-3L.685 0z" transform="matrix(0 -1 1 0 0 3.7)" fill="#464646"/></svg>

prototypes/create-instance-icons/src/assets/so.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: SO</title><desc>Created using Figma</desc><path fill="#A88A83" fill-rule="evenodd" d="M18 17a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14zM17 0H3a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3z"/><path  transform="translate(4 4)" fill="#A88A83" fill-rule="evenodd" d="M6 11c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5zM6 0a6 6 0 0 0 0 12A6 6 0 0 0 6 0z"/><path transform="translate(9 9)" fill="#A88A83" fill-rule="evenodd" d="M0 1a1 1 0 1 0 2 0 1 1 0 1 0-2 0z"/></svg>

prototypes/create-instance-icons/src/components/affinity/List.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+import { Row, Col } from 'react-styled-flexboxgrid';
+
+import {
+  CardOutlet,
+  CardHeader,
+  CardHeaderMeta,
+  Card,
+  ArrowIcon
+} from 'joyent-ui-toolkit';
+
+const capitalizeFirstLetter = string =>
+  string.charAt(0).toUpperCase() + string.slice(1);
+
+const FullWidthCard = styled(Card)`
+  flex-basis: 100%;
+  margin-bottom: ${remcalc(18)};
+`;
+
+const ListRules = ({ rule }) => (
+  <FullWidthCard shadow collapsed>
+    <CardHeader secondary={false} transparent={false}>
+      <CardHeaderMeta>
+        <Row between="xs" middle="xs">
+          <Col xs={11}>
+            <b>{capitalizeFirstLetter(rule.instance)}</b>
+            {`: be on ${rule.be} node as the instance(s) identified by the ${
+              rule.type
+            } ${rule.match} "${rule.value}"`}
+          </Col>
+          <Col xs={1}>
+            <ArrowIcon />
+          </Col>
+        </Row>
+      </CardHeaderMeta>
+    </CardHeader>
+    <CardOutlet>Stuff</CardOutlet>
+  </FullWidthCard>
+);
+
+export default ListRules;

prototypes/create-instance-icons/src/components/affinity/__tests__/__snapshots__/list.spec.js.snap

@@ -0,0 +1,784 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Packages /> without throwing 1`] = `
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c5 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-grow: 4;
+  -ms-flex-grow: 4;
+  flex-grow: 4;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c3 {
+  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;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  border-radius: 4px;
+  border: 1px solid;
+  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
+  min-height: 11.5625rem;
+  min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c4 {
+  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;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c6 {
+  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;
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c9 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c8 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-weight: 400;
+}
+
+.c10 {
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c11 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.8);
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c2 {
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 100%;
+  list-style: none;
+  padding: 0;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-top: 2.25rem;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    -webkit-flex-basis: 33.333333333333336%;
+    -ms-flex-basis: 33.333333333333336%;
+    flex-basis: 33.333333333333336%;
+    max-width: 33.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-basis: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c5 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+<section
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.016
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                0.256
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                0.25
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                10
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.033
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                0.768
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                0.5
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                25
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.066
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                1.8
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                1
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                50
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.131
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                3.8
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                2
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                100
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.263
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                7.8
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                4
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                200
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.525
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                15.8
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                8
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                400
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+`;

prototypes/create-instance-icons/src/components/affinity/__tests__/list.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router, PackagesMock, FiltersMock } from '@mocks/';
+import { Packages } from '../';
+
+it('renders <Packages /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Packages packages={PackagesMock} filters={FiltersMock} />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/components/affinity/index.js

@@ -0,0 +1,206 @@
+import React, { Component } from 'react';
+import { Row, Col } from 'react-styled-flexboxgrid';
+import styled from 'styled-components';
+import rndId from 'rnd-id';
+import remcalc from 'remcalc';
+import { Margin } from 'styled-components-spacing';
+
+import ListRules from './List';
+
+import {
+  ViewContainer,
+  H2,
+  Input,
+  Button,
+  H4,
+  CardOutlet,
+  Select,
+  CardHeader,
+  CardHeaderMeta,
+  Card,
+  P
+} from 'joyent-ui-toolkit';
+
+const MarginInline = styled(Margin)`
+  display: inline;
+`;
+
+const RowMargin = styled(Row)`
+  margin-top: ${remcalc(-24)};
+`;
+
+const defaultValues = {
+  instance: 'must',
+  be: 'the same',
+  type: 'instance name',
+  match: 'equalling',
+  value: null
+};
+
+class Affinity extends Component {
+  constructor() {
+    super();
+    this.state = {
+      rule: defaultValues,
+      rules: [],
+      open: [],
+      showRuleCreation: false
+    };
+  }
+
+  instanceChange = e =>
+    this.setState({
+      ...this.state,
+      rule: { ...this.state.rule, instance: e.target.value }
+    });
+
+  beChange = e =>
+    this.setState({
+      ...this.state,
+      rule: { ...this.state.rule, be: e.target.value }
+    });
+
+  typeChange = e =>
+    this.setState({
+      ...this.state,
+      rule: { ...this.state.rule, type: e.target.value }
+    });
+
+  matchChange = e =>
+    this.setState({
+      ...this.state,
+      rule: { ...this.state.rule, match: e.target.value }
+    });
+
+  valueChange = e =>
+    this.setState({
+      ...this.state,
+      rule: { ...this.state.rule, value: e.target.value, id: rndId() }
+    });
+
+  submit = () =>
+    this.setState({
+      ...this.state,
+      rules: [...this.state.rules, this.state.rule],
+      rule: defaultValues,
+      showRuleCreation: false
+    });
+
+  toggleForm = () =>
+    this.setState({ showRuleCreation: !this.state.showRuleCreation });
+
+  open = id => this.setState({ open: this.state.open.push(id) });
+
+  render = () => [
+    <Row>
+      <Col xs={12}>
+        <Margin bottom={6}>
+          <H2>Affinity</H2>
+        </Margin>
+      </Col>
+    </Row>,
+    <RowMargin>
+      <Col xs={8}>
+        <P>
+          Affinity rules control the location of instances, to help reduce
+          traffic across networks and keep the workload balanced. With strict
+          rules, instances are only provisioned when the criteria is met. {' '}
+          <a href="https://apidocs.joyent.com/docker/features/placement ">
+            Read the docs
+          </a>
+        </P>
+      </Col>
+    </RowMargin>,
+    <ViewContainer>
+      <Row>
+        {this.state.rules.length > 0 &&
+          this.state.rules.map(rule => [
+            <H4>Affinity rules</H4>,
+            <ListRules rule={this.state.rule} />
+          ])}
+      </Row>
+    </ViewContainer>,
+    <Row>
+      <Col xs={12}>
+      {this.state.showRuleCreation ? (
+        <Margin top={2}>
+          <Card shadow>
+            <CardHeader secondary={false} transparent={false}>
+              <CardHeaderMeta>
+                <Row between="xs" middle="xs">
+                  <Col xs={12}>
+                    <H4>Create an affinity rule</H4>
+                  </Col>
+                </Row>
+              </CardHeaderMeta>
+            </CardHeader>
+            <CardOutlet>
+              <div>
+                <H4>The instance</H4>
+              </div>
+              <div>
+                <Select fluid onChange={this.instanceChange}>
+                  <option>must</option>
+                  <option>should</option>
+                </Select>
+              </div>
+              <div>
+                <H4>be on</H4>
+              </div>
+              <div>
+                <Select fluid onChange={this.beChange}>
+                  <option>the same</option>
+                  <option>a different</option>
+                </Select>
+              </div>
+              <div>
+                <H4>node as the instance(s) identified by the</H4>
+              </div>
+              <div>
+                <MarginInline right={1}>
+                  <Select fluid onChange={this.typeChange}>
+                    <option>instance name</option>
+                    <option>tag name</option>
+                  </Select>
+                </MarginInline>
+                <MarginInline right={1}>
+                  <Select fluid onChange={this.typeChange}>
+                    <option>equalling</option>
+                    <option>not equalling</option>
+                    <option>containing</option>
+                    <option>starting with</option>
+                    <option>ending with</option>
+                  </Select>
+                </MarginInline>
+                <Input
+                  type="text"
+                  onChange={this.valueChange}
+                  required
+                  value={this.state.rule.value}
+                  placeholder="Example instance name: nginx"
+                />
+              </div>
+              <div>
+                <Button secondary onClick={this.toggleForm}>
+                  Cancel
+                </Button>
+                <Button onClick={this.submit} disabled={!this.state.rule.value}>
+                  Create
+                </Button>
+              </div>
+            </CardOutlet>
+          </Card>
+        </Margin>
+      ) : (
+        <Margin top={2}>
+          <Button secondary bold onClick={this.toggleForm}>
+            Create affinity rule
+          </Button>
+        </Margin>
+      )}
+      </Col>
+    </Row>
+  ];
+}
+
+export default Affinity;

prototypes/create-instance-icons/src/components/empty/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Package /> without throwing 1`] = `
+.c4 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-grow: 4;
+  -ms-flex-grow: 4;
+  flex-grow: 4;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c5 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c1 {
+  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;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  border-radius: 4px;
+  border: 1px solid;
+  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
+  min-height: 11.5625rem;
+  min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c3 {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: #808080;
+  -webkit-flex-basis: 0;
+  -ms-flex-basis: 0;
+  flex-basis: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-grow: 0;
+  -ms-flex-grow: 0;
+  flex-grow: 0;
+  margin-bottom: 0.5rem;
+}
+
+.c6 {
+  font-weight: normal;
+}
+
+.c0 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c2 {
+  margin-bottom: 18px;
+}
+
+<div
+  className="c0 c1"
+  name="card"
+>
+  <test-file-mock
+    alt="Cloud"
+    className="c2"
+    width="175"
+  />
+  <div
+    className="c3 c4"
+    name="card-title"
+  >
+    <span
+      className="c5"
+    >
+      There are no packages that meet your criteria
+    </span>
+  </div>
+  <div
+    className="c6 c3 c4"
+    name="card-title"
+  >
+    <span
+      className="c5"
+    >
+      Please adjust the filters to see some packages here
+    </span>
+  </div>
+</div>
+`;

prototypes/create-instance-icons/src/components/empty/__tests__/index.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router } from '@mocks/';
+import Empty from '../';
+
+it('renders <Package /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Empty />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import { Card, H4, H5 } from 'joyent-ui-toolkit';
+
+import Cloud from '../../assets/cloud.svg';
+
+const CardStyled = styled(Card)`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  padding: ${remcalc(18)};
+`;
+
+const Empty = () => (
+  <CardStyled transparent>
+    <Cloud width="175" alt="Cloud" />
+    <H4>There are no packages that meet your criteria</H4>
+    <H5>Please adjust the filters to see some packages here</H5>
+  </CardStyled>
+);
+
+export default Empty;

prototypes/create-instance-icons/src/components/filters/__tests__/filters.spec.js

@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router, FiltersMock, PackagesMock, Store } from '@mocks/';
+import Filters from '../filters';
+
+it('renders <Filters /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <Filters filters={FiltersMock} packages={PackagesMock} />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/components/filters/filters.js

@@ -0,0 +1,132 @@
+import React, { Component } from 'react';
+import isEqual from 'lodash.isequal';
+import { reduxForm } from 'redux-form';
+import { Margin } from 'styled-components-spacing';
+import { Col, Row } from 'react-styled-flexboxgrid';
+import { reset } from 'redux-form';
+import remcalc from 'remcalc';
+import styled from 'styled-components';
+import { default as defaultState } from '@state/state';
+
+import Inputs from './inputs';
+import { returnIcon } from '../icons';
+
+import {
+  FormGroup,
+  Checkbox,
+  Label,
+  H2,
+  H4,
+  P,
+  ViewContainer
+} from 'joyent-ui-toolkit';
+
+const FullWidth = styled(Margin)`
+  width: 100%;
+,`;
+
+const RowMargin = styled(Row)`
+  margin-top: ${remcalc(-24)};
+`;
+
+class Filters extends Component {
+  constructor(props) {
+    super(props);
+    const { filters: { cpu, cost, ram, disk } } = this.props;
+
+    this.state = {
+      ram,
+      cpu,
+      disk,
+      cost
+    };
+  }
+
+  handleResetClick = () => {
+    const {
+      dispatch,
+      filterReset,
+      filters: { cpu, cost, ram, disk }
+    } = this.props;
+
+    filterReset();
+    dispatch(reset('type'));
+
+    this.setState({
+      ram,
+      cpu,
+      disk,
+      cost
+    });
+  };
+
+  render() {
+    const {
+      filters,
+      ramChange,
+      cpuChange,
+      diskChange,
+      costChange
+    } = this.props;
+
+    return [
+        <Row>
+          <Col xs={8}>
+            <Margin bottom={6}>
+              <H2>Package</H2>
+            </Margin>
+          </Col>
+        </Row>,
+        <RowMargin>
+          <Col xs={8}>
+            <P>
+              A package defines the specs of your instance. On Triton, packages
+              can only increase in size.{' '}
+              <a href="https://docs.joyent.com/public-cloud/instances/packages/sizing">
+                Read the docs
+              </a>
+            </P>
+          </Col>
+      </RowMargin>,
+      <Row>
+        <Col>
+          <Margin vertical={2}>
+            <H4>Filters</H4>
+          </Margin>
+        </Col>
+      </Row>,
+      <Row>
+        {filters.groups
+          .sort((a, b) => (a.name < b.name ? -1 : 1))
+          .map((group, i) => (
+            <Col>
+              <FormGroup
+                name={group.name}
+                key={group.name}
+                type="checkbox"
+                reduxForm
+              >
+                <Checkbox>
+                  {returnIcon(group.name)}
+                  <Label>{group.name}</Label>
+                </Checkbox>
+              </FormGroup>
+            </Col>
+          ))}
+      </Row>,
+      <FullWidth top={2}>
+        <Inputs
+          ramChange={value => ramChange(value)}
+          cpuChange={value => cpuChange(value)}
+          diskChange={value => diskChange(value)}
+          costChange={value => costChange(value)}
+          filters={filters}
+          disabled={isEqual(filters, defaultState.filters)}
+          onClick={this.handleResetClick}
+        />
+      </FullWidth>
+    ];
+  }
+}
+
+export default reduxForm({ form: 'type' })(Filters);

prototypes/create-instance-icons/src/components/filters/index.js

@@ -0,0 +1 @@
+export { default as Filters } from './filters';

prototypes/create-instance-icons/src/components/filters/inputs.js

@@ -0,0 +1,255 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import {
+  FormGroup,
+  FormLabel,
+  Input,
+  Select,
+  Button,
+  InputDropdown
+} from 'joyent-ui-toolkit';
+import { Row, Col } from 'react-styled-flexboxgrid';
+import { Padding } from 'styled-components-spacing';
+
+const RowFullWidth = styled(Row)`
+  width: 100%;
+`;
+const InputDropdownBorder = styled(InputDropdown)`
+  border-right: 1px solid ${props => props.theme.grey};
+  margin-right: 24px;
+  padding-right: 24px;
+`;
+
+const valuesToSend = (changed, target, value, name) => ({
+  min: !isNaN(parseFloat(changed.min)) ? parseFloat(changed.min) : 0,
+  max: !isNaN(parseFloat(changed.max)) ? parseFloat(changed.max) : 0,
+  [target]: parseFloat(value)
+});
+
+class Inputs extends Component {
+  constructor(props) {
+    super(props);
+    const { filters: { cpu, cost, ram, disk } } = this.props;
+
+    this.state = {
+      ram: {
+        min: ram.min > 1 ? ram.min : ram.min * 1000,
+        minSelected: 'MB',
+        max: ram.max > 1 ? ram.max : ram.max * 1000,
+        maxSelected: 'GB'
+      },
+      cpu,
+      disk: {
+        min: disk.min > 1 ? disk.min : disk.min * 1000,
+        minSelected: 'GB',
+        max: disk.max > 1 ? disk.max : disk.max * 1000,
+        maxSelected: 'TB'
+      },
+      cost
+    };
+  }
+
+  handleChange = (e, name, target) => {
+    const changed = this.state[name];
+    const value = (e.target || {}).value;
+
+    setTimeout(() => {
+      this.props[`${name}Change`](valuesToSend(changed, target, value, name));
+    }, 1000);
+
+    this.setState({
+      ...this.state,
+      [name]: {
+        ...this.state[name],
+        [target]: value
+      }
+    });
+  };
+
+  handleSelectChange = (e, name, target, valueTarget) => {
+    const value = (e.target || {}).value;
+    this.setState({
+      ...this.state,
+      [name]: {
+        ...this.state[name],
+        [target]: value
+      }
+    });
+  };
+
+  handleBlur = (e, name, target) => {
+    const changed = this.state[name];
+    const value = (e.target || {}).value;
+
+    this.props[`${name}Change`](valuesToSend(changed, target, value, name));
+
+    this.setState({
+      ...this.state,
+      [name]: {
+        ...this.state[name],
+        [target]: value
+      }
+    });
+  };
+
+  render() {
+    const { cpu, cost, ram, disk } = this.state;
+    const { onClick, disabled } = this.props;
+
+    return [
+      <Row bottom="xs">
+        <Col>
+          <Padding top={1}>
+            <FormLabel>RAM</FormLabel>
+          </Padding>
+          <FormGroup flex center>
+            <InputDropdown>
+              <Input
+                wrapped
+                small
+                type="text"
+                onChange={e => this.handleChange(e, 'ram', 'min')}
+                onBlur={e => this.handleBlur(e, 'ram', 'min')}
+                value={ram.min}
+              />
+              <Select
+                onChange={e =>
+                  this.handleSelectChange(e, 'ram', 'minSelected', 'min')}
+                value={ram.minSelected}
+                wrapped
+                fluid
+              >
+                <option value="MB">MB</option>
+                <option value="GB">GB</option>
+              </Select>
+            </InputDropdown>
+            <Padding horizontal={2}>to</Padding>
+            <InputDropdownBorder>
+              <Input
+                wrapped
+                small
+                type="text"
+                onChange={e => this.handleChange(e, 'ram', 'max')}
+                onBlur={e => this.handleBlur(e, 'ram', 'max')}
+                value={ram.max}
+              />
+              <Select
+                onChange={e =>
+                  this.handleSelectChange(e, 'ram', 'maxSelected', 'max')}
+                value={ram.maxSelected}
+                wrapped
+                fluid
+              >
+                <option value="MB">MB</option>
+                <option value="GB">GB</option>
+              </Select>
+            </InputDropdownBorder>
+          </FormGroup>
+        </Col>
+        <Col>
+          <Padding top={1}>
+            <FormLabel>Disk</FormLabel>
+          </Padding>
+          <FormGroup flex center>
+            <InputDropdown>
+              <Input
+                wrapped
+                small
+                type="text"
+                onChange={e => this.handleChange(e, 'disk', 'min')}
+                onBlur={e => this.handleBlur(e, 'disk', 'min')}
+                value={disk.min}
+              />
+              <Select
+                onChange={e =>
+                  this.handleSelectChange(e, 'disk', 'minSelected', 'min')}
+                value={disk.minSelected}
+                wrapped
+                fluid
+              >
+                <option value="GB">GB</option>
+                <option value="TB">TB</option>
+              </Select>
+            </InputDropdown>
+            <Padding horizontal={2}>to</Padding>
+            <InputDropdown>
+              <Input
+                wrapped
+                small
+                type="text"
+                onChange={e => this.handleChange(e, 'disk', 'max')}
+                onBlur={e => this.handleBlur(e, 'disk', 'max')}
+                value={disk.max}
+              />
+              <Select
+                onChange={e =>
+                  this.handleSelectChange(e, 'disk', 'maxSelected', 'min')}
+                value={disk.maxSelected}
+                wrapped
+                fluid
+              >
+                <option value="GB">GB</option>
+                <option value="TB">TB</option>
+              </Select>
+            </InputDropdown>
+          </FormGroup>
+        </Col>
+      </Row>,
+      <RowFullWidth>
+        <Col>
+          <Padding top={1}>
+            <FormLabel>vCPUs</FormLabel>
+          </Padding>
+          <FormGroup flex center>
+            <Input
+              small
+              type="text"
+              onChange={e => this.handleChange(e, 'cpu', 'min')}
+              onBlur={e => this.handleBlur(e, 'cpu', 'min')}
+              value={cpu.min}
+            />
+            <Padding horizontal={2}>to</Padding>
+            <Input
+              small
+              type="text"
+              onChange={e => this.handleChange(e, 'cpu', 'max')}
+              onBlur={e => this.handleBlur(e, 'cpu', 'max')}
+              value={cpu.max}
+            />
+          </FormGroup>
+        </Col>
+        <Col>
+          <Padding top={1}>
+            <FormLabel>$/hour</FormLabel>
+          </Padding>
+          <FormGroup flex center>
+            <Input
+              small
+              type="text"
+              onChange={e => this.handleChange(e, 'cost', 'min')}
+              onBlur={e => this.handleBlur(e, 'cost', 'min')}
+              value={cost.min}
+            />
+            <Padding horizontal={2}>to</Padding>
+            <Input
+              small
+              type="text"
+              onChange={e => this.handleChange(e, 'cost', 'max')}
+              onBlur={e => this.handleBlur(e, 'cost', 'max')}
+              value={cost.max}
+            />
+          </FormGroup>
+        </Col>
+      </RowFullWidth>,
+      <Row>
+        <Col xs={12}>
+          <Button disabled={disabled} secondary small bold onClick={onClick}>
+            Reset All Filters
+          </Button>
+        </Col>
+      </Row>
+    ];
+  }
+}
+
+export default Inputs;

prototypes/create-instance-icons/src/components/home/__tests__/__snapshots__/home.spec.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Home /> without throwing 1`] = `
+<MemoryRouter>
+  <Home
+    filters={
+      Object {
+        "cost": Object {
+          "max": 0.525,
+          "min": 0.016,
+        },
+        "cpu": Object {
+          "max": 3.25,
+          "min": 0.25,
+        },
+        "disk": Object {
+          "max": 107.26,
+          "min": 0.01,
+        },
+        "groups": Array [
+          Object {
+            "name": "Compute Optimized",
+            "selected": false,
+          },
+          Object {
+            "name": "Memory Optimized",
+            "selected": false,
+          },
+          Object {
+            "name": "General Purpose",
+            "selected": false,
+          },
+          Object {
+            "name": "Storage Optimized",
+            "selected": false,
+          },
+        ],
+        "ram": Object {
+          "max": 50.688,
+          "min": 0.256,
+        },
+      }
+    }
+  />
+</MemoryRouter>
+`;

prototypes/create-instance-icons/src/components/home/__tests__/home.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+import 'jest-styled-components';
+
+import { Router, FiltersMock } from '@mocks/';
+import Home from '../home';
+
+it('renders <Home /> without throwing', () => {
+  const renderer = new ShallowRenderer();
+  renderer.render(
+    <Router>
+      <Home filters={FiltersMock} />
+    </Router>
+  );
+  const tree = renderer.getRenderOutput();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/components/home/home.js

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import { Row, Col } from 'react-styled-flexboxgrid';
+import { Filters } from '@components/filters';
+import PackagesHOC from '@containers/packages';
+import AffinityHOC from '@containers/affinity';
+import { Margin } from 'styled-components-spacing';
+import {
+  Message,
+  BreadcrumbItem,
+  Anchor,
+  Button,
+  Divider
+} from 'joyent-ui-toolkit';
+
+class Home extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showMessage: true
+    };
+  }
+
+  closeMessage = () => {
+    this.setState({
+      showMessage: false
+    });
+  };
+
+  changeValue = (key, value) => {
+    const { filters, onFilterChange } = this.props;
+
+    onFilterChange({
+      ...filters,
+      [key]: value
+    });
+  };
+
+  componentWillReceiveProps = nextProps => {
+    const values = nextProps.form.type.values;
+    const type = nextProps.form.type;
+    if (nextProps.form !== this.props.form && type && values) {
+      const { filters, onFilterChange } = this.props;
+
+      const groups = Object.keys(type.registeredFields).map(key => ({
+        name: key,
+        selected: values[key] ? values[key] : false
+      }));
+
+      console.table(groups);
+      onFilterChange({
+        ...filters,
+        groups
+      });
+    }
+  };
+
+  render() {
+    const { showMessage } = this.state;
+    const { filters, onFilterReset, packages } = this.props;
+    const _msg = showMessage ? (
+      <Message onCloseClick={this.closeMessage}>
+        Not all data centres have all configurations of instances available.
+        Make sure that you choose the data center that suits your requirements.{' '}
+        <Anchor href="#">Learn More</Anchor>
+      </Message>
+    ) : null;
+
+    const breadcrumbLinks = [
+      { name: 'Instances', pathname: '/' },
+      { name: 'Create Instance', pathname: '/' }
+    ].map(({ name, pathname }) => (
+      <BreadcrumbItem key={name} to={pathname}>
+        {name}
+      </BreadcrumbItem>
+    ));
+
+    return [
+      <Row><Col xs={12}>{breadcrumbLinks}</Col></Row>,
+      <Row><Col xs={12}>{_msg}</Col></Row>,
+      <Margin vertical={2}>
+        <Divider height="1px" />
+      </Margin>,
+      <Row>
+        <Col xs={12}>
+          <Filters
+            packages={packages}
+            filters={filters}
+            filterReset={onFilterReset}
+            ramChange={value => this.changeValue('ram', value)}
+            cpuChange={value => this.changeValue('cpu', value)}
+            diskChange={value => this.changeValue('disk', value)}
+            costChange={value => this.changeValue('cost', value)}
+          />
+        </Col>
+      </Row>,
+      <Margin top={2}>
+        <PackagesHOC />
+      </Margin>,
+      <Row end="xs">
+        <Col xs={12}><Button>Next</Button></Col>
+      </Row>,
+      <Margin top={2}>
+        <AffinityHOC />
+      </Margin>
+    ];
+  }
+}
+
+export default Home;

prototypes/create-instance-icons/src/components/home/index.js

@@ -0,0 +1 @@
+export { default as Home } from './home';

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import CpuIcon from '../../assets/cpu.svg';
+import GpIcon from '../../assets/gp.svg';
+import MoIcon from '../../assets/mo.svg';
+import SoIcon from '../../assets/so.svg';
+import { TooltipContainer, TooltipTarget, Tooltip } from 'joyent-ui-toolkit';
+
+import { Margin } from 'styled-components-spacing';
+
+const IconWrapper = styled.div`
+  float: left;
+`;
+
+const Flex = styled.div`
+  display: flex;
+`;
+
+export const returnIcon = group => {
+  let icon;
+  switch (group) {
+    case 'Compute Optimized':
+      icon = <CpuIcon width="24" height="24" />;
+      break;
+    case 'General Purpose':
+      icon = <GpIcon width="24" height="24" />;
+      break;
+    case 'Memory Optimized':
+      icon = <MoIcon width="24" height="24" />;
+      break;
+    case 'Storage Optimized':
+      icon = <SoIcon width="24" height="24" />;
+      break;
+    default:
+      icon = <GpIcon width="24" height="24" />;
+  }
+
+  return (
+    <IconWrapper>
+      <TooltipContainer hoverable>
+        <TooltipTarget>
+          <Margin right={1}>
+            <Flex>{icon}</Flex>
+          </Margin>
+        </TooltipTarget>
+        <Tooltip placement="bottom">{group}</Tooltip>
+      </TooltipContainer>
+    </IconWrapper>
+  );
+};

prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Header /> without throwing 1`] = `
+.c2 {
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.875rem;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  font-size: 1.8125rem;
+  margin: 0;
+}
+
+.c2 + p,
+.c2 + small,
+.c2 + h1,
+.c2 + h2,
+.c2 + label,
+.c2 + h3,
+.c2 + h4,
+.c2 + h5,
+.c2 + div,
+.c2 + span {
+  margin-top: 1.5rem;
+}
+
+.c1 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.84375rem 0;
+}
+
+.c0 {
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  padding: 0 1.125rem;
+  line-height: 1.5625rem;
+}
+
+.c3 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h2
+      className="c2"
+    >
+      <a
+        href="/"
+        name="Go to home"
+        onClick={[Function]}
+      >
+        <img
+          alt="Triton Logo"
+          className="c3"
+          src="test-file-mock"
+        />
+      </a>
+    </h2>
+  </div>
+</div>
+`;

prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap

@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <NotFound /> without throwing 1`] = `
+.c5 {
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c6 {
+  display: inline-block;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c6:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c6:hover {
+  border: solid 0.0625rem;
+}
+
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c6[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c3 {
+  font-size: 2rem;
+  margin: 0.625rem 0;
+  margin: 0;
+  font-weight: 400;
+  font-size: 2.25rem;
+  line-height: 2.8125rem;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 1.5rem;
+}
+
+.c1 {
+  margin-top: 3.75rem;
+}
+
+.c2 {
+  font-weight: normal;
+  font-size: 2rem;
+}
+
+.c4 {
+  margin-bottom: 1.875rem;
+  max-width: 30.625rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:48rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h1
+      className="c2 c3"
+    >
+      I have no memory of this place
+    </h1>
+    <p
+      className="c4 c5"
+    >
+      HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.
+    </p>
+    <a
+      className="c6"
+      href="/"
+      onClick={[Function]}
+      primary={true}
+    >
+      Back home
+    </a>
+  </div>
+</div>
+`;

prototypes/create-instance-icons/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <SectionNav /> without throwing 1`] = `
+.c0 {
+  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;
+}
+
+.c2 {
+  font-weight: 400;
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c3 {
+  font-weight: 400;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c3.active {
+  cursor: default;
+}
+
+.c1 {
+  list-style-type: none;
+  padding: 0;
+  margin: 1.125rem 0 0 0;
+}
+
+<div
+  className="c0"
+>
+  <ul
+    className="c1"
+  >
+    <li
+      className="c2"
+    >
+      <a
+        aria-current="true"
+        className="active c3 active"
+        href="/"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Instances
+      </a>
+    </li>
+    <li
+      className="c2"
+    >
+      Custom images
+    </li>
+    <li
+      className="c2"
+    >
+      Docker images
+    </li>
+    <li
+      className="c2"
+    >
+      Docker registries
+    </li>
+  </ul>
+</div>
+`;

prototypes/create-instance-icons/src/components/navigation/__tests__/header.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router } from '@mocks/';
+import { Header } from '../';
+
+it('renders <Header /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Header />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/components/navigation/__tests__/not-found.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { Router } from '@mocks/';
+
+import { NotFound } from '../';
+
+it('renders <NotFound /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <NotFound />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/components/navigation/header.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+  Header,
+  HeaderBrand,
+  TritonBetaIcon,
+  HeaderNav,
+  HeaderItem,
+  DataCenterIconLight,
+  UserIconLight
+} from 'joyent-ui-toolkit';
+
+const NavHeader = () => (
+  <Header>
+    <HeaderBrand beta>
+      <TritonBetaIcon />
+    </HeaderBrand>
+    <HeaderNav>
+      <li>
+        <Link className="active" to="/">
+          Compute
+        </Link>
+      </li>
+    </HeaderNav>
+    <HeaderItem>Return to existing portal</HeaderItem>
+    <HeaderItem>
+      <DataCenterIconLight />eu-east-1
+    </HeaderItem>
+    <HeaderItem>
+      <UserIconLight />Nicola
+    </HeaderItem>
+  </Header>
+);
+
+export default NavHeader;

prototypes/create-instance-icons/src/components/navigation/index.js

@@ -0,0 +1,2 @@
+export { default as Header } from './header';
+export { default as NotFound } from './not-found';

prototypes/create-instance-icons/src/components/navigation/not-found.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { H1, P, Button, ViewContainer } from 'joyent-ui-toolkit';
+import { Margin } from 'styled-components-spacing';
+
+const NotFound = ({
+  title = 'I have no memory of this place',
+  message = `HTTP 404: We can’t find what you are looking for.
+   Next time, always follow your nose.`,
+  link = 'Back home',
+  to = '/'
+}) => (
+  <ViewContainer>
+    <Margin top={10}>
+      <H1>{title}</H1>
+      <P>{message}</P>
+      <Margin top={5}>
+        <Button to={to}>{link}</Button>
+      </Margin>
+    </Margin>
+  </ViewContainer>
+);
+
+NotFound.propTypes = {
+  title: PropTypes.string,
+  message: PropTypes.string,
+  link: PropTypes.string,
+  to: PropTypes.string
+};
+
+export default NotFound;

prototypes/create-instance-icons/src/components/package/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,276 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Package /> without throwing 1`] = `
+.c3 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c5 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-grow: 4;
+  -ms-flex-grow: 4;
+  flex-grow: 4;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c1 {
+  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;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  border-radius: 4px;
+  border: 1px solid;
+  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
+  min-height: 11.5625rem;
+  min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.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;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c4 {
+  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;
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c7 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c6 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-weight: 400;
+}
+
+.c8 {
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c9 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.8);
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c0 {
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c3 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+<div
+  className="c0 c1"
+  name="card"
+  onClick={undefined}
+  selected={undefined}
+>
+  <div
+    className="c2"
+    name="card-view"
+  >
+    <div
+      className="c3"
+      name="card-meta"
+    >
+      <div
+        className="c4"
+      >
+        <div
+          className="c5"
+          name="card-title"
+        >
+          $
+          0.263
+           per hour
+        </div>
+        <div
+          className="c6 c5"
+          name="card-subtitle"
+        >
+          <span
+            className="c7"
+          >
+            7.8
+             GB RAM
+          </span>
+        </div>
+        <div
+          className="c6 c5"
+          name="card-subtitle"
+        >
+          <span
+            className="c7"
+          >
+            4
+             vCPUs
+          </span>
+        </div>
+        <div
+          className="c6 c5"
+          name="card-subtitle"
+        >
+          <span
+            className="c7"
+          >
+            200
+             TB disk
+          </span>
+        </div>
+        <div
+          className="c6 c5"
+          name="card-subtitle"
+        >
+          <span
+            className="c7"
+          >
+            Magnetic
+          </span>
+        </div>
+        <div
+          className="c8 c5"
+          name="card-footer"
+        >
+          <span
+            className="c9"
+            selected={undefined}
+          >
+            Compute Optimized
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

prototypes/create-instance-icons/src/components/package/__tests__/index.spec.js

@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router } from '@mocks/';
+import Package from '../';
+
+const pack = {
+  disk: 200,
+  group: 'Compute Optimized',
+  memory: 7.8,
+  name: 'High CPU 7.75',
+  price: '0.263',
+  vcpus: 4
+};
+
+it('renders <Package /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Package pack={pack} />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/components/package/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { reduxForm } from 'redux-form';
+
+import { returnIcon } from '../icons';
+
+import { TableTr, TableTd, H4, Radio, FormGroup } from 'joyent-ui-toolkit';
+
+const Package = ({
+  pack: { price, memory, vcpus, disk, group, ssd, name },
+  selected,
+  onClick
+}) => (
+  <TableTr selected={selected}>
+    <TableTd>
+      <FormGroup name={name}>
+        <Radio onClick={onClick} name={name} value={name} checked={selected} />
+      </FormGroup>
+    </TableTd>
+    <TableTd>
+      {returnIcon(group)}
+      <H4>{name}</H4>
+    </TableTd>
+    <TableTd>
+      {memory > 1 ? `${parseInt(memory, 10)} GB` : `${memory * 1000} MB`}
+    </TableTd>
+    <TableTd>{disk > 1 ? `${disk} TB` : `${disk * 1000} GB`}</TableTd>
+    <TableTd>{vcpus}</TableTd>
+    <TableTd>{price.toFixed(3)}</TableTd>
+  </TableTr>
+);
+
+export default reduxForm({ form: 'selected' })(Package);

prototypes/create-instance-icons/src/components/packages/__tests__/__snapshots__/list.spec.js.snap

@@ -0,0 +1,784 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Packages /> without throwing 1`] = `
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c5 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-grow: 4;
+  -ms-flex-grow: 4;
+  flex-grow: 4;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c3 {
+  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;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+  border-radius: 4px;
+  border: 1px solid;
+  box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
+  min-height: 11.5625rem;
+  min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c4 {
+  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;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c6 {
+  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;
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c9 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 0.875rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c8 {
+  display: inline-block;
+  padding: 0 1.125rem;
+  font-weight: 400;
+}
+
+.c10 {
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c11 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: rgba(73,73,73,0.8);
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c2 {
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 100%;
+  list-style: none;
+  padding: 0;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-top: 2.25rem;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    -webkit-flex-basis: 33.333333333333336%;
+    -ms-flex-basis: 33.333333333333336%;
+    flex-basis: 33.333333333333336%;
+    max-width: 33.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-basis: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c5 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+<section
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.016
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                0.256
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                0.25
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                10
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.033
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                0.768
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                0.5
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                25
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.066
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                1.8
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                1
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                50
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.131
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                3.8
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                2
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                100
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.263
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                7.8
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                4
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                200
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+      name="card"
+      onClick={[Function]}
+      selected={false}
+    >
+      <div
+        className="c4"
+        name="card-view"
+      >
+        <div
+          className="c5"
+          name="card-meta"
+        >
+          <div
+            className="c6"
+          >
+            <div
+              className="c7"
+              name="card-title"
+            >
+              $
+              0.525
+               per hour
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                15.8
+                 GB RAM
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                8
+                 vCPUs
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                400
+                 TB disk
+              </span>
+            </div>
+            <div
+              className="c8 c7"
+              name="card-subtitle"
+            >
+              <span
+                className="c9"
+              >
+                Magnetic
+              </span>
+            </div>
+            <div
+              className="c10 c7"
+              name="card-footer"
+            >
+              <span
+                className="c11"
+                selected={false}
+              >
+                Compute Optimized
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+`;

prototypes/create-instance-icons/src/components/packages/__tests__/list.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router, PackagesMock, FiltersMock } from '@mocks/';
+import { Packages } from '../';
+
+it('renders <Packages /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Packages packages={PackagesMock} filters={FiltersMock} />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/components/packages/index.js

@@ -0,0 +1 @@
+export { default as Packages } from './list';

prototypes/create-instance-icons/src/components/packages/list.js

@@ -0,0 +1,165 @@
+import React, { Component } from 'react';
+import { Row, Col } from 'react-styled-flexboxgrid';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import Package from '@components/package';
+import Empty from '@components/empty';
+import sortBy from 'lodash.sortby';
+import isEqual from 'lodash.isequal';
+import is from 'styled-is';
+import {
+  Table,
+  TableThead,
+  TableTbody,
+  TableTr,
+  TableTh,
+  ArrowIcon
+} from 'joyent-ui-toolkit';
+
+const ArrowIconStyled = styled(ArrowIcon)`
+  margin-left: ${remcalc(6)};
+  cursor: pointer;
+  position: relative;
+  top: ${remcalc(-1)};
+  transition: transform 200ms ease;
+
+  path {
+    fill: ${props => props.theme.grey};
+  }
+
+  ${is('selected', 'down')`
+    transform: rotate(180deg);
+    path {
+      fill: ${props => props.theme.text};
+    }
+  `};
+`;
+
+const Span = styled.span`
+  cursor: pointer;
+  user-select: none;
+`;
+
+class Packages extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      packages: props.packages,
+      selected: null
+    };
+  }
+
+  handleClick = id => {
+    this.setState({
+      selected: id !== this.state.selected ? id : null
+    });
+  };
+
+  componentWillReceiveProps = nextProps => {
+    this.setState({
+      packages: nextProps.packages
+    });
+  };
+
+  order = column => {
+    const { packages } = this.state;
+    const desc = sortBy(packages, [column]).reverse();
+    const asc = sortBy(packages, [column]);
+
+    this.setState({
+      packages: isEqual(packages, asc) ? desc : asc,
+      ordered: column,
+      [column]: !isEqual(packages, asc)
+    });
+  };
+
+  _cards = () => {
+    const { selected, packages, ordered } = this.state;
+
+    return packages.length > 0 ? (
+      <Row>
+        <Col xs={12}>
+          <Table>
+            <TableThead>
+              <TableTr>
+                <TableTh xs="40" />
+                <TableTh selected={ordered === 'name'}>
+                  <Span role="button" onClick={() => this.order('name')}>
+                    Name{' '}
+                  </Span>
+                  <ArrowIconStyled
+                    selected={ordered === 'name'}
+                    down={this.state.name}
+                    onClick={() => this.order('name')}
+                  />
+                </TableTh>
+                <TableTh right xs="100" selected={ordered === 'memory'}>
+                  <Span role="button" onClick={() => this.order('memory')}>
+                    RAM{' '}
+                  </Span>
+                  <ArrowIconStyled
+                    selected={ordered === 'memory'}
+                    down={this.state.memory}
+                    onClick={() => this.order('memory')}
+                  />
+                </TableTh>
+                <TableTh right xs="100" selected={ordered === 'disk'}>
+                  <Span role="button" onClick={() => this.order('disk')}>
+                    Disk{' '}
+                  </Span>
+                  <ArrowIconStyled
+                    selected={ordered === 'disk'}
+                    down={this.state.disk}
+                    onClick={() => this.order('disk')}
+                  />
+                </TableTh>
+                <TableTh right xs="100" selected={ordered === 'vcpus'}>
+                  <Span role="button" onClick={() => this.order('vcpus')}>
+                    vCPU{' '}
+                  </Span>
+                  <ArrowIconStyled
+                    selected={ordered === 'vcpus'}
+                    down={this.state.vcpus}
+                    onClick={() => this.order('vcpus')}
+                  />
+                </TableTh>
+                <TableTh right xs="100" selected={ordered === 'price'}>
+                  <Span role="button" onClick={() => this.order('price')}>
+                    $/hour{' '}
+                  </Span>
+                  <ArrowIconStyled
+                    selected={ordered === 'price'}
+                    down={this.state.price}
+                    onClick={() => this.order('price')}
+                  />
+                </TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {packages.map(pack => (
+                <Package
+                  pack={pack}
+                  onClick={() => this.handleClick(pack.id)}
+                  selected={selected === pack.id}
+                  key={pack.id}
+                />
+              ))}
+            </TableTbody>
+          </Table>
+        </Col>
+      </Row>
+    ) : (
+      <Row>
+        <Col>
+          <Empty />
+        </Col>
+      </Row>
+    );
+  };
+
+  render = () => this._cards();
+}
+
+export default Packages;

prototypes/create-instance-icons/src/containers/affinity/__tests__/index.spec.js

@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import PackagesHOC from '../';
+import { Router, Store } from '@mocks/';
+
+it('renders <PackagesHOC /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Store>
+          <PackagesHOC />
+        </Store>
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/containers/affinity/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Affinity from '@components/affinity';
+
+const AffinityHOC = ({ affinity }) => <Affinity affinity={affinity} />;
+
+const mapStateToProps = state => {
+  return {
+    affinity: state.form.affinityForm
+  };
+};
+
+export default connect(mapStateToProps)(AffinityHOC);

prototypes/create-instance-icons/src/containers/home/__tests__/index.spec.js

@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import HomeHOC from '../';
+import { Router, Store } from '@mocks/';
+
+it('renders <HomeHOC /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Store>
+          <HomeHOC />
+        </Store>
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/containers/home/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { ViewContainer } from 'joyent-ui-toolkit';
+
+import { Home } from '@components/home';
+import { changeFilters, resetFilters } from '../../state/actions';
+
+const HomeHOC = props => (
+  <ViewContainer main>
+    <Home {...props} />
+  </ViewContainer>
+);
+
+const mapStateToProps = state => {
+  return {
+    filters: state.app.filters,
+    packages: state.app.packages,
+    form: state.form
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onFilterChange: filters => {
+      dispatch(changeFilters(filters));
+    },
+    onFilterReset: () => {
+      dispatch(resetFilters());
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomeHOC);

prototypes/create-instance-icons/src/containers/navigation/__tests__/__snapshots__/header.spec.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Header /> without throwing 1`] = `
+.c2 {
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.875rem;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  font-size: 1.8125rem;
+  margin: 0;
+}
+
+.c2 + p,
+.c2 + small,
+.c2 + h1,
+.c2 + h2,
+.c2 + label,
+.c2 + h3,
+.c2 + h4,
+.c2 + h5,
+.c2 + div,
+.c2 + span {
+  margin-top: 1.5rem;
+}
+
+.c1 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.84375rem 0;
+}
+
+.c0 {
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  padding: 0 1.125rem;
+  line-height: 1.5625rem;
+}
+
+.c3 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h2
+      className="c2"
+    >
+      <a
+        href="/"
+        name="Go to home"
+        onClick={[Function]}
+      >
+        <img
+          alt="Triton Logo"
+          className="c3"
+          src="test-file-mock"
+        />
+      </a>
+    </h2>
+  </div>
+</div>
+`;

prototypes/create-instance-icons/src/containers/navigation/__tests__/__snapshots__/not-found-hoc.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <withNotFound /> without throwing 1`] = `<withNotFound />`;

prototypes/create-instance-icons/src/containers/navigation/__tests__/header.spec.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router } from '@mocks/';
+import { Header } from '../';
+
+it('renders <Header /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Header />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/containers/navigation/__tests__/not-found-hoc.spec.js

@@ -0,0 +1,14 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { withNotFound } from '../';
+
+it('renders <withNotFound /> without throwing', () => {
+  const tree = renderer.create(<withNotFound />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/containers/navigation/header.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { Header as HeaderComponent } from '@components/navigation';
+
+export const Header = () => <HeaderComponent />;
+
+export default Header;

prototypes/create-instance-icons/src/containers/navigation/index.js

@@ -0,0 +1 @@
+export { default as Header } from './header';

prototypes/create-instance-icons/src/containers/navigation/not-found-hoc.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { NotFound } from '@components/navigation';
+
+const pathsExample = {
+  title: 'I have no memory of this place',
+  message:
+    'HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.',
+  link: 'Back home',
+  to: '/'
+};
+const NotFoundHOC = (paths = pathsExample) => (
+  <NotFound
+    title={paths.title}
+    message="Sorry, but our princess is in another castle."
+    to={paths.to}
+    link={paths.link}
+  />
+);
+
+export default NotFoundHOC;

prototypes/create-instance-icons/src/containers/packages/__tests__/index.spec.js

@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import PackagesHOC from '../';
+import { Router, Store } from '@mocks/';
+
+it('renders <PackagesHOC /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Store>
+          <PackagesHOC />
+        </Store>
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

prototypes/create-instance-icons/src/containers/packages/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Packages } from '@components/packages';
+
+const PackagesHOC = ({ packages, filters, type }) => (
+  <Packages packages={packages} filters={filters} groups={type} />
+);
+
+const mapStateToProps = state => {
+  return {
+    packages: state.app.packages,
+    filters: state.app.filters,
+    type: state.form.type.values
+  };
+};
+
+export default connect(mapStateToProps)(PackagesHOC);