adding the Header component and its story (#236)

unlock-app/.storybook/head.html

@@ -0,0 +1,36 @@
+<style>
+
+/**
+ * TODO remove after we have implemented a CSS template using styled-component
+ */
+
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700');
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:200,500');
+
+:root {
+  --red: #ed663a;
+  --offwhite: #f6f6f6;
+  --lightgrey: #eeeeee;
+  --grey: #a6a6a6;
+  --darkgrey: #4a4a4a;
+  --slate: #333333;
+  --link: #4d8be8;
+  --green: #74ce63;
+}
+
+body {
+  font-family: 'IBM Plex Sans' ,'Helvetica Neue', Arial, sans-serif;
+  color: var(--grey);
+}
+
+h1 {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+h2 {
+  font-size: 15px;
+  font-weight: 500;
+}
+
+</style>

unlock-app/src/components/interface/Header.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import Icons from './icons'
+
+export default class Header extends Component {
+  render() {
+    return (
+      <TopHeader>
+        <h1>Creator Dashboard</h1>
+        <a><Icons.About /></a>
+        <a><Icons.Jobs /></a>
+        <a><Icons.Github /></a>
+      </TopHeader>
+    )
+  }
+}
+
+const TopHeader = styled.header`
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 1fr;
+  grid-auto-flow: column;
+  align-items: center;
+  height: 72px;
+  font-size: 24px;
+`

unlock-app/src/stories/interface/Header.stories.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Header from '../../components/interface/Header'
+
+storiesOf('Header')
+  .add('the header', () => {
+    return (
+      <Header />
+    )
+  })