feat: accept prop for heading level (#1751) (#1865)

* feat: accept prop for heading level(#1751) Co-authored-by: haworku <haworku@users.noreply.github.com>
trussworks · Jan 7, 2022 · 464756f · 464756f
1 parent 9b4c400
commit 464756f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.stories.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.stories.tsx
@@ -64,3 +64,13 @@ export const smallCounters = (): React.ReactElement => (
     <StepIndicatorStep label="Review and submit" />
   </StepIndicator>
 )
+
+export const customHeadingLevel = (): React.ReactElement => (
+  <StepIndicator headingLevel="h2">
+    <StepIndicatorStep label="Personal information" status="complete" />
+    <StepIndicatorStep label="Household status" status="complete" />
+    <StepIndicatorStep label="Supporting documents" status="current" />
+    <StepIndicatorStep label="Signature" />
+    <StepIndicatorStep label="Review and submit" />
+  </StepIndicator>
+)
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx
@@ -110,4 +110,34 @@ describe('StepIndicator component', () => {
     expect(queryByText(step3)).toBeInTheDocument()
     expect(getByRole('list')).toHaveClass('usa-step-indicator__segments')
   })
+
+  it('renders properly with a passed in heading level', () => {
+    const { getByRole, queryByTestId } = render(
+      <StepIndicator headingLevel="h2">
+        <StepIndicatorStep label={step1} status="complete" />
+        <StepIndicatorStep label={step2} status="current" />
+        <StepIndicatorStep label={step3} status="incomplete" />
+      </StepIndicator>
+    )
+
+    const stepIndicator = queryByTestId('step-indicator')
+
+    expect(stepIndicator).toBeInTheDocument()
+    expect(getByRole('heading', { level: 2 })).toBeInTheDocument()
+  })
+
+  it('renders properly with a default heading level', () => {
+    const { getByRole, queryByTestId } = render(
+      <StepIndicator>
+        <StepIndicatorStep label={step1} status="complete" />
+        <StepIndicatorStep label={step2} status="current" />
+        <StepIndicatorStep label={step3} status="incomplete" />
+      </StepIndicator>
+    )
+
+    const stepIndicator = queryByTestId('step-indicator')
+
+    expect(stepIndicator).toBeInTheDocument()
+    expect(getByRole('heading', { level: 4 })).toBeInTheDocument()
+  })
 })
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.tsx
@@ -10,6 +10,7 @@ interface StepIndicatorProps {
   className?: string
   divProps?: JSX.IntrinsicElements['div']
   listProps?: JSX.IntrinsicElements['ol']
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 }
 export const StepIndicator = (
   props: StepIndicatorProps
@@ -22,8 +23,11 @@ export const StepIndicator = (
     className,
     divProps,
     listProps,
+    headingLevel = 'h4',
   } = props
 
+  const Heading = headingLevel
+
   const classes = classnames(
     'usa-step-indicator',
     {
@@ -54,7 +58,7 @@ export const StepIndicator = (
         {children}
       </ol>
       <div className="usa-step-indicator__header">
-        <h4 className="usa-step-indicator__heading">
+        <Heading className="usa-step-indicator__heading">
           <span className="usa-step-indicator__heading-counter">
             <span className="usa-sr-only">Step</span>
             <span className="usa-step-indicator__current-step">
@@ -67,7 +71,7 @@ export const StepIndicator = (
           <span className="usa-step-indicator__heading-text">
             {currentStepLabel}
           </span>
-        </h4>
+        </Heading>
       </div>
     </div>
   )