docs(tagline): modify docs to verify component#207
Merged
billhimmelsbach merged 3 commits intomainfrom Oct 26, 2023
Merged
Conversation
billhimmelsbach
requested review from
meissadia and
shindigira
as code owners
✅ Deploy Preview for cfpb-design-system-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Collaborator
Author
|
I didn't mark this as "verified" in this PR, since I'm not sure if we have an official stamp of approval process yet, so I'll hold off till at least we chat about it at the sync. |
meissadia
approved these changes
Oct 19, 2023
meissadia
pushed a commit
that referenced
this pull request
Oct 26, 2023
I went through and [verified the Tagline component](#205) as part of the work on the banner component. Only small changes to the documentation appear to be needed. I didn't add the deprecated "Extra large tagline" story from the design system, since it was deprecated and all, but we can chat about that at the DSR sync. ## Changes - add component description - remove heading - change stories to sentence case ## How to test this PR 1. Take a peek at the DSR and see how it looks ## Screenshots  ## Notes I didn't mark this component as "verified" in this PR, since I'm not sure if we have an official stamp of approval process yet, so I'll hold off till at least we chat about it at the sync.
21 tasks
This was referenced Nov 2, 2023
This was referenced Nov 3, 2023
billhimmelsbach
added a commit
that referenced
this pull request
Nov 7, 2023
Resolves #205 # Final Design Review of Tagline Component  [Link to Tagline Component in this PR](https://deploy-preview-218--cfpb-design-system-react.netlify.app/?path=/docs/components-verified-taglines--overview) Previous work on component: #207
29 tasks
This was referenced Feb 5, 2026
flacoman91
added a commit
that referenced
this pull request
Feb 5, 2026
Verify Expandable component to be used in the component library ## Context https://cfpb.github.io/design-system/components/expandables ## Verification checklist ### 1. Verify the CFPB Design System (React) component against the CFPB Design System #### For existing components - [x] Component intro text has been copied from the DS page #443 - [x] Source link to component's DS page (Source: https://cfpb.github.io/design-system/components/expandables) - [x] Each DS variant is implemented as a separate story #443 - [x] Story name is sentence case (ex. List Link => List link)#443 - [x] Naming is consistent with the DS - Note: Naming is slightly adjusted on the DSR page because we do not repeat the base name of the component for the stories. - [x] Same component names, same placeholder text, etc. - [x] Order of stories matches between DS/DSR - [x] Component is built correctly - [x] Visually compare DSR implementation to DS - [x] Fixes to accordion and group: #450 - [x] Verify that React renders the HTML markup the same as in the DS (if at all possible) - [x] Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR | Design System | Design System in React | |------------|------------| |<img width="992" height="312" alt="Image" src="https://github.com/user-attachments/assets/fec57ee7-84b4-4c3f-8829-28290f0eb6a7" />|<img width="1066" height="205" alt="Image" src="https://github.com/user-attachments/assets/79d142eb-1abf-4fd4-aa20-696341e8d703" />| - [x] Check to see if the applied CSS styles match the specs in the DS if applicable (message @natalia-fitzgerald if it does not)* - [x] Manual visual review has been conducted and component has passed this review ### 2. Run accessibility checks - [x] Component is keyboard-friendly (navigable with tab, space, enter, arrow keys, etc.) - [x] Component does not introduce new errors or warnings in [WAVE](https://wave.webaim.org/extension/) - [x] Component is screen reader friendly ([screen reader testing demo](https://drive.google.com/file/d/189A9Wx_T1C49TES5ZtYXlIFbJbLP472p/view)) - [x] Is all the meaningful visual information and text of the component conveyed by the screen reader? (text, non-decorative image descriptions, etc.) - [x] When interacting with the component using a screen reader, do you have all the information you need to use it? (selected vs unselected, button vs link, expanded vs collapsed, etc.) - [x] Does the component have similar screen reader behavior as the sample components in WCAG, the CFPB design system, WebAIM, or similar accessibility examples? - For reference: [CFPB manual web accessibility audit](https://cfpb.github.io/design-system/guidelines/accessibility-audit-tools#cfpb-manual-web-accessibility-audit-1) ### 3. Verify component unit tests - [x] Verify component unit tests are implemented and passing - 85% or greater (ex: `yarn vitest Button`) | Unit tests | |------------| |<img width="722" height="52" alt="Image" src="https://github.com/user-attachments/assets/49736cfd-f4d2-4697-b955-1357509fb9b1" />| ### 4. Prepare a PR for Code Review - [x] [Create a PR](#218) with the name: `Final component verification review for XXXX component` - [x] Copy this verification checklist that's almost complete into the PR description ### 5. Conduct Code PR review - [x] [Submit PR](#207) with any necessary changes for code review by frontend devs #447 #391 #450 ### 6. Conduct Component Verification PR review - [x] Apply GitHub label "[component-verification](https://github.com/cfpb/design-system-react/labels/component-verification)" - [x] Change [the component's](f745c3c) status from `Draft` to `Verified` in Storybook - [x] Add a DSR contributor as a reviewer (A designer and a developer must review) - [x] Ping DSR contributors in Slack in the Design System in React channel when ready ### 7. Verify component - [ ] Merge when design and dev review completed to finish component verification 🎉 #### Screenshot <img width="1366" height="996" alt="Screenshot 2026-02-05 at 2 01 33 PM" src="https://github.com/user-attachments/assets/cb628df3-dd7c-41ff-afb7-983317c1afc8" /> <img width="1343" height="1269" alt="Screenshot 2026-02-05 at 2 01 42 PM" src="https://github.com/user-attachments/assets/8ced56e6-a179-41a3-9a16-177a9598956b" /> Tagging @flacoman91 @virginiacc @billhimmelsbach --------- Co-authored-by: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I went through and verified the Tagline component as part of the work on the banner component. Only small changes to the documentation appear to be needed. I didn't add the deprecated "Extra large tagline" story from the design system, since it was deprecated and all, but we can chat about that at the DSR sync.
Changes
How to test this PR
Screenshots
Notes
I didn't mark this component as "verified" in this PR, since I'm not sure if we have an official stamp of approval process yet, so I'll hold off till at least we chat about it at the sync.