@scottish-government/designsystem-react 0.6.0 → 0.7.0

package/src/components/{site-search/site-search.test.tsx → SiteSearch/SiteSearch.test.tsx}

@@ -1,10 +1,10 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import SiteSearch from './site-search';
+import SiteSearch from './SiteSearch';
 
-const id = 'site-search';
-const labelText = 'Search';
-const placeholderText = 'Search';
+const SITE_SEARCH_ID = 'site-search';
+const LABEL_TEXT = 'Search';
+const PLACEHOLDER_TEXT = 'Search';
 
 test('site search renders correctly', () => {
     render(
@@ -26,17 +26,17 @@ test('site search renders correctly', () => {
     expect(searchForm).toHaveAttribute('method', 'GET');
     expect(searchForm).toHaveAttribute('action', '/search');
 
-    expect(searchLabel?.textContent).toEqual(labelText);
-    expect(searchLabel).toHaveAttribute('for', id);
-    expect(searchLabel).toHaveAttribute('id', `${id}-label`);
+    expect(searchLabel?.textContent).toEqual(LABEL_TEXT);
+    expect(searchLabel).toHaveAttribute('for', SITE_SEARCH_ID);
+    expect(searchLabel).toHaveAttribute('id', `${SITE_SEARCH_ID}-label`);
     expect(searchLabel).toHaveClass('ds_label', 'visually-hidden');
 
     expect(inputWrapper).toHaveClass('ds_input__wrapper  ds_input__wrapper--has-icon');
     expect(inputWrapper?.tagName).toEqual('DIV');
 
     expect(searchInput).toHaveClass('ds_input', 'ds_site-search__input');
-    expect(searchInput).toHaveAttribute('id', id);
-    expect(searchInput).toHaveAttribute('placeholder', placeholderText);
+    expect(searchInput).toHaveAttribute('id', SITE_SEARCH_ID);
+    expect(searchInput).toHaveAttribute('placeholder', PLACEHOLDER_TEXT);
     expect(searchInput).toHaveAttribute('required');
     expect(searchInput).toHaveAttribute('spellcheck', 'false');
     expect(searchInput).toHaveAttribute('type', 'search');
@@ -102,13 +102,13 @@ test('custom placeholder', () => {
 });
 
 test('autocomplete', () => {
-    const autocompleteSuggestionMappingFunction = vi.fn();
-    const suggestionsId = 'autocomplete-suggestions';
+    const AUTOCOMPLETE_SUGGESTION_MAPPING_FUNCTION = vi.fn();
+    const SUGGESTIONS_ID = 'autocomplete-suggestions';
 
     render(
         <SiteSearch
             autocompleteEndpoint="/endpoint"
-            autocompleteSuggestionMappingFunction={autocompleteSuggestionMappingFunction}
+            autocompleteSuggestionMappingFunction={AUTOCOMPLETE_SUGGESTION_MAPPING_FUNCTION}
         />
     )
 
@@ -120,7 +120,7 @@ test('autocomplete', () => {
     const suggestionsList = within(searchForm).getByRole('listbox');
 
     expect(searchFormContainer).toHaveClass('ds_autocomplete');
-    expect(searchFormContainer).toHaveAttribute('id', `${id}-autocomplete`);
+    expect(searchFormContainer).toHaveAttribute('id', `${SITE_SEARCH_ID}-autocomplete`);
 
     expect(autocompleteStatus).toBeInTheDocument();
     expect(autocompleteStatus).toHaveClass('visually-hidden');
@@ -129,15 +129,15 @@ test('autocomplete', () => {
     expect(autocompleteStatus.tagName).toEqual('DIV');
 
     expect(searchInput).toHaveAttribute('aria-autocomplete', 'list');
-    expect(searchInput).toHaveAttribute('aria-owns', suggestionsId);
+    expect(searchInput).toHaveAttribute('aria-owns', SUGGESTIONS_ID);
     expect(searchInput).toHaveAttribute('autocomplete', 'off');
     expect(searchInput).toHaveClass('js-autocomplete-input');
 
-    expect(suggestionsContainer).toHaveAttribute('id', suggestionsId);
+    expect(suggestionsContainer).toHaveAttribute('id', SUGGESTIONS_ID);
     expect(suggestionsContainer?.tagName).toEqual('DIV');
 
     expect(suggestionsList).toHaveClass('ds_autocomplete__suggestions-list');
-    expect(suggestionsList).toHaveAttribute('aria-labelledby', `${id}-label`);
+    expect(suggestionsList).toHaveAttribute('aria-labelledby', `${SITE_SEARCH_ID}-label`);
     expect(suggestionsList.tagName).toEqual('OL');
 
 });

package/src/components/{site-search/site-search.tsx → SiteSearch/SiteSearch.tsx}

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
-import Button from '../button/button';
+import Button from '../Button/Button';
 
 const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
     action = '/search',

package/src/components/{skip-links/skip-links.test.tsx → SkipLinks/SkipLinks.test.tsx}

@@ -1,9 +1,9 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import SkipLinks from './skip-links';
+import SkipLinks from './SkipLinks';
 
-const mainContentId = 'main-content';
-const linkText = 'Skip to main content';
+const MAIN_CONTENT_ID = 'main-content';
+const LINK_TEXT = 'Skip to main content';
 
 test('skip links renders correctly', () => {
     render(
@@ -24,43 +24,43 @@ test('skip links renders correctly', () => {
     expect(skipLinksListItem).toHaveClass('ds_skip-links__item');
 
     expect(skipLinksLink).toHaveClass('ds_skip-links__link');
-    expect(skipLinksLink).toHaveAttribute('href', `#${mainContentId}`);
-    expect(skipLinksLink.textContent).toEqual(linkText);
+    expect(skipLinksLink).toHaveAttribute('href', `#${MAIN_CONTENT_ID}`);
+    expect(skipLinksLink.textContent).toEqual(LINK_TEXT);
 });
 
 test('custom link text', () => {
-    const mainLinkText = 'foo';
+    const MAIN_LINK_TEXT = 'foo';
 
     render(
-        <SkipLinks mainLinkText={mainLinkText} />
+        <SkipLinks mainLinkText={MAIN_LINK_TEXT} />
     );
 
     const skipLinksList = screen.getByRole('list');
     const skipLinksLink = within(skipLinksList).getByRole('link');
 
-    expect(skipLinksLink.textContent).toEqual(mainLinkText);
+    expect(skipLinksLink.textContent).toEqual(MAIN_LINK_TEXT);
 });
 
 test('custom link target', () => {
-    const customId = 'bar'
+    const CUSTOM_ID = 'bar'
 
     render(
-        <SkipLinks mainContentId={customId} />
+        <SkipLinks mainContentId={CUSTOM_ID} />
     );
 
     const skipLinksList = screen.getByRole('list');
     const skipLinksLink = within(skipLinksList).getByRole('link');
 
-    expect(skipLinksLink).toHaveAttribute('href', `#${customId}`)
+    expect(skipLinksLink).toHaveAttribute('href', `#${CUSTOM_ID}`)
 });
 
 test('additional links', () => {
-    const items = [
+    const ITEMS = [
         { title: 'foo', targetId: 'bar' }
     ];
 
     render(
-        <SkipLinks items={items} />
+        <SkipLinks items={ITEMS} />
     );
 
     const skipLinksList = screen.getByRole('list');
@@ -68,8 +68,8 @@ test('additional links', () => {
     const skipLinksSecondLink = within(skipLinksList).getAllByRole('link')[1];
 
     expect(skipLinksListItems.length).toEqual(2);
-    expect(skipLinksSecondLink).toHaveAttribute('href', `#${items[0].targetId}`);
-    expect(skipLinksSecondLink.textContent).toEqual(items[0].title);
+    expect(skipLinksSecondLink).toHaveAttribute('href', `#${ITEMS[0].targetId}`);
+    expect(skipLinksSecondLink.textContent).toEqual(ITEMS[0].title);
 })
 
 test('passing additional props', () => {

package/src/components/{summary-card/summary-card.test.tsx → SummaryCard/SummaryCard.test.tsx}

@@ -1,22 +1,22 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, within, fireEvent } from '@testing-library/react';
-import SummaryCard from './summary-card';
-import SummaryList from '../summary-list/summary-list';
+import SummaryCard from './SummaryCard';
+import SummaryList from '../SummaryList/SummaryList';
 
-const onClickFn = vi.fn();
+const ONCLICK_FUNCTION = vi.fn();
 
-const actions = [
+const ACTIONS = [
     {
         title: 'Change',
         href: '#foo'
     },
     {
         title: 'Delete',
-        onclick: onClickFn
+        onclick: ONCLICK_FUNCTION
     }
 ];
 
-const items = [
+const ITEMS = [
     {
         title: 'Phone number',
         value: '0123 456 7890'
@@ -27,19 +27,21 @@ const items = [
     }
 ];
 
-const titleText = 'Joe Bloggs';
+const TITLE_TEXT = 'Joe Bloggs';
 
 test('summary card renders correctly', () => {
+    const DESCRIBEDBY_ID = 'summary-card-joe-bloggs';
+
     render(
         <>
             <SummaryCard
                 data-testid="foo"
-                actions={actions}
-                items={items}
-                title={titleText}
+                actions={ACTIONS}
+                items={ITEMS}
+                title={TITLE_TEXT}
             />
 
-            <SummaryList data-testid="bar" items={items}/>
+            <SummaryList data-testid="bar" items={ITEMS}/>
         </>
     );
 
@@ -52,20 +54,18 @@ test('summary card renders correctly', () => {
     const thisList = within(content).getByRole('list');
     const comparisonList = screen.getByTestId('bar');
 
-    const describedById = 'summary-card-joe-bloggs';
-
     expect(summaryCard).toHaveClass('ds_summary-card');
 
     expect(header).toHaveClass('ds_summary-card__header');
     expect(header?.tagName).toEqual('DIV');
 
     expect(title).toHaveClass('ds_summary-card__header-title');
-    expect(title).toHaveAttribute('id', describedById);
+    expect(title).toHaveAttribute('id', DESCRIBEDBY_ID);
     expect(title?.tagName).toEqual('H3');
-    expect(title.textContent).toEqual(titleText);
+    expect(title.textContent).toEqual(TITLE_TEXT);
 
     expect(actionsList?.tagName).toEqual('UL');
-    expect(actionsList.children.length).toEqual(actions.length);
+    expect(actionsList.children.length).toEqual(ACTIONS.length);
     expect(actionsList.children[0]).toHaveClass('ds_summary-card__actions-list-item');
     expect(actionsList.children[0].tagName).toEqual('LI');
     expect(actionsList.children[0].innerHTML).toEqual('<a aria-describedby="summary-card-joe-bloggs" class="ds_link" href="#foo">Change</a>');
@@ -73,7 +73,7 @@ test('summary card renders correctly', () => {
 
     fireEvent.click(actionsList.children[1].children[0]);
 
-    expect(onClickFn).toHaveBeenCalled();
+    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
 
     expect(content).toHaveClass('ds_summary-card__content');
     expect(content?.tagName).toEqual('DIV');
@@ -81,14 +81,14 @@ test('summary card renders correctly', () => {
     expect(thisList?.innerHTML).toEqual(comparisonList?.innerHTML);
 });
 
-test('custom header level', () => {
+test('custom heading level', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={actions}
-            headerLevel="h2"
-            items={items}
-            title={titleText}
+            actions={ACTIONS}
+            headingLevel="h2"
+            items={ITEMS}
+            title={TITLE_TEXT}
         />
     );
 
@@ -102,9 +102,9 @@ test('passing additional props', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={actions}
-            items={items}
-            title={titleText}
+            actions={ACTIONS}
+            items={ITEMS}
+            title={TITLE_TEXT}
             data-test="foo"
         />
     );
@@ -117,9 +117,9 @@ test('passing additional CSS classes', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={actions}
-            items={items}
-            title={titleText}
+            actions={ACTIONS}
+            items={ITEMS}
+            title={TITLE_TEXT}
             className="foo"
         />
     );

package/src/components/{summary-card/summary-card.tsx → SummaryCard/SummaryCard.tsx}

@@ -1,5 +1,5 @@
-import SummaryList, { Action } from "../summary-list/summary-list";
-import WrapperTag from "../../common/wrapper-tag";
+import SummaryList, { Action } from "../SummaryList/SummaryList";
+import WrapperTag from "../../common/WrapperTag";
 
 function convertToSlug(string: string) {
     return string.toLowerCase()
@@ -10,7 +10,7 @@ function convertToSlug(string: string) {
 const SummaryCard: React.FC<SGDS.Component.SummaryCard> = ({
     actions,
     className,
-    headerLevel = 'h3',
+    headingLevel = 'h3',
     items,
     title,
     ...props
@@ -29,7 +29,7 @@ const SummaryCard: React.FC<SGDS.Component.SummaryCard> = ({
                 <WrapperTag
                     className="ds_summary-card__header-title"
                     id={describedById}
-                    tagName={headerLevel}
+                    tagName={headingLevel}
                 >{title}</WrapperTag>
 
                 <ul className="ds_summary-card__actions-list">

package/src/components/{summary-list/summary-list.test.tsx → SummaryList/SummaryList.test.tsx}

@@ -1,10 +1,10 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import SummaryList, { Item, Action, Answer } from './summary-list';
+import SummaryList, { Item, Action, Answer } from './SummaryList';
 
-const onClickFn = vi.fn();
+const ONCLICK_FUNCTION = vi.fn();
 
-const items = [
+const SUMMARY_ITEMS = [
     {
         title: 'Name',
         value: 'Jane Smith',
@@ -15,7 +15,7 @@ const items = [
             },
             {
                 title: 'Delete',
-                onclick: onClickFn
+                onclick: ONCLICK_FUNCTION
             }
         ]
     },
@@ -50,7 +50,7 @@ const items = [
 
 test('summary list renders correctly', () => {
     render(
-        <SummaryList items={items} />
+        <SummaryList items={SUMMARY_ITEMS} />
     );
 
     const summaryList = screen.getAllByRole('list')[0];
@@ -58,12 +58,12 @@ test('summary list renders correctly', () => {
 
     expect(summaryList).toHaveClass('ds_summary-list');
     expect(summaryList.tagName).toEqual('OL');
-    expect(summaryListItems.length).toEqual(items.length);
+    expect(summaryListItems.length).toEqual(SUMMARY_ITEMS.length);
 });
 
 test('summary list without border', () => {
     render(
-        <SummaryList noBorder items={items} />
+        <SummaryList noBorder items={SUMMARY_ITEMS} />
     );
 
     const summaryList = screen.getAllByRole('list')[0];
@@ -72,11 +72,13 @@ test('summary list without border', () => {
 });
 
 test('summary list item renders correctly', () => {
+    const DESCRIBEDBY_ID = 'q2-date-of-birth';
+
     render(
         <Item
-            actions={items[1].actions}
-            title={items[1].title}
-            value={items[1].value}
+            actions={SUMMARY_ITEMS[1].actions}
+            title={SUMMARY_ITEMS[1].title}
+            value={SUMMARY_ITEMS[1].value}
         />
     );
 
@@ -86,13 +88,11 @@ test('summary list item renders correctly', () => {
     const answer = value?.children[0];
     const actions = item.querySelector('.ds_summary-list__actions');
 
-    const describedById = 'q2-date-of-birth';
-
     expect(item).toHaveClass('ds_summary-list__item');
 
     expect(key?.tagName).toEqual('SPAN');
     expect(key?.textContent).toEqual('Date of birth');
-    expect(key).toHaveAttribute('id', describedById);
+    expect(key).toHaveAttribute('id', DESCRIBEDBY_ID);
 
     expect(value?.tagName).toEqual('SPAN');
 
@@ -101,15 +101,15 @@ test('summary list item renders correctly', () => {
 
     expect(actions?.tagName).toEqual('DIV');
 
-    expect(actions?.querySelector('.ds_link')).toHaveAttribute('aria-describedby', describedById);
+    expect(actions?.querySelector('.ds_link')).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
 });
 
 test('summary list item with multiple values', () => {
     render(
         <Item
-            actions={items[3].actions}
-            title={items[3].title}
-            value={items[3].value}
+            actions={SUMMARY_ITEMS[3].actions}
+            title={SUMMARY_ITEMS[3].title}
+            value={SUMMARY_ITEMS[3].value}
         />
     );
 
@@ -121,17 +121,17 @@ test('summary list item with multiple values', () => {
     expect(valueList).toHaveClass('ds_no-bullets');
     expect(valueList?.tagName).toEqual('UL');
 
-    expect(valueListItems?.length).toEqual(items[3].value.length);
+    expect(valueListItems?.length).toEqual(SUMMARY_ITEMS[3].value.length);
 
     expect(valueListItems[0].tagName).toEqual('LI');
-    expect(valueListItems[0].innerHTML).toEqual(`<q class="ds_summary-list__answer">${items[3].value[0]}</q>`);
+    expect(valueListItems[0].innerHTML).toEqual(`<q class="ds_summary-list__answer">${SUMMARY_ITEMS[3].value[0]}</q>`);
 });
 
 test('summary list item with no value', () => {
     render(
         <Item
-            actions={items[3].actions}
-            title={items[3].title}
+            actions={SUMMARY_ITEMS[3].actions}
+            title={SUMMARY_ITEMS[3].title}
         />
     );
 
@@ -143,92 +143,91 @@ test('summary list item with no value', () => {
 });
 
 test('summary list item with multiple actions', () => {
-    const title = 'Name';
-    const value = 'Jane Smith';
-    const actions = [
+    const ITEM_TITLE = 'Name';
+    const ITEM_VALUE = 'Jane Smith';
+    const ITEM_ACTIONS = [
         {
             title: 'Change',
             href: '#foo'
         },
         {
             title: 'Delete',
-            onclick: onClickFn
+            onclick: ONCLICK_FUNCTION
         }
     ];
 
     render(
         <Item
-            actions={items[0].actions}
-            title={title}
-            value={value}
+            actions={SUMMARY_ITEMS[0].actions}
+            title={ITEM_TITLE}
+            value={ITEM_VALUE}
         />
     );
 
     const item = screen.getAllByRole('listitem')[0];
     const actionsElement = item.querySelector('.ds_summary-list__actions');
 
-    expect(actionsElement?.children.length).toEqual(actions.length);
-    expect(actionsElement?.children[0].textContent).toEqual(actions[0].title);
-    expect(actionsElement?.children[1].textContent).toEqual(actions[1].title);
+    expect(actionsElement?.children.length).toEqual(ITEM_ACTIONS.length);
+    expect(actionsElement?.children[0].textContent).toEqual(ITEM_ACTIONS[0].title);
+    expect(actionsElement?.children[1].textContent).toEqual(ITEM_ACTIONS[1].title);
 });
 
 test('button action', () => {
-    const describedById = 'q1-name';
-    const title = 'Name';
-    const href = undefined;
-    const onClick = onClickFn;
+    const DESCRIBEDBY_ID = 'q1-name';
+    const ACTION_TITLE = 'Name';
+    const ACTION_ONCLICK = ONCLICK_FUNCTION;
 
     render(
         <Action
-            describedby={describedById}
-            href={href}
-            onclick={onClick}
-            title={title}
+            describedby={DESCRIBEDBY_ID}
+            href={undefined}
+            onclick={ACTION_ONCLICK}
+            title={ACTION_TITLE}
         />
     );
 
     const action = screen.getByRole('button');
 
     expect(action).toHaveClass('ds_link');
-    expect(action).toHaveAttribute('aria-describedby', describedById);
+    expect(action).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
     expect(action).toHaveAttribute('type', 'button');
     expect(action).not.toHaveAttribute('href');
     expect(action.tagName).toEqual('BUTTON');
-    expect(action.textContent).toEqual(title);
+    expect(action.textContent).toEqual(ACTION_TITLE);
 
     fireEvent.click(action);
 
-    expect(onClickFn).toHaveBeenCalled();
+    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
 });
 
 test('link action', () => {
-    const describedById = 'q1-name';
-    const title = 'Name';
-    const href = "#foo"
-    const onClick = onClickFn;
+    const DESCRIBEDBY_ID = 'q1-name';
+    const ACTION_TITLE = 'Name';
+    const ACTION_HREF = "#foo"
+    const ACTION_ONCLICK = ONCLICK_FUNCTION;
 
     render(
         <Action
-            describedby={describedById}
-            href={href}
-            onclick={onClick}
-            title={title}
+            describedby={DESCRIBEDBY_ID}
+            href={ACTION_HREF}
+            onclick={ACTION_ONCLICK}
+            title={ACTION_TITLE}
         />
     );
 
     const action = screen.getByRole('link');
 
     expect(action).toHaveClass('ds_link');
-    expect(action).toHaveAttribute('aria-describedby', describedById);
-    expect(action).toHaveAttribute('href', href);
+    expect(action).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
+    expect(action).toHaveAttribute('href', ACTION_HREF);
     expect(action).not.toHaveAttribute('type');
     expect(action.tagName).toEqual('A');
-    expect(action.textContent).toEqual(title);
+    expect(action.textContent).toEqual(ACTION_TITLE);
 });
 
 test('multiline answer', () => {
     render(
-        <Answer value={items[2].value} />
+        <Answer value={SUMMARY_ITEMS[2].value} />
     );
 
     const answer = document.querySelector('.ds_summary-list__answer');
@@ -238,7 +237,7 @@ test('multiline answer', () => {
 
 test('passing additional props', () => {
     render(
-        <SummaryList data-test="foo" items={items} />
+        <SummaryList data-test="foo" items={SUMMARY_ITEMS} />
     );
 
     const summaryList = screen.getAllByRole('list')[0];
@@ -247,7 +246,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SummaryList className="foo" items={items} />
+        <SummaryList className="foo" items={SUMMARY_ITEMS} />
     );
 
     const summaryList = screen.getAllByRole('list')[0];

package/src/components/{summary-list/summary-list.tsx → SummaryList/SummaryList.tsx}

@@ -1,5 +1,5 @@
-import ConditionalWrapper from '../../common/conditional-wrapper';
-import WrapperTag from '../../common/wrapper-tag';
+import ConditionalWrapper from '../../common/ConditionalWrapper';
+import WrapperTag from '../../common/WrapperTag';
 
 function escapedNewLineToLineBreakTag (string: string) {
     if (typeof string === 'string') {

package/src/components/{table/table.test.tsx → Table/Table.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import Table from './table';
+import Table from './Table';
 
 test('table renders correctly', () => {
     render(
@@ -30,10 +30,10 @@ test('table renders correctly', () => {
 });
 
 test('table with smallscreen behaviour', () => {
-    const behaviour = 'scrolling';
+    const SMALL_SCREEN_BEHAVIOUR = 'scrolling';
 
     render(
-        <Table smallscreen={behaviour}>
+        <Table smallscreen={SMALL_SCREEN_BEHAVIOUR}>
             <caption>Public holidays in 2020</caption>
             <thead>
                 <tr>
@@ -54,7 +54,7 @@ test('table with smallscreen behaviour', () => {
 
     const table = screen.getByRole('table');
 
-    expect(table).toHaveAttribute('data-smallscreen', behaviour);
+    expect(table).toHaveAttribute('data-smallscreen', SMALL_SCREEN_BEHAVIOUR);
     expect(table.nodeName).toEqual('TABLE');
 });