[Task] Verify Banner component

[meissadia]

Verify banner component to be used in the component library

Context

Depends on verification of the Tagline component: #205

Verification checklist

Verify the CFPB Design System (React) component against the CFPB Design System

• Has component intro text copied from the DS page
• Has source link to component's DS page (ex - Source: https://cfpb.github.io/design-system/components/banner-notification)
• Each DS variant is implemented as a separate story
  • Story name should be sentence case (ex. List Link => List link)
  • Naming is consistent with the DS
  • Same component names, same placeholder text, etc.
• Order of stories matches between DS/DSR
• Component is built correctly
  • Visually compare DSR implementation to DS
  • Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR
• Manual visual review has been conducted and component has passed this review

Run accessibility checks

• Component is keyboard-friendly (navigable with tab, space, enter, arrow keys, etc.)
• Component does not introduce new errors or warnings in WAVE
• Component is screen reader friendly (screen reader testing demo)
  • Is all the meaningful visual information and text of the component conveyed by the screen reader? (text, non-decorative image descriptions, etc.)
  • 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.)
  • Does the component have similar screen reader behavior as the sample components in WCAG, WebAIM, or similar accessibility examples?
• For reference: CFPB manual web accessibility audit

Verify component unit tests

• Verify component unit tests are implemented and passing - 85% or greater (ex: yarn vitest Button)

Conduct PR review

• The component has been reviewed and approved by UI, UX, and FEWD

Verify component

• Move component to verified in Storybook

[meissadia]

In the DS this component is known as the Tagline.

We have two DSR components (Banner, Tagline) that duplicate functionality.

• Banner: Flag + text + optional links + phone number
  • Found in the header of https://www.consumerfinance.gov/
• Tagline: Flag + text
  • Found in the footer of https://www.consumerfinance.gov/

---

The DS Tagline docs do not include the design for the version with links (DSR's Banner).

The DS does include the component m-global-eyebrow, which is what is used on CF.gov

• HTML: global-eyebrow.html
• Styles: global-eyebrow.less

---

@natalia-fitzgerald

I plant to consolidate our DSR components under the component name Tagline

Questions:

• Can we include the DSR Banner's additional features (links + phone number) in the consolidated DSR Tagline?
• Do we want to port this consolidation back to the DS?
  • Change classnames (eyebrow => tagline)?
  • Expand documentation to include variant with links + phone number?

[natalia-fitzgerald]

Update: I have opened a more descriptive ticket within the CFPB Design System repo so that we can receive further guidance: cfpb/design-system#1797

@meissadia

First off I want to confirm my understanding of what you posted above.

Existing components (CFPB DS and/or consumerfinance.gov)

a-tagline

Includes:

• USA flag plus the text
• Text: An official website of the United States government
• This component is included in the CFPB DS code AND as a pattern in the CFPB DS website/documentation

<div class="a-tagline">
    <span class="u-usa-flag"></span>
    <div class="a-tagline_text">
        An official website of the
        <span class="u-nowrap">United States government</span>
    </div>
</div>

m-global-eyebrow

Includes:

• USA flag
• Text: An official website of the United States government
• Gray background and bottom border
• This component appears on consumerfinance.gov and in the CFPB Design System code (and the UI of the actual DS site) but is not a component or pattern in the CFPB Design System documentation

<div class="m-global-eyebrow">
    <div class="a-tagline">
        <span class="u-usa-flag"></span>
        <div>
            An official website of the
            <span class="u-nowrap">United States government</span>
        </div>
    </div>
</div>

.m-global-eyebrow {
  font-size: unit((12px / @base-font-size-px), em);
  padding-top: unit((@grid_gutter-width / 3 / @base-font-size-px), em);
  padding-bottom: unit((@grid_gutter-width / 3 / @base-font-size-px), em);
  background: @gray-5;
  border-bottom: 1px solid @gray-40;
}

m-global-eyebrow_actions

Includes:

• USA flag
• Text: An official website of the United States government text, plus the plus the
• Gray background and bottom border
• Languages links
• Submit a complaint phone number link
• This component appears on consumerfinance.gov but is not a component or pattern in the CFPB Design System documentation site.

Component naming

In thinking about the naming of these components I took a look at a few other federal government design systems to see how they handle these nearly identical components.

USWDS

Name: Banner
Name in code: usa-banner
https://designsystem.digital.gov/components/banner/

Veteran's Affairs

Name: banner - official gov
Name in code: va-official-gov-banner
https://design.va.gov/components/banner/official-gov

If we decide to add .m-global-eyebrow as a component to the CFPB DS website we may want to consider either giving it a more descriptive name in the code (alluding to the usa, or official gov, or gov, etc) or, at least, giving it a name like this in the documentation site. Regardless this brings up an important question - how do we handle components that are included in the CFPB DS codebase but not on the CFPB DS documentation website (i.e. visually listed as a component on the website). And, what is the approach to determining what is or isn't included in the CFPB DS website?

[natalia-fitzgerald]

Shifting this one to @billhimmelsbach since he's working on the Tagline.