@scottish-government/designsystem-react 1.0.0 → 1.1.0

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

@@ -2,7 +2,7 @@ import React, { Children, useId } from 'react';
 import ActionLink from '../../common/ActionLink';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import { SummaryListItemProps, SummaryListProps } from './types';
-import { ActionLinkProps } from '@/src/common/ActionLink/types';
+import { ActionLinkProps } from '../../common/ActionLink/types';
 import clsx from 'clsx';
 
 const Item = ({

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

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgArrowUpward = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0V0z" fill="none" />
-    <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+    </svg>
 );
 export default SvgArrowUpward;

package/src/images/icons/calendar_today.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCalendarToday = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
+    </svg>
 );
 export default SvgCalendarToday;

package/src/images/icons/cancel.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCancel = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    role="img"
-    {...props}
-  >
-    <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5c-1.4 0-2.7-.3-3.9-.8S5.8 20 4.9 19.1s-1.6-2-2.1-3.2S2 13.4 2 12s.3-2.7.8-3.9S4 5.8 4.9 4.9s2-1.6 3.2-2.1S10.6 2 12 2s2.7.3 3.9.8 2.3 1.2 3.2 2.1 1.6 2 2.1 3.2.8 2.5.8 3.9-.3 2.7-.8 3.9-1.2 2.3-2.1 3.2-2 1.6-3.2 2.1-2.5.8-3.9.8Z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        role="img"
+        {...props}
+    >
+        <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5c-1.4 0-2.7-.3-3.9-.8S5.8 20 4.9 19.1s-1.6-2-2.1-3.2S2 13.4 2 12s.3-2.7.8-3.9S4 5.8 4.9 4.9s2-1.6 3.2-2.1S10.6 2 12 2s2.7.3 3.9.8 2.3 1.2 3.2 2.1 1.6 2 2.1 3.2.8 2.5.8 3.9-.3 2.7-.8 3.9-1.2 2.3-2.1 3.2-2 1.6-3.2 2.1-2.5.8-3.9.8Z" />
+    </svg>
 );
 export default SvgCancel;

package/src/images/icons/check_circle.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgCheckCircle = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+    </svg>
 );
 export default SvgCheckCircle;

package/src/images/icons/chevron_left.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgChevronLeft = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+    </svg>
 );
 export default SvgChevronLeft;

package/src/images/icons/chevron_right.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgChevronRight = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+    </svg>
 );
 export default SvgChevronRight;

package/src/images/icons/close.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgClose = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+    </svg>
 );
 export default SvgClose;

package/src/images/icons/description.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDescription = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
+    </svg>
 );
 export default SvgDescription;

package/src/images/icons/double_chevron_left.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDoubleChevronLeft = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    role="img"
-    {...props}
-  >
-    <path d="M19 16.6 17.6 18l-6-6 6-6L19 7.4 14.4 12l4.6 4.6Zm-6.6 0L11 18l-6-6 6-6 1.4 1.4L7.8 12l4.6 4.6Z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        role="img"
+        {...props}
+    >
+        <path d="M19 16.6 17.6 18l-6-6 6-6L19 7.4 14.4 12l4.6 4.6Zm-6.6 0L11 18l-6-6 6-6 1.4 1.4L7.8 12l4.6 4.6Z" />
+    </svg>
 );
 export default SvgDoubleChevronLeft;

package/src/images/icons/double_chevron_right.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgDoubleChevronRight = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    role="img"
-    {...props}
-  >
-    <path d="M9.6 12 5 7.4 6.4 6l6 6-6 6L5 16.6 9.6 12Zm6.6 0-4.6-4.6L13 6l6 6-6 6-1.4-1.4 4.6-4.6Z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        role="img"
+        {...props}
+    >
+        <path d="M9.6 12 5 7.4 6.4 6l6 6-6 6L5 16.6 9.6 12Zm6.6 0-4.6-4.6L13 6l6 6-6 6-1.4-1.4 4.6-4.6Z" />
+    </svg>
 );
 export default SvgDoubleChevronRight;

package/src/images/icons/error.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgError = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+    </svg>
 );
 export default SvgError;

package/src/images/icons/expand_less.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgExpandLess = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+    </svg>
 );
 export default SvgExpandLess;

package/src/images/icons/expand_more.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgExpandMore = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="#000000"
-    role="img"
-    {...props}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
-  </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#000000"
+        role="img"
+        {...props}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+    </svg>
 );
 export default SvgExpandMore;

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";