@scottish-government/designsystem-react 0.13.0 → 1.0.0

package/src/components/AspectBox/AspectBox.tsx

@@ -1,7 +1,6 @@
-import React, { Children, useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
-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,
@@ -11,12 +10,6 @@ const AspectBox = ({
 }: AspectBoxProps) => {
     const ref = useRef(null);
 
-    useEffect(() => {
-        if (ref.current) {
-            new DSAspectBox(ref.current).init();
-        }
-    }, [ref]);
-
     function processChild(child: React.JSX.Element) {
         if (['img', 'svg', 'picture'].includes(child.type)) {
             return React.cloneElement(child, { className: 'ds_aspect-box__inner' });
@@ -42,11 +35,11 @@ const AspectBox = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_aspect-box',
                 ratioClassName,
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >

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,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 import Icon from '../../common/Icon';
-// @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';
+import clsx from 'clsx';
 
 const BackToTop = ({
     className,
@@ -12,6 +12,7 @@ const BackToTop = ({
     const ref = useRef(null);
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSBackToTop(ref.current).init();
         }
@@ -19,10 +20,10 @@ const BackToTop = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_back-to-top',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,4 +1,5 @@
 import { BreadcrumbItemProps } from "./types";
+import clsx from 'clsx';
 
 const BreadcrumbItem = ({
     children,
@@ -20,10 +21,10 @@ const BreadcrumbItem = ({
     }
 
     return (
-        <li className={[
+        <li className={clsx([
             'ds_breadcrumbs__item',
             isHidden && 'visually-hidden'
-        ].join(' ')}
+        ])}
             {...props}
         >
             {processChildren(children)}

package/src/components/Button/Button.tsx

@@ -2,6 +2,7 @@ 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,
@@ -26,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">

package/src/components/Button/ButtonGroup.tsx

@@ -1,17 +1,20 @@
 import { ButtonGroupProps } from "./types";
+import clsx from 'clsx';
 
 const ButtonGroup = ({
     children,
     className,
     isInline,
+    isWrap,
     ...props
 }: ButtonGroupProps) => {
     return (
-        <div className={[
+        <div className={clsx([
             "ds_button-group",
-            isInline ? "ds_button-group--inline" : undefined,
+            isInline && "ds_button-group--inline",
+            isWrap && "ds_button-group--wrap",
             className
-        ].join(' ')} { ...props } >
+        ])} { ...props } >
             {children}
         </div>
     );

package/src/components/Button/types.ts

@@ -18,4 +18,5 @@ export interface ButtonProps extends React.AllHTMLAttributes<HTMLButtonElement>
 
 export interface ButtonGroupProps extends React.AllHTMLAttributes<HTMLElement> {
     isInline?: boolean;
+    isWrap?: boolean;
 }