Text stories + color

Summary: Ability to set the text color with a prop + stories Reviewed By: naor9991 Differential Revision: D18084122 fbshipit-source-id: c37ebf5d553634d6b3f95fb4c82e09f6402dde43
diorgesl · Oct 24, 2019 · 1837b3b · 1837b3b
1 parent 929bd12
commit 1837b3b
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 19 deletions.
diff --git a/nms/fbcnms-packages/fbcnms-ui/components/design-system/FormField/FormField.react.js b/nms/fbcnms-packages/fbcnms-ui/components/design-system/FormField/FormField.react.js
@@ -10,7 +10,7 @@
 
 import * as React from 'react';
 import FormFieldContext from './FormFieldContext';
-import Text from '../../Text.react';
+import Text from '../Text.react';
 import classNames from 'classnames';
 import nullthrows from 'nullthrows';
 import {makeStyles} from '@material-ui/styles';

diff --git a/nms/fbcnms-packages/fbcnms-ui/components/design-system/Input/InputAffix.react.js b/nms/fbcnms-packages/fbcnms-ui/components/design-system/Input/InputAffix.react.js
@@ -10,7 +10,7 @@
 
 import * as React from 'react';
 import SymphonyTheme from '../../../theme/symphony';
-import Text from '../../Text.react';
+import Text from '../Text.react';
 import classNames from 'classnames';
 import {makeStyles} from '@material-ui/styles';
 import {useInput} from './InputContext';

diff --git a/nms/fbcnms-packages/fbcnms-ui/components/design-system/Table/TableContent.react.js b/nms/fbcnms-packages/fbcnms-ui/components/design-system/Table/TableContent.react.js
@@ -13,7 +13,7 @@ import type {TableColumnType, TableRowDataType} from './Table.react';
 import React from 'react';
 import SymphonyTheme from '../../../theme/symphony';
 import TableRowCheckbox from './TableRowCheckbox.react';
-import Text from '../../Text.react';
+import Text from '../Text.react';
 import {makeStyles} from '@material-ui/styles';
 import {useTable} from './TableContext';
 

diff --git a/nms/fbcnms-packages/fbcnms-ui/components/design-system/Table/TableHeader.react.js b/nms/fbcnms-packages/fbcnms-ui/components/design-system/Table/TableHeader.react.js
@@ -15,7 +15,7 @@ import ArrowUpIcon from '../Icons/ArrowUp';
 import React from 'react';
 import SymphonyTheme from '../../../theme/symphony';
 import TableHeaderCheckbox from './TableHeaderCheckbox.react';
-import Text from '../../Text.react';
+import Text from '../Text.react';
 import classNames from 'classnames';
 import {makeStyles} from '@material-ui/styles';
 import {useTable} from './TableContext';

diff --git a/...ckages/fbcnms-ui/components/Text.react.js → ...ui/components/design-system/Text.react.js b/...ckages/fbcnms-ui/components/Text.react.js → ...ui/components/design-system/Text.react.js
@@ -26,22 +26,28 @@ const useStyles = makeStyles(({symphony}) => ({
   body2: symphony.typography.body2,
   caption: symphony.typography.caption,
   overline: symphony.typography.overline,
-  light: {
+  lightColor: {
     color: symphony.palette.white,
   },
-  dark: {
+  regularColor: {
     color: symphony.palette.D900,
   },
-  light: {
+  primaryColor: {
+    color: symphony.palette.primary,
+  },
+  errorColor: {
+    color: symphony.palette.R600,
+  },
+  lightWeight: {
     fontWeight: 300,
   },
-  regular: {
+  regularWeight: {
     fontWeight: 400,
   },
-  medium: {
+  mediumWeight: {
     fontWeight: 500,
   },
-  bold: {
+  boldWeight: {
     fontWeight: 600,
   },
 }));
@@ -63,19 +69,19 @@ type Props = {
     | 'caption'
     | 'overline',
   className?: string,
-  light?: boolean,
   weight?: 'inherit' | 'light' | 'regular' | 'medium' | 'bold',
+  color?: 'light' | 'regular' | 'primary' | 'error',
 };
 
 const Text = (props: Props) => {
-  const {children, variant, className, light, weight} = props;
+  const {children, variant, className, color, weight} = props;
   const classes = useStyles();
   return (
     <span
       className={classNames(
         classes[variant],
-        classes[light ? 'light' : 'dark'],
-        classes[weight ? weight : 'inhreit'],
+        classes[`${color ?? 'regular'}Color`],
+        classes[`${weight ? weight : 'inhreit'}Weight`],
         className,
       )}>
       {children}
@@ -85,7 +91,7 @@ const Text = (props: Props) => {
 
 Text.defaultProps = {
   variant: 'body1',
-  light: false,
+  color: 'regular',
   weight: 'inherit',
 };
 

diff --git a/nms/fbcnms-packages/fbcnms-ui/stories/components/text.stories.js b/nms/fbcnms-packages/fbcnms-ui/stories/components/text.stories.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import React from 'react';
+import Text from '../../components/design-system/Text.react';
+import symphony from '../../theme/symphony';
+import {STORY_CATEGORIES} from '../storybookUtils';
+import {makeStyles} from '@material-ui/styles';
+import {storiesOf} from '@storybook/react';
+
+const useStyles = makeStyles(_theme => ({
+  root: {
+    width: '100%',
+  },
+  lightText: {
+    display: 'inline-block',
+    backgroundColor: symphony.palette.D900,
+  },
+  text: {
+    margin: '16px 0px',
+  },
+}));
+
+const TextRoot = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <div className={classes.text}>
+        <Text variant="body2" color="regular">
+          Regular Text
+        </Text>
+      </div>
+      <div className={classes.text}>
+        <div className={classes.lightText}>
+          <Text variant="body2" color="light">
+            Light Text
+          </Text>
+        </div>
+      </div>
+      <div className={classes.text}>
+        <Text variant="body2" color="primary">
+          Primary Text
+        </Text>
+      </div>
+      <div className={classes.text}>
+        <Text variant="body2" color="error">
+          Error Text
+        </Text>
+      </div>
+      <div className={classes.text}>
+        <Text variant="body2" weight="light">
+          Light Weight Text
+        </Text>
+      </div>
+      <div className={classes.text}>
+        <Text variant="body2" weight="regular">
+          Regular Weight Text
+        </Text>
+      </div>
+      <div className={classes.text}>
+        <Text variant="body2" weight="medium">
+          Medium Weight Text
+        </Text>
+      </div>
+      <div className={classes.text}>
+        <Text variant="body2" weight="bold">
+          Bold Weight Text
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+storiesOf(`${STORY_CATEGORIES.COMPONENTS}`, module).add('Text', () => (
+  <TextRoot />
+));
diff --git a/nms/fbcnms-packages/fbcnms-ui/stories/foundation/ColorBlock.react.js b/nms/fbcnms-packages/fbcnms-ui/stories/foundation/ColorBlock.react.js
@@ -9,7 +9,7 @@
  */
 
 import React from 'react';
-import Text from '../../components/Text.react';
+import Text from '../../components/design-system/Text.react';
 import classNames from 'classnames';
 import {makeStyles} from '@material-ui/styles';
 

diff --git a/nms/fbcnms-packages/fbcnms-ui/stories/foundation/colors.stories.js b/nms/fbcnms-packages/fbcnms-ui/stories/foundation/colors.stories.js
@@ -11,7 +11,7 @@
 import ColorBlock from './ColorBlock.react';
 import React from 'react';
 import SymphonyTheme, {BLUE, DARK} from '../../theme/symphony';
-import Text from '../../components/Text.react';
+import Text from '../../components/design-system/Text.react';
 import {STORY_CATEGORIES} from '../storybookUtils';
 import {storiesOf} from '@storybook/react';
 

diff --git a/nms/fbcnms-packages/fbcnms-ui/stories/foundation/shadows.stories.js b/nms/fbcnms-packages/fbcnms-ui/stories/foundation/shadows.stories.js
@@ -10,7 +10,7 @@
 
 import React from 'react';
 import SymphonyTheme from '../../theme/symphony';
-import Text from '../../components/Text.react';
+import Text from '../../components/design-system/Text.react';
 import classNames from 'classnames';
 import {STORY_CATEGORIES} from '../storybookUtils';
 import {makeStyles} from '@material-ui/styles';

diff --git a/nms/fbcnms-packages/fbcnms-ui/stories/foundation/typography.stories.js b/nms/fbcnms-packages/fbcnms-ui/stories/foundation/typography.stories.js
@@ -12,7 +12,7 @@ import type {TextVariant} from '../../theme/symphony';
 
 import React from 'react';
 import SymphonyTheme from '../../theme/symphony';
-import Text from '../../components/Text.react';
+import Text from '../../components/design-system/Text.react';
 import {STORY_CATEGORIES} from '../storybookUtils';
 import {makeStyles} from '@material-ui/styles';
 import {storiesOf} from '@storybook/react';