From 964e34cb831554f5951973a62a5d4959357daff3 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Tue, 27 Apr 2021 16:54:04 -0700
Subject: [PATCH] feat: implement ProcessListHeading subcomponent (#1162)

* Create subfolders and files, write and pass one test each for ProcessList and ProcessListItem components, rendering some text in a div in Storybook

* Import ProcessListItem to the stories file and render some text in a div on Storybook

* Add minimum Storybook examples as skeletons, create props interfaces, update tests

* Disable anchor is valid check in test files, add test checking for ability to pass in attributes

* Export ProcessList components from index.ts

* Remove unnecessary fragment

* Add ProcessListHeading to ProcessList test data, use ProcessListHeading in default storybook example

* Use ProcessListHeading custom component in storybook

* Remove unnecessary childwithprops from CustomHeadingProps type declarations, export ProcessListHeading from index.ts

* Accidentally left off an & T

* Make changes to ProcessListHeading based on PR feedback, update tests and syntax

* Remove whitespace from package.json

* Remove weird whitespace addition to yarn.lock

* Regenerate yarn.lock

* Merge changes from ProcessList

* Regenerate yarn.lock

* Replace mistakenly deleted period from stories file
---
 .../ProcessList/ProcessList.stories.tsx       | 35 +++++++++-------
 .../ProcessList/ProcessList.test.tsx          | 14 +++++--
 .../ProcessListHeading.test.tsx               | 25 +++++++++++
 .../ProcessListHeading/ProcessListHeading.tsx | 42 +++++++++++++++++++
 .../ProcessListItem/ProcessListItem.test.tsx  | 11 +++--
 src/index.ts                                  |  1 +
 yarn.lock                                     |  7 +++-
 7 files changed, 111 insertions(+), 24 deletions(-)
 create mode 100644 src/components/ProcessList/ProcessListHeading/ProcessListHeading.test.tsx
 create mode 100644 src/components/ProcessList/ProcessListHeading/ProcessListHeading.tsx

diff --git a/src/components/ProcessList/ProcessList/ProcessList.stories.tsx b/src/components/ProcessList/ProcessList/ProcessList.stories.tsx
index f5b0a5edbe..f2370e78ce 100644
--- a/src/components/ProcessList/ProcessList/ProcessList.stories.tsx
+++ b/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,19 +69,19 @@ 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>
 )
@@ -86,27 +89,27 @@ export const processListNoTextCustomSizing = (): React.ReactElement => (
 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.
diff --git a/src/components/ProcessList/ProcessList/ProcessList.test.tsx b/src/components/ProcessList/ProcessList/ProcessList.test.tsx
index d67897dece..5f39251f9a 100644
--- a/src/components/ProcessList/ProcessList/ProcessList.test.tsx
+++ b/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>
diff --git a/src/components/ProcessList/ProcessListHeading/ProcessListHeading.test.tsx b/src/components/ProcessList/ProcessListHeading/ProcessListHeading.test.tsx
new file mode 100644
index 0000000000..69f64bcfd7
--- /dev/null
+++ b/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'
+    )
+  })
+})
diff --git a/src/components/ProcessList/ProcessListHeading/ProcessListHeading.tsx b/src/components/ProcessList/ProcessListHeading/ProcessListHeading.tsx
new file mode 100644
index 0000000000..d61fd80eca
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/ProcessList/ProcessListItem/ProcessListItem.test.tsx b/src/components/ProcessList/ProcessListItem/ProcessListItem.test.tsx
index ad18e5c2c9..17627332c6 100644
--- a/src/components/ProcessList/ProcessListItem/ProcessListItem.test.tsx
+++ b/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,7 +24,9 @@ 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
@@ -31,9 +34,9 @@ const testData = (
       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
diff --git a/src/index.ts b/src/index.ts
index 7eee89de33..35f2dffa78 100644
--- a/src/index.ts
+++ b/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'
 
diff --git a/yarn.lock b/yarn.lock
index 304318e108..b1ea3212d1 100644
--- a/yarn.lock
+++ b/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/client-api@6.2.9":
   version "6.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.2.9.tgz#f0bb44e9b2692adfbf30d7ff751c6dd44bcfe1ce"