fix(Storybook): adds typography fixes

8base · Aug 31, 2018 · be2fb66 · be2fb66
1 parent 6a279f1
commit be2fb66
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 78 deletions.
diff --git 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
@@ -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
@@ -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>
       ));
   });
 };