@wmcadigital/ui-travel-mode-banner

TfWM banner styles for displaying travel mode information (styling-only package).

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-travel-mode-banner

Using npm:

npm install @wmcadigital/ui-travel-mode-banner

Using yarn:

yarn add @wmcadigital/ui-travel-mode-banner

What this package provides

• SCSS wrapper that re-uses the travel-mode-page-banner module and the design system helpers.
• The package exposes compiled CSS at dist/styles/main.css and SCSS source in src/styles/main.scss.
• This package does not export JavaScript components — import its CSS into your build to apply the banner styles.

Usage

Include the stylesheet in HTML:

<link
  rel="stylesheet"
  href="/node_modules/@wmcadigital/ui-travel-mode-banner/dist/styles/main.css"
/>

Or import the styles from your entry point (recommended for bundlers):

import '@wmcadigital/ui-travel-mode-banner';
// or import '@wmcadigital/ui-travel-mode-banner/dist/styles/main.css'

This package relies on the underlying travel-mode-page-banner styles. Refer to your design system documentation for available class names and modifiers.

Accessibility

• Ensure banner content is readable and has sufficient colour contrast.
• Use appropriate ARIA roles or landmarks if the banner conveys critical information (for example role="status" for live notifications).

Customisation

• Override design tokens via CSS variables or by adjusting the consuming project's theme variables.
• You can compose or extend the travel-mode-page-banner patterns in your local stylesheet.

Development

Build from the repository root:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.