[Component] Paragraph (Body)

[natalia-fitzgerald]

Paragraph

Tracking the design and development lifecycle of the paragraph component.

Related links:

• Design System (Documentation): https://cfpb.github.io/design-system/foundation/paragraphs#web-paragraphs
• Design System (Codebase): https://github.com/cfpb/design-system

Design System

Effort level: Small

Definition of ready

Checklist

• [X] The component has an identified use case (one of the 3 options below)
• [X] The current state of the component has been identified (one of the 3 options below)
• [X] The task is broken into steps

Definition of ready questionnaire:

Identify the use case:

• [X] Small business lending filing platform
  • Complete user profile page: Heading Text
• [ ] Metro 2 tool
• [ ] No identified project need but does exist in the CFPB Design System

Identify the current state:

• [X] The component already exist in the CFPB Design System

  • Build an exact React translation of the CFPB Design System component
  • Build the component in Figma (if it is not already included in the CFPB Design System template)

• [ ] The component does not exist in the CFPB Design System but does exist on cf.gov

  • Conduct a design audit of any component variations that exist on our website (if applicable)
  • Determine final design
  • Build the component in Figma (if it is not already included in the CFPB Design System template)
  • Add the component to UI component library
  • Incorporate the component into the CFPB Design System or alert the CFPB Design System maintainers that this component will need to be added.

• [ ] The component does not exist in the CFPB Design System or on cf.gov (but has an identified use case and is being tracked as part of the SBL or M2 work)

  • Design the component as a part of the SBL or Metro 2 project work
  • Build the component in Figma (if it is not already included in the CFPB Design System template)
  • Add the component to UI component library
  • Incorporate the component into the CFPB Design System or alert the CFPB Design System maintainers that this component will need to be added.

Indicate which types we will include in the React component library.

Types

• [X] Paragraph

Verification checklist

For existing components

Verify the CFPB Design System (React) component against the CFPB Design System

• [ ] Has component intro text copied from the DS page
• [ ] Has source link to component's DS page (ex - Source: https://cfpb.github.io/design-system/components/banner-notification)
• [ ] Each DS variant is implemented as a separate story
  • [ ] Story name should be sentence case (ex. List Link => List link)
  • [ ] Naming is consistent with the DS
  • [ ] Same component names, same placeholder text, etc.
• [ ] Order of stories matches between DS/DSR
• [ ] Component is built correctly
  • [ ] Visually compare DSR implementation to DS
  • [ ] Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR
• [ ] Manual visual review has been conducted and component has passed this review

For new components

• [ ] All steps for existing components plus the following steps
• [ ] The new component has been added to the CFPB Design System OR
• [ ] The CFPB Design System maintainers have been alerted that there is a new component that must be added to the system
• [ ] Documentation has been written for the new component (this is not a blocker for moving a component to verified)

Run accessibility checks

• [ ] Component is keyboard-friendly (navigable with tab, space, enter, arrow keys, etc.)
• [ ] Component is screen reader friendly
• [ ] Component does not introduce new errors or warnings in WAVE
• [ ] CFPB manual web accessibility audit

Verify component unit tests

• [ ] Verify component unit tests are implemented and passing - 85% or greater (ex: yarn vitest Button)

Conduct PR review

• [ ] The component has been reviewed and approved by UI, UX, and FEWD

Verify component

• [ ] Move component to verified in Storybook

[natalia-fitzgerald]

@meissadia Would you like to pick this up as part of building out the Text introduction component?

[meissadia]

@meissadia Would you like to pick this up as part of building out the Text introduction component?

Yes, I implemented both Paragraph variants in the TextIntroduction PR: https://github.com/cfpb/design-system-react/pull/193

[natalia-fitzgerald]

@meissadia I think that this specific component looks good. Should we go ahead and move through the verification steps and decouple it from the Text introduction that is currently blocked pending the lead paragraph spacing issues? I see now that perhaps the reason this is coupled is because this page includes the lead paragraph. So maybe we wait.

I did go ahead and paste the verification checklist at the top of this issue.