feat: New Component ProcessList MVP

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

@@ -0,0 +1,116 @@
+import React from 'react'
+
+import { ProcessList } from './ProcessList'
+import { ProcessListItem } from '../ProcessListItem/ProcessListItem'
+
+export default {
+  title: 'Components/ProcessList',
+  component: ProcessList,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 ProcessList component
+
+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>
+      <p className="margin-top-05">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+        ipsum sed pharetra gravida, orci magna rhoncus neque.
+      </p>
+      <ul>
+        <li>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
+          commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
+          pulvinar odio lorem non turpis.
+        </li>
+        <li>
+          Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+          condimentum.
+        </li>
+        <li>Aliquam erat volutpat. Sed quis velit.</li>
+      </ul>
+    </ProcessListItem>
+    <ProcessListItem>
+      <h4 className="usa-process-list__heading">Proceed to the second step</h4>
+      <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>
+    </ProcessListItem>
+    <ProcessListItem>
+      <h4 className="usa-process-list__heading">
+        Complete the step-by-step process
+      </h4>
+      <p>
+        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>
+    </ProcessListItem>
+  </ProcessList>
+)
+
+export const processListNoTextCustomSizing = (): React.ReactElement => (
+  <ProcessList>
+    <ProcessListItem className="padding-bottom-4">
+      <p className="usa-process-list__heading font-sans-xl line-height-sans-1">
+        Start a process.
+      </p>
+    </ProcessListItem>
+    <ProcessListItem className="padding-bottom-4">
+      <p className="usa-process-list__heading font-sans-xl line-height-sans-1">
+        Proceed to the second step.
+      </p>
+    </ProcessListItem>
+    <ProcessListItem>
+      <p className="usa-process-list__heading font-sans-xl line-height-sans-1">
+        Complete the step-by-step process.
+      </p>
+    </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">
+        Start a process.
+      </h4>
+      <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">
+        Proceed to the second step.
+      </h4>
+      <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">
+        Complete the step-by-step process.
+      </h4>
+      <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.
+      </p>
+    </ProcessListItem>
+  </ProcessList>
+)

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

@@ -0,0 +1,56 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ProcessList } from '../ProcessList/ProcessList'
+import { ProcessListItem } from '../ProcessListItem/ProcessListItem'
+
+const testListItems = [
+  <li key="one">some text</li>,
+  <li key="two">some more text</li>,
+  <li key="three">third item</li>,
+]
+
+describe('ProcessList component', () => {
+  it('renders without errors', () => {
+    const { getAllByRole, queryByText } = render(
+      <ProcessList>{testListItems}</ProcessList>
+    )
+
+    expect(queryByText('third item')).toBeInTheDocument()
+    expect(getAllByRole('listitem')).toHaveLength(3)
+  })
+
+  it('accepts a class name', () => {
+    const { getByRole } = render(
+      <ProcessList className="custom-class-name">{testListItems}</ProcessList>
+    )
+
+    expect(getByRole('list')).toHaveClass('usa-process-list custom-class-name')
+  })
+
+  it('accepts attributes passed in as props', () => {
+    const { getByRole } = render(
+      <ProcessList aria-label="Process list">{testListItems}</ProcessList>
+    )
+
+    expect(getByRole('list')).toHaveAttribute('aria-label', 'Process list')
+  })
+
+  it('renders when passed ProcessListItem', () => {
+    const { getAllByRole } = render(
+      <ProcessList>
+        <ProcessListItem>item 1</ProcessListItem>
+        <ProcessListItem>item 2</ProcessListItem>
+        <ProcessListItem>
+          <a href="#">item 3</a>
+        </ProcessListItem>
+        <ProcessListItem>
+          <ul>{testListItems}</ul>
+        </ProcessListItem>
+      </ProcessList>
+    )
+    expect(getAllByRole('list')).toHaveLength(2)
+    expect(getAllByRole('listitem')).toHaveLength(7)
+  })
+})

src/components/ProcessList/ProcessList/ProcessList.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classnames from 'classnames'
+import { ProcessListItemProps } from '../ProcessListItem/ProcessListItem'
+
+interface ProcessListProps {
+  className?: string
+  children: React.ReactElement<ProcessListItemProps>[]
+}
+
+export const ProcessList = ({
+  className,
+  children,
+  ...listProps
+}: ProcessListProps & JSX.IntrinsicElements['ol']): React.ReactElement => {
+  const classes = classnames('usa-process-list', className)
+  return (
+    <ol className={classes} {...listProps}>
+      {children}
+    </ol>
+  )
+}
+
+export default ProcessList

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

@@ -0,0 +1,74 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ProcessListItem } from './ProcessListItem'
+
+const testData = (
+  <>
+    <h4 className="usa-process-list__heading">Start a process</h4>
+    <p className="margin-top-05">
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+      ipsum sed pharetra gravida, orci magna rhoncus neque.
+    </p>
+    <ul>
+      <li>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
+        ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
+        lorem non turpis.
+      </li>
+      <li>
+        Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
+        condimentum.
+      </li>
+      <li>Aliquam erat volutpat. Sed quis velit.</li>
+    </ul>
+    <h4 className="usa-process-list__heading">Proceed to the second step</h4>
+    <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">
+      Complete the step-by-step process
+    </h4>
+    <p>
+      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>
+  </>
+)
+
+describe('ProcessListItem component', () => {
+  it('renders without errors', () => {
+    const { getByRole } = render(<ProcessListItem>some text</ProcessListItem>)
+
+    const listItem = getByRole('listitem')
+    expect(listItem).toBeInTheDocument()
+    expect(listItem).toHaveClass('usa-process-list__item')
+  })
+
+  it('renders children passed in', () => {
+    const { getAllByRole } = render(
+      <ProcessListItem>{testData}</ProcessListItem>
+    )
+
+    expect(getAllByRole('listitem')).toHaveLength(4)
+    expect(getAllByRole('heading')).toHaveLength(3)
+  })
+
+  it('accepts a custom className', () => {
+    const { getByRole } = render(
+      <ProcessListItem className="custom-class-name">
+        <a href="#">link text</a>
+      </ProcessListItem>
+    )
+
+    expect(getByRole('listitem')).toHaveClass(
+      'usa-process-list__item custom-class-name'
+    )
+  })
+})

src/components/ProcessList/ProcessListItem/ProcessListItem.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export interface ProcessListItemProps {
+  className?: string
+  children?: React.ReactNode
+}
+
+export const ProcessListItem = ({
+  className,
+  children,
+  ...liProps
+}: ProcessListItemProps & JSX.IntrinsicElements['li']): React.ReactElement => {
+  const liClasses = classnames('usa-process-list__item', className)
+  return (
+    <li className={liClasses} {...liProps}>
+      {children}
+    </li>
+  )
+}
+
+export default ProcessListItem

src/index.ts

@@ -88,6 +88,10 @@ export { StepIndicatorStep } from './components/stepindicator/StepIndicatorStep/
 
 export { Search } from './components/Search/Search'
 
+/** ProcessList components */
+export { ProcessList } from './components/ProcessList/ProcessList/ProcessList'
+export { ProcessListItem } from './components/ProcessList/ProcessListItem/ProcessListItem'
+
 /** Truss-designed components */
 export {
   Modal,

yarn.lock

@@ -13943,11 +13943,11 @@ use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-
 uswds@2.10.3:
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.10.3.tgz#16d34cee81897762d6d69d3ac83aa55129826fa6"
   integrity sha512-krNRzx1jRzOJpuH/qtmQhd5zxnXTaDVqrPNYT99sJbxzWUqjb1zZHh3jFNo+xKDpNuiO0XMPwZwlaSp2YdZ3Ag==
+
   dependencies:
     classlist-polyfill "^1.0.3"
     del "^6.0.0"