feat: add secondary variant for text component (#170)

Nikolai Lopin · web-flow · commit f056fea33f1a · 2021-12-09T11:07:30.000+01:00
diff --git a/src/components/Text/Text.spec.tsx b/src/components/Text/Text.spec.tsx
@@ -1,51 +1,74 @@
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import { Colors } from '../../essentials';
+import { SemanticColors } from '../../essentials/Colors/Colors';
+
 import { Text } from './Text';
 
 describe('Text', () => {
-    it('renders a <span> by default', () => {
-        expect(render(<Text />)).toMatchHtmlTag('span');
+    describe('default render', () => {
+        it('renders a <span> by default', () => {
+            expect(render(<Text />)).toMatchHtmlTag('span');
+        });
+
+        it('has a primary color by default', () => {
+            expect(render(<Text />).container.firstChild).toHaveStyle(`
+            color: ${SemanticColors.text.primary};
+        `);
+        });
+
+        it('renders the children', () => {
+            expect(render(<Text>Content</Text>).getByText('Content')).toBeInTheDocument();
+        });
     });
 
     it('respects the "as" prop', () => {
         expect(render(<Text as="b" />)).toMatchHtmlTag('b');
     });
 
-    it('renders the children', () => {
-        expect(render(<Text>Content</Text>).getByText('Content')).toBeInTheDocument();
+    it('has an inverted primary color if inverted property is set', () => {
+        expect(render(<Text inverted />).container.firstChild).toHaveStyle(`
+            color: ${SemanticColors.text.primaryInverted};
+        `);
     });
 
     describe('if the weak property is set', () => {
         it('has a dim color', () => {
             expect(render(<Text weak />).container.firstChild).toHaveStyle(`
-                color: ${Colors.AUTHENTIC_BLUE_550};
+                color: ${SemanticColors.text.secondary};
             `);
         });
 
         it('has a dimmer color if inverted', () => {
             expect(render(<Text weak inverted />).container.firstChild).toHaveStyle(`
-                color: ${Colors.AUTHENTIC_BLUE_350};
+                color: ${SemanticColors.text.secondaryInverted};
+            `);
+        });
+    });
+
+    describe('if the `secondary` property is set', () => {
+        it('has a dim color', () => {
+            expect(render(<Text secondary />).container.firstChild).toHaveStyle(`
+                color: ${SemanticColors.text.secondary};
+            `);
+        });
+
+        it('has a dimmer color if inverted', () => {
+            expect(render(<Text secondary inverted />).container.firstChild).toHaveStyle(`
+                color: ${SemanticColors.text.secondaryInverted};
             `);
         });
     });
 
     describe('if the disabled property is set', () => {
         it('has the disabled color', () => {
             expect(render(<Text disabled />).container.firstChild).toHaveStyle(`
-                color: ${Colors.AUTHENTIC_BLUE_350};
+                color: ${SemanticColors.text.disabled};
             `);
         });
         it('has a stronger disabled color if inverted', () => {
             expect(render(<Text disabled inverted />).container.firstChild).toHaveStyle(`
-                color: ${Colors.AUTHENTIC_BLUE_550};
+                color: ${SemanticColors.text.disabledInverted};
             `);
         });
     });
-
-    it('has a bright color if inverted property is set', () => {
-        expect(render(<Text inverted />).container.firstChild).toHaveStyle(`
-            color: ${Colors.WHITE};
-        `);
-    });
 });
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -13,9 +13,9 @@ import {
     textAlign,
     TextAlignProps
 } from 'styled-system';
-import { Colors } from '../../essentials';
 import { theme } from '../../essentials/theme';
 import { get } from '../../utils/themeGet';
+import { deprecatedProperty } from '../../utils/deprecatedProperty';
 
 interface TextProps
     extends ComponentPropsWithoutRef<'span'>,
@@ -33,28 +33,38 @@ interface TextProps
     inverted?: boolean;
     /**
      * Adjust color to indicate secondary information
+     * @deprecated use `secondary` instead
      */
     weak?: boolean;
+    /**
+     * Adjust color to indicate secondary information
+     */
+    secondary?: boolean;
     /**
      * Adjust color to display a disabled text element
      */
     disabled?: boolean;
 }
 
-function determineTextColor({ weak, inverted, disabled }: TextProps) {
+function determineTextColor(props: TextProps) {
+    const { weak, secondary, inverted, disabled } = props;
+    if (weak !== undefined) {
+        deprecatedProperty('Text', weak, 'weak', 'secondary', 'Rename `weak` to `secondary` to remove the warning.');
+    }
+
     if (disabled) {
-        return inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_350;
+        return get(inverted ? 'semanticColors.text.disabledInverted' : 'semanticColors.text.disabled')(props);
     }
 
-    if (weak) {
-        return inverted ? Colors.AUTHENTIC_BLUE_350 : Colors.AUTHENTIC_BLUE_550;
+    if (secondary || weak) {
+        return get(inverted ? 'semanticColors.text.secondaryInverted' : 'semanticColors.text.secondary')(props);
     }
 
     if (inverted) {
-        return Colors.WHITE;
+        return get('semanticColors.text.primaryInverted')(props);
     }
 
-    return Colors.AUTHENTIC_BLUE_900;
+    return get('semanticColors.text.primary')(props);
 }
 
 const Text = styled.span.attrs({ theme })<TextProps>`
diff --git a/src/components/Text/docs/Text.mdx b/src/components/Text/docs/Text.mdx
@@ -6,9 +6,9 @@ route: /components/text
 
 import { Playground } from 'docz';
 import { ItemWrapper } from '../../../../docs/components/ItemWrapper.ts';
-import { Text } from '../Text.tsx';
-import { Colors } from '../../../essentials/Colors/Colors.ts';
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks'
+import { Text } from '../Text.tsx';
+import { TextPropsTable } from './TextPropsTable.tsx';
 
 # Text
 
@@ -18,7 +18,22 @@ The Text component is a wrapper component that will apply typography styles to t
 -   Avoid using sizes outside the given range
 -   Text default size is medium
 
-<StyledSystemLinks component="Text" supportedProps={ ['margin', 'fontSize', 'fontWeight', 'fontFamily', 'textAlign'] }/>
+## Usage
+
+By default, `Text` uses the primary color, which is the color for most interface text, whether body or headlines.
+
+Use the `secondary` color for supplemental information with diminished contrast (often, the “gray text”).
+Like form microcopy, captions, helper text, and other medium emphasized text elements.
+
+Use the `disabled` color for text in blocks, form elements, or other components that are not available
+to a user at the moment (due to either permissions, dependencies, or pre-requisites) and
+need to feature “incidental” states.
+
+## Properties
+
+<TextPropsTable />
+
+<StyledSystemLinks component="Text" supportedProps={ ['margin', 'fontSize', 'fontWeight', 'fontFamily', 'textAlign'] } mt={2}/>
 
 ## Playground
 
@@ -50,14 +65,14 @@ The Text component is a wrapper component that will apply typography styles to t
     <Text as="p" inverted fontSize={0}>paragraph inverted small</Text>
 </ItemWrapper>
 <ItemWrapper>
-    <Text as="p" weak>paragraph weak large</Text>
-    <Text as="p" weak fontSize={1}>paragraph weak medium</Text>
-    <Text as="p" weak fontSize={0}>paragraph weak small</Text>
+    <Text as="p" secondary>paragraph secondary large</Text>
+    <Text as="p" secondary fontSize={1}>paragraph secondary medium</Text>
+    <Text as="p" secondary fontSize={0}>paragraph secondary small</Text>
 </ItemWrapper>
 <ItemWrapper inverted>
-    <Text as="p" weak inverted>paragraph weak inverted large</Text>
-    <Text as="p" weak fontSize={1} inverted>paragraph weak inverted medium</Text>
-    <Text as="p" weak fontSize={0} inverted>paragraph weak inverted small</Text>
+    <Text as="p" secondary inverted>paragraph secondary inverted large</Text>
+    <Text as="p" secondary fontSize={1} inverted>paragraph secondary inverted medium</Text>
+    <Text as="p" secondary fontSize={0} inverted>paragraph secondary inverted small</Text>
 </ItemWrapper>
 <ItemWrapper>
     <Text as="p" disabled>paragraph disabled large</Text>
diff --git a/src/components/Text/docs/TextPropsTable.tsx b/src/components/Text/docs/TextPropsTable.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { PropsTable } from '../../../docs/PropsTable';
+
+export const TextPropsTable = () => {
+    const props = [
+        {
+            name: 'fontWeight',
+            type: '"normal" | "semibold" | "bold"',
+            description: 'The font-weight property specifies the weight (or boldness) of the font',
+            defaultValue: '"normal"'
+        },
+        {
+            name: 'disabled',
+            type: 'boolean',
+            description:
+                'Adjust color to display a disabled text element. Takes precedence over `inverted` and `secondary` props',
+            defaultValue: 'false'
+        },
+        {
+            name: 'inverted',
+            type: 'boolean',
+            description: 'Adjust color for display on a dark background',
+            defaultValue: 'false'
+        },
+        {
+            name: 'secondary',
+            type: 'boolean',
+            description: 'Adjust color to indicate secondary information',
+            defaultValue: 'false'
+        },
+        {
+            name: 'weak (deprecated)',
+            type: 'boolean',
+            description: 'Same as `secondary`',
+            defaultValue: 'false'
+        }
+    ];
+    return <PropsTable props={props} />;
+};
diff --git a/src/docs/StyledSystemLinks.tsx b/src/docs/StyledSystemLinks.tsx
@@ -16,7 +16,8 @@ const mapping = {
 
 export const StyledSystemLinks: FC<StyledSystemLinksProps> = ({
     component,
-    supportedProps
+    supportedProps,
+    ...rest
 }: StyledSystemLinksProps) => {
     const propToLink = (prop: string) => {
         const lowercaseProp = prop.toLowerCase();
@@ -45,7 +46,7 @@ export const StyledSystemLinks: FC<StyledSystemLinksProps> = ({
         }, []);
 
     return (
-        <Text as="p">
+        <Text {...rest} as="p">
             The {component} supports{' '}
             {supportedPropsTextParts.map((c, index) => (
                 // eslint-disable-next-line react/no-array-index-key
