@scottish-government/designsystem-react 0.6.0 → 0.7.0

package/src/components/{text-input/text-input.test.tsx → TextInput/TextInput.test.tsx}

@@ -1,31 +1,31 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, within, fireEvent } from '@testing-library/react';
-import TextInput from './text-input';
+import TextInput from './TextInput';
 
-const id = 'text-input';
-const labelText = 'First name';
+const INPUT_ID = 'text-input';
+const LABEL_TEXT = 'First name';
 
 test('text input renders correctly', () => {
     render(
         <TextInput
-            id={id}
-            label={labelText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
         />
     );
 
     const textInput = screen.getByRole('textbox');
-    const label = screen.getByText(labelText);
+    const label = screen.getByText(LABEL_TEXT);
 
     expect(textInput).toHaveClass('ds_input');
-    expect(textInput).toHaveAttribute('id', id);
-    expect(textInput).toHaveAttribute('name', id);
+    expect(textInput).toHaveAttribute('id', INPUT_ID);
+    expect(textInput).toHaveAttribute('name', INPUT_ID);
     expect(textInput).toHaveAttribute('type', 'text');
     expect(textInput.tagName).toEqual('INPUT');
 
     expect(label).toHaveClass('ds_label');
-    expect(label).toHaveAttribute('for', id);
+    expect(label).toHaveAttribute('for', INPUT_ID);
     expect(label.tagName).toEqual('LABEL');
-    expect(label.textContent).toEqual(labelText);
+    expect(label.textContent).toEqual(LABEL_TEXT);
 
     expect(textInput.previousSibling).toEqual(label);
 });
@@ -33,8 +33,8 @@ test('text input renders correctly', () => {
 test('text input with custom class(es)', () => {
     render(
         <TextInput
-            id={id}
-            label={labelText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
             className="foo bar"
         />
     );
@@ -45,62 +45,62 @@ test('text input with custom class(es)', () => {
 });
 
 test('text input with character count', () => {
-    const maxLength = 100;
+    const MAX_LENGTH = 100;
 
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            maxlength={maxLength}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            maxlength={MAX_LENGTH}
         />
     );
 
     const textInput = screen.getByRole('textbox');
     const textInputWrapper = textInput.parentElement;
 
-    expect(textInputWrapper).toHaveAttribute('data-maxlength', maxLength.toString());
+    expect(textInputWrapper).toHaveAttribute('data-maxlength', MAX_LENGTH.toString());
     expect(textInputWrapper).toHaveAttribute('data-module', 'ds-character-count');
 });
 
 test('text input with character count and threshold', () => {
-    const maxLength = 100;
-    const countThreshold = 80;
+    const MAX_LENGTH = 100;
+    const COUNT_THRESHOLD = 80;
 
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            maxlength={maxLength}
-            countThreshold={countThreshold}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            maxlength={MAX_LENGTH}
+            countThreshold={COUNT_THRESHOLD}
         />
     );
 
     const textInput = screen.getByRole('textbox');
     const textInputWrapper = textInput.parentElement;
 
-    expect(textInputWrapper).toHaveAttribute('data-threshold', countThreshold.toString());
+    expect(textInputWrapper).toHaveAttribute('data-threshold', COUNT_THRESHOLD.toString());
 });
 
 test('text input with width', () => {
-    const width = 'fixed-10';
+    const INPUT_WIDTH = 'fixed-10';
 
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            width={width}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            width={INPUT_WIDTH}
         />
     );
 
     const textInput = screen.getByRole('textbox');
-    expect(textInput).toHaveClass(`ds_input--${width}`);
+    expect(textInput).toHaveClass(`ds_input--${INPUT_WIDTH}`);
 });
 
 test('text input with currency', () => {
     render(
         <TextInput
-            id={id}
-            label={labelText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
             currency
         />
     );
@@ -114,32 +114,33 @@ test('text input with currency', () => {
 });
 
 test('text input with custom currency symbol', () => {
-    const symbol = '@';
+    const CURRENCY_SYMBOL = '@';
 
     render(
         <TextInput
-            id={id}
-            label={labelText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
             currency
-            currencySymbol={symbol}
+            currencySymbol={CURRENCY_SYMBOL}
         />
     );
 
     const textInput = screen.getByRole('textbox');
     const textInputWrapper = textInput.parentElement;
 
-    expect(textInputWrapper).toHaveAttribute('data-symbol', symbol);
+    expect(textInputWrapper).toHaveAttribute('data-symbol', CURRENCY_SYMBOL);
 });
 
 test('text input with button', () => {
-    const buttonText = 'Search';
-    const buttonIcon = 'Search';
+    const BUTTON_TEXT = 'Search';
+    const BUTTON_ICON = 'Search';
+
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            buttonIcon={buttonIcon}
-            buttonText={buttonText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            buttonIcon={BUTTON_ICON}
+            buttonText={BUTTON_TEXT}
             hasButton
         />
     );
@@ -147,7 +148,7 @@ test('text input with button', () => {
     const textInput = screen.getByRole('textbox');
     const textInputWrapper = textInput.parentElement;
     const button = screen.getByRole('button');
-    const buttonTextElement = within(button).getByText(buttonText);
+    const buttonTextElement = within(button).getByText(BUTTON_TEXT);
     const buttonIconElement = within(button).getByRole('img', { hidden: true });
 
     expect(textInputWrapper).toHaveClass('ds_input__wrapper', 'ds_input__wrapper--has-icon ');
@@ -163,16 +164,17 @@ test('text input with button', () => {
 });
 
 test('text input with hint text', () => {
-    const hintText = 'hint text';
+    const HINT_TEXT = 'hint text';
+
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            hintText={hintText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            hintText={HINT_TEXT}
         />
     );
 
-    const hintTextEl = screen.getByText(hintText);
+    const hintTextEl = screen.getByText(HINT_TEXT);
     const textInput = screen.getByRole('textbox');
 
     expect(hintTextEl).toBeInTheDocument();
@@ -180,27 +182,28 @@ test('text input with hint text', () => {
 });
 
 test('text input with custom name', () => {
-    const name = 'foo';
+    const INPUT_NAME = 'foo';
 
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            name={name}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            name={INPUT_NAME}
         />
     );
 
     const textInput = screen.getByRole('textbox');
-    expect(textInput).toHaveAttribute('name', name);
+    expect(textInput).toHaveAttribute('name', INPUT_NAME);
 });
 
 test('text input with blur function', () => {
-    const onBlurFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
+
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            onBlur={onBlurFn}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            onBlur={ONBLUR_FUNCTION}
         />
     );
 
@@ -208,16 +211,17 @@ test('text input with blur function', () => {
 
     fireEvent.blur(textInput);
 
-    expect(onBlurFn).toHaveBeenCalled();
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 });
 
 test('text input with change function', () => {
-    const onChangeFn = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
+
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            onChange={onChangeFn}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            onChange={ONCHANGE_FUNCTION}
         />
     );
 
@@ -225,67 +229,68 @@ test('text input with change function', () => {
 
     fireEvent.change(textInput, {target: {value: 'foo'}});
 
-    expect(onChangeFn).toHaveBeenCalled();
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('text input with placeholder text', () => {
-    const placeholder = 'foo';
+    const PLACEHOLDER_TEXT = 'foo';
 
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            placeholder={placeholder}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            placeholder={PLACEHOLDER_TEXT}
         />
     );
 
     const textInput = screen.getByRole('textbox');
-    expect(textInput).toHaveAttribute('placeholder', placeholder);
+    expect(textInput).toHaveAttribute('placeholder', PLACEHOLDER_TEXT);
 });
 
 test('text input with different type', () => {
-    const type = 'foo';
+    const INPUT_TYPE = 'foo';
 
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            type={type}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            type={INPUT_TYPE}
         />
     );
 
     const textInput = screen.getByRole('textbox');
-    expect(textInput).toHaveAttribute('type', type);
+    expect(textInput).toHaveAttribute('type', INPUT_TYPE);
 });
 
 test('text input with initial value', () => {
-    const initialValue = 'initial value';
+    const INITIAL_VALUE = 'initial value';
 
     render(
         <TextInput
-            id={id}
-            label={labelText}
-            value={initialValue}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
+            value={INITIAL_VALUE}
         />
     );
 
     const textInput = screen.getByRole('textbox');
-    expect(textInput).toHaveAttribute('value', initialValue);
+    expect(textInput).toHaveAttribute('value', INITIAL_VALUE);
 });
 
 test('text input with error message', () => {
-    const errorMessage = 'This is a required field';
+    const ERROR_MESSAGE_TEXT = 'This is a required field';
+
     render(
         <TextInput
-            id={id}
-            label={labelText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
             error
-            errorMessage={errorMessage}
+            errorMessage={ERROR_MESSAGE_TEXT}
         />
     );
 
     const textInput = screen.getByRole('textbox');
-    const errorMessageElement = screen.getByText(errorMessage);
+    const errorMessageElement = screen.getByText(ERROR_MESSAGE_TEXT);
 
     expect(textInput).toHaveClass('ds_input--error')
     expect(textInput).toHaveAttribute('aria-describedby', errorMessageElement.id);
@@ -297,8 +302,8 @@ test('text input with error message', () => {
 test('passing additional props', () => {
     render(
         <TextInput
-            id={id}
-            label={labelText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
             data-test="foo"
         />
     );
@@ -310,8 +315,8 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <TextInput
-            id={id}
-            label={labelText}
+            id={INPUT_ID}
+            label={LABEL_TEXT}
             className="foo"
         />
     );

package/src/components/{text-input/text-input.tsx → TextInput/TextInput.tsx}

@@ -1,10 +1,10 @@
 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';
+import Button from '../Button/Button';
+import ConditionalWrapper from '../../common/ConditionalWrapper';
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import HintText from '../../common/HintText';
 
 const TextInput: React.FC<SGDS.Component.TextInput> = ({
     buttonIcon,

package/src/components/{textarea/textarea.test.tsx → Textarea/Textarea.test.tsx}

@@ -1,82 +1,83 @@
 import { test, expect, vi } from 'vitest';
-import { render, screen, within, fireEvent } from '@testing-library/react';
-import Textarea from './textarea';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Textarea from './Textarea';
 
-const id = 'textarea';
-const labelText = 'Description';
+const TEXTAREA_ID = 'textarea';
+const LABEL_TEXT = 'Description';
 
 test('text input renders correctly', () => {
     render(
         <Textarea
-            id={id}
-            label={labelText}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
         />
     );
 
     const textarea = screen.getByRole('textbox');
-    const label = screen.getByText(labelText);
+    const label = screen.getByText(LABEL_TEXT);
 
     expect(textarea).toHaveClass('ds_input');
-    expect(textarea).toHaveAttribute('id', id);
-    expect(textarea).toHaveAttribute('name', id);
+    expect(textarea).toHaveAttribute('id', TEXTAREA_ID);
+    expect(textarea).toHaveAttribute('name', TEXTAREA_ID);
     expect(textarea).toHaveAttribute('rows', String(4));
 
     expect(label).toHaveClass('ds_label');
-    expect(label).toHaveAttribute('for', id);
+    expect(label).toHaveAttribute('for', TEXTAREA_ID);
     expect(label.tagName).toEqual('LABEL');
-    expect(label.textContent).toEqual(labelText);
+    expect(label.textContent).toEqual(LABEL_TEXT);
 
     expect(textarea.previousSibling).toEqual(label);
 });
 
 test('textarea with character count', () => {
-    const maxLength = 250;
+    const MAX_LENGTH = 250;
 
     render(
         <Textarea
-            id={id}
-            label={labelText}
-            maxlength={maxLength}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            maxlength={MAX_LENGTH}
         />
     );
 
     const textarea = screen.getByRole('textbox');
     const textareaWrapper = textarea.parentElement;
 
-    expect(textareaWrapper).toHaveAttribute('data-maxlength', maxLength.toString());
+    expect(textareaWrapper).toHaveAttribute('data-maxlength', MAX_LENGTH.toString());
     expect(textareaWrapper).toHaveAttribute('data-module', 'ds-character-count');
 });
 
 test('text input with character count and threshold', () => {
-    const maxLength = 250;
-    const countThreshold = 80;
+    const MAX_LENGTH = 250;
+    const COUNT_THRESHOLD = 80;
 
     render(
         <Textarea
-            id={id}
-            label={labelText}
-            maxlength={maxLength}
-            countThreshold={countThreshold}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            maxlength={MAX_LENGTH}
+            countThreshold={COUNT_THRESHOLD}
         />
     );
 
     const textarea = screen.getByRole('textbox');
     const textareaWrapper = textarea.parentElement;
 
-    expect(textareaWrapper).toHaveAttribute('data-threshold', countThreshold.toString());
+    expect(textareaWrapper).toHaveAttribute('data-threshold', COUNT_THRESHOLD.toString());
 });
 
 test('textarea with hint text', () => {
-    const hintText = 'hint text';
+    const HINT_TEXT = 'hint text';
+
     render(
         <Textarea
-            id={id}
-            label={labelText}
-            hintText={hintText}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            hintText={HINT_TEXT}
         />
     );
 
-    const hintTextEl = screen.getByText(hintText);
+    const hintTextEl = screen.getByText(HINT_TEXT);
     const textarea = screen.getByRole('textbox');
 
     expect(hintTextEl).toBeInTheDocument();
@@ -84,27 +85,28 @@ test('textarea with hint text', () => {
 });
 
 test('textarea with custom name', () => {
-    const name = 'foo';
+    const TEXTAREA_NAME = 'foo';
 
     render(
         <Textarea
-            id={id}
-            label={labelText}
-            name={name}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            name={TEXTAREA_NAME}
         />
     );
 
     const textarea = screen.getByRole('textbox');
-    expect(textarea).toHaveAttribute('name', name);
+    expect(textarea).toHaveAttribute('name', TEXTAREA_NAME);
 });
 
 test('textarea with blur function', () => {
-    const onBlurFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
+
     render(
         <Textarea
-            id={id}
-            label={labelText}
-            onBlur={onBlurFn}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            onBlur={ONBLUR_FUNCTION}
         />
     );
 
@@ -112,16 +114,17 @@ test('textarea with blur function', () => {
 
     fireEvent.blur(textarea);
 
-    expect(onBlurFn).toHaveBeenCalled();
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 });
 
 test('textarea with change function', () => {
-    const onChangeFn = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
+
     render(
         <Textarea
-            id={id}
-            label={labelText}
-            onChange={onChangeFn}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            onChange={ONCHANGE_FUNCTION}
         />
     );
 
@@ -129,68 +132,69 @@ test('textarea with change function', () => {
 
     fireEvent.change(textarea, {target: {value: 'foo'}});
 
-    expect(onChangeFn).toHaveBeenCalled();
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('textarea with placeholder text', () => {
-    const placeholder = 'foo';
+    const PLACEHOLDER_TEXT = 'foo';
 
     render(
         <Textarea
-            id={id}
-            label={labelText}
-            placeholder={placeholder}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            placeholder={PLACEHOLDER_TEXT}
         />
     );
 
     const textarea = screen.getByRole('textbox');
-    expect(textarea).toHaveAttribute('placeholder', placeholder);
+    expect(textarea).toHaveAttribute('placeholder', PLACEHOLDER_TEXT);
 });
 
 test('textarea with custom rows', () => {
-    const rows = 2;
+    const ROWS = 2;
 
     render(
         <Textarea
-            id={id}
-            label={labelText}
-            rows={rows}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
+            rows={ROWS}
         />
     );
 
     const textarea = screen.getByRole('textbox');
 
-    expect(textarea).toHaveAttribute('rows', String(rows));
+    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.';
+    const TEXTAREA_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}
+            defaultValue={TEXTAREA_CONTENT}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
         />
     );
 
     const textarea = screen.getByRole('textbox');
-    expect(textarea.textContent).toEqual(content);
+    expect(textarea.textContent).toEqual(TEXTAREA_CONTENT);
 });
 
 test('textarea with error message', () => {
-    const errorMessage = 'This is a required field';
+    const ERROR_MESSAGE_TEXT = 'This is a required field';
+
     render(
         <Textarea
-            id={id}
-            label={labelText}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
             error
-            errorMessage={errorMessage}
+            errorMessage={ERROR_MESSAGE_TEXT}
         />
     );
 
     const textarea = screen.getByRole('textbox');
-    const errorMessageElement = screen.getByText(errorMessage);
+    const errorMessageElement = screen.getByText(ERROR_MESSAGE_TEXT);
 
     expect(textarea).toHaveClass('ds_input--error')
     expect(textarea).toHaveAttribute('aria-describedby', errorMessageElement.id);
@@ -202,8 +206,8 @@ test('textarea with error message', () => {
 test('passing additional props', () => {
     render(
         <Textarea
-            id={id}
-            label={labelText}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
             data-test="foo"
         />
     );
@@ -215,8 +219,8 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <Textarea
-            id={id}
-            label={labelText}
+            id={TEXTAREA_ID}
+            label={LABEL_TEXT}
             className="foo"
         />
     );