Banner

Helps users to identify they have eventered a Hub section of the website

Accessible banner component used to present contextual messaging and callouts.

@wmcadigital/ui-banner

Banner styles and a small initializer for presenting contextual messages (site-wide callouts, emergency notices, hub banners). The package supplies multiple banner partials (emergency, homepage, hub page) and a standard markup/behaviour pattern.

Install

pnpm add @wmcadigital/ui-banner

What this package provides

• Compiled CSS at dist/styles/main.css (and SCSS sources in src/styles/).
• Modular SCSS partials: _banner.scss, _homepage-banner.scss, _hub-page-banner.scss, _phase-indicator.scss for variant styling.
• A small initializer (exported by the package entry) intended to wire up dismiss behaviour in demos; the README below documents expected markup and accessibility recommendations.

Markup

Minimal accessible structure:

<div
  class="ds-banner-container ds-banner-container--emergency"
  role="region"
  aria-label="Site message"
>
  <div class="ds-banner-container__phase-wrapper">...optional phase indicator...</div>
  <div class="ds-banner-container__text">
    <p>Important message for users. <a class="ds-link" href="/more">Learn more</a></p>
  </div>
  <div class="ds-banner-container__emergency-close-col">
    <button class="ds-banner-container__emergency-close" aria-label="Dismiss">Dismiss</button>
  </div>
</div>

Notes:

• Use a focusable, descriptive control for dismiss; aria-label is appropriate for icon-only buttons.
• The _banner.scss partial contains utility classes and ordering helpers for responsive layouts and phase indicators.

Variants

• ds-banner-container--emergency — high-contrast emergency style (uses --color-error and inverts link colours).
• ds-banner-container__phase-wrapper / __text / __link / __close — sub-elements used to structure and order content at different breakpoints.

Accessibility

• Wrap banners in a landmark (role="region" or a banner/header element) and provide a descriptive label (e.g. aria-label="Site message").
• Ensure the dismiss control is keyboard-accessible and labelled (aria-label or visible text).
• Avoid auto-dismissing essential notices without user control. If you auto-hide non-essential messages, provide a mechanism to redisplay them.

Behaviour

• The package does not enforce persistence; if you need dismissed-state persistence (cookie/localStorage), implement that in consumer code or extend the initializer.

Customisation

• Override design tokens and variables used in the SCSS ($size-*, --color-error, --color-text, etc.) to match your theme.
• The _homepage-banner.scss and _hub-page-banner.scss partials provide layout examples you can adapt.

Development

• SCSS sources: src/styles/_banner.scss, _homepage-banner.scss, _hub-page-banner.scss, _phase-indicator.scss and src/styles/main.scss.
• Build from the monorepo root:

pnpm -w -r run build

• Linting and tests:

pnpm -w -r run lint
pnpm -w -r run test