feat(atoms): add xl size, brand and marketing colors

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

Hide file tree

Showing 4 changed files with 165 additions and 32 deletions.
diff --git a/src/atoms/Button/Button.js b/src/atoms/Button/Button.js
@@ -25,17 +25,19 @@ type ButtonProps = {|
   /** possible button types */
   type?: 'submit' | 'button',
   /** possible button colors */
-  color?: 'primary' | 'secondary' | 'neutral' | 'warning',
+  color?: 'primary' | 'secondary' | 'neutral' | 'red' | 'white',
   /** the type of button */
   variant?: 'outlined' | 'raised',
   /** posible sizes */
-  size?: 'sm' | 'md' | 'lg',
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
 |};
 
 const BUTTON_HEIGHT_BY_SIZE = {
+  xs: '2rem',
   sm: '3rem',
   md: '4rem',
   lg: '5rem',
+  xl: '6rem',
 };
 
 const DEFAULT_MODIFIERS = {
@@ -70,6 +72,11 @@ const theme = createTheme(name, (colors: *): * => ({
   },
   modifiers: {
     size: {
+      xs: {
+        height: BUTTON_HEIGHT_BY_SIZE.xs,
+        padding: '0 1rem',
+        borderRadius: '.5rem',
+      },
       sm: {
         height: BUTTON_HEIGHT_BY_SIZE.sm,
         padding: '0 2rem',
@@ -85,6 +92,12 @@ const theme = createTheme(name, (colors: *): * => ({
         padding: '0 6rem',
         borderRadius: '.5rem',
       },
+      xl: {
+        height: BUTTON_HEIGHT_BY_SIZE.xl,
+        padding: '0 6rem',
+        borderRadius: '.5rem',
+        fontSize: '1.8rem',
+      },
     },
     disabled: {
       backgroundColor: colors.LIGHT_GRAY5,
@@ -152,8 +165,14 @@ const getBackgroundColor = (props: ButtonProps) => {
     switch (props.color) {
       case 'primary': return getThemeColors(props).PRIMARY_BUTTON_BACKGROUND_COLOR;
       case 'secondary': return getThemeColors(props).SECONDARY_BUTTON_BACKGROUND_COLOR;
-      case 'warning': return getThemeColors(props).WARNING_BUTTON_BACKGROUND_COLOR;
+      case 'red': return getThemeColors(props).RED_BUTTON_BACKGROUND_COLOR;
       case 'neutral': return getThemeColors(props).NEUTRAL_BUTTON_BACKGROUND_COLOR;
+      case 'white': return getThemeColors(props).WHITE;
+      default: return '';
+    }
+  } else {
+    switch (props.color) {
+      case 'white': return getThemeColors(props).TRANSPARENT;
       default: return '';
     }
   }
@@ -165,21 +184,25 @@ const getColor = (props: ButtonProps) => {
       case 'primary': return getThemeColors(props).LIGHT_PRIMARY_TEXT_COLOR;
       case 'secondary': return getThemeColors(props).LIGHT_PRIMARY_TEXT_COLOR;
       case 'neutral': return getThemeColors(props).PRIMARY_TEXT_COLOR;
-      case 'warning': return getThemeColors(props).LIGHT_PRIMARY_TEXT_COLOR;
+      case 'red': return getThemeColors(props).LIGHT_PRIMARY_TEXT_COLOR;
+      case 'white': return getThemeColors(props).PRIMARY_TEXT_COLOR;
       default: return '';
     }
-  }
-  else {
-    return getThemeColors(props).PRIMARY_TEXT_COLOR;
+  } else {
+    switch (props.color) {
+      case 'white': return getThemeColors(props).WHITE;
+      default: return getThemeColors(props).PRIMARY_TEXT_COLOR;
+    }
   }
 };
 
 const getBorderColor = (props: ButtonProps) => {
   switch (props.color) {
     case 'primary': return getThemeColors(props).PRIMARY_BUTTON_BACKGROUND_COLOR;
     case 'secondary': return getThemeColors(props).SECONDARY_BUTTON_BACKGROUND_COLOR;
-    case 'warning': return getThemeColors(props).WARNING_BUTTON_BACKGROUND_COLOR;
+    case 'red': return getThemeColors(props).RED_BUTTON_BACKGROUND_COLOR;
     case 'neutral': return getThemeColors(props).PRIMARY_BORDER_COLOR;
+    case 'white': return getThemeColors(props).WHITE;
     default: return '';
   }
 };

diff --git a/src/atoms/Button/Button.stories.js b/src/atoms/Button/Button.stories.js
@@ -27,18 +27,20 @@ export default (asStory) => {
         </Row>
       ))
       .add('with custom colors and variant', () => (
-        <Column>
+        <Column style={{ background: '#999' }}>
           <Row>
             <Button text="Raised" color="primary" />
             <Button text="Raised" color="secondary" />
-            <Button text="Raised" color="warning" />
+            <Button text="Raised" color="red" />
             <Button text="Raised" color="neutral" />
+            <Button text="Raised" color="white" />
           </Row>
           <Row>
             <Button text="Outlined" color="primary" variant="outlined" />
             <Button text="Outlined" color="secondary" variant="outlined" />
-            <Button text="Outlined" color="warning" variant="outlined" />
+            <Button text="Outlined" color="red" variant="outlined" />
             <Button text="Outlined" color="neutral" variant="outlined" />
+            <Button text="Outlined" color="white" variant="outlined" />
           </Row>
         </Column>
       ))

diff --git a/src/theme/colors.js b/src/theme/colors.js
@@ -35,6 +35,8 @@ const PALETTE = {
   LIGHT_GRAY: '#f4f7f9',
   GRAY: '#7e868e',
   DARK_GRAY: '#323c47',
+
+  TRANSPARENT: 'transparent',
 };
 
 const COLORS = {
@@ -44,12 +46,13 @@ const COLORS = {
   SECONDARY: PALETTE.GREEN,
   SUCCESS: PALETTE.LIGHT_GREEN,
   DANGER: PALETTE.LIGHT_RED,
+  TRANSPARENT: PALETTE.TRANSPARENT,
 
   PRIMARY_BORDER_COLOR: PALETTE.LIGHT_GRAY1,
   PRIMARY_BUTTON_BACKGROUND_COLOR: PALETTE.LIGHT_BLUE,
   SECONDARY_BUTTON_BACKGROUND_COLOR: PALETTE.GREEN,
   NEUTRAL_BUTTON_BACKGROUND_COLOR: PALETTE.WHITE,
-  WARNING_BUTTON_BACKGROUND_COLOR: PALETTE.RED,
+  RED_BUTTON_BACKGROUND_COLOR: PALETTE.RED,
   PRIMARY_LINK_COLOR: PALETTE.LIGHT_BLUE,
 
   DIVIDER_COLOR: PALETTE.LIGHT_GRAY4,