feat: implement ProcessListHeading subcomponent

src/components/ProcessList/ProcessList/ProcessList.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { ProcessList } from './ProcessList'
 import { ProcessListItem } from '../ProcessListItem/ProcessListItem'
+import { ProcessListHeading } from '../ProcessListHeading/ProcessListHeading'
 
 export default {
   title: 'Components/ProcessList',
@@ -22,7 +23,7 @@ Source: https://designsystem.digital.gov/components/process-list
 export const processListDefault = (): React.ReactElement => (
   <ProcessList>
     <ProcessListItem>
-      <h4 className="usa-process-list__heading">Start a process</h4>
+      <ProcessListHeading type="h4">Start a process</ProcessListHeading>
       <p className="margin-top-05">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
         ipsum sed pharetra gravida, orci magna rhoncus neque.
@@ -41,7 +42,9 @@ export const processListDefault = (): React.ReactElement => (
       </ul>
     </ProcessListItem>
     <ProcessListItem>
-      <h4 className="usa-process-list__heading">Proceed to the second step</h4>
+      <ProcessListHeading type="h4">
+        Proceed to the second step
+      </ProcessListHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
         ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
@@ -51,9 +54,9 @@ export const processListDefault = (): React.ReactElement => (
       </p>
     </ProcessListItem>
     <ProcessListItem>
-      <h4 className="usa-process-list__heading">
+      <ProcessListHeading type="h4">
         Complete the step-by-step process
-      </h4>
+      </ProcessListHeading>
       <p>
         Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
         condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi.
@@ -66,47 +69,47 @@ export const processListDefault = (): React.ReactElement => (
 export const processListNoTextCustomSizing = (): React.ReactElement => (
   <ProcessList>
     <ProcessListItem className="padding-bottom-4">
-      <p className="usa-process-list__heading font-sans-xl line-height-sans-1">
+      <ProcessListHeading type="p" className="font-sans-xl line-height-sans-1">
         Start a process.
-      </p>
+      </ProcessListHeading>
     </ProcessListItem>
     <ProcessListItem className="padding-bottom-4">
-      <p className="usa-process-list__heading font-sans-xl line-height-sans-1">
+      <ProcessListHeading type="p" className="font-sans-xl line-height-sans-1">
         Proceed to the second step.
-      </p>
+      </ProcessListHeading>
     </ProcessListItem>
     <ProcessListItem>
-      <p className="usa-process-list__heading font-sans-xl line-height-sans-1">
+      <ProcessListHeading type="p" className="font-sans-xl line-height-sans-1">
         Complete the step-by-step process.
-      </p>
+      </ProcessListHeading>
     </ProcessListItem>
   </ProcessList>
 )
 
 export const processListCustomSizing = (): React.ReactElement => (
   <ProcessList>
     <ProcessListItem className="padding-bottom-4">
-      <h4 className="usa-process-list__heading font-sans-xl line-height-sans-1">
+      <ProcessListHeading type="h4" className="font-sans-xl line-height-sans-1">
         Start a process.
-      </h4>
+      </ProcessListHeading>
       <p className="font-sans-lg margin-top-1 text-light">
         Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
         condimentum.
       </p>
     </ProcessListItem>
     <ProcessListItem className="padding-bottom-4">
-      <h4 className="usa-process-list__heading font-sans-xl line-height-sans-1">
+      <ProcessListHeading type="h4" className="font-sans-xl line-height-sans-1">
         Proceed to the second step.
-      </h4>
+      </ProcessListHeading>
       <p className="font-sans-lg margin-top-1 text-light">
         Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
         volutpat.
       </p>
     </ProcessListItem>
     <ProcessListItem>
-      <h4 className="usa-process-list__heading font-sans-xl line-height-sans-1">
+      <ProcessListHeading type="h4" className="font-sans-xl line-height-sans-1">
         Complete the step-by-step process.
-      </h4>
+      </ProcessListHeading>
       <p className="font-sans-lg margin-top-1 text-light">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
         ipsum sed pharetra gravida, orci magna rhoncus neque.

src/components/ProcessList/ProcessList/ProcessList.test.tsx

@@ -4,6 +4,7 @@ import { render } from '@testing-library/react'
 
 import { ProcessList } from '../ProcessList/ProcessList'
 import { ProcessListItem } from '../ProcessListItem/ProcessListItem'
+import { ProcessListHeading } from '../ProcessListHeading/ProcessListHeading'
 
 const testListItems = [
   <li key="one">some text</li>,
@@ -37,15 +38,22 @@ describe('ProcessList component', () => {
     expect(getByRole('list')).toHaveAttribute('aria-label', 'Process list')
   })
 
-  it('renders when passed ProcessListItem', () => {
+  it('renders when passed ProcessListItem and ProcessListHeading', () => {
     const { getAllByRole } = render(
       <ProcessList>
-        <ProcessListItem>item 1</ProcessListItem>
-        <ProcessListItem>item 2</ProcessListItem>
         <ProcessListItem>
+          <ProcessListHeading type="h4">item 1</ProcessListHeading>
+          item 1
+        </ProcessListItem>
+        <ProcessListItem>
+          <ProcessListHeading type="h4">item 2</ProcessListHeading>item 2
+        </ProcessListItem>
+        <ProcessListItem>
+          <ProcessListHeading type="h4">item 3</ProcessListHeading>
           <a href="#">item 3</a>
         </ProcessListItem>
         <ProcessListItem>
+          <ProcessListHeading type="h4">item 4</ProcessListHeading>
           <ul>{testListItems}</ul>
         </ProcessListItem>
       </ProcessList>

src/components/ProcessList/ProcessListHeading/ProcessListHeading.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ProcessListHeading } from './ProcessListHeading'
+
+describe('ProcessListHeading component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(
+      <ProcessListHeading type="h4">a heading</ProcessListHeading>
+    )
+    expect(queryByTestId('processListHeading')).toBeInTheDocument
+    expect(queryByTestId('processListHeading')).toHaveClass(
+      'usa-process-list__heading'
+    )
+  })
+  it('renders with a p tag', () => {
+    const { queryByTestId } = render(
+      <ProcessListHeading type="p">a heading</ProcessListHeading>
+    )
+    expect(queryByTestId('processListHeading')).toBeInTheDocument
+    expect(queryByTestId('processListHeading')).toHaveClass(
+      'usa-process-list__heading'
+    )
+  })
+})

src/components/ProcessList/ProcessListHeading/ProcessListHeading.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface BaseProcessListHeadingProps {
+  type: string
+  className?: string
+  children?: React.ReactNode
+}
+
+interface HeadingProcessListHeadingProps extends BaseProcessListHeadingProps {
+  type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+interface ParagraphProcessListHeadingProps extends BaseProcessListHeadingProps {
+  type: 'p'
+}
+
+type ProcessListHeadingProps = HeadingProcessListHeadingProps &
+  React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLHeadingElement>,
+    HTMLHeadingElement
+  >
+
+type ProcessListParagraphHeadingProps = ParagraphProcessListHeadingProps &
+  JSX.IntrinsicElements['p']
+
+export const ProcessListHeading = ({
+  type,
+  className,
+  children,
+  ...headingProps
+}:
+  | ProcessListParagraphHeadingProps
+  | ProcessListHeadingProps): React.ReactElement => {
+  const classes = classnames('usa-process-list__heading', className)
+  const Tag = type
+  return (
+    <Tag data-testid="processListHeading" className={classes} {...headingProps}>
+      {children}
+    </Tag>
+  )
+}

src/components/ProcessList/ProcessListItem/ProcessListItem.test.tsx

@@ -3,10 +3,11 @@ import React from 'react'
 import { render } from '@testing-library/react'
 
 import { ProcessListItem } from './ProcessListItem'
+import { ProcessListHeading } from '../ProcessListHeading/ProcessListHeading'
 
 const testData = (
   <>
-    <h4 className="usa-process-list__heading">Start a process</h4>
+    <ProcessListHeading type="h4">Start a process</ProcessListHeading>
     <p className="margin-top-05">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
       ipsum sed pharetra gravida, orci magna rhoncus neque.
@@ -23,17 +24,19 @@ const testData = (
       </li>
       <li>Aliquam erat volutpat. Sed quis velit.</li>
     </ul>
-    <h4 className="usa-process-list__heading">Proceed to the second step</h4>
+    <ProcessListHeading type="h4">
+      Proceed to the second step
+    </ProcessListHeading>
     <p>
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
       ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
       lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
       volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
       facilisi. Nulla libero. Vivamus pharetra posuere sapien.
     </p>
-    <h4 className="usa-process-list__heading">
+    <ProcessListHeading type="h4">
       Complete the step-by-step process
-    </h4>
+    </ProcessListHeading>
     <p>
       Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
       condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla

src/index.ts

@@ -93,6 +93,7 @@ export { Search } from './components/Search/Search'
 /** ProcessList components */
 export { ProcessList } from './components/ProcessList/ProcessList/ProcessList'
 export { ProcessListItem } from './components/ProcessList/ProcessListItem/ProcessListItem'
+export { ProcessListHeading } from './components/ProcessList/ProcessListHeading/ProcessListHeading'
 
 export { SiteAlert } from './components/SiteAlert/SiteAlert'
 

yarn.lock

@@ -1899,8 +1899,13 @@
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
+    url-loader "^4.1.1"
     util-deprecate "^1.0.2"
-
+    webpack "4"
+    webpack-dev-middleware "^3.7.3"
+    webpack-filter-warnings-plugin "^1.2.1"
+    webpack-hot-middleware "^2.25.0"
+    webpack-virtual-modules "^0.2.2"
 "@storybook/[email protected]":
   version "6.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.2.9.tgz#f0bb44e9b2692adfbf30d7ff751c6dd44bcfe1ce"