@scottish-government/designsystem-react 0.8.0 → 0.10.0-beta.0

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import Textarea from './Textarea';
+
+const meta = {
+    title: 'Components/Textarea',
+    component: Textarea,
+    argTypes: {
+        countThreshold: argTypes.countThreshold(),
+        errorMessage: argTypes.errorMessage(),
+        hasError: argTypes.hasError(),
+        hintText: argTypes.hintText(),
+        id: argTypes.id(),
+        label: argTypes.label(),
+        maxlength: argTypes.maxlength(),
+        name: { type: 'string' },
+        onBlur: argTypes.onBlur(),
+        onChange: argTypes.onChange(),
+        placeholder: {type: 'string'},
+        rows: {
+            type: 'number'
+        },
+        value: {type: 'string'}
+    },
+    args: {
+        id: 'description',
+        label: 'Description'
+    }
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+
+};
+
+export const KitchenSink: Story = {
+    args: {
+        defaultValue: 'Nothing seems to do anything when I click on it. I am using Megabrowser 3.8 on an OmniComputer 5000 and I\'ve disabled all of my plugins.\n\nThis problem didn\'t start happening until two weeks ago but now I can\'t use this tool at all.',
+        countThreshold: 50,
+        errorMessage: 'This field is required',
+        hasError: true,
+        hintText: 'Please describe the problem you are having',
+        id: 'kitchensink',
+        maxlength: 200,
+        rows: 6
+    }
+};
+
+export const Blur: Story = {
+    args: {
+        onBlur: () => {console.log('textarea blur')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('textbox'));
+        await userEvent.tab();
+    }
+}
+
+export const Change: Story = {
+    args: {
+        onChange: () => {console.log('textarea change')}
+    },
+    play: async ({ canvas, userEvent }) => {
+        await userEvent.click(canvas.getByRole('textbox'));
+        await userEvent.type(canvas.getByRole('textbox'),'banana');
+        await userEvent.tab();
+    }
+}

package/src/components/Textarea/Textarea.tsx

@@ -55,7 +55,7 @@ const Textarea = ({
         >
             <label className="ds_label" htmlFor={id}>{label}</label>
             {hintText && <HintText id={hintTextId} text={hintText} />}
-            {errorMessage && <ErrorMessage id={errorMessageId} text={errorMessage}/>}
+            {errorMessage && <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>}
 
             <textarea
                 aria-describedby={describedbys.join(' ')}

package/src/components/WarningText/WarningText.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import argTypes from '../../../.storybook/sgdsArgTypes';
+
+import WarningText from './WarningText';
+
+const meta = {
+    title: 'Components/Warning text',
+    component: WarningText,
+    argTypes: {
+        children: argTypes.children()
+    }
+} satisfies Meta<typeof WarningText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: <p>Call 999 if you or someone else is in immediate danger, or if the crime is in progress.</p>
+    }
+};

package/src/hooks/useTracking.test.tsx

@@ -0,0 +1,64 @@
+
+import { useState } from 'react';
+
+import { test, expect } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import useTracking from './useTracking';
+
+const Link = ({ children }) => <a href="#">{children}</a>;
+
+const Links = () => {
+    useTracking();
+    const [links, setLinks] = useState<string[]>([]);
+
+    const addNewLink = () => {
+        setLinks((prev) => [...prev, 'Second link']);
+    };
+
+    return (
+        <>
+            {links.map((link, index) => (
+                <Link key={`link-${index}`}>{link}</Link>
+            ))}
+
+            <button onClick={addNewLink}>
+                Add
+            </button>
+        </>
+    );
+};
+
+// basic test to verify the tracking script is having an effect
+test('text tracking on component render', async () => {
+    const SECTION_ONE_TEXT = 'Foo';
+    const SECTION_TWO_TEXT = 'Bar';
+
+    render(
+        <>
+            <h1>{SECTION_ONE_TEXT}</h1>
+            <Link>First link</Link>
+            <h1>{SECTION_TWO_TEXT}</h1>
+            <Links />
+        </>
+    );
+
+    const button = screen.getByRole('button');
+    const firstLink = screen.getByText('First link');
+
+    // todo: this will fail until the tracking script in DS core is updated to use textContent instead of innerText
+    // expect(firstLink).toHaveAttribute('data-section', SECTION_ONE_TEXT);
+
+    fireEvent(
+        button,
+        new MouseEvent('click', new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+        })
+    ));
+
+    const secondLink = await screen.findByText('Second link')
+
+    // todo: this will fail until the tracking script in DS core is updated to use textContent instead of innerText
+    // expect(secondLink).toHaveAttribute('data-section', SECTION_TWO_TEXT);
+});

package/src/hooks/useTracking.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+//@ts-ignore
+import DSTracking from '@scottish-government/design-system/src/base/tools/tracking/tracking';
+
+export default function () {
+    useEffect(() => {
+        const observer = new MutationObserver(() => {
+            DSTracking.init();
+        });
+        DSTracking.init();
+
+        observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+
+        return () => {
+            observer.disconnect();
+        }
+    }, []);
+}

package/src/utils/context.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const CheckboxRadioContext = createContext({ isSmall: false, name: '' });