Merge pull request #593 from department-of-veterans-affairs/feature/5…

…70-narin-text-stories [Feature] Text component: Update stories
department-of-veterans-affairs · Nov 20, 2024 · 74fb2a8 · 74fb2a8
2 parents 44fed65 + bc66897
commit 74fb2a8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/packages/components/src/components/Text/Text.stories.tsx b/packages/components/src/components/Text/Text.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { View } from 'react-native'
 import React from 'react'
 
-import { Text, TextProps } from './Text'
+import { Text, TextProps, baseToneValues } from './Text'
 import { generateDocs } from '../../utils/storybook'
 
 const meta: Meta<TextProps> = {
@@ -24,10 +24,15 @@ const meta: Meta<TextProps> = {
   parameters: {
     docs: generateDocs({
       name: 'Text',
-      // docUrl:
-      //   'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Alerts%20and%20Progress/Text',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Typography/Text',
     }),
   },
+  argTypes: {
+    /** The foollowing conditions hide the tone and size props if variant's value is 'display' */
+    tone: { if: { arg: 'variant', neq: 'display' } },
+    size: { if: { arg: 'variant', neq: 'display' } },
+  },
 }
 
 export default meta
@@ -52,6 +57,9 @@ export const Body: Story = {
 const children = 'Lorem ipsum dolor sit amet.'
 
 export const _Heading: Story = {
+  argTypes: {
+    tone: { control: 'radio', options: baseToneValues },
+  },
   args: {
     children,
     variant: 'heading',

diff --git a/packages/components/src/components/Text/Text.tsx b/packages/components/src/components/Text/Text.tsx
@@ -10,10 +10,19 @@ import { SpacerSize } from '../Spacer/Spacer'
 import { getSpacingToken, useTheme } from '../../utils'
 
 type TextSizes = 'xs' | 'sm' | 'md' | 'lg'
-type BaseTones = 'default' | 'subtle' | 'inverse'
+
+/** Declaring the BaseTones type like this allows us to reference this array in Text.stories */
+export const baseToneValues = ['default', 'subtle', 'inverse'] as const
+
+type BaseTones = (typeof baseToneValues)[number]
+
 type BodyTones = BaseTones | 'error'
 
 type BodyProps = {
+  /**
+   * Optionally set bottom spacing to none if typography style default isn't desired
+   **/
+  bottomSpacing?: 'none'
   /** Size: xs, sm, md, or lg. Defaults to 'md' for body and heading */
   size?: TextSizes
   /** Text color: default, subtle, inverse, error. Defaults to vadsColorForegroundDefault. */
@@ -23,6 +32,11 @@ type BodyProps = {
 }
 
 type HeadingProps = {
+  /**
+   * Optional bottom spacing if typography style default isn't desired.
+   * @see {@link SpacerSize} for possible values
+   **/
+  bottomSpacing?: SpacerSize
   /** Size: xs, sm, md, or lg. Defaults to 'md' for body and heading */
   size?: TextSizes
   /** Text color: default, subtle, inverse. Defaults to vadsColorForegroundDefault. */
@@ -32,6 +46,11 @@ type HeadingProps = {
 }
 
 type DisplayProps = {
+  /**
+   * Optional bottom spacing if typography style default isn't desired.
+   * @see {@link SpacerSize} for possible values
+   **/
+  bottomSpacing?: SpacerSize
   size?: never
   /** Text color: default, subtle, inverse. Defaults to vadsColorForegroundDefault. */
   tone?: BaseTones
@@ -43,11 +62,6 @@ export type TextProps = {
   children: React.ReactNode
   /** AccessibilityLabel for the text */
   a11yLabel?: string
-  /**
-   * Optional bottom spacing if typography style default isn't desired.
-   * @see {@link SpacerSize} for possible values
-   **/
-  bottomSpacing?: SpacerSize
 } & (BodyProps | HeadingProps | DisplayProps)
 
 export const Text: FC<TextProps> = ({