[REVIEW] Add PageTitle component & upgrade theme to have title font styles

.storybook/themes/index.js

@@ -7,9 +7,10 @@ const space    = [0, 4, 8, 16, 32].map(value => `${value}px`)
       space.l  = space[3]
       space.xl = space[4]
 
-const lineHeights         = [0.25, 1, 1.25, 1.75]
-      lineHeights.heading = lineHeights[2]
-      lineHeights.body    = lineHeights[3]
+const lineHeights         = [0.25, 1, 1.1, 1.25, 1.75]
+      lineHeights.heading = lineHeights[3]
+      lineHeights.body    = lineHeights[4]
+      lineHeights.title = lineHeights[2]
 
 const levels = {
   error  : {
@@ -37,6 +38,7 @@ const levels = {
 const fontSizes = [12, 14, 16, 18, 24, 32, 48, 64, 72]
 fontSizes.xs = fontSizes[0]
 fontSizes.body = fontSizes[1]
+fontSizes.title = fontSizes[3]
 fontSizes.s = fontSizes[1]
 fontSizes.m = fontSizes[2]
 fontSizes.l = fontSizes[3]
@@ -49,6 +51,7 @@ const base = {
   fontSizes,
   fonts: {
     body:      '"Helvetica Neue", Helvetica, Arial, sans-serif',
+    title:     '"roboto-regular", "Helvetica Neue", Helvetica, Arial, sans-serif',
     monospace: 'monospace',
   },
   lineHeights,

src/Atoms/PageTitle/PageTitle.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from 'styled-components'
+import { space } from 'styled-system'
+
+import Typo from '../Typo'
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const IconWrapper = styled.div`
+  width: 38px;
+  height: 38px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 2px;
+  border-color: ${({ theme }) => theme.colors.primary};
+  ${space}
+`
+
+const PageTitle = ({ children, icon }) => (
+  <Container>
+    <IconWrapper marginRight="m" p="m">
+      {icon}
+    </IconWrapper>
+    <Typo fontFamily="title" fontSize="title" lineHeight="title">
+      {children}
+    </Typo>
+  </Container>
+)
+
+export default PageTitle

src/Atoms/PageTitle/PageTitle.stories.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import {  } from '@storybook/addon-knobs'
+
+import PageTitle from './index'
+
+import markdown from './README.md'
+
+export default {
+  title: 'Atoms/PageTitle',
+}
+
+export const pageTitle = () => (
+  <PageTitle>
+    I'm a title
+  </PageTitle>
+)
+
+pageTitle.story = {
+  parameters: {
+    notes: { markdown },
+    jest:  [],
+  },
+}

src/Atoms/PageTitle/README.md

@@ -0,0 +1 @@
+## PageTitle

src/Atoms/PageTitle/index.js

@@ -0,0 +1,3 @@
+import PageTitle from './PageTitle'
+
+export default PageTitle

src/Atoms/index.js

@@ -7,3 +7,4 @@ export { default as Typo } from './Typo'
 export { default as Banner } from './Banner'
 export { default as Tooltip } from './Tooltip'
 export { default as Byte } from './Byte'
+export { default as PageTitle } from './PageTitle'

src/index.js

@@ -8,3 +8,4 @@ export { Typo } from './Atoms'
 export { Banner } from './Atoms'
 export { Tooltip } from './Atoms'
 export { Byte } from './Atoms'
+export { PageTitle } from './Atoms'