@scottish-government/designsystem-react 0.12.0 → 0.13.0

package/src/components/ErrorSummary/index.ts

@@ -0,0 +1 @@
+export { default } from './ErrorSummary';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './FileDownload';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './HideThisPage';

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/InsetText/index.ts

@@ -0,0 +1 @@
+export { default } from './InsetText';

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/NotificationBanner/index.ts

@@ -0,0 +1 @@
+export { default } from './NotificationBanner';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './NotificationPanel';

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import PageHeader from './PageHeader';
-import Metadata from '../PageMetadata/PageMetadata';
+import Metadata from '../PageMetadata';
 
 const meta = {
     title: 'Components/PageHeader',

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/index.ts

@@ -0,0 +1 @@
+export { default } from './PageHeader';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './PageMetadata';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './Pagination';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './PhaseBanner';

package/src/components/PhaseBanner/types.ts

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

package/src/components/Question/Question.stories.tsx

@@ -2,9 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Question from './Question';
-import TextInput from '../TextInput/TextInput';
-import Checkbox from '../Checkbox/Checkbox';
-import CheckboxGroup from '../Checkbox/CheckboxGroup';
+import TextInput from '../TextInput';
+import Checkbox, { CheckboxGroup } from '../Checkbox';
 
 const meta = {
     title: 'Components/Question',

package/src/components/Question/Question.tsx

@@ -1,6 +1,7 @@
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
-import HintText from '../../common/HintText';
+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/index.ts

@@ -0,0 +1 @@
+export { default } from './Question';

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

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
 
-import RadioButton from '../RadioButton/RadioButton';
-import RadioGroup from './RadioGroup';
+import RadioButton, { RadioGroup } from '../RadioButton';
 
 const meta = {
     title: 'Components/Radio/Radio group',

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

@@ -1,7 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import RadioButton from './RadioButton';
-import RadioGroup from './RadioGroup';
+import RadioButton, { RadioGroup } from '../RadioButton';
 
 test('radio group renders correctly', () => {
     render(

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/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioButton';
+export { default as RadioGroup } from './RadioGroup';

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/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchFacets';

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;
+}