@scottish-government/designsystem-react 0.6.0 → 0.7.1

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');
 });
 

package/src/components/{tabs/tabs.test.tsx → Tabs/Tabs.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Tabs from './tabs';
+import Tabs from './Tabs';
 import slugify from '../../utils/slugify';
 
 test('tab container renders correctly', () => {
@@ -29,7 +29,7 @@ test('tab container renders correctly', () => {
     expect(tabContainer.tagName).toEqual('DIV');
 
     expect(tabHeading).toHaveClass('ds_tabs__title');
-    // default header level
+    // default heading level
     expect(tabHeading.tagName).toEqual('H2');
     expect(tabHeading.parentElement).toEqual(tabContainer);
     // default ID-heading
@@ -83,10 +83,10 @@ test('non-bordered tabs', () => {
 });
 
 test('custom title', () => {
-    const title = 'My title';
+    const TABS_TITLE = 'My title';
 
     render(
-        <Tabs data-testid="tabcontainer" title={title}>
+        <Tabs data-testid="tabcontainer" title={TABS_TITLE}>
             <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
                 <div data-testid="tabpanel1content">Content one</div>
             </Tabs.Item>
@@ -101,14 +101,14 @@ test('custom title', () => {
     const tabHeading = within(tabContainer).getByRole('heading');
 
     expect(tabList).toHaveAttribute('aria-labelledby', tabHeading.id);
-    expect(tabHeading.textContent).toEqual(title)
+    expect(tabHeading.textContent).toEqual(TABS_TITLE)
 });
 
-test('custom base ID', () => {
-    const baseId = 'foo';
+test('custom heading level', () => {
+    const HEADING_LEVEL = 'h3';
 
     render(
-        <Tabs data-testid="tabcontainer" baseId={baseId}>
+        <Tabs data-testid="tabcontainer" headingLevel={HEADING_LEVEL}>
             <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
                 <div data-testid="tabpanel1content">Content one</div>
             </Tabs.Item>
@@ -121,34 +121,14 @@ test('custom base ID', () => {
     const tabContainer = screen.getByTestId('tabcontainer');
     const tabHeading = within(tabContainer).getByRole('heading');
 
-    expect(tabHeading).toHaveAttribute('id', `${baseId}-heading`);
-});
-
-test('custom header level', () => {
-    const headerLevel = 'h3';
-
-    render(
-        <Tabs data-testid="tabcontainer" headerLevel={headerLevel}>
-            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
-                <div data-testid="tabpanel1content">Content one</div>
-            </Tabs.Item>
-            <Tabs.Item tabLabel="Tab 2" data-testid="tabpanel2">
-                Content two
-            </Tabs.Item>
-        </Tabs>
-    );
-
-    const tabContainer = screen.getByTestId('tabcontainer');
-    const tabHeading = within(tabContainer).getByRole('heading');
-
-    expect(tabHeading.tagName).toEqual(headerLevel.toUpperCase());
+    expect(tabHeading.tagName).toEqual(HEADING_LEVEL.toUpperCase());
 });
 
 test('custom baseID', () => {
-    const baseId = 'myId';
+    const BASE_ID = 'myId';
 
     render(
-        <Tabs data-testid="tabcontainer" baseId={baseId}>
+        <Tabs data-testid="tabcontainer" baseId={BASE_ID}>
             <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
                 <div data-testid="tabpanel1content">Content one</div>
             </Tabs.Item>
@@ -164,23 +144,23 @@ test('custom baseID', () => {
     const tabPanelTwo = screen.getByTestId('tabpanel2');
 
     // default title slugified to part of the ID
-    expect(tabHeading).toHaveAttribute('id', `${baseId}-heading`);
+    expect(tabHeading).toHaveAttribute('id', `${BASE_ID}-heading`);
     // generated IDs using the slug of the tab title
-    expect(tabPanelOne).toHaveAttribute('id', `${baseId}-tab-1`);
-    expect(tabPanelTwo).toHaveAttribute('id', `${baseId}-tab-2`);
+    expect(tabPanelOne).toHaveAttribute('id', `${BASE_ID}-tab-1`);
+    expect(tabPanelTwo).toHaveAttribute('id', `${BASE_ID}-tab-2`);
 });
 
 test('tab with and without specific ID attribute', () => {
-    const baseId = 'foo'
-    const tabLabel = 'Tab 1';
-    const id = 'bar';
+    const BASE_ID = 'foo'
+    const TAB_LABEL = 'Tab 1';
+    const TAB_ID = 'bar';
 
     render(
-        <Tabs baseId={baseId}>
-            <Tabs.Item tabLabel={tabLabel} data-testid="tabpanel1">
+        <Tabs baseId={BASE_ID}>
+            <Tabs.Item tabLabel={TAB_LABEL} data-testid="tabpanel1">
                 <div data-testid="tabpanel1content">Content one</div>
             </Tabs.Item>
-            <Tabs.Item tabLabel="Tab 2" id={id} data-testid="tabpanel2">
+            <Tabs.Item tabLabel="Tab 2" id={TAB_ID} data-testid="tabpanel2">
                 <div data-testid="tabpanel1content">Content one</div>
             </Tabs.Item>
         </Tabs>
@@ -189,8 +169,8 @@ test('tab with and without specific ID attribute', () => {
     const tabPanelOne = screen.getByTestId('tabpanel1');
     const tabPanelTwo = screen.getByTestId('tabpanel2');
 
-    expect(tabPanelOne).toHaveAttribute('id', `${baseId}-${slugify(tabLabel)}`);
-    expect(tabPanelTwo).toHaveAttribute('id', id);
+    expect(tabPanelOne).toHaveAttribute('id', `${BASE_ID}-${slugify(TAB_LABEL)}`);
+    expect(tabPanelTwo).toHaveAttribute('id', TAB_ID);
 });
 
 test('with manual activation', () => {

package/src/components/{tabs/tabs.tsx → Tabs/Tabs.tsx}

@@ -1,5 +1,5 @@
 import React, { isValidElement, Children, useEffect, useRef } from 'react';
-import WrapperTag from '../../common/wrapper-tag';
+import WrapperTag from '../../common/WrapperTag';
 // @ts-ignore
 import DSTabs from '@scottish-government/design-system/src/components/tabs/tabs';
 import slugify from '../../utils/slugify';
@@ -44,7 +44,7 @@ const Tabs: React.FC<SGDS.Component.Tabs>
     bordered = true,
     children,
     className,
-    headerLevel = 'h2',
+    headingLevel = 'h2',
     manual = false,
     title = 'Contents',
     ...props
@@ -89,7 +89,7 @@ const Tabs: React.FC<SGDS.Component.Tabs>
             <WrapperTag
                 id={headingId}
                 className="ds_tabs__title"
-                tagName={headerLevel}
+                tagName={headingLevel}
             >
                 {title}
             </WrapperTag>

package/src/components/{tag/tag.test.tsx → Tag/Tag.test.tsx}

@@ -1,15 +1,15 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import Tag from './tag';
+import Tag from './Tag';
 
-const tagText = 'Beta';
+const TAG_TEXT = 'Beta';
 
 test('tag renders correctly', () => {
     render(
-        <Tag title={tagText}/>
+        <Tag title={TAG_TEXT}/>
     );
 
-    const tag = screen.getByText(tagText);
+    const tag = screen.getByText(TAG_TEXT);
 
     expect(tag).toHaveClass('ds_tag');
     expect(tag.nodeName).toEqual('SPAN');
@@ -17,29 +17,29 @@ test('tag renders correctly', () => {
 
 test('tag with custom colour', () => {
     render(
-        <Tag colour="red" title={tagText}/>
+        <Tag colour="red" title={TAG_TEXT}/>
     );
 
-    const tag = screen.getByText(tagText);
+    const tag = screen.getByText(TAG_TEXT);
 
     expect(tag).toHaveClass('ds_tag--red');
 });
 
 test('passing additional props', () => {
     render(
-        <Tag data-test="foo" title={tagText}/>
+        <Tag data-test="foo" title={TAG_TEXT}/>
     );
 
-    const tag = screen.getByText(tagText);
+    const tag = screen.getByText(TAG_TEXT);
     expect(tag?.dataset.test).toEqual('foo');
 });
 
 test('tag with additional CSS class', () => {
     render(
-        <Tag className="foo" title={tagText}/>
+        <Tag className="foo" title={TAG_TEXT}/>
     );
 
-    const tag = screen.getByText(tagText);
+    const tag = screen.getByText(TAG_TEXT);
 
     expect(tag).toHaveClass('foo', 'ds_tag');
 });