@scottish-government/designsystem-react 0.6.0 → 0.7.1

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>

package/src/components/{contents-nav/contents-nav.test.tsx → ContentsNav/ContentsNav.test.tsx}

@@ -1,9 +1,12 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import ContentsNav, {Link} from './contents-nav';
+import ContentsNav, {Link} from './ContentsNav';
+
+const ITEM_HREF = '#foo';
+const ITEM_TITLE = 'My content';
 
 test('contents nav renders correctly', () => {
-    const items = [
+    const ITEMS = [
         {
             title: 'Apply for Blue Badge',
             current: true
@@ -26,10 +29,10 @@ test('contents nav renders correctly', () => {
         }
     ];
 
-    const label = 'Pages in this guide';
+    const LABEL_TEXT = 'Pages in this guide';
 
     render(
-        <ContentsNav label={label} items={items} />
+        <ContentsNav label={LABEL_TEXT} items={ITEMS} />
     )
 
     const contentsNav = screen.getByRole('navigation');
@@ -37,33 +40,30 @@ test('contents nav renders correctly', () => {
     const contentsNavList = within(contentsNav).getByRole('list');
 
     expect(contentsNav).toHaveClass('ds_contents-nav');
-    expect(contentsNav.ariaLabel).toEqual(label);
+    expect(contentsNav.ariaLabel).toEqual(LABEL_TEXT);
     expect(contentsNav.tagName).toEqual('NAV');
     expect(contentsNavTitle).toHaveClass('ds_contents-nav__title');
     expect(contentsNavTitle.textContent).toEqual('Contents');
     expect(contentsNavList).toHaveClass('ds_contents-nav__list');
     expect(contentsNavList.tagName).toEqual('UL');
-    expect(contentsNavList.children.length).toEqual(items.length);
+    expect(contentsNavList.children.length).toEqual(ITEMS.length);
 });
 
 test('contents nav with custom title', () => {
-    const title = 'My title';
+    const TITLE_TEXT = 'My title';
 
     render(
-        <ContentsNav title={title} items={[]} />
+        <ContentsNav title={TITLE_TEXT} items={[]} />
     );
 
     const contentsNav = screen.getByRole('navigation');
     const contentsNavTitle = within(contentsNav).getByRole('heading');
-    expect(contentsNavTitle.textContent).toEqual(title);
+    expect(contentsNavTitle.textContent).toEqual(TITLE_TEXT);
 });
 
 test('contents nav item', () => {
-    const href = '#foo';
-    const content = 'My content';
-
     render(
-        <Link href={href} title={content} />
+        <Link href={ITEM_HREF} title={ITEM_TITLE} />
     );
 
     const listItem = screen.getByRole('listitem');
@@ -73,20 +73,17 @@ test('contents nav item', () => {
     expect(listItem.tagName).toEqual('LI');
     expect(link).toHaveClass('ds_contents-nav__link');
     expect(link.tagName).toEqual('A');
-    expect(link.textContent).toEqual(content);
-    expect(link).toHaveAttribute('href', href);
+    expect(link.textContent).toEqual(ITEM_TITLE);
+    expect(link).toHaveAttribute('href', ITEM_HREF);
 });
 
 test('contents nav current item with href', () => {
-    const href = '#foo';
-    const content = 'My content';
-
     render(
-        <Link current href={href} title={content} />
+        <Link current href={ITEM_HREF} title={ITEM_TITLE} />
     );
 
     const listItem = screen.getByRole('listitem');
-    const link = within(listItem).getByText(content);
+    const link = within(listItem).getByText(ITEM_TITLE);
 
     expect(listItem.ariaCurrent).toEqual('page');
     expect(link.tagName).toEqual('SPAN');
@@ -94,14 +91,12 @@ test('contents nav current item with href', () => {
 });
 
 test('contents nav current item without href', () => {
-    const content = 'My content';
-
     render(
-        <Link current title={content} />
+        <Link current title={ITEM_TITLE} />
     );
 
     const listItem = screen.getByRole('listitem');
-    const link = within(listItem).getByText(content);
+    const link = within(listItem).getByText(ITEM_TITLE);
 
     expect(listItem.ariaCurrent).toEqual('page');
     expect(link.tagName).toEqual('SPAN');
@@ -109,14 +104,12 @@ test('contents nav current item without href', () => {
 });
 
 test('contents nav item without href', () => {
-    const content = 'My content';
-
     render(
-        <Link title={content} />
+        <Link title={ITEM_TITLE} />
     );
 
     const listItem = screen.getByRole('listitem');
-    const link = within(listItem).getByText(content);
+    const link = within(listItem).getByText(ITEM_TITLE);
 
     expect(link.tagName).toEqual('SPAN');
     expect(link).not.toHaveClass('ds_current');

package/src/components/{contents-nav/contents-nav.tsx → ContentsNav/ContentsNav.tsx}

@@ -1,4 +1,4 @@
-import WrapperTag from '../../common/wrapper-tag';
+import WrapperTag from '../../common/WrapperTag';
 
 export const Link: React.FC<SGDS.Component.ContentsNav.Link> = ({
     current,

package/src/components/{cookie-banner/cookie-banner.test.tsx → CookieBanner/CookieBanner.test.tsx}

@@ -5,9 +5,9 @@
 
 import { test, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import CookieBanner from './cookie-banner';
+import CookieBanner from './CookieBanner';
 
-const text = 'We need to tell you about something';
+const BANNER_TEXT = 'We need to tell you about something';
 
 /**
  * CookieBanner has additional classNames
@@ -15,7 +15,7 @@ const text = 'We need to tell you about something';
 test('cookie banner renders correctly', () => {
     render(
         <CookieBanner>
-            {text}
+            {BANNER_TEXT}
         </CookieBanner>
     );
 

package/src/components/{cookie-banner/cookie-banner.tsx → CookieBanner/CookieBanner.tsx}

@@ -1,5 +1,5 @@
 
-import AbstractNotificationBanner from '../../common/abstract-notification-banner';
+import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
 // @ts-ignore
 import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';