@scottish-government/designsystem-react 0.5.1 → 0.7.0

package/src/common/{wrapper-tag.test.tsx → WrapperTag.test.tsx}

@@ -1,13 +1,13 @@
 import { test, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import WrapperTag from './wrapper-tag';
+import WrapperTag from './WrapperTag';
 
-const content = 'My content';
+const CONTENT = 'My content';
 
 test('wrapper tag renders correctly', () => {
     render(
         <WrapperTag id="foo">
-            {content}
+            {CONTENT}
         </WrapperTag>
     );
 
@@ -21,7 +21,7 @@ test('wrapper tag widh tag name', () => {
         <WrapperTag id="foo"
             tagName="section"
         >
-            {content}
+            {CONTENT}
         </WrapperTag>
     );
 
@@ -33,7 +33,7 @@ test('wrapper tag widh tag name', () => {
 test('passing additional props', () => {
     render(
         <WrapperTag id="foo" data-test="foo">
-            {content}
+            {CONTENT}
         </WrapperTag>
     );
 

package/src/components/{accordion/accordion.test.tsx → Accordion/Accordion.test.tsx}

@@ -1,18 +1,18 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Accordion from './accordion';
+import Accordion from './Accordion';
 
-const id = 'my-accordion';
-const itemId = 'my-accordion-item';
-const titleText = 'Healthcare for veterans';
-const contentText = `Veterans are entitled to the same healthcare as any citizen. And there
+const ACCORDION_ID = 'my-accordion';
+const ACCORDION_ITEM_ID = 'my-accordion-item';
+const TITLE_TEXT = 'Healthcare for veterans';
+const CONTENT_TEXT = `Veterans are entitled to the same healthcare as any citizen. And there
     are health care options and support available specifically for veterans`;
 
 test('accordion renders correctly', () => {
-    const defaultHeaderLevel = 'h3';
+    const DEFAULT_HEADING_LEVEL = 'h3';
 
     render(
-        <Accordion id={id} data-testid={id}>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID}>
             <Accordion.Item id="accordion-1" title="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
@@ -30,7 +30,7 @@ test('accordion renders correctly', () => {
         </Accordion>
     );
 
-    const accordion = screen.getByTestId(id);
+    const accordion = screen.getByTestId(ACCORDION_ID);
     const openAllButton = document.querySelector('.ds_accordion__open-all');
     const accordionItems = document.querySelectorAll('.ds_accordion-item');
     const firstAccordionTitle = document.querySelector('.ds_accordion-item__title');
@@ -45,12 +45,12 @@ test('accordion renders correctly', () => {
 
     expect(accordionItems.length).toEqual(3);
 
-    expect(firstAccordionTitle?.tagName).toEqual(defaultHeaderLevel.toUpperCase());
+    expect(firstAccordionTitle?.tagName).toEqual(DEFAULT_HEADING_LEVEL.toUpperCase());
 });
 
 test('accordion without open all', () => {
     render(
-        <Accordion id={id} data-testid={id} hideOpenAll>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} hideOpenAll>
             <Accordion.Item id="accordion-1" title="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
@@ -75,7 +75,7 @@ test('accordion without open all', () => {
 
 test('empty accordion has no open all', () => {
     render(
-        <Accordion id={id} data-testid={id} hideOpenAll>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} hideOpenAll>
         </Accordion>
     );
 
@@ -84,11 +84,11 @@ test('empty accordion has no open all', () => {
     expect(openAllButton).toBeNull();
 })
 
-test('accordion with custom header level', () => {
-    const headerLevel = 'h2';
+test('accordion with custom heading level', () => {
+    const HEADING_LEVEL = 'h2';
 
     render(
-        <Accordion id={id} data-testid={id} headerLevel={headerLevel}>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} headingLevel={HEADING_LEVEL}>
             <Accordion.Item id="accordion-1" title="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
@@ -99,37 +99,37 @@ test('accordion with custom header level', () => {
     );
 
     const firstAccordionTitle = document.querySelector('.ds_accordion-item__title');
-    expect(firstAccordionTitle?.tagName).toEqual(headerLevel.toUpperCase());
+    expect(firstAccordionTitle?.tagName).toEqual(HEADING_LEVEL.toUpperCase());
 });
 
 test('passing additional props to accordion', () => {
     render(
-        <Accordion id={id} data-testid={id} data-test="foo">
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} data-test="foo">
         </Accordion>
     );
 
-    const accordion = screen.getByTestId(id);
+    const accordion = screen.getByTestId(ACCORDION_ID);
     expect(accordion?.dataset.test).toEqual('foo');
 });
 
 test('passing additional CSS classes', () => {
     render(
-        <Accordion id={id} data-testid={id} className="foo">
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} className="foo">
         </Accordion>
     );
 
-    const accordion = screen.getByTestId(id);
+    const accordion = screen.getByTestId(ACCORDION_ID);
     expect(accordion).toHaveClass('foo', 'ds_accordion');
 });
 
 test('accordion item renders correctly', () => {
     render(
-        <Accordion.Item id={itemId} data-testid={itemId} title={titleText}>
-            <p>{contentText}</p>
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title={TITLE_TEXT}>
+            <p>{CONTENT_TEXT}</p>
         </Accordion.Item>
     );
 
-    const accordionItem = screen.getByTestId(itemId);
+    const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
     const input = within(accordionItem).getByRole('checkbox');
     const header = document.querySelector('.ds_accordion-item__header');
     const title = header?.querySelector('.ds_accordion-item__title');
@@ -138,16 +138,16 @@ test('accordion item renders correctly', () => {
     const body = document.querySelector('.ds_accordion-item__body');
 
     expect(accordionItem).toHaveClass('ds_accordion-item');
-    expect(accordionItem).toHaveAttribute('id', itemId);
+    expect(accordionItem).toHaveAttribute('id', ACCORDION_ITEM_ID);
 
     expect(input).toHaveClass('ds_accordion-item__control', 'visually-hidden')
-    expect(input).toHaveAttribute('id', `${itemId}-control`);
+    expect(input).toHaveAttribute('id', `${ACCORDION_ITEM_ID}-control`);
 
     expect(header?.tagName).toEqual('DIV');
 
-    expect(title).toHaveAttribute('id', `panel-${itemId}-heading`);
+    expect(title).toHaveAttribute('id', `panel-${ACCORDION_ITEM_ID}-heading`);
     expect(title?.tagName).toEqual('H3');
-    expect(title?.textContent).toEqual(titleText);
+    expect(title?.textContent).toEqual(TITLE_TEXT);
 
     expect(indicator?.tagName).toEqual('SPAN');
 
@@ -156,12 +156,12 @@ test('accordion item renders correctly', () => {
     expect(label?.textContent).toEqual('Show this section');
     expect(label?.children[0]).toHaveClass('visually-hidden');
 
-    expect(body?.innerHTML).toEqual(`<p>${contentText}</p>`);
+    expect(body?.innerHTML).toEqual(`<p>${CONTENT_TEXT}</p>`);
 });
 
 test('accordion items without ID are given unique IDs', () => {
     render(
-        <Accordion id={id} data-testid={id} hideOpenAll>
+        <Accordion id={ACCORDION_ID} data-testid={ACCORDION_ID} hideOpenAll>
             <Accordion.Item data-testid="item1" title="Healthcare for veterans">
                 <p>Veterans are entitled to the same healthcare as any citizen. And there
                     are health care options and support available specifically for veterans.</p>
@@ -194,12 +194,12 @@ test('accordion items without ID are given unique IDs', () => {
 
 test('open accordion item', () => {
     render(
-        <Accordion.Item open id={itemId} data-testid={itemId} title={titleText}>
-            <p>{contentText}</p>
+        <Accordion.Item open id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title={TITLE_TEXT}>
+            <p>{CONTENT_TEXT}</p>
         </Accordion.Item>
     );
 
-    const accordionItem = screen.getByTestId(itemId);
+    const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
     const input = within(accordionItem).getByRole('checkbox');
 
     expect(input).toHaveAttribute('checked');
@@ -207,7 +207,7 @@ test('open accordion item', () => {
 
 test('passing additional props to accordion item', () => {
     render(
-        <Accordion.Item id={itemId} data-testid={itemId} title="Healthcare for veterans" data-test="foo">
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title="Healthcare for veterans" data-test="foo">
             <p>Veterans are entitled to the same healthcare as any citizen. And there
                 are health care options and support available specifically for veterans.</p>
             <p>If you have a health condition that’s related to your service, you’re
@@ -215,13 +215,13 @@ test('passing additional props to accordion item', () => {
         </Accordion.Item>
     );
 
-    const accordionItem = screen.getByTestId(itemId);
+    const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
     expect(accordionItem?.dataset.test).toEqual('foo');
 });
 
 test('passing additional CSS classes', () => {
     render(
-        <Accordion.Item id={itemId} data-testid={itemId} title="Healthcare for veterans" className="foo">
+        <Accordion.Item id={ACCORDION_ITEM_ID} data-testid={ACCORDION_ITEM_ID} title="Healthcare for veterans" className="foo">
             <p>Veterans are entitled to the same healthcare as any citizen. And there
                 are health care options and support available specifically for veterans.</p>
             <p>If you have a health condition that’s related to your service, you’re
@@ -229,6 +229,6 @@ test('passing additional CSS classes', () => {
         </Accordion.Item>
     );
 
-    const accordionItem = screen.getByTestId(itemId);
+    const accordionItem = screen.getByTestId(ACCORDION_ITEM_ID);
     expect(accordionItem).toHaveClass('foo', 'ds_accordion-item');
 });

package/src/components/{accordion/accordion.tsx → Accordion/Accordion.tsx}

@@ -1,5 +1,5 @@
 import React, { Children, useEffect, useRef } from 'react';
-import WrapperTag from '../../common/wrapper-tag';
+import WrapperTag from '../../common/WrapperTag';
 // @ts-ignore
 import DSAccordion from '@scottish-government/design-system/src/components/accordion/accordion';
 
@@ -8,7 +8,7 @@ let accordionItemCounter = 0;
 const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
     children,
     className,
-    headerLevel = 'h3',
+    headingLevel = 'h3',
     id: rawId,
     open = false,
     title,
@@ -39,7 +39,7 @@ const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
                 <WrapperTag
                     id={`panel-${processedId}-heading`}
                     className="ds_accordion-item__title"
-                    tagName={headerLevel}
+                    tagName={headingLevel}
                 >
                     {title}
                 </WrapperTag>
@@ -62,7 +62,7 @@ const Accordion: React.FC<SGDS.Component.Accordion>
     & { Item: React.FC<SGDS.Component.Accordion.Item> } = ({
     children,
     className,
-    headerLevel = 'h3',
+    headingLevel = 'h3',
     hideOpenAll,
     ...props
 }) => {
@@ -79,7 +79,7 @@ const Accordion: React.FC<SGDS.Component.Accordion>
     }
 
     function processChild(child: any) {
-        return React.cloneElement(child, { headerLevel: headerLevel });
+        return React.cloneElement(child, { headingLevel: headingLevel });
     }
 
     return (

package/src/components/{aspect-box/aspect-box.test.tsx → AspectBox/AspectBox.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import AspectBox from './aspect-box';
+import { render } from '@testing-library/react';
+import AspectBox from './AspectBox';
 
 test('aspect box renders correctly', () => {
     render(

package/src/components/{back-to-top/back-to-top.test.tsx → BackToTop/BackToTop.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import BackToTop from './back-to-top';
+import BackToTop from './BackToTop';
 
 test('back to top renders correctly', () => {
     render(

package/src/components/{back-to-top/back-to-top.tsx → BackToTop/BackToTop.tsx}

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
+import Icon from '../../common/Icon';
 // @ts-ignore
 import DSBackToTop from '@scottish-government/design-system/src/components/back-to-top/back-to-top';
-import Icon from '../../common/icon';
 
 const BackToTop: React.FC<SGDS.Component.BackToTop> = ({
     className,

package/src/components/{breadcrumbs/breadcrumbs.test.tsx → Breadcrumbs/Breadcrumbs.test.tsx}

@@ -1,8 +1,8 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Breadcrumbs from './breadcrumbs';
+import Breadcrumbs from './Breadcrumbs';
 
-const items = [
+const ITEMS = [
     { href: 'home', title: 'Home' },
     { href: 'category', title: 'Category' },
     { title: 'Page' }
@@ -10,7 +10,7 @@ const items = [
 
 test('renders correctly', () => {
     render(
-        <Breadcrumbs items={items} />
+        <Breadcrumbs items={ITEMS} />
     );
 
     const nav = screen.getByRole('navigation');
@@ -25,7 +25,7 @@ test('renders correctly', () => {
     expect(list).toHaveClass('ds_breadcrumbs');
 
     // check items
-    expect(listItems.length).toEqual(items.length);
+    expect(listItems.length).toEqual(ITEMS.length);
 
     listItems.forEach((item, index) => {
         expect(item).toHaveClass('ds_breadcrumbs__item');
@@ -49,7 +49,7 @@ test('renders with last item hidden', () => {
     render(
         <Breadcrumbs
             hideLastItem
-            items={items}
+            items={ITEMS}
         />
     );
 
@@ -67,7 +67,7 @@ test('renders with last item hidden', () => {
 test('passing additional props', () => {
     render(
         <Breadcrumbs
-            items={items}
+            items={ITEMS}
             data-test="foo"
         />
     );
@@ -79,7 +79,7 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <Breadcrumbs
-            items={items}
+            items={ITEMS}
             className="foo"
         />
     );

package/src/components/{button/button.test.tsx → Button/Button.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Button from './button';
+import Button from './Button';
 
 test('renders correctly', () => {
     render(

package/src/components/{button/button.tsx → Button/Button.tsx}

@@ -1,6 +1,6 @@
-import Icon from '../../common/icon';
-import ScreenReaderText from '../../common/screen-reader-text';
-import WrapperTag from '../../common/wrapper-tag';
+import Icon from '../../common/Icon';
+import ScreenReaderText from '../../common/ScreenReaderText';
+import WrapperTag from '../../common/WrapperTag';
 
 const Button: React.FC<SGDS.Component.Button> = ({
     buttonStyle,

package/src/components/{checkbox/checkbox.test.tsx → Checkbox/Checkbox.test.tsx}

@@ -1,9 +1,9 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import CheckboxGroup, { Checkbox } from './checkbox';
+import CheckboxGroup, { Checkbox } from './Checkbox';
 
 test('checkbox group renders correct children', () => {
-    const items = [
+    const ITEMS = [
         {
             id: 'universal-credit',
             label: 'Universal Credit',
@@ -25,18 +25,18 @@ test('checkbox group renders correct children', () => {
     ];
 
     render(
-        <CheckboxGroup items={items} />
+        <CheckboxGroup items={ITEMS} />
     );
 
     const checkboxes = screen.getAllByRole('checkbox');
     const groupContainer = checkboxes[0].parentElement?.parentElement;
-    expect(checkboxes.length).toEqual(items.length);
+    expect(checkboxes.length).toEqual(ITEMS.length);
     expect(groupContainer).toHaveClass('ds_checkboxes', 'ds_field-group');
 });
 
 test('checkbox group passes all expected item params', () => {
-    const onBlurFn = vi.fn();
-    const onChangeFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
 
     render(
         <CheckboxGroup small items={[
@@ -46,8 +46,8 @@ test('checkbox group passes all expected item params', () => {
                 hintText: 'hint text',
                 id: 'myid',
                 label: 'label text',
-                onBlur: {onBlurFn},
-                onChange: {onChangeFn},
+                onBlur: {ONBLUR_FUNCTION},
+                onChange: {ONCHANGE_FUNCTION},
                 small: true
             }
         ]}/>
@@ -65,10 +65,10 @@ test('checkbox group passes all expected item params', () => {
     expect(checkbox).toHaveAttribute('aria-describedby', hintText.id);
 
     // fireEvent.blur(checkbox);
-    // expect(onBlurFn).toHaveBeenCalled();
+    // expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 
     // fireEvent.click(checkbox);
-    // expect(onChangeFn).toHaveBeenCalled();
+    // expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('individual checkbox renders correctly', () => {
@@ -116,31 +116,31 @@ test('exclusive checkbox', () => {
 });
 
 test('checkbox with blur fn', () => {
-    const onBlurFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
 
     render(
-        <Checkbox onBlur={onBlurFn} label="Pension Credit" id="pensioncredit" />
+        <Checkbox onBlur={ONBLUR_FUNCTION} label="Pension Credit" id="pensioncredit" />
     );
 
     const checkbox = screen.getByRole('checkbox');
 
     fireEvent.blur(checkbox);
 
-    expect(onBlurFn).toHaveBeenCalled();
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 });
 
 test('checkbox with change fn', () => {
-    const onChangeFn = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
 
     render(
-        <Checkbox onChange={onChangeFn} label="Pension Credit" id="pensioncredit" />
+        <Checkbox onChange={ONCHANGE_FUNCTION} label="Pension Credit" id="pensioncredit" />
     );
 
     const checkbox = screen.getByRole('checkbox');
 
     fireEvent.click(checkbox);
 
-    expect(onChangeFn).toHaveBeenCalled();
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('checkbox with hint text', () => {

package/src/components/{checkbox/checkbox.tsx → Checkbox/Checkbox.tsx}

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSCheckboxes from '@scottish-government/design-system/src/forms/checkbox/checkboxes'
-import HintText from '../../common/hint-text';
+import HintText from '../../common/HintText';
 
 export const Checkbox: React.FC<SGDS.Component.Checkbox> = ({
     checked,

package/src/components/{confirmation-message/confirmation-message.test.tsx → ConfirmationMessage/ConfirmationMessage.test.tsx}

@@ -1,27 +1,27 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import ConfirmationMessage from './confirmation-message';
+import ConfirmationMessage from './ConfirmationMessage';
 
-const titleString = 'Landlord added successfully';
+const TITLE_TEXT = 'Landlord added successfully';
 
 test('renders correctly with icon, title and message', () => {
     render(
-        <ConfirmationMessage title={titleString}>
+        <ConfirmationMessage title={TITLE_TEXT}>
             <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
         </ConfirmationMessage>
     );
 
     const container = document.querySelector('.ds_confirmation-message');
-    const header = screen.getByRole('heading');
+    const heading = screen.getByRole('heading');
 
     expect(container?.ariaLive).toEqual('polite');
 
-    expect(header.tagName).toEqual('H3');
-    expect(header.textContent).toEqual(titleString)
+    expect(heading.tagName).toEqual('H3');
+    expect(heading.textContent).toEqual(TITLE_TEXT)
 });
 
 test("does not render body when no children specified", () => {
-  const { container } = render(<ConfirmationMessage title={titleString} />);
+  const { container } = render(<ConfirmationMessage title={TITLE_TEXT} />);
 
   expect(
     container.querySelector(".ds_confirmation-message__body"),
@@ -29,25 +29,23 @@ test("does not render body when no children specified", () => {
 });
 
 test('renders confirmation message with custom aria live and custom heaer level', () => {
-    const titleString = 'Landlord added successfully';
-
     render(
-        <ConfirmationMessage headerLevel="h2" ariaLive="alert" title={titleString}>
+        <ConfirmationMessage headingLevel="h2" ariaLive="alert" title={TITLE_TEXT}>
             <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
         </ConfirmationMessage>
     );
 
     const container = document.querySelector('.ds_confirmation-message');
-    const header = screen.getByRole('heading');
+    const heading = screen.getByRole('heading');
 
     expect(container?.ariaLive).toEqual('alert');
 
-    expect(header.tagName).toEqual('H2');
+    expect(heading.tagName).toEqual('H2');
 });
 
 test('passing additional props', () => {
     render(
-        <ConfirmationMessage data-test="foo" title={titleString}>
+        <ConfirmationMessage data-test="foo" title={TITLE_TEXT}>
             <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
         </ConfirmationMessage>
     );
@@ -58,7 +56,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <ConfirmationMessage className="foo" title={titleString}>
+        <ConfirmationMessage className="foo" title={TITLE_TEXT}>
             <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
         </ConfirmationMessage>
     );

package/src/components/{confirmation-message/confirmation-message.tsx → ConfirmationMessage/ConfirmationMessage.tsx}

@@ -1,11 +1,11 @@
-import Icon from '../../common/icon';
-import WrapperTag from '../../common/wrapper-tag';
+import Icon from '../../common/Icon';
+import WrapperTag from '../../common/WrapperTag';
 
 const ConfirmationMessage: React.FC<SGDS.Component.ConfirmationMessage> = ({
     ariaLive = 'polite',
     children,
     className,
-    headerLevel = 'h3',
+    headingLevel = 'h3',
     title,
     ...props
 }) => {
@@ -22,7 +22,7 @@ const ConfirmationMessage: React.FC<SGDS.Component.ConfirmationMessage> = ({
 
             <WrapperTag
                 className="ds_confirmation-message__title"
-                tagName={headerLevel}
+                tagName={headingLevel}
             >
                 {title}
             </WrapperTag>