@scottish-government/designsystem-react 1.0.0 → 1.1.0

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/Card/Card.tsx

@@ -5,7 +5,7 @@ import AspectBox from '../AspectBox';
 import Metadata from '../PageMetadata';
 import Tag from '../Tag';
 import { CardProps, CardHeaderProps, CardMediaProps, CardStatusTagProps } from "./types";
-import { HeadingLevel, LinkComponent } from '@/src/shared-types';
+import { HeadingLevel, LinkComponent } from '../../shared-types';
 import clsx from 'clsx';
 
 type CardSettingsContextProps = {
@@ -124,7 +124,7 @@ const CardMedia = ({
     ...props
 }: CardMediaProps) => {
     return (
-        <div 
+        <div
             className={clsx([
                 'ds_card__media',
                 isCover && ratio && 'ds_card__media--cover',

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');
+});

package/src/components/ConfirmationNotification/ConfirmationNotification.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react';
+import AbstractNotificationMessage from '../../common/AbstractNotificationMessage';
+import DSNotificationMessage from '@scottish-government/design-system/src/components/notification-message/notification-message';
+import { AbstractNotificationMessageProps } from '../../common/AbstractNotificationMessage/types';
+import clsx from 'clsx';
+
+const ConfirmationNotification = ({
+    ariaLive,
+    children,
+    className,
+    headingLevel = 'h3',
+    isDismissable,
+    title,
+    ...props
+}: AbstractNotificationMessageProps) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        /* istanbul ignore else */
+        if (ref.current) {
+            new DSNotificationMessage(ref.current).init();
+        }
+    }, [ref]);
+    
+    return (
+        <AbstractNotificationMessage
+            ariaLive={ariaLive}
+            className={clsx([
+                'ds_notification-message--success',
+                className
+            ])}
+            headingLevel={headingLevel}
+            icon="CheckCircle"
+            isDismissable={isDismissable}
+            ref={ref}
+            title={title}
+            {...props}
+        >
+            {children}
+        </AbstractNotificationMessage>
+    );
+};
+
+ConfirmationNotification.displayName = 'ConfirmationNotification';
+
+export default ConfirmationNotification;

package/src/components/ConfirmationNotification/index.ts

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

package/src/components/CookieBanner/CookieBanner.tsx

@@ -1,7 +1,7 @@
 
 import { useEffect, useRef } from 'react';
 import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
-import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';
+import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification';
 import { AbstractNotificationBannerProps } from '../../common/AbstractNotificationBanner/types';
 import clsx from 'clsx';
 

package/src/components/ErrorNotification/ErrorNotification.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import ErrorNotification from './ErrorNotification';
+
+const meta = {
+    title: 'Components/NotificationMessage/ErrorNotification',
+    component: ErrorNotification,
+    argTypes: {
+        ariaLive: argTypes.ariaLive(),
+        children: argTypes.children(),
+        headingLevel: argTypes.headingLevel(),
+        icon: { table: { disable: true } },
+        isDismissable: argTypes.boolean()
+    },
+    args: {
+        ariaLive: 'polite',
+        children: (<p>That link does not seem to be working.<br />Please try again.</p>),
+        headingLevel: 'h3',
+        isDismissable: false,
+        title: 'Something went wrong',
+    }
+} satisfies Meta<typeof ErrorNotification>;
+
+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
+    }
+};