feat(Paragraph): replaces kind by color, adds aling and verticalAlign…

… props
8base · Mar 26, 2019 · ab0db22 · ab0db22
1 parent 034327a
commit ab0db22
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 35 deletions.
diff --git a/...__/__image_snapshots__/paragraph-test-js-components-paragraph-common-1-snap.png b/...__/__image_snapshots__/paragraph-test-js-components-paragraph-common-1-snap.png
diff --git a/src/components/Paragraph/Paragraph.js b/src/components/Paragraph/Paragraph.js
@@ -3,30 +3,26 @@
 import React from 'react';
 
 import { ParagraphTag } from './Paragraph.theme';
+import { PALETTE } from '../../theme';
 
 type ParagraphProps = {
-  children?: React$Node,
-  kind?: 'primary' | 'secondary' | 'disabled' | 'white',
-  text?: string,
+  children?: React$Node | string | number,
+  text?: string | number,
+  color?: $Keys<typeof PALETTE>,
+  align?: 'left' | 'center' | 'right',
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold',
+  verticalAlign?: string,
 };
 
-const Paragraph = ({
-  text,
-  children,
-  ...rest
-  }: ParagraphProps) => {
-  return (
-    <ParagraphTag
-      { ...rest }
-      tagName="p"
-    >
-      { children || text }
-    </ParagraphTag>
-  );
-};
+const Paragraph = ({ text, children, ...rest }: ParagraphProps) => (
+  <ParagraphTag { ...rest } tagName="p">
+    { children || text }
+  </ParagraphTag>
+);
 
 Paragraph.defaultProps = {
-  kind: 'primary',
+  color: 'DARK_GRAY1',
+  weight: 'normal',
 };
 
 export { Paragraph };
diff --git a/src/components/Paragraph/Paragraph.stories.js b/src/components/Paragraph/Paragraph.stories.js
@@ -5,9 +5,9 @@ export default (asStory) => {
     story
       .add('common ', () => (
         <Fragment>
-          <Paragraph kind="primary">Primary Paragraph</Paragraph>
-          <Paragraph kind="secondary">Secondary Paragraph</Paragraph>
-          <Paragraph kind="disabled">Disabled Paragraph</Paragraph>
+          <Paragraph color="DARK_GRAY1">Primary Paragraph</Paragraph>
+          <Paragraph color="GRAY1">Secondary Paragraph</Paragraph>
+          <Paragraph color="LIGHT_GRAY1">Disabled Paragraph</Paragraph>
         </Fragment>
       ))
       .add('with text', () => (

diff --git a/src/components/Paragraph/Paragraph.theme.js b/src/components/Paragraph/Paragraph.theme.js
@@ -1,30 +1,46 @@
-import { createThemeTag } from '../../theme/createThemeTag';
+import fp from 'lodash/fp';
 
+import { createThemeTag } from '../../theme/createThemeTag';
+import { PALETTE } from '../../theme';
 
 const name = 'paragraph';
 
-const [ParagraphTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
-  root: {
-    fontWeight: 400,
+const [ParagraphTag, theme] = createThemeTag(name, ({ SIZES }: *) => ({
+  root: props => ({
     fontSize: SIZES.BODY_TEXT,
     lineHeight: SIZES.BODY_TEXT_LH,
     margin: 0,
-  },
+    '& > *': {
+      verticalAlign: props.verticalAlign,
+    },
+  }),
   modifiers: {
-    kind: {
-      primary: {
-        color: COLORS.DARK_PRIMARY_TEXT_COLOR,
+    color: fp.mapValues(
+      (color) => ({ color }),
+      PALETTE,
+    ),
+    weight: {
+      light: {
+        fontWeight: 300,
+      },
+      normal: {
+        fontWeight: 400,
       },
-      secondary: {
-        color: COLORS.DARK_SECONDARY_TEXT_COLOR,
+      medium: {
+        fontWeight: 500,
       },
-      disabled: {
-        color: COLORS.DARK_DISABLED_TEXT_COLOR,
+      semibold: {
+        fontWeight: 600,
       },
-      white: {
-        color: COLORS.WHITE,
+      bold: {
+        fontWeight: 700,
       },
     },
+    align: {
+      left: { textAlign: 'left' },
+      right: { textAlign: 'right' },
+      center: { textAlign: 'center' },
+    },
   },
 }));