@scottish-government/designsystem-react 1.0.1 → 1.1.0

package/src/components/InfoNotification/InfoNotification.test.tsx

@@ -0,0 +1,101 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import InfoNotification from './InfoNotification';
+
+const NOTIFICATION_TEXT = 'Further details of the notification message';
+const TITLE_TEXT = 'Important information';
+
+test('info notification message renders correctly', () => {
+    render(
+        <InfoNotification title={TITLE_TEXT}>
+            {NOTIFICATION_TEXT}
+        </InfoNotification>
+    );
+
+    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('info notification message with close button', () => {
+    render(
+        <InfoNotification isDismissable>
+            {NOTIFICATION_TEXT}
+        </InfoNotification>
+    );
+
+    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('info notification message with icon', () => {
+    render(
+        <InfoNotification icon="Search">
+            {NOTIFICATION_TEXT}
+        </InfoNotification>
+    );
+
+
+    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(<InfoNotification title={TITLE_TEXT} />);
+
+  expect(
+    container.querySelector(".ds_notification-message__body"),
+  ).not.toBeInTheDocument();
+});
+
+test('info notification message with custom aria live and custom header level', () => {
+    render(
+        <InfoNotification 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(
+        <InfoNotification data-test="foo">
+            {NOTIFICATION_TEXT}
+        </InfoNotification>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <InfoNotification className="foo">
+            {NOTIFICATION_TEXT}
+        </InfoNotification>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container).toHaveClass('foo', 'ds_notification-message');
+});

package/src/components/InfoNotification/InfoNotification.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 InfoNotification = ({
+    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--info',
+                className
+            ])}
+            headingLevel={headingLevel}
+            icon="Info"
+            isDismissable={isDismissable}
+            ref={ref}
+            title={title}
+            {...props}
+        >
+            {children}
+        </AbstractNotificationMessage>
+    );
+};
+
+InfoNotification.displayName = 'InfoNotification';
+
+export default InfoNotification;

package/src/components/InfoNotification/index.ts

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

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -30,7 +30,7 @@ const NotificationBanner = ({
                 className
             ])}
             isDismissable={isDismissable}
-            icon={hasIcon ? "PriorityHigh" : undefined}
+            icon={hasIcon ? "Warning" : undefined}
             hasColourIcon={hasColourIcon}
             hasInverseIcon={hasInverseIcon}
             ref={ref}

package/src/components/TextInput/TextInput.stories.tsx

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

package/src/components/WarningNotification/WarningNotification.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import WarningNotification from './WarningNotification';
+
+const meta = {
+    title: 'Components/NotificationMessage/WarningNotification',
+    component: WarningNotification,
+    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 WarningNotification>;
+
+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/WarningNotification/WarningNotification.test.tsx

@@ -0,0 +1,101 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import WarningNotification from './WarningNotification';
+
+const NOTIFICATION_TEXT = 'Further details of the notification message';
+const TITLE_TEXT = 'Important information';
+
+test('warning notification message renders correctly', () => {
+    render(
+        <WarningNotification title={TITLE_TEXT}>
+            {NOTIFICATION_TEXT}
+        </WarningNotification>
+    );
+
+    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('warning notification message with close button', () => {
+    render(
+        <WarningNotification isDismissable>
+            {NOTIFICATION_TEXT}
+        </WarningNotification>
+    );
+
+    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('warning notification message with icon', () => {
+    render(
+        <WarningNotification icon="Search">
+            {NOTIFICATION_TEXT}
+        </WarningNotification>
+    );
+
+
+    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(<WarningNotification title={TITLE_TEXT} />);
+
+  expect(
+    container.querySelector(".ds_notification-message__body"),
+  ).not.toBeInTheDocument();
+});
+
+test('warning notification message with custom aria live and custom header level', () => {
+    render(
+        <WarningNotification 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(
+        <WarningNotification data-test="foo">
+            {NOTIFICATION_TEXT}
+        </WarningNotification>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <WarningNotification className="foo">
+            {NOTIFICATION_TEXT}
+        </WarningNotification>
+    )
+
+    const container = document.querySelector('.ds_notification-message') as HTMLElement;
+    expect(container).toHaveClass('foo', 'ds_notification-message');
+});

package/src/components/WarningNotification/WarningNotification.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 WarningNotification = ({
+    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--warning',
+                className
+            ])}
+            headingLevel={headingLevel}
+            icon="Warning"
+            isDismissable={isDismissable}
+            ref={ref}
+            title={title}
+            {...props}
+        >
+            {children}
+        </AbstractNotificationMessage>
+    );
+};
+
+WarningNotification.displayName = 'WarningNotification';
+
+export default WarningNotification;

package/src/components/WarningNotification/index.ts

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

package/src/components/WarningText/WarningText.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { Icon } from '../../common';
 
 const WarningText = ({
     children,
@@ -13,7 +14,9 @@ const WarningText = ({
             ])}
             {...props}
         >
-            <strong className="ds_warning-text__icon" aria-hidden="true"></strong>
+            <strong className="ds_warning-text__icon" aria-hidden="true">
+                <Icon isFilled icon='Warning' />
+            </strong>
             <strong className="visually-hidden">Warning</strong>
             <div className="ds_warning-text__text">
                 {children}

package/src/images/icons/index.ts

@@ -11,7 +11,9 @@ export { default as DoubleChevronRight } from "./double_chevron_right";
 export { default as Error } from "./error";
 export { default as ExpandLess } from "./expand_less";
 export { default as ExpandMore } from "./expand_more";
+export { default as Info } from "./info";
 export { default as List } from "./list";
 export { default as Menu } from "./menu";
 export { default as PriorityHigh } from "./priority_high";
 export { default as Search } from "./search";
+export { default as Warning } from "./warning";

package/src/images/icons/info.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgInfo = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 -960 960 960"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" />
+    </svg>
+);
+export default SvgInfo;

package/src/images/icons/warning.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgWarning = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 -960 960 960"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="m40-120 440-760 440 760H40Zm468.5-131.5Q520-263 520-280t-11.5-28.5Q497-320 480-320t-28.5 11.5Q440-297 440-280t11.5 28.5Q463-240 480-240t28.5-11.5ZM440-360h80v-200h-80v200Z" />
+    </svg>
+);
+export default SvgWarning;

package/src/shared-types.ts

@@ -1,5 +1,5 @@
 export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type IconName = 'ArrowUpward' | 'CalendarToday' | 'Cancel' | 'CheckCircle' | 'ChevronLeft' | 'ChevronRight' | 'Close' | 'Description' | 'DoubleChevronLeft' | 'DoubleChevronRight' | 'Error' | 'ExpandLess' | 'ExpandMore' | 'List' | 'Menu' | 'PriorityHigh' | 'Search';
+export type IconName = 'ArrowUpward' | 'CalendarToday' | 'Cancel' | 'CheckCircle' | 'ChevronLeft' | 'ChevronRight' | 'Close' | 'Description' | 'DoubleChevronLeft' | 'DoubleChevronRight' | 'Error' | 'ExpandLess' | 'ExpandMore' | 'Info' | 'List' | 'Menu' | 'PriorityHigh' | 'Search' | 'Warning';
 export type DocumentIconName = 'Audio' | 'Csv' | 'Excel' | 'File' | 'Generic' | 'Geodata' | 'Ical' | 'Ico' | 'Image' | 'Odf' | 'Odg' | 'Odp' | 'Ods' | 'Odt' | 'Pdf' | 'Ppt' | 'Rtf' | 'Text' | 'Video' | 'Word' | 'Xml' | 'Zip';
 export type InputWidth = 'fixed-20' | 'fixed-10' | 'fixed-5' | 'fixed-4' | 'fixed-3' | 'fixed-2' | 'fluid-three-quarters' | 'fluid-two-thirds' | 'fluid-half' | 'fluid-one-third' | 'fluid-one-quarter';
 export type TagColour = 'grey' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';

package/src/components/ConfirmationMessage/types.ts

@@ -1,7 +0,0 @@
-import { HeadingLevel } from '../../shared-types';
-
-export interface ConfirmationMessageProps extends React.AllHTMLAttributes<HTMLElement> {
-    ariaLive: React.AriaAttributes['aria-live'];
-    headingLevel: HeadingLevel;
-    title: string;
-}