Page-by-page: Shared Platform Components for CFPB Design System (in React)

[natalia-fitzgerald]

This issue will be used to capture the work that our team is doing related to building out components for CFPB Design System (in React) (we'll refer to it as DSR from here on out to be concise and to more easily differentiate from the CFPB Design System).

Our current work is tied to the components needed for the Shared platform (authentication and authorization). When we move on to the SBL app I will create an issue to track those components.

This work includes:

• Verify components that have already been built as "Draft" in the DSR
• Bring existing CFPB Design System components to the DSR
• Establish a process for verification of CFPB Design System components of DSR components
• Set up a process for designing and developing new components (components that are not in the CFPB Design System)

Contribution onboarding: #232

[natalia-fitzgerald]

Updated to reflect MVP designs: 1/11/2024

Page: Shared filing platform (unauthenticated)

Checkmark means the component exists in the DSR has been verified.

Required components

Verified

• Banner (US gov)
  • Tagline
• Headings
• Paragraph
• Buttons
• Links
• Well

Draft

• Header (cf.gov) (This is called Page header in the DSR)
• Hero
• Icons (numbers)
  • Indent to account for icon list?
• Footer (cf.gov)

cf.gov components (not in DSR)

• Sidebar

New components (not in DS or cf.gov)

• Add here

Backlogged (not for MVP)

• Email sign-up
• Megamenu

[natalia-fitzgerald]

Updated to reflect MVP designs: 1/11/2024

Page: Complete your user profile

Checkmark means the component exists in the DSR has been verified.

Required components

Verified

• Banner (US gov)
  • Tagline
• Text introduction (@meissadia [Component] Text introduction #193 )
  • Lead paragraph (@meissadia [Component] Text introduction #193 )
  • Paragraph (@meissadia [Component] Text introduction #193 )
  • Links (@meissadia [Task] Verify Links Component #215)
• Heading 2
• Paragraph/Body (@meissadia [Component] Paragraph (Body) #162)
• Well (@billhimmelsbach 
Banner (Global Eyebrow) #45)
• Label (@shindigira)
• Checkboxes (@meissadia - DSR Checkbox)
  • Checkbox option
  • Checkbox helper text
• Buttons (@meissadia) - DSR Button
• Button + Destructive link (@billhimmelsbach)

Draft

• Alerts (@shindigira)
• Text input (@shindigira)
  • Include error states using Notification (@shindigira)
• Helper text (@billhimmelsbach)
• Header (cf.gov)(This is called Page header in the DSR)
• Footer (cf.gov)

Backlogged (not MVP)

I @meissadia - Although this is backlogged is there any of this work that can be pushed to the DSR or is it still blocked?

• Select
(@meissadia Spike: Bring the DS Single and Multiselect into Storybook #197)
  • Single select

  • Multiselect - Spike ([Component] Integrate DS Select + Multiselect #206 )
    • With checkboxes
    • With tags (pills)
    • Include error states using Notification
• Multiselect Tag redesign - (@meissadia DS #1760)

[natalia-fitzgerald]

Updated to reflect MVP designs: 1/11/2024

Page: Shared platform (authenticated)

Checkmark means the component exists in the DSR has been verified.

Required components

Verified

• Banner (US gov)
  • Tagline
• Headings
• Paragraph
• List link

Draft

• Header (cf.gov)(This is called Page header in the DSR)
  • Navigation links (Name and Log out)
• Hero
• Icon + Text + Link (or is this an field-level alert?)
• Icon with text
  Not currently a component, just a demo of putting an Icon next to text.
  Consistent spacing between Icon/Text #130
• Divider
• Footer

cf.gov components (not in DSR)

• Sidebar

[natalia-fitzgerald]

Updated to reflect MVP designs: 1/16/2024

Page: Request changes to your user profile (read-only)

Checkmark means the component exists in the DSR has been verified.

Required components

Verified

• Banner (US gov)
  • Tagline
• Text introduction
• Headings
• Paragraph
• List link
• Well (container)
• Label

Draft

• Header (cf.gov)
• Text input (read-only state?)
• Icon + Text + Link (or is this an field-level alert?)

May need customization:

• Icon with text
  Not currently a component, just a demo of putting an Icon next to text.
  Consistent spacing between Icon/Text #130

[natalia-fitzgerald]

Updated to reflect MVP designs: 1/11/2024

Page: View financial institution details (read-only)

Checkmark means the component exists in the DSR and has been verified.

Required components

Verified

• Banner (US gov)
  • Tagline
• Text introduction
  • Lead paragraph
  • Paragraph
  • Links
• Heading 2
• Paragraph
• Well
• Label
• Paragraph
• Table - @billhimmelsbach Multiselect Dropdown - Tab to navigate instead of select #46
• Pagination

Draft

• Text input
  • Read-only state?
• Header (cf.gov)
  • Navigation links (Name and Log out)
• Footer (cf.gov)

cf.gov components (not in DSR)

• Breadcrumb

May need customization

• Icon with text
  • Not currently a component, just a demo of putting an Icon next to text.
  • Exploration of how to consistently space Icon + text
    • "Your LEI status must be active..."

Needs UI/UX design and thinking
These items are not a priority for this sprint.

• SBL app page navigation
• Modified header for Shared data filing platform? Pending naming question.

[natalia-fitzgerald]

Page: Small business lending home

Checkmark means the component exists in the DSR and has been verified.

Required components

• Banner (US gov)
  • Tagline
• Header (cf.gov)

[natalia-fitzgerald]

Here's a list of the current state of component things. Once again this list is focused on the shared platform and not the filing app.

As of 1/30/2024

Components (verified)

• Banner (US gov)
• Buttons
• Checkboxes
• Headings
• Labels
• Links
• Pagination
• Paragraphs
• Radio buttons
• Tables
• Taglines
• Text inputs
• Text introductions
• Wells

Components (Draft)

• Divider
• Dropdowns (should be removed)
• Expandable
• Footers
• Grids
• Heroes
• Icons
• Layout
• Lists
• Navbar
• Alerts (previously called Notifications)
• Page header
• Selects(needs to be pushed - DS blocker removed?)

Needs to be added

• Sidebar
• Related links/Additional resources
• Helper text
• Breadcrumb