feat(ui): add Header component

app/components/UI/Header.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Flex } from 'rebass'
+import { Heading, Text } from 'components/UI'
+
+const Header = ({ title, subtitle, logo }) => (
+  <Flex alignItems="center" as="header" flexDirection="column">
+    {logo && (
+      <Flex alignItems="center" justifyContent="center">
+        <Text fontSize="50px" lineHeight="1em" css={{ height: '50px' }}>
+          {logo}
+        </Text>
+      </Flex>
+    )}
+    {title && <Heading.h1>{title}</Heading.h1>}
+    {subtitle && <Heading.h4>{subtitle}</Heading.h4>}
+  </Flex>
+)
+Header.propTypes = {
+  title: PropTypes.node,
+  subtitle: PropTypes.node,
+  logo: PropTypes.node
+}
+
+export default Header

app/components/UI/index.js

@@ -9,6 +9,7 @@ export FiatAmountInput from './FiatAmountInput'
 export Form from './Form'
 export FormFieldMessage from './FormFieldMessage'
 export GlobalStyle from './GlobalStyle'
+export Header from './Header'
 export Heading from './Heading'
 export Input from './Input'
 export Label from './Label'

stories/components/header.stories.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Header } from 'components/UI'
+import Lightning from 'components/Icon/Lightning'
+
+storiesOf('Components.Header', module).add('Header', () => (
+  <Header title="Title here" subtitle="Subtitle here" logo={<Lightning />} />
+))

test/unit/components/UI/Header.spec.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import toJSON from 'enzyme-to-json'
+import { Header } from 'components/UI'
+
+describe('component.UI.Header', () => {
+  it('should render correctly with default props', () => {
+    const wrapper = shallow(<Header />)
+    expect(toJSON(wrapper)).toMatchSnapshot()
+  })
+  it('should render correctly with title', () => {
+    const wrapper = shallow(<Header title="title here" />)
+    expect(toJSON(wrapper)).toMatchSnapshot()
+  })
+  it('should render correctly with subtitle', () => {
+    const wrapper = shallow(<Header subtitle="subtitle here" />)
+    expect(toJSON(wrapper)).toMatchSnapshot()
+  })
+  it('should render correctly with logo', () => {
+    const wrapper = shallow(<Header logo="logo here" />)
+    expect(toJSON(wrapper)).toMatchSnapshot()
+  })
+  it('should render correctly with title, subtitle, and logo', () => {
+    const wrapper = shallow(<Header title="title here" subtitle="logo here" logo="logo here" />)
+    expect(toJSON(wrapper)).toMatchSnapshot()
+  })
+})

test/unit/components/UI/__snapshots__/Header.spec.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Header should render correctly with default props 1`] = `
+<Styled(styled.div)
+  alignItems="center"
+  as="header"
+  flexDirection="column"
+/>
+`;
+
+exports[`component.UI.Header should render correctly with logo 1`] = `
+<Styled(styled.div)
+  alignItems="center"
+  as="header"
+  flexDirection="column"
+>
+  <Styled(styled.div)
+    alignItems="center"
+    justifyContent="center"
+  >
+    <Text
+      css={
+        Object {
+          "height": "50px",
+        }
+      }
+      fontSize="50px"
+      lineHeight="1em"
+    >
+      logo here
+    </Text>
+  </Styled(styled.div)>
+</Styled(styled.div)>
+`;
+
+exports[`component.UI.Header should render correctly with subtitle 1`] = `
+<Styled(styled.div)
+  alignItems="center"
+  as="header"
+  flexDirection="column"
+>
+  <Heading4>
+    subtitle here
+  </Heading4>
+</Styled(styled.div)>
+`;
+
+exports[`component.UI.Header should render correctly with title 1`] = `
+<Styled(styled.div)
+  alignItems="center"
+  as="header"
+  flexDirection="column"
+>
+  <Heading1>
+    title here
+  </Heading1>
+</Styled(styled.div)>
+`;
+
+exports[`component.UI.Header should render correctly with title, subtitle, and logo 1`] = `
+<Styled(styled.div)
+  alignItems="center"
+  as="header"
+  flexDirection="column"
+>
+  <Styled(styled.div)
+    alignItems="center"
+    justifyContent="center"
+  >
+    <Text
+      css={
+        Object {
+          "height": "50px",
+        }
+      }
+      fontSize="50px"
+      lineHeight="1em"
+    >
+      logo here
+    </Text>
+  </Styled(styled.div)>
+  <Heading1>
+    title here
+  </Heading1>
+  <Heading4>
+    logo here
+  </Heading4>
+</Styled(styled.div)>
+`;