@scottish-government/designsystem-react 0.13.0 → 1.0.1

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');
+    });
+});

package/src/components/FeatureHeader/FeatureHeader.tsx

@@ -0,0 +1,119 @@
+import React, { Children, createContext, useContext } from 'react';
+import { FeatureHeaderProps, FeatureHeaderPrimaryProps } from './types';
+import { ConditionalWrapper, WrapperTag } from '../../common';
+import clsx from 'clsx';
+
+type FeatureHeaderSettingsContextProps = {
+    hasCoverImage?: boolean,
+    hasNoImagePadding?: boolean
+}
+
+const FeatureHeaderSettingsContext = createContext<FeatureHeaderSettingsContextProps>({
+    hasCoverImage: undefined,
+    hasNoImagePadding: undefined
+});
+
+const Primary = ({
+    children,
+    title,
+    ...props
+}: FeatureHeaderPrimaryProps) => {
+    return (
+        <div
+            className="ds_feature-header__primary"
+            {...props}
+        >
+            <h1 className="ds_feature-header__title">
+                {title}
+            </h1>
+            {children}
+        </div>
+    )
+};
+
+const Secondary = ({
+    children,
+    ...props
+}: React.AllHTMLAttributes<HTMLDivElement>) => {
+    const hasCoverImage = useContext(FeatureHeaderSettingsContext).hasCoverImage;
+    const hasNoImagePadding = useContext(FeatureHeaderSettingsContext).hasNoImagePadding;
+
+    children = Children.map(children, child => {
+        const thisChild = child as React.ReactElement<HTMLElement>;
+        if (thisChild && ['img', 'svg', 'picture'].includes(thisChild.type as string)) {
+            return React.cloneElement(thisChild, { className: 'ds_feature-header__image' });
+        } else {
+            return child;
+        }
+    });
+
+    return (
+        <div className={clsx([
+            'ds_feature-header__secondary',
+            hasCoverImage && 'ds_feature-header__secondary--cover',
+            hasNoImagePadding && 'ds_feature-header__secondary--no-padding'
+        ])}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+const FeatureHeader = ({
+    backgroundColor,
+    children,
+    className,
+    hasCoverImage,
+    hasNoImagePadding,
+    id,
+    isFullWidth,
+    isWideText,
+    isTopAlignImage,
+    tagName = 'div',
+    ...props
+}: FeatureHeaderProps) => {
+    let backgroundColorClassName;
+    if (backgroundColor === 'secondary') {
+        backgroundColorClassName = 'ds_feature-header--background-secondary';
+    } else if (backgroundColor === 'tertiary') {
+        backgroundColorClassName = 'ds_feature-header--background-tertiary';
+    } else if (backgroundColor === 'brand') {
+        backgroundColorClassName = 'ds_feature-header--background';
+    }
+
+    return (
+        <WrapperTag
+            className={clsx([
+                'ds_feature-header',
+                isFullWidth && 'ds_feature-header--fullwidth',
+                isWideText && 'ds_feature-header--wide',
+                isTopAlignImage && 'ds_feature-header--top',
+                backgroundColorClassName && backgroundColorClassName,
+                className
+            ])}
+            id={id}
+            tagName={tagName}
+            {...props}
+        >
+            <ConditionalWrapper
+                condition={!!isFullWidth}
+                wrapper={(children: React.JSX.Element) => <div className="ds_wrapper">{children}</div>}
+            >
+                <FeatureHeaderSettingsContext value={{
+                    hasCoverImage, hasNoImagePadding
+                }}>
+                    {children}
+                </FeatureHeaderSettingsContext>
+            </ConditionalWrapper>
+        </WrapperTag>
+    );
+};
+
+FeatureHeader.displayName = 'FeatureHeader';
+Primary.displayName = 'FeatureHeader.Primary';
+Secondary.displayName = 'FeatureHeader.Secondary';
+FeatureHeader.Primary = Primary;
+FeatureHeader.Secondary = Secondary;
+
+export default FeatureHeader;

package/src/components/FeatureHeader/index.ts

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

package/src/components/FeatureHeader/types.ts

@@ -0,0 +1,13 @@
+export interface FeatureHeaderPrimaryProps extends React.AllHTMLAttributes<HTMLElement> {
+    title: string
+}
+
+export interface FeatureHeaderProps extends React.AllHTMLAttributes<HTMLElement> {
+    backgroundColor?: 'secondary' | 'tertiary' | 'brand'
+    hasCoverImage?: boolean
+    hasNoImagePadding?: boolean
+    isFullWidth?: boolean
+    isWideText?: boolean
+    isTopAlignImage?: boolean
+    tagName?: 'div' | 'header'
+}

package/src/components/FileDownload/FileDownload.test.tsx

@@ -53,10 +53,6 @@ test('highlighted file download', () => {
     expect(fileDownload).toHaveClass('ds_file-download--highlighted');
 });
 
-// test('file download with specific icon', () => {
-
-// });
-
 test('file download with cover image', () => {
     const COVER_URL = 'my-image.png';
 
@@ -66,7 +62,7 @@ test('file download with cover image', () => {
 
     const thumbnailImage = screen.getByRole('presentation', {hidden: true});
 
-    expect(thumbnailImage).toHaveClass('ds_file-download__thumbnail-image');
+    expect(thumbnailImage).toHaveClass('ds_file-download__thumbnail-image', 'ds_file-download__thumbnail-image--outlined');
     expect(thumbnailImage).toHaveAttribute('alt', '');
     expect(thumbnailImage).toHaveAttribute('src', COVER_URL);
     expect(thumbnailImage.tagName).toEqual('IMG');

package/src/components/FileDownload/FileDownload.tsx

@@ -1,6 +1,7 @@
 import { useId } from 'react';
 import FileIcon from '../../common/FileIcon';
 import { FileDownloadProps } from './types';
+import clsx from 'clsx';
 
 const FileDownload = ({
     className,
@@ -17,17 +18,17 @@ const FileDownload = ({
     const metaContainerId = `file-download-${useId()}`;
 
     return (
-        <div className={[
+        <div className={clsx([
             'ds_file-download',
             isHighlighted && 'ds_file-download--highlighted',
             className
-        ].join(' ')}
+        ])}
             {...props}
         >
             <div className="ds_file-download__thumbnail">
                 <a className="ds_file-download__thumbnail-link" aria-hidden="true" tabIndex={-1} href={fileUrl}>
                     {cover ?
-                        <img alt="" className="ds_file-download__thumbnail-image" src={cover}/>
+                        <img alt="" className="ds_file-download__thumbnail-image  ds_file-download__thumbnail-image--outlined" src={cover}/>
                     :
                         <FileIcon ariaLabel="" className="ds_file-download__thumbnail-image" icon={icon} />
                     }

package/src/components/HideThisPage/HideThisPage.test.tsx

@@ -49,7 +49,18 @@ test('custom escape URL', () => {
     const link = within(hideThisPageElement).getByRole('link');
 
     expect(link).toHaveAttribute('href', ESCAPE_URL);
-})
+});
+
+test('instantiating/initialising DS component script', () => {
+    render(
+        <HideThisPage data-testid="htp" />
+    );
+
+    const hideThisPageElement = screen.getByTestId('htp');
+    const link = within(hideThisPageElement).getByRole('link');
+    expect(link).toHaveClass('js-initialised');
+    expect(link).toHaveClass('js-instantiated');
+});
 
 test('passing additional props', () => {
     render(

package/src/components/HideThisPage/HideThisPage.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
 import DSHideThisPage from '@scottish-government/design-system/src/components/hide-this-page/hide-this-page';
 import { HideThisPageProps } from './types';
+import clsx from 'clsx';
 
 const HideThisPage = ({
     className,
@@ -11,8 +11,9 @@ const HideThisPage = ({
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
-            new DSHideThisPage().init();
+            new DSHideThisPage(ref.current).init();
 
             const HIDE_THIS_PAGE_DIV_ID = 'hide-this-page-instruction';
             if (!document.getElementById(HIDE_THIS_PAGE_DIV_ID)) {
@@ -30,10 +31,10 @@ const HideThisPage = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_hide-page',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >

package/src/components/InsetText/InsetText.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 const InsetText = ({
     children,
     className,
@@ -5,10 +7,10 @@ const InsetText = ({
 }: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_inset-text',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <div className="ds_inset-text__text">

package/src/components/NotificationBanner/NotificationBanner.test.tsx

@@ -42,3 +42,13 @@ test('notification banner with icon', () => {
     expect(bannerIcon).toHaveClass('ds_icon');
     expect(bannerIcon).toHaveAttribute('aria-hidden');
 });
+
+test('instantiating/initialising DS component script', () => {
+    render(
+        <NotificationBanner data-testid="notification-banner" />
+    );
+
+    const notificationBanner = screen.getByTestId('notification-banner');
+    expect(notificationBanner).toHaveClass('js-initialised');
+    expect(notificationBanner).toHaveClass('js-instantiated');
+});

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
-// @ts-expect-error no types from core SGDS
 import DSNotificationBanner from '@scottish-government/design-system/src/components/notification-banner/notification-banner';
 import { AbstractNotificationBannerProps } from '../../common/AbstractNotificationBanner/types';
+import clsx from 'clsx';
 
 const NotificationBanner = ({
     children,
@@ -17,6 +17,7 @@ const NotificationBanner = ({
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSNotificationBanner(ref.current).init();
         }
@@ -24,10 +25,10 @@ const NotificationBanner = ({
 
     return (
         <AbstractNotificationBanner
-            className={[
+            className={clsx([
                 'ds_reversed',
                 className
-            ].join(' ')}
+            ])}
             isDismissable={isDismissable}
             icon={hasIcon ? "PriorityHigh" : undefined}
             hasColourIcon={hasColourIcon}

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -1,5 +1,6 @@
 import WrapperTag from '../../common/WrapperTag';
 import { NotificationPanelProps } from './types';
+import clsx from 'clsx';
 
 const NotificationPanel = function ({
     ariaLive,
@@ -12,10 +13,10 @@ const NotificationPanel = function ({
     return (
         <div
             aria-live={ariaLive}
-            className={[
+            className={clsx([
                 'ds_notification-panel',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <WrapperTag