@scottish-government/designsystem-react 1.0.1 → 1.1.0

package/package.json

@@ -1,37 +1,43 @@
 {
   "name": "@scottish-government/designsystem-react",
   "description": "A React/JSX implementation of the Scottish Government Design System",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "MIT",
   "author": {
     "name": "Scottish Government Digital Design System team",
     "email": "designsystem@gov.scot",
     "url": "https://designsystem.gov.scot"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scottish-government-design-system/designsystem-react"
+  },
   "typings": "dist/index.d.ts",
   "main": "dist/index.js",
   "scripts": {
     "build": "npx eslint && npm run svgr && npm run tsc",
+    "build-storybook": "storybook build",
+    "prepare": "npm run build",
+    "prepublishOnly": "vitest test.tsx --run",
     "svgr": "npx @svgr/cli node_modules/@scottish-government/design-system/src/images/icons/svg --config-file .svgrrc",
     "svgr_documents": "npx @svgr/cli node_modules/@scottish-government/design-system/src/images/documents/svg --config-file .svgrrc_documents",
     "test": "vitest test.tsx",
-    "test:coverage": "vitest test.tsx run --coverage",
+    "test:coverage": "vitest test.tsx --run --coverage",
     "tsc": "node ./node_modules/typescript/bin/tsc",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook": "storybook dev -p 6006"
   },
   "peerDependencies": {
-    "@scottish-government/design-system": "^4.0.0"
+    "@scottish-government/design-system": "^4.1.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/js": "^9.39.1",
-    "@scottish-government/design-system": "^4.0.0",
-    "@storybook/addon-a11y": "^10.0.8",
-    "@storybook/addon-docs": "^10.0.8",
-    "@storybook/addon-onboarding": "^10.0.8",
-    "@storybook/addon-vitest": "^10.0.8",
-    "@storybook/react-vite": "^10.0.8",
+    "@scottish-government/design-system": "^4.1.1",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-onboarding": "^10.4.2",
+    "@storybook/addon-vitest": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
     "@svgr/cli": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -41,9 +47,9 @@
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
-    "@vitest/browser": "4.0.10",
-    "@vitest/browser-playwright": "^4.0.10",
-    "@vitest/coverage-v8": "^4.0.10",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "clsx": "^2.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",
@@ -51,9 +57,9 @@
     "jsdom": "^27.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "storybook": "^10.1.10",
+    "storybook": "^10.4.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.47.0",
-    "vitest": "^4.0.10"
+    "vitest": "^4.1.8"
   }
 }

package/src/common/AbstractNotificationMessage/AbstractNotificationMessage.test.tsx

@@ -0,0 +1,101 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import AbstractNotificationMessage from './AbstractNotificationMessage';
+
+const NOTIFICATION_TEXT = 'Further details of the notification message';
+const TITLE_TEXT = 'Important information';
+
+test('abstract notification message renders correctly', () => {
+    render(
+        <AbstractNotificationMessage title={TITLE_TEXT}>
+            {NOTIFICATION_TEXT}
+        </AbstractNotificationMessage>
+    );
+
+    const container = document.querySelector('.ds_notification-message');
+    const heading = screen.getByRole('heading');
+    const content = heading.nextElementSibling;
+   
+    expect(container?.ariaLive).toEqual('polite');
+
+    expect(heading.tagName).toEqual('H3');
+    expect(heading.textContent).toEqual(TITLE_TEXT)
+    expect(content?.textContent).toEqual(NOTIFICATION_TEXT)
+});
+
+test('abstract notification message with close button', () => {
+    render(
+        <AbstractNotificationMessage isDismissable>
+            {NOTIFICATION_TEXT}
+        </AbstractNotificationMessage>
+    );
+
+    const closeButton = screen.getByRole('button');
+    const closeButtonLabel = within(closeButton).getByText('Close this notification');
+    const closeButtonIcon = within(closeButton).getByRole('img', { hidden: true });
+
+    expect(closeButton).toHaveClass('ds_notification-message__close', 'js-close-notification-message');
+    expect(closeButton).toHaveAttribute('type', 'button');
+
+    expect(closeButtonLabel).toBeInTheDocument();
+    expect(closeButtonLabel).toHaveClass('visually-hidden');
+
+    expect(closeButtonIcon).toHaveClass('ds_icon', 'ds_icon--fill');
+});
+
+test('abstract notification message with icon', () => {
+    render(
+        <AbstractNotificationMessage icon="Search">
+            {NOTIFICATION_TEXT}
+        </AbstractNotificationMessage>
+    );
+
+
+    const notificationIcon = screen.getByRole('img', { hidden: true });
+
+    expect(notificationIcon).toHaveClass('ds_icon', 'ds_notification-message__icon', 'ds_icon--24');
+    expect(notificationIcon).toHaveAttribute('aria-hidden');
+});
+
+test("does not render body when no children specified", () => {
+  const { container } = render(<AbstractNotificationMessage title={TITLE_TEXT} />);
+
+  expect(
+    container.querySelector(".ds_notification-message__body"),
+  ).not.toBeInTheDocument();
+});
+
+test('abstract notification message with custom aria live and custom header level', () => {
+    render(
+        <AbstractNotificationMessage headingLevel="h2" ariaLive="assertive" title={TITLE_TEXT}/>
+    );
+
+    const container = document.querySelector('.ds_notification-message');
+    const heading = screen.getByRole('heading');
+
+    expect(container?.ariaLive).toEqual('assertive');
+
+    expect(heading.tagName).toEqual('H2');
+});
+
+test('passing additional props', () => {
+    render(
+        <AbstractNotificationMessage data-test="foo">
+            {NOTIFICATION_TEXT}
+        </AbstractNotificationMessage>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <AbstractNotificationMessage className="foo">
+            {NOTIFICATION_TEXT}
+        </AbstractNotificationMessage>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container).toHaveClass('foo', 'ds_notification-message');
+});

package/src/common/AbstractNotificationMessage/AbstractNotificationMessage.tsx

@@ -0,0 +1,56 @@
+import Icon from '../Icon';
+import ScreenReaderText from '../ScreenReaderText';
+import WrapperTag from '../WrapperTag';
+import { AbstractNotificationMessageProps } from './types';
+import clsx from 'clsx';
+
+const AbstractNotificationMessage = ({
+    ariaLive = 'polite',
+    children,
+    className,
+    headingLevel = 'h3',
+    icon,
+    isDismissable,
+    title,
+    ...props
+}: AbstractNotificationMessageProps) => {
+
+    return (
+        <div
+            aria-live={ariaLive}
+            className={clsx([
+                'ds_notification-message',
+                className
+            ])}
+            data-module="ds-notification-message"
+            {...props}
+        >
+            {icon &&
+                <Icon icon={icon} className="ds_notification-message__icon" iconSize="24" />
+            }
+            <WrapperTag
+                className="ds_notification-message__title"
+                tagName={headingLevel}
+            >
+                {title}
+            </WrapperTag>
+
+            {children &&
+                <div className="ds_notification-message__body">
+                    {children}
+                </div>
+            }
+
+            {isDismissable &&
+                <button type="button" className="ds_notification-message__close  js-close-notification-message">
+                    <ScreenReaderText>Close this notification</ScreenReaderText>
+                    <Icon isFilled icon="Close" aria-hidden="true" />
+                </button>
+            }
+        </div>
+    );
+};
+
+AbstractNotificationMessage.displayName = 'AbstractNotificationMessage';
+
+export default AbstractNotificationMessage;

package/src/common/AbstractNotificationMessage/index.ts

@@ -0,0 +1 @@
+export { default } from './AbstractNotificationMessage';

package/src/common/AbstractNotificationMessage/types.ts

@@ -0,0 +1,10 @@
+import { HeadingLevel, IconName } from '../../shared-types';
+
+export interface AbstractNotificationMessageProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    ariaLive?: React.AriaAttributes['aria-live'];
+    headingLevel?: HeadingLevel;
+    icon?: IconName;
+    isDismissable?: boolean;
+    title?: string;
+    ref?: React.Ref<HTMLDivElement>;
+}

package/src/components/Button/Button.stories.tsx

@@ -33,7 +33,7 @@ const meta = {
         },
         icon: {
             description: 'Name of the icon component to use',
-            options: ['ArrowUpward', 'CalendarToday', 'Cancel', 'CheckCircle', 'ChevronLeft', 'ChevronRight', 'Close', 'Description', 'DoubleChevronLeft', 'DoubleChevronRight' ,'Error', 'ExpandLess', 'ExpandMore', 'List', 'PriorityHigh', 'Search'],
+            options: ['ArrowUpward', 'CalendarToday', 'Cancel', 'CheckCircle', 'ChevronLeft', 'ChevronRight', 'Close', 'Description', 'DoubleChevronLeft', 'DoubleChevronRight' ,'Error', 'ExpandLess', 'ExpandMore', 'Info', 'List', 'PriorityHigh', 'Search', 'Warning'],
             control: { type: 'select' },
             type: 'string'
         },

package/src/components/ConfirmationMessage/ConfirmationMessage.stories.tsx

@@ -4,17 +4,19 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import ConfirmationMessage from './ConfirmationMessage';
 
 const meta = {
-    title: 'Components/ConfirmationMessage',
+    title: 'Deprecated/ConfirmationMessage',
     component: ConfirmationMessage,
     argTypes: {
-        headingLevel: argTypes.headingLevel(),
         ariaLive: argTypes.ariaLive(),
-        children: argTypes.children()
+        children: argTypes.children(),
+        headingLevel: argTypes.headingLevel(),
+        isDismissable: argTypes.boolean()
     },
     args: {
         ariaLive: 'polite',
         children: (<p>You have added the landlord <strong>John Smith</strong> to the application.</p>),
         headingLevel: 'h3',
+        isDismissable: false,
         title: 'Landlord added successfully',
     }
 } satisfies Meta<typeof ConfirmationMessage>;
@@ -36,3 +38,9 @@ export const DifferentHeadingLevel: Story = {
         headingLevel: 'h2'
     }
 };
+
+export const Dismissable: Story = {
+    args: {
+        isDismissable: true
+    }
+};

package/src/components/ConfirmationMessage/ConfirmationMessage.test.tsx

@@ -1,66 +1,101 @@
 import { test, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import ConfirmationMessage from './ConfirmationMessage';
 
-const TITLE_TEXT = 'Landlord added successfully';
+const NOTIFICATION_TEXT = 'Further details of the notification message';
+const TITLE_TEXT = 'Important information';
 
-test('renders correctly with icon, title and message', () => {
+test('confirmation notification message renders correctly', () => {
     render(
         <ConfirmationMessage title={TITLE_TEXT}>
-            <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
+            {NOTIFICATION_TEXT}
         </ConfirmationMessage>
     );
 
-    const container = document.querySelector('.ds_confirmation-message');
+    const container = document.querySelector('.ds_notification-message');
     const heading = screen.getByRole('heading');
-
+    const content = heading.nextElementSibling;
+   
     expect(container?.ariaLive).toEqual('polite');
 
     expect(heading.tagName).toEqual('H3');
     expect(heading.textContent).toEqual(TITLE_TEXT)
+    expect(content?.textContent).toEqual(NOTIFICATION_TEXT)
+});
+
+test('confirmation notification message with close button', () => {
+    render(
+        <ConfirmationMessage isDismissable>
+            {NOTIFICATION_TEXT}
+        </ConfirmationMessage>
+    );
+
+    const closeButton = screen.getByRole('button');
+    const closeButtonLabel = within(closeButton).getByText('Close this notification');
+    const closeButtonIcon = within(closeButton).getByRole('img', { hidden: true });
+
+    expect(closeButton).toHaveClass('ds_notification-message__close', 'js-close-notification-message');
+    expect(closeButton).toHaveAttribute('type', 'button');
+
+    expect(closeButtonLabel).toBeInTheDocument();
+    expect(closeButtonLabel).toHaveClass('visually-hidden');
+
+    expect(closeButtonIcon).toHaveClass('ds_icon', 'ds_icon--fill');
+});
+
+test('confirmation notification message with icon', () => {
+    render(
+        <ConfirmationMessage icon="Search">
+            {NOTIFICATION_TEXT}
+        </ConfirmationMessage>
+    );
+
+
+    const notificationIcon = screen.getByRole('img', { hidden: true });
+
+    expect(notificationIcon).toHaveClass('ds_icon', 'ds_notification-message__icon', 'ds_icon--24');
+    expect(notificationIcon).toHaveAttribute('aria-hidden');
 });
 
 test("does not render body when no children specified", () => {
   const { container } = render(<ConfirmationMessage title={TITLE_TEXT} />);
 
   expect(
-    container.querySelector(".ds_confirmation-message__body"),
+    container.querySelector(".ds_notification-message__body"),
   ).not.toBeInTheDocument();
 });
 
-test('renders confirmation message with custom aria live and custom heaer level', () => {
+test('confirmation notification message with custom aria live and custom header level', () => {
     render(
-        <ConfirmationMessage headingLevel="h2" ariaLive="alert" title={TITLE_TEXT}>
-            <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
-        </ConfirmationMessage>
+        <ConfirmationMessage headingLevel="h2" ariaLive="assertive" title={TITLE_TEXT}/>
     );
 
-    const container = document.querySelector('.ds_confirmation-message');
+    const container = document.querySelector('.ds_notification-message');
     const heading = screen.getByRole('heading');
 
-    expect(container?.ariaLive).toEqual('alert');
+    expect(container?.ariaLive).toEqual('assertive');
 
     expect(heading.tagName).toEqual('H2');
 });
 
 test('passing additional props', () => {
     render(
-        <ConfirmationMessage data-test="foo" title={TITLE_TEXT}>
-            <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
+        <ConfirmationMessage data-test="foo">
+            {NOTIFICATION_TEXT}
         </ConfirmationMessage>
-    );
+    )
 
-    const container = document.querySelector('.ds_confirmation-message') as HTMLElement;
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
     expect(container?.dataset.test).toEqual('foo');
 });
 
 test('passing additional CSS classes', () => {
     render(
-        <ConfirmationMessage className="foo" title={TITLE_TEXT}>
-            <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
+        <ConfirmationMessage className="foo">
+            {NOTIFICATION_TEXT}
         </ConfirmationMessage>
-    );
+    )
 
-    const container = document.querySelector('.ds_confirmation-message');
-    expect(container).toHaveClass('foo', 'ds_confirmation-message');
-})
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container).toHaveClass('foo', 'ds_notification-message');
+});

package/src/components/ConfirmationMessage/ConfirmationMessage.tsx

@@ -1,37 +1,44 @@
-import Icon from '../../common/Icon';
-import WrapperTag from '../../common/WrapperTag';
-import { ConfirmationMessageProps } from './types';
-import clsx from 'clsx';
+/**
+ * @deprecated
+ *
+ * This component has been deprecated, please use ConfirmationNotification instead
+ *
+ * Before:
+ *
+ * `<ConfirmationMessage />`
+ *
+ * After:
+ *
+ * `<ConfirmationNotification />`
+ *
+ * @deprecatedSince 1.1.0
+ *
+*/
+
+import ConfirmationNotification from '..//ConfirmationNotification';
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
 
 const ConfirmationMessage = ({
-    ariaLive = 'polite',
+    ariaLive,
     children,
     className,
-    headingLevel = 'h3',
+    headingLevel,
+    isDismissable,
     title,
     ...props
-}: ConfirmationMessageProps) => {
+}: AbstractNotificationMessageProps) => {
+    
     return (
-        <div
-            aria-live={ariaLive}
-            className={clsx([
-                'ds_confirmation-message',
-                className
-            ])}
+        <ConfirmationNotification
+            ariaLive={ariaLive}
+            className={className}
+            headingLevel={headingLevel}
+            isDismissable={isDismissable}
+            title={title}
             {...props}
         >
-            <Icon className="ds_confirmation-message__icon" icon="CheckCircle" iconSize="24" />
-
-            <WrapperTag
-                className="ds_confirmation-message__title"
-                tagName={headingLevel}
-            >
-                {title}
-            </WrapperTag>
-            {children && <div className="ds_confirmation-message__body">
-                {children}
-            </div>}
-        </div>
+            {children}
+        </ConfirmationNotification>
     );
 };
 

package/src/components/ConfirmationMessage/confirmationmessage.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Controls, Meta, Title, Stories } from '@storybook/addon-docs/blocks';
+
+import * as ComponentStories from './ConfirmationMessage.stories';
+
+<Meta of={ComponentStories} />
+
+<Title></Title>
+
+## Deprecated
+
+`<ConfirmationMessage>` is deprecated, instead use [Confirmation Notification](?path=/docs/components-notificationmessage-confirmationnotification--docs).
+
+<Canvas of={ComponentStories.Default} />
+
+<Controls of={ComponentStories.Default} />
+
+<Stories/>

package/src/components/ConfirmationNotification/ConfirmationNotification.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ConfirmationNotification from './ConfirmationNotification';
+
+const meta = {
+    title: 'Components/NotificationMessage/ConfirmationNotification',
+    component: ConfirmationNotification,
+    argTypes: {
+        ariaLive: argTypes.ariaLive(),
+        children: argTypes.children(),
+        headingLevel: argTypes.headingLevel(),
+        icon: { table: { disable: true } },
+        isDismissable: argTypes.boolean()
+    },
+    args: {
+        ariaLive: 'polite',
+        children: (<p>You have added the landlord <strong>John Smith</strong> to the application.</p>),
+        headingLevel: 'h3',
+        isDismissable: false,
+        title: 'Landlord added successfully',
+    }
+} satisfies Meta<typeof ConfirmationNotification>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const NoChildren: Story = {
+    args: {
+        children: undefined
+    }
+};
+
+export const DifferentHeadingLevel: Story = {
+    args: {
+        headingLevel: 'h2'
+    }
+};
+
+export const Dismissable: Story = {
+    args: {
+        isDismissable: true
+    }
+};

package/src/components/ConfirmationNotification/ConfirmationNotification.test.tsx

@@ -0,0 +1,101 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import ConfirmationNotification from './ConfirmationNotification';
+
+const NOTIFICATION_TEXT = 'Further details of the notification message';
+const TITLE_TEXT = 'Important information';
+
+test('confirmation notification message renders correctly', () => {
+    render(
+        <ConfirmationNotification title={TITLE_TEXT}>
+            {NOTIFICATION_TEXT}
+        </ConfirmationNotification>
+    );
+
+    const container = document.querySelector('.ds_notification-message');
+    const heading = screen.getByRole('heading');
+    const content = heading.nextElementSibling;
+   
+    expect(container?.ariaLive).toEqual('polite');
+
+    expect(heading.tagName).toEqual('H3');
+    expect(heading.textContent).toEqual(TITLE_TEXT)
+    expect(content?.textContent).toEqual(NOTIFICATION_TEXT)
+});
+
+test('confirmation notification message with close button', () => {
+    render(
+        <ConfirmationNotification isDismissable>
+            {NOTIFICATION_TEXT}
+        </ConfirmationNotification>
+    );
+
+    const closeButton = screen.getByRole('button');
+    const closeButtonLabel = within(closeButton).getByText('Close this notification');
+    const closeButtonIcon = within(closeButton).getByRole('img', { hidden: true });
+
+    expect(closeButton).toHaveClass('ds_notification-message__close', 'js-close-notification-message');
+    expect(closeButton).toHaveAttribute('type', 'button');
+
+    expect(closeButtonLabel).toBeInTheDocument();
+    expect(closeButtonLabel).toHaveClass('visually-hidden');
+
+    expect(closeButtonIcon).toHaveClass('ds_icon', 'ds_icon--fill');
+});
+
+test('confirmation notification message with icon', () => {
+    render(
+        <ConfirmationNotification icon="Search">
+            {NOTIFICATION_TEXT}
+        </ConfirmationNotification>
+    );
+
+
+    const notificationIcon = screen.getByRole('img', { hidden: true });
+
+    expect(notificationIcon).toHaveClass('ds_icon', 'ds_notification-message__icon', 'ds_icon--24');
+    expect(notificationIcon).toHaveAttribute('aria-hidden');
+});
+
+test("does not render body when no children specified", () => {
+  const { container } = render(<ConfirmationNotification title={TITLE_TEXT} />);
+
+  expect(
+    container.querySelector(".ds_notification-message__body"),
+  ).not.toBeInTheDocument();
+});
+
+test('confirmation notification message with custom aria live and custom header level', () => {
+    render(
+        <ConfirmationNotification headingLevel="h2" ariaLive="assertive" title={TITLE_TEXT}/>
+    );
+
+    const container = document.querySelector('.ds_notification-message');
+    const heading = screen.getByRole('heading');
+
+    expect(container?.ariaLive).toEqual('assertive');
+
+    expect(heading.tagName).toEqual('H2');
+});
+
+test('passing additional props', () => {
+    render(
+        <ConfirmationNotification data-test="foo">
+            {NOTIFICATION_TEXT}
+        </ConfirmationNotification>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <ConfirmationNotification className="foo">
+            {NOTIFICATION_TEXT}
+        </ConfirmationNotification>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container).toHaveClass('foo', 'ds_notification-message');
+});