feat: Add ability to pass through heading props (#1895)

* Add ability to pass through heading props - Ensure classNames are not destructive when passed Co-authored-by: haworku <[email protected]>
trussworks · Apr 5, 2022 · 3830814 · 3830814
1 parent 9e33226
commit 3830814
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx
@@ -140,4 +140,26 @@ describe('StepIndicator component', () => {
     expect(stepIndicator).toBeInTheDocument()
     expect(getByRole('heading', { level: 4 })).toBeInTheDocument()
   })
+
+  it('allows props to be passed through to the heading element', () => {
+    const { queryByRole, queryByTestId } = render(
+      <StepIndicator
+        headingProps={{ id: 'my-id', className: 'my-custom-className' }}
+      >
+        <StepIndicatorStep label={step1} status="complete" />
+        <StepIndicatorStep label={step2} status="current" />
+        <StepIndicatorStep label={step3} status="incomplete" />
+      </StepIndicator>
+    )
+
+    const stepIndicator = queryByTestId('step-indicator')
+    const heading = queryByRole('heading', { level: 4 })
+
+    expect(stepIndicator).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'my-id')
+    expect(heading).toHaveClass(
+      'usa-step-indicator__heading my-custom-className'
+    )
+  })
 })
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.tsx
@@ -10,6 +10,10 @@ interface StepIndicatorProps {
   className?: string
   divProps?: JSX.IntrinsicElements['div']
   listProps?: JSX.IntrinsicElements['ol']
+  headingProps?: React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLHeadingElement>,
+    HTMLHeadingElement
+  >
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 }
 export const StepIndicator = (
@@ -23,20 +27,39 @@ export const StepIndicator = (
     className,
     divProps,
     listProps,
+    headingProps,
     headingLevel = 'h4',
   } = props
 
   const Heading = headingLevel
 
-  const classes = classnames(
+  const { className: additionalDivClasses, ...remainingDivProps } =
+    divProps || {}
+  const { className: additionalListClasses, ...remainingListProps } =
+    listProps || {}
+  const { className: additionalHeadingClasses, ...remainingHeadingProps } =
+    headingProps || {}
+
+  const divClasses = classnames(
     'usa-step-indicator',
     {
       'usa-step-indicator--no-labels': !showLabels,
       'usa-step-indicator--counters': counters === 'default',
       'usa-step-indicator--counters-sm': counters === 'small',
       'usa-step-indicator--center': centered,
     },
-    className
+    className,
+    additionalDivClasses
+  )
+
+  const listClasses = classnames(
+    'usa-step-indicator__segments',
+    additionalListClasses
+  )
+
+  const headingClasses = classnames(
+    'usa-step-indicator__heading',
+    additionalHeadingClasses
   )
 
   const findCurrentStepIndex = (): number => {
@@ -50,15 +73,16 @@ export const StepIndicator = (
 
   return (
     <div
-      className={classes}
+      className={divClasses}
       data-testid="step-indicator"
       aria-label="progress"
-      {...divProps}>
-      <ol className="usa-step-indicator__segments" {...listProps}>
+      {...remainingDivProps}
+    >
+      <ol className={listClasses} {...remainingListProps}>
         {children}
       </ol>
       <div className="usa-step-indicator__header">
-        <Heading className="usa-step-indicator__heading">
+        <Heading className={headingClasses} {...remainingHeadingProps}>
           <span className="usa-step-indicator__heading-counter">
             <span className="usa-sr-only">Step</span>
             <span className="usa-step-indicator__current-step">