@scottish-government/designsystem-react 0.10.1 → 0.11.0

package/src/components/AspectBox/AspectBox.stories.tsx

@@ -6,7 +6,7 @@ import coo from '../../../static/images/highland-cow.jpg';
 import AspectBox from './AspectBox';
 
 const meta = {
-    title: 'Components/Aspect Box',
+    title: 'Components/AspectBox',
     component: AspectBox,
     argTypes: {
         ratio: {

package/src/components/BackToTop/BackToTop.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import BackToTop from './BackToTop';
 
 const meta = {
-    title: 'Components/Back to top',
+    title: 'Components/BackToTop',
     component: BackToTop,
     argTypes: {
         href: {

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Breadcrumbs from './Breadcrumbs';
+
+const meta = {
+    title: 'Components/Breadcrumbs/Breadcrumb.Item',
+    component: Breadcrumbs.Item,
+    decorators: [
+        Story => (
+            <Breadcrumbs>
+                <Story />
+            </Breadcrumbs>
+        )
+    ],
+    argTypes: {
+        href: argTypes.href({type: {name: 'string', required: true}}),
+        isHidden: {
+            description: 'Applies a visually-hidden CSS class',
+            control: 'boolean'
+        },
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        href: '#foo',
+        children: 'Category'
+    }
+} satisfies Meta<typeof Breadcrumbs.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const Hidden: Story = {
+    args: {
+        isHidden: true
+    }
+};

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

@@ -7,7 +7,6 @@ const meta = {
     title: 'Components/Breadcrumbs',
     component: Breadcrumbs,
     argTypes: {
-        linkComponent: argTypes.linkComponent(),
         children: argTypes.children()
     },
     args: {

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/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import ButtonGroup from './ButtonGroup';
+import Button from '../Button/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/ButtonGroup/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/ButtonGroup/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/CategoryItem/CategoryItem.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import CategoryItem from './CategoryItem';
 
 const meta = {
-    title: 'Components/Category item',
+    title: 'Components/CategoryItem',
     component: CategoryItem,
     argTypes: {
         children: argTypes.children(),

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

@@ -5,7 +5,7 @@ import CategoryList from './CategoryList';
 import CategoryItem from '../CategoryItem/CategoryItem';
 
 const meta = {
-    title: 'Components/Category list',
+    title: 'Components/CategoryList',
     component: CategoryList,
     argTypes: {
         children: argTypes.children(),

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import Checkbox from './Checkbox';
 
 const meta = {
-    title: 'Components/Checkbox',
+    title: 'Components/Checkboxes/Checkbox',
     component: Checkbox,
     argTypes: {
         checked: {

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -6,7 +6,7 @@ import Checkbox from './Checkbox';
 
 const meta = {
     component: CheckboxGroup,
-    title: 'Components/CheckboxGroup',
+    title: 'Components/Checkboxes/CheckboxGroup',
     argTypes: {
         children: argTypes.children(),
         isSmall: argTypes.isSmall()

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

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import ConfirmationMessage from './ConfirmationMessage';
 
 const meta = {
-    title: 'Components/Confirmation Message',
+    title: 'Components/ConfirmationMessage',
     component: ConfirmationMessage,
     argTypes: {
         headingLevel: argTypes.headingLevel(),

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+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()
+    },
+    args: {
+        children: <>
+            Apply for Blue Badge
+        </>,
+        href: '#foo'
+    }
+} satisfies Meta<typeof ContentsNav.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const Current: Story = {
+    args: {
+        isCurrent: true
+    }
+};
+
+export const NoLink: Story = {
+    args: {
+        href: undefined
+    }
+};
+
+export const NoLinkCurrent: Story = {
+    args: {
+        href: undefined,
+        isCurrent: true
+    }
+};

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

@@ -4,12 +4,11 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import ContentsNav from './ContentsNav';
 
 const meta = {
-    title: 'Components/Contents nav',
+    title: 'Components/ContentsNav',
     component: ContentsNav,
     argTypes: {
         ariaLabel: argTypes.ariaLabel({description: 'Text to use for the content nav\'s aria-label property'}),
         children: argTypes.children(),
-        linkComponent: argTypes.linkComponent(),
         title: {
             description: 'Title of the contents nav',
             type: 'string'

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import CookieBanner from './CookieBanner';
+import Button from '../Button/Button';
+
+const meta = {
+    title: 'Components/CookieBanner/CookieBanner.Buttons',
+    component: CookieBanner.Buttons,
+    argTypes: {
+        children: argTypes.children()
+    },
+    args: {
+        children: [
+            <Button className="js-accept-all-cookies" small buttonStyle="secondary">Accept all cookies</Button>,
+            <Button className="js-accept-essential-cookies" small buttonStyle="secondary">Use essential cookies only</Button>,
+            <a href="/cookies/">Set cookie preferences</a>
+        ]
+    }
+} satisfies Meta<typeof CookieBanner.Buttons>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -5,7 +5,7 @@ import CookieBanner from './CookieBanner';
 import Button from '../Button/Button';
 
 const meta = {
-    title: 'Components/Cookie banner',
+    title: 'Components/CookieBanner',
     component: CookieBanner,
     argTypes: {
         children: argTypes.children()
@@ -16,7 +16,7 @@ const meta = {
                 experience.</p>,
             <p key="bar">Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
                 To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>,
-            <CookieBanner.Buttons key="baz">
+            <CookieBanner.Buttons>
                 <Button className="js-accept-all-cookies" small buttonStyle="secondary">Accept all cookies</Button>
                 <Button className="js-accept-essential-cookies" small buttonStyle="secondary">Use essential cookies only</Button>
                 <a href="/cookies/">Set cookie preferences</a>

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import DatePicker from './DatePicker';
 
 const meta = {
-    title: 'Components/Date picker',
+    title: 'Components/DatePicker',
     component: DatePicker,
     argTypes: {
         dateSelectCallback: {},

package/src/components/ErrorMessage/ErrorMessage.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import ErrorMessage from './ErrorMessage';
 
 const meta = {
-    title: 'Components/Error message',
+    title: 'Components/ErrorMessage',
     component: ErrorMessage,
     argTypes: {
         children: argTypes.children()

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+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',
+            type: 'string'
+        },
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        fragmentId: 'did-resolve',
+        children: 'Did this resolve your issue?'
+    }
+} satisfies Meta<typeof ErrorSummary.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

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

@@ -4,10 +4,9 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import ErrorSummary from './ErrorSummary';
 
 const meta = {
-    title: 'Components/Error summary',
+    title: 'Components/ErrorSummary',
     component: ErrorSummary,
     argTypes: {
-        linkComponent: argTypes.linkComponent(),
         title: {
             description: 'The title of the error summary',
             type: 'string'

package/src/components/FileDownload/FileDownload.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import FileDownload from './FileDownload';
 
 const meta = {
-    title: 'Components/File download',
+    title: 'Components/FileDownload',
     component: FileDownload,
     argTypes: {
         cover: {

package/src/components/HideThisPage/HideThisPage.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import HideThisPage from './HideThisPage';
 
 const meta = {
-    title: 'Components/Hide this page',
+    title: 'Components/HideThisPage',
     component: HideThisPage,
     argTypes: {
         escapeUrl: {

package/src/components/InsetText/InsetText.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import InsetText from './InsetText';
 
 const meta = {
-    title: 'Components/Inset text',
+    title: 'Components/InsetText',
     component: InsetText,
     argTypes: {
         children: argTypes.children()

package/src/components/NotificationBanner/NotificationBanner.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import NotificationBanner from './NotificationBanner';
 
 const meta = {
-    title: 'Components/Notification banner',
+    title: 'Components/NotificationBanner',
     component: NotificationBanner,
     argTypes: {
         children: argTypes.children(),

package/src/components/NotificationPanel/NotificationPanel.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import NotificationPanel from './NotificationPanel';
 
 const meta = {
-    title: 'Components/Notification panel',
+    title: 'Components/NotificationPanel',
     component: NotificationPanel,
     argTypes: {
         ariaLive: argTypes.ariaLive(),

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

@@ -5,7 +5,7 @@ import PageHeader from './PageHeader';
 import Metadata from '../PageMetadata/PageMetadata';
 
 const meta = {
-    title: 'Components/Page header',
+    title: 'Components/PageHeader',
     component: PageHeader,
     argTypes: {
         children: argTypes.children(),

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Metadata from './PageMetadata';
+
+const meta = {
+    title: 'Components/PageMetadata/PageMetadata.Item',
+    component: Metadata.Item,
+    decorators: [
+        Story => (
+            <Metadata>
+                <dl className="ds_page-metadata__list">
+                    <Story />
+                </dl>
+            </Metadata>
+        )
+    ],
+    argTypes: {
+        children: argTypes.children(),
+        name: {
+            description: 'The name or key of the metadata item',
+            type: {
+                name: 'string',
+                required: true
+            }
+        }
+    },
+    args: {
+        name: 'Last updated',
+        children: '21/04/2020'
+
+    }
+} satisfies Meta<typeof Metadata.Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};

package/src/components/PageMetadata/PageMetadata.stories.tsx

@@ -4,19 +4,24 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import Metadata from './PageMetadata';
 
 const meta = {
-    title: 'Components/Page metadata',
+    title: 'Components/PageMetadata',
     component: Metadata,
     argTypes: {
         children: argTypes.children(),
-         isInline: {
+        isInline: {
             control: 'boolean',
             description: 'Makes the page metadata use the truncated ‘inline’ display'
         },
     },
     args: {
-        children: <Metadata.Item name="Last updated">
-            21/04/2020
-        </Metadata.Item>
+        children: <>
+            <Metadata.Item name="Content type">
+                Publication
+            </Metadata.Item>
+            <Metadata.Item name="Last updated">
+                21/04/2020
+            </Metadata.Item>
+        </>
     }
 } satisfies Meta<typeof Metadata>;
 

package/src/components/PhaseBanner/PhaseBanner.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import PhaseBanner from './PhaseBanner';
 
 const meta = {
-    title: 'Components/Phase banner',
+    title: 'Components/PhaseBanner',
     component: PhaseBanner,
     argTypes: {
         children: argTypes.children(),

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -4,7 +4,7 @@ import argTypes from '../../../.storybook/sgdsArgTypes';
 import RadioButton from './RadioButton';
 
 const meta = {
-    title: 'Components/Radio button',
+    title: 'Components/Radio/Radio button',
     component: RadioButton,
     argTypes: {
         checked: {

package/src/components/RadioButton/RadioGroup.stories.tsx

@@ -5,7 +5,7 @@ import RadioButton from '../RadioButton/RadioButton';
 import RadioGroup from './RadioGroup';
 
 const meta = {
-    title: 'Components/Radio group',
+    title: 'Components/Radio/Radio group',
     component: RadioGroup,
     argTypes: {
         isInline: {

package/src/components/RadioButton/RadioGroup.tsx

@@ -6,7 +6,7 @@ const RadioGroup = ({
     className,
     isInline,
     isSmall,
-    name,
+    name = '',
     ...props
 }: SGDS.Component.RadioButton.Group) => {
     return (
@@ -19,7 +19,7 @@ const RadioGroup = ({
             ].join(' ')}
             {...props}
         >
-            <CheckboxRadioContext value={{ isSmall: !!isSmall, name }}>
+            <CheckboxRadioContext value={{ isSmall: !!isSmall, name}}>
                 {children}
             </CheckboxRadioContext>
         </div>