@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/src/components/PageHeader/PageHeader.tsx

@@ -1,3 +1,6 @@
+import { PageHeaderProps } from "./types";
+import clsx from 'clsx';
+
 const PageHeader = ({
     children,
     className,
@@ -5,13 +8,13 @@ const PageHeader = ({
     title,
     titleId,
     ...props
-}: SGDS.Component.PageHeader) => {
+}: PageHeaderProps) => {
     return (
         <header
-            className={[
+            className={clsx([
                 'ds_page-header',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}

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,14 +1,17 @@
-const MetadataItem= ({
+import { MetdataItemProps, MetadataProps } from "./types";
+import clsx from 'clsx';
+
+const MetadataItem = ({
     children,
     className,
     name,
     ...props
-}: SGDS.Component.Metadata.Item) => {
+}: MetdataItemProps) => {
     return (
-        <div className={[
+        <div className={clsx([
             'ds_metadata__item',
             className
-        ].join(' ')}
+        ])}
             {...props}
         >
             <dt className="ds_metadata__key">{name}</dt>{' '}
@@ -24,14 +27,14 @@ const Metadata = ({
     className,
     isInline,
     ...props
-}: SGDS.Component.Metadata) => {
+}: MetadataProps) => {
     return (
         <dl
-            className={[
+            className={clsx([
                 'ds_metadata',
                 isInline && 'ds_metadata--inline',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             {children}

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.test.tsx

@@ -84,6 +84,26 @@ test('pagination page with click event', () => {
     expect(ONCLICK_FUNCTION).toHaveBeenCalled();
 });
 
+test('pagination page with onClick that is not a function', () => {
+    render(
+        <Page
+            ariaLabel={PAGE_ARIA_LABEL}
+            href={PAGE_HREF}
+            // @ts-expect-error onClick is not a function
+            onClick='foo'
+        >{PAGE_LABEL}</Page>
+    );
+
+    const item = screen.getByRole('listitem');
+    const link = within(item).getByRole('link');
+
+    fireEvent.click(link);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('Ellipsis item renders correctly', () => {
     render(
         <Ellipsis/>

package/src/components/Pagination/Pagination.tsx

@@ -1,4 +1,7 @@
 import Icon from "../../common/Icon";
+import { PaginationPageProps, PaginationProps } from "./types";
+import { LinkComponentProps } from "../../shared-types";
+import clsx from 'clsx';
 
 export const Page = ({
     ariaLabel,
@@ -8,21 +11,22 @@ export const Page = ({
     isCurrent = false,
     linkComponent,
     onClick
-}: SGDS.Component.Pagination.Page) => {
+}: PaginationPageProps) => {
     function handleClick(event: React.MouseEvent) {
+        /* istanbul ignore else */
         if (typeof onClick === 'function') {
             onClick(event);
         }
     }
 
     function processChildren(children: React.ReactNode) {
-        const classNames = [
+        const classNames = clsx([
             'ds_pagination__link',
             className,
-            isCurrent ? 'ds_current' : undefined
-        ].join(' ');
+            isCurrent && 'ds_current'
+        ]);
 
-        const linkProps: SGDS.LinkComponentProps = {
+        const linkProps: LinkComponentProps = {
             'aria-label': ariaLabel,
             href: href,
             onClick: handleClick
@@ -68,7 +72,7 @@ const Pagination = ({
     totalPages,
     linkComponent,
     ...props
-}: SGDS.Component.Pagination) => {
+}: PaginationProps) => {
     padding = Number(padding);
     page = Number(page);
 
@@ -105,10 +109,10 @@ const Pagination = ({
     }
 
     return (
-        <nav className={[
+        <nav className={clsx([
                 'ds_pagination',
                 className
-            ].join(' ')}
+            ])}
             aria-label={ariaLabel}
             {...props}
         >

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,17 +1,19 @@
 import Tag from "../Tag/Tag";
+import { PhaseBannerProps } from "./types";
+import clsx from 'clsx';
 
 const PhaseBanner = ({
     children,
     className,
     phaseName,
     ...props
-}: SGDS.Component.PhaseBanner) => {
+}: PhaseBannerProps) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_phase-banner',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <div className="ds_wrapper">

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,8 @@
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText'
 import WrapperTag from '../../common/WrapperTag';
+import { QuestionProps } from './types';
+import clsx from 'clsx';
 
 const Question = function ({
     children,
@@ -11,19 +13,19 @@ const Question = function ({
     legend,
     tagName = 'div',
     ...props
-}: SGDS.Component.Question) {
+}: QuestionProps) {
     return (
         <WrapperTag
             tagName={tagName}
-            className={[
+            className={clsx([
                 'ds_question',
                 hasError && 'ds_question--error',
                 className
-            ].join(' ')}
+            ])}
             {...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 | React.ReactNode;
+    hasError?: boolean;
+    hintText?: string | React.ReactNode;
+    legend?: string;
+    tagName: QuestionTags;
+}

package/src/components/RadioButton/RadioButton.test.tsx

@@ -61,6 +61,36 @@ test('radio with change fn', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('radio with onBlur that is not a function', () => {
+    render(
+        // @ts-expect-error onBlur is not a function
+        <RadioButton onBlur='foo' name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    fireEvent.blur(radio);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('radio with onChange that is not a function', () => {
+    render(
+        // @ts-expect-error onChange is not a function
+        <RadioButton onChange='foo' name="benefitType" label="Pension Credit" id="pensioncredit" />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    fireEvent.click(radio);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('radio with hint text', () => {
     render(
         <RadioButton hintText="hint text" name="benefitType" label="Pension Credit" id="pensioncredit" />

package/src/components/RadioButton/RadioButton.tsx

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
-
 import HintText from '../../common/HintText';
 import { CheckboxRadioContext } from '../../utils/context';
+import { RadioButtonProps } from './types';
+import clsx from 'clsx';
 
 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);
         }
@@ -32,10 +33,10 @@ const RadioButton = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_radio',
                 isSmall && 'ds_radio--small'
-            ].join(' ')}>
+            ])}>
             <input
                 aria-describedby={hintText ? hintTextId : undefined}
                 className="ds_radio__input"
@@ -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,7 @@
 import React from 'react';
 import { CheckboxRadioContext } from '../../utils/context';
+import { RadioGroupProps } from './types';
+import clsx from 'clsx';
 
 const RadioGroup = ({
     children,
@@ -8,15 +10,15 @@ const RadioGroup = ({
     isSmall,
     name = '',
     ...props
-}: SGDS.Component.RadioButton.Group) => {
+}: RadioGroupProps) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_radios',
                 'ds_field-group',
                 isInline && 'ds_field-group--inline',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <CheckboxRadioContext value={{ isSmall: !!isSmall, name}}>

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

@@ -10,7 +10,7 @@ const meta = {
         children: argTypes.children()
     },
     args: {
-        title: 'Application incomplete'
+
     }
 } satisfies Meta<typeof Facets>;
 
@@ -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,8 @@
 import React, { Children } from 'react';
 import Icon from "../../common/Icon";
 import { Cancel } from '../../../src/images/icons';
+import { SearchFacetsGroupProps, SearchFacetsItemProps, SearchFacetsProps } from './types';
+import clsx from 'clsx';
 
 const FacetsItem = ({
     accessibleName,
@@ -8,7 +10,7 @@ const FacetsItem = ({
     onClick,
     title,
     ...props
-}: SGDS.Component.SearchFacets.Item) => {
+}: SearchFacetsItemProps) => {
     accessibleName = accessibleName ? accessibleName : title;
 
     return (
@@ -31,7 +33,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 +41,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 +53,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,14 +68,14 @@ const Facets = ({
     }
 
     Children.forEach(children, child => {
-        processChild(child);
+        processChild(child as React.JSX.Element);
     });
 
     return (
-        <div className={[
+        <div className={clsx([
                 "ds_facets",
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <p className="visually-hidden">There {facetCount === 1 ? 'is' : 'are'} {facetCount} search {facetCount === 1 ? 'filter' : 'filters'} applied</p>

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">

package/src/components/SearchFilters/types.ts

@@ -0,0 +1,14 @@
+export interface SearchFiltersPanelProps extends  React.AllHTMLAttributes<HTMLElement> {
+    activeFilterCount?: number;
+    heading: string | React.ReactNode;
+    isScrollable?: boolean;
+    legend: string;
+}
+
+export interface SearchFiltersCheckboxGroupProps {
+    children: React.ReactNode,
+}
+
+export interface SearchFiltersProps extends React.AllHTMLAttributes<HTMLElement> {
+    searchResultsContainerId?: string;
+}