USWDS - Banner: Support simplified icon markup using SVG mask

[aduth]

Summary

The Banner component markup has been simplified. The banner component no longer includes an embedded icon image, which is instead rendered as part of banner styles.

Breaking change

This is not a breaking change.

While this does change how the existing element is styled, this has been tested and confirmed support for a site which chooses to update to the newest styles while keeping the same HTML markup, and there is no observed visual regression.

Preview link

Preview link: http://localhost:6006/?path=/story/components-banner--default

Problem statement

Ideally, USWDS provides code snippets which are concise and easy to implement, do not needlessly duplicate existing resources, and are not at risk of falling out of sync with said resources.

Solution

Reference the existing lock.svg image CSS background mask, similar to what's done elsewhere in the banner with the "Here's how you know" expanding caret.

Benefits:

• Simpler markup
• More efficient page loads, since image will be referenced externally and loaded on-demand
• Avoids use of non-BEM-standard icon-lock wrapping element
• Backwards-compatible for sites which don't opt to change their existing markup

Testing and review

Review at preview link: http://localhost:6006/?path=/story/components-banner--default

To confirm backwards-compatibility, reset markup of .twig file to develop branch and observe no visual regressions even with updated styling:

git checkout develop -- packages/usa-banner/src/usa-banner.twig

[mejiaj]

Thanks for submitting this.

For additional context, this icon was originally added in Update banner settings and related mixins - #3531.

This icon is used between the parenthesis in Banner content (orange outline for visibility)

[aduth]

@mejiaj Thanks for the context. I see the label "Decided Against" was added. Was there something about the changes in #3531 which are contrary to or conflict with the proposed changes here?

[thisisdano]

@aduth For right now, we're not proceeding with changes that might introduce a breaking change in the current banner. We're putting our focus into a Web Components version of the banner that we hope to release as a stable Beta in July.

[aduth]

For posterity's sake, clarifying that there are no breaking changes with this proposal.