@scottish-government/designsystem-react 0.12.1 → 0.13.0

package/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 import React, { createContext, useContext, useEffect, useRef, useId } from 'react';
 import WrapperTag from '../../common/WrapperTag';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSAccordion from '@scottish-government/design-system/src/components/accordion/accordion';
+import { AccordionItemProps, AccordionProps } from './types';
 
 let accordionItemCounter = 0;
 const AccordionHeadingLevelContext = createContext('h3');
@@ -14,11 +15,11 @@ const AccordionItem = ({
     heading,
     title,
     ...props
-}: SGDS.Component.Accordion.Item) => {
+}: AccordionItemProps) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${useId()}`;
 
-    let headingLevel = useContext(AccordionHeadingLevelContext);
+    const headingLevel = useContext(AccordionHeadingLevelContext);
 
     if (title) {
         console.warn(
@@ -77,7 +78,7 @@ const Accordion = ({
     hideOpenAll,
     isSmall,
     ...props
-}: SGDS.Component.Accordion) => {
+}: AccordionProps) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/Accordion/types.ts

@@ -0,0 +1,13 @@
+import { HeadingLevel } from "../../shared-types";
+
+export interface AccordionItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    id?: string;
+    heading: string | React.ReactNode;
+    isOpen?: boolean;
+}
+
+export interface AccordionProps extends React.AllHTMLAttributes<HTMLElement> {
+    headingLevel?: HeadingLevel;
+    hideOpenAll?: boolean;
+    isSmall?: boolean;
+}

package/src/components/AspectBox/AspectBox.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import argTypes from '../../../.storybook/sgdsArgTypes';
-
-// @ts-ignore
+// @ts-expect-error no types
 import coo from '../../../static/images/highland-cow.jpg';
 import AspectBox from './AspectBox';
 

package/src/components/AspectBox/AspectBox.tsx

@@ -1,13 +1,14 @@
 import React, { Children, useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSAspectBox from '@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback';
+import { AspectBoxProps } from './types';
 
 const AspectBox = ({
     children,
     className,
     ratio,
     ...props
-}: SGDS.Component.AspectBox) => {
+}: AspectBoxProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
@@ -16,7 +17,7 @@ const AspectBox = ({
         }
     }, [ref]);
 
-    function processChild(child: any) {
+    function processChild(child: React.JSX.Element) {
         if (['img', 'svg', 'picture'].includes(child.type)) {
             return React.cloneElement(child, { className: 'ds_aspect-box__inner' });
         }
@@ -49,7 +50,7 @@ const AspectBox = ({
             ref={ref}
             {...props}
         >
-            {Children.map(children, child => processChild(child))}
+            {Children.map(children, child => processChild(child as React.JSX.Element))}
         </div>
     );
 };

package/src/components/AspectBox/types.ts

@@ -0,0 +1,3 @@
+export interface AspectBoxProps extends React.AllHTMLAttributes<HTMLElement> {
+    ratio?: 'square' | '1:1' | '4:3' | '16:9' | '21:9';
+}

package/src/components/BackToTop/BackToTop.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSBackToTop from '@scottish-government/design-system/src/components/back-to-top/back-to-top';
+import { BackToTopProps } from './types';
 
 const BackToTop = ({
     className,
     href = '#page-top',
     ...props
-}: SGDS.Component.BackToTop) => {
+}: BackToTopProps) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/BackToTop/types.ts

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

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,10 +1,12 @@
+import { BreadcrumbItemProps } from "./types";
+
 const BreadcrumbItem = ({
     children,
     isHidden,
     href,
     linkComponent,
     ...props
-}: SGDS.Component.Breadcrumbs.Item) => {
+}: BreadcrumbItemProps) => {
     const BREADCRUMB_LINK_CLASSNAME = 'ds_breadcrumbs__link';
 
     function processChildren(children: React.ReactNode) {
@@ -32,7 +34,7 @@ const BreadcrumbItem = ({
 const Breadcrumbs = ({
     children,
     ...props
-}: SGDS.Component.Breadcrumbs) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <nav
             aria-label="Breadcrumb"

package/src/components/Breadcrumbs/types.ts

@@ -0,0 +1,6 @@
+import { LinkComponent } from "../../shared-types";
+
+export interface BreadcrumbItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    isHidden?: boolean;
+    linkComponent?: LinkComponent;
+}

package/src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import Icon from '../../common/Icon';
 import ScreenReaderText from '../../common/ScreenReaderText';
 import WrapperTag from '../../common/WrapperTag';
+import { ButtonProps } from './types';
 
 const Button = ({
     buttonStyle,
@@ -15,7 +16,7 @@ const Button = ({
     type = 'button',
     width,
     ...props
-}: SGDS.Component.Button) => {
+}: ButtonProps) => {
     // determine which HTML tag to use
     let tagName = 'button';
     if (href) {

package/src/components/Button/ButtonGroup.tsx

@@ -1,9 +1,11 @@
+import { ButtonGroupProps } from "./types";
+
 const ButtonGroup = ({
     children,
     className,
     isInline,
     ...props
-}: SGDS.Component.ButtonGroup) => {
+}: ButtonGroupProps) => {
     return (
         <div className={[
             "ds_button-group",

package/src/components/Button/types.ts

@@ -0,0 +1,21 @@
+import { IconName } from '../../shared-types';
+
+type ButtonStyle = 'primary' | 'secondary';
+type ButtonType = 'submit' | 'reset' | 'button';
+type ButtonWidth = 'fluid' | 'fixed' | 'max';
+
+export interface ButtonProps extends React.AllHTMLAttributes<HTMLButtonElement> {
+    hasLinkStyle?: boolean;
+    href?: string;
+    icon?: IconName;
+    isIconLeft?: boolean;
+    isIconOnly?: boolean;
+    isSmall?: boolean;
+    buttonStyle?: ButtonStyle;
+    type?: ButtonType;
+    width?: ButtonWidth;
+}
+
+export interface ButtonGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    isInline?: boolean;
+}

package/src/components/CategoryItem/CategoryItem.tsx

@@ -1,5 +1,6 @@
 import ConditionalWrapper from "../../common/ConditionalWrapper";
 import WrapperTag from "../../common/WrapperTag";
+import { CategoryItemProps } from "./types";
 
 const CategoryItem = ({
     children,
@@ -10,15 +11,17 @@ const CategoryItem = ({
     tagName = 'div',
     title,
     ...props
-}: SGDS.Component.CategoryItem) => {
+}: CategoryItemProps) => {
     const LINK_CLASS = 'ds_category-item__link';
 
     function getLinkElement(children: React.ReactNode) {
+        let linkElement;
         if (linkComponent) {
-            return linkComponent({ className: LINK_CLASS, href, children });
-        } else if (href) {
-            return <a href={href} className={LINK_CLASS}>{children}</a>;
+            linkElement = linkComponent({ className: LINK_CLASS, href, children });
+        } else {
+            linkElement = <a href={href} className={LINK_CLASS}>{children}</a>;
         }
+        return linkElement as React.JSX.Element;
     }
 
     return (

package/src/components/CategoryItem/types.ts

@@ -0,0 +1,10 @@
+import { HeadingLevel, LinkComponent } from '../../shared-types';
+
+export interface CategoryItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    className?: string;
+    headingLevel?: HeadingLevel;
+    href?: string;
+    linkComponent?: LinkComponent;
+    tagName?: string;
+    title: string;
+}

package/src/components/CategoryList/CategoryList.tsx

@@ -1,5 +1,7 @@
 import React, { Children } from 'react';
 import WrapperTag from "../../common/WrapperTag";
+import { CategoryListProps } from './types';
+import { CategoryItemProps } from '../CategoryItem/types';
 
 const CategoryList = ({
     children,
@@ -7,9 +9,9 @@ const CategoryList = ({
     isGrid,
     isOrdered,
     ...props
-}: SGDS.Component.CategoryList) => {
+}: CategoryListProps) => {
     function processChild(child: React.ReactNode) {
-        const thisChild = child as React.ReactElement<SGDS.Component.CategoryItem>
+        const thisChild = child as React.ReactElement<CategoryItemProps>
         return React.cloneElement(thisChild, {tagName: 'li'})
     }
 

package/src/components/CategoryList/types.ts

@@ -0,0 +1,5 @@
+export interface CategoryListProps extends React.AllHTMLAttributes<HTMLElement> {
+    className?: string;
+    isGrid?: boolean;
+    isOrdered?: boolean;
+}

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -12,18 +12,18 @@ const meta = {
             description: 'The checkbox is checked on load'
         },
         hintText: argTypes.hintText,
-        exclusive: {
+        isExclusive: {
             control: 'boolean',
             description: 'Whether the checkbox is exclusive (e.g. a \'none\' option)'
         },
         id: argTypes.id(),
+        isSmall: argTypes.isSmall(),
         label: argTypes.label(),
         name: {
             type: 'string'
         },
         onBlur: argTypes.onBlur(),
-        onChange: argTypes.onChange(),
-        small: argTypes.isSmall()
+        onChange: argTypes.onChange()
     },
     args: {
         label: 'Benefits and grants',

package/src/components/Checkbox/Checkbox.tsx

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { CheckboxRadioContext } from '../../utils/context';
 
 import HintText from '../../common/HintText';
+import { CheckboxProps } from './types';
 
 const Checkbox = ({
     checked,
@@ -13,17 +14,17 @@ const Checkbox = ({
     name,
     onBlur,
     onChange
-}: SGDS.Component.Checkbox) => {
+}: CheckboxProps) => {
     const hintTextId = `hint-text-${id}`;
     const behaviour = isExclusive && 'exclusive';
 
-    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);
         }
@@ -54,7 +55,7 @@ const Checkbox = ({
                     className="ds_checkbox__label"
                     htmlFor={id}
                 >{label}</label>
-                {hintText && <HintText id={hintTextId} text={hintText} />}
+                {hintText && <HintText id={hintTextId}>{hintText}</HintText>}
             </div>
         </>
     );

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useRef } from 'react';
 import { CheckboxRadioContext } from '../../utils/context';
-
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSCheckboxes from '@scottish-government/design-system/src/forms/checkbox/checkboxes'
+import { CheckboxGroupProps } from './types';
 
 export const CheckboxGroup = ({
     children,
     className,
     isSmall,
     ...props
-}: SGDS.Component.Checkbox.Group) => {
+}: CheckboxGroupProps) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/Checkbox/types.ts

@@ -0,0 +1,9 @@
+import { CheckboxRadioBase } from '../../shared-types';
+
+export interface CheckboxGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    isSmall?: boolean;
+}
+
+export interface CheckboxProps extends CheckboxRadioBase<HTMLInputElement> {
+    isExclusive?: boolean;
+}

package/src/components/ConfirmationMessage/ConfirmationMessage.tsx

@@ -1,5 +1,6 @@
 import Icon from '../../common/Icon';
 import WrapperTag from '../../common/WrapperTag';
+import { ConfirmationMessageProps } from './types';
 
 const ConfirmationMessage = ({
     ariaLive = 'polite',
@@ -8,7 +9,7 @@ const ConfirmationMessage = ({
     headingLevel = 'h3',
     title,
     ...props
-}: SGDS.Component.ConfirmationMessage) => {
+}: ConfirmationMessageProps) => {
     return (
         <div
             aria-live={ariaLive}

package/src/components/ConfirmationMessage/types.ts

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

package/src/components/ContentsNav/ContentsNav.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
     },
     args: {
         children: <>
-            <ContentsNav.Item current>
+            <ContentsNav.Item isCurrent>
                 Apply for Blue Badge
             </ContentsNav.Item>
             <ContentsNav.Item href="#2">
@@ -39,4 +39,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+    args: {
+        ariaLabel: 'Contents navigation',
+        title: 'Contents'
+    }
 };

package/src/components/ContentsNav/ContentsNav.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import { ContentsNavItemProps, ContentsNavProps } from './types';
 
 const ContentsNavItem = ({
     children,
     isCurrent,
     href,
     linkComponent
-}: SGDS.Component.ContentsNav.ContentsNavItem) => {
+}: ContentsNavItemProps) => {
     const classNames = ['ds_contents-nav__link'];
     let ariaCurrent: React.AriaAttributes["aria-current"];
 
@@ -39,7 +40,7 @@ const ContentsNav = ({
     className,
     title = 'Contents',
     ...props
-}: SGDS.Component.ContentsNav) => {
+}: ContentsNavProps) => {
     return (
         <nav
             aria-label={ariaLabel}

package/src/components/ContentsNav/types.ts

@@ -0,0 +1,11 @@
+import { LinkComponent } from "../../shared-types";
+
+export interface ContentsNavItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    isCurrent?: boolean;
+    linkComponent?: LinkComponent;
+}
+
+export interface ContentsNavProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel: React.AriaAttributes['aria-label'];
+    title: string;
+}

package/src/components/CookieBanner/CookieBanner.Buttons.stories.tsx

@@ -12,9 +12,9 @@ const meta = {
     },
     args: {
         children: [
-            <Button className="js-accept-all-cookies" small buttonStyle="secondary">Accept all cookies</Button>,
-            <Button className="js-accept-essential-cookies" small buttonStyle="secondary">Use essential cookies only</Button>,
-            <a href="/cookies/">Set cookie preferences</a>
+            <Button className="js-accept-all-cookies" isSmall buttonStyle="secondary" key="1">Accept all cookies</Button>,
+            <Button className="js-accept-essential-cookies" isSmall buttonStyle="secondary" key="2">Use essential cookies only</Button>,
+            <a href="/cookies/" key="3">Set cookie preferences</a>
         ]
     }
 } satisfies Meta<typeof CookieBanner.Buttons>;

package/src/components/CookieBanner/CookieBanner.stories.tsx

@@ -12,13 +12,13 @@ const meta = {
     },
     args: {
         children: [
-            <p key="foo">We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
+            <p key="1">We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
                 experience.</p>,
-            <p key="bar">Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
-                To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>,
-            <CookieBanner.Buttons>
-                <Button className="js-accept-all-cookies" small buttonStyle="secondary">Accept all cookies</Button>
-                <Button className="js-accept-essential-cookies" small buttonStyle="secondary">Use essential cookies only</Button>
+            <p key="2">Click &lsquo;Accept all cookies&rsquo; to agree to all cookies that collect anonymous data.
+                To only allow the cookies that make the site work, click &lsquo;Use essential cookies only.&rsquo; Visit &lsquo;Set cookie preferences&rsquo; to control specific cookies.</p>,
+            <CookieBanner.Buttons key="3">
+                <Button className="js-accept-all-cookies" isSmall buttonStyle="secondary">Accept all cookies</Button>
+                <Button className="js-accept-essential-cookies" isSmall buttonStyle="secondary">Use essential cookies only</Button>
                 <a href="/cookies/">Set cookie preferences</a>
             </CookieBanner.Buttons>
         ]

package/src/components/CookieBanner/CookieBanner.test.tsx

@@ -6,6 +6,7 @@
 import { test, expect } from 'vitest';
 import { render } from '@testing-library/react';
 import CookieBanner from './CookieBanner';
+import Button from '../Button/Button';
 
 const BANNER_TEXT = 'We need to tell you about something';
 
@@ -16,6 +17,11 @@ test('cookie banner renders correctly', () => {
     render(
         <CookieBanner>
             {BANNER_TEXT}
+            <CookieBanner.Buttons>
+                <Button className="js-accept-all-cookies" isSmall buttonStyle="secondary">Accept all cookies</Button>
+                <Button className="js-accept-essential-cookies" isSmall buttonStyle="secondary">Use essential cookies only</Button>
+                <a href="/cookies/">Set cookie preferences</a>
+                </CookieBanner.Buttons>
         </CookieBanner>
     );
 

package/src/components/CookieBanner/CookieBanner.tsx

@@ -1,14 +1,23 @@
 
+import { useEffect, useRef } from 'react';
 import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';
+import { AbstractNotificationBannerProps } from '../../common/AbstractNotificationBanner/types';
 
 const CookieBanner = ({
     children,
     className,
-    title,
+    title = 'Information',
     ...props
-}: SGDS.Common.AbstractNotificationBanner) => {
+}: AbstractNotificationBannerProps) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSCookieBanner(ref.current).init();
+        }
+    }, [ref]);
 
     return (
         <>
@@ -20,6 +29,7 @@ const CookieBanner = ({
                     className
                 ].join(' ')}
                 data-module="ds-cookie-notification"
+                ref={ref}
                 title={title}
                 {...props}
             >

package/src/components/DatePicker/DatePicker.test.tsx

@@ -24,8 +24,6 @@ test('date picker renders correctly', () => {
     expect(label.tagName).toEqual('LABEL');
     expect(textInput).toHaveClass('ds_input', 'ds_input--fixed-10');
     expect(textInput.id).toEqual(DATE_PICKER_ID);
-
-    // todo: check for DS script being fired
 });
 
 test('date picker with disabled dates', () => {
@@ -71,9 +69,6 @@ test('date picker with custom icon path', () => {
             iconPath={ICON_PATH}
         />
     );
-    const datePicker = screen.getAllByRole('generic')[1];
-    const label = within(datePicker).getByText(LABEL_TEXT);
-    const textInput = within(datePicker).getByRole('textbox');
 
     // todo
 });

package/src/components/DatePicker/DatePicker.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef } from 'react';
-// @ts-ignore
+// @ts-expect-error no types from core SGDS
 import DSDatePicker from '@scottish-government/design-system/src/components/date-picker/date-picker';
 import ErrorMessage from '../ErrorMessage';
 import TextInput from '../TextInput';
+import { DatePickerProps } from './types';
 
 const DatePicker = ({
     className,
@@ -23,7 +24,7 @@ const DatePicker = ({
     value,
     width = 'fixed-10',
     ...props
-}: SGDS.Component.DatePicker) => {
+}: DatePickerProps) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/DatePicker/types.ts

@@ -0,0 +1,20 @@
+import { InputWidth } from "../../shared-types";
+
+export interface DatePickerProps extends React.AllHTMLAttributes<HTMLElement> {
+    dateSelectCallback?: (date: Date) => void;
+    disabledDates?: string;
+    hasError?: boolean;
+    errorMessage?: string;
+    id: string;
+    hintText?: string;
+    iconPath?: string;
+    label: string;
+    maxDate?: string;
+    minDate?: string;
+    isMultiple?: boolean;
+    name?: string;
+    onBlur?: React.EventHandler<React.FocusEvent>;
+    onChange?: React.EventHandler<React.FormEvent>;
+    value?: string;
+    width?: InputWidth;
+}

package/src/components/Details/Details.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
     argTypes: {
         children: argTypes.children(),
         summary: {
-            description: 'Text to use for the details component\'s ‘summary’ element',
+            description: 'Text to use for the details component\'s \'summary\' element',
             type: {
                 name: 'string',
                 required: true

package/src/components/Details/Details.tsx

@@ -1,9 +1,11 @@
+import { DetailsProps } from "./types";
+
 const Details = ({
     children,
     className,
     summary,
     ...props
-}: SGDS.Component.Details) => {
+}: DetailsProps) => {
     return (
         <details
             className={[

package/src/components/Details/types.ts

@@ -0,0 +1,4 @@
+export interface DetailsProps extends React.AllHTMLAttributes<HTMLDetailsElement> {
+    title?: string;
+    summary: string;
+}

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,9 +1,11 @@
+import { ErrorMessageProps } from "./types";
+
 const ErrorMessage = ({
     children,
     className,
     id,
     ...props
-}: SGDS.Component.ErrorMessage) => {
+}: ErrorMessageProps) => {
     return (
         <p
             className={[

package/src/components/ErrorMessage/types.ts

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