From be2fb6654beb4853e52dacd692708d3cef22c7f3 Mon Sep 17 00:00:00 2001
From: Andrei Firsov <andrei.firsov@8base.com>
Date: Fri, 31 Aug 2018 15:11:46 +0300
Subject: [PATCH] fix(Storybook): adds typography fixes

---
 src/atoms/typography/Heading/Heading.js       |   6 +-
 .../typography/Heading/Heading.stories.js     |  12 +-
 src/atoms/typography/Text/Text.stories.js     |  54 +++--
 .../__snapshots__/storyshots.test.js.snap     | 193 +++++++++++++-----
 storybook/preview-head.html                   |   1 +
 5 files changed, 188 insertions(+), 78 deletions(-)
 create mode 100644 storybook/preview-head.html

diff --git a/src/atoms/typography/Heading/Heading.js b/src/atoms/typography/Heading/Heading.js
index e66f5c89..bebe3535 100644
--- a/src/atoms/typography/Heading/Heading.js
+++ b/src/atoms/typography/Heading/Heading.js
@@ -36,13 +36,13 @@ const theme = createTheme(name, (colors) => ({
     },
     kind: {
       primary: {
-        color: colors.DARK_PRIMARY_TEXT_COLOR,
+        color: colors.TEXT_PRIMARY,
       },
       secondary: {
-        color: colors.DARK_SECONDARY_TEXT_COLOR,
+        color: colors.TEXT_SECONDARY,
       },
       disabled: {
-        color: colors.DARK_DISABLED_TEXT_COLOR,
+        color: colors.DISABLED_TEXT_COLOR,
       },
       white: {
         color: colors.WHITE,
diff --git a/src/atoms/typography/Heading/Heading.stories.js b/src/atoms/typography/Heading/Heading.stories.js
index debf3dc5..2b333bff 100644
--- a/src/atoms/typography/Heading/Heading.stories.js
+++ b/src/atoms/typography/Heading/Heading.stories.js
@@ -5,12 +5,12 @@ export default (asStory) => {
     story
       .add('with type modifiers', () => (
         <React.Fragment>
-          <Heading type="h1" text="Heading 1" />
-          <Heading type="h2" text="Heading 2" />
-          <Heading type="h3" text="Heading 3" />
-          <Heading type="h4" text="Heading 4" />
-          <Heading type="h5" text="Heading 5" />
-          <Heading type="h6" text="Heading 6" />
+          <Heading type="h1">62px - Heading 1</Heading>
+          <Heading type="h2">46px - Heading 2</Heading>
+          <Heading type="h3">30px - Heading 3</Heading>
+          <Heading type="h4">20px - Heading 4</Heading>
+          <Heading type="h5">14px - Heading 5</Heading>
+          <Heading type="h6">10px - Heading 6</Heading>
         </React.Fragment>
       ))
       .add('with kind modifiers ', () => (
diff --git a/src/atoms/typography/Text/Text.stories.js b/src/atoms/typography/Text/Text.stories.js
index 9097aae8..5be4b548 100644
--- a/src/atoms/typography/Text/Text.stories.js
+++ b/src/atoms/typography/Text/Text.stories.js
@@ -3,41 +3,61 @@
 import React from 'react';
 import { Text } from './';
 
+const placeholderText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
+
 export default (asStory: *) => {
   asStory('ATOMS/TYPOGRAPHY/Text', module, (story, { Text }: { Text: typeof Text }) => {
     story
       .add('with text', () => (
-        <Text text="Expletively" />
+        <Text text={ placeholderText } />
       ))
       .add('with children', () => (
-        <Text>Imploringness</Text>
+        <Text>{ placeholderText }</Text>
       ))
       .add('with color modifiers ', () => (
-        <div>
-          <Text color="PRIMARY">Primary Text</Text>
-          <Text color="SECONDARY">Secondary Text</Text>
-          <Text color="RED">Red Text</Text>
-          <Text color="GREEN">Green Text</Text>
-          <Text color="BLUE">Blue Text</Text>
-        </div>
+        <React.Fragment>
+          <Text color="PRIMARY">{ placeholderText }</Text>
+          <br />
+          <Text color="SECONDARY">{ placeholderText }</Text>
+          <br />
+          <Text color="RED">{ placeholderText }</Text>
+          <br />
+          <Text color="GREEN">{ placeholderText }</Text>
+          <br />
+          <Text color="BLUE">{ placeholderText }</Text>
+        </React.Fragment>
       ))
       .add('with align modifiers ', () => (
         <div style={{ width: '300px', display: ' flex', flexDirection: 'column' }}>
-          <Text align="left">LongText.LongText.LongText.LongText.LongText. LongText.LongText.LongText.</Text>
+          <Text align="left">{ placeholderText }</Text>
           <br />
-          <Text align="right">LongText.LongText.LongText.LongText.LongText. LongText.LongText.LongText.</Text>
+          <Text align="right">{ placeholderText }</Text>
           <br />
-          <Text align="center">LongText.LongText.LongText.LongText.LongText. LongText.LongText.LongText.</Text>
+          <Text align="center">{ placeholderText }</Text>
         </div>
       ))
       .add('with disabled modifier', () => (
-        <Text disabled>Disabled Text</Text>
+        <Text disabled>Disabled { placeholderText }</Text>
       ))
-      .add('with bold modifier', () => (
-        <Text weight="bold">Disabled Text</Text>
+      .add('with bold modifiers', () => (
+        <React.Fragment>
+          <Text weight="semibold">Semibold: { placeholderText }</Text>
+          <br />
+          <Text weight="bold">Bold: { placeholderText }</Text>
+        </React.Fragment>
       ))
-      .add('with custom size', () => (
-        <Text size="lg">Disabled Text</Text>
+      .add('with size modifiers', () => (
+        <React.Fragment>
+          <Text size="xs">XS - 10px: { placeholderText }</Text>
+          <br />
+          <Text size="sm">SM - 12px: { placeholderText }</Text>
+          <br />
+          <Text size="md">MD - 14px: { placeholderText }</Text>
+          <br />
+          <Text size="lg">LG - 16px: { placeholderText }</Text>
+          <br />
+          <Text size="xl">XL - 18px: { placeholderText }</Text>
+        </React.Fragment>
       ));
   });
 };
diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
index 81408c19..859ea2f5 100644
--- a/storybook/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -11406,6 +11406,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with kind modifiers  1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 6.2rem;
+  color: #323c47;
 }
 
 .emotion-1 {
@@ -11414,6 +11415,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with kind modifiers  1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 4.6rem;
+  color: #878c93;
 }
 
 .emotion-2 {
@@ -11422,6 +11424,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with kind modifiers  1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 3rem;
+  color: #d0d7dd;
 }
 
 <div
@@ -11459,6 +11462,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 6.2rem;
+  color: #323c47;
 }
 
 .emotion-1 {
@@ -11467,6 +11471,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 4.6rem;
+  color: #323c47;
 }
 
 .emotion-2 {
@@ -11475,6 +11480,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 3rem;
+  color: #323c47;
 }
 
 .emotion-3 {
@@ -11483,6 +11489,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 2rem;
+  color: #323c47;
 }
 
 .emotion-4 {
@@ -11491,6 +11498,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 1.4rem;
+  color: #323c47;
 }
 
 .emotion-5 {
@@ -11499,6 +11507,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
   font-weight: 400;
   margin: 0;
   font-size: 1rem;
+  color: #323c47;
 }
 
 <div
@@ -11508,37 +11517,37 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
     className="emotion-0"
     type="h1"
   >
-    Heading 1
+    62px - Heading 1
   </h1>
   <h2
     className="emotion-1"
     type="h2"
   >
-    Heading 2
+    46px - Heading 2
   </h2>
   <h3
     className="emotion-2"
     type="h3"
   >
-    Heading 3
+    30px - Heading 3
   </h3>
   <h4
     className="emotion-3"
     type="h4"
   >
-    Heading 4
+    20px - Heading 4
   </h4>
   <h5
     className="emotion-4"
     type="h5"
   >
-    Heading 5
+    14px - Heading 5
   </h5>
   <h6
     className="emotion-5"
     type="h6"
   >
-    Heading 6
+    10px - Heading 6
   </h6>
 </div>
 `;
@@ -12312,30 +12321,38 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with align modifiers  1`] = `
     <span
       className="emotion-0"
     >
-      LongText.LongText.LongText.LongText.LongText. LongText.LongText.LongText.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit
     </span>
     <br />
     <span
       className="emotion-1"
     >
-      LongText.LongText.LongText.LongText.LongText. LongText.LongText.LongText.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit
     </span>
     <br />
     <span
       className="emotion-2"
     >
-      LongText.LongText.LongText.LongText.LongText. LongText.LongText.LongText.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit
     </span>
   </div>
 </div>
 `;
 
-exports[`Storyshots ATOMS/TYPOGRAPHY/Text with bold modifier 1`] = `
-.emotion-1 {
+exports[`Storyshots ATOMS/TYPOGRAPHY/Text with bold modifiers 1`] = `
+.emotion-2 {
   margin: 2rem;
 }
 
 .emotion-0 {
+  line-height: 1.4;
+  margin: 0;
+  color: #323c47;
+  font-weight: 600;
+  font-size: 1.4rem;
+}
+
+.emotion-1 {
   line-height: 1.4;
   margin: 0;
   color: #323c47;
@@ -12344,12 +12361,20 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with bold modifier 1`] = `
 }
 
 <div
-  className="emotion-1"
+  className="emotion-2"
 >
   <span
     className="emotion-0"
   >
-    Disabled Text
+    Semibold: 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-1"
+  >
+    Bold: 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
   </span>
 </div>
 `;
@@ -12373,7 +12398,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with children 1`] = `
   <span
     className="emotion-0"
   >
-    Imploringness
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
   </span>
 </div>
 `;
@@ -12418,37 +12443,39 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with color modifiers  1`] = `
 <div
   className="emotion-5"
 >
-  <div>
-    <span
-      className="emotion-0"
-    >
-      Primary Text
-    </span>
-    <span
-      className="emotion-1"
-    >
-      Secondary Text
-    </span>
-    <span
-      className="emotion-2"
-    >
-      Red Text
-    </span>
-    <span
-      className="emotion-1"
-    >
-      Green Text
-    </span>
-    <span
-      className="emotion-4"
-    >
-      Blue Text
-    </span>
-  </div>
+  <span
+    className="emotion-0"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-1"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-2"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-1"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-4"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
 </div>
 `;
 
-exports[`Storyshots ATOMS/TYPOGRAPHY/Text with custom size 1`] = `
+exports[`Storyshots ATOMS/TYPOGRAPHY/Text with disabled modifier 1`] = `
 .emotion-1 {
   margin: 2rem;
 }
@@ -12456,9 +12483,9 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with custom size 1`] = `
 .emotion-0 {
   line-height: 1.4;
   margin: 0;
-  color: #323c47;
+  color: #d0d7dd;
   font-weight: 400;
-  font-size: 1.6rem;
+  font-size: 1.4rem;
 }
 
 <div
@@ -12467,31 +12494,93 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with custom size 1`] = `
   <span
     className="emotion-0"
   >
-    Disabled Text
+    Disabled 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
   </span>
 </div>
 `;
 
-exports[`Storyshots ATOMS/TYPOGRAPHY/Text with disabled modifier 1`] = `
-.emotion-1 {
+exports[`Storyshots ATOMS/TYPOGRAPHY/Text with size modifiers 1`] = `
+.emotion-5 {
   margin: 2rem;
 }
 
-.emotion-0 {
+.emotion-2 {
   line-height: 1.4;
   margin: 0;
-  color: #d0d7dd;
+  color: #323c47;
   font-weight: 400;
   font-size: 1.4rem;
 }
 
+.emotion-0 {
+  line-height: 1.4;
+  margin: 0;
+  color: #323c47;
+  font-weight: 400;
+  font-size: 1rem;
+}
+
+.emotion-1 {
+  line-height: 1.4;
+  margin: 0;
+  color: #323c47;
+  font-weight: 400;
+  font-size: 1.2rem;
+}
+
+.emotion-3 {
+  line-height: 1.4;
+  margin: 0;
+  color: #323c47;
+  font-weight: 400;
+  font-size: 1.6rem;
+}
+
+.emotion-4 {
+  line-height: 1.4;
+  margin: 0;
+  color: #323c47;
+  font-weight: 400;
+  font-size: 1.8rem;
+}
+
 <div
-  className="emotion-1"
+  className="emotion-5"
 >
   <span
     className="emotion-0"
   >
-    Disabled Text
+    XS - 10px: 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-1"
+  >
+    SM - 12px: 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-2"
+  >
+    MD - 14px: 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-3"
+  >
+    LG - 16px: 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </span>
+  <br />
+  <span
+    className="emotion-4"
+  >
+    XL - 18px: 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
   </span>
 </div>
 `;
@@ -12515,7 +12604,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with text 1`] = `
   <span
     className="emotion-0"
   >
-    Expletively
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
   </span>
 </div>
 `;
diff --git a/storybook/preview-head.html b/storybook/preview-head.html
new file mode 100644
index 00000000..ce5b37e0
--- /dev/null
+++ b/storybook/preview-head.html
@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700" rel="stylesheet">