feat(my-joyent): add Header Section to My-joyent

packages/my-joyent/package.json

@@ -18,8 +18,7 @@
     "lint-ci": "redrun -p lint-ci:*",
     "test": "NODE_ENV=test ./test/run --env=jsdom",
     "test-ci":
-      "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
-    "prepublish": "node scripts/postinstall"
+      "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`"
   },
   "dependencies": {
     "apollo": "^0.2.2",

packages/my-joyent/src/components/home/__tests__/home.spec.js

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

packages/my-joyent/src/components/home/home.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { Row } from 'react-styled-flexboxgrid';
+import { SectionNav } from '@components/navigation';
+import { Message, Breadcrumb, BreadcrumbItem, Anchor } from 'joyent-ui-toolkit';
+
+class Home extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showMessage: true
+    };
+
+    this.closeMessage = this.closeMessage.bind(this);
+  }
+
+  closeMessage() {
+    this.setState({
+      showMessage: false
+    });
+  }
+
+  render() {
+    const _msg = this.state.showMessage ? (
+      <Message
+        title="Choosing deployement data center"
+        onCloseClick={this.closeMessage}
+      >
+        <p>
+          Not all data centres have all configurations of instances available.
+          Make sure that you choose the data center that suits your
+          requirements. <Anchor href="#">Learn More</Anchor>
+        </p>
+      </Message>
+    ) : null;
+    return (
+      <main>
+        <SectionNav />
+        <Breadcrumb>
+          <BreadcrumbItem>Instances</BreadcrumbItem>
+          <BreadcrumbItem>Create Instance</BreadcrumbItem>
+        </Breadcrumb>
+        <Row>{_msg}</Row>
+      </main>
+    );
+  }
+}
+
+export default Home;

packages/my-joyent/src/components/home/index.js

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

packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <SectionNav /> without throwing 1`] = `
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c3.active {
+  color: ;
+  cursor: default;
+}
+
+.c1 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<div
+  className="c0"
+>
+  .c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c2.active {
+  color: ;
+  cursor: default;
+}
+
+.c0 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<ul
+    className="c0"
+  >
+    .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c1.active {
+  color: ;
+  cursor: default;
+}
+
+<li
+      className="c0"
+    >
+      .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c0.active {
+  color: ;
+  cursor: default;
+}
+
+<a
+        aria-current="true"
+        className="active c0 active"
+        href="/"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Instances
+      </a>
+    </li>
+    .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+      className="c0"
+    >
+      Custom images
+    </li>
+    .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+      className="c0"
+    >
+      Docker images
+    </li>
+    .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+      className="c0"
+    >
+      Docker registries
+    </li>
+  </ul>
+</div>
+`;

packages/my-joyent/src/components/navigation/__tests__/section-nav.spec.js

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

packages/my-joyent/src/components/navigation/index.js

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

packages/my-joyent/src/components/navigation/section-nav.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Row } from 'react-styled-flexboxgrid';
+import {
+  SectionList,
+  SectionListItem,
+  SectionListNavLink
+} from 'joyent-ui-toolkit';
+
+const SectionNav = () => (
+  <Row>
+    <SectionList>
+      <SectionListItem>
+        <SectionListNavLink to="/" className="active">
+          Instances
+        </SectionListNavLink>
+      </SectionListItem>
+      <SectionListItem>Custom images</SectionListItem>
+      <SectionListItem>Docker images</SectionListItem>
+      <SectionListItem>Docker registries</SectionListItem>
+    </SectionList>
+  </Row>
+);
+
+export default SectionNav;

packages/my-joyent/src/containers/home/__tests__/index.spec.js

@@ -6,9 +6,16 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import Home from '../';
+import HomeHOC from '../';
+import { Router } from '@mocks/';
 
-it('renders <Home /> without throwing', () => {
-  const tree = renderer.create(<Home />).toJSON();
+it('renders <HomeHOC /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <HomeHOC />
+      </Router>
+    )
+    .toJSON();
   expect(tree).toMatchSnapshot();
 });

packages/my-joyent/src/containers/home/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import { LayoutContainer } from '@components/layout';
+import { Home } from '@components/home';
 
-const Home = () => (
-  <LayoutContainer>Welcome to your joyent portal</LayoutContainer>
+const HomeHOC = () => (
+  <LayoutContainer>
+    <Home />
+  </LayoutContainer>
 );
 
-export default Home;
+export default HomeHOC;

packages/my-joyent/src/router.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { Header } from '@containers/navigation';
 
-import Home from '@containers/home';
+import HomeHOC from '@containers/home';
 
 import { NotFound } from '@components/navigation';
 
@@ -20,7 +20,7 @@ const Router = (
     <Container>
       <Route path="/" component={Header} />
       <Switch>
-        <Route path="/" exact component={Home} />
+        <Route path="/" exact component={HomeHOC} />
         <Route path="/*" component={NotFound} />
       </Switch>
     </Container>

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

@@ -51,7 +51,7 @@ const StyledClose = styled(CloseButton)`
   top: ${unitcalc(0.5)};
 `;
 
-const Message = ({ title, message, onCloseClick, ...type }) => {
+const Message = ({ title, message, onCloseClick, children, ...type }) => {
   const renderTitle = title ? <StyledTitle>{title}</StyledTitle> : null;
 
   const renderClose = onCloseClick ? (
@@ -63,7 +63,7 @@ const Message = ({ title, message, onCloseClick, ...type }) => {
       <StyledColor {...type} />
       <StyledMessageContainer>
         {renderTitle}
-        <StyledMessage>{message}</StyledMessage>
+        <StyledMessage>{message || children}</StyledMessage>
       </StyledMessageContainer>
       {renderClose}
     </StyledContainer>