-
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: 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
- Loading branch information
1 parent
fa46b8a
commit 286cca0
Showing
7 changed files
with
111 additions
and
24 deletions.
There are no files selected for viewing
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
25 changes: 25 additions & 0 deletions
25
src/components/ProcessList/ProcessListHeading/ProcessListHeading.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,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' | ||
| ) | ||
| }) | ||
| }) |
42 changes: 42 additions & 0 deletions
42
src/components/ProcessList/ProcessListHeading/ProcessListHeading.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,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> | ||
| ) | ||
| } |
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
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