feat(text): adding the disabled text color, fixing inverted text colors (#96)

Co-authored-by: Lloyd Francis <lloyd.francis@free-now.com>

Author: lloydaf

src/components/Text/Text.spec.tsx

@@ -16,10 +16,31 @@ describe('Text', () => {
         expect(render(<Text>Content</Text>).getByText('Content')).toBeInTheDocument();
     });
 
-    it('has a dim color if weak property is set', () => {
-        expect(render(<Text weak />).container.firstChild).toHaveStyle(`
-            color: ${Colors.AUTHENTIC_BLUE_550};
-        `);
+    describe('if the weak property is set', () => {
+        it('has a dim color', () => {
+            expect(render(<Text weak />).container.firstChild).toHaveStyle(`
+                color: ${Colors.AUTHENTIC_BLUE_550};
+            `);
+        });
+
+        it('has a dimmer color if inverted', () => {
+            expect(render(<Text weak inverted />).container.firstChild).toHaveStyle(`
+                color: ${Colors.AUTHENTIC_BLUE_350};
+            `);
+        });
+    });
+
+    describe('if the disabled property is set', () => {
+        it('has the disabled color', () => {
+            expect(render(<Text disabled />).container.firstChild).toHaveStyle(`
+                color: ${Colors.AUTHENTIC_BLUE_350};
+            `);
+        });
+        it('has a stronger disabled color if inverted', () => {
+            expect(render(<Text disabled inverted />).container.firstChild).toHaveStyle(`
+                color: ${Colors.AUTHENTIC_BLUE_550};
+            `);
+        });
     });
 
     it('has a bright color if inverted property is set', () => {

src/components/Text/Text.tsx

@@ -35,11 +35,19 @@ interface TextProps
      * Adjust color to indicate secondary information
      */
     weak?: boolean;
+    /**
+     * Adjust color to display a disabled text element
+     */
+    disabled?: boolean;
 }
 
-function determineTextColor({ weak, inverted }: TextProps) {
-    if (weak || (weak && inverted)) {
-        return Colors.AUTHENTIC_BLUE_550;
+function determineTextColor({ weak, inverted, disabled }: TextProps) {
+    if (disabled) {
+        return inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_350;
+    }
+
+    if (weak) {
+        return inverted ? Colors.AUTHENTIC_BLUE_350 : Colors.AUTHENTIC_BLUE_550;
     }
 
     if (inverted) {

src/components/Text/docs/Text.mdx

@@ -59,3 +59,13 @@ The Text component is a wrapper component that will apply typography styles to t
     <Text as="p" weak fontSize={1} inverted>paragraph weak inverted medium</Text>
     <Text as="p" weak fontSize={0} inverted>paragraph weak inverted small</Text>
 </ItemWrapper>
+<ItemWrapper>
+    <Text as="p" disabled>paragraph disabled large</Text>
+    <Text as="p" disabled fontSize={1}>paragraph disabled medium</Text>
+    <Text as="p" disabled fontSize={0}>paragraph disabled small</Text>
+</ItemWrapper>
+<ItemWrapper inverted>
+    <Text as="p" disabled inverted>paragraph disabled inverted large</Text>
+    <Text as="p" disabled fontSize={1} inverted>paragraph disabled inverted medium</Text>
+    <Text as="p" disabled fontSize={0} inverted>paragraph disabled inverted small</Text>
+</ItemWrapper>