Tagline, Global eyebrow, and Global eyebrow actions

[natalia-fitzgerald]

As we continue our work on building the React component library we are currently working on adding the Tagline and Global eyebrow components.

Based on the SBL layouts we will need components that match:

• a-tagline
• m-global-eyebrow
• m-global-eyebrow_actions

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

• The equivalent of the a-tagline pieces are called usa-banner__header-textand "usa-banner__header-flag" in the code.
  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 (leaving the names in code as-is).

Questions:

• Can we add m-global-eyebrow and m-global-eyebrow_actions to the CFPB Design System documentation site?
• Is there an opportunity to rename these components to:
  • Better align with other government agencies that use a very similar component?
  • Assign a name that is more descriptive of the component?

@sonnakim for consultation and awareness

[natalia-fitzgerald]

I talked this over with @sonnakim and I have my next steps:

• Write more general intro content that makes sense for the banner as a more general component (specifics will be found under Types)
• Add the global eyebrow as a Type (and rename to something more descriptive - Official gov banner or US gov banner)
• Move Taglines to the components section
• Figure out how to handle the actions variation (not really a Type but more of a variation on global eyebrow)
• Update: I moved Taglines to the components section. It is now in the "Alerts" subsection. This doesn't make sense but there wasn't a better subsection for it. I recommend that we remove all subsections and create a flat and alphabetized components section.

[natalia-fitzgerald]

@sonnakim
I tried out the approach we outlined for the global eyebrow and it didn't work as well as I had hoped. Unfortunately, the global eyebrow is quite different than the other two banners that are currently housed in the "Banner notifications" component page.

Another idea I have is to separate these into sections. I mocked up a flat structure for the left nav (just used the Chrome inspector). If we really did it, it would be alphabetized (not like what I show in the mock-up).

• Banner (notification)
• Banner (US gov)

I think that at this point in time it would be quite helpful to remove the groupings from the components section (Alerts, Behavior, Form components, List and Tables). It is hard to come up with the right solution or even a stop gap solution while those are still in place. Is this something that we could prioritize? If not we will come up with a solution that makes sense within the React component library where we do have this flat structure and then do our best within the DS although that will mean having things like "Banner (US gov)" under "Alerts".

Might you be open to removing the groupings at this point in time?

[sonnakim]

For the record, @natalia-fitzgerald and I chatted, and I'm fine with removing those groupings. I don't think it should be a controversial move, but we can always restore them if that's the case.

[natalia-fitzgerald]

@sonnakim
Yeah, I think with the groupings gone we can get a clearer picture of whether the no-groupings model works well or whether there may be helpful groupings that we will want to add back in. In consulting different design systems for my current project it does seem like the no-groupings with components alphabetized is quite common though. My sense is that it is easier for skimming and findability.

I noticed that the groupings label (eyebrow) is still showing up on the individual component pages. A temporary workaround could be to add a grouping label for the entire section. The first thing I thought of was "Components by type." It's a little redundant and it would be better if it were one word so I would be open to something else. Let me know what you think of this workaround and, if you'd like to go with it, what wording you would prefer. In the mock-ups I used "Component" as a placeholder. The alternative is that we just leave the legacy eyebrows for now as we wait for the technical fix to remove the level all together.

Here's what we have now and what the groupings label could look like if we choose to go that route as a temporary fix:

Current state - legacy label	Generic label for whole section

In doing this I did notice that we don't have a link styling change or visual indicator in the left nav to indicate the current page a user is on. I opened a separate issue for this so as not to distract from the purpose of this specific issue. Here's a link to that issue: #1809

For the Banner pages here's a possible approach to the page breakdowns. I think I'd prefer to go with Option 1 for the sake of consistency and simplicity but I did want to present the 2 options so that we can compare.

Option 1	Option 2

Option 1	Option 2

[sonnakim]

Natalia and I chatted about this — she will use "Components" as a placeholder for the eyebrow. I'm going to remove the subsections for Patterns as well, so there too, when I do that work, I'll update the eyebrows on those pages to "Patterns". We'll then decide whether it makes sense to have an eyebrow at all if there are no subsections.

Also I agree with the approach mocked up in Option 1 for the titles of the banner pages 👍

[natalia-fitzgerald]

Hi @sonnakim
I implemented the change to create the "Components" grouping. The catch is that this update isn't reaching the individual component pages because the eyebrows on those pages are hard coded. #1396. So we'll have to handle that piece as a separate task.

Here's a link showing the label change in the left navigation:
https://cfpb.github.io/design-system/components/buttons

And here's a link showing the new wording for the Banner (notification) page and left navigation label. https://cfpb.github.io/design-system/components/banner-notification

[sonnakim]

Thanks @natalia-fitzgerald. The eyebrows on individual component pages can be changed by editing the markdown file directly, rather than using the CMS. I've already done this on the radio buttons page — let me know if you'd like me to walk you through how that's done

[natalia-fitzgerald]

Hi @sonnakim
How does this look to you as a start to the Banner (US gov) page?
https://cfpb.github.io/design-system/components/banner-us-gov

As a next step we can determine whether we will add the m-global-eyebrow_actions component. On the DSR side we plan to add a second component called "US gov banner (with links)". Generally my preference is that we have a parallel component in the CFPB DS for components we include in thee DSR. Particularly if that component is already used on consumerfinance.gov. Are there any complications or reasons we would not want to add the m-global-eyebrow_actions component to the DS?

[natalia-fitzgerald]

Thanks @natalia-fitzgerald. The eyebrows on individual component pages can be changed by editing the markdown file directly, rather than using the CMS. I've already done this on the radio buttons page — let me know if you'd like me to walk you through how that's done

Thanks @sonnakim. I have made these updates the component pages on the DS. The eyebrow is now "Components" for all components pages.

[sonnakim]

Awesome, thanks!

[natalia-fitzgerald]

Here's where we landed.

Banner (US gov)	Taglines

All items here have been handled except for the question of the US gov banner (with links) (m-global-eyebrow_actions). We have not confirmed whether we need this component for the project so we will wait to addd it.
#1797 (comment)