New Component: Process list

[brandonlenz]

Process List

USWDS Version

2.10.0

Description

A process list displays the steps or stages of important instructions or processes.

Requirements (proposed)

Prop Interface

interface ProcessListProps = {
  className?: string
  children: React.ReactElement<ProcessListItemProps>[]
  listProps: JSX.IntrinsicElements['ol']
}

interface ProcessListItemProps = {
  heading: string
  className?: string
  headerClassName?: string
  liProps: JSX.IntrinsicElements['li']
}

Example Implementation (proposed)

return (
  <ProcessList>
    <ProcessListItem heading="Start a process">
      {/*Any JSX or custom elements here*/}
    </ProcessListItem>
    <ProcessListItem heading="Proceed to the second step">
      {/*Any JSX or custom elements here*/}
    </ProcessListItem>
    <ProcessListItem heading="Complete the step-by-step process">
      {/*Any JSX or custom elements here*/}
    </ProcessListItem>
  </ProcessList>
)

Other Considerations

• The uswds implementation makes recommendations for styling using theme settings. Will likely require making a judgement call on how to expose those through the react-uswds interface, or to leave themeing up to the implementer.