@scottish-government/designsystem-react 0.6.0 → 0.7.1

package/src/components/{question/question.test.tsx → Question/Question.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Question from './question';
+import Question from './Question';
 
 test('question renders correctly (basic q, just a wrapper, invalid example)', () => {
     render(
@@ -14,39 +14,39 @@ test('question renders correctly (basic q, just a wrapper, invalid example)', ()
 });
 
 test('fieldset question with legend', () => {
-    const legendText = 'My legend';
+    const LEGEND_TEXT = 'My legend';
 
     render(
-        <Question tagName="fieldset" legend={legendText}>
+        <Question tagName="fieldset" legend={LEGEND_TEXT}>
         </Question>
     );
 
     const questionElement = screen.getByRole('group');
-    const legendElement = within(questionElement).getByText(legendText);
+    const legendElement = within(questionElement).getByText(LEGEND_TEXT);
     expect(questionElement?.tagName).toEqual('FIELDSET');
     expect(legendElement.tagName).toEqual('LEGEND');
 });
 
 test('question with hint text', () => {
-    const hintText = 'My hint text';
+    const HINT_TEXT = 'My hint text';
 
     render(
-        <Question hintText={hintText}>
+        <Question hintText={HINT_TEXT}>
         </Question>
     );
 
     const hintTextElement = screen.getByRole('paragraph');
     const firstQuestionChild = document.querySelector('.ds_question')?.childNodes[0]
     expect(hintTextElement).toHaveClass('ds_hint-text');
-    expect(hintTextElement.textContent).toEqual(hintText);
+    expect(hintTextElement.textContent).toEqual(HINT_TEXT);
     expect(hintTextElement).toBe(firstQuestionChild);
 });
 
 test('question with error', () => {
-    const errorMessage = 'My error message';
+    const ERROR_MESSAGE_TEXT = 'My error message';
 
     render(
-        <Question error errorMessage={errorMessage}>
+        <Question error errorMessage={ERROR_MESSAGE_TEXT}>
         </Question>
     );
 
@@ -55,7 +55,7 @@ test('question with error', () => {
 
     expect(questionElement).toHaveClass('ds_question--error');
     expect(errorMessageElement).toBeInTheDocument();
-    expect(errorMessageElement?.textContent).toEqual(errorMessage);
+    expect(errorMessageElement?.textContent).toEqual(ERROR_MESSAGE_TEXT);
 });
 
 test('passing additional props', () => {

package/src/components/{question/question.tsx → Question/Question.tsx}

@@ -1,6 +1,6 @@
-import ErrorMessage from '../error-message/error-message';
-import HintText from '../../common/hint-text';
-import WrapperTag from '../../common/wrapper-tag';
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import HintText from '../../common/HintText';
+import WrapperTag from '../../common/WrapperTag';
 
 const Question: React.FC<SGDS.Component.Question> = function ({
     children,

package/src/components/{radio-button/radio-button.test.tsx → RadioButton/RadioButton.test.tsx}

@@ -1,9 +1,9 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import RadioGroup, { Radio } from './radio-button';
+import RadioGroup, { Radio } from './RadioButton';
 
 test('radio group renders correct children', () => {
-    const items = [
+    const ITEMS = [
         {
             id: 'universal-credit',
             label: 'Universal Credit',
@@ -22,20 +22,20 @@ test('radio group renders correct children', () => {
             label: 'I do not receive any of these benefits',
         }
     ];
-    const groupName = "foo"
+    const GROUP_NAME = "foo"
 
     render(
-        <RadioGroup name={groupName} items={items} />
+        <RadioGroup name={GROUP_NAME} items={ITEMS} />
     );
 
     const radios = screen.getAllByRole('radio');
     const groupContainer = radios[0].parentElement?.parentElement;
-    expect(radios.length).toEqual(items.length);
+    expect(radios.length).toEqual(ITEMS.length);
     expect(groupContainer).toHaveClass('ds_radios', 'ds_field-group');
 });
 
 test('inline radio group', () => {
-    const items = [
+    const ITEMS = [
         {
             id: 'radio-yes',
             label: 'Yes'
@@ -45,10 +45,10 @@ test('inline radio group', () => {
             label: 'No'
         }
     ];
-    const groupName = "yesno"
+    const GROUP_NAME = "yesno"
 
     render(
-        <RadioGroup inline name={groupName} items={items} />
+        <RadioGroup inline name={GROUP_NAME} items={ITEMS} />
     );
 
 
@@ -58,20 +58,20 @@ test('inline radio group', () => {
 });
 
 test('radio group passes all expected item params', () => {
-    const onBlurFn = vi.fn();
-    const onChangeFn = vi.fn();
-    const groupName = "foo"
+    const ONBLUR_FUNCTION = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
+    const GROUP_NAME = "foo"
 
     render(
-        <RadioGroup name={groupName} small items={[
+        <RadioGroup name={GROUP_NAME} small items={[
             {
                 checked: true,
                 exclusive: true,
                 hintText: 'hint text',
                 id: 'myid',
                 label: 'label text',
-                onBlur: {onBlurFn},
-                onChange: {onChangeFn},
+                onBlur: {ONBLUR_FUNCTION},
+                onChange: {ONCHANGE_FUNCTION},
                 small: true
             }
         ]}/>
@@ -82,17 +82,17 @@ test('radio group passes all expected item params', () => {
     const hintText = screen.getByText('hint text');
 
     expect(radio).toHaveAttribute('checked');
-    expect(radio).toHaveAttribute('name', groupName);
+    expect(radio).toHaveAttribute('name', GROUP_NAME);
     expect(radio.id).toEqual('myid');
     expect(radioContainer).toHaveClass('ds_radio--small');
     expect(hintText).toBeInTheDocument();
     expect(radio).toHaveAttribute('aria-describedby', hintText.id);
 
     // fireEvent.blur(radio);
-    // expect(onBlurFn).toHaveBeenCalled();
+    // expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 
     // fireEvent.click(radio);
-    // expect(onChangeFn).toHaveBeenCalled();
+    // expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('individual radio renders correctly', () => {
@@ -126,31 +126,31 @@ test('checked radio', () => {
 });
 
 test('radio with blur fn', () => {
-    const onBlurFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
 
     render(
-        <Radio onBlur={onBlurFn} name="benefitType" label="Pension Credit" id="pensioncredit" />
+        <Radio onBlur={ONBLUR_FUNCTION} name="benefitType" label="Pension Credit" id="pensioncredit" />
     );
 
     const radio = screen.getByRole('radio');
 
     fireEvent.blur(radio);
 
-    expect(onBlurFn).toHaveBeenCalled();
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 });
 
 test('radio with change fn', () => {
-    const onChangeFn = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
 
     render(
-        <Radio onChange={onChangeFn} name="benefitType" label="Pension Credit" id="pensioncredit" />
+        <Radio onChange={ONCHANGE_FUNCTION} name="benefitType" label="Pension Credit" id="pensioncredit" />
     );
 
     const radio = screen.getByRole('radio');
 
     fireEvent.click(radio);
 
-    expect(onChangeFn).toHaveBeenCalled();
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('radio with hint text', () => {

package/src/components/{radio-button/radio-button.tsx → RadioButton/RadioButton.tsx}

@@ -1,4 +1,4 @@
-import HintText from '../../common/hint-text';
+import HintText from '../../common/HintText';
 
 export const Radio: React.FC<SGDS.Component.RadioButton> = ({
     checked,

package/src/components/{select/select.test.tsx → Select/Select.test.tsx}

@@ -1,10 +1,10 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import Select from './select';
+import Select from './Select';
 
-const id = 'select-component';
-const labelText = 'choose a component';
-const options = [
+const SELECT_ID = 'select-component';
+const LABEL_TEXT = 'choose a component';
+const OPTIONS = [
     {
         text: 'Accordion',
         value: 'accordion'
@@ -22,9 +22,9 @@ const options = [
 test('select renders correctly', () => {
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
         />
     );
 
@@ -34,14 +34,14 @@ test('select renders correctly', () => {
     const selectArrow = select.nextElementSibling;
 
     expect(select).toHaveClass('ds_select');
-    expect(select.id).toEqual(id);
-    expect(select).toHaveAttribute('name', id);
+    expect(select.id).toEqual(SELECT_ID);
+    expect(select).toHaveAttribute('name', SELECT_ID);
 
     expect(selectWrapper).toHaveClass('ds_select-wrapper');
     expect(selectWrapper?.tagName).toEqual('DIV');
 
     expect(label).toHaveClass('ds_label');
-    expect(label).toHaveAttribute('for', id);
+    expect(label).toHaveAttribute('for', SELECT_ID);
 
     expect(selectArrow).toHaveClass('ds_select-arrow');
     expect(selectArrow).toHaveAttribute('aria-hidden');
@@ -49,34 +49,34 @@ test('select renders correctly', () => {
 });
 
 test('select with width', () => {
-    const width = 'fixed-10';
+    const SELECTWIDTH = 'fixed-10';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            width={width}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            width={SELECTWIDTH}
         />
     );
 
     const selectWrapper = screen.getByRole('combobox').parentElement;
-    expect(selectWrapper).toHaveClass(`ds_input--${width}`);
+    expect(selectWrapper).toHaveClass(`ds_input--${SELECTWIDTH}`);
 });
 
 test('select with hint text', () => {
-    const hintText = 'hint text';
+    const HINT_TEXT = 'hint text';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            hintText={hintText}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            hintText={HINT_TEXT}
         />
     );
 
-    const hintTextEl = screen.getByText(hintText);
+    const hintTextEl = screen.getByText(HINT_TEXT);
     const select = screen.getByRole('combobox');
 
     expect(hintTextEl).toBeInTheDocument();
@@ -84,29 +84,30 @@ test('select with hint text', () => {
 });
 
 test('select with custom name', () => {
-    const name = 'foo';
+    const SELECT_NAME = 'foo';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            name={name}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            name={SELECT_NAME}
         />
     );
 
     const select = screen.getByRole('combobox');
-    expect(select).toHaveAttribute('name', name);
+    expect(select).toHaveAttribute('name', SELECT_NAME);
 });
 
 test('select with blur function', () => {
-    const onBlurFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
+
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            onBlur={onBlurFn}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            onBlur={ONBLUR_FUNCTION}
         />
     );
 
@@ -114,17 +115,18 @@ test('select with blur function', () => {
 
     fireEvent.blur(select);
 
-    expect(onBlurFn).toHaveBeenCalled();
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 });
 
 test('select with change function', () => {
-    const onChangeFn = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
+
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            onChange={onChangeFn}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            onChange={ONCHANGE_FUNCTION}
         />
     );
 
@@ -132,59 +134,60 @@ test('select with change function', () => {
 
     fireEvent.change(select, {target: {value: 'button'}});
 
-    expect(onChangeFn).toHaveBeenCalled();
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('select with placeholder option', () => {
-    const placeholder = 'foo';
+    const PLACEHOLDER_TEXT = 'foo';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            placeholder={placeholder}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            placeholder={PLACEHOLDER_TEXT}
         />
     );
 
     const select = screen.getByRole('combobox');
     const firstOption = select.childNodes[0];
-    expect(firstOption.textContent).toEqual(placeholder);
+    expect(firstOption.textContent).toEqual(PLACEHOLDER_TEXT);
     expect(firstOption).toHaveAttribute('value', '');
 });
 
 test('select with initial value', () => {
-    const initialValue = 'button';
+    const INITIAL_VALUE = 'button';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            defaultValue={initialValue}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            defaultValue={INITIAL_VALUE}
         />
     );
 
     const select = screen.getByRole('combobox');
     const selectedOption = [].slice.call(select.childNodes).filter(childNode => childNode.selected)[0];
-    expect(selectedOption).toHaveAttribute('value', initialValue);
+    expect(selectedOption).toHaveAttribute('value', INITIAL_VALUE);
 });
 
 test('select with error message', () => {
-    const errorMessage = 'This is a required field';
+    const ERROR_MESSAGE_TEXT = 'This is a required field';
+
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
             error
-            errorMessage={errorMessage}
+            errorMessage={ERROR_MESSAGE_TEXT}
         />
     );
 
     const select = screen.getByRole('combobox');
     const selectWrapper = select.parentElement;
-    const errorMessageElement = screen.getByText(errorMessage);
+    const errorMessageElement = screen.getByText(ERROR_MESSAGE_TEXT);
 
     expect(selectWrapper).toHaveClass('ds_input--error')
     expect(select).toHaveAttribute('aria-describedby', errorMessageElement.id);
@@ -196,9 +199,9 @@ test('select with error message', () => {
 test('passing additional props', () => {
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
             data-test="foo"
         />
     );
@@ -211,9 +214,9 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
             className="foo"
         />
     );

package/src/components/{select/select.tsx → Select/Select.tsx}

@@ -1,5 +1,5 @@
-import ErrorMessage from '../error-message/error-message';
-import HintText from '../../common/hint-text';
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import HintText from '../../common/HintText';
 
 const Option: React.FC<SGDS.Component.Select.Option> = function ({
     text,

package/src/components/{sequential-navigation/sequential-navigation.test.tsx → SequentialNavigation/SequentialNavigation.test.tsx}

@@ -1,15 +1,15 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import SequentialNavigation from './sequential-navigation';
+import SequentialNavigation from './SequentialNavigation';
 
-const nextLinkObj = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
-const prevLinkObj = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
+const NEXT_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
+const PREVIOUS_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
 
 test('sequential navigation renders correctly', () => {
     render(
         <SequentialNavigation
-            next={nextLinkObj}
-            previous={prevLinkObj}
+            next={NEXT_LINK_OBJECT}
+            previous={PREVIOUS_LINK_OBJECT}
         />
     );
 
@@ -23,42 +23,42 @@ test('sequential navigation renders correctly', () => {
     expect(sequentialNavigation).toHaveAttribute('aria-label', 'Article navigation');
 
     expect(prevLink).toHaveClass('ds_sequential-nav__button', 'ds_sequential-nav__button--left');
-    expect(prevLink).toHaveAttribute('href', prevLinkObj.href);
-    expect(prevLink.textContent).toEqual(prevLinkObj.title);
+    expect(prevLink).toHaveAttribute('href', PREVIOUS_LINK_OBJECT.href);
+    expect(prevLink.textContent).toEqual(PREVIOUS_LINK_OBJECT.title);
     expect(prevLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--prev');
     expect(prevLinkWrapper?.tagName).toEqual('DIV');
     expect(prevLink.childNodes[0]).toHaveAttribute('data-label', 'Previous')
 
     expect(nextLink).toHaveClass('ds_sequential-nav__button', 'ds_sequential-nav__button--right');
-    expect(nextLink).toHaveAttribute('href', nextLinkObj.href);
-    expect(nextLink.textContent).toEqual(nextLinkObj.title);
+    expect(nextLink).toHaveAttribute('href', NEXT_LINK_OBJECT.href);
+    expect(nextLink.textContent).toEqual(NEXT_LINK_OBJECT.title);
     expect(nextLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--next');
     expect(nextLinkWrapper?.tagName).toEqual('DIV');
     expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next')
 });
 
 test('with custom aria label', () => {
-    const ariaLabel = 'My label';
+    const ARIA_LABEL = 'My label';
 
     render(
         <SequentialNavigation
-            ariaLabel={ariaLabel}
-            next={nextLinkObj}
-            previous={prevLinkObj}
+            ariaLabel={ARIA_LABEL}
+            next={NEXT_LINK_OBJECT}
+            previous={PREVIOUS_LINK_OBJECT}
         />
     );
 
     const sequentialNavigation = screen.getByRole('navigation');
 
-    expect(sequentialNavigation).toHaveAttribute('aria-label', ariaLabel);
+    expect(sequentialNavigation).toHaveAttribute('aria-label', ARIA_LABEL);
 });
 
 test('passing additional props', () => {
     render(
         <SequentialNavigation
             data-test="foo"
-            next={nextLinkObj}
-            previous={prevLinkObj}
+            next={NEXT_LINK_OBJECT}
+            previous={PREVIOUS_LINK_OBJECT}
         />
     );
 
@@ -70,8 +70,8 @@ test('passing additional CSS classes', () => {
     render(
         <SequentialNavigation
             className="foo"
-            next={nextLinkObj}
-            previous={prevLinkObj}
+            next={NEXT_LINK_OBJECT}
+            previous={PREVIOUS_LINK_OBJECT}
         />
     );
 

package/src/components/{side-navigation/side-navigation.test.tsx → SideNavigation/SideNavigation.test.tsx}

@@ -1,8 +1,8 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import SideNavigation, { List, Link } from './side-navigation';
+import SideNavigation, { List, Link } from './SideNavigation';
 
-const items = [
+const ITEMS = [
     {
         title: 'Apples',
         href: '#apples',
@@ -43,7 +43,7 @@ const items = [
 
 test('side navigation renders correctly', () => {
     render(
-        <SideNavigation items={items} />
+        <SideNavigation items={ITEMS} />
     );
 
     const sideNavigation = screen.getByRole('navigation');
@@ -124,7 +124,7 @@ test('side nav link with children', () => {
 });
 
 test('side nav list renders correctly', () => {
-    const items = [
+    const ITEMS = [
         {
             title: 'Bramley',
             href: '#bramley'
@@ -136,7 +136,7 @@ test('side nav list renders correctly', () => {
     ];
 
     render(
-        <List items={items}/>
+        <List items={ITEMS}/>
     );
 
     const list = screen.getByRole('list');
@@ -146,7 +146,7 @@ test('side nav list renders correctly', () => {
     expect(list).toHaveClass('ds_side-navigation__list');
     expect(list.tagName).toEqual('UL');
 
-    expect(list.children.length).toEqual(items.length);
+    expect(list.children.length).toEqual(ITEMS.length);
 
     // check properties of first link
     expect(item).toHaveClass('ds_side-navigation__item');
@@ -157,7 +157,7 @@ test('side nav list renders correctly', () => {
 
 test('passing additional props', () => {
     render(
-        <SideNavigation data-test="foo" items={items} />
+        <SideNavigation data-test="foo" items={ITEMS} />
     );
 
     const sideNavigation = screen.getByRole('navigation');
@@ -166,7 +166,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SideNavigation className="foo" items={items} />
+        <SideNavigation className="foo" items={ITEMS} />
     );
 
     const sideNavigation = screen.getByRole('navigation');