feat: New Component ProcessList MVP #1107

SirenaBorracha · 2021-04-09T00:52:18Z

Summary

This PR adds the USWDS ProcessList component in an MVP state.

Related Issues or PRs

An enhancement that we may want to add as part of this GitHub issue would be to create a ProcessListItemHeader subcomponent. This would allow us to offer an out of the box way for our users to pass a heading that would automatically be styled by the usa-process-list__heading class irrespective of what element type the user passed.

This enhancement would meet the USWDS Accessibility guideline, "Use semantic heading levels," that states, "Though our default code uses an <h4>, use the correct heading level with the class name usa-process-list__heading in your own implementation."

How To Test

Check out this branch and run yarn test to execute tests and yarn storybook to see the new component in action.

Alternatively, you can scroll to the bottom of this page and click "Show environments" on the right above the comment input box to access this component in Storybook.

Screenshots (optional)

Default

No text, custom sizing

Custom Sizing

…List and ProcessListItem components, rendering some text in a div in Storybook

…div on Storybook

… update tests

…ility to pass in attributes

SirenaBorracha · 2021-04-09T00:56:02Z

@haworku and @brandonlenz, @suzubara requested that I get your opinions on whether or not we care to provide a ProcessListItemHeader subcomponent. As is, ProcessList is flexible but does not provide all of the tools that our users might benefit from.

Do either of you feel strongly in favor of adding the header subcomponent?

brandonlenz

@haworku and @brandonlenz, @suzubara requested that I get your opinions on whether or not we care to provide a ProcessListItemHeader subcomponent. As is, ProcessList is flexible but does not provide all of the tools that our users might benefit from.

Do either of you feel strongly in favor of adding the header subcomponent?

Personally, I'm for creating the subcomponent. Since it should be able to be any type of heading (or p) tag, we could expose a variant prop or similar to allow the implementer to select what type of markup should be used.

brandonlenz · 2021-04-12T16:44:55Z

src/components/ProcessList/ProcessList/ProcessList.tsx

+}: ProcessListProps & JSX.IntrinsicElements['ol']): React.ReactElement => {
+  const classes = classnames('usa-process-list', className)
+  return (
+    <>


I don't think this Fragment is needed

brandonlenz

One small thing I noticed. This looks really good!

I added a separate comment about the header.

brandonlenz · 2021-04-12T17:43:02Z

@haworku and @brandonlenz, @suzubara requested that I get your opinions on whether or not we care to provide a ProcessListItemHeader subcomponent. As is, ProcessList is flexible but does not provide all of the tools that our users might benefit from.
Do either of you feel strongly in favor of adding the header subcomponent?

Personally, I'm for creating the subcomponent. Since it should be able to be any type of heading (or p) tag, we could expose a variant prop or similar to allow the implementer to select what type of markup should be used.

Maybe a generic type prop so the interface might looks something like:

<ProcessListHeading<'h1'>>"Heading text"</ProcessListHeading>.

Disclaimer ⚠️ I have not tried that, just thought it might be nicer than having a `headerType` prop if it works

edit: eh, yea this may not be a good use for a generic param since you constrain the values of the generic via extends rather than explicit type definition.

SirenaBorracha · 2021-04-12T19:11:40Z

Created issue #1134 for the ProcessListItemHeader subcomponent

…orks/react-uswds into ak-new-component-process-list-979

suzubara · 2021-04-23T18:14:15Z

yarn.lock

 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==
+


this file shouldn't have any changes

yarn.lock

brandonlenz

Awesome job!

## [1.17.0](1.16.0...1.17.0) (2021-05-05) ### Features * Checkbox Tile Variant ([#1104](#1104)) ([9936c4a](9936c4a)) * Implement ProcessListHeading subcomponent ([#1162](#1162)) ([964e34c](964e34c)) * New Component ProcessList MVP ([#1107](#1107)) ([1bc0f93](1bc0f93)) * New Component SiteAlert ([#1099](#1099)) ([c1e88e0](c1e88e0)) * New Component SummaryBox ([#1098](#1098)) ([b2279b4](b2279b4)) * Radio Button Tile Variant ([#1101](#1101)) ([a2f40a0](a2f40a0)) * Update Grid components to render any type of element ([#1166](#1166)) ([07468c8](07468c8)), closes [#1194](#1194) * Update Search component to support i18n ([#1192](#1192)) ([5241d15](5241d15)) * Update Table to 2.10.0 implementation ([#1110](#1110)) ([117a6c7](117a6c7))

SirenaBorracha added 4 commits April 7, 2021 14:37

Create subfolders and files, write and pass one test each for Process…

0b3c20b

…List and ProcessListItem components, rendering some text in a div in Storybook

Import ProcessListItem to the stories file and render some text in a …

5d493e3

…div on Storybook

Add minimum Storybook examples as skeletons, create props interfaces,…

b360aa1

… update tests

Disable anchor is valid check in test files, add test checking for ab…

c97724c

…ility to pass in attributes

SirenaBorracha requested review from ahobson, brandonlenz, gidjin, haworku, sarboc, suzubara and tinyels as code owners April 9, 2021 00:52

trussworks-infra-zz temporarily deployed to storybook April 9, 2021 00:55 Inactive

brandonlenz added the status: hold merge This indicates not to merge the PR as there is a development dependency/other reason to hold off. label Apr 9, 2021

brandonlenz added this to the USWDS 2.10.0 milestone Apr 9, 2021

SirenaBorracha linked an issue Apr 9, 2021 that may be closed by this pull request

New Component: Process list #979

Closed

SirenaBorracha added 2 commits April 9, 2021 17:06

Export ProcessList components from index.ts

89f8b4c

Merge branch 'main' into ak-new-component-process-list-979

2beaa1b

trussworks-infra-zz temporarily deployed to storybook April 10, 2021 00:10 Inactive

brandonlenz reviewed Apr 12, 2021

View reviewed changes

Merge branch 'main' into ak-new-component-process-list-979

ccf9db3

trussworks-infra-zz temporarily deployed to storybook April 12, 2021 18:13 Inactive

Remove unnecessary fragment

4d7a45b

trussworks-infra-zz temporarily deployed to storybook April 12, 2021 18:22 Inactive

SirenaBorracha mentioned this pull request Apr 12, 2021

[feat] Implement ProcessList subcomponent #1134

Closed

Merge branch 'main' into ak-new-component-process-list-979

a2039b5

trussworks-infra-zz temporarily deployed to storybook April 13, 2021 20:01 Inactive

SirenaBorracha added 2 commits April 19, 2021 17:56

Merge branch 'main' into ak-new-component-process-list-979

7a0dc41

Merge branch 'ak-new-component-process-list-979' of github.com:trussw…

3aac2a1

…orks/react-uswds into ak-new-component-process-list-979

SirenaBorracha mentioned this pull request Apr 20, 2021

feat: implement ProcessListHeading subcomponent #1162

Merged

Merge branch 'main' into ak-new-component-process-list-979

1b98a3b

trussworks-infra-zz temporarily deployed to storybook April 20, 2021 17:15 Inactive

brandonlenz removed the status: hold merge This indicates not to merge the PR as there is a development dependency/other reason to hold off. label Apr 20, 2021

Merge branch 'main' into ak-new-component-process-list-979

9c8ad71

trussworks-infra-zz temporarily deployed to storybook April 20, 2021 19:41 Inactive

SirenaBorracha added 2 commits April 22, 2021 17:10

Merge branch 'main' into ak-new-component-process-list-979

dae186b

Remove whitespace from package.json

13c14c7

trussworks-infra-zz temporarily deployed to storybook April 23, 2021 00:15 Inactive

suzubara previously approved these changes Apr 23, 2021

View reviewed changes

SirenaBorracha added 2 commits April 26, 2021 14:29

Merge branch 'main' into ak-new-component-process-list-979

64e52c5

Remove weird whitespace addition to yarn.lock

04b6b65

SirenaBorracha dismissed suzubara’s stale review via 04b6b65 April 26, 2021 21:32

trussworks-infra-zz temporarily deployed to storybook April 26, 2021 21:36 Inactive

brandonlenz requested changes Apr 26, 2021

View reviewed changes

yarn.lock Outdated Show resolved Hide resolved

Regenerate yarn.lock

4e5d5fb

trussworks-infra-zz temporarily deployed to storybook April 26, 2021 23:05 Inactive

SirenaBorracha added 2 commits April 27, 2021 11:36

Merge branch 'main' into ak-new-component-process-list-979

8432d6c

Regenerate yarn.lock

c87f6f9

trussworks-infra-zz temporarily deployed to storybook April 27, 2021 18:43 Inactive

brandonlenz self-requested a review April 27, 2021 20:33

brandonlenz approved these changes Apr 27, 2021

View reviewed changes

SirenaBorracha merged commit 1bc0f93 into main Apr 27, 2021

SirenaBorracha deleted the ak-new-component-process-list-979 branch April 27, 2021 20:57

SirenaBorracha mentioned this pull request May 5, 2021

chore(release): 1.17.0 #1211

Merged

brandonlenz pushed a commit that referenced this pull request May 12, 2021

feat: New Component ProcessList (#1107)

fa46b8a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: New Component ProcessList MVP #1107

feat: New Component ProcessList MVP #1107

SirenaBorracha commented Apr 9, 2021 •

edited

Loading

SirenaBorracha commented Apr 9, 2021

brandonlenz left a comment

brandonlenz Apr 12, 2021

brandonlenz left a comment

brandonlenz commented Apr 12, 2021 •

edited

Loading

SirenaBorracha commented Apr 12, 2021

suzubara Apr 23, 2021

brandonlenz left a comment

feat: New Component ProcessList MVP #1107

feat: New Component ProcessList MVP #1107

Conversation

SirenaBorracha commented Apr 9, 2021 • edited Loading

Summary

Related Issues or PRs

How To Test

Screenshots (optional)

Default

No text, custom sizing

Custom Sizing

SirenaBorracha commented Apr 9, 2021

brandonlenz left a comment

Choose a reason for hiding this comment

brandonlenz Apr 12, 2021

Choose a reason for hiding this comment

brandonlenz left a comment

Choose a reason for hiding this comment

brandonlenz commented Apr 12, 2021 • edited Loading

Disclaimer ⚠️ I have not tried that, just thought it might be nicer than having a headerType prop if it works

SirenaBorracha commented Apr 12, 2021

suzubara Apr 23, 2021

Choose a reason for hiding this comment

brandonlenz left a comment

Choose a reason for hiding this comment

SirenaBorracha commented Apr 9, 2021 •

edited

Loading

brandonlenz commented Apr 12, 2021 •

edited

Loading

Disclaimer ⚠️ I have not tried that, just thought it might be nicer than having a `headerType` prop if it works