warning-text

Help users identify and understand warning content on the page, even if they do not read the whole page

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-warning-text

Using npm:

npm install @wmcadigital/ui-warning-text

Using yarn:

yarn add @wmcadigital/ui-warning-text

What this package provides

• Compiled CSS for the warning-text component: dist/styles/main.css.
• SCSS source lives in src/styles/main.scss and exports the following classes:
  • .ds-warning-text — wrapper that provides layout and emphasised styling.
  • .ds-warning-text__icon — positioned icon slot intended for an inline SVG.

This package does not export JavaScript components — it provides styling only. Importing the package in a bundler will include the CSS when configured to do so.

Usage

Include the stylesheet directly in HTML (simple):

<link rel="stylesheet" href="/node_modules/@wmcadigital/ui-warning-text/dist/styles/main.css" />

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

import '@wmcadigital/ui-warning-text';
// or import '@wmcadigital/ui-warning-text/dist/styles/main.css'

HTML example:

<div class="ds-warning-text" role="status" aria-live="polite">
  <!-- Icon (SVG) — decorative for screen readers -->
  <svg class="ds-warning-text__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <!-- svg path here -->
  </svg>
  <span>This action may have consequences. Please proceed with caution.</span>
</div>

Notes:

• The wrapper uses font-weight and padding to visually emphasise the text and makes room for the icon.
• The icon slot is absolutely positioned; include an inline SVG with the .ds-warning-text__icon class.

Customisation

• Colours follow the design system CSS variables (for example --color-primary).
• To change the warning colour locally:

.my-page .ds-warning-text {
  --color-primary: #c05701; /* override as needed */
}

## Accessibility

- Prefer `role="status"` or another appropriate landmark so assistive technologies announce the message.
- Mark decorative icons with `aria-hidden="true"` and provide clear textual message content.

## Development

This package is built by the monorepo build scripts. From the repository root run:
```js
import '@wmcadigital/ui-warning-text';

Or include the built CSS:

<link rel="stylesheet" href="/node_modules/@wmcadigital/ui-warning-text/dist/styles/main.css" />

pnpm -w -r run build

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