Convert react <Tagline> to <cfpb-tagline> web component#531
Open
anselmbradford wants to merge 6 commits intomainfrom
Open
Convert react <Tagline> to <cfpb-tagline> web component#531anselmbradford wants to merge 6 commits intomainfrom
<Tagline> to <cfpb-tagline> web component#531anselmbradford wants to merge 6 commits intomainfrom
Conversation
anselmbradford
requested review from
billhimmelsbach,
contolini,
flacoman91 and
natalia-fitzgerald
as code owners
anselmbradford
changed the title
<Tagline> to <cfpb-tagline> web component<Tagline> to <cfpb-tagline> web component
anselmbradford
force-pushed
the
ans_tagline_wc
branch
from
aefd892 to
e6d6420
Compare
|
Collaborator
|
@anselmbradford Banner with links and banner with lang switcher have regressions. The overall height of the banner has grown because the eyebrow now stack vertically. |
Member
Author
|
Thanks @itsmedavep !! Updated in 4bba05b and cf42ee6 |
This was referenced Mar 19, 2026
Collaborator
billhimmelsbach
left a comment
billhimmelsbach
left a comment
There was a problem hiding this comment.
Heyo! Thanks for chatting with me about this Ans! Just summarizing what we talked about on Teams:
- I think probably folks from Metro2 or Complaint Explorer should review this one so they can test it out in their projects first
- We chatted about updating the jsdoc comment for the boolean
- We chatted about testing generally: should we use the lit helper methods or framework agnostic methods? Do we want a helper function to standardize the common "render and test the dom use case?
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
3 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.
This PR replaces the
<Tagline>react component with<cfpb-tagline>web component. This component doesn't yet exist in the design-system, but should be moved there later. In the meantime, this PR demonstrates what converting a static react component into a web component would look like here with all the changes in this repo.Changes
<Tagline>to<cfpb-tagline>web component.How to test this PR
yarn install && yarn build && yarn startand the Banner and Tagline page should visually look the same, but use a<cfpb-tagline>web component in the source.Notes
vite-plugin-lit-cssis how the SCSS is passed into the lit component. I'm not real happy with the dependency on this plugin, as it creates a Vite dependency to build the source code. We should investigate other ways to do this that are build-tool agnostic.