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

package/src/components/Tag/Tag.test.tsx

@@ -6,7 +6,7 @@ const TAG_TEXT = 'Beta';
 
 test('tag renders correctly', () => {
     render(
-        <Tag title={TAG_TEXT}/>
+        <Tag>{TAG_TEXT}</Tag>
     );
 
     const tag = screen.getByText(TAG_TEXT);
@@ -17,7 +17,7 @@ test('tag renders correctly', () => {
 
 test('tag with custom colour', () => {
     render(
-        <Tag colour="red" title={TAG_TEXT}/>
+        <Tag colour="red">{TAG_TEXT}</Tag>
     );
 
     const tag = screen.getByText(TAG_TEXT);
@@ -27,7 +27,7 @@ test('tag with custom colour', () => {
 
 test('passing additional props', () => {
     render(
-        <Tag data-test="foo" title={TAG_TEXT}/>
+        <Tag data-test="foo">{TAG_TEXT}</Tag>
     );
 
     const tag = screen.getByText(TAG_TEXT);
@@ -36,7 +36,7 @@ test('passing additional props', () => {
 
 test('tag with additional CSS class', () => {
     render(
-        <Tag className="foo" title={TAG_TEXT}/>
+        <Tag className="foo">{TAG_TEXT}</Tag>
     );
 
     const tag = screen.getByText(TAG_TEXT);

package/src/components/Tag/Tag.tsx

@@ -1,9 +1,9 @@
-const Tag: React.FC<SGDS.Component.Tag> = ({
+const Tag = ({
+    children,
     className,
     colour,
-    title,
     ...props
-}) => {
+}: SGDS.Component.Tag) => {
     return (
         <span
             className={[
@@ -13,7 +13,7 @@ const Tag: React.FC<SGDS.Component.Tag> = ({
             ].join(' ')}
             {...props}
         >
-            {title}
+            {children}
         </span>
     );
 };

package/src/components/TaskList/TaskList.test.tsx

@@ -192,6 +192,32 @@ test('task with link', () => {
     expect(link.textContent).toEqual(taskHeading.textContent);
 });
 
+test('task with custom link element', () => {
+    const TASK_HREF = '#foo';
+
+    render(
+        <TaskList.Item
+            id={TASK_ITEM.id}
+            statusText={TASK_ITEM.statusText}
+            title={TASK_ITEM.title}
+            href={TASK_HREF}
+            linkComponent={
+            ({ className, ...props }) => (
+                <strong role="link" className={className} {...props}/>
+            )}
+        >
+            {TASK_SUMMARY_CONTENT}
+        </TaskList.Item>
+    );
+
+    const task = screen.getByRole('listitem');
+    const taskHeading = within(task).getByRole('heading');
+    const link = within(task).getByRole('link');
+
+    expect(link?.tagName).toEqual('STRONG');
+    expect(link?.textContent).toEqual(taskHeading.textContent);
+});
+
 test('completed task has green tag', () => {
     render(
         <TaskList.Item

package/src/components/TaskList/TaskList.tsx

@@ -4,21 +4,32 @@ import HintText from '../../common/HintText';
 import ScreenReaderText from '../../common/ScreenReaderText';
 import Tag from '../Tag/Tag';
 
-const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
+const TaskItem = ({
     children,
     className,
     href,
     id,
     isComplete = false,
+    linkComponent,
     statusText,
     tagColour = 'grey',
     title,
     ...props
-}) => {
+}: SGDS.Component.TaskList.Item) => {
     if (isComplete) {
         tagColour = 'green';
     }
 
+    const LINK_CLASS = 'ds_task-list__task-link';
+
+    function getLinkElement(children: React.ReactNode) {
+        if (linkComponent) {
+            return linkComponent({ className: LINK_CLASS, href, children });
+        } else if (href) {
+            return <a href={href} className={LINK_CLASS}>{children}</a>;
+        }
+    }
+
     return (
         <li
             className={[
@@ -32,7 +43,7 @@ const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
                 <h3 className="ds_task-list__task-heading">
                 <ConditionalWrapper
                     condition={typeof href !== 'undefined'}
-                    wrapper={(children: React.JSX.Element) => <a className="ds_task-list__task-link" href={href}>{children}</a>}
+                    wrapper={(children: React.JSX.Element) => getLinkElement(children)}
                 >
                     {title}
                     {statusText && <ScreenReaderText>({statusText})</ScreenReaderText>}
@@ -45,8 +56,9 @@ const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
                 <Tag
                     aria-hidden="true"
                     colour={tagColour}
-                    title={statusText}
-                />
+                >
+                    {statusText}
+                </Tag>
             }
         </li>
     );
@@ -58,13 +70,13 @@ const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
  * @param {string} props.title - The title of the task group
  * @returns {JSX.Element} - The element
  */
-const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
+const TaskGroup = ({
     children,
     className,
     intro,
     title,
     ...props
-}) => {
+}: SGDS.Component.TaskList.Group) => {
     return (
         <li
             className={[
@@ -82,15 +94,13 @@ const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
     );
 };
 
-const TaskList: React.FC<SGDS.Component.TaskList>
-    & { Group: React.FC<SGDS.Component.TaskList.Group> }
-    & { Item: React.FC<SGDS.Component.TaskList.Item> } = ({
+const TaskList = ({
     children,
     className,
     headingId = 'task-list',
     title,
     ...props
-}) => {
+}: SGDS.Component.TaskList) => {
     let taskCount = 0;
     let incompleteTaskIds: string[] = [];
     let completedTasksCount = 0;

package/src/components/TextInput/TextInput.test.tsx

@@ -284,8 +284,8 @@ test('text input with error message', () => {
         <TextInput
             id={INPUT_ID}
             label={LABEL_TEXT}
-            error
             errorMessage={ERROR_MESSAGE_TEXT}
+            hasError
         />
     );
 

package/src/components/TextInput/TextInput.tsx

@@ -6,7 +6,7 @@ import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import HintText from '../../common/HintText';
 
-const TextInput: React.FC<SGDS.Component.TextInput> = ({
+const TextInput = ({
     buttonIcon,
     buttonText,
     children,
@@ -15,9 +15,9 @@ const TextInput: React.FC<SGDS.Component.TextInput> = ({
     width,
     currency,
     currencySymbol,
-    error,
     errorMessage,
     hasButton = false,
+    hasError,
     hintText,
     id,
     label,
@@ -29,7 +29,7 @@ const TextInput: React.FC<SGDS.Component.TextInput> = ({
     type = 'text',
     value,
     ...props
-}) => {
+}: SGDS.Component.TextInput) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -71,11 +71,11 @@ const TextInput: React.FC<SGDS.Component.TextInput> = ({
             >
                 <input
                     aria-describedby={describedbys.join(' ')}
-                    aria-invalid={error}
+                    aria-invalid={hasError}
                     className={[
                         'ds_input',
                         className,
-                        error ? 'ds_input--error' : '',
+                        hasError ? 'ds_input--error' : '',
                         width ? `ds_input--${width}` : '',
                     ].join(' ')}
                     defaultValue={value}

package/src/components/Textarea/Textarea.test.tsx

@@ -188,8 +188,8 @@ test('textarea with error message', () => {
         <Textarea
             id={TEXTAREA_ID}
             label={LABEL_TEXT}
-            error
             errorMessage={ERROR_MESSAGE_TEXT}
+            hasError
         />
     );
 

package/src/components/Textarea/Textarea.tsx

@@ -5,11 +5,11 @@ import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import HintText from '../../common/HintText';
 
-const Textarea: React.FC<SGDS.Component.Textarea> = ({
+const Textarea = ({
     className,
     countThreshold,
-    error,
     errorMessage,
+    hasError,
     hintText,
     id,
     label,
@@ -21,7 +21,7 @@ const Textarea: React.FC<SGDS.Component.Textarea> = ({
     rows = 4,
     value,
     ...props
-}) => {
+}: SGDS.Component.Textarea) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -59,10 +59,10 @@ const Textarea: React.FC<SGDS.Component.Textarea> = ({
 
             <textarea
                 aria-describedby={describedbys.join(' ')}
-                aria-invalid={error}
+                aria-invalid={hasError}
                 className={[
                     'ds_input',
-                    error && 'ds_input--error',
+                    hasError && 'ds_input--error',
                     className
                 ].join(' ')}
                 defaultValue={value}

package/src/components/WarningText/WarningText.tsx

@@ -1,8 +1,8 @@
-const WarningText: React.FC<SGDS.Component.WarningText> = ({
+const WarningText = ({
     children,
     className,
     ...props
-}) => {
+}: SGDS.Component.WarningText) => {
     return (
         <div
             className={[

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({ small: true, name: '' });

package/tsconfig.json

@@ -35,7 +35,7 @@
   },
   "include": [
     "@types",
-    "src/**/*.tsx",
+    "src/**/*",
     "vitest.setup.ts"
   ],
   "exclude": [

package/dist/common/abstract-notification-banner.jsx

@@ -1,63 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const icon_1 = __importDefault(require("./icon"));
-const screen_reader_text_1 = __importDefault(require("./screen-reader-text"));
-const Buttons = ({ children }) => {
-    return (<>{children}</>);
-};
-const AbstractNotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
-    let content = [];
-    let buttons;
-    react_1.Children.forEach(children, (child) => {
-        if ((0, react_1.isValidElement)(child) && child.type === Buttons) {
-            buttons = child;
-        }
-        else {
-            content.push(child);
-        }
-    });
-    return (<div className={[
-            'ds_notification',
-            className
-        ].join(' ')} data-module="ds-notification" {...props}>
-            <div className="ds_wrapper">
-                <div className={[
-            'ds_notification__content',
-            close && 'ds_notification__content--has-close'
-        ].join(' ')}>
-                    <h2 className="visually-hidden">{title}</h2>
-
-                    {icon &&
-            <span className={[
-                    'ds_notification__icon',
-                    iconInverse && 'ds_notification__icon--inverse',
-                    iconColour && 'ds_notification__icon--colour'
-                ].join(' ')} aria-hidden="true">
-                            <icon_1.default icon={icon}/>
-                        </span>}
-
-                    <div className="ds_notification__text">
-                        {content}
-                    </div>
-
-                    {close &&
-            <button type="button" className="ds_notification__close js-close-notification">
-                            <screen_reader_text_1.default>Close this notification</screen_reader_text_1.default>
-                            <icon_1.default fill icon="Close" aria-hidden="true"/>
-                        </button>}
-
-                    {buttons &&
-            <div className="ds_button-group">
-                            {buttons}
-                        </div>}
-                </div>
-            </div>
-        </div>);
-};
-AbstractNotificationBanner.displayName = 'AbstractNotificationBanner';
-AbstractNotificationBanner.Buttons = Buttons;
-exports.default = AbstractNotificationBanner;

package/dist/common/conditional-wrapper.jsx

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * Wraps all children in a specified HTML tag if a condition is met.
- */
-const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
-ConditionalWrapper.displayName = 'ConditionalWrapper';
-exports.default = ConditionalWrapper;

package/dist/common/file-icon.jsx

@@ -1,51 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const FileIcons = __importStar(require("../images/documents"));
-const FileIcon = ({ ariaLabel = '', className, icon }) => {
-    const Component = react_1.default.createElement(FileIcons[icon], {
-        className: className,
-        'aria-label': ariaLabel
-    });
-    return (<>
-            {Component}
-        </>);
-};
-FileIcon.displayName = 'FileIcon';
-exports.default = FileIcon;

package/dist/common/hint-text.jsx

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const HintText = ({ children, id, text, ...props }) => {
-    return (<p className="ds_hint-text" dangerouslySetInnerHTML={text ? { __html: text } : undefined} id={id} {...props}>
-            {!text ? children : null}
-        </p>);
-};
-HintText.displayName = 'HintText';
-exports.default = HintText;

package/dist/common/icon.jsx

@@ -1,57 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Icons = __importStar(require("../images/icons"));
-const Icon = ({ ariaLabel, className, fill, icon, iconSize }) => {
-    const Component = react_1.default.createElement(Icons[icon], {
-        'aria-hidden': ariaLabel ? undefined : true,
-        'aria-label': ariaLabel,
-        className: [
-            'ds_icon',
-            className,
-            fill && 'ds_icon--fill',
-            iconSize && `ds_icon--${iconSize}`
-        ].join(' ')
-    });
-    return (<>
-            {Component}
-        </>);
-};
-Icon.displayName = 'Icon';
-exports.default = Icon;

package/dist/common/screen-reader-text.jsx

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const ScreenReaderText = ({ children, ...props }) => {
-    return (<span className="visually-hidden" {...props}>
-            {children}
-        </span>);
-};
-ScreenReaderText.displayName = 'ScreenReaderText';
-exports.default = ScreenReaderText;

package/dist/common/wrapper-tag.jsx

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * Wraps all children in a specified HTML tag.
- */
-const WrapperTag = ({ children, tagName = 'div', ...props }) => {
-    const TagName = tagName;
-    return <TagName {...props}>{children}</TagName>;
-};
-WrapperTag.displayName = 'WrapperTag';
-exports.default = WrapperTag;