From 56315d02c7d0d13192a150d85b6b31c29ff8cf75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Tue, 6 Jun 2017 20:08:08 +0100
Subject: [PATCH] feat(joyent-ui-toolkit): implement Header component

---
 packages/ui-toolkit/src/header/brand.js  | 28 +++++++++++++++++++++
 packages/ui-toolkit/src/header/index.js  | 30 ++++++++++++++++++++++
 packages/ui-toolkit/src/header/item.js   | 32 ++++++++++++++++++++++++
 packages/ui-toolkit/src/header/usage.md  | 10 ++++++++
 packages/ui-toolkit/src/index.js         |  6 +++++
 packages/ui-toolkit/styleguide.config.js |  1 +
 6 files changed, 107 insertions(+)
 create mode 100644 packages/ui-toolkit/src/header/brand.js
 create mode 100644 packages/ui-toolkit/src/header/index.js
 create mode 100644 packages/ui-toolkit/src/header/item.js
 create mode 100644 packages/ui-toolkit/src/header/usage.md

diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js
new file mode 100644
index 00000000..57ab09d5
--- /dev/null
+++ b/packages/ui-toolkit/src/header/brand.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import { H2 } from '../text/headings';
+
+const Brand = H2.extend`
+  text-transform: uppercase;
+  color: ${props => props.theme.white};
+  font-size: ${remcalc(29)};
+  margin: 0;
+`;
+
+const Box = styled.div`
+  flex: 1 1 auto;
+  align-self: stretch;
+  order: 0;
+
+  padding: ${remcalc(15)} 0;
+`;
+
+export default ({ children, ...rest }) => (
+  <Box xs={6} sm={6} md={6} start {...rest}>
+    <Brand>
+      {children}
+    </Brand>
+  </Box>
+);
diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js
new file mode 100644
index 00000000..878ab2a8
--- /dev/null
+++ b/packages/ui-toolkit/src/header/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-content: stretch;
+  align-items: stretch;
+
+  background-color: ${props => props.theme.primaryDarkBrand};
+  max-height: ${remcalc(53)};
+  min-height: ${remcalc(53)};
+  padding: 0 ${remcalc(18)};
+  line-height: ${remcalc(25)};
+`;
+
+/**
+ * @example ./usage.md
+ */
+export default ({ children, ...rest }) => (
+  <Header {...rest}>
+    {children}
+  </Header>
+);
+
+export { default as Brand } from './brand';
+export { default as Item } from './item';
diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js
new file mode 100644
index 00000000..b7a6cd14
--- /dev/null
+++ b/packages/ui-toolkit/src/header/item.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import P from '../text/p';
+import typography from '../typography';
+
+const Text = P.extend`
+  ${typography.semibold};
+
+  text-align: center;
+  color: ${props => props.theme.white};
+  margin: 0;
+`;
+
+const Box = styled.div`
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+
+  padding: ${remcalc(15)} 0;
+  width: ${remcalc(100)};
+  max-width: ${remcalc(100)};
+`;
+
+export default ({ children, ...rest }) => (
+  <Box xs={3} sm={2} md={2} end {...rest}>
+    <Text>
+      {children}
+    </Text>
+  </Box>
+);
diff --git a/packages/ui-toolkit/src/header/usage.md b/packages/ui-toolkit/src/header/usage.md
new file mode 100644
index 00000000..3180b007
--- /dev/null
+++ b/packages/ui-toolkit/src/header/usage.md
@@ -0,0 +1,10 @@
+```
+const Brand = require('./brand.js').default;
+const Item = require('./item.js').default;
+
+<Header>
+  <Brand>Triton</Brand>
+  <Item>eu-east-1</Item>
+  <Item>Nicola</Item>
+</Header>
+```
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 362277a1..0d4e83c1 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -65,3 +65,9 @@ export {
   Toggle,
   ToggleList
 } from './form';
+
+export {
+  default as Header,
+  Brand as HeaderBrand,
+  Item as HeaderItem
+} from './header';
diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js
index 1d6b10c0..d773c5a0 100644
--- a/packages/ui-toolkit/styleguide.config.js
+++ b/packages/ui-toolkit/styleguide.config.js
@@ -60,6 +60,7 @@ module.exports = {
         'src/form/radio.js',
         'src/form/select.js',
         'src/form/toggle.js',
+        'src/header/index.js',
         'src/list/ul.js',
         'src/list/li.js',
         'src/topology/index.js',