From 4735c7a9846a0220932c9e06d931706baff195f0 Mon Sep 17 00:00:00 2001
From: Maxime Bertrand <maxi.bertrand@gmail.com>
Date: Wed, 20 Nov 2019 15:17:53 +0100
Subject: [PATCH 1/2] feature: add PageTitle component & upgrade theme to have
 title font styles

---
 .storybook/themes/index.js                |  9 ++++--
 src/Atoms/PageTitle/PageTitle.jsx         | 35 +++++++++++++++++++++++
 src/Atoms/PageTitle/PageTitle.stories.jsx | 24 ++++++++++++++++
 src/Atoms/PageTitle/README.md             |  1 +
 src/Atoms/PageTitle/index.js              |  3 ++
 src/Atoms/index.js                        |  1 +
 src/index.js                              |  1 +
 7 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/Atoms/PageTitle/PageTitle.jsx
 create mode 100644 src/Atoms/PageTitle/PageTitle.stories.jsx
 create mode 100644 src/Atoms/PageTitle/README.md
 create mode 100644 src/Atoms/PageTitle/index.js

diff --git a/.storybook/themes/index.js b/.storybook/themes/index.js
index bad2d97..38fd83c 100644
--- a/.storybook/themes/index.js
+++ b/.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,
diff --git a/src/Atoms/PageTitle/PageTitle.jsx b/src/Atoms/PageTitle/PageTitle.jsx
new file mode 100644
index 0000000..2d3ee2a
--- /dev/null
+++ b/src/Atoms/PageTitle/PageTitle.jsx
@@ -0,0 +1,35 @@
+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;
+  padding: 5px;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 2px;
+  border-color: ${({ theme }) => theme.colors.primary};
+  ${space}
+`
+
+const PageTitle = ({ children, icon }) => (
+  <Container>
+    <IconWrapper marginRight='m'>
+      {icon}
+    </IconWrapper>
+    <Typo fontFamily="title" fontSize="title" lineHeight="title">
+      {children}
+    </Typo>
+  </Container>
+)
+
+export default PageTitle
diff --git a/src/Atoms/PageTitle/PageTitle.stories.jsx b/src/Atoms/PageTitle/PageTitle.stories.jsx
new file mode 100644
index 0000000..817bc5e
--- /dev/null
+++ b/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:  [],
+  },
+}
diff --git a/src/Atoms/PageTitle/README.md b/src/Atoms/PageTitle/README.md
new file mode 100644
index 0000000..4ab42e2
--- /dev/null
+++ b/src/Atoms/PageTitle/README.md
@@ -0,0 +1 @@
+## PageTitle
diff --git a/src/Atoms/PageTitle/index.js b/src/Atoms/PageTitle/index.js
new file mode 100644
index 0000000..985044f
--- /dev/null
+++ b/src/Atoms/PageTitle/index.js
@@ -0,0 +1,3 @@
+import PageTitle from './PageTitle'
+
+export default PageTitle
diff --git a/src/Atoms/index.js b/src/Atoms/index.js
index feb9bde..582b1bf 100644
--- a/src/Atoms/index.js
+++ b/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'
diff --git a/src/index.js b/src/index.js
index 0030d36..fa7e444 100644
--- a/src/index.js
+++ b/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'

From 3c705ce83f1014dd03ec25a48e4ef1cc9047d1a0 Mon Sep 17 00:00:00 2001
From: Maxime Bertrand <maxi.bertrand@gmail.com>
Date: Wed, 20 Nov 2019 15:19:39 +0100
Subject: [PATCH 2/2] fix: use sytled system to set padding

---
 src/Atoms/PageTitle/PageTitle.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Atoms/PageTitle/PageTitle.jsx b/src/Atoms/PageTitle/PageTitle.jsx
index 2d3ee2a..e14ced8 100644
--- a/src/Atoms/PageTitle/PageTitle.jsx
+++ b/src/Atoms/PageTitle/PageTitle.jsx
@@ -13,7 +13,6 @@ const IconWrapper = styled.div`
   width: 38px;
   height: 38px;
   box-sizing: border-box;
-  padding: 5px;
   border-radius: 50%;
   border-style: solid;
   border-width: 2px;
@@ -23,7 +22,7 @@ const IconWrapper = styled.div`
 
 const PageTitle = ({ children, icon }) => (
   <Container>
-    <IconWrapper marginRight='m'>
+    <IconWrapper marginRight="m" p="m">
       {icon}
     </IconWrapper>
     <Typo fontFamily="title" fontSize="title" lineHeight="title">