-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: New Component ProcessList MVP (#1107)
* 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 * Remove whitespace from package.json * Remove weird whitespace addition to yarn.lock * Regenerate yarn.lock * Regenerate yarn.lock
- Loading branch information
1 parent
117a6c7
commit 1bc0f93
Showing
7 changed files
with
313 additions
and
18 deletions.
There are no files selected for viewing
116 changes: 116 additions & 0 deletions
116
src/components/ProcessList/ProcessList/ProcessList.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) |
56 changes: 56 additions & 0 deletions
56
src/components/ProcessList/ProcessList/ProcessList.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
74 changes: 74 additions & 0 deletions
74
src/components/ProcessList/ProcessListItem/ProcessListItem.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| ) | ||
| }) | ||
| }) |
22 changes: 22 additions & 0 deletions
22
src/components/ProcessList/ProcessListItem/ProcessListItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters