feat(atoms): replace colors enum with them pallete colors

8base · Aug 23, 2018 · 5749210 · 5749210
1 parent ce32b7e
commit 5749210
Show file tree

Hide file tree

Showing 3 changed files with 440 additions and 205 deletions.
diff --git a/src/atoms/typography/Text/Text.js b/src/atoms/typography/Text/Text.js
@@ -1,7 +1,8 @@
 // @flow
 
 import React from 'react';
-
+import fp from 'lodash/fp';
+import { PALETTE } from '../../../theme';
 import { createStyledTag, createTheme } from '../../../utils';
 
 type TextProps = {|
@@ -10,11 +11,11 @@ type TextProps = {|
   /** another way to set displayed text */
   text?: string | number,
   /** possible text colors */
-  color?: 'primary' | 'secondary' | 'red' | 'green' | 'blue' | 'white',
+  color?: $Keys<typeof PALETTE>,
   /** disabled text state*/
   disabled?: boolean,
   /** set style to bold or other weights */
-  weight?: 'light' | 'normal' | 'semibold' | 'bold',
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold',
   /** possible sizes */
   size?: PropSizes,
   /** text align */
@@ -27,26 +28,10 @@ const name = 'text';
 
 const theme = createTheme(name, (colors: *): * => ({
   modifiers: {
-    color: {
-      primary: {
-        color: colors.PRIMARY_TEXT_COLOR,
-      },
-      secondary: {
-        color: colors.SECONDARY_TEXT_COLOR,
-      },
-      red: {
-        color: colors.RED,
-      },
-      green: {
-        color: colors.GREEN,
-      },
-      blue: {
-        color: colors.BLUE,
-      },
-      white: {
-        color: colors.WHITE,
-      },
-    },
+    color: fp.mapValues(
+      (color) => ({ color }),
+      PALETTE,
+    ),
 
     align: {
       left: { textAlign: 'left' },
@@ -65,6 +50,9 @@ const theme = createTheme(name, (colors: *): * => ({
       normal: {
         fontWeight: 400,
       },
+      medium: {
+        fontWeight: 500,
+      },
       semibold: {
         fontWeight: 600,
       },
@@ -99,16 +87,14 @@ const theme = createTheme(name, (colors: *): * => ({
   },
 
   defaults: {
-    color: 'primary',
+    color: 'PRIMARY',
     size: 'md',
     weight: 'normal',
     ellipsis: false,
   },
 }));
 
 const StyledTag = createStyledTag(name, {
-  fontFamily: 'Poppins',
-  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
@@ -14,11 +14,11 @@ export default (asStory: *) => {
       ))
       .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>
+          <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>
       ))
       .add('with align modifiers ', () => (