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

package/@types/common/AbstractNotificationBanner.d.ts

@@ -9,8 +9,8 @@ declare namespace SGDS.Common {
         close?: boolean,
         hasIcon?: boolean,
         icon?: IconName,
-        iconColour?: boolean,
-        iconInverse?: boolean,
+        hasColourIcon?: boolean,
+        hasInverseIcon?: boolean,
         title: string,
         ref?: any
     }

package/@types/common/ActionLink.d.ts

@@ -0,0 +1,8 @@
+declare namespace SGDS.Common {
+    interface ActionLink extends React.AllHTMLAttributes<HTMLElement> {
+        describedby: string,
+        href?: string,
+        linkComponent?: SGDS.LinkComponent,
+        onclick?: React.EventHandler<any>
+    }
+}

package/@types/common/FileIcon.d.ts

@@ -1,6 +1,6 @@
 declare namespace SGDS.Common {
     interface FileIcon extends React.AllHTMLAttributes<SVGSVGElement> {
-        ariaLabel?: string,
+        ariaLabel?: React.AriaAttributes['aria-label'],
         className?: string,
         icon: DocumentIconName
     }

package/@types/common/Icon.d.ts

@@ -1,6 +1,6 @@
 declare namespace SGDS.Common {
     interface Icon extends React.AllHTMLAttributes<SVGSVGElement> {
-        ariaLabel?: string,
+        ariaLabel?: React.AriaAttributes['aria-label'],
         className?: string,
         fill?: boolean,
         icon: IconName,

package/@types/components/Accordion.d.ts

@@ -1,7 +1,6 @@
 declare namespace SGDS.Component {
     namespace Accordion {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            headingLevel?: SGDS.HeadingLevel,
             id: string,
             open?: boolean,
             title: string

package/@types/components/Breadcrumbs.d.ts

@@ -1,14 +1,11 @@
 declare namespace SGDS.Component {
     namespace Breadcrumbs {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            hidden?: boolean,
-            href?: string,
-            title: string
+            isHidden?: boolean,
+            linkComponent?: SGDS.LinkComponent
         }
     }
 
     interface Breadcrumbs extends React.AllHTMLAttributes<HTMLElement> {
-        hideLastItem?: boolean,
-        items: Breadcrumbs.Item[]
     }
 }

package/@types/components/Checkbox.d.ts

@@ -1,13 +1,11 @@
 declare namespace SGDS.Component {
     namespace Checkbox {
         interface Group extends React.AllHTMLAttributes<HTMLElement> {
-            items: Checkbox[],
             small?: boolean
         }
     }
 
     interface Checkbox extends CheckboxRadioBase<HTMLInputElement> {
         exclusive?: boolean
-        id: string
     }
 }

package/@types/components/ConfirmationMessage.d.ts

@@ -1,6 +1,6 @@
 declare namespace SGDS.Component {
     interface ConfirmationMessage extends React.AllHTMLAttributes<HTMLElement> {
-        ariaLive: AriaLive,
+        ariaLive: React.AriaAttributes['aria-live'],
         headingLevel: HeadingLevel,
         title: string
     }

package/@types/components/ContentsNav.d.ts

@@ -1,15 +1,13 @@
 declare namespace SGDS.Component {
     namespace ContentsNav {
-        interface Link extends React.AllHTMLAttributes<HTMLElement> {
-            title: string,
-            current: boolean,
-            href: string
+        interface ContentsNavItem extends React.AllHTMLAttributes<HTMLElement> {
+            current?: boolean,
+            linkComponent?: SGDS.LinkComponent;
         }
     }
 
     interface ContentsNav extends React.AllHTMLAttributes<HTMLElement> {
-        items: ContentsNav.Link[],
-        label: string,
+        ariaLabel: React.AriaAttributes['aria-label'],
         title: string
     }
 }

package/@types/components/DatePicker.d.ts

@@ -2,7 +2,7 @@ declare namespace SGDS.Component {
     interface DatePicker extends React.AllHTMLAttributes<HTMLElement> {
         dateSelectCallback?: Function;
         disabledDates?: string,
-        error?: boolean,
+        hasError?: boolean,
         errorMessage?: string,
         id: string,
         hintText?: string,

package/@types/components/ErrorSummary.d.ts

@@ -1,13 +1,12 @@
 declare namespace SGDS.Component {
     namespace ErrorSummary {
-        interface Error extends React.AllHTMLAttributes<HTMLElement> {
-            fragmentId?: string
-            title: string
+        interface Item extends React.AllHTMLAttributes<HTMLElement> {
+            fragmentId: string,
+            linkComponent: SGDS.LinkComponent
         }
     }
 
     interface ErrorSummary extends React.AllHTMLAttributes<HTMLElement> {
-        errors?: ErrorSummary.Error[],
         title: string
     }
 }

package/@types/components/NotificationPanel.d.ts

@@ -1,6 +1,6 @@
 declare namespace SGDS.Component {
     interface NotificationPanel extends React.AllHTMLAttributes<HTMLDivElement> {
-        ariaLive?: AriaLive,
+        ariaLive?: React.AriaAttributes['aria-live'],
         headingLevel?: HeadingLevel,
         title: string
     }

package/@types/components/Pagination.d.ts

@@ -1,17 +1,18 @@
 declare namespace SGDS.Component {
     namespace Pagination {
         interface Page extends React.AllHTMLAttributes<HTMLElement> {
-            ariaLabel: string,
+            ariaLabel: React.AriaAttributes['aria-label'],
             current?: boolean,
             href: string,
-            onClick?: React.EventHandler<any>,
-            text: string
+            linkComponent?: SGDS.LinkComponent,
+            onClick?: React.EventHandler<any>
         }
     }
 
     interface Pagination extends React.AllHTMLAttributes<HTMLElement> {
-        ariaLabel: string,
+        ariaLabel: React.AriaAttributes['aria-label'],
         className?: string,
+        linkComponent?: SGDS.LinkComponent,
         onClick?: React.EventHandler<any>,
         padding: number,
         page: number,

package/@types/components/PhaseBanner.d.ts

@@ -1,6 +1,5 @@
 declare namespace SGDS.Component {
     interface PhaseBanner extends React.AllHTMLAttributes<HTMLDivElement> {
-        content?: string,
         phaseName: string
     }
 }

package/@types/components/Question.d.ts

@@ -2,8 +2,8 @@ declare namespace SGDS.Component {
     type QuestionTags = 'div' | 'fieldset';
 
     interface Question extends React.AllHTMLAttributes<HTMLElement> {
-        error?: boolean,
         errorMessage?: string,
+        hasError?: boolean,
         hintText?: string,
         legend?: string,
         tagName: QuestionTags

package/@types/components/RadioButton.d.ts

@@ -2,7 +2,6 @@ declare namespace SGDS.Component {
     namespace RadioButton {
         interface Group extends React.AllHTMLAttributes<HTMLElement> {
             inline?: boolean,
-            items: RadioButton[],
             name: string,
             small?: boolean
         }

package/@types/components/Select.d.ts

@@ -1,13 +1,6 @@
 declare namespace SGDS.Component {
-    namespace Select {
-        interface Option extends React.AllHTMLAttributes<HTMLOptionElement> {
-            text: string
-        }
-    }
-
     interface Select extends FormFieldBase<HTMLDivElement> {
         defaultValue?: string,
-        options: Select.Option[],
         placeholder?: string,
         width?: InputWidth
     }

package/@types/components/SequentialNavigation.d.ts

@@ -2,13 +2,13 @@ declare namespace SGDS.Component {
     namespace SequentialNavigation {
         interface Link extends React.AllHTMLAttributes<HTMLDivElement> {
             href: string,
-            title: string
+            isPrev?: boolean,
+            linkComponent?: SGDS.LinkComponent,
+            textLabel: string
         }
     }
 
     interface SequentialNavigation extends React.AllHTMLAttributes<HTMLElement> {
-        ariaLabel?: string,
-        next?: SequentialNavigation.Link,
-        previous?: SequentialNavigation.Link
+        ariaLabel?: React.AriaAttributes['aria-label']
     }
 }

package/@types/components/SideNavigation.d.ts

@@ -1,19 +1,18 @@
 declare namespace SGDS.Component {
     namespace SideNavigation {
         interface List extends React.AllHTMLAttributes<HTMLUListElement> {
-            items?: SideNavigation.Link[],
-            root?: boolean
+            isRoot?: boolean
         }
 
-        interface Link extends React.AllHTMLAttributes<HTMLLIElement> {
+        interface Item extends React.AllHTMLAttributes<HTMLLIElement> {
             current?: boolean,
             href: string,
-            items?: SideNavigation.Link[]
+            linkComponent?: SGDS.LinkComponent,
             title: string,
         }
     }
 
     interface SideNavigation extends React.AllHTMLAttributes<HTMLElement> {
-        items: SideNavigation.Link[]
+
     }
 }

package/@types/components/SiteFooter.d.ts

@@ -0,0 +1,25 @@
+declare namespace SGDS.Component {
+    namespace SiteFooter {
+        interface Links extends React.AllHTMLAttributes<HTMLUListElement> {
+        }
+
+        interface Link extends React.AllHTMLAttributes<HTMLLIElement> {
+            href?: string,
+            linkComponent?: SGDS.LinkComponent
+        }
+
+        interface License extends React.AllHTMLAttributes<HTMLDivElement> {
+            href?: string,
+            logoSrc?: string
+        }
+
+        interface Org extends React.AllHTMLAttributes<HTMLDivElement> {
+            href?: string,
+            title: string
+        }
+    }
+
+    interface SiteFooter extends React.AllHTMLAttributes<HTMLElement> {
+
+    }
+}

package/@types/components/SiteHeader.d.ts

@@ -1,11 +1,18 @@
 declare namespace SGDS.Component {
+    namespace SiteHeader {
+        interface Brand extends React.AllHTMLAttributes<HTMLElement> {
+            homeUrl: string,
+            linkComponent?: SGDS.LinkComponent,
+            siteTitle?: string
+        }
+    }
     interface SiteHeader extends React.AllHTMLAttributes<HTMLHeadingElement> {
         logo?: {
-            alt: string,
+            alt?: string,
             href?: string,
-            src: string
+            src?: string
         },
-        navigationItems: SGDS.Component.SiteNavigation.Link[],
+        navigationItems: SGDS.Component.SiteNavigation.Item[],
         phaseBanner?: SGDS.Component.PhaseBanner,
         siteSearch?: SGDS.Component.SiteSearch,
         siteTitle?: string

package/@types/components/SiteNavigation.d.ts

@@ -1,14 +1,13 @@
 declare namespace SGDS.Component {
     namespace SiteNavigation {
-        interface Link extends React.AllHTMLAttributes<HTMLLIElement> {
+        interface Item extends React.AllHTMLAttributes<HTMLLIElement> {
             current?: boolean,
             href: string,
-            title: string
+            linkComponent?: SGDS.LinkComponent
         }
     }
 
     interface SiteNavigation extends React.AllHTMLAttributes<HTMLElement> {
-        items: SiteNavigation.Link[],
         ref?: React.RefObject<null>
     }
 }

package/@types/components/SkipLinks.d.ts

@@ -1,14 +1,13 @@
 declare namespace SGDS.Component {
     namespace SkipLinks {
         interface Link extends React.AllHTMLAttributes<HTMLLIElement> {
-            targetId: string,
-            title: string
+            fragmentId: string
         }
     }
 
     interface SkipLinks extends React.AllHTMLAttributes<HTMLDivElement> {
-        items?: SkipLinks.Link[],
         mainContentId?: string,
-        mainLinkText?: string
+        mainLinkText?: string,
+        isStatic?: boolean
     }
 }

package/@types/components/SummaryCard.d.ts

@@ -1,8 +1,6 @@
 declare namespace SGDS.Component {
     interface SummaryCard extends React.AllHTMLAttributes<HTMLElement> {
-        actions?: SummaryList.Action[],
         headingLevel?: SGDS.HeadingLevel,
-        items: SummaryList.Item[],
         title: string
     }
 }

package/@types/components/SummaryList.d.ts

@@ -1,27 +1,14 @@
 declare namespace SGDS.Component {
     namespace SummaryList {
-        interface Action extends React.AllHTMLAttributes<HTMLElement> {
-            describedby: string,
-            href?: string,
-            onclick?: React.EventHandler<any>,
-            title: string
-        }
-
         interface Answer extends React.AllHTMLAttributes<HTMLElement> {
-            value: number | string
         }
 
         interface Item extends React.LiHTMLAttributes<HTMLLIElement> {
-            actions?: SummaryList.Action[],
-            index: number,
             title: string
-            value?: string | string[]
         }
-
     }
 
     interface SummaryList extends React.OlHTMLAttributes<HTMLOListElement> {
-        items: SummaryList.Item[],
         noBorder?: boolean
     }
 }

package/@types/components/Tabs.d.ts

@@ -7,7 +7,6 @@ declare namespace SGDS.Component {
         }
 
         interface TabListItem extends React.AllHTMLAttributes<HTMLLIElement> {
-            title: string,
             href: string
         }
     }

package/@types/components/Tag.d.ts

@@ -1,7 +1,5 @@
 declare namespace SGDS.Component {
     interface Tag extends React.AllHTMLAttributes<HTMLElement> {
-        className?: string,
-        colour?: TagColour,
-        title: string
+        colour?: TagColour
     }
 }

package/@types/components/TaskList.d.ts

@@ -9,6 +9,7 @@ declare namespace SGDS.Component {
             href?: string,
             id?: string,
             isComplete?: boolean,
+            linkComponent?: SGDS.LinkComponent,
             statusText?: string,
             tagColour?: TagColour,
             title: string

package/@types/sgds.d.ts

@@ -1,11 +1,22 @@
 declare namespace SGDS {
-    type AriaLive = 'polite' | 'assertive';
     type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     type IconName = 'ArrowUpward' | 'CalendarToday' | 'Cancel' | 'CheckCircle' | 'ChevronLeft' | 'ChevronRight' | 'Close' | 'Description' | 'DoubleChevronLeft' | 'DoubleChevronRight' | 'Error' | 'ExpandLess' | 'ExpandMore' | 'List' | 'Menu' | 'PriorityHigh' | 'Search';
     type DocumentIconName = 'Audio' | 'Csv' | 'Excel' | 'File' | 'Generic' | 'Geodata' | 'Ical' | 'Ico' | 'Image' | 'Odf' | 'Odg' | 'Odp' | 'Ods' | 'Odt' | 'Pdf' | 'Ppt' | 'Rtf' | 'Text' | 'Video' | 'Word' | 'Xml' | 'Zip';
     type InputWidth = 'fixed-20' | 'fixed-10' | 'fixed-5' | 'fixed-4' | 'fixed-3' | 'fixed-2' | 'fluid-three-quarters' | 'fluid-two-thirds' | 'fluid-half' | 'fluid-one-third' | 'fluid-one-quarter';
     type TagColour = 'grey' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
 
+    type LinkComponent = (linkComponent: LinkComponentProps) => React.ReactNode;
+
+    type LinkComponentProps = {
+        'aria-label'?: React.AriaAttributes['aria-label'],
+        'aria-current'?: React.AriaAttributes['aria-current'];
+        'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+        children?: React.ReactNode,
+        className?: string,
+        href?: string,
+        onClick?: React.EventHandler<any>
+    }
+
     interface CheckboxRadioBase<T> extends React.AllHTMLAttributes<T> {
         checked?: boolean,
         hintText?: string,
@@ -18,8 +29,8 @@ declare namespace SGDS {
     }
 
     interface FormFieldBase<T> extends React.AllHTMLAttributes <T> {
-        error?: boolean,
         errorMessage?: string,
+        hasError?: boolean,
         id: string,
         hintText?: string,
         label: string,

package/CHANGELOG.md

@@ -7,7 +7,69 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
 
 ---
 
-## [0.7.0] 
+## [0.8.0] - 2025-08-18
+## Added
+- ActionLink component, centralising behaviour used in actions in both SummaryCard and SummaryList
+- SiteFooter component
+- Add support for the SkipLinks 'static' variant
+
+## Changed
+
+Two headline changes:
+
+1. Components that used an array of data to populate their children have been changed to use explicit child components.
+  Affected components:
+  - Breadcrumbs
+  - Checkbox/CheckboxGroup
+  - ContentsNav
+  - ErrorSummary
+  - RadioButton/RadioGroup
+  - Select
+  - SequentialNavigation
+  - SideNavigation
+  - SiteHeader
+  - SiteNavigation
+  - SkipLinks
+  - SummaryCard
+  - SummaryList
+
+2. Many components that use links now accept a `linkComponent` param to provide a mechanism for overriding the default `<a>` element, for example to allow the use of the Next.js `<Link>` component.
+  Affected components:
+  - ActionLink
+  - Breadcrumbs
+  - ContentsNav
+  - ErrorSummary
+  - Pagination
+  - SequentialNavigation
+  - SideNavigation
+  - SiteFooter
+  - SiteHeader
+  - TaskList
+
+Other component changes:
+
+- Prop names for many boolean properties made more explicit:
+  - form fields (and Question) use `hasError` (was: `error`)
+  - AbstractNotificationBanner (and components extending it) uses `hasColourIcon` and `hasInverseIcon` (was: `colourIcon`, `inverseIcon`)
+  - Breadcrumb.Item uses `isHidden` (was: `hidden`)
+  - SideNavigation.List uses `isRoot` (was: `root`)
+- PhaseBanner and Tag only use their children instead of allowing content to be passed through a prop
+- SequentialNav allows custom 'previous' and 'next' text labels
+- SkipLinks will add a default link if it has no children; if any children are added the default link will not be included (i.e. include your own 'main' link if you're adding additional skip links)
+
+Maintenance:
+
+- Reduce use of legacy React APIs
+  - remove use of `isValidElement`
+  - Icon and FileIcon use JSX instead of `React.createElement`
+- Components no longer use `React.FC<>` in their definitions
+- ARIA attributes in props now derive their types from the React ARIA types
+
+## [0.7.1] - 2025-08-04
+### Removed
+- Cleaned up unwanted items in the 'dist' folder 
+
+## [0.7.0] - 2025-08-01
 ### Changed
 - Change all component file names to Pascal case
 - Use uppercase text for const variable names

package/dist/common/AbstractNotificationBanner.jsx

@@ -9,15 +9,16 @@ const ScreenReaderText_1 = __importDefault(require("./ScreenReaderText"));
 const Buttons = ({ children }) => {
     return (<>{children}</>);
 };
-const AbstractNotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
+const AbstractNotificationBanner = ({ children, className, close, hasColourIcon, hasInverseIcon, icon, title = 'Information', ...props }) => {
     let content = [];
     let buttons;
     react_1.Children.forEach(children, (child) => {
-        if ((0, react_1.isValidElement)(child) && child.type === Buttons) {
-            buttons = child;
+        const thisChild = child;
+        if (thisChild && thisChild.type === Buttons) {
+            buttons = thisChild;
         }
         else {
-            content.push(child);
+            content.push(thisChild);
         }
     });
     return (<div className={[
@@ -34,8 +35,8 @@ const AbstractNotificationBanner = ({ children, className, close, icon, iconColo
                     {icon &&
             <span className={[
                     'ds_notification__icon',
-                    iconInverse && 'ds_notification__icon--inverse',
-                    iconColour && 'ds_notification__icon--colour'
+                    hasInverseIcon && 'ds_notification__icon--inverse',
+                    hasColourIcon && 'ds_notification__icon--colour'
                 ].join(' ')} aria-hidden="true">
                             <Icon_1.default icon={icon}/>
                         </span>}
@@ -60,4 +61,5 @@ const AbstractNotificationBanner = ({ children, className, close, icon, iconColo
 };
 AbstractNotificationBanner.displayName = 'AbstractNotificationBanner';
 AbstractNotificationBanner.Buttons = Buttons;
+Buttons.displayName = 'Buttons';
 exports.default = AbstractNotificationBanner;

package/dist/common/ActionLink.jsx

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ActionLink = ({ children, describedby, href, linkComponent, onclick }) => {
+    const CLASSNAME = 'ds_link';
+    function processChildren(children) {
+        if (linkComponent) {
+            return linkComponent({ className: CLASSNAME, href, children, onClick: onclick, 'aria-describedby': describedby });
+        }
+        else if (href) {
+            return <a aria-describedby={describedby} onClick={onclick} href={href} className={CLASSNAME}>{children}</a>;
+        }
+        else {
+            return <button type="button" aria-describedby={describedby} onClick={onclick} className={CLASSNAME}>{children}</button>;
+        }
+    }
+    return (processChildren(children));
+};
+ActionLink.displayName = 'ActionLink';
+exports.default = ActionLink;

package/dist/common/FileIcon.jsx

@@ -39,13 +39,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const FileIcons = __importStar(require("../images/documents"));
 const FileIcon = ({ ariaLabel = '', className, icon }) => {
-    const Component = react_1.default.createElement(FileIcons[icon], {
-        className: className,
-        'aria-label': ariaLabel
-    });
-    return (<>
-            {Component}
-        </>);
+    const FileIconComponent = FileIcons[icon];
+    return (<FileIconComponent aria-label={ariaLabel} className={className}/>);
 };
 FileIcon.displayName = 'FileIcon';
 exports.default = FileIcon;

package/dist/common/Icon.jsx

@@ -39,19 +39,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const Icons = __importStar(require("../images/icons"));
 const Icon = ({ ariaLabel, className, fill, icon, iconSize }) => {
-    const Component = react_1.default.createElement(Icons[icon], {
-        'aria-hidden': ariaLabel ? undefined : true,
-        'aria-label': ariaLabel,
-        className: [
+    const IconComponent = Icons[icon];
+    return (<IconComponent aria-hidden={ariaLabel ? undefined : true} aria-label={ariaLabel} className={[
             'ds_icon',
             className,
             fill && 'ds_icon--fill',
             iconSize && `ds_icon--${iconSize}`
-        ].join(' ')
-    });
-    return (<>
-            {Component}
-        </>);
+        ].join(' ')}/>);
 };
 Icon.displayName = 'Icon';
 exports.default = Icon;