@scottish-government/designsystem-react 0.7.0 → 0.8.0

package/src/components/ErrorSummary/ErrorSummary.test.tsx

@@ -2,24 +2,17 @@ import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import ErrorSummary from './ErrorSummary';
 
-const ERRORS = [
-    { fragmentId: 'did-resolve', title: 'Did this resolve your issue?' },
-    { fragmentId: 'what-topics', title: 'What topics are you interested in?' },
-    { fragmentId: 'more-detail', title: 'Please provide more detail' }
-];
+const ERROR_FRAGMENT_ID = 'did-resolve';
+const ERROR_TEXT = 'Did this resolve your issue?';
 
 test('error summary renders correctly', () => {
-    const TITLE_ID = 'error-summary-title';
-
     render(
-        <ErrorSummary data-testid="errorsummary" errors={ERRORS} />
+        <ErrorSummary data-testid="errorsummary"/>
     );
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
     const errorSummaryTitle = within(errorSummaryElement).getByRole('heading');
     const errorSummaryList = within(errorSummaryElement).getByRole('list');
-    const errorSummaryItems = within(errorSummaryList).getAllByRole('listitem');
-    const errorSummaryLink1 = within(errorSummaryItems[0]).getByRole('link');
 
     expect(errorSummaryElement).toHaveClass('ds_error-summary');
     expect(errorSummaryElement).toHaveAttribute('role', 'alert');
@@ -27,24 +20,19 @@ test('error summary renders correctly', () => {
     expect(errorSummaryElement.tagName).toEqual('DIV');
 
     expect(errorSummaryTitle).toHaveClass('ds_error-summary__title');
-    expect(errorSummaryTitle).toHaveAttribute('id', TITLE_ID);
+    expect(errorSummaryTitle).toHaveAttribute('id');
     expect(errorSummaryTitle.tagName).toEqual('H2');
     expect(errorSummaryTitle.textContent).toEqual('There is a problem');
 
     expect(errorSummaryList).toHaveClass('ds_error-summary__list');
     expect(errorSummaryList.tagName).toEqual('UL');
-
-    expect(errorSummaryItems.length).toEqual(ERRORS.length);
-
-    expect(errorSummaryLink1).toHaveAttribute('href', `#${ERRORS[0].fragmentId}`);
-    expect(errorSummaryLink1.textContent).toEqual(ERRORS[0].title);
 });
 
 test('error summary with custom title', () => {
     const TITLE_TEXT = 'Foo';
 
     render(
-        <ErrorSummary data-testid="errorsummary" errors={ERRORS} title={TITLE_TEXT} />
+        <ErrorSummary data-testid="errorsummary" title={TITLE_TEXT}/>
     );
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -53,42 +41,60 @@ test('error summary with custom title', () => {
     expect(errorSummaryTitle.textContent).toEqual(TITLE_TEXT);
 });
 
-test('error summary with no errors (empty array) should not display', () => {
+test('error summary item with link', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" errors={[]} />
+        <ErrorSummary.Item fragmentId={ERROR_FRAGMENT_ID}>{ERROR_TEXT}</ErrorSummary.Item>
     );
 
-    const errorSummaryElement = screen.queryByTestId('errorsummary');
+    const errorSummaryItem = screen.getByRole('listitem');
+    const errorSummaryLink = within(errorSummaryItem).queryByRole('link');
+
+    expect(errorSummaryItem.tagName).toEqual('LI');
 
-    expect(errorSummaryElement).not.toBeInTheDocument();
+    expect(errorSummaryLink).toBeInTheDocument();
+    expect(errorSummaryLink).toHaveAttribute('href', '#' + ERROR_FRAGMENT_ID);
+    expect(errorSummaryLink?.tagName).toEqual('A');
+    expect(errorSummaryLink?.textContent).toEqual(ERROR_TEXT);
 });
 
-test('error summary with no errors (no errors prop) should not display', () => {
+test('error summary item with no link', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" />
+        <ErrorSummary.Item>{ERROR_TEXT}</ErrorSummary.Item>
     );
 
-    const errorSummaryElement = screen.queryByTestId('errorsummary');
+    const errorSummaryItem = screen.getByRole('listitem');
+    const errorSummaryLink = within(errorSummaryItem).queryByRole('link');
 
-    expect(errorSummaryElement).not.toBeInTheDocument();
+    expect(errorSummaryItem.tagName).toEqual('LI');
+
+    expect(errorSummaryLink).not.toBeInTheDocument();
+    expect(errorSummaryItem?.textContent).toEqual(ERROR_TEXT);
 });
 
-test('error sumary item with no link', () => {
+test('error summary item with custom element', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" errors={[{ title: 'Did this resolve your issue?' }]} />
+        <ErrorSummary.Item fragmentId={ERROR_FRAGMENT_ID} linkComponent={
+            ({ className, ...props }) => (
+                <strong role="link" {...props}/>
+            )}>
+            {ERROR_TEXT}
+        </ErrorSummary.Item>
     );
 
-    const errorSummaryElement = screen.getByTestId('errorsummary');
-    const errorSummaryItems = within(errorSummaryElement).getAllByRole('listitem');
-    const errorSummaryLink1 = within(errorSummaryItems[0]).queryByRole('link');
+    const errorSummaryItem = screen.getByRole('listitem');
+    const errorSummaryLink = within(errorSummaryItem).queryByRole('link');
+
+    expect(errorSummaryItem.tagName).toEqual('LI');
 
-    expect(errorSummaryItems[0].textContent).toEqual('Did this resolve your issue?')
-    expect(errorSummaryLink1).not.toBeInTheDocument();
+    expect(errorSummaryLink).toBeInTheDocument();
+    expect(errorSummaryLink).toHaveAttribute('href', '#' + ERROR_FRAGMENT_ID);
+    expect(errorSummaryLink?.tagName).toEqual('STRONG');
+    expect(errorSummaryLink?.textContent).toEqual(ERROR_TEXT);
 });
 
 test('passing additional props', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" errors={ERRORS} data-test="foo" />
+        <ErrorSummary data-testid="errorsummary" data-test="foo"/>
     )
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -97,7 +103,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" errors={ERRORS} className="foo" />
+        <ErrorSummary data-testid="errorsummary" className="foo"/>
     )
 
     const errorSummaryElement = screen.getByTestId('errorsummary');

package/src/components/ErrorSummary/ErrorSummary.tsx

@@ -1,49 +1,57 @@
-import ConditionalWrapper from '../../common/ConditionalWrapper';
+import { useId } from 'react';
 
-const Error: React.FC<SGDS.Component.ErrorSummary.Error> = ({
+const ErrorSummaryItem = ({
+    children,
     fragmentId,
-    title
-}) => {
+    linkComponent
+}: SGDS.Component.ErrorSummary.Item) => {
+    const HREF = '#' + fragmentId;
+
+    function processChildren(children: React.ReactNode) {
+        if (linkComponent) {
+            return linkComponent({ className: '', href: HREF, children });
+        } else if (fragmentId) {
+            return <a href={HREF}>{children}</a>;
+        } else {
+            return children;
+        }
+    }
+
     return (
         <li>
-            <ConditionalWrapper
-                condition={!!fragmentId}
-                wrapper={() => <a href={`#${fragmentId}`}>{title}</a>}
-            >{title}</ConditionalWrapper>
+            {processChildren(children)}
         </li>
     );
-};
+}
 
-const ErrorSummary: React.FC<SGDS.Component.ErrorSummary> = ({
+const ErrorSummary = ({
+    children,
     className,
-    errors,
     title = 'There is a problem',
     ...props
-}) => {
+}: SGDS.Component.ErrorSummary) => {
+    const summaryTitleId = useId();
+
     return (
-        <>
-            {errors && errors.length && (
-                <div className={[
-                        'ds_error-summary',
-                        className
-                    ].join(' ')}
-                    aria-labelledby="error-summary-title"
-                    role="alert"
-                    {...props}
-                >
-                    <h2 className="ds_error-summary__title" id="error-summary-title">{title}</h2>
-
-                    <ul className="ds_error-summary__list">
-                        {errors && errors.map((error, index: number) => (
-                            <Error fragmentId={error.fragmentId} title={error.title} key={'error' + index} />
-                        ))}
-                    </ul>
-                </div>
-            )}
-        </>
+        <div className={[
+                'ds_error-summary',
+                className
+            ].join(' ')}
+            aria-labelledby={summaryTitleId}
+            role="alert"
+            {...props}
+        >
+            <h2 className="ds_error-summary__title" id={summaryTitleId}>{title}</h2>
+
+            <ul className="ds_error-summary__list">
+                {children}
+            </ul>
+        </div>
     );
 };
 
 ErrorSummary.displayName = 'ErrorSummary';
+ErrorSummaryItem.displayName = 'ErrorSummary.Item';
+ErrorSummary.Item = ErrorSummaryItem;
 
 export default ErrorSummary;

package/src/components/FileDownload/FileDownload.tsx

@@ -1,7 +1,7 @@
 import { useId } from 'react';
 import FileIcon from '../../common/FileIcon';
 
-const FileDownload: React.FC<SGDS.Component.FileDownload> = ({
+const FileDownload = ({
     className,
     cover,
     highlighted,
@@ -11,7 +11,7 @@ const FileDownload: React.FC<SGDS.Component.FileDownload> = ({
     fileUrl,
     title,
     ...props
-}) => {
+}: SGDS.Component.FileDownload) => {
     const hasMetadata = !!fileType || !!fileSize;
     const metaContainerId = `file-download-${useId()}`;
 

package/src/components/HideThisPage/HideThisPage.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSHideThisPage from '@scottish-government/design-system/src/components/hide-this-page/hide-this-page';
 
-const HideThisPage: React.FC<SGDS.Component.HideThisPage> = ({
+const HideThisPage = ({
     className,
     escapeUrl = 'https://www.bbc.co.uk/weather',
     ...props
-}) => {
+}: SGDS.Component.HideThisPage) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/InsetText/InsetText.tsx

@@ -1,8 +1,8 @@
-const InsetText: React.FC<SGDS.Component.InsetText> = ({
+const InsetText = ({
     children,
     className,
     ...props
-}) => {
+}: SGDS.Component.InsetText) => {
     return (
         <div
             className={[

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -3,17 +3,16 @@ import AbstractNotificationBanner from '../../common/AbstractNotificationBanner'
 // @ts-ignore
 import DSNotificationBanner from '@scottish-government/design-system/src/components/notification-banner/notification-banner';
 
-const NotificationBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
-    & { Buttons?: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> } = ({
+const NotificationBanner = ({
     children,
     className,
     close,
+    hasColourIcon,
+    hasInverseIcon,
     icon,
-    iconColour,
-    iconInverse,
     title,
     ...props
-}) => {
+}: SGDS.Common.AbstractNotificationBanner) => {
     const ref = useRef(null);
 
     useEffect(() => {
@@ -30,8 +29,8 @@ const NotificationBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
             ].join(' ')}
             close={close}
             icon={icon ? "PriorityHigh" : undefined}
-            iconColour={iconColour}
-            iconInverse={iconInverse}
+            hasColourIcon={hasColourIcon}
+            hasInverseIcon={hasInverseIcon}
             ref={ref}
             title="Information"
             {...props}

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -1,13 +1,13 @@
 import WrapperTag from '../../common/WrapperTag';
 
-const NotificationPanel: React.FC<SGDS.Component.NotificationPanel> = function ({
+const NotificationPanel = function ({
     ariaLive,
     children,
     className,
     headingLevel = 'h1',
     title,
     ...props
-}) {
+}: SGDS.Component.NotificationPanel) {
     return (
         <div
             aria-live={ariaLive}

package/src/components/PageHeader/PageHeader.tsx

@@ -1,10 +1,10 @@
-const PageHeader: React.FC<SGDS.Component.PageHeader> = ({
+const PageHeader = ({
     children,
     className,
     label,
     title,
     ...props
-}) => {
+}: SGDS.Component.PageHeader) => {
     return (
         <header
             className={[

package/src/components/PageMetadata/PageMetadata.tsx

@@ -1,9 +1,9 @@
-const MetadataItem: React.FC<SGDS.Component.Metadata.Item> = ({
+const MetadataItem= ({
     children,
     className,
     name,
     ...props
-}) => {
+}: SGDS.Component.Metadata.Item) => {
     return (
         <div className={[
             'ds_metadata__item',
@@ -19,13 +19,12 @@ const MetadataItem: React.FC<SGDS.Component.Metadata.Item> = ({
     );
 };
 
-const Metadata: React.FC<SGDS.Component.Metadata>
-    & { Item: React.FC<SGDS.Component.Metadata.Item> }    = ({
+const Metadata = ({
     children,
     className,
     inline,
     ...props
-}) => {
+}: SGDS.Component.Metadata) => {
     return (
         <dl
             className={[

package/src/components/Pagination/Pagination.test.tsx

@@ -4,7 +4,8 @@ import Pagination, { Page, Ellipsis } from './Pagination';
 
 const PAGE_ARIA_LABEL = 'Page 1';
 const PAGE_HREF = '#foo';
-const PAGE_TEXT = '1';
+const PAGE_TEXT = 1;
+const PAGE_LABEL = <span className="ds_pagination__link-label">{PAGE_TEXT}</span>;
 const CURRENT_PAGE = 10;
 const TOTAL_PAGES = 21;
 
@@ -13,8 +14,7 @@ test('pagination page renders correctly', () => {
         <Page
             ariaLabel={PAGE_ARIA_LABEL}
             href={PAGE_HREF}
-            text={PAGE_TEXT}
-        />
+        >{PAGE_LABEL}</Page>
     );
 
     const item = screen.getByRole('listitem');
@@ -25,6 +25,27 @@ test('pagination page renders correctly', () => {
     expect(link).toHaveClass('ds_pagination__link');
     expect(link).toHaveAttribute('aria-label', PAGE_ARIA_LABEL);
     expect(link).toHaveAttribute('href', PAGE_HREF);
+    expect(link.tagName).toEqual('A');
+    expect(span).toHaveClass('ds_pagination__link-label');
+});
+
+test('pagination page renders with custom link component', () => {
+    render(
+        <Page
+            ariaLabel={PAGE_ARIA_LABEL}
+            href={PAGE_HREF}
+            linkComponent={
+            ({ className, ...props }) => (
+                <span role="link" className={className} {...props}/>
+            )}
+        >{PAGE_LABEL}</Page>
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('link');
+    const span = within(link).getByText(PAGE_TEXT);
+
+    expect(link.tagName).toEqual('SPAN');
     expect(span).toHaveClass('ds_pagination__link-label');
 });
 
@@ -33,9 +54,8 @@ test('current pagination page', () => {
         <Page
             ariaLabel={PAGE_ARIA_LABEL}
             href={PAGE_HREF}
-            text={PAGE_TEXT}
             current
-        />
+        >{PAGE_LABEL}</Page>
     );
 
     const item = screen.getByRole('listitem');
@@ -52,9 +72,8 @@ test('pagination page with click event', () => {
         <Page
             ariaLabel={PAGE_ARIA_LABEL}
             href={PAGE_HREF}
-            text={PAGE_TEXT}
             onClick={ONCLICK_FUNCTION}
-        />
+        >{PAGE_LABEL}</Page>
     );
 
     const item = screen.getByRole('listitem');

package/src/components/Pagination/Pagination.tsx

@@ -1,31 +1,51 @@
 import Icon from "../../common/Icon";
 
-export const Page: React.FC<SGDS.Component.Pagination.Page> = ({
+export const Page = ({
     ariaLabel,
+    children,
+    className,
     current = false,
     href,
-    onClick,
-    text
-}) => {
+    linkComponent,
+    onClick
+}: SGDS.Component.Pagination.Page) => {
     function handleClick(event: React.MouseEvent) {
         if (typeof onClick === 'function') {
             onClick(event);
         }
     }
 
+    function processChildren(children: React.ReactNode) {
+        const classNames = [
+            'ds_pagination__link',
+            className,
+            current ? 'ds_current' : undefined
+        ].join(' ');
+
+        const linkProps: SGDS.LinkComponentProps = {
+            'aria-label': ariaLabel,
+            href: href,
+            onClick: handleClick
+        };
+
+        if (current) {
+            linkProps['aria-current'] = 'page';
+        }
+
+        if (linkComponent) {
+            return linkComponent({ className: classNames, children: children, ...linkProps });
+        } else if (href) {
+            return (
+                <a href={href} className={classNames} {...linkProps}>
+                    {children}
+                </a>
+            );
+        }
+    }
+
     return (
         <li className="ds_pagination__item">
-            <a aria-label={ariaLabel}
-                className={[
-                    'ds_pagination__link',
-                    current ? 'ds_current' : undefined
-                ].join(' ')}
-                href={href}
-                aria-current={current ? "page" : undefined}
-                onClick={handleClick}
-            >
-                <span className="ds_pagination__link-label">{text}</span>
-            </a>
+            {processChildren(children)}
         </li>
     );
 };
@@ -38,7 +58,7 @@ export const Ellipsis = () => {
     );
 };
 
-const Pagination: React.FC<SGDS.Component.Pagination> = ({
+const Pagination = ({
     ariaLabel = 'Pages',
     className,
     onClick,
@@ -46,8 +66,9 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
     page = 1,
     pattern = '/search?page=$1',
     totalPages,
+    linkComponent,
     ...props
-}) => {
+}: SGDS.Component.Pagination) => {
     padding = Number(padding);
     page = Number(page);
 
@@ -93,12 +114,16 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
         >
             <ul className="ds_pagination__list">
                 {page > 1 && (
-                    <li className="ds_pagination__item">
-                        <a aria-label="Previous page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page - 1))} data-search="pagination-previous" onClick={onClick}>
-                            <Icon icon="ChevronLeft" />
-                            <span className="ds_pagination__link-label">Previous</span>
-                        </a>
-                    </li>
+                    <Page
+                        ariaLabel="Previous page"
+                        className="ds_pagination__link--text  ds_pagination__link--icon"
+                        data-search="pagination-previous"
+                        href={pattern.replace('$1', String(page - 1))}
+                        onClick={onClick}
+                    >
+                        <Icon icon="ChevronLeft" />
+                        <span className="ds_pagination__link-label">Previous</span>
+                    </Page>
                 )}
 
                 {includeFirst && (
@@ -107,8 +132,10 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
                             ariaLabel="Page 1"
                             href={pattern.replace('$1', String(1))}
                             onClick={onClick}
-                            text="1"
-                        />
+                            linkComponent={linkComponent}
+                        >
+                            <span className="ds_pagination__link-label">1</span>
+                        </Page>
                         <Ellipsis/>
                     </>
                 )}
@@ -116,13 +143,15 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
                 {pages && pages.map((item, index: number) => (
                     <Page
                         ariaLabel={`Page ${item}`}
-                        current={item === page}
                         href={pattern.replace('$1', String(item))}
+                        current={item === page}
                         key={`pagination${index}`}
+                        linkComponent={linkComponent}
                         onClick={onClick}
                         pattern={pattern}
-                        text={item.toString()}
-                    />
+                    >
+                        <span className="ds_pagination__link-label">{item.toString()}</span>
+                    </Page>
                 ))}
 
                 {includeLast && (
@@ -131,20 +160,25 @@ const Pagination: React.FC<SGDS.Component.Pagination> = ({
                         <Page
                             ariaLabel={`Page ${totalPages}`}
                             href={pattern.replace('$1', String(totalPages))}
+                            linkComponent={linkComponent}
                             onClick={onClick}
                             pattern={pattern}
-                            text={totalPages.toString()}
-                        />
+                        >
+                            <span className="ds_pagination__link-label">{totalPages.toString()}</span>
+                        </Page>
                     </>
                 )}
 
                 {page < totalPages && (
-                    <li className="ds_pagination__item">
-                        <a aria-label="Next page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page + 1))} data-search="pagination-next" onClick={onClick}>
-                            <span className="ds_pagination__link-label">Next</span>
-                            <Icon icon="ChevronRight" />
-                        </a>
-                    </li>
+                    <Page
+                        ariaLabel="Next page"
+                        href={pattern.replace('$1', String(page + 1))}
+                        className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon"
+                        onClick={onClick}
+                    >
+                        <span className="ds_pagination__link-label">Next</span>
+                        <Icon icon="ChevronRight" />
+                    </Page>
                 )}
 
             </ul>

package/src/components/PhaseBanner/PhaseBanner.tsx

@@ -1,12 +1,11 @@
 import Tag from "../Tag/Tag";
 
-const PhaseBanner: React.FC<SGDS.Component.PhaseBanner> = ({
+const PhaseBanner = ({
     children,
     className,
-    content,
     phaseName,
     ...props
-}) => {
+}: SGDS.Component.PhaseBanner) => {
     return (
         <div
             className={[
@@ -17,9 +16,9 @@ const PhaseBanner: React.FC<SGDS.Component.PhaseBanner> = ({
         >
             <div className="ds_wrapper">
                 <p className="ds_phase-banner__content">
-                    {phaseName && <Tag title={phaseName} className="ds_phase-banner__tag" />}
+                    {phaseName && <Tag className="ds_phase-banner__tag">{phaseName}</Tag>}
                     <span className="ds_phase-banner__text">
-                        {content ? content : children || "This is a new service"}
+                        {children || "This is a new service"}
                     </span>
                 </p>
             </div>

package/src/components/Question/Question.test.tsx

@@ -46,7 +46,7 @@ test('question with error', () => {
     const ERROR_MESSAGE_TEXT = 'My error message';
 
     render(
-        <Question error errorMessage={ERROR_MESSAGE_TEXT}>
+        <Question hasError errorMessage={ERROR_MESSAGE_TEXT}>
         </Question>
     );