feat: parametrized StepIndicator strings (#2707)

trussworks · Jan 17, 2024 · 94912bd · 94912bd
1 parent d03a1e1
commit 94912bd
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 17 deletions.
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.stories.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.stories.tsx
@@ -18,10 +18,32 @@ Updates users on their progress through a multi-step process.
       },
     },
   },
+  argTypes: {
+    stepText: {
+      control: 'text',
+    },
+    ofText: {
+      control: 'text',
+    },
+  },
+  args: {
+    stepText: 'Step',
+    ofText: 'of',
+  },
+}
+
+type StorybookArguments = {
+  stepText: string
+  ofText: string
 }
 
-export const defaultStepIndicator = (): React.ReactElement => (
-  <StepIndicator headingLevel="h4">
+export const defaultStepIndicator = (
+  args: StorybookArguments
+): React.ReactElement => (
+  <StepIndicator
+    headingLevel="h4"
+    ofText={args.ofText}
+    stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -30,8 +52,12 @@ export const defaultStepIndicator = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const noLabels = (): React.ReactElement => (
-  <StepIndicator showLabels={false} headingLevel="h4">
+export const noLabels = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator
+    showLabels={false}
+    headingLevel="h4"
+    ofText={args.ofText}
+    stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -40,8 +66,12 @@ export const noLabels = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const centered = (): React.ReactElement => (
-  <StepIndicator centered headingLevel="h4">
+export const centered = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator
+    centered
+    headingLevel="h4"
+    ofText={args.ofText}
+    stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -50,8 +80,12 @@ export const centered = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const counters = (): React.ReactElement => (
-  <StepIndicator counters="default" headingLevel="h4">
+export const counters = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator
+    counters="default"
+    headingLevel="h4"
+    ofText={args.ofText}
+    stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -60,8 +94,12 @@ export const counters = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const smallCounters = (): React.ReactElement => (
-  <StepIndicator counters="small" headingLevel="h4">
+export const smallCounters = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator
+    counters="small"
+    headingLevel="h4"
+    ofText={args.ofText}
+    stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -70,8 +108,13 @@ export const smallCounters = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const differentHeadingLevel = (): React.ReactElement => (
-  <StepIndicator headingLevel="h2">
+export const differentHeadingLevel = (
+  args: StorybookArguments
+): React.ReactElement => (
+  <StepIndicator
+    headingLevel="h2"
+    ofText={args.ofText}
+    stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />

diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, within } from '@testing-library/react'
 import { StepIndicatorStep } from '../StepIndicatorStep/StepIndicatorStep'
 import { StepIndicator } from '../StepIndicator/StepIndicator'
 import { HeadingLevel } from '../../../types/headingLevel'
@@ -14,22 +14,27 @@ describe('StepIndicator component', () => {
   })
 
   it('renders without errors', () => {
-    const { getByRole, queryByText, queryAllByText, queryByTestId } = render(
+    const { getByRole, queryByText, queryAllByText, getByTestId } = render(
       <StepIndicator headingLevel="h4">
         <StepIndicatorStep label={step1} status="complete" />
         <StepIndicatorStep label={step2} status="current" />
         <StepIndicatorStep label={step3} status="incomplete" />
       </StepIndicator>
     )
 
-    const stepIndicator = queryByTestId('step-indicator')
+    const stepIndicator = getByTestId('step-indicator')
 
     expect(stepIndicator).toBeInTheDocument()
     expect(stepIndicator).toHaveClass('usa-step-indicator')
     expect(queryByText(step1)).toBeInTheDocument()
     expect(queryAllByText(step2)).toHaveLength(2)
     expect(queryByText(step3)).toBeInTheDocument()
     expect(getByRole('list')).toHaveClass('usa-step-indicator__segments')
+    const stepSrOnly = within(stepIndicator).queryByText('Step')
+    expect(stepSrOnly).toHaveClass('usa-sr-only')
+    const totalSteps = queryByText(`of 3`)
+    expect(totalSteps).toBeInTheDocument()
+    expect(totalSteps).toHaveClass('usa-step-indicator__total-steps')
   })
 
   it('renders properly with no labels', () => {
@@ -163,4 +168,32 @@ describe('StepIndicator component', () => {
       'usa-step-indicator__heading my-custom-className'
     )
   })
+
+  it("renders properly with translatable 'of' string", () => {
+    const ofText = 'de'
+    const { queryByText } = render(
+      <StepIndicator headingLevel="h4" ofText={ofText}>
+        <StepIndicatorStep label={step1} status="complete" />
+        <StepIndicatorStep label={step2} status="current" />
+        <StepIndicatorStep label={step3} status="incomplete" />
+      </StepIndicator>
+    )
+    const totalSteps = queryByText(`${ofText} 3`)
+    expect(totalSteps).toBeInTheDocument()
+    expect(totalSteps).toHaveClass('usa-step-indicator__total-steps')
+  })
+
+  it("renders properly with translatable 'step' string", () => {
+    const stepText = 'Paso'
+    const { getByTestId } = render(
+      <StepIndicator headingLevel="h4" stepText={stepText}>
+        <StepIndicatorStep label={step1} status="complete" />
+        <StepIndicatorStep label={step2} status="current" />
+        <StepIndicatorStep label={step3} status="incomplete" />
+      </StepIndicator>
+    )
+    const stepIndicator = getByTestId('step-indicator')
+    const stepSrOnly = within(stepIndicator).queryByText(stepText)
+    expect(stepSrOnly).toHaveClass('usa-sr-only')
+  })
 })
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.tsx
@@ -16,6 +16,8 @@ type StepIndicatorProps = {
     HTMLHeadingElement
   >
   headingLevel: HeadingLevel
+  stepText?: string
+  ofText?: string
 }
 export const StepIndicator = (
   props: StepIndicatorProps
@@ -30,6 +32,8 @@ export const StepIndicator = (
     listProps,
     headingProps,
     headingLevel,
+    stepText = 'Step',
+    ofText = 'of',
   } = props
 
   const Heading = headingLevel
@@ -84,12 +88,14 @@ export const StepIndicator = (
       <div className="usa-step-indicator__header">
         <Heading className={headingClasses} {...remainingHeadingProps}>
           <span className="usa-step-indicator__heading-counter">
-            <span className="usa-sr-only">Step</span>
+            <span className="usa-sr-only" data-testid="step-text">
+              {stepText}
+            </span>
             <span className="usa-step-indicator__current-step">
               {currentStepNumber}
             </span>
             &nbsp;
-            <span className="usa-step-indicator__total-steps">{`of ${totalNumberOfSteps}`}</span>
+            <span className="usa-step-indicator__total-steps">{`${ofText} ${totalNumberOfSteps}`}</span>
             &nbsp;
           </span>
           <span className="usa-step-indicator__heading-text">