feat(navigation): initial commit

2018-01-17 19:10:39 +00:00 · 2018-01-17 19:10:39 +00:00 · c75bb9328d
parent 03766d7fd8
commit c75bb9328d
105 changed files with 11631 additions and 2823 deletions
--- a/commitlint.config.js
+++ b/commitlint.config.js
@ -4,7 +4,7 @@ module.exports = {
    'scope-enum': [
      2,
      'always',
-      ['ui-toolkit', 'icons', 'my-joy-beta', 'boilerplate', 'create-instance']
+      ['ui-toolkit', 'icons', 'my-joy-beta', 'navigation']
    ]
  }
 };
--- a/package.json
+++ b/package.json
@ -19,13 +19,9 @@
    "test-ci": "lerna run test-ci",
    "test": "lerna run test",
    "clean": "lerna clean --yes",
-    "dev": "redrun -p dev:*",
-    "dev:ui": "lerna run dev --scope joyent-ui-toolkit --stream",
-    "dev:i": "lerna run dev --scope joyent-icons --stream",
-    "dev:mjb": "lerna run dev --scope my-joy-beta --stream",
+    "dev": "lerna run dev --parallel --stream",
    "commitmsg": "commitlint -e",
    "precommit": "cross-env CI=1 redrun -s lint-staged format-staged",
-    "postinstall": "lerna run prepublish",
    "commit": "commit"
  },
  "devDependencies": {
@ -67,12 +63,14 @@
    "staged-git-files": "0.0.4",
    "yargs": "^10.0.3"
  },
-  "workspaces": ["packages/*"],
  "resolutions": {
-    "graphql": "0.12.3",
+    "styled-components": "2.4.0",
    "hoist-non-react-statics": "2.3.1",
    "react": "16.2.0",
-    "react-dom": "16.2.0",
-    "styled-components": "2.3.0"
-  }
+    "breeze-nexttick": "0.2.1",
+    "zen-observable": "0.7.1"
+  },
+  "workspaces": [
+    "packages/*"
+  ]
 }
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@ -1,6 +1,6 @@
 {
  "name": "joyent-icons",
-  "version": "2.1.0",
+  "version": "3.0.0",
  "license": "MPL-2.0",
  "repository": "github:yldio/joyent-portal",
  "main": "dist/umd/index.js",
@ -14,12 +14,12 @@
    "compile:es": "babel src --out-dir dist/es",
    "compile:umd": "UMD=1 babel src --out-dir dist/umd",
    "compile": "redrun -p compile:*",
-    "dev":
-      "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
+    "dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
    "prepublish": "NODE_ENV=production npm run compile"
  },
  "dependencies": {
    "remcalc": "^1.0.9",
+    "rnd-id": "^2.0.0",
    "styled-components": "^2.3.0"
  },
  "devDependencies": {
--- a/packages/icons/src/actions.js
+++ b/packages/icons/src/actions.js
@ -1,7 +1,6 @@
 import React from 'react';
 import remcalc from 'remcalc';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -10,11 +9,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -45,6 +43,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/affinity.js
+++ b/packages/icons/src/affinity.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -49,6 +47,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/arrow.js
+++ b/packages/icons/src/arrow.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/bin.js
+++ b/packages/icons/src/bin.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/checkcircle.js
+++ b/packages/icons/src/checkcircle.js
@ -1,7 +1,6 @@
 import React from 'react';
 import remcalc from 'remcalc';

-import Colors from './colors';
 import Rotate from './rotate';

 export const Tick = props => (
@ -19,9 +18,7 @@ export const Tick = props => (
  </svg>
 );

-export const Completed = props => (
-  <Colors white text greenDark>
-    {({ white, text, greenDark }) => (
+export const Completed = ({ colors = {}, ...props }) => (
  <svg
    width="18"
    height="18"
@ -30,23 +27,19 @@ export const Completed = props => (
    {...props}
  >
    <path
-          fill={greenDark}
+      fill={colors.greenDark}
      fill-rule="evenodd"
      d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
    />
    <path
      fill-rule="evenodd"
-          fill={white}
+      fill={colors.white}
      d="M12.017 5l-3.896 5.336-1.487-2.109L5 9.379l3.091 4.389 5.541-7.589L12.017 5z"
    />
  </svg>
-    )}
-  </Colors>
 );

-export const PartCompleted = props => (
-  <Colors white text greenDark>
-    {({ white, text, greenDark }) => (
+export const PartCompleted = ({ colors = {}, ...props }) => (
  <svg
    width="18"
    height="18"
@ -56,27 +49,23 @@ export const PartCompleted = props => (
    {...props}
  >
    <path
-          fill={white}
+      fill={colors.white}
      fillRule="evenodd"
      d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
    />
    <path
-          fill={greenDark}
+      fill={colors.greenDark}
      d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
    />
    <path
-          fill={text}
+      fill={colors.text}
      fillRule="evenodd"
      d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"
    />
  </svg>
-    )}
-  </Colors>
 );

-export const Incomplete = props => (
-  <Colors white text>
-    {({ white, text }) => (
+export const Incomplete = ({ colors = {}, ...props }) => (
  <svg
    width="18"
    height="18"
@ -86,17 +75,15 @@ export const Incomplete = props => (
    {...props}
  >
    <path
-          fill={white}
+      fill={colors.white}
      fillRule="evenodd"
      d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
    />
    <path
-          fill={text}
+      fill={colors.text}
      d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
    />
  </svg>
-    )}
-  </Colors>
 );

 export default ({
--- a/packages/icons/src/clipboard.js
+++ b/packages/icons/src/clipboard.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -49,6 +47,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/close.js
+++ b/packages/icons/src/close.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/cns.js
+++ b/packages/icons/src/cns.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -68,6 +66,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/colors.js
+++ b/packages/icons/src/colors.js
@ -1,25 +0,0 @@
-import { withTheme } from 'styled-components';
-
-export const colors = {
-  white: '#FFF',
-  text: '#464646',
-  greenDark: '#008138',
-  green: '#009858',
-  orange: '#e38200',
-  primary: '#3b46cc'
-};
-
-export default withTheme(
-  ({ theme = {}, children, direction = 'down', style = {}, ...rest }) =>
-    children(
-      Object.keys(rest)
-        .filter(name => Boolean(rest[name]))
-        .reduce(
-          (sum, name) => ({
-            ...sum,
-            [name]: theme[name] || colors[name] || rest[name]
-          }),
-          rest
-        )
-    )
-);
--- a/packages/icons/src/copy.js
+++ b/packages/icons/src/copy.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/cpu.js
+++ b/packages/icons/src/cpu.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -31,6 +29,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/data-center.js
+++ b/packages/icons/src/data-center.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/delete.js
+++ b/packages/icons/src/delete.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -48,6 +46,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/duplicate.js
+++ b/packages/icons/src/duplicate.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -48,6 +46,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/edit.js
+++ b/packages/icons/src/edit.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -52,6 +50,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/fabric.js
+++ b/packages/icons/src/fabric.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -33,6 +31,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/firewall.js
+++ b/packages/icons/src/firewall.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -64,6 +62,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/general.js
+++ b/packages/icons/src/general.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -31,6 +29,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/health.js
+++ b/packages/icons/src/health.js
@ -1,16 +1,14 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';

 export default ({
  healthy = true,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors green orange>
-    {({ green, orange }) => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -22,7 +20,12 @@ export default ({
        {...rest}
      >
        <g fill-rule="evenodd">
-              <circle fill={healthy ? green : orange} cx="9" cy="9" r="9" />
+          <circle
+            fill={healthy ? colors.green : colors.orange}
+            cx="9"
+            cy="9"
+            r="9"
+          />
          <path
            fill="#FFF"
            d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
@ -31,6 +34,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/id.js
+++ b/packages/icons/src/id.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -70,6 +68,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/import.js
+++ b/packages/icons/src/import.js
@ -1,14 +1,11 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';

 const ids = [rndId(), rndId(), rndId()];

-export default ({ direction = 'down', style = {}, ...rest }) => (
-  <Colors white text>
-    {({ white, text }) => (
+export default ({ direction = 'down', style = {}, colors = {}, ...rest }) => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -22,23 +19,23 @@ export default ({ direction = 'down', style = {}, ...rest }) => (
      >
        <g transform="translate(-2061 2768)">
          <clipPath id={`${ids[0]}`} clipRule="evenodd">
-                <path fill={white} d="M2061-2768h24v24h-24v-24z" />
+            <path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
          </clipPath>
          <g clipPath={`url(#${ids[0]})`}>
-                <path fill={white} d="M2061-2768h24v24h-24v-24z" />
+            <path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
            <use
              xlinkHref={`#${ids[1]}`}
-                  fill={text}
+              fill={colors.text}
              transform="translate(2061 -2754)"
            />
            <use
              xlinkHref={`#${ids[2]}`}
-                  fill={text}
+              fill={colors.text}
              transform="translate(2072 -2768)"
            />
            <use
              xlinkHref={`#${ids[3]}`}
-                  fill={text}
+              fill={colors.text}
              transform="translate(2067.29 -2755)"
            />
          </g>
@ -59,6 +56,4 @@ export default ({ direction = 'down', style = {}, ...rest }) => (
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@ -36,6 +36,7 @@ export { default as Public } from './public';
 export { default as Randomize } from './randomize';
 export { default as Reset } from './reset';
 export { default as Restart } from './restart';
+export { default as Services } from './services';
 export { default as Start } from './start';
 export { default as Stop } from './stop';
 export { default as Storage } from './storage';
--- a/packages/icons/src/instance-count.js
+++ b/packages/icons/src/instance-count.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -119,6 +117,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/instance-type.js
+++ b/packages/icons/src/instance-type.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -92,6 +90,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/instances.js
+++ b/packages/icons/src/instances.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/loading.js
+++ b/packages/icons/src/loading.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -13,11 +12,10 @@ export default ({
  secondary = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white primary text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -75,6 +73,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/login.js
+++ b/packages/icons/src/login.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -60,6 +58,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/memory.js
+++ b/packages/icons/src/memory.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -31,6 +29,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/metadata.js
+++ b/packages/icons/src/metadata.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -72,6 +70,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/minus.js
+++ b/packages/icons/src/minus.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/name.js
+++ b/packages/icons/src/name.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -33,6 +31,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/network.js
+++ b/packages/icons/src/network.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -47,6 +45,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/package.js
+++ b/packages/icons/src/package.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -47,6 +45,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/plus.js
+++ b/packages/icons/src/plus.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/private.js
+++ b/packages/icons/src/private.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -31,6 +29,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/public.js
+++ b/packages/icons/src/public.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -32,6 +30,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/randomize.js
+++ b/packages/icons/src/randomize.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -33,6 +31,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/reset.js
+++ b/packages/icons/src/reset.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -48,6 +46,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/services.js
+++ b/packages/icons/src/services.js
@ -0,0 +1,34 @@
+import React from 'react';
+
+import Rotate from './rotate';
+import calcFill from './fill';
+
+export default ({
+  fill = null,
+  light = false,
+  disabled = false,
+  direction = 'down',
+  colors = {},
+  style = {},
+  ...rest
+}) => (
+  <Rotate direction={direction}>
+    {({ style: rotateStyle }) => (
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        style={{ ...style, ...rotateStyle }}
+        {...rest}
+      >
+        <g data-name="Layer 2">
+          <path
+            fill={calcFill({ fill, disabled, light, colors })}
+            d="M6 5V4h5v1zm5 2V6H6v1zm0 2V8H6v1zm2-7H4v9h9V2m1-2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2V1a1 1 0 0 1 1-1zm0 14H1V2H0v12a1 1 0 0 0 1 1h13z"
+            data-name="Layer 1"
+          />
+        </g>
+      </svg>
+    )}
+  </Rotate>
+);
--- a/packages/icons/src/start.js
+++ b/packages/icons/src/start.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -64,6 +62,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/stop.js
+++ b/packages/icons/src/stop.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -60,6 +58,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/storage.js
+++ b/packages/icons/src/storage.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -31,6 +29,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/tags.js
+++ b/packages/icons/src/tags.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -12,11 +11,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -62,6 +60,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/icons/src/triton.js
+++ b/packages/icons/src/triton.js
@ -1,7 +1,6 @@
 import React from 'react';
 import rndId from 'rnd-id';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -11,10 +10,9 @@ const TritonBeta = ({
  fill = null,
  light = false,
  disabled = false,
+  colors = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <svg
    width="105"
    height="30"
@ -54,13 +52,15 @@ const TritonBeta = ({
      />
    </defs>
  </svg>
-    )}
-  </Colors>
 );

-const Triton = ({ fill = null, light = false, disabled = false, ...rest }) => (
-  <Colors white text grey>
-    {colors => (
+const Triton = ({
+  fill = null,
+  light = false,
+  disabled = false,
+  colors = {},
+  ...rest
+}) => (
  <svg
    width="105"
    height="19"
@ -74,8 +74,6 @@ const Triton = ({ fill = null, light = false, disabled = false, ...rest }) => (
      d="M81 9.502C81 4.256 76.747.004 71.5.004V0C66.253.002 62 4.256 62 9.502S66.253 19 71.5 19 81 14.748 81 9.502zM16.227 1H.773A.773.773 0 0 0 0 1.772v3.094c0 .426.346.772.773.772h4.61c.421 0 .765.336.773.756v10.834c0 .426.346.772.773.772h3.093a.773.773 0 0 0 .773-.772V6.394c0-.426.346-.772.773-.772h4.68a.773.773 0 0 0 .752-.76v-3.09A.773.773 0 0 0 16.227 1zM33 1.772v3.094c0 .426-.35.772-.783.772h-6.723a.778.778 0 0 0-.784.773v10.817c0 .426-.35.772-.783.772h-3.14a.788.788 0 0 1-.726-.472.763.763 0 0 1-.061-.3V5.634C20.002 3.074 22.107 1 24.702 1h7.515c.432 0 .783.346.783.772zM40.167 1h-3.334c-.46 0-.833.346-.833.772v15.456c0 .426.373.772.833.772h3.334c.46 0 .833-.346.833-.772V1.772c0-.426-.373-.772-.833-.772zm3.605 0h15.456c.426 0 .772.346.772.772V4.85a.772.772 0 0 1-.772.772h-4.662a.772.772 0 0 0-.772.772v10.833a.772.772 0 0 1-.772.773H49.93a.775.775 0 0 1-.784-.773V6.394a.772.772 0 0 0-.772-.756h-4.6A.772.772 0 0 1 43 4.866V1.772c0-.426.346-.772.772-.772zM84 1.772A.77.77 0 0 1 84.77 1h11.61c2.55 0 4.618 2.074 4.62 4.634v11.594a.77.77 0 0 1-.769.772H97.15a.77.77 0 0 1-.77-.772V6.394a.77.77 0 0 0-.765-.772H89.39a.77.77 0 0 0-.77.772v10.834a.77.77 0 0 1-.769.772h-3.08a.77.77 0 0 1-.77-.772V1.772zM71.5 5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm31.112-3.854H103v.84h.314v-.753l.551.767.253-.014.551-.764v.764H105V1h-.446l-.551.767L103.49 1H102v.146h.388V2h.228l-.004-.854z"
    />
  </svg>
-    )}
-  </Colors>
 );

 export default ({ beta = false, direction = 'down', style = {}, ...rest }) => (
--- a/packages/icons/src/user.js
+++ b/packages/icons/src/user.js
@ -1,6 +1,5 @@
 import React from 'react';

-import Colors from './colors';
 import Rotate from './rotate';
 import calcFill from './fill';

@ -9,11 +8,10 @@ export default ({
  light = false,
  disabled = false,
  direction = 'down',
+  colors = {},
  style = {},
  ...rest
 }) => (
-  <Colors white text grey>
-    {colors => (
  <Rotate direction={direction}>
    {({ style: rotateStyle }) => (
      <svg
@ -31,6 +29,4 @@ export default ({
      </svg>
    )}
  </Rotate>
-    )}
-  </Colors>
 );
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@ -6,14 +6,11 @@
  "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",
+    "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-ci":
-      "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-    "lint":
-      "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint-ci": "eslint . --ext .js --ext .md",
+    "lint": "eslint . --fix --ext .js --ext .md",
    "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
    "test-ci": "npm run test",
    "prepublish": "echo 0"
@ -28,7 +25,7 @@
    "date-fns": "^1.29.0",
    "declarative-redux-form": "^2.0.8",
    "joyent-manifest-editor": "^1.4.0",
-    "joyent-ui-toolkit": "^4.0.1",
+    "joyent-ui-toolkit": "^4.4.1",
    "lodash.find": "^4.6.0",
    "lodash.get": "^4.4.2",
    "lodash.isstring": "^4.0.1",
@ -40,7 +37,7 @@
    "param-case": "^2.1.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
-    "react-apollo": "^1.4.16",
+    "react-apollo": "^2.0.4",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-redux-values": "^1.0.2",
@ -50,7 +47,7 @@
    "redux-actions": "^2.2.1",
    "redux-form": "^7.2.0",
    "remcalc": "^1.0.9",
-    "styled-components": "^2.3.0",
+    "styled-components": "^2.4.0",
    "styled-components-spacing": "^2.1.3",
    "styled-flex-component": "^2.1.0",
    "title-case": "^2.1.1"
@ -62,9 +59,6 @@
    "jest-styled-components": "^4.9.0",
    "joyent-react-scripts": "^6.5.1",
    "react-test-renderer": "^16.2.0",
-    "redrun": "^5.10.0",
-    "serve": "^6.4.1",
-    "stylelint": "^8.4.0",
-    "stylelint-config-joyent-portal": "^2.0.1"
+    "redrun": "^5.10.0"
  }
 }
--- a/packages/my-joy-beta/public/index.html
+++ b/packages/my-joy-beta/public/index.html
@ -7,13 +7,14 @@

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-
    <title>My Joyent &beta;</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
+    <div id="header"></div>
    <div id="root"></div>
+    <script type="text/javascript" src="//localhost:3000/static/js/bundle.js"></script>
  </body>
 </html>
--- a/packages/my-joy-beta/src/app.js
+++ b/packages/my-joy-beta/src/app.js
@ -1,5 +1,6 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
+import { Provider as ReduxProvider } from 'react-redux';
 import { ApolloProvider } from 'react-apollo';

 import { theme, RootContainer } from 'joyent-ui-toolkit';
@ -54,11 +55,13 @@ const fullTheme = {
 };

 export default () => (
-  <ApolloProvider client={client} store={store}>
+  <ApolloProvider client={client}>
    <ThemeProvider theme={fullTheme}>
+      <ReduxProvider store={store}>
        <RootContainer>
          <Router />
        </RootContainer>
+      </ReduxProvider>
    </ThemeProvider>
  </ApolloProvider>
 );
--- a/packages/my-joy-beta/src/components/instances/key-value.js
+++ b/packages/my-joy-beta/src/components/instances/key-value.js
@ -8,7 +8,7 @@ import styled from 'styled-components';
 import remcalc from 'remcalc';
 import titleCase from 'title-case';
 import Flex, { FlexItem } from 'styled-flex-component';
-import Editor from 'joyent-ui-toolkit/dist/es/editor';
+// import Editor from 'joyent-ui-toolkit/dist/es/editor';

 import {
  Message,
@ -50,7 +50,7 @@ class ValueTextareaField extends PureComponent {
    const { input = {}, submitting } = this.props;

    return input.value === 'user-script' ? (
-      <Field name="value" component={Editor} />
+      <Field name="value" component="textarea" />
    ) : (
      <Textarea resize="vertical" disabled={submitting} fluid />
    );
--- a/packages/my-joy-beta/src/components/navigation/header.js
+++ b/packages/my-joy-beta/src/components/navigation/header.js
@ -1,57 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-
-import {
-  Header,
-  HeaderBrand,
-  TritonIcon,
-  DataCenterIcon,
-  UserIcon,
-  HeaderNav,
-  HeaderAnchor,
-  HeaderItem,
-  QueryBreakpoints
-} from 'joyent-ui-toolkit';
-
-const Logo = styled(TritonIcon)`
-  padding-top: ${remcalc(11)};
-`;
-
-const { Medium } = QueryBreakpoints;
-
-export default () => (
-  <Header fluid>
-    <HeaderBrand beta>
-      <HeaderAnchor to="/">
-        <Logo beta light alt="Triton" />
-      </HeaderAnchor>
-    </HeaderBrand>
-    <Medium>
-      <HeaderNav>
-        <li>
-          <HeaderAnchor to="/">Compute</HeaderAnchor>
-        </li>
-      </HeaderNav>
-    </Medium>
-    <Medium>
-      <HeaderItem>
-        <HeaderAnchor href="https://my.joyent.com">
-          Return to existing portal
-        </HeaderAnchor>
-      </HeaderItem>
-    </Medium>
-    <HeaderItem>
-      <HeaderAnchor>
-        <DataCenterIcon light />eu-east-1
-      </HeaderAnchor>
-    </HeaderItem>
-    <Medium>
-      <HeaderItem>
-        <HeaderAnchor>
-          <UserIcon light />Nicola
-        </HeaderAnchor>
-      </HeaderItem>
-    </Medium>
-  </Header>
-);
--- a/packages/my-joy-beta/src/components/navigation/index.js
+++ b/packages/my-joy-beta/src/components/navigation/index.js
@ -1,2 +1 @@
-export { default as Header } from './header';
 export { default as Menu } from './menu';
--- a/packages/my-joy-beta/src/containers/create-instance/firewall.js
+++ b/packages/my-joy-beta/src/containers/create-instance/firewall.js
@ -59,7 +59,8 @@ const Firewall = ({
                tagRules={tagRules}
                enabled={enabled}
              />
-            ) : null}
+            ) : null
+          }
        </ReduxForm>
      ) : null}
      {proceeded && !expanded ? (
@ -116,7 +117,7 @@ export default compose(
      }
    }),
    props: ({ ownProps, data }) => {
-      const { enabled, showInactive } = ownProps;
+      const { showInactive } = ownProps;

      const {
        firewall_rules_create_machine = [],
--- a/packages/my-joy-beta/src/router.js
+++ b/packages/my-joy-beta/src/router.js
@ -5,8 +5,8 @@ import get from 'lodash.get';
 import { PageContainer } from 'joyent-ui-toolkit';

 import { Breadcrumb, Menu } from '@containers/navigation';
-import { Header } from '@components/navigation';
 import Footer from '@components/navigation/footer';
+import CreateInstance from '@containers/create-instance';

 import {
  List as Instances,
@ -19,14 +19,10 @@ import {
  Snapshots as InstanceSnapshots,
  Resize as InstanceResize
 } from '@containers/instances';
-import CreateInstance from '@containers/create-instance';

 export default () => (
  <BrowserRouter>
    <PageContainer>
-      {/* Header */}
-      <Route path="*" component={Header} />
-
      {/* Breadcrumb */}
      <Switch>
        <Route
--- a/packages/my-joy-beta/src/state/reducers/index.js
+++ b/packages/my-joy-beta/src/state/reducers/index.js
@ -1 +0,0 @@
-export { default as ui } from './ui';
--- a/packages/my-joy-beta/src/state/reducers/ui.js
+++ b/packages/my-joy-beta/src/state/reducers/ui.js
@ -1,3 +0,0 @@
-import { handleActions } from 'redux-actions';
-
-export default handleActions({}, {});
--- a/packages/my-joy-beta/src/state/state.js
+++ b/packages/my-joy-beta/src/state/state.js
@ -1,7 +0,0 @@
-export default {
-  ui: {
-    sections: {
-      instances: ['summary', 'tags', 'metadata', 'snapshots']
-    }
-  }
-};
--- a/packages/my-joy-beta/src/state/store.js
+++ b/packages/my-joy-beta/src/state/store.js
@ -1,66 +1,45 @@
 import { reduxBatch } from '@manaflair/redux-batch';
-import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
+import { createStore, combineReducers, compose } from 'redux';
 import { reducer as formReducer } from 'redux-form';
-import { ApolloClient, createNetworkInterface } from 'react-apollo';
+import { ApolloClient } from 'apollo-client';
+import { HttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
 import { reducer as valuesReducer } from 'react-redux-values';

-import { ui } from './reducers';
-import state from './state';
-
-const GLOBAL =
-  typeof window === 'object'
-    ? window
-    : {
-        location: {
-          hostname: '0.0.0.0'
-        }
-      };
-
-const GQL_PORT = process.env.REACT_APP_GQL_PORT || 443;
-const GQL_PROTOCOL = process.env.REACT_APP_GQL_PROTOCOL || 'https';
-const GQL_HOSTNAME =
-  process.env.REACT_APP_GQL_HOSTNAME || GLOBAL.location.hostname;
+const {
+  REACT_APP_GQL_PORT = 443,
+  REACT_APP_GQL_PROTOCOL = 'https',
+  REACT_APP_GQL_HOSTNAME = window.location.hostname
+} = process.env;

 export const client = new ApolloClient({
-  dataIdFromObject: o => {
-    const id = o.id
-      ? o.id
-      : o.slug
-        ? o.slug
-        : o.uuid
-          ? o.uuid
-          : o.timestamp
-            ? o.timestamp
-            : o.name && o.instance
-              ? `${o.name}-${o.instance}`
-              : o.name
-                ? o.name
-                : o.time && o.value
-                  ? `${o.time}-${o.value}`
-                  : 'apollo-cache-key-not-defined';
-
-    return `${o.__typename}:${id}`;
-  },
-  networkInterface: createNetworkInterface({
-    uri: `${GQL_PROTOCOL}://${GQL_HOSTNAME}:${GQL_PORT}/graphql`
+  cache: new InMemoryCache(),
+  link: new HttpLink({
+    uri: `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}:${REACT_APP_GQL_PORT}/graphql`
  })
 });

+const initialState = {
+  ui: {
+    sections: {
+      instances: ['summary', 'tags', 'metadata', 'snapshots']
+    }
+  }
+};
+
 export const store = createStore(
  combineReducers({
    values: valuesReducer,
-    apollo: client.reducer(),
    form: formReducer,
-    ui
+    ui: (state = {}) => state
  }),
-  state, // Initial state
+  initialState,
  compose(
    reduxBatch,
-    applyMiddleware(client.middleware()),
    // If you are using the devToolsExtension, you can add it here also
    // eslint-disable-next-line no-negated-condition
-    typeof GLOBAL.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
-      ? GLOBAL.__REDUX_DEVTOOLS_EXTENSION__()
+    typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
+      ? window.__REDUX_DEVTOOLS_EXTENSION__()
      : f => f
  )
 );
--- a/packages/navigation/.babelrc
+++ b/packages/navigation/.babelrc
@ -0,0 +1,3 @@
+{
+  "presets": ["joyent-portal"]
+}
--- a/packages/navigation/.eslintignore
+++ b/packages/navigation/.eslintignore
@ -0,0 +1,2 @@
+build
+dist
--- a/packages/navigation/.eslintrc
+++ b/packages/navigation/.eslintrc
@ -0,0 +1,13 @@
+{
+  "extends": "joyent-portal",
+  "rules": {
+    "no-console": 0,
+    "new-cap": 0,
+    "camelcase": 1,
+    // temp
+    "no-undef": 1,
+    "no-debugger": 1,
+    "no-negated-condition": 0,
+    "jsx-a11y/href-no-hash": 0
+  }
+}
--- a/packages/navigation/.gitignore
+++ b/packages/navigation/.gitignore
@ -0,0 +1,62 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.env.js
+.DS_Store
+build
--- a/packages/navigation/.npmignore
+++ b/packages/navigation/.npmignore
@ -0,0 +1,3 @@
+*
+!build/**
+!lib/**
--- a/packages/navigation/.yarnclean
+++ b/packages/navigation/.yarnclean
--- a/packages/navigation/LICENSE
+++ b/packages/navigation/LICENSE
@ -0,0 +1,373 @@
+Mozilla Public License Version 2.0
+==================================
+
+1. Definitions
+--------------
+
+1.1. "Contributor"
+    means each individual or legal entity that creates, contributes to
+    the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+    means the combination of the Contributions of others (if any) used
+    by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+    means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+    means Source Code Form to which the initial Contributor has attached
+    the notice in Exhibit A, the Executable Form of such Source Code
+    Form, and Modifications of such Source Code Form, in each case
+    including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+    means
+
+    (a) that the initial Contributor has attached the notice described
+        in Exhibit B to the Covered Software; or
+
+    (b) that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the
+        terms of a Secondary License.
+
+1.6. "Executable Form"
+    means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+    means a work that combines Covered Software with other material, in
+    a separate file or files, that is not Covered Software.
+
+1.8. "License"
+    means this document.
+
+1.9. "Licensable"
+    means having the right to grant, to the maximum extent possible,
+    whether at the time of the initial grant or subsequently, any and
+    all of the rights conveyed by this License.
+
+1.10. "Modifications"
+    means any of the following:
+
+    (a) any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered
+        Software; or
+
+    (b) any new file in Source Code Form that contains any Covered
+        Software.
+
+1.11. "Patent Claims" of a Contributor
+    means any patent claim(s), including without limitation, method,
+    process, and apparatus claims, in any patent Licensable by such
+    Contributor that would be infringed, but for the grant of the
+    License, by the making, using, selling, offering for sale, having
+    made, import, or transfer of either its Contributions or its
+    Contributor Version.
+
+1.12. "Secondary License"
+    means either the GNU General Public License, Version 2.0, the GNU
+    Lesser General Public License, Version 2.1, the GNU Affero General
+    Public License, Version 3.0, or any later versions of those
+    licenses.
+
+1.13. "Source Code Form"
+    means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+    means an individual or a legal entity exercising rights under this
+    License. For legal entities, "You" includes any entity that
+    controls, is controlled by, or is under common control with You. For
+    purposes of this definition, "control" means (a) the power, direct
+    or indirect, to cause the direction or management of such entity,
+    whether by contract or otherwise, or (b) ownership of more than
+    fifty percent (50%) of the outstanding shares or beneficial
+    ownership of such entity.
+
+2. License Grants and Conditions
+--------------------------------
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+    Licensable by such Contributor to use, reproduce, make available,
+    modify, display, perform, distribute, and otherwise exploit its
+    Contributions, either on an unmodified basis, with Modifications, or
+    as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+    for sale, have made, import, and otherwise transfer either its
+    Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+    or
+
+(b) for infringements caused by: (i) Your and any other third party's
+    modifications of Covered Software, or (ii) the combination of its
+    Contributions with other software (except as part of its Contributor
+    Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+    its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+-------------------
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+    Form, as described in Section 3.1, and You must inform recipients of
+    the Executable Form how they can obtain a copy of such Source Code
+    Form by reasonable means in a timely manner, at a charge no more
+    than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+    License, or sublicense it under different terms, provided that the
+    license for the Executable Form does not attempt to limit or alter
+    the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+---------------------------------------------------
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+--------------
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+************************************************************************
+*                                                                      *
+*  6. Disclaimer of Warranty                                           *
+*  -------------------------                                           *
+*                                                                      *
+*  Covered Software is provided under this License on an "as is"       *
+*  basis, without warranty of any kind, either expressed, implied, or  *
+*  statutory, including, without limitation, warranties that the       *
+*  Covered Software is free of defects, merchantable, fit for a        *
+*  particular purpose or non-infringing. The entire risk as to the     *
+*  quality and performance of the Covered Software is with You.        *
+*  Should any Covered Software prove defective in any respect, You     *
+*  (not any Contributor) assume the cost of any necessary servicing,   *
+*  repair, or correction. This disclaimer of warranty constitutes an   *
+*  essential part of this License. No use of any Covered Software is   *
+*  authorized under this License except under this disclaimer.         *
+*                                                                      *
+************************************************************************
+
+************************************************************************
+*                                                                      *
+*  7. Limitation of Liability                                          *
+*  --------------------------                                          *
+*                                                                      *
+*  Under no circumstances and under no legal theory, whether tort      *
+*  (including negligence), contract, or otherwise, shall any           *
+*  Contributor, or anyone who distributes Covered Software as          *
+*  permitted above, be liable to You for any direct, indirect,         *
+*  special, incidental, or consequential damages of any character      *
+*  including, without limitation, damages for lost profits, loss of    *
+*  goodwill, work stoppage, computer failure or malfunction, or any    *
+*  and all other commercial damages or losses, even if such party      *
+*  shall have been informed of the possibility of such damages. This   *
+*  limitation of liability shall not apply to liability for death or   *
+*  personal injury resulting from such party's negligence to the       *
+*  extent applicable law prohibits such limitation. Some               *
+*  jurisdictions do not allow the exclusion or limitation of           *
+*  incidental or consequential damages, so this exclusion and          *
+*  limitation may not apply to You.                                    *
+*                                                                      *
+************************************************************************
+
+8. Litigation
+-------------
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+----------------
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+---------------------------
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+Exhibit A - Source Code Form License Notice
+-------------------------------------------
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+---------------------------------------------------------
+
+  This Source Code Form is "Incompatible With Secondary Licenses", as
+  defined by the Mozilla Public License, v. 2.0.
--- a/packages/navigation/README.md
+++ b/packages/navigation/README.md
@ -0,0 +1 @@
+# minio-proto-ui
--- a/packages/navigation/package.json
+++ b/packages/navigation/package.json
@ -0,0 +1,44 @@
+{
+  "name": "joyent-navigation",
+  "version": "1.0.0",
+  "license": "MPL-2.0",
+  "main": "src",
+  "scripts": {
+    "dev": "PREACT=1 NODE_ENV=development joyent-react-scripts start",
+    "build": "PREACT=1 NODE_ENV=production joyent-react-scripts build",
+    "test": "NODE_ENV=test joyent-react-scripts test",
+    "test-ci": "npm run test",
+    "fmt": "prettier --write --single-quote *.md src/**/*.js src/**/*.gql",
+    "lint-ci": "eslint . --ext .js --ext .md",
+    "lint": "eslint . --fix --ext .js --ext .md"
+  },
+  "dependencies": {
+    "apollo-cache-inmemory": "^1.1.5",
+    "apollo-client": "^2.2.0",
+    "apollo-link": "^1.0.7",
+    "apollo-link-http": "^1.3.2",
+    "apollo-link-state": "^0.3.1",
+    "emotion": "^8.0.12",
+    "emotion-theming": "^8.0.12",
+    "graphql-tag": "^2.6.1",
+    "joyent-icons": "^3.0.0",
+    "joyent-ui-toolkit": "^4.4.2",
+    "lodash.chunk": "^4.2.0",
+    "outy": "^0.1.2",
+    "param-case": "^2.1.1",
+    "pascal-case": "^2.0.1",
+    "preact": "^8.2.7",
+    "preact-compat": "^3.17.0",
+    "preact-emotion": "^8.0.12",
+    "preact-emotion-flexboxgrid": "^1.0.1",
+    "react-apollo": "^2.0.4",
+    "remcalc": "^1.0.9"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.2.1",
+    "babel-preset-joyent-portal": "^6.0.1",
+    "eslint": "^4.15.0",
+    "eslint-config-joyent-portal": "^3.2.0",
+    "joyent-react-scripts": "^6.5.1"
+  }
+}
--- a/packages/navigation/public/index.html
+++ b/packages/navigation/public/index.html
@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <style>
+      @import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600');
+
+      html, body {
+        margin: 0;
+        font-display: optional;
+        font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
+        font-weight: 400;
+        background-color: #F7F7F7;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="header"></div>
+  </body>
+</html>
--- a/packages/navigation/src/app.js
+++ b/packages/navigation/src/app.js
@ -0,0 +1,37 @@
+import React from 'react';
+import { ApolloProvider } from 'react-apollo';
+import { ThemeProvider } from 'emotion-theming';
+
+import theme from 'joyent-ui-toolkit/dist/es/theme';
+
+import { client } from './state';
+import Header from './header';
+
+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
+    }
+  }
+};
+
+export default () => (
+  <ApolloProvider client={client}>
+    <ThemeProvider theme={fullTheme}>
+      <Header />
+    </ThemeProvider>
+  </ApolloProvider>
+);
--- a/packages/navigation/src/components/avatar.js
+++ b/packages/navigation/src/components/avatar.js
@ -0,0 +1,14 @@
+import React from 'react';
+import emotion from 'preact-emotion';
+import remcalc from 'remcalc';
+
+const Img = emotion('img')`
+  width: ${remcalc(24)};
+`;
+
+export default props => (
+  <Img
+    {...props}
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsSAAALEgHS3X78AAALZElEQVR4nN2dfWwbZx3HP/dmO2kaZ0lbm74lXdauY23SUmnaVrZl0GloINWFSf0L1lYgxJhEiCbgP4LE/kCC0moaQ0hoKYOpQ5S52ipWwVi2AW1hG0nXvWhd1mRdW2dKsrqkjd/Oxx93dmzf+XznnN0kX6nq5bnn7fe95/d7fs+rBU3TuJ6I93X2AFuAFqDHCN4CBC2ijwGjxvOg8TwU3D8yVMMq2kKoN4Hxvs4tQASdrHs8zPooOqnR4P6RUQ/ztUVdCIz3dXYAvejEtde8QBgGBoCB4P6Ry7UsqKYEGurZj7ctzS0OAQdqpeY1IXCeEFeKV4A9Xqu3pwQaqjrA/CKuFIeAXq9UW/QiE4B4X2c/cI75TR7AQ8BovK8z4kVmc26BRq86AHR7UaE64yi6WlfdGufUAuN9nXvQXYeFSB7ATmDIaARVoWoCDZV9CmuHdyGhHRg0GoNrVKXC8b7OAXRbstiwN7h/ZMBNAtctcBGTB/CU25bomEA1Gm6Z+c3aF1m85OkQ+FXqmVUPO43upgUO+Fak7vfdlDlfRbUWBgRmGrYmG6RG9Qk1Gu5xksQRgWo0PIDeY+FbmVyzKEnMkdeUyYVE1Wi4Yu9ckUA1Gt5DidouOhLN5IHuXQyo0XCLXVJbAo0vcMDq3aIh0Zq8HLopI38OlVrgADZ+3oIn0Z68HB5So+Gyw76yBKrRcD8ORhgLlkRn5OVQVpUtCVSj4Q7gx07rsuBIdEce6FpoqcrlWqCt3lthwZDonrwcHrJybUwEGpF2VlO3eU9i9eTl0F8aYNUCTZHcYN6SOHfyAO4pbYVFBBpuy5wnROcdid6Ql0Nv4R+lLbAXjzBvSPSWPICdRicLFBBodNOeThRcdxK9Jy+HfEOTCwKdrREobYhLi4eI2amXykb3rUyuAc6nPpDXuKriXOGEPJeyFCCCQaIjAoWGToTVD0LHVxGWmNfFJYBP30Ib+T3Z8RcgPVn0vu4k2pGntCF2fLNqWQy0q9FwRIrEooKmaTn1/dQqprj+hwgb9oHicOY+HUd7/Udkx58zvUpd9NeeRBvyvJQFOChFYr05G2hufUob0j1/Rbj1+84LBFCCCHc8idR90PSq5jaxHHlKG9IdRzyVBYOzHIE9pgLvPAw3bHZeWCnW7a4viXbk3XkYQturz9talnY1Gu7I2cAiSyp1/9yWvJN/P078sq7xN27YyPpNZeYd1+1GjL9PdvSJomDPbaKN2rqRJdhyA7d/4X7riOt2I167SPbszwpDt+RsYH5pTgztQrjjScs8Hnv0YV489jyJxLWi8NbWZXzru708uO87lumyx7ejzYyYwj2xiXY2r4Isr778ElNTE0XhLmX5iZB5LtQDvJwv9L5Tpt5pcvwS+772ABcvfGQry+133sXjf4iaX5x7FnX4e5Zp5kRiBVelnCyPfP1BPjj7nm3WDmV5RUTfGaoXGNpl2bX/4NvfqEgewMl/vcZjj1osaK3bDUqbZZqqbWIl8lq/WFaWSuSBY1laRArsn9C2zRT/+J8Pc3r4zYoF5vDiseeZHL9kChdDXymbxjWJDpxkIXyvKcytLNEjz3L2jHlbYYEs3cVj4eAtpsh//N1vHRcIkEhc4+lfW3T7DWHbdI5JdDo8s5DlhSOHK2ZfimMWaYTm9fnnohZI6yZT5I/PV1bdUrz13zfMhS67rWK6iiS6GNtqTatNYe+/927FdKU49c/XzIEFH0emwAYmjz9uinvXiiysaHVVaDg4TfKFnxaFiT7V0SJ0WRfH5cRA6uWnTWFVybIiayuLkHkuNIgxBzh9ajkki10UryCt7qThxtOO4xf1zlXMqlwdXosWtxzHzhmFshQ1Cmn5Z2pSIIC0zHZ92oS8OgskqpmSEpe6K88NpJbm/LNc+kL9uDaFiv6s6zS+lck1yooUgux+C15NZVlS8MzsyR/EpZ5PPOYh+9+pKl015AHIwdqYIiiWpYhAWTmJELR2eOcC5eYuYMrzfO0gSm/WRRa5NIJ/41oSp7w1vr7QRdv3WkYgOeInMylBBqRlWXxr0xTavfSkQnpMITstIAQ0pJBKoD1pm6//sytJnKitLCJQ5GrL/n8g32h2QqsucMs2BMZs48ycbiAzrpMHoE6IzJz2k01IgE5e8m0f2WkBAC0hkBmTSYwEbPOVlZO1lmVYBExb/AOrP0RcvmrOBSo3d+FrftU2Tio2S0wRMpAaUwBIG/+bolyQ8iSXQ41luSxKkdigOfoUjbdMzKlg5eYu/KETFeNlkzp5QkBDXqUit2cQg3rHkU3oXlaOYGlZFrk9g7xKzRufbMKC/CLUVJbB3HzgEGV2YqWu3E1qyDw0Kwt/I4HPdSIrJx1Fz1yWUa9K+ELF7koq5gPAF06RGPMjB1XkllmbqGUEkhd8+EIZxIDqqKxqZPFv3ojSaDGc07ErR+ABwHrCDtBoJz21hvT5j8p69+LyVSjtIZTGt6l3j+sGGu2kr7STPjfqhSzrcgRGAMulJ6sKaKruHmhZjcxElvTFiwjqVeRVKv5V9j3j9UY2IZH80Ic6ISKtWIa8shVpyawZEKVRHDaAYSkS25JzYwadVkBgDEHSe6JrZxrJxvXCX/vEDx/BfV9SqcFOAM8w/k6A4Q99LPVpdDOB+skEga5kkXlwiEEoOKmkRsNRXG5rm351CX+56OMXpz4xvQv4JNaElrD9ts08vPdemInBtY/RZkYt10e8gtC8DUFugeaNoDTxaP8zXBqf4Pz4VRKpYlsZUCQe+3wr27pnKvqUFtgqRWJDhY60awIBLl2zHuMmUipnz19hxwMb9PVYA3llScdh6oz+HH8XLf2/2cRX3of0FXOmjauLJmaFxpV6GJRdtrx05U+cPW+RF5BIO+t8LDAmRWJDUDwSiaLvTHW88iwGNfbdlOFcppUT77rsOJTgrNCh7VRyRmqBnZvb6G5JIwddE5lfbcoTKEVilw01drxDq+HWGVLjPn55d5K/nQ5x7D9pTpyZvz0w6KZl64Ygj3wZOpqukU0K1di//Bbo0rFwPy4IFGQt3+vu6JpiRxeAQvRkK2+MqIyOp9xWzHP4FYn1a5rZ1B5g23qBHV1TwKy5kJpcZ3lUisRGc3+Yjruq0fAgHh/bF5q3ITSsheYNCMrS2TWF1k3u9qqUQ4E91Sb+rYdNvl6rDuvewtGbFYE9FCy01w0We/Xs4HAfn9d4RYrEegoDLA9cG4cLF/ex1uqwNdf75lBuoawfiNe8OgsLB0vJgzIEGkbS9WGbuSAx5tentipMT4E+kZCeVEiM+R3F9wBxyhz/sL0zwW6WxktkLsskTvvzf4tNGmKbihxUkZp0H02dllCvSmTjIurE7HeX2zPVjCLcYpcUiVnsNLKY0i/BHvQxX01v5hADxR8xOy2QnZbJVKweSE3uV/tc4lA58qDCcVdD5z07O1K2EgFVnyR1m65JQ2lL16BGeQxTQf6Kuy2kSGwAsNwk7CUCnQlXJIpBjYaumRrWiDgQkSIx21uNHN8bUy/XJpuQSF1QyMZF01qJENCQglnkUKaa4ZcbxIEeq163FJWNzCx60Xdy1bRTEQMqgc6qZ0m8Qq8T8sDFtSdGU+5BtwuLGXsNs+UIrm4uKiDxqLs6LQjE0d2VATeJqr7+bpEN9xzbvFJUfXubFIntAfZWm34eYRjoqIY88OACRuOQ9gAL8w7Bg1IkNic/d85XgBpfroc6+IoeYgx9Xm/OgwRPL6EtuOlovt6jGgcOSJFYv1cZ1uQaZGOh/gD1uXTbKQ6h+3eeXsxd04u4DSJ7uX4tMo7+IQcK1zG8RF2ugjcuaajnVfBHgahbn64a1P3HCAw76fWPEYyhT7sNohNX0/vzC1F3AkthLGJ1GP9yP4sBZnILfwpjCH1j6CAwWiv1dIL/A+EDttkCSrnHAAAAAElFTkSuQmCC"
+  />
+);
--- a/packages/navigation/src/components/datacenter.js
+++ b/packages/navigation/src/components/datacenter.js
@ -0,0 +1,19 @@
+import emotion from 'preact-emotion';
+import remcalc from 'remcalc';
+
+import { Category } from './service';
+
+export const Place = emotion(Category)`
+  margin-bottom: ${remcalc(10)};
+`;
+
+export const Region = emotion('h6')`
+  margin: ${remcalc(6)} 0;
+
+  font-size: ${remcalc(13)};
+  line-height: ${remcalc(18)};
+  font-weight: ${props => props.theme.font.weight.normal};
+  color: #494949;
+`;
+
+export { Name as default } from './service';
--- a/packages/navigation/src/components/header.js
+++ b/packages/navigation/src/components/header.js
@ -0,0 +1,165 @@
+import { findDOMNode } from 'react-dom';
+import React, { PureComponent } from 'react';
+import emotion from 'preact-emotion';
+import remcalc from 'remcalc';
+import outy from 'outy';
+
+import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
+
+export const Item = emotion('div')`
+  order: 0;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 1;
+
+  padding: ${remcalc(12)} ${remcalc(18)};
+  cursor: pointer;
+  height: ${remcalc(24)};
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: stretch;
+  align-items: center;
+
+  ${props =>
+    props.active &&
+    `
+    height: ${remcalc(27)};
+    border-bottom: ${remcalc(3)} solid #E38200;
+    background-color: rgba(0, 0, 0, 0.25);
+  `};
+`;
+
+export const FlexibleSpace = emotion(Item)`
+  flex-grow: 1;
+
+  &:hover {
+    background-color: transparent;
+  }
+`;
+
+export const Content = emotion('div')`
+  flex: 1 1 auto;
+  align-self: center;
+  display: flex;
+
+  font-size: ${remcalc(15)};
+  line-height: ${remcalc(24)};
+  font-weight: ${props => props.theme.font.weight.semibold};
+  color: ${props => props.theme.white};
+
+  @media (max-width: ${remcalc(breakpoints.small.upper)}) {
+    display: none;
+  }
+`;
+
+export const SubContent = emotion('span')`
+  font-size: ${remcalc(15)};
+  line-height: ${remcalc(24)};
+  font-weight: ${props => props.theme.font.weight.normal};
+  color: rgba(255, 255, 255, 0.5);
+`;
+
+export const Icon = emotion('div')`
+  display: flex;
+  flex: 0 0 auto;
+  align-self: auto;
+  justify-content: center;
+  align-items: center;
+
+  ${props =>
+    !props.marginless &&
+    `
+    margin-left: ${remcalc(6)};
+  `};
+`;
+
+export const Divider = emotion('div')`
+  order: 0;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 1;
+
+  background-color: black;
+  flex: 0 1 ${remcalc(1)};
+  height: ${remcalc(36)};
+`;
+
+export const Row = emotion('div')`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: ${remcalc(48)};
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+`;
+
+const Header = emotion('header')`
+  background-color: #1e313b;
+
+  width: 100%;
+  height: ${remcalc(48)};
+`;
+
+export default class extends PureComponent {
+  _refs = {};
+
+  _ref = name => c => {
+    Object.assign(this._refs, { [name]: findDOMNode(c) });
+  };
+
+  _removeOutsideTap = () => {
+    return this.outsideTap && this.outsideTap.remove();
+  };
+
+  _setOusideTap = () => {
+    if (!this.props.onOutsideClick) {
+      return;
+    }
+
+    const elements = Object.values(this._refs);
+
+    this._removeOutsideTap();
+
+    if (!elements.length) {
+      return;
+    }
+
+    this.outsideTap = outy(
+      elements,
+      ['click', 'touchend'],
+      this.props.onOutsideClick
+    );
+  };
+
+  componentDidMount = () => {
+    this._setOusideTap();
+  };
+
+  componentDidUpdate = () => {
+    this._setOusideTap();
+  };
+
+  componentWillUnmount = () => {
+    this._removeOutsideTap();
+  };
+
+  render() {
+    const { children, ...props } = this.props;
+
+    return (
+      <Header {...props} innerRef={this._ref('overlay')}>
+        {children}
+      </Header>
+    );
+  }
+}
--- a/packages/navigation/src/components/icons.js
+++ b/packages/navigation/src/components/icons.js
@ -0,0 +1,15 @@
+import React from 'react';
+import { withTheme } from 'emotion-theming';
+
+import BaseDataCenter from 'joyent-icons/dist/es/data-center';
+import BaseTriton from 'joyent-icons/dist/es/triton';
+import BaseServices from 'joyent-icons/dist/es/services';
+
+const Colors = Component =>
+  withTheme(({ theme = {}, ...rest }) => (
+    <Component {...rest} colors={theme} />
+  ));
+
+export const DataCenter = Colors(BaseDataCenter);
+export const Services = Colors(BaseServices);
+export const Triton = Colors(BaseTriton);
--- a/packages/navigation/src/components/index.js
+++ b/packages/navigation/src/components/index.js
@ -0,0 +1,33 @@
+export { default as Avatar } from './avatar';
+
+export {
+  default as Datacenter,
+  Region as DatacenterRegion,
+  Place as DatacenterPlace
+} from './datacenter';
+
+export {
+  default as Header,
+  Row as HeaderRow,
+  Item as HeaderItem,
+  Content as HeaderItemContent,
+  Icon as HeaderItemIcon,
+  FlexibleSpace as HeaderFlexibleSpaceItem,
+  Divider as HeaderDividerItem,
+  SubContent as HeaderItemSubContent
+} from './header';
+
+export {
+  DataCenter as DataCenterIcon,
+  Services as ServicesIcon,
+  Triton as TritonIcon
+} from './icons';
+
+export {
+  default as Service,
+  Name as ServiceName,
+  Description as ServiceDescription,
+  Category as ServiceCategory
+} from './service';
+
+export { default as Overlay } from './overlay';
--- a/packages/navigation/src/components/overlay.js
+++ b/packages/navigation/src/components/overlay.js
@ -0,0 +1,15 @@
+import emotion from 'preact-emotion';
+import remcalc from 'remcalc';
+
+export default emotion('div')`
+  border-bottom: ${remcalc(1)} solid #d8d8d8;
+
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  top: ${remcalc(48)};
+  left: 0;
+
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+`;
--- a/packages/navigation/src/components/service.js
+++ b/packages/navigation/src/components/service.js
@ -0,0 +1,35 @@
+import emotion from 'preact-emotion';
+import remcalc from 'remcalc';
+
+export const Category = emotion('h4')`
+  font-size: ${remcalc(15)};
+  line-height: ${remcalc(24)};
+  font-weight: ${props => props.theme.font.weight.semibold};
+  padding-bottom: ${remcalc(6)};
+  color: #979797;
+  border-bottom: ${remcalc(1)} solid #f7f7f7;
+  margin: 0 0 ${remcalc(22)} 0;
+`;
+
+export const Name = emotion(Category)`
+  font-size: ${remcalc(15)};
+  line-height: ${remcalc(24)};
+  font-weight: ${props => props.theme.font.weight.semibold};
+  color: #494949;
+  border-bottom: none;
+  padding-bottom: 0;
+  margin: 0;
+`;
+
+export const Description = emotion('h6')`
+  font-size: ${remcalc(13)};
+  line-height: ${remcalc(18)};
+  font-weight: ${props => props.theme.font.weight.normal};
+  color: #979797;
+  margin: 0;
+`;
+
+export default emotion('a')`
+  display: block;
+  margin-bottom: ${remcalc(22)};
+`;
--- a/packages/navigation/src/containers/datacenter.js
+++ b/packages/navigation/src/containers/datacenter.js
@ -0,0 +1,107 @@
+import React from 'react';
+import emotion from 'preact-emotion';
+import { graphql, compose } from 'react-apollo';
+import gql from 'graphql-tag';
+import remcalc from 'remcalc';
+
+import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
+import {
+  DatacenterPlace,
+  DatacenterRegion,
+  Datacenter,
+  Overlay
+} from '../components';
+
+const Container = emotion('div')`
+  background-color: #ffffff;
+`;
+
+const TitleContainer = emotion('div')`
+  background-color: ${props => props.theme.background};
+`;
+
+const RegionContainer = emotion('div')`
+  padding-top: ${remcalc(18)};
+  padding-bottom: ${remcalc(24)};
+`;
+
+const getDatacenters = gql`
+  {
+    regions @client {
+      name
+      slug
+    }
+    places @client {
+      name
+      slug
+      region
+    }
+    datacenters @client {
+      name
+      slug
+      place
+    }
+  }
+`;
+
+const Datacenters = ({ regions = [] }) => (
+  <Overlay>
+    {regions.map(({ name, slug, places }) => (
+      <div key={slug}>
+        <TitleContainer>
+          <Grid>
+            <Row>
+              <Col>
+                <DatacenterRegion>{name}</DatacenterRegion>
+              </Col>
+            </Row>
+          </Grid>
+        </TitleContainer>
+        <Container>
+          <Grid>
+            <RegionContainer>
+              <Row>
+                {places.map(({ name, slug, datacenters }) => (
+                  <Col key={slug} xs={12} md={6} lg={3}>
+                    <DatacenterPlace>{name}</DatacenterPlace>
+                    {datacenters.map(({ name, slug }) => (
+                      <Datacenter key={slug}>{name}</Datacenter>
+                    ))}
+                  </Col>
+                ))}
+              </Row>
+            </RegionContainer>
+          </Grid>
+        </Container>
+      </div>
+    ))}
+  </Overlay>
+);
+
+export default compose(
+  graphql(getDatacenters, {
+    props: ({ data }) => {
+      const {
+        regions = [],
+        places = [],
+        datacenters = [],
+        loading = false,
+        error = null
+      } = data;
+
+      const _regions = regions.map(({ slug, ...region }) => ({
+        ...region,
+        places: places
+          .filter(({ region }) => region === slug)
+          .map(({ slug, ...place }) => ({
+            ...place,
+            datacenters: datacenters.filter(({ place }) => place === slug),
+            slug
+          })),
+        slug
+      }));
+
+      return { regions: _regions, loading, error };
+    }
+  })
+)(Datacenters);
--- a/packages/navigation/src/containers/index.js
+++ b/packages/navigation/src/containers/index.js
@ -0,0 +1,2 @@
+export { default as Services } from './services';
+export { default as Datacenter } from './datacenter';
--- a/packages/navigation/src/containers/services.js
+++ b/packages/navigation/src/containers/services.js
@ -0,0 +1,81 @@
+import React from 'react';
+import emotion from 'preact-emotion';
+import { graphql, compose } from 'react-apollo';
+import gql from 'graphql-tag';
+import chunk from 'lodash.chunk';
+import remcalc from 'remcalc';
+
+import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
+
+import {
+  ServiceCategory,
+  ServiceName,
+  ServiceDescription,
+  Service,
+  Overlay
+} from '../components';
+
+const Container = emotion('div')`
+  padding-top: ${remcalc(30)};
+  background-color: #ffffff;
+`;
+
+const getHeader = gql`
+  {
+    categories @client {
+      name
+      slug
+    }
+    services @client {
+      name
+      description
+      category
+      slug
+    }
+  }
+`;
+
+const Services = ({ categories = [] }) => (
+  <Overlay>
+    <Container>
+      <Grid>
+        {chunk(categories, 4).map(chunk => (
+          <Row>
+            {chunk.map(({ name, services }) => (
+              <Col xs={12} md={6} lg={3}>
+                <ServiceCategory>{name}</ServiceCategory>
+                {services.map(({ name, description }) => (
+                  <Service>
+                    <ServiceName>{name}</ServiceName>
+                    <ServiceDescription>{description}</ServiceDescription>
+                  </Service>
+                ))}
+              </Col>
+            ))}
+          </Row>
+        ))}
+      </Grid>
+    </Container>
+  </Overlay>
+);
+
+export default compose(
+  graphql(getHeader, {
+    props: ({ data }) => {
+      const {
+        categories = [],
+        services = [],
+        loading = false,
+        error = null
+      } = data;
+
+      const _categories = categories.map(({ slug, ...category }) => ({
+        ...category,
+        services: services.filter(({ category }) => category === slug),
+        slug
+      }));
+
+      return { categories: _categories, loading, error };
+    }
+  })
+)(Services);
--- a/packages/navigation/src/header.js
+++ b/packages/navigation/src/header.js
@ -0,0 +1,118 @@
+import React from 'react';
+import { graphql, compose } from 'react-apollo';
+import gql from 'graphql-tag';
+import pascalCase from 'pascal-case';
+
+import { DataCenterIcon, TritonIcon, ServicesIcon } from './components';
+import * as Overlays from './containers';
+
+import {
+  Avatar,
+  Header,
+  HeaderRow,
+  HeaderItem,
+  HeaderItemContent,
+  HeaderItemSubContent,
+  HeaderItemIcon,
+  HeaderFlexibleSpaceItem,
+  HeaderDividerItem
+} from './components';
+
+const updateHeaderMutation = gql`
+  mutation updateHeader($isOpen: Boolean!, $activePanel: String!) {
+    updateHeader(isOpen: $isOpen, activePanel: $activePanel) @client
+  }
+`;
+
+const getHeader = gql`
+  {
+    isOpen @client
+    activePanel @client
+  }
+`;
+
+const Panel = ({ name = '', expanded = false, children, ...rest }) => {
+  if (!expanded) {
+    return null;
+  }
+
+  const overlay = Overlays[pascalCase(name)];
+
+  if (!overlay) {
+    return null;
+  }
+
+  return React.createElement(overlay, rest, children);
+};
+
+const Navigation = ({ toggleSectionOpen, isOpen, activePanel }) => (
+  <Header onOutsideClick={() => toggleSectionOpen()}>
+    <HeaderRow>
+      <HeaderItem>
+        <TritonIcon light />
+      </HeaderItem>
+      <HeaderDividerItem />
+      <HeaderItem
+        onClick={() => toggleSectionOpen('services')}
+        active={isOpen && activePanel === 'services'}
+      >
+        <HeaderItemContent>Services</HeaderItemContent>
+        <HeaderItemIcon>
+          <ServicesIcon light />
+        </HeaderItemIcon>
+      </HeaderItem>
+      <HeaderDividerItem />
+      <HeaderFlexibleSpaceItem />
+      <HeaderDividerItem />
+      <HeaderItem
+        onClick={() => toggleSectionOpen('datacenter')}
+        active={isOpen && activePanel === 'datacenter'}
+      >
+        <HeaderItemContent>
+          <HeaderItemSubContent>Data Center:</HeaderItemSubContent> us-east-1
+        </HeaderItemContent>
+        <HeaderItemIcon>
+          <DataCenterIcon light />
+        </HeaderItemIcon>
+      </HeaderItem>
+      <HeaderDividerItem />
+      <HeaderItem>
+        <HeaderItemContent>
+          <HeaderItemSubContent>Account:</HeaderItemSubContent> George
+        </HeaderItemContent>
+        <HeaderItemIcon>
+          <Avatar />
+        </HeaderItemIcon>
+      </HeaderItem>
+    </HeaderRow>
+    <Panel expanded={isOpen} name={activePanel} />
+  </Header>
+);
+
+export default compose(
+  graphql(getHeader, {
+    props: ({ data }) => {
+      const {
+        isOpen = false,
+        activePanel = '',
+        loading = false,
+        error = null
+      } = data;
+
+      return { isOpen, activePanel, loading, error };
+    }
+  }),
+  graphql(updateHeaderMutation, {
+    props: ({ mutate, ownProps }) => ({
+      toggleSectionOpen: (name = '') => {
+        const { isOpen, activePanel } = ownProps;
+        return mutate({
+          variables: {
+            isOpen: !(isOpen && name === activePanel),
+            activePanel: name
+          }
+        });
+      }
+    })
+  })
+)(Navigation);
--- a/packages/navigation/src/index.js
+++ b/packages/navigation/src/index.js
@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('header'));
--- a/packages/navigation/src/state/client.js
+++ b/packages/navigation/src/state/client.js
@ -0,0 +1,29 @@
+import ApolloClient from 'apollo-client';
+import { HttpLink } from 'apollo-link-http';
+import { ApolloLink } from 'apollo-link';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { withClientState } from 'apollo-link-state';
+
+import defaultState from './local';
+
+const {
+  REACT_APP_GQL_PORT = 443,
+  REACT_APP_GQL_PROTOCOL = 'https',
+  REACT_APP_GQL_HOSTNAME = window.location.hostname
+} = process.env;
+
+const URI = `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}:${REACT_APP_GQL_PORT}/graphql`;
+
+const cache = new InMemoryCache();
+const remote = new HttpLink({ uri: URI });
+
+const local = withClientState({
+  cache,
+  ...defaultState
+});
+
+export default new ApolloClient({
+  addTypename: true,
+  link: ApolloLink.from([local, remote]),
+  cache
+});
--- a/packages/navigation/src/state/index.js
+++ b/packages/navigation/src/state/index.js
@ -0,0 +1,2 @@
+export { default as client } from './client';
+export { default as local } from './local';
--- a/packages/navigation/src/state/local.js
+++ b/packages/navigation/src/state/local.js
@ -0,0 +1,208 @@
+import paramCase from 'param-case';
+
+const dataSlugFromObjects = (arr = []) =>
+  arr.map(({ name, ...obj }) => ({
+    ...obj,
+    name,
+    slug: paramCase(name)
+  }));
+
+export default {
+  resolvers: {
+    Mutation: {
+      updateHeader: (_, { isOpen, activePanel }, { cache }) => {
+        cache.writeData({ data: { isOpen, activePanel } });
+      }
+    }
+  },
+  defaults: {
+    isOpen: false,
+    activePanel: '',
+    regions: dataSlugFromObjects([
+      {
+        name: 'Americas',
+        __typename: 'Region'
+      },
+      {
+        name: 'Europe',
+        __typename: 'Region'
+      },
+      {
+        name: 'Asia',
+        __typename: 'Region'
+      }
+    ]),
+    places: dataSlugFromObjects([
+      {
+        name: 'Ashburn, Virginia, USA',
+        region: 'americas',
+        __typename: 'Place'
+      },
+      {
+        name: 'Las Vegas, Nevada, USA',
+        region: 'americas',
+        __typename: 'Place'
+      },
+      {
+        name: 'Emeryville, California, USA',
+        region: 'americas',
+        __typename: 'Place'
+      },
+      {
+        name: 'Amsterdam, Netherlands',
+        region: 'europe',
+        __typename: 'Place'
+      },
+      {
+        name: 'Singapore',
+        region: 'asia',
+        __typename: 'Place'
+      },
+      {
+        name: 'Seoul, South Korea',
+        region: 'asia',
+        __typename: 'Place'
+      }
+    ]),
+    datacenters: dataSlugFromObjects([
+      {
+        name: 'us-east-1',
+        place: 'ashburn-virginia-usa',
+        __typename: 'Datacenter'
+      },
+      {
+        name: 'us-east-2',
+        place: 'ashburn-virginia-usa',
+        __typename: 'Datacenter'
+      },
+      {
+        name: 'us-east-3',
+        place: 'ashburn-virginia-usa',
+        __typename: 'Datacenter'
+      },
+      {
+        name: 'us-west-1',
+        place: 'emeryville-california-usa',
+        __typename: 'Datacenter'
+      },
+      {
+        name: 'us-sw-1',
+        place: 'las-vegas-nevada-usa',
+        __typename: 'Datacenter'
+      },
+      {
+        name: 'eu-ams-1',
+        place: 'amsterdam-netherlands',
+        __typename: 'Datacenter'
+      }
+    ]),
+    categories: dataSlugFromObjects([
+      {
+        name: 'Compute',
+        __typename: 'Category'
+      },
+      {
+        name: 'Network',
+        __typename: 'Category'
+      },
+      {
+        name: 'Storage',
+        __typename: 'Category'
+      },
+      {
+        name: 'Access',
+        __typename: 'Category'
+      },
+      {
+        name: 'Help & Support',
+        __typename: 'Category'
+      }
+    ]),
+    services: dataSlugFromObjects([
+      {
+        name: 'VMs & Containers',
+        description: 'Run VMs and bare metal containers',
+        category: 'compute',
+        __typename: 'Service'
+      },
+      {
+        name: 'Converged Analytics',
+        description: 'Map reduce and ETL on your objects',
+        category: 'compute',
+        __typename: 'Service'
+      },
+      {
+        name: 'VLANs',
+        description: 'Wire your appliction your way',
+        category: 'network',
+        __typename: 'Service'
+      },
+      {
+        name: 'Subnets',
+        description: 'A network for everything',
+        category: 'network',
+        __typename: 'Service'
+      },
+      {
+        name: 'Firewall Rules',
+        description: 'Control the bits coming and going',
+        category: 'network',
+        __typename: 'Service'
+      },
+      {
+        name: 'Service Status',
+        description: 'Write here about Service Status',
+        category: 'help-support',
+        __typename: 'Service'
+      },
+      {
+        name: 'Contact Support',
+        description: 'Chat to us via phone or email',
+        category: 'help-support',
+        __typename: 'Service'
+      },
+      {
+        name: 'Support Plans',
+        description: 'Write here about Support Plans',
+        category: 'help-support',
+        __typename: 'Service'
+      },
+      {
+        name: 'Getting Started',
+        description: 'Write here about Getting Started',
+        category: 'help-support',
+        __typename: 'Service'
+      },
+      {
+        name: 'Triton Object Storage',
+        description: 'Modern cloud object storage',
+        category: 'storage',
+        __typename: 'Service'
+      },
+      {
+        name: 'S3 Compatibility Bridge',
+        description: 'Modern storage, legacy compatibility',
+        category: 'storage',
+        __typename: 'Service'
+      },
+      {
+        name: 'Triton Volumes',
+        description: 'Network filesystems for your apps',
+        category: 'storage',
+        __typename: 'Service'
+      },
+      {
+        name: 'Role Based Access Control',
+        description: 'Manage users within your account',
+        category: 'access',
+        __typename: 'Service'
+      },
+      {
+        name: 'Firewall Rules',
+        description: 'Inspect all the bytes',
+        category: 'access',
+        __typename: 'Service'
+      }
+    ])
+  }
+};
--- a/packages/navigation/yarn.lock
+++ b/packages/navigation/yarn.lock
--- a/packages/ui-toolkit/package.json
+++ b/packages/ui-toolkit/package.json
@ -1,6 +1,6 @@
 {
  "name": "joyent-ui-toolkit",
-  "version": "4.0.1",
+  "version": "4.4.2",
  "license": "MPL-2.0",
  "repository": "github:yldio/joyent-portal",
  "main": "dist/umd/index.js",
@ -22,7 +22,7 @@
  "dependencies": {
    "camel-case": "^3.0.0",
    "joy-react-broadcast": "^0.6.9",
-    "joyent-icons": "^2.1.0",
+    "joyent-icons": "^3.0.0",
    "lodash.isboolean": "^3.0.3",
    "lodash.isundefined": "^3.0.1",
    "normalized-styled-components": "^1.0.17",
@ -55,14 +55,11 @@
    "react-styleguidist": "^6.0.33",
    "react-test-renderer": "^16.2.0",
    "redrun": "^5.10.0",
-    "redux": "^3.7.2",
-    "stylelint": "^8.4.0",
-    "stylelint-config-joyent-portal": "^2.0.1",
    "webpack": "^3.10.0"
  },
  "peerDependencies": {
-    "joyent-manifest-editor": "^1.4.0",
    "codemirror": "^5.32.0",
+    "joyent-manifest-editor": "^1.4.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@ -11,8 +11,9 @@ export default ({ theme }) => css`

  html, body {
    font-display: optional;
-    font-family: ${theme.font
-      .family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
+    font-family: ${
+      theme.font.family
+    }, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
    font-weight: ${theme.font.weight.normal};
  }

--- a/packages/ui-toolkit/src/breakpoints/index.js
+++ b/packages/ui-toolkit/src/breakpoints/index.js
@ -1,69 +1,3 @@
-import React from 'react';
-import { css } from 'styled-components';
-import MediaQuery from 'react-responsive';
-import remcalc from 'remcalc';
-import pascalCase from 'pascal-case';
-
-export const breakpoints = {
-  small: {
-    upper: 767
-  },
-  medium: {
-    upper: 1023,
-    lower: 768
-  },
-  large: {
-    upper: 1199,
-    lower: 1024
-  },
-  xlarge: {
-    lower: 1200
-  }
-};
-
-const screens = {
-  // >= 768px
-  smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
-  small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
-  // >= 1024px
-  mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
-    and (max-width: ${remcalc(breakpoints.medium.upper)})`,
-  mediumDown: `only screen and (max-width: ${remcalc(
-    breakpoints.medium.upper
-  )})`,
-  medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
-  // >= 1200px
-  largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
-    and (max-width: ${remcalc(breakpoints.large.upper)})`,
-  largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,
-  large: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})`,
-  xlarge: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})
-    and (max-width: ${remcalc(breakpoints.xlarge.upper)})`,
-  xlargeUp: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})`
-};
-
-const breakpoint = label => (...args) => css`
-  @media ${screens[label]} {
-    ${css(...args)};
-  }
-`;
-
-const toQuery = label => ({ children, ...rest }) => (
-  <MediaQuery query={screens[label]}>{children}</MediaQuery>
-);
-
-export const styled = Object.keys(screens).reduce(
-  (sum, label) => ({
-    ...sum,
-    [label]: breakpoint(label)
-  }),
-  {}
-);
-
-export const query = Object.keys(screens).reduce(
-  (sum, label) => ({
-    ...sum,
-    [pascalCase(label)]: toQuery(label)
-  }),
-  {}
-);
+export { default as query } from './query';
+export { default as screens, breakpoints } from './screens';
+export { default as styled } from './styled';
--- a/packages/ui-toolkit/src/breakpoints/query.js
+++ b/packages/ui-toolkit/src/breakpoints/query.js
@ -0,0 +1,17 @@
+import React from 'react';
+import MediaQuery from 'react-responsive';
+import pascalCase from 'pascal-case';
+
+import screens from './screens';
+
+const toQuery = label => ({ children, ...rest }) => (
+  <MediaQuery query={screens[label]}>{children}</MediaQuery>
+);
+
+export default Object.keys(screens).reduce(
+  (sum, label) => ({
+    ...sum,
+    [pascalCase(label)]: toQuery(label)
+  }),
+  {}
+);
--- a/packages/ui-toolkit/src/breakpoints/screens.js
+++ b/packages/ui-toolkit/src/breakpoints/screens.js
@ -0,0 +1,39 @@
+import remcalc from 'remcalc';
+
+export const breakpoints = {
+  small: {
+    upper: 767
+  },
+  medium: {
+    upper: 1023,
+    lower: 768
+  },
+  large: {
+    upper: 1199,
+    lower: 1024
+  },
+  xlarge: {
+    lower: 1200
+  }
+};
+
+export default {
+  // >= 768px
+  smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
+  small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
+  // >= 1024px
+  mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
+    and (max-width: ${remcalc(breakpoints.medium.upper)})`,
+  mediumDown: `only screen and (max-width: ${remcalc(
+    breakpoints.medium.upper
+  )})`,
+  medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
+  // >= 1200px
+  largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
+    and (max-width: ${remcalc(breakpoints.large.upper)})`,
+  largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,
+  large: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})`,
+  xlarge: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})
+    and (max-width: ${remcalc(breakpoints.xlarge.upper)})`,
+  xlargeUp: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})`
+};
--- a/packages/ui-toolkit/src/breakpoints/styled.js
+++ b/packages/ui-toolkit/src/breakpoints/styled.js
@ -0,0 +1,17 @@
+import { css } from 'styled-components';
+
+import screens from './screens';
+
+const breakpoint = label => (...args) => css`
+  @media ${screens[label]} {
+    ${css(...args)};
+  }
+`;
+
+export default Object.keys(screens).reduce(
+  (sum, label) => ({
+    ...sum,
+    [label]: breakpoint(label)
+  }),
+  {}
+);
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@ -5,15 +5,19 @@ import remcalc from 'remcalc';
 import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';

-const colorWithDisabled = props => (props.disabled ? props.theme.disabled : props.theme.text);
+const colorWithDisabled = props =>
+  props.disabled ? props.theme.disabled : props.theme.text;

 const colorWithDefaultValue = props =>
-  props.value === props.defaultValue ? props.theme.disabled : colorWithDisabled(props);
+  props.value === props.defaultValue
+    ? props.theme.disabled
+    : colorWithDisabled(props);

 const color = props =>
  props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);

-const height = props => (props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48));
+const height = props =>
+  props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);

 const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));

@ -230,7 +234,8 @@ BaseInput.propTypes = {
 export default BaseInput;

 export const Stylable = Component => {
-  const stylable = typeof Component === 'string' ? styled[Component] : styled(Component);
+  const stylable =
+    typeof Component === 'string' ? styled[Component] : styled(Component);

  return stylable`
    ${style}
--- a/packages/ui-toolkit/src/form/base/toggle.js
+++ b/packages/ui-toolkit/src/form/base/toggle.js
@ -138,12 +138,10 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
      [type]: true
    };

-    const render = (
-      {
+    const render = ({
      id, // ignore id from value
      ...oldValue
-      } = {}
-    ) => {
+    } = {}) => {
      const newValue = {
        ...oldValue,
        id: rndId()
@ -163,7 +161,12 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>

      const toggle = (
        <InnerContainer {...types} type={type} {...rest}>
-          <StyledInput {...rest} id={newValue.id} type={type} checked={checked} />
+          <StyledInput
+            {...rest}
+            id={newValue.id}
+            type={type}
+            checked={checked}
+          />
          <Label
            {...types}
            htmlFor={newValue.id}
--- a/packages/ui-toolkit/src/form/toggle.js
+++ b/packages/ui-toolkit/src/form/toggle.js
@ -84,8 +84,8 @@ const InputLabel = styled.label`
    left: 0;
    border-radius: 2em;
    background: ${props => props.theme.white};
-    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease,
-      margin 0.3s ease, box-shadow 0.3s ease;
+    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+      padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;

    box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
  }
@ -154,6 +154,8 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
 /**
 * @example ./usage-toggle.md
 */
-const Toggle = ({ children, ...rest }) => <BaseToggle {...rest}>{children}</BaseToggle>;
+const Toggle = ({ children, ...rest }) => (
+  <BaseToggle {...rest}>{children}</BaseToggle>
+);

 export default Toggle;
--- a/packages/ui-toolkit/src/header/brand.js
+++ b/packages/ui-toolkit/src/header/brand.js
@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-import is from 'styled-is';
-
-import { H2 } from '../text/headings';
-
-const Brand = H2.extend`
-  text-transform: uppercase;
-  color: ${props => props.theme.white};
-  font-size: ${remcalc(29)};
-  margin: 0 auto;
-
-  ${is('center')`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `};
-`;
-
-const Box = styled.div`
-  align-self: stretch;
-  order: 0;
-  width: ${remcalc(150)};
-  display: flex;
-
-  &:hover,
-  &.active {
-    background: rgba(255, 255, 255, 0.15);
-  }
-`;
-
-export default ({ children, ...rest }) => (
-  <Box {...rest}>
-    <Brand {...rest}>{children}</Brand>
-  </Box>
-);
--- a/packages/ui-toolkit/src/header/index.js
+++ b/packages/ui-toolkit/src/header/index.js
@ -1,49 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-import is from 'styled-is';
-
-import Baseline from '../baseline';
-import { ViewContainer } from '../layout';
-
-const Container = ViewContainer.extend`
-  display: flex;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: stretch;
-`;
-
-const Header = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: stretch;
-  background-color: ${props => props.theme.brandBackground};
-  max-height: ${remcalc(53)};
-  min-height: ${remcalc(53)};
-  line-height: ${remcalc(25)};
-
-  ${is('fixed')`
-    position: fixed;
-    left: 0;
-    right: 0;
-  `};
-
-  ${is('bottom', 'fixed')`
-    bottom: 0;
-  `};
-`;
-
-/**
- * @example ./usage.md
- */
-export default Baseline(({ children, fluid, ...rest }) => (
-  <Header {...rest}>
-    <Container fluid={fluid}>{children}</Container>
-  </Header>
-));
-
-export { default as HeaderItem, Anchor as HeaderAnchor } from './item';
-export { default as HeaderBrand } from './brand';
-export { default as HeaderNav } from './nav';
--- a/packages/ui-toolkit/src/header/item.js
+++ b/packages/ui-toolkit/src/header/item.js
@ -1,60 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-
-import BaseAnchor from '../anchor';
-import P from '../text/p';
-
-const Text = P.extend`
-  text-align: center;
-  color: ${props => props.theme.white};
-  -webkit-text-fill-color: currentcolor;
-  margin: 0;
-`;
-
-const Box = styled.section`
-  flex: 0 1 auto;
-  align-self: auto;
-  order: 0;
-  display: flex;
-  align-items: center;
-  padding: 0 ${remcalc(18)};
-
-  svg {
-    margin-right: ${remcalc(6)};
-  }
-
-  &:not(:last-of-type) {
-    border-right: ${remcalc(1)} solid rgba(255, 255, 255, 0.15);
-  }
-
-  &:first-of-type {
-    margin-left: auto;
-  }
-
-  &:hover,
-  &.active {
-    background: rgba(255, 255, 255, 0.15);
-  }
-`;
-
-export const Anchor = styled(BaseAnchor)`
-  padding: ${remcalc(15)} 0;
-  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;
-`;
-
-export default ({ children, ...rest }) => (
-  <Box {...rest}>
-    <Text>{children}</Text>
-  </Box>
-);
--- a/packages/ui-toolkit/src/header/nav.js
+++ b/packages/ui-toolkit/src/header/nav.js
@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-export default styled.ul`
-  padding: 0;
-  margin: 0;
-  display: flex;
-  list-style: none;
-  color: ${props => props.theme.white};
-  -webkit-text-fill-color: currentcolor;
-`;
--- a/Show More
+++ b/Show More