@scottish-government/designsystem-react 0.0.0

package/src/components/text-input/text-input.test.tsx

@@ -0,0 +1,307 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import TextInput from './text-input';
+
+const id = 'text-input';
+const labelText = 'First name';
+
+test('text input renders correctly', () => {
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const label = screen.getByText(labelText);
+
+    expect(textInput).toHaveClass('ds_input');
+    expect(textInput).toHaveAttribute('id', id);
+    expect(textInput).toHaveAttribute('name', id);
+    expect(textInput).toHaveAttribute('type', 'text');
+    expect(textInput.tagName).toEqual('INPUT');
+
+    expect(label).toHaveClass('ds_label');
+    expect(label).toHaveAttribute('for', id);
+    expect(label.tagName).toEqual('LABEL');
+    expect(label.textContent).toEqual(labelText);
+
+    expect(textInput.previousSibling).toEqual(label);
+});
+
+test('text input with custom class(es)', () => {
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            className="foo bar"
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    expect(textInput).toHaveClass('ds_input', 'foo', 'bar');
+});
+
+test('text input with character count', () => {
+    const maxLength = 100;
+
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            maxlength={maxLength}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const textInputWrapper = textInput.parentNode;
+
+    expect(textInputWrapper).toHaveAttribute('data-maxlength', maxLength.toString());
+    expect(textInputWrapper).toHaveAttribute('data-module', 'ds-character-count');
+});
+
+test('text input with character count and threshold', () => {
+    const maxLength = 100;
+    const countThreshold = 80;
+
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            maxlength={maxLength}
+            countThreshold={countThreshold}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const textInputWrapper = textInput.parentNode;
+
+    expect(textInputWrapper).toHaveAttribute('data-threshold', countThreshold.toString());
+});
+
+test('text input with width', () => {
+    const width = 'fixed-10';
+
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            width={width}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    expect(textInput).toHaveClass(`ds_input--${width}`);
+});
+
+test('text input with currency', () => {
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            currency
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const textInputWrapper = textInput.parentNode;
+
+    expect(textInputWrapper.tagName).toEqual('DIV')
+    expect(textInputWrapper).toHaveClass('ds_currency-wrapper');
+    expect(textInputWrapper).not.toHaveAttribute('data-symbol');
+});
+
+test('text input with custom currency symbol', () => {
+    const symbol = '@';
+
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            currency
+            currencySymbol={symbol}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const textInputWrapper = textInput.parentNode;
+
+    expect(textInputWrapper).toHaveAttribute('data-symbol', symbol);
+});
+
+test('text input with button', () => {
+    const buttonText = 'Search';
+    const buttonIcon = 'search';
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            buttonIcon="search"
+            buttonText="Search"
+            hasButton
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const textInputWrapper = textInput.parentNode;
+    const button = screen.getByRole('button');
+    const buttonTextElement = within(button).getByText(buttonText);
+    const buttonIconElement = within(button).getByRole('img', { hidden: true });
+
+    expect(textInputWrapper).toHaveClass('ds_input__wrapper', 'ds_input__wrapper--has-icon ');
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('ds_button');
+    expect(button).toHaveAttribute('type', 'button');
+    expect(button.tagName).toEqual('BUTTON');
+    expect(buttonTextElement).toHaveClass('visually-hidden');
+    expect(buttonTextElement.tagName).toEqual('SPAN');
+
+    // todo: check for correct icon
+});
+
+test('text input with hint text', () => {
+    const hintText = 'hint text';
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            hintText={hintText}
+        />
+    );
+
+    const hintTextEl = screen.getByText(hintText);
+    const textInput = screen.getByRole('textbox');
+
+    expect(hintTextEl).toBeInTheDocument();
+    expect(textInput).toHaveAttribute('aria-describedby', hintTextEl.id);
+});
+
+test('text input with custom name', () => {
+    const name = 'foo';
+
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            name={name}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    expect(textInput).toHaveAttribute('name', name);
+});
+
+test('text input with blur function', () => {
+    const onBlurFn = vi.fn();
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            onBlur={onBlurFn}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    fireEvent.blur(textInput);
+
+    expect(onBlurFn).toHaveBeenCalled();
+});
+
+test('text input with change function', () => {
+    const onChangeFn = vi.fn();
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            onChange={onChangeFn}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+
+    fireEvent.change(textInput, {target: {value: 'foo'}});
+
+    expect(onChangeFn).toHaveBeenCalled();
+});
+
+test('text input with placeholder text', () => {
+    const placeholder = 'foo';
+
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            placeholder={placeholder}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    expect(textInput).toHaveAttribute('placeholder', placeholder);
+});
+
+test('text input with different type', () => {
+    const type = 'foo';
+
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            type={type}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    expect(textInput).toHaveAttribute('type', type);
+});
+
+test('text input with initial value', () => {
+    const initialValue = 'initial value';
+
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            value={initialValue}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    expect(textInput).toHaveAttribute('value', initialValue);
+});
+
+test('text input with error message', () => {
+    const errorMessage = 'This is a required field';
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            error
+            errorMessage={errorMessage}
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    const errorMessageElement = screen.getByText(errorMessage);
+
+    expect(textInput).toHaveClass('ds_input--error')
+    expect(textInput).toHaveAttribute('aria-describedby', errorMessageElement.id);
+    expect(errorMessageElement).toBeInTheDocument();
+    expect(errorMessageElement).toHaveClass('ds_question__error-message');
+});
+
+test('passing additional props', () => {
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            data-test="foo"
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    expect(textInput?.dataset.test).toEqual('foo');
+});

package/src/components/text-input/text-input.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
+import Button from '../button/button';
+import ConditionalWrapper from '../../common/conditional-wrapper';
+import ErrorMessage from '../error-message/error-message';
+import HintText from '../../common/hint-text';
+
+const TextInput: React.FC<SGDS.Component.TextInput> = ({
+    buttonIcon,
+    buttonText,
+    children,
+    className,
+    countThreshold,
+    width,
+    currency,
+    currencySymbol,
+    error,
+    errorMessage,
+    hasButton = false,
+    hintText,
+    id,
+    label,
+    maxlength,
+    name,
+    onBlur,
+    onChange,
+    placeholder,
+    type = 'text',
+    value,
+    ...props
+}) => {
+    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' : ''} ${currency ? 'ds_currency-wrapper' : ''}`;
+    const describedbys: string[] = [];
+
+    if (hintText) { describedbys.push(hintTextId) };
+    if (errorMessage) { describedbys.push(errorMessageId) };
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSCharacterCount(ref.current).init();
+        }
+    }, [ref]);
+
+    function handleBlur(event: React.FocusEvent) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+
+    function handleChange(event: React.ChangeEvent) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+
+    return (
+        <ConditionalWrapper
+            condition={typeof maxlength !== 'undefined' && maxlength > 0}
+            wrapper={(children: React.JSX.Element) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}
+        >
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <HintText id={hintTextId} text={hintText} />}
+            {errorMessage && <ErrorMessage id={errorMessageId} text={errorMessage}/>}
+            <ConditionalWrapper
+                condition={hasButton || typeof currency !== 'undefined' && currency}
+                wrapper={(children: React.JSX.Element) => <div className={inputWrapperClasses} data-symbol={currencySymbol}>{children}</div>}
+            >
+                <input
+                    aria-describedby={describedbys.join(' ')}
+                    className={[
+                        'ds_input',
+                        className,
+                        error ? 'ds_input--error' : '',
+                        width ? `ds_input--${width}` : '',
+                    ].join(' ')}
+                    defaultValue={value}
+                    id={id}
+                    maxLength={maxlength}
+                    name={name || id}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    placeholder={placeholder}
+                    type={type}
+                    {...props}
+                />
+                {hasButton && (buttonText || buttonIcon) && <Button iconOnly icon={buttonIcon}>{buttonText}</Button>}
+            </ConditionalWrapper>
+        </ConditionalWrapper>
+    );
+};
+
+TextInput.displayName = 'TextInput';
+
+export default TextInput;

package/src/components/textarea/textarea.test.tsx

@@ -0,0 +1,212 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import Textarea from './textarea';
+
+const id = 'textarea';
+const labelText = 'Description';
+
+test('text input renders correctly', () => {
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    const label = screen.getByText(labelText);
+
+    expect(textarea).toHaveClass('ds_input');
+    expect(textarea).toHaveAttribute('id', id);
+    expect(textarea).toHaveAttribute('name', id);
+    expect(textarea).toHaveAttribute('rows', String(4));
+
+    expect(label).toHaveClass('ds_label');
+    expect(label).toHaveAttribute('for', id);
+    expect(label.tagName).toEqual('LABEL');
+    expect(label.textContent).toEqual(labelText);
+
+    expect(textarea.previousSibling).toEqual(label);
+});
+
+test('textarea with character count', () => {
+    const maxLength = 250;
+
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            maxlength={maxLength}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    const textareaWrapper = textarea.parentNode;
+
+    expect(textareaWrapper).toHaveAttribute('data-maxlength', maxLength.toString());
+    expect(textareaWrapper).toHaveAttribute('data-module', 'ds-character-count');
+});
+
+test('text input with character count and threshold', () => {
+    const maxLength = 250;
+    const countThreshold = 80;
+
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            maxlength={maxLength}
+            countThreshold={countThreshold}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    const textareaWrapper = textarea.parentNode;
+
+    expect(textareaWrapper).toHaveAttribute('data-threshold', countThreshold.toString());
+});
+
+test('textarea with hint text', () => {
+    const hintText = 'hint text';
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            hintText={hintText}
+        />
+    );
+
+    const hintTextEl = screen.getByText(hintText);
+    const textarea = screen.getByRole('textbox');
+
+    expect(hintTextEl).toBeInTheDocument();
+    expect(textarea).toHaveAttribute('aria-describedby', hintTextEl.id);
+});
+
+test('textarea with custom name', () => {
+    const name = 'foo';
+
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            name={name}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toHaveAttribute('name', name);
+});
+
+test('textarea with blur function', () => {
+    const onBlurFn = vi.fn();
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            onBlur={onBlurFn}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+
+    fireEvent.blur(textarea);
+
+    expect(onBlurFn).toHaveBeenCalled();
+});
+
+test('textarea with change function', () => {
+    const onChangeFn = vi.fn();
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            onChange={onChangeFn}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+
+    fireEvent.change(textarea, {target: {value: 'foo'}});
+
+    expect(onChangeFn).toHaveBeenCalled();
+});
+
+test('textarea with placeholder text', () => {
+    const placeholder = 'foo';
+
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            placeholder={placeholder}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toHaveAttribute('placeholder', placeholder);
+});
+
+test('textarea with custom rows', () => {
+    const rows = 2;
+
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            rows={rows}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+
+    expect(textarea).toHaveAttribute('rows', String(rows));
+});
+
+test('textarea with initial value', () => {
+    const content = 'Mygov.scot gives people and businesses information about and access to public services in Scotland. We work closely with public sector organisations to make public services easy to find and understand.';
+
+    render(
+        <Textarea
+            defaultValue={content}
+            id={id}
+            label={labelText}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea.textContent).toEqual(content);
+});
+
+test('textarea with error message', () => {
+    const errorMessage = 'This is a required field';
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            error
+            errorMessage={errorMessage}
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    const errorMessageElement = screen.getByText(errorMessage);
+
+    expect(textarea).toHaveClass('ds_input--error')
+    expect(textarea).toHaveAttribute('aria-describedby', errorMessageElement.id);
+    expect(errorMessageElement).toBeInTheDocument();
+    expect(errorMessageElement).toHaveClass('ds_question__error-message');
+});
+
+test('passing additional props', () => {
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            data-test="foo"
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea?.dataset.test).toEqual('foo');
+});

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSCharacterCount from '@scottish-government/design-system/src/forms/character-count/character-count';
+import ConditionalWrapper from '../../common/conditional-wrapper';
+import ErrorMessage from '../error-message/error-message';
+import HintText from '../../common/hint-text';
+
+const Textarea: React.FC<SGDS.Component.Textarea> = ({
+    countThreshold,
+    error,
+    errorMessage,
+    hintText,
+    id,
+    label,
+    maxlength,
+    name,
+    onBlur,
+    onChange,
+    placeholder,
+    rows = 4,
+    value,
+    ...props
+}) => {
+    const errorMessageId = `error-message-${id}`;
+    const hintTextId = `hint-text-${id}`;
+    const ref = useRef(null);
+    const describedbys: string[] = [];
+
+    if (hintText) { describedbys.push(hintTextId) };
+    if (errorMessage) { describedbys.push(errorMessageId) };
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSCharacterCount(ref.current).init();
+        }
+    }, [ref]);
+
+    function handleBlur(event: React.FocusEvent) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+
+    function handleChange(event: React.ChangeEvent) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+
+    return (
+        <ConditionalWrapper
+            condition={typeof maxlength !== 'undefined' && maxlength > 0}
+            wrapper={(children: React.JSX.Element) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}
+        >
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <HintText id={hintTextId} text={hintText} />}
+            {errorMessage && <ErrorMessage id={errorMessageId} text={errorMessage}/>}
+
+            <textarea
+                aria-describedby={describedbys.join(' ')}
+                className={[
+                    'ds_input',
+                    error && 'ds_input--error',
+                ].join(' ')}
+                defaultValue={value}
+                id={id}
+                maxLength={maxlength}
+                name={name || id}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                placeholder={placeholder}
+                rows={rows}
+                {...props}
+            />
+
+        </ConditionalWrapper>
+    );
+};
+
+Textarea.displayName = 'Textarea';
+
+export default Textarea;