@scottish-government/designsystem-react 0.12.1 → 1.0.0

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

@@ -2,59 +2,222 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import FeatureHeader from './FeatureHeader';
+import Button from '../Button';
+// @ts-expect-error no types
+import photograph from '../../../static/images/highland-cow.jpg';
+// @ts-expect-error no types
+import illustration from '../../../static/images/illustration.svg';
+
+
+
+type foo = typeof FeatureHeader;
 
-//@ts-ignore
-import coo from '../../../static/images/highland-cow.jpg';
 
 const meta = {
-    title: 'Components/Feature header',
+    title: 'Components/FeatureHeader',
     component: FeatureHeader,
     argTypes: {
-        children: argTypes.children()
+        backgroundColor: argTypes.select({options: ['none', 'secondary', 'tertiary', 'brand']}),
+        children: argTypes.children(),
+        hasCoverImage: argTypes.boolean(),
+        hasNoImagePadding: argTypes.boolean(),
+        id: argTypes.id({ type: { name: 'string', required: false } }),
+        isFullWidth: argTypes.boolean(),
+        isWideText: argTypes.boolean(),
+        isTopAlignImage: argTypes.boolean(),
+        tagName: argTypes.select({ options: ['div', 'header'] })
     },
+    args: {
+        backgroundColor: 'secondary'
+    }
+} satisfies Meta<foo & { image: string }>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
     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>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
                 <img
-                    className="ds_feature-header__image"
-                    alt="A highland cow nuzzling its calf"
-                    src={coo}
+                    alt=""
+                    src={illustration}
                 />
-            </FeatureHeader.Media>
+            </FeatureHeader.Secondary>
         </>
     }
-} satisfies Meta<typeof FeatureHeader>;
+};
 
-export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const WithoutContent: Story = {
+    name: 'Without content',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>
+    }
+};
+
+export const WithCallToAction: Story = {
+    name: 'Call to action',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+                <Button href="#foo" icon="ChevronRight">Get started</Button>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>
+    }
+};
+
+export const WithCoverImage: Story = {
+    name: 'Cover image',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        hasCoverImage: true
+    }
+};
+
+export const WithCoverImagePhotograph: Story = {
+    name: 'Cover image (photograph)',
     args: {
-        backgroundColour: 'TERTIARY'
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={photograph}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        hasCoverImage: true
     }
 };
 
 export const FullWidth: Story = {
+    name: 'Full width',
     args: {
-        backgroundColour: 'TERTIARY',
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
         isFullWidth: true
     }
 };
 
-export const TopAlign: Story = {
+export const FullWidthImagePaddingRemoved: Story = {
+    name: 'Full width with image padding removed',
     args: {
-        backgroundColour: 'TERTIARY',
-        isTopAligned: true
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        hasNoImagePadding: true,
+        isFullWidth: true
     }
 };
 
 export const WideText: Story = {
+    name: 'Wide text',
     args: {
-        backgroundColour: 'TERTIARY',
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
         isWideText: true
     }
 };
+
+export const TopAlign: Story = {
+    name: 'Top aligned image',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={illustration}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        isTopAlignImage: true
+    }
+};
+
+export const TopAlignPhotograph: Story = {
+    name: 'Top aligned image (photograph)',
+    args: {
+        children: <>
+            <FeatureHeader.Primary title="Design and build accessible digital services for Scotland">
+                <p>The Scottish Government Design System provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.</p>
+                <p>The Design System is open source and free to use.</p>
+            </FeatureHeader.Primary>
+            <FeatureHeader.Secondary>
+                <img
+                    alt=""
+                    src={photograph}
+                />
+            </FeatureHeader.Secondary>
+        </>,
+        isTopAlignImage: true
+    }
+};

package/src/components/FeatureHeader/FeatureHeader.test.tsx

@@ -0,0 +1,298 @@
+import { test, expect, describe } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import FeatureHeader from './FeatureHeader';
+
+const TITLE_TEXT = 'Design and build accessible digital services for Scotland';
+
+describe('feature header', () => {
+    test('feature header renders correctly', () => {
+        render(
+            <FeatureHeader data-testid="feature-header">
+                <FeatureHeader.Primary
+                    data-testid="feature-header-primary"
+                    title={TITLE_TEXT}
+                >
+                </FeatureHeader.Primary>
+                <FeatureHeader.Secondary data-testid="feature-header-secondary">
+                    <img src="foo" data-testid="feature-header-image" />
+                </FeatureHeader.Secondary>
+            </FeatureHeader>
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+        const featureHeaderPrimaryElement = screen.getByTestId('feature-header-primary');
+        const featureHeaderSecondaryElement = screen.getByTestId('feature-header-secondary');
+        const featureHeaderTitleElement = within(featureHeaderPrimaryElement).getByRole('heading');
+        const featureHeaderImageElement = screen.getByTestId('feature-header-image');
+
+        expect(featureHeaderElement).toHaveClass('ds_feature-header');
+        expect(featureHeaderElement.tagName).toEqual('DIV');
+
+        expect(featureHeaderPrimaryElement).toHaveClass('ds_feature-header__primary');
+        expect(featureHeaderPrimaryElement.tagName).toEqual('DIV');
+        expect(featureHeaderPrimaryElement.parentElement).toEqual(featureHeaderElement);
+
+        expect(featureHeaderSecondaryElement).toHaveClass('ds_feature-header__secondary');
+        expect(featureHeaderSecondaryElement.tagName).toEqual('DIV');
+        expect(featureHeaderSecondaryElement.parentElement).toEqual(featureHeaderElement);
+        expect(featureHeaderSecondaryElement.previousElementSibling).toEqual(featureHeaderPrimaryElement);
+
+        expect(featureHeaderTitleElement).toHaveClass('ds_feature-header__title');
+        expect(featureHeaderTitleElement.tagName).toEqual('H1');
+        expect(featureHeaderTitleElement.textContent).toEqual(TITLE_TEXT);
+
+        expect(featureHeaderImageElement).toHaveClass('ds_feature-header__image');
+    });
+
+    test('image CSS class added to svg element correctly', () => {
+        render(
+            <FeatureHeader data-testid="feature-header">
+                <FeatureHeader.Primary
+                    data-testid="feature-header-primary"
+                    title={TITLE_TEXT}
+                >
+                </FeatureHeader.Primary>
+                <FeatureHeader.Secondary data-testid="feature-header-secondary">
+                    <svg version="1.1"
+                        data-testid="feature-header-image"
+                        width="300"
+                        height="200"
+                        xmlns="http://www.w3.org/2000/svg">
+                    </svg>
+                </FeatureHeader.Secondary>
+            </FeatureHeader>
+        );
+
+        const featureHeaderImageElement = screen.getByTestId('feature-header-image');
+
+        expect(featureHeaderImageElement).toHaveClass('ds_feature-header__image');
+    });
+
+    test('image CSS class added to picture element correctly', () => {
+        render(
+            <FeatureHeader data-testid="feature-header">
+                <FeatureHeader.Primary
+                    data-testid="feature-header-primary"
+                    title={TITLE_TEXT}
+                >
+                </FeatureHeader.Primary>
+                <FeatureHeader.Secondary data-testid="feature-header-secondary">
+                    <picture data-testid="feature-header-image">
+                    </picture>
+                </FeatureHeader.Secondary>
+            </FeatureHeader>
+        );
+
+        const featureHeaderImageElement = screen.getByTestId('feature-header-image');
+
+        expect(featureHeaderImageElement).toHaveClass('ds_feature-header__image');
+    });
+
+    test('image CSS class NOT added to other elements in Secondary', () => {
+        render(
+            <FeatureHeader data-testid="feature-header">
+                <FeatureHeader.Primary
+                    data-testid="feature-header-primary"
+                    title={TITLE_TEXT}
+                >
+                </FeatureHeader.Primary>
+                <FeatureHeader.Secondary data-testid="feature-header-secondary">
+                    <p data-testid="feature-header-non-image">
+                    </p>
+                </FeatureHeader.Secondary>
+            </FeatureHeader>
+        );
+
+        const featureHeaderNonImageElement = screen.getByTestId('feature-header-non-image');
+
+        expect(featureHeaderNonImageElement).not.toHaveClass('ds_feature-header__image');
+    });
+
+    test('ds_wrapper class included when full width', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                isFullWidth
+            >
+                <FeatureHeader.Primary
+                    data-testid="feature-header-primary"
+                    title={TITLE_TEXT}
+                >
+                </FeatureHeader.Primary>
+                <FeatureHeader.Secondary data-testid="feature-header-secondary">
+                    <img src="foo" data-testid="feature-header-image" />
+                </FeatureHeader.Secondary>
+            </FeatureHeader>
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+        const featureHeaderPrimaryElement = screen.getByTestId('feature-header-primary');
+        const featureHeaderSecondaryElement = screen.getByTestId('feature-header-secondary');
+
+        const featureHeaderWrapperElement = featureHeaderElement.querySelector('.ds_wrapper');
+
+        expect(featureHeaderWrapperElement).toBeInTheDocument();
+        expect(featureHeaderWrapperElement?.parentElement).toEqual(featureHeaderElement);
+        expect(featureHeaderPrimaryElement.parentElement).toEqual(featureHeaderWrapperElement);
+        expect(featureHeaderSecondaryElement.parentElement).toEqual(featureHeaderWrapperElement);
+    });
+
+    test('feature header has correct CSS class for secondary background', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                backgroundColor="secondary"
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+
+        expect(featureHeaderElement).toHaveClass('ds_feature-header--background-secondary');
+    });
+
+    test('feature header has correct CSS class for tertiary background', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                backgroundColor="tertiary"
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+
+        expect(featureHeaderElement).toHaveClass('ds_feature-header--background-tertiary');
+    });
+
+    test('feature header has correct CSS class for brand background', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                backgroundColor="brand"
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+
+        expect(featureHeaderElement).toHaveClass('ds_feature-header--background');
+    });
+
+    test('feature header does nothing with unrecognised background colours', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                // @ts-expect-error deliberately invalid value
+                backgroundColor="foo"
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+        const cleanedClass = featureHeaderElement.getAttribute('class')?.trim().replace(/\s+/g, ' ');
+
+        expect(cleanedClass).toEqual('ds_feature-header');
+    });
+
+    test('feature header as HEADER element', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                tagName="header"
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+
+        expect(featureHeaderElement.tagName).toEqual('HEADER');
+    });
+
+    test('feature header with wide text', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                isWideText
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+
+        expect(featureHeaderElement).toHaveClass('ds_feature-header--wide');
+    });
+
+    test('feature header with top aligned image', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                isTopAlignImage
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+
+        expect(featureHeaderElement).toHaveClass('ds_feature-header--top');
+    });
+
+    test('feature header with cover image', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                hasCoverImage
+            >
+                <FeatureHeader.Primary
+                    data-testid="feature-header-primary"
+                    title={TITLE_TEXT}
+                >
+                </FeatureHeader.Primary>
+                <FeatureHeader.Secondary data-testid="feature-header-secondary">
+                    <img src="foo" data-testid="feature-header-image" />
+                </FeatureHeader.Secondary>
+            </FeatureHeader>
+        );
+
+        const featureHeaderSecondaryElement = screen.getByTestId('feature-header-secondary');
+
+        expect(featureHeaderSecondaryElement).toHaveClass('ds_feature-header__secondary--cover');
+    });
+
+    test('feature header with no image padding', () => {
+        render(
+            <FeatureHeader
+                data-testid="feature-header"
+                hasNoImagePadding
+            >
+                <FeatureHeader.Primary
+                    data-testid="feature-header-primary"
+                    title={TITLE_TEXT}
+                >
+                </FeatureHeader.Primary>
+                <FeatureHeader.Secondary data-testid="feature-header-secondary">
+                    <img src="foo" data-testid="feature-header-image" />
+                </FeatureHeader.Secondary>
+            </FeatureHeader>
+        );
+
+        const featureHeaderSecondaryElement = screen.getByTestId('feature-header-secondary');
+
+        expect(featureHeaderSecondaryElement).toHaveClass('ds_feature-header__secondary--no-padding');
+    });
+
+    test('passing additional props', () => {
+        render(
+            <FeatureHeader data-testid="feature-header"
+                data-test="foo"
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+        expect(featureHeaderElement?.dataset.test).toEqual('foo');
+    });
+
+    test('passing additional CSS classes', () => {
+        render(
+            <FeatureHeader data-testid="feature-header"
+                className="foo"
+            />
+        );
+
+        const featureHeaderElement = screen.getByTestId('feature-header');
+        expect(featureHeaderElement).toHaveClass('foo');
+    });
+});