@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/src/common/ConditionalWrapper/ConditionalWrapper.tsx

@@ -1,8 +1,16 @@
 /**
  * Wraps all children in a specified HTML tag if a condition is met.
  */
-const ConditionalWrapper = ({ condition, wrapper, children }:SGDS.Common.ConditionalWrapper) =>
-    condition ? wrapper(children) : children;
+
+import { ConditionalWrapperProps } from "./types";
+
+const ConditionalWrapper = ({
+    condition,
+    wrapper,
+    children
+}: ConditionalWrapperProps) => {
+    return condition ? wrapper(children as React.JSX.Element) : children;
+};
 
 ConditionalWrapper.displayName = 'ConditionalWrapper';
 

package/src/common/ConditionalWrapper/types.ts

@@ -0,0 +1,4 @@
+export interface ConditionalWrapperProps extends React.AllHTMLAttributes<HTMLElement> {
+    condition: boolean;
+    wrapper: (children: React.JSX.Element) => React.JSX.Element;
+}

package/src/common/FileIcon/FileIcon.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import * as FileIcons from '../../images/documents';
+import { FileIconProps } from './types';
 
 const FileIcon = ({
     ariaLabel = '',
     className,
     icon
-}: SGDS.Common.FileIcon) => {
+}: FileIconProps) => {
     const FileIconComponent = FileIcons[icon];
 
     return (

package/src/common/FileIcon/types.ts

@@ -0,0 +1,7 @@
+import { DocumentIconName } from '../../shared-types';
+
+export interface FileIconProps extends React.AllHTMLAttributes<SVGSVGElement> {
+    ariaLabel?: React.AriaAttributes['aria-label'];
+    className?: string;
+    icon: DocumentIconName;
+}

package/src/common/HintText/HintText.test.tsx

@@ -9,8 +9,9 @@ test('hint test renders correctly', () => {
     render(
         <HintText data-testid="hint-text"
             id={HINT_TEXT_ID}
-            text={HINT_TEXT_CONTENT}
-        />
+        >
+            {HINT_TEXT_CONTENT}
+        </HintText>
     );
 
     const hintText = screen.getByTestId('hint-text');
@@ -20,19 +21,6 @@ test('hint test renders correctly', () => {
     expect(hintText.textContent).toEqual(HINT_TEXT_CONTENT);
 });
 
-test('hint test with children instead of text', () => {
-    render(
-        <HintText data-testid="hint-text"
-            id={HINT_TEXT_ID}
-        >
-            <span>{HINT_TEXT_CONTENT}</span>
-        </HintText>
-    );
-
-    const hintText = screen.getByTestId('hint-text');
-    expect(hintText.innerHTML).toEqual(`<span>${HINT_TEXT_CONTENT}</span>`);
-});
-
 test('passing additional props', () => {
     render(
         <HintText data-testid="hint-text"

package/src/common/HintText/HintText.tsx

@@ -1,17 +1,17 @@
+import { HintTextProps } from "./types";
+
 const HintText = ({
     children,
     id,
-    text,
     ...props
-}: SGDS.Common.HintText) => {
+}: HintTextProps) => {
     return (
         <p
             className="ds_hint-text"
-            dangerouslySetInnerHTML={text ? { __html: text } : undefined}
             id={id}
             {...props}
         >
-            {!text ? children : null}
+            {children}
         </p>
     );
 };

package/src/common/HintText/types.ts

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

package/src/common/Icon/Icon.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import * as Icons from '../../images/icons';
+import { IconProps } from './types';
+import clsx from 'clsx';
 
 const Icon = ({
     ariaLabel,
@@ -7,19 +9,19 @@ const Icon = ({
     isFilled,
     icon,
     iconSize
-}: SGDS.Common.Icon) => {
+}: IconProps) => {
     const IconComponent = Icons[icon];
 
     return (
         <IconComponent
             aria-hidden={ariaLabel ? undefined : true}
             aria-label={ariaLabel}
-            className={[
+            className={clsx([
                     'ds_icon',
                     className,
                     isFilled && 'ds_icon--fill',
                     iconSize && `ds_icon--${iconSize}`
-            ].join(' ')}
+            ])}
         />
     );
 };

package/src/common/Icon/types.ts

@@ -0,0 +1,9 @@
+import { IconName } from '../../shared-types';
+
+export interface IconProps extends React.AllHTMLAttributes<SVGSVGElement> {
+    ariaLabel?: React.AriaAttributes['aria-label'];
+    className?: string;
+    isFilled?: boolean;
+    icon: IconName;
+    iconSize?: string;
+}

package/src/common/ScreenReaderText/ScreenReaderText.tsx

@@ -1,7 +1,7 @@
 const ScreenReaderText = ({
     children,
     ...props
-}: SGDS.Common.ScreenReaderText) => {
+}: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <span
             className="visually-hidden"

package/src/common/WrapperTag/WrapperTag.tsx

@@ -1,13 +1,15 @@
 /**
  * Wraps all children in a specified HTML tag.
  */
+import React from 'react';
+import { WrapperTagProps } from './types';
+
 const WrapperTag = ({
     children,
     tagName = 'div',
     ...props
-}: SGDS.Common.WrapperTag) => {
-    const TagName = tagName;
-    return <TagName {...props}>{children}</TagName>;
+}: WrapperTagProps) => {
+    return React.createElement(tagName, props, children);
 };
 
 WrapperTag.displayName = 'WrapperTag';

package/src/common/WrapperTag/types.ts

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

package/src/components/Accordion/Accordion.Item.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import argTypes from '../../../.storybook/sgdsArgTypes';
 
 import Accordion from './Accordion';
 
@@ -15,9 +14,6 @@ const meta = {
                 required: true
             }
         },
-        headingLevel: argTypes.headingLevel({
-            description: 'Heading level for the component\'s heading. It is best to set this on the parent Accordion.'
-        }),
         id: {
             description: 'ID to use for the accordion item if you want to override the automatically generated default',
             type: 'string'
@@ -37,7 +33,7 @@ const meta = {
                 Veterans are entitled to the same healthcare as any citizen. And there are health care options and support available specifically for veterans.
             </p>
             <p>
-                If you have a health condition that's related to your service, you're entitled to priority treatment based on clinical need.
+                If you have a health condition that&apos;s related to your service, you&apos;re entitled to priority treatment based on clinical need.
             </p>
         </>
     }

package/src/components/Accordion/Accordion.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
         }),
         hideOpenAll: {
             control: 'boolean',
-            description: 'Do not show the ‘open all’ button',
+            description: 'Do not show the \'open all\' button',
             type: 'boolean'
         },
         children: {
@@ -26,17 +26,17 @@ const meta = {
                     Veterans are entitled to the same healthcare as any citizen. And there are health care options and support available specifically for veterans.
                 </p>
                 <p>
-                    If you have a health condition that's related to your service, you're entitled to priority treatment based on clinical need.
+                    If you have a health condition that&apos;s related to your service, you&apos;re entitled to priority treatment based on clinical need.
                 </p>
             </Accordion.Item>
             <Accordion.Item id='accordion-2' heading='Employability for veterans'>
                 <p>
-                    If you're looking for a job, there are several organisations that can help you <a href="#accordion-link">find a job or develop new skills</a>.
+                    If you&apos;re looking for a job, there are several organisations that can help you <a href="#accordion-link">find a job or develop new skills</a>.
                 </p>
             </Accordion.Item>
             <Accordion.Item id='accordion-3' heading='Housing for veterans'>
                 <p>
-                    If you need <a href="#accordion-link"> help finding a place to live</a> there's support specifically for veterans.
+                    If you need <a href="#accordion-link"> help finding a place to live</a> there&apos;s support specifically for veterans.
                 </p>
             </Accordion.Item>
         </>
@@ -53,7 +53,7 @@ export const Default: Story = {
 export const HideOpenAll: Story = {
     args: {
         hideOpenAll: true
-    },
+    }
 }
 
 export const InvalidNoChildren: Story = {

package/src/components/Accordion/Accordion.test.tsx

@@ -99,6 +99,17 @@ test('accordion with custom heading level', () => {
     expect(firstAccordionTitle?.tagName).toEqual(HEADING_LEVEL.toUpperCase());
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} data-test="foo">
+        </Accordion>
+    )
+
+    const accordion = screen.getByTestId(ACCORDION_ID);
+    expect(accordion).toHaveClass('js-initialised');
+    expect(accordion).toHaveClass('js-instantiated');
+});
+
 test('passing additional props to accordion', () => {
     render(
         <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} data-test="foo">

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
 import DSAccordion from '@scottish-government/design-system/src/components/accordion/accordion';
+import { AccordionItemProps, AccordionProps } from './types';
+import clsx from 'clsx';
 
 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(
@@ -30,19 +31,19 @@ const AccordionItem = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_accordion-item',
                 className
-            ].join(' ')}
+            ])}
             id={processedId}
             {...props}
         >
             <input
                 aria-labelledby={`panel-${processedId}-heading`}
-                className={[
+                className={clsx([
                     'ds_accordion-item__control',
                     'visually-hidden'
-                ].join(' ')}
+                ])}
                 defaultChecked={isOpen}
                 id={`${processedId}-control`}
                 type="checkbox"
@@ -77,10 +78,11 @@ const Accordion = ({
     hideOpenAll,
     isSmall,
     ...props
-}: SGDS.Component.Accordion) => {
+}: AccordionProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSAccordion(ref.current).init();
         }
@@ -92,21 +94,21 @@ const Accordion = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_accordion',
-                isSmall ? 'ds_accordion--small' : '',
+                isSmall && 'ds_accordion--small',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >
             { !hideOpenAll && (
                 <button
-                className={[
+                className={clsx([
                     'ds_accordion__open-all',
                     'ds_link',
                     'js-open-all'
-                ].join(' ')}
+                ])}
                 type='button'
                 >
                     Open all

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,22 +1,16 @@
-import React, { Children, useEffect, useRef } from 'react';
-// @ts-ignore
-import DSAspectBox from '@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback';
+import React, { Children, useRef } from 'react';
+import { AspectBoxProps } from './types';
+import clsx from 'clsx';
 
 const AspectBox = ({
     children,
     className,
     ratio,
     ...props
-}: SGDS.Component.AspectBox) => {
+}: AspectBoxProps) => {
     const ref = useRef(null);
 
-    useEffect(() => {
-        if (ref.current) {
-            new DSAspectBox(ref.current).init();
-        }
-    }, [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' });
         }
@@ -41,15 +35,15 @@ const AspectBox = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_aspect-box',
                 ratioClassName,
                 className
-            ].join(' ')}
+            ])}
             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.test.tsx

@@ -1,7 +1,16 @@
-import { test, expect } from 'vitest';
+import { test, expect, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import BackToTop from './BackToTop';
 
+// Mock the ResizeObserver
+class ResizeObserverMock {
+    constructor() {}
+    observe() { return vi.fn() }
+    unobserve() { return vi.fn() }
+    disconnect() { return vi.fn() }
+};
+vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+
 test('back to top renders correctly', () => {
     render(
         <BackToTop data-test="foo" />
@@ -34,6 +43,17 @@ test('renders with custom href', () => {
     expect(button).toHaveAttribute('href', '#foo');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <BackToTop />
+    );
+
+    const button = screen.getByRole('link');
+    const container = button.parentElement;
+    expect(container).toHaveClass('js-initialised');
+    expect(container).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <BackToTop data-test="foo" />

package/src/components/BackToTop/BackToTop.tsx

@@ -1,16 +1,18 @@
 import { useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
-// @ts-ignore
 import DSBackToTop from '@scottish-government/design-system/src/components/back-to-top/back-to-top';
+import { BackToTopProps } from './types';
+import clsx from 'clsx';
 
 const BackToTop = ({
     className,
     href = '#page-top',
     ...props
-}: SGDS.Component.BackToTop) => {
+}: BackToTopProps) => {
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSBackToTop(ref.current).init();
         }
@@ -18,10 +20,10 @@ const BackToTop = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_back-to-top',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >

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,13 @@
+import { BreadcrumbItemProps } from "./types";
+import clsx from 'clsx';
+
 const BreadcrumbItem = ({
     children,
     isHidden,
     href,
     linkComponent,
     ...props
-}: SGDS.Component.Breadcrumbs.Item) => {
+}: BreadcrumbItemProps) => {
     const BREADCRUMB_LINK_CLASSNAME = 'ds_breadcrumbs__link';
 
     function processChildren(children: React.ReactNode) {
@@ -18,10 +21,10 @@ const BreadcrumbItem = ({
     }
 
     return (
-        <li className={[
+        <li className={clsx([
             'ds_breadcrumbs__item',
             isHidden && 'visually-hidden'
-        ].join(' ')}
+        ])}
             {...props}
         >
             {processChildren(children)}
@@ -32,7 +35,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,8 @@
 import Icon from '../../common/Icon';
 import ScreenReaderText from '../../common/ScreenReaderText';
 import WrapperTag from '../../common/WrapperTag';
+import { ButtonProps } from './types';
+import clsx from 'clsx';
 
 const Button = ({
     buttonStyle,
@@ -15,7 +17,7 @@ const Button = ({
     type = 'button',
     width,
     ...props
-}: SGDS.Component.Button) => {
+}: ButtonProps) => {
     // determine which HTML tag to use
     let tagName = 'button';
     if (href) {
@@ -25,15 +27,15 @@ const Button = ({
     return (
         <WrapperTag
             tagName={tagName}
-            className={[
+            className={clsx([
                 !hasLinkStyle ? 'ds_button' : 'ds_link',
                 width && `ds_button--${width}`,
                 buttonStyle && `ds_button--${buttonStyle}`,
                 isSmall && 'ds_button--small',
-                (icon && !isIconOnly) ? 'ds_button--has-icon' : undefined,
+                (icon && !isIconOnly) && 'ds_button--has-icon',
                 isIconLeft && 'ds_button--has-icon--left',
                 className
-            ].join(' ')}
+            ])}
             href={href}
             {...(tagName === 'button' ? { type: type } : {})}
             {...props}

package/src/components/Button/ButtonGroup.stories.tsx

@@ -17,6 +17,15 @@ const meta = {
                     summary: 'boolean'
                 }
             }
+        },
+        isWrap: {
+            description: 'Force wrap buttons on small screens',
+            control: 'boolean',
+            table: {
+                type: {
+                    summary: 'boolean'
+                }
+            }
         }
     },
     args: {
@@ -39,3 +48,16 @@ export const Inline: Story = {
         isInline: true
     }
 };
+
+export const Wrap: Story = {
+    args: {
+        isWrap: true
+    }
+};
+
+export const InlineWrap: Story = {
+    args: {
+        isInline: true,
+        isWrap: true
+    }
+};

package/src/components/Button/ButtonGroup.test.tsx

@@ -24,6 +24,27 @@ test('inline button group', () => {
     expect(buttonGroup).toHaveClass('ds_button-group--inline');
 });
 
+test('wrap button group', () => {
+    render(
+        <ButtonGroup isWrap data-testid="button-group">
+
+        </ButtonGroup>
+    );
+    const buttonGroup = screen.getByTestId('button-group');
+    expect(buttonGroup).toHaveClass('ds_button-group--wrap');
+});
+
+test('inline-wrap button group', () => {
+    render(
+        <ButtonGroup isInline isWrap data-testid="button-group">
+
+        </ButtonGroup>
+    );
+    const buttonGroup = screen.getByTestId('button-group');
+    expect(buttonGroup).toHaveClass('ds_button-group--inline');
+    expect(buttonGroup).toHaveClass('ds_button-group--wrap');
+});
+
 test('passing additional props', () => {
     render(
         <ButtonGroup data-test="foo" data-testid="button-group">