Merge pull request #270 from lifeomic/feature/negative-positive-text

feat: Add positive and negative `color` values to `<Text`
lifeomic · May 20, 2022 · 742cd2f · 742cd2f
2 parents 50103e5 + 8cead69
commit 742cd2f
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 1 deletion.
diff --git a/src/components/Text/Text.test.tsx b/src/components/Text/Text.test.tsx
@@ -169,6 +169,26 @@ test('it applies the inverse class when `color="inverse"`', async () => {
   expect(root).toHaveClass('ChromaText-inverseColor');
 });
 
+test('it applies the negative class when `color="negative"`', async () => {
+  const { findByTestId } = renderWithTheme(
+    <Text data-testid={testId} color="negative">
+      test
+    </Text>
+  );
+  const root = await findByTestId(testId);
+  expect(root).toHaveClass('ChromaText-negativeColor');
+});
+
+test('it applies the positive class when `color="positive"`', async () => {
+  const { findByTestId } = renderWithTheme(
+    <Text data-testid={testId} color="positive">
+      test
+    </Text>
+  );
+  const root = await findByTestId(testId);
+  expect(root).toHaveClass('ChromaText-positiveColor');
+});
+
 test('it applies the marginBottom class when "marginBottom"', async () => {
   const { findByTestId } = renderWithTheme(
     <Text data-testid={testId} marginBottom>

diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -15,6 +15,12 @@ export const useStyles = makeStyles(
     inverseColor: {
       color: theme.palette.common.white,
     },
+    negativeColor: {
+      color: theme.palette.negative.main,
+    },
+    positiveColor: {
+      color: theme.palette.positive.main,
+    },
     headline: {
       fontSize: theme.pxToRem(20),
       letterSpacing: theme.pxToRem(0.5),
@@ -99,7 +105,7 @@ export interface TextOwnProps extends React.HTMLAttributes<HTMLElement> {
   weight?: 'light' | 'regular' | 'bold';
   marginBottom?: boolean;
   useH1?: boolean;
-  color?: 'default' | 'inverse';
+  color?: 'default' | 'inverse' | 'negative' | 'positive';
 }
 
 export type TextClasses = GetClasses<typeof useStyles>;
@@ -150,6 +156,8 @@ export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
           },
           {
             [classes.inverseColor]: color === 'inverse',
+            [classes.negativeColor]: color === 'negative',
+            [classes.positiveColor]: color === 'positive',
           },
           marginBottom && classes.marginBottom,
           {

diff --git a/stories/components/Text/Text.stories.tsx b/stories/components/Text/Text.stories.tsx
@@ -2,8 +2,31 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Text } from '../../../src/components/Text';
 import { Container } from '../../storyComponents/Container';
+import { spacing } from '../../storyStyles';
 import md from './default.md';
 
+interface WrappedContainerProps {
+  additionalStyles?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+const WrappedContainer: React.FC<WrappedContainerProps> = ({
+  additionalStyles,
+  children,
+}) => (
+  <Container
+    containerStyles={{
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...additionalStyles,
+    }}
+  >
+    {children}
+  </Container>
+);
+
 const TextStory: React.FunctionComponent = () => {
   return (
     <Container
@@ -54,6 +77,20 @@ const TextStory: React.FunctionComponent = () => {
       <Text align="left">align left</Text>
       <Text align="right">align right</Text>
       <Text align="justify">align justify</Text>
+      <WrappedContainer additionalStyles={{ gap: spacing[4] }}>
+        <Text
+          color="inverse"
+          style={{
+            background: '#384049',
+            paddingLeft: spacing[2],
+            paddingRight: spacing[2],
+          }}
+        >
+          Inverse
+        </Text>
+        <Text color="negative">Negative</Text>
+        <Text color="positive">Positive</Text>
+      </WrappedContainer>
     </Container>
   );
 };

diff --git a/stories/components/Text/default.md b/stories/components/Text/default.md
@@ -38,6 +38,8 @@ The sizing options are listed above in the story.
 
 ```jsx
 <Text color="inverse">body text</Text>
+<Text color="negative">body text</Text>
+<Text color="positive">body text</Text>
 ```
 
 ### Align