This issue will be used to capture the work that our team is doing each sprint related to building out the 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 SBL app pages we are working on.
This work includes:
Verifying components that have already been built as "Draft" in the DSR
Adding existing CFPB Design System components to the DSR
Setting up a process for verification of DSR components
Setting up a process for designing and developing new components (components that are not in the CFPB Design System)
For the time being, we're focused on verifying existing CFPB components
The big idea is that the CFPB Design System is the source of truth
In practice that means that CFPB Design System CSS styles feed the DSR
Every component's functionality, accessibility, and style is verified in the DSR against the CFPB Design System
We link from each component page to the CFPB Design System as the source for component guidance
When a component is not represented in the CFPB Design System documentation site and does exist on consumerfinance.gov OR in the CFPB Design System codebase we have to decide whether to add it to the CFPB Design System.
If we don't add the component to the CFPB Design System, we have a component with no CFPB Design System source guidance in the DSR.
The types of things that come up typically:
A component exists in the CFPB Design System code but not in the CFPB Design System documentation
We have to decide how to handle this because each of the component pages link to the CFPB Design System documentation/guidance
A component exists in consumerfinance.gov but not in the CFPB Design System codebase or documentation site
Same as the other - We have to decide how to handle this because each of the component pages link to the CFPB Design System documentation/guidance
Sometimes there are naming issues or other improvements we can make
For example, we have the Tagline component in the CFPB Design System. This is just the flag and the text. On cf.gov there is the global-eyebrow (this includes the banner). We may have recommendations for what to call the component in order to align the naming with other agencies that use the same component or for clarity.
Live code in the CFPB Design System doesn't match the Design specs
In these instances I am correcting the design specs if the code is correct
If the code is incorrect then I'll bring it the the CFPB Design System repo
Typically we have the ability to make the required fixes but when we do we'll want visibility
Or, if the fixes are too much for our team we'll need a process for documenting those bugs
Removed Heading 6 from the DS and from the React component library.
Removed h6 (as well as all raw html) from those four pages (the crawler should reflect this when it runs again)
Meta header
Changed the "Icon and heading" component to "Meta header". This matches the name in code and is more specific to what this component is (it's a category label with optional date that appears in the post preview - results from the filterable list)
Ans is working on a fix because the Category wasn't coded with an H4 so it wasn't getting the mobile H4 styling.
[x] Established a point person on D+D to review proposed changes/updates to the CFPB Design System (Sonna Kim on the Design and Content team (DECO))
[x] SBL dev team can now autonomously review and merge changes to the CFPB Design System, publish those changes to NPM, review and test those changes on cf.gov using local/dev servers and sauce labs, and merge those changes on cf.gov.
CFPB Design System updates
[x] Filter tag and Lead paragraph style updates merged on cf.gov
[x] Removed subsections from components section of CFPB Design System. Replaced existing eyebrow with "Components" eyebrow label
[x] CFPB DS Docs updates by compnent detailed below
Component work
Tagline
[x] Component is now "Verified" in the CFPB Design System in React
[x] Updates to Tagline documentation page
[x] Moved Taglines out of "Patterns" and into the "Components" section
[x] Moved "use cases" blurb to the introduction for the page.
[x] Deleted intro reference to "inkwells" which have been deprecated.
[x] Updated intro blurb: Taglines are short paragraphs of text with the USA flag to their left that are used in the header and footer across consumerfinance.gov.
Links
[x] Component is now "Verified" in the CFPB Design System in React
[x] Updates to Links documentation page
Change intro text to: Links are navigational elements that connect users to other locations, either on the current page or to a different page or site. In contrast, buttons are used to signal important actions.
Changed "Call-to-action links" to "List links"
Changed live code text to: "List link 1" and "List link 2"
Changed "Sample destructive link" to "Destructive link"
Changed "Standard link with icon" to "Link with icon"
Changed "Non-wrapping icon links" to "Non-wrapping link with icon"
Well
[ ] Verification in progress
[x] Updates to Well documentation page
Added “Types” section
Modified live code example to include call-to-action (list link) instead of inline link
Updated design specs to match code implementation
Removed images that contradicted the code implementation
[x] Successfully integrated DS Multiselect into CFPB Design System in React
[ ] Currently working on Unit testing
[ ] Finalization dependent on DS PR merge and new package release of DS
Global eyebrow (Renamed: US gov banner)
[ ] Verification in progress
[x] Updates to Global eyebrow documentation page
[x] Created "Banner (US gov) page in the "Components" section of the CFPB Design System
[x] Updated page intro to: "The US gov banner identifies official websites of government organizations in the United States. It helps visitors understand whether a website is official and secure."
[x] Added "US gov banner" to the CFPB Design System docs
[ ] Added "US gov banner (with links)" to the CFPB Design System docs
Tables
[ ] Verification in progress
[x] Pulled out react-table dependency to match DS
[x] Modified component to match DS system HTML markup and CSS classes
Pagination
[ ] Verification in progress
[x] Integrated with new Table component without react-table dependency
This issue will be used to capture the work that our team is doing each sprint related to building out the 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 SBL app pages we are working on.
This work includes:
For the time being, we're focused on verifying existing CFPB components
The types of things that come up typically:
A component exists in the CFPB Design System code but not in the CFPB Design System documentation
A component exists in consumerfinance.gov but not in the CFPB Design System codebase or documentation site
Sometimes there are naming issues or other improvements we can make
Live code in the CFPB Design System doesn't match the Design specs