@scottish-government/designsystem-react 0.6.0 → 0.7.0

package/src/components/{pagination/pagination.test.tsx → Pagination/Pagination.test.tsx}

@@ -1,39 +1,39 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, within, fireEvent } from '@testing-library/react';
-import Pagination, { Page, Ellipsis } from './pagination';
+import Pagination, { Page, Ellipsis } from './Pagination';
 
-const pageAriaLabel = 'Page 1';
-const pageHref = '#foo';
-const pageText = '1';
-const currentPage = 10;
-const totalPages = 21;
+const PAGE_ARIA_LABEL = 'Page 1';
+const PAGE_HREF = '#foo';
+const PAGE_TEXT = '1';
+const CURRENT_PAGE = 10;
+const TOTAL_PAGES = 21;
 
 test('pagination page renders correctly', () => {
     render(
         <Page
-            ariaLabel={pageAriaLabel}
-            href={pageHref}
-            text={pageText}
+            ariaLabel={PAGE_ARIA_LABEL}
+            href={PAGE_HREF}
+            text={PAGE_TEXT}
         />
     );
 
     const item = screen.getByRole('listitem');
     const link = within(item).getByRole('link');
-    const span = within(link).getByText(pageText);
+    const span = within(link).getByText(PAGE_TEXT);
 
     expect(item).toHaveClass('ds_pagination__item');
     expect(link).toHaveClass('ds_pagination__link');
-    expect(link).toHaveAttribute('aria-label', pageAriaLabel);
-    expect(link).toHaveAttribute('href', pageHref);
+    expect(link).toHaveAttribute('aria-label', PAGE_ARIA_LABEL);
+    expect(link).toHaveAttribute('href', PAGE_HREF);
     expect(span).toHaveClass('ds_pagination__link-label');
 });
 
 test('current pagination page', () => {
     render(
         <Page
-            ariaLabel={pageAriaLabel}
-            href={pageHref}
-            text={pageText}
+            ariaLabel={PAGE_ARIA_LABEL}
+            href={PAGE_HREF}
+            text={PAGE_TEXT}
             current
         />
     );
@@ -46,14 +46,14 @@ test('current pagination page', () => {
 });
 
 test('pagination page with click event', () => {
-    const onClickFn = vi.fn();
+    const ONCLICK_FUNCTION = vi.fn();
 
     render(
         <Page
-            ariaLabel={pageAriaLabel}
-            href={pageHref}
-            text={pageText}
-            onClick={onClickFn}
+            ariaLabel={PAGE_ARIA_LABEL}
+            href={PAGE_HREF}
+            text={PAGE_TEXT}
+            onClick={ONCLICK_FUNCTION}
         />
     );
 
@@ -62,7 +62,7 @@ test('pagination page with click event', () => {
 
     fireEvent.click(link);
 
-    expect(onClickFn).toHaveBeenCalled();
+    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
 });
 
 test('Ellipsis item renders correctly', () => {
@@ -79,11 +79,11 @@ test('Ellipsis item renders correctly', () => {
 });
 
 test('pagination renders correctly', () => {
-    const currentPage = 10;
-    const totalPages = 21;
+    const CURRENT_PAGE = 10;
+    const TOTAL_PAGES = 21;
 
     render(
-        <Pagination page={currentPage} totalPages={totalPages} />
+        <Pagination page={CURRENT_PAGE} totalPages={TOTAL_PAGES} />
     );
 
     const paginationNav = screen.getByRole('navigation');
@@ -100,7 +100,7 @@ test('pagination renders correctly', () => {
     const firstPageLabel = within(paginationList).getByText('1');
     const firstPageLink = firstPageLabel.parentElement;
     const firstPageItem = firstPageLink?.parentElement;
-    const lastPageLabel = within(paginationList).getByText(totalPages);
+    const lastPageLabel = within(paginationList).getByText(TOTAL_PAGES);
     const lastPageLink = lastPageLabel.parentElement;
     const lastPageItem = lastPageLink?.parentElement;
 
@@ -125,7 +125,7 @@ test('pagination renders correctly', () => {
     expect(prevItem?.parentElement).toEqual(paginationList);
     expect(prevLink).toHaveClass('ds_pagination__link', 'ds_pagination__link--text', 'ds_pagination__link--icon')
     expect(prevLink).toHaveAttribute('aria-label', 'Previous page');
-    expect(prevLink).toHaveAttribute('href', `/search?page=${currentPage - 1}`);
+    expect(prevLink).toHaveAttribute('href', `/search?page=${CURRENT_PAGE - 1}`);
     expect(prevLink?.tagName).toEqual('A');
     expect(prevIcon).toHaveClass('ds_icon');
     expect(prevIcon).toHaveAttribute('aria-hidden', 'true')
@@ -138,7 +138,7 @@ test('pagination renders correctly', () => {
     expect(nextItem?.parentElement).toEqual(paginationList);
     expect(nextLink).toHaveClass('ds_pagination__link', 'ds_pagination__link--text', 'ds_pagination__link--icon')
     expect(nextLink).toHaveAttribute('aria-label', 'Next page');
-    expect(nextLink).toHaveAttribute('href', `/search?page=${currentPage + 1}`);
+    expect(nextLink).toHaveAttribute('href', `/search?page=${CURRENT_PAGE + 1}`);
     expect(nextLink?.tagName).toEqual('A');
     expect(nextIcon).toHaveClass('ds_icon');
     expect(nextIcon).toHaveAttribute('aria-hidden', 'true')
@@ -160,8 +160,8 @@ test('pagination renders correctly', () => {
     expect(lastPageItem?.tagName).toEqual('LI');
     expect(lastPageItem?.parentElement).toEqual(paginationList);
     expect(lastPageLink).toHaveClass('ds_pagination__link')
-    expect(lastPageLink).toHaveAttribute('aria-label', `Page ${totalPages}`);
-    expect(lastPageLink).toHaveAttribute('href', `/search?page=${totalPages}`);
+    expect(lastPageLink).toHaveAttribute('aria-label', `Page ${TOTAL_PAGES}`);
+    expect(lastPageLink).toHaveAttribute('href', `/search?page=${TOTAL_PAGES}`);
     expect(lastPageLink?.tagName).toEqual('A');
     expect(lastPageLabel).toHaveClass('ds_pagination__link-label');
     expect(lastPageLabel?.tagName).toEqual('SPAN');
@@ -184,7 +184,7 @@ test('pagination renders correctly', () => {
 
     expect(currentPageItem).toHaveClass('ds_pagination__item');
     expect(currentPageLink).toHaveClass('ds_pagination__link', 'ds_current');
-    expect(currentPageLink?.textContent).toEqual(currentPage.toString());
+    expect(currentPageLink?.textContent).toEqual(CURRENT_PAGE.toString());
 
     // expect one link either side of the current (default padding)
     expect(currentPageItem?.previousElementSibling?.querySelector('a')).toHaveAttribute('aria-label', 'Page 9');
@@ -198,13 +198,13 @@ test('pagination renders correctly', () => {
 });
 
 test('pagination with 2 padding', () => {
-    const padding = 2;
+    const PADDING = 2;
 
     render(
         <Pagination
-            page={currentPage}
-            totalPages={totalPages}
-            padding={padding}
+            page={CURRENT_PAGE}
+            totalPages={TOTAL_PAGES}
+            padding={PADDING}
         />
     );
 
@@ -217,29 +217,29 @@ test('pagination with 2 padding', () => {
 });
 
 test('pagination with custom aria label', () => {
-    const ariaLabel = 'My label';
+    const ARIA_LABEL = 'My label';
 
     render(
         <Pagination
-            page={currentPage}
-            totalPages={totalPages}
-            ariaLabel={ariaLabel}
+            page={CURRENT_PAGE}
+            totalPages={TOTAL_PAGES}
+            ariaLabel={ARIA_LABEL}
         />
     );
 
     const paginationNav = screen.getByRole('navigation');
 
-    expect(paginationNav).toHaveAttribute('aria-label', ariaLabel);
+    expect(paginationNav).toHaveAttribute('aria-label', ARIA_LABEL);
 });
 
 test('pagination passes onclick event to child links', () => {
-    const onClickFn = vi.fn();
+    const ONCLICK_FUNCTION = vi.fn();
 
     render(
         <Pagination
-            page={currentPage}
-            totalPages={totalPages}
-            onClick={onClickFn}
+            page={CURRENT_PAGE}
+            totalPages={TOTAL_PAGES}
+            onClick={ONCLICK_FUNCTION}
         />
     );
 
@@ -249,14 +249,14 @@ test('pagination passes onclick event to child links', () => {
 
     fireEvent.click(link);
 
-    expect(onClickFn).toHaveBeenCalled();
+    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
 });
 
 test('pagination modifies an input pattern for its link format', () => {
     render(
         <Pagination
-            page={currentPage}
-            totalPages={totalPages}
+            page={CURRENT_PAGE}
+            totalPages={TOTAL_PAGES}
             pattern='My/Link/Format?Page=$1#foo'
         />
     );
@@ -271,7 +271,7 @@ test('pagination at an early link in the list', () => {
     render(
         <Pagination
             page="1"
-            totalPages={totalPages}
+            totalPages={TOTAL_PAGES}
         />
     );
 
@@ -289,7 +289,7 @@ test('pagination at an early link in the list, increased padding', () => {
         <Pagination
             padding={2}
             page="1"
-            totalPages={totalPages}
+            totalPages={TOTAL_PAGES}
         />
     );
 
@@ -305,8 +305,8 @@ test('pagination at an early link in the list, increased padding', () => {
 test('pagination at late link in the list', () => {
     render(
         <Pagination
-            page={totalPages}
-            totalPages={totalPages}
+            page={TOTAL_PAGES}
+            totalPages={TOTAL_PAGES}
         />
     );
 
@@ -323,8 +323,8 @@ test('pagination at late link in the list, increased padding', () => {
     render(
         <Pagination
             padding={2}
-            page={totalPages}
-            totalPages={totalPages}
+            page={TOTAL_PAGES}
+            totalPages={TOTAL_PAGES}
         />
     );
 
@@ -340,8 +340,8 @@ test('pagination at late link in the list, increased padding', () => {
 test('passing additional props', () => {
     render(
         <Pagination
-            page={currentPage}
-            totalPages={totalPages}
+            page={CURRENT_PAGE}
+            totalPages={TOTAL_PAGES}
             data-test="foo"
         />
     );
@@ -353,8 +353,8 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <Pagination
-            page={currentPage}
-            totalPages={totalPages}
+            page={CURRENT_PAGE}
+            totalPages={TOTAL_PAGES}
             className="foo"
         />
     )

package/src/components/{pagination/pagination.tsx → Pagination/Pagination.tsx}

@@ -1,4 +1,4 @@
-import Icon from "../../common/icon";
+import Icon from "../../common/Icon";
 
 export const Page: React.FC<SGDS.Component.Pagination.Page> = ({
     ariaLabel,

package/src/components/{phase-banner/phase-banner.test.tsx → PhaseBanner/PhaseBanner.test.tsx}

@@ -1,14 +1,14 @@
 import { test, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import PhaseBanner from './phase-banner';
+import PhaseBanner from './PhaseBanner';
 
-const text = 'This is a new service. Your feedback will help us to improve it.';
-const defaultText = 'This is a new service';
+const BANNER_TEXT = 'This is a new service. Your feedback will help us to improve it.';
+const DEFAULT_TEXT = 'This is a new service';
 
 test('phase banner renders correctly', () => {
     render(
         <PhaseBanner>
-            {text}
+            {BANNER_TEXT}
         </PhaseBanner>
     );
 
@@ -23,7 +23,7 @@ test('phase banner renders correctly', () => {
     expect(phaseBannerWrapper?.tagName).toEqual('DIV');
     expect(phaseBannerContent?.tagName).toEqual('P');
     expect(phaseBannerText?.tagName).toEqual('SPAN');
-    expect(phaseBannerText?.textContent).toEqual(text);
+    expect(phaseBannerText?.textContent).toEqual(BANNER_TEXT);
 });
 
 test('phase banner with default text', () => {
@@ -36,14 +36,14 @@ test('phase banner with default text', () => {
     const phaseBannerContent = phaseBanner?.querySelector('.ds_phase-banner__content');
     const phaseBannerText = phaseBannerContent?.querySelector('.ds_phase-banner__text');
 
-    expect(phaseBannerText?.textContent).toEqual(defaultText);
+    expect(phaseBannerText?.textContent).toEqual(DEFAULT_TEXT);
 });
 
 test('phase banner with phase tag', () => {
-    const phase = 'Beta';
+    const PHASE_TEXT = 'Beta';
 
     render(
-        <PhaseBanner phaseName={phase}></PhaseBanner>
+        <PhaseBanner phaseName={PHASE_TEXT}></PhaseBanner>
     );
 
     const phaseBanner = document.querySelector('.ds_phase-banner');
@@ -52,7 +52,7 @@ test('phase banner with phase tag', () => {
     expect(phaseBannerTag).toBeInTheDocument();
     expect(phaseBannerTag?.tagName).toEqual('SPAN');
     expect(phaseBannerTag).toHaveClass('ds_tag', 'ds_phase-banner__tag');
-    expect(phaseBannerTag?.textContent).toEqual(phase);
+    expect(phaseBannerTag?.textContent).toEqual(PHASE_TEXT);
 });
 
 test('passing additional props', () => {

package/src/components/{phase-banner/phase-banner.tsx → PhaseBanner/PhaseBanner.tsx}

@@ -1,4 +1,4 @@
-import Tag from "../tag/tag";
+import Tag from "../Tag/Tag";
 
 const PhaseBanner: React.FC<SGDS.Component.PhaseBanner> = ({
     children,

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,