@scottish-government/designsystem-react 0.8.0 → 0.10.0-beta.0

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+// @ts-ignore
+import coo from '../../../static/images/highland-cow.jpg';
+import AspectBox from './AspectBox';
+
+const meta = {
+    title: 'Components/Aspect Box',
+    component: AspectBox,
+    argTypes: {
+        ratio: {
+            control: { type: 'radio' },
+            description: 'Aspect ratio to use',
+            options: ['1:1', '4:3', '16:9', '21:9'],
+            type: 'string'
+        },
+        children: argTypes.children()
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: '32em' }}>
+                <Story />
+            </div>
+        ),
+    ],
+    args: {children: <img
+        alt="A highland cow nuzzling its calf"
+        src={coo}
+    />}
+} satisfies Meta<typeof AspectBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        ratio: undefined
+    }
+};
+
+export const Square: Story = {
+    args: {
+        ratio: '1:1'
+    }
+};
+
+export const Aspect4To3: Story = {
+    args: {
+        ratio: '4:3'
+    }
+};
+
+export const Aspect16To9: Story = {
+    args: {
+        ratio: '16:9'
+    }
+};
+
+export const Aspect21To9: Story = {
+    args: {
+        ratio: '21:9'
+    }
+};

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import BackToTop from './BackToTop';
+
+const meta = {
+    title: 'Components/Back to top',
+    component: BackToTop,
+    argTypes: {
+        href: {
+            control: { type: 'text' },
+            description: 'URL fragment to scroll to',
+            table: {
+                type: {
+                    summary: 'string'
+                }
+            }
+        }
+    },
+    decorators: [
+        (Story) => (
+            <div>
+                <p>Scroll down to see 👇</p>
+                <Story />
+            </div>
+        ),
+    ]
+} satisfies Meta<typeof BackToTop>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        href: undefined,
+    }
+};

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Breadcrumbs from './Breadcrumbs';
+
+const meta = {
+    title: 'Components/Breadcrumbs',
+    component: Breadcrumbs,
+    argTypes: {
+        linkComponent: argTypes.linkComponent(),
+        children: argTypes.children()
+    },
+    args: {
+        children: <>
+            <Breadcrumbs.Item href="#home">
+                Home
+            </Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#category">
+                Category
+            </Breadcrumbs.Item>
+            <Breadcrumbs.Item>
+                Page
+            </Breadcrumbs.Item>
+        </>
+    }
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const HideLastItem: Story = {
+    args: {
+        children: <>
+            <Breadcrumbs.Item href="#home">
+                Home
+            </Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#category">
+                Category
+            </Breadcrumbs.Item>
+            <Breadcrumbs.Item isHidden>
+                Page
+            </Breadcrumbs.Item>
+        </>
+    }
+};

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -16,7 +16,6 @@ test('breadcrumbs render correctly', () => {
 
     const nav = screen.getByRole('navigation');
     const list = within(nav).getByRole('list');
-    const listItems = within(list).getAllByRole('listitem');
 
     // check nav
     expect(nav).toHaveAttribute('aria-label', 'Breadcrumb');

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -32,7 +32,7 @@ const BreadcrumbItem = ({
 const Breadcrumbs = ({
     children,
     ...props
-}: SGDS.Component.Breadcrumbs & { Item: SGDS.Component.Breadcrumbs.Item }) => {
+}: SGDS.Component.Breadcrumbs) => {
     return (
         <nav
             aria-label="Breadcrumb"

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

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Button from './Button';
+
+const meta = {
+    title: 'Components/Button',
+    component: Button,
+    parameters: {
+        controls: { sort: 'alpha' }
+    },
+    argTypes: {
+        buttonStyle: {
+            options: ['primary', 'secondary'],
+            control: { type: 'radio' },
+            type: 'string'
+        },
+        hasLinkStyle: {
+            description: 'Make the button look like a link',
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        },
+        href: {
+            control: { type: 'text' },
+            description: 'Href attribute, changes element to <code>&lt;a&gt;</code> if set',
+            table: {
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        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'],
+            control: { type: 'select' },
+            type: 'string'
+        },
+        isIconLeft: {
+            description: 'Show icon on left of button',
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        },
+        isIconOnly: {
+            description: 'Show only the icon',
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        },
+        isSmall: {
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        },
+        type: {
+            options: ['submit', 'reset', 'button'],
+            control: { type: 'radio' },
+            type: 'string'
+        },
+        width: {
+            options: ['fluid', 'fixed', 'max'],
+            control: { type: 'radio' },
+            type: 'string'
+        }
+    },
+    args: {
+        children: 'Button text'
+    }
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const Secondary: Story = {
+    args: {
+        buttonStyle: 'secondary'
+    }
+};
+
+export const SmallButton: Story = {
+    args: {
+        isSmall: true
+    }
+}
+
+export const FluidWidth: Story = {
+    args: {
+        width: 'fluid'
+    }
+}
+
+export const FixedWidth: Story = {
+    args: {
+        width: 'fixed'
+    }
+}
+
+export const MaxWidth: Story = {
+    args: {
+        width: 'max'
+    }
+}
+
+export const WithIcon: Story = {
+    args: {
+        icon: 'Search'
+    },
+    parameters: {
+        controls: {
+            exclude: [
+                'isIconOnly',
+                'hasLinkStyle'
+            ]
+        }
+    }
+}
+
+export const IconOnLeft: Story = {
+    args: {
+        icon: 'Search',
+        isIconLeft: true
+    },
+    parameters: {
+        controls: {
+            exclude: [
+                'isIconOnly',
+                'hasLinkStyle'
+            ]
+        }
+    }
+}
+
+export const IconOnly: Story = {
+    args: {
+        icon: 'Search',
+        isIconOnly: true
+    },
+    parameters: {
+        controls: {
+            exclude: [
+                'isIconLeft',
+                'hasLinkStyle',
+                'width'
+            ]
+        }
+    }
+}
+
+export const LinkStyledAsButton: Story = {
+    args: {
+        href: '#'
+    },
+    parameters: {
+        controls: {
+            exclude: [
+                'hasLinkStyle',
+                'type'
+            ]
+        }
+    }
+}
+
+export const ButtonStyledAsLink: Story = {
+    args: {
+        hasLinkStyle: true
+    },
+    parameters: {
+        controls: {
+            exclude: [
+                'buttonStyle',
+                'icon',
+                'isIconLeft',
+                'isIconOnly',
+                'isSmall',
+                'type',
+                'width'
+            ]
+        }
+    }
+}

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

@@ -52,7 +52,7 @@ test('max-width button', () => {
 
 test('small button', () => {
     render(
-        <Button small>Button text</Button>
+        <Button isSmall>Button text</Button>
     );
 
     const button = screen.getByRole('button');
@@ -73,7 +73,7 @@ test('button with icon', () => {
 
 test('button with icon (left)', () => {
     render(
-        <Button icon="ChevronLeft" iconLeft>Button text</Button>
+        <Button icon="ChevronLeft" isIconLeft>Button text</Button>
     );
 
     const button = screen.getByRole('button');
@@ -83,7 +83,7 @@ test('button with icon (left)', () => {
 
 test('button only icon', () => {
     render(
-        <Button icon="Search" iconOnly>Button text</Button>
+        <Button icon="Search" isIconOnly>Button text</Button>
     );
 
     const button = screen.getByRole('button');
@@ -106,7 +106,7 @@ test('link styled as button', () => {
 
 test('button styled as link', () => {
     render(
-        <Button styleAsLink>Button text</Button>
+        <Button hasLinkStyle>Button text</Button>
     );
 
     const button = screen.getByRole('button');

package/src/components/Button/Button.tsx

@@ -7,11 +7,11 @@ const Button = ({
     children,
     className,
     icon,
-    iconLeft,
-    iconOnly = false,
+    hasLinkStyle,
     href,
-    small,
-    styleAsLink,
+    isIconLeft,
+    isIconOnly = false,
+    isSmall,
     type = 'button',
     width,
     ...props
@@ -26,19 +26,19 @@ const Button = ({
         <WrapperTag
             tagName={tagName}
             className={[
-                !styleAsLink ? 'ds_button' : 'ds_link',
+                !hasLinkStyle ? 'ds_button' : 'ds_link',
                 width && `ds_button--${width}`,
                 buttonStyle && `ds_button--${buttonStyle}`,
-                small && 'ds_button--small',
-                (icon && !iconOnly) ? 'ds_button--has-icon' : undefined,
-                iconLeft && 'ds_button--has-icon--left',
+                isSmall && 'ds_button--small',
+                (icon && !isIconOnly) ? 'ds_button--has-icon' : undefined,
+                isIconLeft && 'ds_button--has-icon--left',
                 className
             ].join(' ')}
             href={href}
             {...(tagName === 'button' ? { type: type } : {})}
             {...props}
         >
-            {iconOnly ? <ScreenReaderText>{children}</ScreenReaderText> : children}
+            {isIconOnly ? <ScreenReaderText>{children}</ScreenReaderText> : children}
 
             {icon && <Icon icon={icon}/>}
         </WrapperTag>

package/src/components/CategoryItem/CategoryItem.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import CategoryItem from './CategoryItem';
+
+const meta = {
+    title: 'Components/Category item',
+    component: CategoryItem,
+    argTypes: {
+        children: argTypes.children(),
+        headingLevel: argTypes.headingLevel(),
+        href: {
+            description: 'URL used in the title\'s link',
+            type: 'string'
+        },
+        linkComponent: argTypes.linkComponent(),
+        tagName: {
+            description: 'HTML tag name to use for the item',
+            type: 'string'
+        },
+        title: {
+            description: 'The title of the category item',
+            type: 'string'
+        }
+    },
+    args: {
+        title: 'Public transport, bus passes and discounts',
+        children: 'Find information about local travel by road, rail and water and National Entitlement Cards.',
+        href: '/driving-transport/local-travel'
+    }
+} satisfies Meta<typeof CategoryItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};
+
+export const NoSummary: Story = {
+    args: {
+        children: undefined
+    }
+};
+
+export const DifferentHeadingLevel: Story = {
+    args: {
+        headingLevel: 'h3'
+    }
+};
+
+export const DifferentContainerElement: Story = {
+    args: {
+        tagName: 'article'
+    }
+};

package/src/components/CategoryItem/CategoryItem.test.tsx

@@ -0,0 +1,93 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import CategoryItem from './CategoryItem';
+
+const ITEM_TITLE = 'Bananas';
+const ITEM_HREF = '#foo';
+const ITEM_CONTENT = 'A banana is an elongated, edible fruit—botanically a berry—produced by several kinds of large treelike herbaceous flowering plants in the genus Musa.';
+
+test('category item renders correctly', () => {
+    render(
+        <CategoryItem title={ITEM_TITLE} href={ITEM_HREF} data-testid="category-item">
+            {ITEM_CONTENT}
+        </CategoryItem>
+    );
+
+    const categoryItem = screen.getByTestId('category-item');
+    const title = screen.getByRole('heading');
+    const link = screen.getByRole('link');
+    const content = categoryItem.querySelector('p');
+
+    expect(categoryItem).toHaveClass('ds_category-item');
+    expect(categoryItem.tagName).toEqual('DIV');
+
+    expect(title).toHaveClass('ds_category-item__title');
+    expect(title.tagName).toEqual('H2');
+    expect(title.textContent).toEqual(ITEM_TITLE);
+    expect(title.parentElement).toEqual(categoryItem);
+
+    expect(link).toHaveClass('ds_category-item__link');
+    expect(link).toHaveAttribute('href', ITEM_HREF);
+    expect(link.textContent).toEqual(ITEM_TITLE);
+    expect(link.parentElement).toEqual(title);
+
+    expect(content).toHaveClass('ds_category-item__summary');
+    expect(content?.textContent).toEqual(ITEM_CONTENT);
+    expect(content?.parentElement).toEqual(categoryItem);
+});
+
+test('custom heading level', () => {
+    render(
+        <CategoryItem title={ITEM_TITLE} href={ITEM_HREF} headingLevel="h3" data-testid="category-item">
+            {ITEM_CONTENT}
+        </CategoryItem>
+    );
+
+    const title = screen.getByRole('heading');
+    expect(title.tagName).toEqual('H3');
+});
+
+test('custom element', () => {
+    render(
+        <CategoryItem title={ITEM_TITLE} href={ITEM_HREF} tagName="article" data-testid="category-item">
+            {ITEM_CONTENT}
+        </CategoryItem>
+    );
+
+    const categoryItem = screen.getByTestId('category-item');
+    expect(categoryItem.tagName).toEqual('ARTICLE');
+});
+
+test('custom link component', () => {
+    render(
+        <CategoryItem title={ITEM_TITLE} href={ITEM_HREF} tagName="article" data-testid="category-item" linkComponent={
+            ({ className, ...props }) => (
+                <span role="link" className={className} {...props}/>
+            )}>
+            {ITEM_CONTENT}
+        </CategoryItem>
+    );
+
+    const link = screen.getByRole('link');
+
+    expect(link?.tagName).toEqual('SPAN');
+    expect(link?.textContent).toEqual(ITEM_TITLE);
+});
+
+test('passing additional props', () => {
+    render(
+        <CategoryItem data-test="foo" data-testid="category-item"/>
+    );
+
+    const categoryItem = screen.getByTestId('category-item');
+    expect(categoryItem?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <CategoryItem className="foo" data-testid="category-item"/>
+    );
+
+    const categoryItem = screen.getByTestId('category-item');
+    expect(categoryItem).toHaveClass('foo');
+});

package/src/components/CategoryItem/CategoryItem.tsx

@@ -0,0 +1,56 @@
+import ConditionalWrapper from "../../common/ConditionalWrapper";
+import WrapperTag from "../../common/WrapperTag";
+
+const CategoryItem = ({
+    children,
+    className,
+    headingLevel = 'h2',
+    href,
+    linkComponent,
+    tagName = 'div',
+    title,
+    ...props
+}: SGDS.Component.CategoryItem) => {
+    const LINK_CLASS = 'ds_category-item__link';
+
+    function getLinkElement(children: React.ReactNode) {
+        if (linkComponent) {
+            return linkComponent({ className: LINK_CLASS, href, children });
+        } else if (href) {
+            return <a href={href} className={LINK_CLASS}>{children}</a>;
+        }
+    }
+
+    return (
+        <WrapperTag
+            tagName={tagName}
+            className={[
+                'ds_category-item',
+                className
+            ].join(' ')}
+            {...props}
+        >
+            <WrapperTag
+                className="ds_category-item__title"
+                tagName={headingLevel}
+            >
+                <ConditionalWrapper
+                    condition={typeof href !== 'undefined'}
+                    wrapper={(children: React.JSX.Element) => getLinkElement(children)}
+                >
+                    {title}
+                </ConditionalWrapper>
+            </WrapperTag>
+
+            {children &&
+                <p className="ds_category-item__summary">
+                    {children}
+                </p>
+            }
+        </WrapperTag>
+    );
+};
+
+CategoryItem.displayName = 'CategoryItem';
+
+export default CategoryItem;