@scottish-government/designsystem-react 0.10.2 → 0.11.1

package/src/components/Accordion/Accordion.test.tsx

@@ -1,4 +1,4 @@
-import { test, expect } from 'vitest';
+import { test, expect, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import Accordion from './Accordion';
 
@@ -13,17 +13,17 @@ test('accordion renders correctly', () => {
 
     render(
         <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID}>
-            <Accordion.Item id="accordion-1" title="Healthcare for veterans">
+            <Accordion.Item id="accordion-1" heading="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
                 <p>If you have a health condition that’s related to your service, you’re
                     entitled to priority treatment based on clinical need.</p>
             </Accordion.Item>
-            <Accordion.Item isOpen id="accordion-2" title="Employability for veterans">
+            <Accordion.Item isOpen id="accordion-2" heading="Employability for veterans">
                 <p>If you&apos;re looking for a job, there are several organisations that can help
                     you <a href="#accordion-link">find a job or develop new skills</a>.</p>
             </Accordion.Item>
-            <Accordion.Item id="accordion-3" title="Housing for veterans">
+            <Accordion.Item id="accordion-3" heading="Housing for veterans">
                 <p>If you need <a href="#accordion-link">help finding a place to live</a>{' '}
                     there&apos;s support specifically for veterans.</p>
             </Accordion.Item>
@@ -48,17 +48,17 @@ test('accordion renders correctly', () => {
 test('accordion without open all', () => {
     render(
         <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} hideOpenAll>
-            <Accordion.Item id="accordion-1" title="Healthcare for veterans">
+            <Accordion.Item id="accordion-1" heading="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
                 <p>If you have a health condition that’s related to your service, you’re
                     entitled to priority treatment based on clinical need.</p>
             </Accordion.Item>
-            <Accordion.Item id="accordion-2" title="Employability for veterans">
+            <Accordion.Item id="accordion-2" heading="Employability for veterans">
                 <p>If you&apos;re looking for a job, there are several organisations that can help
                     you <a href="#accordion-link">find a job or develop new skills</a>.</p>
             </Accordion.Item>
-            <Accordion.Item id="accordion-3" title="Housing for veterans">
+            <Accordion.Item id="accordion-3" heading="Housing for veterans">
                 <p>If you need <a href="#accordion-link">help finding a place to live</a>{' '}
                     there&apos;s support specifically for veterans.</p>
             </Accordion.Item>
@@ -86,7 +86,7 @@ test('accordion with custom heading level', () => {
 
     render(
         <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} headingLevel={HEADING_LEVEL}>
-            <Accordion.Item id="accordion-1" title="Healthcare for veterans">
+            <Accordion.Item id="accordion-1" heading="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
                 <p>If you have a health condition that’s related to your service, you’re
@@ -121,7 +121,7 @@ test('passing additional CSS classes', () => {
 
 test('accordion item renders correctly', () => {
     render(
-        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title={TITLE_TEXT}>
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} heading={TITLE_TEXT}>
             <p>{CONTENT_TEXT}</p>
         </Accordion.Item>
     );
@@ -159,13 +159,13 @@ test('accordion item renders correctly', () => {
 test('accordion items without ID are given unique IDs', () => {
     render(
         <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} hideOpenAll>
-            <Accordion.Item data-testid="item1" title="Healthcare for veterans">
+            <Accordion.Item data-testid="item1" heading="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
                 <p>If you have a health condition that’s related to your service, you’re
                     entitled to priority treatment based on clinical need.</p>
             </Accordion.Item>
-            <Accordion.Item data-testid="item2" title="Employability for veterans">
+            <Accordion.Item data-testid="item2" heading="Employability for veterans">
                 <p>If you&apos;re looking for a job, there are several organisations that can help
                     you <a href="#accordion-link">find a job or develop new skills</a>.</p>
             </Accordion.Item>
@@ -182,7 +182,7 @@ test('accordion items without ID are given unique IDs', () => {
 
 test('open accordion item', () => {
     render(
-        <Accordion.Item isOpen id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title={TITLE_TEXT}>
+        <Accordion.Item isOpen id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} heading={TITLE_TEXT}>
             <p>{CONTENT_TEXT}</p>
         </Accordion.Item>
     );
@@ -193,9 +193,43 @@ test('open accordion item', () => {
     expect(input).toHaveAttribute('checked');
 });
 
+test('small accordion item', () => {
+    render(
+        <Accordion isSmall data-testid={ACCORDION_ID}>
+            <Accordion.Item id={ACCORDION_ITEM_ID} heading={TITLE_TEXT}>
+                <p>{CONTENT_TEXT}</p>
+            </Accordion.Item>
+        </Accordion>
+    );
+
+    const accordionItem = screen.getByTestId(ACCORDION_ID);
+
+    expect(accordionItem).toHaveClass('ds_accordion--small');
+});
+
+test('deprecated title prop still works with warning', () => {
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title={TITLE_TEXT}>
+            <p>{CONTENT_TEXT}</p>
+        </Accordion.Item>
+    );
+
+    const header = document.querySelector('.ds_accordion-item__header');
+    const title = header?.querySelector('.ds_accordion-item__title');
+
+    expect(title?.textContent).toEqual(TITLE_TEXT);
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Warning: Using the `title` prop for heading text on an Accordion.Item is deprecated and will be removed in a future release. Please use the `heading` prop instead.'
+    );
+
+    consoleWarnSpy.mockRestore();
+});
+
 test('passing additional props to accordion item', () => {
     render(
-        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title="Healthcare for veterans" data-test="foo">
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} heading="Healthcare for veterans" data-test="foo">
             <p>Veterans are entitled to the same healthcare as any citizen. And there
                 are health care options and support available specifically for veterans.</p>
             <p>If you have a health condition that’s related to your service, you’re
@@ -209,7 +243,7 @@ test('passing additional props to accordion item', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title="Healthcare for veterans" className="foo">
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} heading="Healthcare for veterans" className="foo">
             <p>Veterans are entitled to the same healthcare as any citizen. And there
                 are health care options and support available specifically for veterans.</p>
             <p>If you have a health condition that’s related to your service, you’re

package/src/components/Accordion/Accordion.tsx

@@ -11,6 +11,7 @@ const AccordionItem = ({
     className,
     id: rawId,
     isOpen = false,
+    heading,
     title,
     ...props
 }: SGDS.Component.Accordion.Item) => {
@@ -19,6 +20,14 @@ const AccordionItem = ({
 
     let headingLevel = useContext(AccordionHeadingLevelContext);
 
+    if (title) {
+        console.warn(
+            'Warning: Using the `title` prop for heading text on an Accordion.Item is deprecated and will be removed in a future release. Please use the `heading` prop instead.'
+        );
+
+        heading = heading || title;
+    }
+
     return (
         <div
             className={[
@@ -44,7 +53,7 @@ const AccordionItem = ({
                     className="ds_accordion-item__title"
                     tagName={headingLevel}
                 >
-                    {title}
+                    {heading}
                 </WrapperTag>
                 <span className="ds_accordion-item__indicator" />
                 <label
@@ -66,6 +75,7 @@ const Accordion = ({
     className,
     headingLevel = 'h3',
     hideOpenAll,
+    isSmall,
     ...props
 }: SGDS.Component.Accordion) => {
     const ref = useRef(null);
@@ -84,6 +94,7 @@ const Accordion = ({
         <div
             className={[
                 'ds_accordion',
+                isSmall ? 'ds_accordion--small' : '',
                 className
             ].join(' ')}
             ref={ref}

package/src/components/Accordion/index.ts

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

package/src/components/AspectBox/index.ts

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

package/src/components/BackToTop/index.ts

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

package/src/components/Breadcrumbs/Breadcrumbs.Item.stories.tsx

@@ -6,8 +6,15 @@ import Breadcrumbs from './Breadcrumbs';
 const meta = {
     title: 'Components/Breadcrumbs/Breadcrumb.Item',
     component: Breadcrumbs.Item,
+    decorators: [
+        Story => (
+            <Breadcrumbs>
+                <Story />
+            </Breadcrumbs>
+        )
+    ],
     argTypes: {
-        href: argTypes.href(),
+        href: argTypes.href({type: {name: 'string', required: true}}),
         isHidden: {
             description: 'Applies a visually-hidden CSS class',
             control: 'boolean'

package/src/components/Breadcrumbs/index.ts

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

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import Button from './Button';
 
 const meta = {
-    title: 'Components/Button',
+    title: 'Components/Buttons/Button',
     component: Button,
     parameters: {
         controls: { sort: 'alpha' }

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import ButtonGroup from './ButtonGroup';
+import Button from '../Button';
+
+const meta = {
+    title: 'Components/Buttons/ButtonGroup',
+    component: ButtonGroup,
+    parameters: {
+        controls: { sort: 'alpha' }
+    },
+    argTypes: {
+        isInline: {
+            description: 'Force inline buttons on small screens',
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        }
+    },
+    args: {
+        children: <>
+            <Button buttonStyle="secondary">Button one</Button>
+            <Button buttonStyle="secondary">Button two</Button>
+            <Button buttonStyle="secondary">Button three</Button>
+        </>
+    }
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const Inline: Story = {
+    args: {
+        isInline: true
+    }
+};

package/src/components/Button/ButtonGroup.test.tsx

@@ -0,0 +1,45 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ButtonGroup from './ButtonGroup';
+
+test('renders correctly', () => {
+    render(
+        <ButtonGroup data-testid="button-group">
+        </ButtonGroup>
+    );
+
+    const buttonGroup = screen.getByTestId('button-group');
+    expect(buttonGroup).toBeInTheDocument();
+    expect(buttonGroup).toHaveClass('ds_button-group');
+    expect(buttonGroup.tagName).toEqual('DIV');
+});
+
+test('inline button group', () => {
+    render(
+        <ButtonGroup isInline data-testid="button-group">
+
+        </ButtonGroup>
+    );
+    const buttonGroup = screen.getByTestId('button-group');
+    expect(buttonGroup).toHaveClass('ds_button-group--inline');
+});
+
+test('passing additional props', () => {
+    render(
+        <ButtonGroup data-test="foo" data-testid="button-group">
+        </ButtonGroup>
+    );
+
+    const buttonGroup = screen.getByTestId('button-group');
+    expect(buttonGroup.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <ButtonGroup className="foo" data-testid="button-group">
+        </ButtonGroup>
+    );
+
+    const buttonGroup = screen.getByTestId('button-group');
+    expect(buttonGroup).toHaveClass('foo', 'ds_button-group');
+});

package/src/components/Button/ButtonGroup.tsx

@@ -0,0 +1,20 @@
+const ButtonGroup = ({
+    children,
+    className,
+    isInline,
+    ...props
+}: SGDS.Component.ButtonGroup) => {
+    return (
+        <div className={[
+            "ds_button-group",
+            isInline ? "ds_button-group--inline" : undefined,
+            className
+        ].join(' ')} { ...props } >
+            {children}
+        </div>
+    );
+};
+
+ButtonGroup.displayName = 'ButtonGroup';
+
+export default ButtonGroup;

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Button';
+export { default as ButtonGroup } from './ButtonGroup';

package/src/components/CategoryItem/index.ts

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

package/src/components/CategoryList/CategoryList.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import CategoryList from './CategoryList';
-import CategoryItem from '../CategoryItem/CategoryItem';
+import CategoryItem from '../CategoryItem';
 
 const meta = {
     title: 'Components/CategoryList',

package/src/components/CategoryList/CategoryList.test.tsx

@@ -1,7 +1,7 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import CategoryList from './CategoryList';
-import CategoryItem from '../CategoryItem/CategoryItem';
+import CategoryItem from '../CategoryItem';
 
 test('category list renders correctly', () => {
     render(

package/src/components/CategoryList/index.ts

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

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Checkbox';
+export { default as CheckboxGroup } from './CheckboxGroup';

package/src/components/ConfirmationMessage/index.ts

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

package/src/components/ContentsNav/ContentsNav.Item.stories.tsx

@@ -6,7 +6,15 @@ import ContentsNav from './ContentsNav';
 const meta = {
     title: 'Components/ContentsNav/ContentsNav.Item',
     component: ContentsNav.Item,
+    decorators: [
+        Story => (
+            <ul className="ds_contents-nav__list">
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
+        href: argTypes.href({type: {name: 'string', required: true}}),
         isCurrent: argTypes.isCurrent(),
         linkComponent: argTypes.linkComponent(),
         children: argTypes.children()

package/src/components/ContentsNav/index.ts

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

package/src/components/CookieBanner/CookieBanner.Buttons.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import CookieBanner from './CookieBanner';
-import Button from '../Button/Button';
+import Button from '../Button';
 
 const meta = {
     title: 'Components/CookieBanner/CookieBanner.Buttons',

package/src/components/CookieBanner/CookieBanner.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import CookieBanner from './CookieBanner';
-import Button from '../Button/Button';
+import Button from '../Button';
 
 const meta = {
     title: 'Components/CookieBanner',

package/src/components/CookieBanner/index.ts

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

package/src/components/DatePicker/DatePicker.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSDatePicker from '@scottish-government/design-system/src/components/date-picker/date-picker';
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
-import TextInput from '../TextInput/TextInput';
+import ErrorMessage from '../ErrorMessage';
+import TextInput from '../TextInput';
 
 const DatePicker = ({
     className,

package/src/components/DatePicker/index.ts

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

package/src/components/Details/index.ts

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

package/src/components/ErrorMessage/index.ts

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

package/src/components/ErrorSummary/ErrorSummary.Item.stories.tsx

@@ -6,6 +6,13 @@ import ErrorSummary from './ErrorSummary';
 const meta = {
     title: 'Components/ErrorSummary/ErrorSummary.Item',
     component: ErrorSummary.Item,
+    decorators: [
+        Story => (
+            <ul className="ds_error-summary__list">
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
         fragmentId: {
             description: 'ID of the question or field to link to',

package/src/components/ErrorSummary/index.ts

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

package/src/components/FeatureHeader/FeatureHeader.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import FeatureHeader from './FeatureHeader';
+
+//@ts-ignore
+import coo from '../../../static/images/highland-cow.jpg';
+
+const meta = {
+    title: 'Components/Feature header',
+    component: FeatureHeader,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <FeatureHeader.Content>
+                <h1>Design standards</h1>
+                <p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland.</p>
+            </FeatureHeader.Content>
+            <FeatureHeader.Media>
+                <img
+                    className="ds_feature-header__image"
+                    alt="A highland cow nuzzling its calf"
+                    src={coo}
+                />
+            </FeatureHeader.Media>
+        </>
+    }
+} satisfies Meta<typeof FeatureHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        backgroundColour: 'TERTIARY'
+    }
+};
+
+export const FullWidth: Story = {
+    args: {
+        backgroundColour: 'TERTIARY',
+        isFullWidth: true
+    }
+};
+
+export const TopAlign: Story = {
+    args: {
+        backgroundColour: 'TERTIARY',
+        isTopAligned: true
+    }
+};
+
+export const WideText: Story = {
+    args: {
+        backgroundColour: 'TERTIARY',
+        isWideText: true
+    }
+};

package/src/components/FeatureHeader/FeatureHeader.tsx

@@ -0,0 +1,94 @@
+import ConditionalWrapper from "../../common/ConditionalWrapper";
+
+const Content = ({ children, className, ...props }: any /* SGDS.Component.FeatureHeader.Primary*/) => {
+    return (
+        <div className={['ds_feature-header__primary', className].join(' ')} {...props}>
+            {children}
+        </div>
+    );
+}
+
+const Media = ({ children, className, isCover, noPadding, ...props }: any /* SGDS.Component.FeatureHeader.Secondary*/) => {
+    return (
+        <div className={[
+            'ds_feature-header__secondary',
+            isCover && 'ds_feature-header__secondary--cover',
+            noPadding && 'ds_feature-header__secondary--no-padding',
+            className
+        ].join(' ')} {...props}>
+            {children}
+        </div>
+    );
+}
+
+const FeatureHeader = ({
+    backgroundColour = 'NONE',
+    children,
+    className,
+    isFullWidth,
+    isTopAligned,
+    isWideText,
+    ...props
+}: any /* SGDS.Component.FeatureHeader*/) => {
+    let backgroundColorClass = '';
+
+    switch (backgroundColour) {
+        case 'BRAND':
+            backgroundColorClass = 'ds_feature-header--background';
+            break;
+        case 'SECONDARY':
+            backgroundColorClass = 'ds_feature-header--background-secondary';
+            break;
+        case 'TERTIARY':
+            backgroundColorClass = 'ds_feature-header--background-tertiary';
+            break;
+        case 'NONE':
+            break;
+        default:
+            backgroundColorClass = '';
+            break;
+    }
+
+    return (
+        <header
+            className={[
+                'ds_feature-header',
+                isFullWidth && 'ds_feature-header--fullwidth',
+                isTopAligned && 'ds_feature-header--top',
+                isWideText && 'ds_feature-header--wide',
+                backgroundColorClass,
+                className
+            ].join(' ')}
+            {...props}
+        >
+            <ConditionalWrapper
+                condition={isFullWidth}
+                wrapper={(children: React.JSX.Element) => <div className="ds_wrapper">{children}</div>}
+            >
+                {children}
+            </ConditionalWrapper>
+        </header>
+    );
+};
+
+FeatureHeader.displayName = 'FeatureHeader';
+Content.displayName = 'FeatureHeader.Content';
+Media.displayName = 'FeatureHeader.Media';
+FeatureHeader.Content = Content;
+FeatureHeader.Media = Media;
+
+export default FeatureHeader;
+
+
+/*
+
+<FeatureHeader backgroundColour="NONE/BRAND/SECONDARY/TERTIARY" isFullWidth isWideText isTopAligned>
+    <FeatureHeader.Content>
+        {children}
+    </FeatureHeader.Content>
+    <FeatureHeader.Media noPadding isCover>
+        {children}
+    </FeatureHeader.Media>
+</FeatureHeader>
+
+*/

package/src/components/FeatureHeader/index.ts

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

package/src/components/FileDownload/index.ts

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

package/src/components/HideThisPage/index.ts

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

package/src/components/InsetText/index.ts

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

package/src/components/NotificationBanner/index.ts

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

package/src/components/NotificationPanel/index.ts

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

package/src/components/PageHeader/PageHeader.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import PageHeader from './PageHeader';
-import Metadata from '../PageMetadata/PageMetadata';
+import Metadata from '../PageMetadata';
 
 const meta = {
     title: 'Components/PageHeader',