@scottish-government/designsystem-react 0.12.1 → 0.13.0

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

@@ -74,7 +74,7 @@ test('error summary item with no link', () => {
 test('error summary item with custom element', () => {
     render(
         <ErrorSummary.Item fragmentId={ERROR_FRAGMENT_ID} linkComponent={
-            ({ className, ...props }) => (
+            ({ ...props }) => (
                 <strong role="link" {...props}/>
             )}>
             {ERROR_TEXT}

package/src/components/ErrorSummary/ErrorSummary.tsx

@@ -1,10 +1,11 @@
 import { useId } from 'react';
+import { ErrorSummaryItemProps, ErrorSummaryProps } from './types';
 
 const ErrorSummaryItem = ({
     children,
     fragmentId,
     linkComponent
-}: SGDS.Component.ErrorSummary.Item) => {
+}: ErrorSummaryItemProps) => {
     const HREF = '#' + fragmentId;
 
     function processChildren(children: React.ReactNode) {
@@ -29,7 +30,7 @@ const ErrorSummary = ({
     className,
     title = 'There is a problem',
     ...props
-}: SGDS.Component.ErrorSummary) => {
+}: ErrorSummaryProps) => {
     const summaryTitleId = useId();
 
     return (

package/src/components/ErrorSummary/types.ts

@@ -0,0 +1,11 @@
+
+import { LinkComponent } from '../../shared-types';
+
+export interface ErrorSummaryItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    fragmentId: string;
+    linkComponent?: LinkComponent;
+}
+
+export interface ErrorSummaryProps extends React.AllHTMLAttributes<HTMLElement> {
+    title: string;
+}

package/src/components/FileDownload/FileDownload.tsx

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

package/src/components/FileDownload/types.ts

@@ -0,0 +1,11 @@
+import { DocumentIconName } from '../../shared-types';
+
+export interface FileDownloadProps extends React.AllHTMLAttributes<HTMLElement> {
+    cover?: string;
+    fileSize?: string;
+    fileType?: string;
+    fileUrl: string;
+    icon?: DocumentIconName;
+    isHighlighted?: boolean;
+    title: string;
+}

package/src/components/HideThisPage/HideThisPage.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef } from 'react';
-// @ts-ignore
+// @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';
 
 const HideThisPage = ({
     className,
     escapeUrl = 'https://www.bbc.co.uk/weather',
     ...props
-}: SGDS.Component.HideThisPage) => {
+}: HideThisPageProps) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/HideThisPage/types.ts

@@ -0,0 +1,3 @@
+export interface HideThisPageProps extends React.AllHTMLAttributes<HTMLElement> {
+    escapeUrl?: string;
+}

package/src/components/InsetText/InsetText.tsx

@@ -2,7 +2,7 @@ const InsetText = ({
     children,
     className,
     ...props
-}: SGDS.Component.InsetText) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <div
             className={[

package/src/components/NotificationBanner/NotificationBanner.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
             description: 'Makes the icon display in the alternative colour scheme'
         },
         hasIcon: {
-            description: 'Shows the ‘high priority’ icon on the notification banner',
+            description: 'Shows the \'high priority\' icon on the notification banner',
             control: 'boolean'
         },
         hasInverseIcon: {
@@ -22,7 +22,7 @@ const meta = {
          },
         isDismissable: {
             control: 'boolean',
-            description: 'Shows a ‘close’ button on the notification banner'
+            description: 'Shows a \'close\' button on the notification banner'
          },
         title: {
             description: 'A hidden title for the notification banner, useful for screen reader users',

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef } from 'react';
 import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
-// @ts-ignore
+// @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';
 
 const NotificationBanner = ({
     children,
@@ -10,9 +11,9 @@ const NotificationBanner = ({
     hasIcon,
     hasInverseIcon,
     isDismissable,
-    title,
+    title = 'Information',
     ...props
-}: SGDS.Common.AbstractNotificationBanner) => {
+}: AbstractNotificationBannerProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
@@ -32,7 +33,7 @@ const NotificationBanner = ({
             hasColourIcon={hasColourIcon}
             hasInverseIcon={hasInverseIcon}
             ref={ref}
-            title="Information"
+            title={title}
             {...props}
         >
             {children}

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -1,4 +1,5 @@
 import WrapperTag from '../../common/WrapperTag';
+import { NotificationPanelProps } from './types';
 
 const NotificationPanel = function ({
     ariaLive,
@@ -7,7 +8,7 @@ const NotificationPanel = function ({
     headingLevel = 'h1',
     title,
     ...props
-}: SGDS.Component.NotificationPanel) {
+}: NotificationPanelProps) {
     return (
         <div
             aria-live={ariaLive}

package/src/components/NotificationPanel/types.ts

@@ -0,0 +1,7 @@
+import { HeadingLevel } from '../../shared-types';
+
+export interface NotificationPanelProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    ariaLive?: React.AriaAttributes['aria-live'];
+    headingLevel?: HeadingLevel;
+    title: string;
+}

package/src/components/PageHeader/PageHeader.tsx

@@ -1,3 +1,5 @@
+import { PageHeaderProps } from "./types";
+
 const PageHeader = ({
     children,
     className,
@@ -5,7 +7,7 @@ const PageHeader = ({
     title,
     titleId,
     ...props
-}: SGDS.Component.PageHeader) => {
+}: PageHeaderProps) => {
     return (
         <header
             className={[

package/src/components/PageHeader/types.ts

@@ -0,0 +1,5 @@
+export interface PageHeaderProps extends React.AllHTMLAttributes<HTMLHeadingElement> {
+    label?: string;
+    title: string;
+    titleId?: string;
+}

package/src/components/PageMetadata/PageMetadata.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
         children: argTypes.children(),
         isInline: {
             control: 'boolean',
-            description: 'Makes the page metadata use the truncated ‘inline’ display'
+            description: 'Makes the page metadata use the truncated \'inline\' display'
         },
     },
     args: {

package/src/components/PageMetadata/PageMetadata.tsx

@@ -1,9 +1,11 @@
-const MetadataItem= ({
+import { MetdataItemProps, MetadataProps } from "./types";
+
+const MetadataItem = ({
     children,
     className,
     name,
     ...props
-}: SGDS.Component.Metadata.Item) => {
+}: MetdataItemProps) => {
     return (
         <div className={[
             'ds_metadata__item',
@@ -24,7 +26,7 @@ const Metadata = ({
     className,
     isInline,
     ...props
-}: SGDS.Component.Metadata) => {
+}: MetadataProps) => {
     return (
         <dl
             className={[

package/src/components/PageMetadata/types.ts

@@ -0,0 +1,7 @@
+export interface MetdataItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    name: string;
+}
+
+export interface MetadataProps extends React.AllHTMLAttributes<HTMLDListElement> {
+    isInline?: boolean;
+}

package/src/components/Pagination/Pagination.tsx

@@ -1,4 +1,6 @@
 import Icon from "../../common/Icon";
+import { PaginationPageProps, PaginationProps } from "./types";
+import { LinkComponentProps } from "../../shared-types";
 
 export const Page = ({
     ariaLabel,
@@ -8,7 +10,7 @@ export const Page = ({
     isCurrent = false,
     linkComponent,
     onClick
-}: SGDS.Component.Pagination.Page) => {
+}: PaginationPageProps) => {
     function handleClick(event: React.MouseEvent) {
         if (typeof onClick === 'function') {
             onClick(event);
@@ -22,7 +24,7 @@ export const Page = ({
             isCurrent ? 'ds_current' : undefined
         ].join(' ');
 
-        const linkProps: SGDS.LinkComponentProps = {
+        const linkProps: LinkComponentProps = {
             'aria-label': ariaLabel,
             href: href,
             onClick: handleClick
@@ -68,7 +70,7 @@ const Pagination = ({
     totalPages,
     linkComponent,
     ...props
-}: SGDS.Component.Pagination) => {
+}: PaginationProps) => {
     padding = Number(padding);
     page = Number(page);
 

package/src/components/Pagination/types.ts

@@ -0,0 +1,20 @@
+import { LinkComponent } from '../../shared-types';
+
+export interface PaginationPageProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel: React.AriaAttributes['aria-label'];
+    isCurrent?: boolean;
+    href: string;
+    linkComponent?: LinkComponent;
+    onClick?: React.EventHandler<React.FormEvent>;
+}
+
+export interface PaginationProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel: React.AriaAttributes['aria-label'];
+    className?: string;
+    linkComponent?: LinkComponent;
+    onClick?: React.EventHandler<React.FormEvent>;
+    padding: number;
+    page: number;
+    pattern: string;
+    totalPages: number;
+}

package/src/components/PhaseBanner/PhaseBanner.stories.tsx

@@ -31,8 +31,5 @@ export const CustomContent: Story = {
     args: {
         phaseName: 'Beta',
         children: <>This is a new service. Your <a href="#foo">feedback</a> will help us to improve it.</>
-    },
-    render: (args: any) => (
-        <PhaseBanner {...args}></PhaseBanner>
-    )
+    }
 };

package/src/components/PhaseBanner/PhaseBanner.tsx

@@ -1,11 +1,12 @@
 import Tag from "../Tag/Tag";
+import { PhaseBannerProps } from "./types";
 
 const PhaseBanner = ({
     children,
     className,
     phaseName,
     ...props
-}: SGDS.Component.PhaseBanner) => {
+}: PhaseBannerProps) => {
     return (
         <div
             className={[

package/src/components/PhaseBanner/types.ts

@@ -0,0 +1,3 @@
+export interface PhaseBannerProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    phaseName: string;
+}

package/src/components/Question/Question.tsx

@@ -1,6 +1,7 @@
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText'
 import WrapperTag from '../../common/WrapperTag';
+import { QuestionProps } from './types';
 
 const Question = function ({
     children,
@@ -11,7 +12,7 @@ const Question = function ({
     legend,
     tagName = 'div',
     ...props
-}: SGDS.Component.Question) {
+}: QuestionProps) {
     return (
         <WrapperTag
             tagName={tagName}
@@ -23,7 +24,7 @@ const Question = function ({
             {...props}
         >
             {legend && <legend>{legend}</legend>}
-            {hintText && <HintText text={hintText} />}
+            {hintText && <HintText>{hintText}</HintText>}
             {hasError && errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
             {children}
         </WrapperTag>

package/src/components/Question/types.ts

@@ -0,0 +1,9 @@
+type QuestionTags = 'div' | 'fieldset';
+
+export interface QuestionProps extends React.AllHTMLAttributes<HTMLElement> {
+    errorMessage?: string;
+    hasError?: boolean;
+    hintText?: string;
+    legend?: string;
+    tagName: QuestionTags;
+}

package/src/components/RadioButton/RadioButton.tsx

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 
 import HintText from '../../common/HintText';
 import { CheckboxRadioContext } from '../../utils/context';
+import { RadioButtonProps } from './types';
 
 const RadioButton = ({
     checked,
@@ -12,16 +13,16 @@ const RadioButton = ({
     name,
     onBlur,
     onChange
-}: SGDS.Component.RadioButton) => {
+}: RadioButtonProps) => {
     const hintTextId = `hint-text-${id}`;
 
-    function handleBlur(event: React.FocusEvent) {
+    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
         if (typeof onBlur === 'function') {
             onBlur(event);
         }
     }
 
-    function handleChange(event: React.ChangeEvent) {
+    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
         if (typeof onChange === 'function') {
             onChange(event);
         }
@@ -49,7 +50,7 @@ const RadioButton = ({
                 className="ds_radio__label"
                 htmlFor={id}
             >{label}</label>
-            {hintText && <HintText id={hintTextId} text={hintText} />}
+            {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
         </div>
     );
 };

package/src/components/RadioButton/RadioGroup.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CheckboxRadioContext } from '../../utils/context';
+import { RadioGroupProps } from './types';
 
 const RadioGroup = ({
     children,
@@ -8,7 +9,7 @@ const RadioGroup = ({
     isSmall,
     name = '',
     ...props
-}: SGDS.Component.RadioButton.Group) => {
+}: RadioGroupProps) => {
     return (
         <div
             className={[

package/src/components/RadioButton/types.ts

@@ -0,0 +1,12 @@
+import { CheckboxRadioBase } from "../../shared-types";
+
+export interface RadioGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    isInline?: boolean;
+    name?: string;
+    isSmall?: boolean;
+}
+
+export interface RadioButtonProps extends CheckboxRadioBase<HTMLInputElement> {
+    id: string;
+    name?: string;
+}

package/src/components/SearchFacets/SearchFacets.Group.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Facets from './SearchFacets';
-import { join } from 'path';
 
 const meta = {
     title: 'Components/Search results/Facets/Group',
@@ -37,7 +36,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: (args: any) => (
+    render: ({ ... args }) => (
         <Facets.Group {...args}>
             <Facets.Item title="Advice and guidance" />
             <Facets.Item title="Factsheet"/>
@@ -47,7 +46,7 @@ export const Default: Story = {
 };
 
 export const CustomJoinContent: Story = {
-    render: (args: any) => (
+    render: () => (
         <Facets.Group joinContent="and" title="Updated between">
             <Facets.Item accessibleName="Updated after 01/10/2025" title="01/10/2025" />
             <Facets.Item accessibleName="Updated before 31/10/2025" title="31/10/2025"/>

package/src/components/SearchFacets/SearchFacets.stories.tsx

@@ -18,7 +18,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: (args: any) => (
+    render: ({ ...args }) => (
         <Facets {...args}>
             <Facets.Group title="Content type">
                 <Facets.Item title="Advice and guidance" />

package/src/components/SearchFacets/SearchFacets.tsx

@@ -1,6 +1,7 @@
 import React, { Children } from 'react';
 import Icon from "../../common/Icon";
 import { Cancel } from '../../../src/images/icons';
+import { SearchFacetsGroupProps, SearchFacetsItemProps, SearchFacetsProps } from './types';
 
 const FacetsItem = ({
     accessibleName,
@@ -8,7 +9,7 @@ const FacetsItem = ({
     onClick,
     title,
     ...props
-}: SGDS.Component.SearchFacets.Item) => {
+}: SearchFacetsItemProps) => {
     accessibleName = accessibleName ? accessibleName : title;
 
     return (
@@ -31,7 +32,7 @@ const FacetsGroup = ({
     joinContent = 'or',
     title,
     ...props
-}: SGDS.Component.SearchFacets.Group) => {
+}: SearchFacetsGroupProps) => {
     return (
         <div className="ds_facet-group" {...props}>
             <dt className="ds_facet__group-title">
@@ -39,7 +40,7 @@ const FacetsGroup = ({
             </dt>
             {
                 Children.map(children, (child, index) => {
-                    const thisChild = child as React.ReactElement<SGDS.Component.SearchFacets.Item>
+                    const thisChild = child as React.ReactElement<SearchFacetsItemProps>
                     return React.cloneElement(thisChild, { joinContent: index > 0 ? joinContent : undefined, key: 'facet' + index });
                 })
             }
@@ -51,10 +52,10 @@ const Facets = ({
     children,
     className,
     ...props
-}: SGDS.Component.SearchFacets) => {
+}: SearchFacetsProps) => {
     let facetCount = 0;
 
-    function processChild(item: any) {
+    function processChild(item: React.JSX.Element) {
         if (item.type.displayName === 'Facets.Item') {
             facetCount = facetCount + 1;
 
@@ -66,7 +67,7 @@ const Facets = ({
     }
 
     Children.forEach(children, child => {
-        processChild(child);
+        processChild(child as React.JSX.Element);
     });
 
     return (

package/src/components/SearchFacets/types.ts

@@ -0,0 +1,14 @@
+export interface SearchFacetsGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    joinContent?: string;
+    title: string;
+}
+
+export interface SearchFacetsItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    accessibleName?: string;
+    joinContent?: string;
+    title: string;
+}
+
+export interface SearchFacetsProps extends React.AllHTMLAttributes<HTMLElement> {
+    headingId?: string;
+}

package/src/components/SearchFilters/SearchFilters.Panel.stories.tsx

@@ -39,12 +39,22 @@ const meta = {
                 name: 'number'
             }
         }
+    },
+    args: {
+        heading: 'Filter',
+        legend: 'Select which publication types you would like to see'
     }
 } satisfies Meta<typeof Filters.Panel>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+type ContentTypeType = {
+    label: string;
+    value: string;
+    checked?: boolean;
+};
+
 const CONTENT_TYPES = [
     {
         label: 'Advice and guidance',
@@ -134,7 +144,7 @@ CONTENT_TYPES_WITH_SELECTED[4].checked = true;
 CONTENT_TYPES_WITH_SELECTED[7].checked = true;
 
 export const Default: Story = {
-    render: (args: any) => (
+    render: () => (
         <Filters.Panel
             heading="Filter by date"
             legend="Filter by date"
@@ -155,12 +165,12 @@ export const Default: Story = {
 };
 
 export const Scrollable: Story = {
-    render: (args: any) => (
+    render: ({ ...args }) => (
         <Filters.Panel
+            {...args}
             heading="Content type"
             isScrollable
             legend="Select which publication types you would like to see"
-            {...args}
         >
             <Filters.CheckboxGroup>
                 {CONTENT_TYPES.map((type) => (
@@ -177,16 +187,17 @@ export const Scrollable: Story = {
 };
 
 export const WithActiveFilterCount: Story = {
-    render: (args: any) => (
+    args: {},
+    render: ({ ...args }) => (
         <Filters.Panel
-            activeFilterCount={CONTENT_TYPES_WITH_SELECTED.filter((item: any) => item.checked).length}
+            {...args}
+            activeFilterCount={CONTENT_TYPES_WITH_SELECTED.filter((item: ContentTypeType) => item.checked).length}
             heading="Content type"
             isScrollable
             legend="Select which publication types you would like to see"
-            {...args}
         >
             <Filters.CheckboxGroup>
-                {CONTENT_TYPES_WITH_SELECTED.map((type: any) => (
+                {CONTENT_TYPES_WITH_SELECTED.map((type: ContentTypeType) => (
                     <Checkbox
                         checked={type.checked || false}
                         key={type.value}

package/src/components/SearchFilters/SearchFilters.stories.tsx

@@ -104,7 +104,7 @@ const CONTENT_TYPES = [
 ];
 
 export const Default: Story = {
-    render: (args: any) => (
+    render: ({ ...args }) => (
         <Filters {...args}>
             <Filters.Panel legend="Select which publication types you would like to see" heading="Content type">
                 <Filters.CheckboxGroup>

package/src/components/SearchFilters/SearchFilters.tsx

@@ -3,6 +3,7 @@ import Button from "../Button";
 import SkipLinks from "../SkipLinks";
 import ConditionalWrapper from "../../common/ConditionalWrapper";
 import { CheckboxGroup } from "../Checkbox";
+import { SearchFiltersPanelProps, SearchFiltersCheckboxGroupProps, SearchFiltersProps } from "./types";
 
 export const FilterPanel = ({
     activeFilterCount = 0,
@@ -11,7 +12,7 @@ export const FilterPanel = ({
     legend,
     heading = 'Filter',
     ...props
-}: SGDS.Component.SearchFilters.Panel) => {
+}: SearchFiltersPanelProps) => {
     const headingWithCount = <>
         {heading}
         {activeFilterCount > 0 && <div className="ds_search-filters__filter-count">({activeFilterCount} selected)</div>}
@@ -36,7 +37,7 @@ export const FilterPanel = ({
 const FilterCheckboxGroup = ({
     children,
     ...props
-}: any) => {
+}: SearchFiltersCheckboxGroupProps) => {
     return (
         <CheckboxGroup
             className="ds_search-filters__checkboxes"
@@ -52,7 +53,7 @@ const Filters = ({
     children,
     searchResultsContainerId = 'search-results',
     ...props
-}: SGDS.Component.SearchFilters) => {
+}: SearchFiltersProps) => {
     return (
         <div className="ds_search-filters" {...props}>
             <div className="ds_details  ds_no-margin" data-module="ds-details">