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

package/src/components/DatePicker/DatePicker.tsx

@@ -4,12 +4,12 @@ import DSDatePicker from '@scottish-government/design-system/src/components/date
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import TextInput from '../TextInput/TextInput';
 
-const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
+const DatePicker = ({
     className,
     dateSelectCallback,
     disabledDates,
-    error,
     errorMessage,
+    hasError,
     hintText,
     id,
     iconPath = './',
@@ -23,7 +23,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
     value,
     width = 'fixed-10',
     ...props
-}) => {
+}: SGDS.Component.DatePicker) => {
     const ref = useRef(null);
 
     useEffect(() => {
@@ -68,7 +68,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
                     <div>
                         <TextInput
                             className="js-datepicker-date"
-                            error={!!error}
+                            hasError={!!hasError}
                             id={id + "-day"}
                             hintText={hintText}
                             label="Day"
@@ -83,7 +83,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
                     <div>
                         <TextInput
                             className="js-datepicker-month"
-                            error={!!error}
+                            hasError={!!hasError}
                             id={id + "-month"}
                             hintText={hintText}
                             label="Month"
@@ -98,7 +98,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
                     <div>
                         <TextInput
                             className="js-datepicker-year"
-                            error={!!error}
+                            hasError={!!hasError}
                             id={id + "-year"}
                             hintText={hintText}
                             label="Year"
@@ -112,7 +112,7 @@ const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
                 </fieldset>
             ) : (
                 <TextInput
-                    error={!!error}
+                    hasError={!!hasError}
                     errorMessage={errorMessage}
                     id={id}
                     hasButton

package/src/components/Details/Details.tsx

@@ -1,9 +1,9 @@
-const Details: React.FC<SGDS.Component.Details> = ({
+const Details = ({
     children,
     className,
     summary,
     ...props
-}) => {
+}: SGDS.Component.Details) => {
     return (
         <details
             className={[

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,10 +1,10 @@
-const ErrorMessage: React.FC<SGDS.Component.ErrorMessage> = ({
+const ErrorMessage = ({
     children,
     className,
     id,
     text,
     ...props
-}) => {
+}: SGDS.Component.ErrorMessage) => {
     return (
         <p
             className={[

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