From 4e4d62399c2702a473468e134faa1b1861e96758 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Tue, 13 Feb 2018 10:26:24 +0100
Subject: [PATCH 1/2] Serve static folder with storybook

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9c97d946..1227d60f 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "publish-storybook": "bash ./scripts/publish-storybook.sh",
     "release": "build",
     "start": "bash ./scripts/start.sh",
-    "storybook": "start-storybook -p 4444"
+    "storybook": "start-storybook -s ./static -p 4444"
   },
   "lint-staged": {
     "*.js": [

From 7fd89d42f1ee0b62564e3fa6c1e7f3710d60d264 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Tue, 13 Feb 2018 11:18:06 +0100
Subject: [PATCH 2/2] Display fonts and fonts sizes in storybook

---
 .../base/{Text.js => Text/index.js}           |  0
 src/components/base/Text/stories.js           | 63 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 rename src/components/base/{Text.js => Text/index.js} (100%)
 create mode 100644 src/components/base/Text/stories.js

diff --git a/src/components/base/Text.js b/src/components/base/Text/index.js
similarity index 100%
rename from src/components/base/Text.js
rename to src/components/base/Text/index.js
diff --git a/src/components/base/Text/stories.js b/src/components/base/Text/stories.js
new file mode 100644
index 00000000..041e1611
--- /dev/null
+++ b/src/components/base/Text/stories.js
@@ -0,0 +1,63 @@
+// @flow
+
+import React from 'react'
+import map from 'lodash/map'
+import { storiesOf } from '@storybook/react'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+
+import { fontFamilies, fontSizes } from 'styles/theme'
+
+const stories = storiesOf('Text', module)
+
+const Title = ({ children }: { children: string }) => (
+  <Text style={{ fontFamily: 'monospace' }} fontSize={5}>
+    {children}
+  </Text>
+)
+
+const FontStyles = () => (
+  <Box flow={4}>
+    <Title>{'Font styles'}</Title>
+    {map(fontFamilies, (weights, fontName) => (
+      <Box key={fontName}>
+        {map(weights, (_, weight) => (
+          <Box key={weight} horizontal align="center">
+            <Box style={{ width: 200 }}>
+              <Text style={{ fontFamily: 'monospace' }} fontSize={3}>
+                {fontName} {weight}
+              </Text>
+            </Box>
+            <Text key={weight} ff={`${fontName}|${weight}`}>
+              {'The quick brown fox jumps over the lazy dog'}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    ))}
+  </Box>
+)
+
+const FontSizes = () => (
+  <Box flow={4}>
+    <Title>{'Font sizes'}</Title>
+    <table border="1">
+      <tbody>
+        {fontSizes.map((size, i) => (
+          <tr key={size}>
+            <td width={50}>{i}</td>
+            <td>{`${size}px`}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </Box>
+)
+
+stories.add('all fonts styles', () => (
+  <Box flow={4}>
+    <FontStyles />
+    <FontSizes />
+  </Box>
+))