fix(atoms): add styles for user flow screens to the typography

8base · Aug 8, 2018 · d6fff7e · d6fff7e
1 parent d78e41d
commit d6fff7e
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 56 deletions.
diff --git a/src/atoms/typography/Heading/Heading.js b/src/atoms/typography/Heading/Heading.js
@@ -4,7 +4,7 @@ import { createStyledTag, createTheme } from '../../../utils';
 
 type HeadingProps = {|
   children?: React$Node,
-  kind?: 'primary' | 'secondary' | 'disabled',
+  kind?: 'primary' | 'secondary' | 'disabled' | 'white',
   text?: string,
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
   weight?: 'light' | 'normal' | 'semibold' | 'bold',
@@ -44,6 +44,9 @@ const theme = createTheme(name, (colors) => ({
       disabled: {
         color: colors.DARK_DISABLED_TEXT_COLOR,
       },
+      white: {
+        color: colors.WHITE,
+      },
     },
     weight: {
       light: {
@@ -68,7 +71,7 @@ const theme = createTheme(name, (colors) => ({
 
 const StyledTag = createStyledTag(name, {
   lineHeight: 1.1,
-  fontFamily: 'Sofia Pro, sans-serif',
+  fontFamily: 'Poppins',
   fontWeight: 400,
   margin: 0,
 });

diff --git a/src/atoms/typography/Icon/Icon.js b/src/atoms/typography/Icon/Icon.js
@@ -9,7 +9,7 @@ type IconProps = {
   /** icon name */
   name: string,
   /** icon color */
-  color?: 'red' | 'green' | 'blue' | 'primary' | 'secondary',
+  color?: 'red' | 'green' | 'blue' | 'primary' | 'secondary' | 'white',
   /** icon size */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'stretch',
 };
@@ -24,6 +24,7 @@ const theme : Theme<IconProps> = createTheme(name, (colors: *): * => ({
       red: { color: colors.RED },
       green: { color: colors.GREEN },
       blue: { color: colors.BLUE },
+      white: { color: colors.WHITE },
     },
     size: {
       xs: {

diff --git a/src/atoms/typography/Icon/glyphs/Mail.svg b/src/atoms/typography/Icon/glyphs/Mail.svg
diff --git a/src/atoms/typography/Icon/glyphs/index.js b/src/atoms/typography/Icon/glyphs/index.js
@@ -2,12 +2,14 @@
 // eslint-disable-next-line no-unused-vars
 import React from 'react';
 
+import Mail from './Mail.svg';
 import Check from './Check.svg';
 import ChevronDown from './ChevronDown.svg';
 import Search from './Search.svg';
 import Trashcan from './Trashcan.svg';
 
 export {
+  Mail,
   Check,
   ChevronDown,
   Search,

diff --git a/src/atoms/typography/Link/Link.js b/src/atoms/typography/Link/Link.js
@@ -5,26 +5,53 @@ import React from 'react';
 import { createStyledTag, createTheme } from '../../../utils';
 
 type LinkProps = {|
-  to: string,
+  to?: string,
   text?: string,
+  tagName: string | React$Component<*>,
   children?: React$Node,
   component?: React$Node,
 |};
 
 const name = 'link';
 
-const theme = createTheme(name, {
+const theme = createTheme(name, (colors: *) => ({
   modifiers: {
+    size: {
+      lg: {
+        fontSize: '1.8rem',
+      },
+      md: {
+        fontSize: '1.4rem',
+      },
+      sm: {
+        fontSize: '1.2rem',
+      },
+    },
+    color: {
+      primary: {
+        color: colors.PRIMARY_LINK_COLOR,
+      },
+      white: {
+        color: colors.WHITE,
+      },
+      brand: {
+        color: colors.BRAND,
+      },
+    },
+    underline: {
+      textDecoration: 'underline',
+    },
   },
   defaults: {
+    size: 'md',
+    color: 'primary',
+    underline: false,
   },
-});
+}));
 
-const StyledTag = createStyledTag(name, (props) => ({
+const StyledTag = createStyledTag(name, () => ({
   cursor: 'pointer',
-  color: props.theme.COLORS.PRIMARY_LINK_COLOR,
   fontFamily: 'Poppins',
-  fontSize: '1.4rem',
   fontWeight: 400,
   lineHeight: '1',
   textDecoration: 'none',
@@ -37,15 +64,15 @@ const StyledTag = createStyledTag(name, (props) => ({
 function Link({
   text,
   children,
-  component,
+  tagName,
   ...rest
   }: LinkProps) {
-  return <StyledTag { ...rest } tagName={ component }>{ text || children }</StyledTag>;
+  return <StyledTag { ...rest } tagName={ tagName }>{ text || children }</StyledTag>;
 }
 
 Link.defaultProps = {
   ...theme[name].defaults,
-  component: 'a',
+  tagName: 'a',
 };
 
 export { Link, theme };
diff --git a/src/atoms/typography/Paragraph/Paragraph.js b/src/atoms/typography/Paragraph/Paragraph.js
@@ -4,7 +4,8 @@ import { createStyledTag, createTheme } from '../../../utils';
 
 type ParagraphProps = {|
   children?: React$Node,
-  kind?: 'primary' | 'secondary' | 'disabled',
+  kind?: 'primary' | 'secondary' | 'disabled' | 'white',
+  size: 'md' | 'lg',
   text?: string,
 |};
 
@@ -22,10 +23,22 @@ const theme = createTheme(name, (colors) => ({
       disabled: {
         color: colors.DARK_DISABLED_TEXT_COLOR,
       },
+      white: {
+        color: colors.WHITE,
+      },
+    },
+    size: {
+      lg: {
+        fontSize: '1.8rem',
+      },
+      md: {
+        fontSize: '1.4rem',
+      },
     },
   },
   defaults: {
     kind: 'primary',
+    size: 'md',
   },
 }));
 

diff --git a/src/atoms/typography/Text/Text.js b/src/atoms/typography/Text/Text.js
@@ -6,15 +6,15 @@ import { createStyledTag, createTheme } from '../../../utils';
 
 type TextProps = {|
   /** text to display in the component */
-  children?: string | number,
+  children?: React$Node | string | number,
   /** another way to set displayed text */
   text?: string | number,
   /** possible text colors */
-  color?: 'primary' | 'secondary' | 'red' | 'green' | 'blue',
+  color?: 'primary' | 'secondary' | 'red' | 'green' | 'blue' | 'white',
   /** disabled text state*/
   disabled?: boolean,
-  /** set style to bold */
-  bold?: boolean,
+  /** set style to bold or other weights */
+  weight?: 'light' | 'normal' | 'semibold' | 'bold',
   /** possible sizes */
   size?: PropSizes,
   /** text align */
@@ -41,6 +41,9 @@ const theme = createTheme(name, (colors: *): * => ({
       blue: {
         color: colors.BLUE,
       },
+      white: {
+        color: colors.WHITE,
+      },
     },
 
     align: {
@@ -53,8 +56,19 @@ const theme = createTheme(name, (colors: *): * => ({
       color: colors.DISABLED_TEXT_COLOR,
     },
 
-    bold: {
-      fontWeight: 600,
+    weight: {
+      light: {
+        fontWeight: 300,
+      },
+      normal: {
+        fontWeight: 400,
+      },
+      semibold: {
+        fontWeight: 600,
+      },
+      bold: {
+        fontWeight: 700,
+      },
     },
 
     size: {
@@ -78,13 +92,12 @@ const theme = createTheme(name, (colors: *): * => ({
   defaults: {
     color: 'primary',
     size: 'md',
-    bold: false,
+    weight: 'normal',
   },
 }));
 
 const StyledTag = createStyledTag(name, {
   fontFamily: 'Poppins',
-  fontWeight: 400,
   fontSize: '1.4rem',
   lineHeight: 1.4,
   margin: 0,

diff --git a/src/atoms/typography/Text/Text.stories.js b/src/atoms/typography/Text/Text.stories.js
@@ -34,7 +34,7 @@ export default (asStory: *) => {
         <Text disabled>Disabled Text</Text>
       ))
       .add('with bold modifier', () => (
-        <Text bold>Disabled Text</Text>
+        <Text weight="bold">Disabled Text</Text>
       ))
       .add('with custom size', () => (
         <Text size="lg">Disabled Text</Text>