feat(ui): add Typography components

app/components/UI/Heading.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Heading as BaseHeading } from 'rebass'
+
+/**
+ * @render react
+ * @name Heading
+ * @example
+ * <Heading />
+ */
+class Heading extends React.PureComponent {
+  static displayName = 'Heading'
+
+  render() {
+    return <BaseHeading fontSize={5} as="h2" {...this.props} />
+  }
+}
+
+Heading.h1 = props => <Heading fontSize={6} {...props} as="h1" />
+Heading.h2 = props => <Heading fontSize={5} {...props} as="h2" />
+Heading.h3 = props => <Heading fontSize={4} {...props} as="h3" />
+Heading.h4 = props => <Heading fontSize={3} {...props} as="h4" />
+Heading.h5 = props => <Heading fontSize={3} {...props} as="h5" />
+Heading.h6 = props => <Heading fontSize={3} {...props} as="h6" />
+
+Heading.h1.displayName = 'Heading1'
+Heading.h2.displayName = 'Heading2'
+Heading.h3.displayName = 'Heading3'
+Heading.h4.displayName = 'Heading4'
+Heading.h5.displayName = 'Heading5'
+Heading.h6.displayName = 'Heading6'
+
+export default Heading

app/components/UI/Text.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Text as BaseText } from 'rebass'
+
+/**
+ * @render react
+ * @name Text
+ * @example
+ * <Text>Some text</Text>
+ */
+class Text extends React.PureComponent {
+  static displayName = 'Text'
+
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    const { children } = this.props
+    return (
+      <BaseText fontSize="m" {...this.props}>
+        {children}
+      </BaseText>
+    )
+  }
+}
+
+export default Text

stories/components/typography.stories.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Heading from 'components/UI/Heading'
+import Text from 'components/UI/Text'
+
+storiesOf('Components.Typography', module)
+  .add('heading', () => (
+    <React.Fragment>
+      <Heading>This is a default heading (h2)</Heading>
+      <Heading.h1>This is an h1</Heading.h1>
+      <Heading.h2>This is an h2</Heading.h2>
+      <Heading.h3>This is an h3</Heading.h3>
+      <Heading.h4>This is an h4</Heading.h4>
+      <Heading.h5>This is an h5</Heading.h5>
+      <Heading.h6>This is an h6</Heading.h6>
+    </React.Fragment>
+  ))
+  .add('text', () => (
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </Text>
+  ))

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import Heading from 'components/UI/Heading'
+import renderer from 'react-test-renderer'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })
+
+describe('component.UI.Heading', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<Heading>Heading here</Heading>).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  describe('Heading.{h1|h2|h3|h4|h5|h6}', () => {
+    it(`should render a heading of the correct level`, () => {
+      for (var i = 1; i <= 6; i++) {
+        const Element = Heading[`h${i}`]
+        const wrapper = mount(<Element>Heading here</Element>)
+        expect(wrapper.find(`h${i}`)).toHaveLength(1)
+      }
+    })
+  })
+})

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import Text from 'components/UI/Text'
+import renderer from 'react-test-renderer'
+
+describe('component.UI.Text', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<Text />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Heading should render correctly 1`] = `
+.c0 {
+  margin: 0px;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+<h2
+  className="c0"
+  fontSize={5}
+  fontWeight="bold"
+>
+  Heading here
+</h2>
+`;

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

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Text should render correctly 1`] = `
+.c0 {
+  font-size: m;
+}
+
+<div
+  className="c0"
+  fontSize="m"
+/>
+`;