Compile a component audit

[natalia-fitzgerald]

Priorities

• Verify design system components that are in a draft status so that we can move them into verified
• Identify components that exist only in cf.gov that would make sense to be added to the DS (prioritize components needed for existing apps)
• Audit existing apps to assess which components are in use in 2+ apps

Component or Pattern	CFPB Design System (DS)	CFPB Design System in React (DSR)	DSR Status	Use case
Alerts	Yes	Yes	Draft	cf.gov and apps
Banner (notification)	Yes	Yes	Verified	cf.gov and apps
Banner (US gov)	Yes	Yes	Verified	cf.gov and apps
Breadcrumbs	No	Yes	Draft	cf.gov and apps
Buttons	Yes	Yes	Verified	cf.gov and apps
Cards	Yes	No		cf.gov
Checkboxes	Yes	Yes	Verified	cf.gov and apps
Date picker	Yes	No		cf.gov and apps
Dividers	Yes	Yes	Draft	cf.gov and apps
Email signup forms	Yes	No		cf.gov and apps
Expandables	Yes	Yes	Draft	cf.gov and apps
Fieldsets	Yes	No		cf.gov and apps
Featured content modules	Yes	No	cf.gov only	cf.gov
Filterable list control panels	Yes	No	cf.gov only	cf.gov
Footers	No	Yes	Draft	cf.gov and apps
Grids	Yes	Yes	Draft	cf.gov and apps
Helper text	Yes	No		cf.gov and apps
Headings	Yes	Yes	Verified	cf.gov and apps
Heroes	Yes	No	Draft	cf.gov and apps
Icons	Yes	Yes	Draft	cf.gov and apps
Info unit groups	Yes	No		cf.gov and apps
Item introductions	Yes	No	cf.gov only	cf.gov
Labels	Yes	Yes	Verified	cf.gov and apps
Layout	Yes	Yes	Draft	cf.gov and apps
Legends	Yes	No		cf.gov and apps
Links	Yes	Yes	Verified	cf.gov and apps
Lists	Yes	Yes	Draft	cf.gov and apps
Navbar	No	Yes	Draft	Not in use
Modals	No	No		2+ apps
Pagination	Yes	Yes	Verified	cf.gov and apps
Paragraphs	Yes	Yes	Verified	cf.gov and apps
Radio buttons	Yes	Yes	Verified	cf.gov and apps
Range sliders	Yes	No		cf.gov
Selects	Yes	Yes	Draft	cf.gov and apps
Sidebar	No	No		cf.gov and 2+ apps
Summaries	Yes	Yes	Draft	cf.gov and apps
Tables	Yes	Yes	Verified	cf.gov and apps
Tabs	No	No		2+ apps
Tags	Yes	No		cf.gov and apps
Taglines	Yes	Yes	Verified	cf.gov and apps
Text inputs	Yes	Yes	Verified	cf.gov and apps
Text introductions	Yes	Yes	Verified	cf.gov and apps
Wells	Yes	Yes	Verified	cf.gov and apps

[natalia-fitzgerald]

DSR as of 2/4/2024

Components (verified)

• Banner (US gov)
  • US gov banner
  • US gov banner (cf.gov)
  • US gov banner (with generic links)
• Buttons
  • Primary
  • Secondary
  • Disabled
  • Destructive
  • With icon
  • With animated icon
  • Button group
  • Full-width (on x-small screens)
  • Button link
• Checkboxes
  • Checkbox
    • Enabled
    • Hover
    • Focus
    • Selected
    • Disabled
    • Disabled/Selected
    • Success
    • Warning
    • Error
    • With helper text
  • Large target area
    • Enabled
    • Hover
    • Focus
    • Selected
    • Disabled
    • Disabled/Selected
    • With helper text
• Headings
  • H1
  • H2
  • H3
  • H4
  • H5
  • Display
  • Eyebrow
  • Slug
• Labels
  • Label heading
  • Inline label
  • (Doesn't include Fieldset from the DS)
• Links
  • Inline
  • Standalone
  • With icon
  • Destructive
  • Link using React Router Link
• Pagination (pending DS change in progress)
  • Jump to page*
  • Sequential*
  • First and last page*
  • UsePagination*
• Paragraphs
  • Body text
  • Lead paragraph
• Radio buttons*
  • Standard radio button
  • Standard radio button with helper text
  • Large target area
  • Large target area with helper text
• Tables*
  • Standard table
  • Responsive stacked table
  • Responsive table with horizontal scroll
  • Striped table
  • Right-aligned table
  • Pagination
  • Fixed-width column tables
  • Long character sets
• Taglines*
  • Standard tagline
  • Large tagline
• Text inputs
  • Text area
    • Add stories
  • Text input
    • Add stories
• Text introductions*
  • Standard text introduction
  • Flexible text introduction
• Wells*
  • Well (container)
  • Well (content)

Components (Draft)

• Alerts
• Breadcrumbs (not in the DS - pulled from cf.gov)
• Dividers
• Dropdowns* (should be removed)
• Expandables
• Footers
• Grids
• Heroes
• Icons
• Layout
  • Content
  • Main
  • Sidebar
  • Wrapper
• Lists (PR to bring into DS alignment and verify in progress)
  • Unordered
  • Ordered
  • Unstyled
  • Horizontal
  • Spaced
  • Links
• Navbar
  • Logged in
  • Logged out
  • No user
• Page header
  • Logged in
  • Logged out
• Selects*
• Multiselect (Still needs work?)
• Single select (is this ready for a verification check?)
• Summaries
• Default
• Mobile-only
• Minimal

Lives in cf.gov

• Related links/Additional resources
• Sidebar

Lives only in satellite apps

• Tabs
• Filter panel

[natalia-fitzgerald]

DS and cf.gov component tracking status across apps that use DSR

Component	M2	SBL	CE	Source	Added to DSR
Alerts	No	Yes	Yes	DS	Yes
Banner (notification)	No	No (but need)	No (but need)	DS	No
Banner (US gov)	No	Yes	Yes	DS	Yes
Breadcrumbs	No	No (but need)	Yes	cf.gov	Yes
Buttons	Yes	Yes	Yes	DS	Yes
Cards	No	No	No	DS	No
Checkboxes	Yes	Yes	No (but need)	DS	Yes
Date picker	No	No	No (but need)	DS	No
Dividers	Yes	Yes	Yes	DS	Yes
Email signup forms	No	No (but need)	No	DS	No
Expandables	No	Yes	No	DS	Yes
Fieldsets	No	No	No	DS	No
Featured content modules	No	No	No	DS	No
Filterable list control panels	No	No	No	No
Footers	No	Yes	No (but need)	cf.gov	Yes
Grids	No	Yes	No	DS	Yes
Helper text	No	No	No	DS	No
Headings	Yes	Yes	Yes	DS	Yes
Heroes	No	Yes	No (but need)	DS	Yes
Icons	Yes	Yes	Yes	DS	Yes
Info unit groups	No	No	No	DS	No
Item introductions	No	No	No	DS	No
Labels	Yes	Yes	No	DS	Yes
Layout	Yes	Yes	No	DS	Yes
Legends	No	No	No	DS	No
Links	No	Yes	Yes	DS	Yes
Lists	Yes	Yes	No (but need)	DS	Yes
Navbar	No	No	No	cf.gov	Yes
Modals	No (but need)	No	No (but need)	apps	No
Page header	No	Yes	Yes	cf.gov	Yes
Pagination	Yes	Yes	Yes	DS	Yes
Paragraphs	Yes	Yes	No (but need)	DS	Yes
Radio buttons	Yes	Yes	No	DS	Yes
Range sliders	No	No	No	DS	No
Selects	No	Yes	Yes	DS	Yes
Sidebar	No	No (but need)	No (but need)	DS	?
Summaries	No	No	Yes	DS	Yes
Tables	Yes	Yes	No (but need)	DS	Yes
Tabs	No (but need)	No	No (but need)	apps	No
Tags	No	No	No	DS	No
Taglines	No	No	No	DS	Yes
Text inputs	Yes	Yes	No (but need)	DS	Yes
Text introductions	No	Yes	No (but maybe need)	DS	Yes
Wells	No	Yes	No	DS	Yes

[natalia-fitzgerald]

DSR components in use:

CE

• Alert
• Button
• Icon
• Heading
• Link
• ListLink
• Breadcrumb
• Summary
• Divider
• Pagination
• SelectSingle
• PageHeader

SBL

• Grid
• PageHeader
• List
• ListItem
• Button
• Icon
• Paragraph
• TextInput
• Expandable
• Hero
• Link
• LinkText
• Heading
• Label
• AlertFieldLevel
• FooterCfGov
• WellContainer
• WellContent
• Table
• TextIntroduction
• Alert
• Dropdown
• RadioButton
• SkipNav
• Divider
• SelectSingle
• Checkbox
• LanguageLink
• Layout
• Pagination

M2

In the user guide:

• Layout
• List
• ListItem
• Table
• Paragraph
• Heading
• Divider

In the app:

• Button
• ButtonGroup
• Icon
• Checkbox
• Label
• TextInput
• RadioButton
• Pagination

[natalia-fitzgerald]

DSR components currently in use

This list includes includes a tracking of which DSR components are being imported into CFPB apps as well as the components that are required for the imported components to work.

Component	M2	SBL	CE	Source	Added to DSR
Alerts	No	Yes	Yes	DS	Yes
Banner (US gov)	No	Yes	Yes	DS	Yes
Breadcrumbs	No	No (but need)	Yes	cf.gov	Yes
Buttons	Yes	Yes	Yes	DS	Yes
Checkboxes	Yes	Yes	No (but need)	DS	Yes
Dividers	Yes	Yes	Yes	DS	Yes
Expandables	No	Yes	No	DS	Yes
Fieldset	No	No	Yes	DS	Yes
Footers	No	Yes	No (but need)	cf.gov	Yes
Grids	No	Yes	No	DS	Yes
Helper text	No	No	No	DS	Yes
Header	No	Yes	Yes	cf.gov	Yes
Headings	Yes	Yes	Yes	DS	Yes
Heroes	No	Yes	No (but need)	DS	Yes
Icons	Yes	Yes	Yes	DS	Yes
Labels	Yes	Yes	No	DS	Yes
Layout	Yes	Yes	No	DS	Yes
Links	No	Yes	Yes	DS	Yes
Lists	Yes	Yes	No (but need)	DS	Yes
Pagination	Yes	Yes	Yes	DS	Yes
Paragraphs	Yes	Yes	No (but need)	DS	Yes
Radio buttons	Yes	Yes	No	DS	Yes
Selects	No	Yes	Yes	DS	Yes
Summaries	No	No	Yes	DS	Yes
Tables	Yes	Yes	Yes	DS	Yes
Taglines	No	No	No	DS	Yes
Text inputs	Yes	Yes	No (but need)	DS	Yes
Text introductions	No	Yes	No (but maybe need)	DS	Yes
Wells	No	Yes	No	DS	Yes