@wmcadigital/ui-message

Gives users feedback during interaction with a website — styling utilities for inline messages, summaries and help text.

Usage

import { hello } from '@wmcadigital/ui-message';

Installation

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-message

Using npm:

npm install @wmcadigital/ui-message

Using yarn:

yarn add @wmcadigital/ui-message

What this package provides

• SCSS modules and compiled CSS for message-related patterns (summary, help, and related utilities).
• Compiled CSS is available at dist/styles/main.css; SCSS source is in src/styles/main.scss.
• This package is styling-only — it does not export JavaScript components. Import the styles in your build to use the classes.

Usage

Include the stylesheet in HTML:

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

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

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

Example HTML (summary/help/message):

<div class="ds-summary">Summary text or brief message goes here.</div>

<p class="ds-help">Additional help text with guidance for the user.</p>

Refer to your design system docs for the exact class names and modifiers provided by the summary and help modules.

Accessibility

• Use appropriate semantics and ARIA where the message conveys important status (for example, role="status" or role="alert" depending on urgency).
• Keep message text concise and ensure sufficient contrast for readability.

Customisation

• Theme and tokens are controlled via the monorepo design system variables (for example --color-primary). Override locally as required.

Development

Build from the repository root:

pnpm -w -r run build

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