@scottish-government/designsystem-react 0.13.0 → 1.0.0

package/src/components/Tabs/Tabs.tsx

@@ -1,8 +1,8 @@
 import React, { Children, useEffect, useRef, useId } from 'react';
 import WrapperTag from '../../common/WrapperTag';
-// @ts-expect-error no types from core SGDS
 import DSTabs from '@scottish-government/design-system/src/components/tabs/tabs';
 import { TabListItemProps, TabsItemProps, TabsProps } from './types';
+import clsx from 'clsx';
 
 const TabItem = ({
     isBorderless,
@@ -14,11 +14,11 @@ const TabItem = ({
 }: TabsItemProps) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_tabs__content',
                 !isBorderless && 'ds_tabs__content--bordered',
                 className
-            ].join(' ')}
+            ])}
             data-label={tabLabel}
             id={id}
             {...props}
@@ -54,6 +54,7 @@ const Tabs = ({
     const headingId = `${baseId}-heading`;
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSTabs(ref.current).init();
         }
@@ -78,11 +79,11 @@ const Tabs = ({
 
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_tabs',
                 isManual && 'ds_tabs--manual',
                 className
-            ].join(' ')}
+            ])}
             ref={ref}
             {...props}
         >

package/src/components/Tag/Tag.tsx

@@ -1,4 +1,5 @@
 import { TagProps } from "./types";
+import clsx from 'clsx';
 
 const Tag = ({
     children,
@@ -8,11 +9,11 @@ const Tag = ({
 }: TagProps) => {
     return (
         <span
-            className={[
+            className={clsx([
                 'ds_tag',
                 className,
-                colour && `ds_tag--${colour}`,
-            ].join(' ')}
+                colour && `ds_tag--${colour}`
+            ])}
             {...props}
         >
             {children}

package/src/components/TaskList/TaskList.tsx

@@ -4,6 +4,7 @@ import HintText from '../../common/HintText';
 import ScreenReaderText from '../../common/ScreenReaderText';
 import Tag from '../Tag';
 import { TaskListGroupProps, TaskListItemProps, TaskListProps } from './types';
+import clsx from 'clsx';
 
 const TaskItem = ({
     children,
@@ -36,10 +37,10 @@ const TaskItem = ({
 
     return (
         <li
-            className={[
+            className={clsx([
                 'ds_task-list__task',
                 className
-            ].join(' ')}
+            ])}
             id={id}
             {...props}
         >
@@ -83,10 +84,10 @@ const TaskGroup = ({
 }: TaskListGroupProps) => {
     return (
         <li
-            className={[
+            className={clsx([
                 'ds_task-list-group__section',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <h2 className="ds_task-list-heading">{title}</h2>

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

@@ -58,7 +58,6 @@ test('text input with character count', () => {
     const textInput = screen.getByRole('textbox');
     const textInputWrapper = textInput.parentElement;
 
-    expect(textInputWrapper).toHaveAttribute('data-maxlength', MAX_LENGTH.toString());
     expect(textInputWrapper).toHaveAttribute('data-module', 'ds-character-count');
 });
 
@@ -232,6 +231,44 @@ test('text input with change function', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('text input with onBlur that is not a function', () => {
+    render(
+        <TextInput
+        id={INPUT_ID}
+        label={LABEL_TEXT}
+            // @ts-expect-error onBlur is not a function
+            onBlur='foo'
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    fireEvent.blur(textInput);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('text input with onChange that is not a function', () => {
+    render(
+        <TextInput
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            // @ts-expect-error onChange is not a function
+            onChange='foo'
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    fireEvent.change(textInput, {target: {value: 'foo'}});
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('text input with placeholder text', () => {
     const PLACEHOLDER_TEXT = 'foo';
 
@@ -299,6 +336,21 @@ test('text input with error message', () => {
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <TextInput
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            maxlength={200}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const textInputContainer = textInput.parentElement;
+    expect(textInputContainer).toHaveClass('js-initialised');
+    expect(textInputContainer).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <TextInput

package/src/components/TextInput/TextInput.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
-import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
+import DSCharacterCount from '@scottish-government/design-system/src/components/character-count/character-count';
 import Button from '../Button';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 import { TextInputProps } from './types';
+import clsx from 'clsx';
 
 const TextInput = ({
     buttonIcon,
@@ -33,13 +33,18 @@ const TextInput = ({
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
-    const inputWrapperClasses = `${hasButton ? 'ds_input__wrapper  ds_input__wrapper--has-icon' : ''} ${isCurrency ? 'ds_currency-wrapper' : ''}`;
+    const inputWrapperClasses = clsx(
+        hasButton && 'ds_input__wrapper',
+        hasButton && 'ds_input__wrapper--has-icon',
+        isCurrency && 'ds_currency-wrapper'
+    );
     const describedbys: string[] = [];
 
     if (hintText) { describedbys.push(hintTextId) };
     if (errorMessage) { describedbys.push(errorMessageId) };
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSCharacterCount(ref.current).init();
         }
@@ -72,12 +77,12 @@ const TextInput = ({
                 <input
                     aria-describedby={describedbys.join(' ')}
                     aria-invalid={hasError}
-                    className={[
+                    className={clsx([
                         'ds_input',
                         className,
-                        hasError ? 'ds_input--error' : '',
-                        width ? `ds_input--${width}` : '',
-                    ].join(' ')}
+                        hasError && 'ds_input--error',
+                        width && `ds_input--${width}`,
+                    ])}
                     defaultValue={value}
                     id={id}
                     maxLength={maxlength}

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

@@ -43,7 +43,6 @@ test('textarea with character count', () => {
     const textarea = screen.getByRole('textbox');
     const textareaWrapper = textarea.parentElement;
 
-    expect(textareaWrapper).toHaveAttribute('data-maxlength', MAX_LENGTH.toString());
     expect(textareaWrapper).toHaveAttribute('data-module', 'ds-character-count');
 });
 
@@ -135,6 +134,44 @@ test('textarea with change function', () => {
     expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
+test('textarea with onBlur that is not a function', () => {
+    render(
+        <Textarea
+        id={TEXTAREA_ID}
+        label={LABEL_TEXT}
+            // @ts-expect-error onBlur is not a function
+            onBlur='foo'
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+
+    fireEvent.blur(textarea);
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
+test('textarea with onChange that is not a function', () => {
+    render(
+        <Textarea
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            // @ts-expect-error onChange is not a function
+            onChange='foo'
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+
+    fireEvent.change(textarea, {target: {value: 'foo'}});
+
+    // todo: assertion
+    // success indicated by no errors thrown
+    // error would be thrown on an untestable thread
+});
+
 test('textarea with placeholder text', () => {
     const PLACEHOLDER_TEXT = 'foo';
 
@@ -203,6 +240,21 @@ test('textarea with error message', () => {
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
 });
 
+test('instantiating/initialising DS component script', () => {
+    render(
+        <Textarea
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            maxlength={200}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    const textareaContainer = textarea.parentElement;
+    expect(textareaContainer).toHaveClass('js-initialised');
+    expect(textareaContainer).toHaveClass('js-instantiated');
+});
+
 test('passing additional props', () => {
     render(
         <Textarea

package/src/components/Textarea/Textarea.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef } from 'react';
-// @ts-expect-error no types from core SGDS
-import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
+import DSCharacterCount from '@scottish-government/design-system/src/components/character-count/character-count';
 import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage';
 import HintText from '../../common/HintText';
 import { TextInputBase } from '../../shared-types';
+import clsx from 'clsx';
 
 const Textarea = ({
     className,
@@ -32,6 +32,7 @@ const Textarea = ({
     if (errorMessage) { describedbys.push(errorMessageId) };
 
     useEffect(() => {
+        /* istanbul ignore else */
         if (ref.current) {
             new DSCharacterCount(ref.current).init();
         }
@@ -61,11 +62,11 @@ const Textarea = ({
             <textarea
                 aria-describedby={describedbys.join(' ')}
                 aria-invalid={hasError}
-                className={[
+                className={clsx([
                     'ds_input',
                     hasError && 'ds_input--error',
                     className
-                ].join(' ')}
+                ])}
                 defaultValue={value}
                 id={id}
                 maxLength={maxlength}

package/src/components/WarningText/WarningText.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 const WarningText = ({
     children,
     className,
@@ -5,10 +7,10 @@ const WarningText = ({
 }: React.AllHTMLAttributes<HTMLElement>) => {
     return (
         <div
-            className={[
+            className={clsx([
                 'ds_warning-text',
                 className
-            ].join(' ')}
+            ])}
             {...props}
         >
             <strong className="ds_warning-text__icon" aria-hidden="true"></strong>

package/src/hooks/useTracking/useTracking.ts

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 
-// @ts-expect-error no types from core SGDS
 import DSTracking from '@scottish-government/design-system/src/base/tools/tracking/tracking';
 
 export default function () {

package/src/shared-types.ts

@@ -18,7 +18,7 @@ export type LinkComponentProps = {
 export type LinkComponent = (linkComponent: LinkComponentProps) => React.ReactNode;
 
 export interface CheckboxRadioBase<T> extends React.InputHTMLAttributes<T> {
-    hintText?: string;
+    hintText?: string | React.ReactNode;
     label: string;
     onBlur?: React.FocusEventHandler<T>;
     onChange?: React.ChangeEventHandler<T>;
@@ -26,9 +26,9 @@ export interface CheckboxRadioBase<T> extends React.InputHTMLAttributes<T> {
 }
 
 export interface FormFieldBase<T> extends React.AllHTMLAttributes <T> {
-    errorMessage?: string;
+    errorMessage?: string | React.ReactNode;
     hasError?: boolean;
-    hintText?: string;
+    hintText?: string | React.ReactNode;
     label: string;
     onBlur?: React.FocusEventHandler<T>;
     onChange?: React.ChangeEventHandler<T>;