@scottish-government/designsystem-react 0.6.0 → 0.7.0

package/src/components/{select/select.test.tsx → Select/Select.test.tsx}

@@ -1,10 +1,10 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import Select from './select';
+import Select from './Select';
 
-const id = 'select-component';
-const labelText = 'choose a component';
-const options = [
+const SELECT_ID = 'select-component';
+const LABEL_TEXT = 'choose a component';
+const OPTIONS = [
     {
         text: 'Accordion',
         value: 'accordion'
@@ -22,9 +22,9 @@ const options = [
 test('select renders correctly', () => {
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
         />
     );
 
@@ -34,14 +34,14 @@ test('select renders correctly', () => {
     const selectArrow = select.nextElementSibling;
 
     expect(select).toHaveClass('ds_select');
-    expect(select.id).toEqual(id);
-    expect(select).toHaveAttribute('name', id);
+    expect(select.id).toEqual(SELECT_ID);
+    expect(select).toHaveAttribute('name', SELECT_ID);
 
     expect(selectWrapper).toHaveClass('ds_select-wrapper');
     expect(selectWrapper?.tagName).toEqual('DIV');
 
     expect(label).toHaveClass('ds_label');
-    expect(label).toHaveAttribute('for', id);
+    expect(label).toHaveAttribute('for', SELECT_ID);
 
     expect(selectArrow).toHaveClass('ds_select-arrow');
     expect(selectArrow).toHaveAttribute('aria-hidden');
@@ -49,34 +49,34 @@ test('select renders correctly', () => {
 });
 
 test('select with width', () => {
-    const width = 'fixed-10';
+    const SELECTWIDTH = 'fixed-10';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            width={width}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            width={SELECTWIDTH}
         />
     );
 
     const selectWrapper = screen.getByRole('combobox').parentElement;
-    expect(selectWrapper).toHaveClass(`ds_input--${width}`);
+    expect(selectWrapper).toHaveClass(`ds_input--${SELECTWIDTH}`);
 });
 
 test('select with hint text', () => {
-    const hintText = 'hint text';
+    const HINT_TEXT = 'hint text';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            hintText={hintText}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            hintText={HINT_TEXT}
         />
     );
 
-    const hintTextEl = screen.getByText(hintText);
+    const hintTextEl = screen.getByText(HINT_TEXT);
     const select = screen.getByRole('combobox');
 
     expect(hintTextEl).toBeInTheDocument();
@@ -84,29 +84,30 @@ test('select with hint text', () => {
 });
 
 test('select with custom name', () => {
-    const name = 'foo';
+    const SELECT_NAME = 'foo';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            name={name}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            name={SELECT_NAME}
         />
     );
 
     const select = screen.getByRole('combobox');
-    expect(select).toHaveAttribute('name', name);
+    expect(select).toHaveAttribute('name', SELECT_NAME);
 });
 
 test('select with blur function', () => {
-    const onBlurFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
+
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            onBlur={onBlurFn}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            onBlur={ONBLUR_FUNCTION}
         />
     );
 
@@ -114,17 +115,18 @@ test('select with blur function', () => {
 
     fireEvent.blur(select);
 
-    expect(onBlurFn).toHaveBeenCalled();
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 });
 
 test('select with change function', () => {
-    const onChangeFn = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
+
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            onChange={onChangeFn}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            onChange={ONCHANGE_FUNCTION}
         />
     );
 
@@ -132,59 +134,60 @@ test('select with change function', () => {
 
     fireEvent.change(select, {target: {value: 'button'}});
 
-    expect(onChangeFn).toHaveBeenCalled();
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('select with placeholder option', () => {
-    const placeholder = 'foo';
+    const PLACEHOLDER_TEXT = 'foo';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            placeholder={placeholder}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            placeholder={PLACEHOLDER_TEXT}
         />
     );
 
     const select = screen.getByRole('combobox');
     const firstOption = select.childNodes[0];
-    expect(firstOption.textContent).toEqual(placeholder);
+    expect(firstOption.textContent).toEqual(PLACEHOLDER_TEXT);
     expect(firstOption).toHaveAttribute('value', '');
 });
 
 test('select with initial value', () => {
-    const initialValue = 'button';
+    const INITIAL_VALUE = 'button';
 
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
-            defaultValue={initialValue}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
+            defaultValue={INITIAL_VALUE}
         />
     );
 
     const select = screen.getByRole('combobox');
     const selectedOption = [].slice.call(select.childNodes).filter(childNode => childNode.selected)[0];
-    expect(selectedOption).toHaveAttribute('value', initialValue);
+    expect(selectedOption).toHaveAttribute('value', INITIAL_VALUE);
 });
 
 test('select with error message', () => {
-    const errorMessage = 'This is a required field';
+    const ERROR_MESSAGE_TEXT = 'This is a required field';
+
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
             error
-            errorMessage={errorMessage}
+            errorMessage={ERROR_MESSAGE_TEXT}
         />
     );
 
     const select = screen.getByRole('combobox');
     const selectWrapper = select.parentElement;
-    const errorMessageElement = screen.getByText(errorMessage);
+    const errorMessageElement = screen.getByText(ERROR_MESSAGE_TEXT);
 
     expect(selectWrapper).toHaveClass('ds_input--error')
     expect(select).toHaveAttribute('aria-describedby', errorMessageElement.id);
@@ -196,9 +199,9 @@ test('select with error message', () => {
 test('passing additional props', () => {
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
             data-test="foo"
         />
     );
@@ -211,9 +214,9 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <Select
-            id={id}
-            label={labelText}
-            options={options}
+            id={SELECT_ID}
+            label={LABEL_TEXT}
+            options={OPTIONS}
             className="foo"
         />
     );

package/src/components/{select/select.tsx → Select/Select.tsx}

@@ -1,5 +1,5 @@
-import ErrorMessage from '../error-message/error-message';
-import HintText from '../../common/hint-text';
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import HintText from '../../common/HintText';
 
 const Option: React.FC<SGDS.Component.Select.Option> = function ({
     text,

package/src/components/{sequential-navigation/sequential-navigation.test.tsx → SequentialNavigation/SequentialNavigation.test.tsx}

@@ -1,15 +1,15 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import SequentialNavigation from './sequential-navigation';
+import SequentialNavigation from './SequentialNavigation';
 
-const nextLinkObj = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
-const prevLinkObj = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
+const NEXT_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
+const PREVIOUS_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
 
 test('sequential navigation renders correctly', () => {
     render(
         <SequentialNavigation
-            next={nextLinkObj}
-            previous={prevLinkObj}
+            next={NEXT_LINK_OBJECT}
+            previous={PREVIOUS_LINK_OBJECT}
         />
     );
 
@@ -23,42 +23,42 @@ test('sequential navigation renders correctly', () => {
     expect(sequentialNavigation).toHaveAttribute('aria-label', 'Article navigation');
 
     expect(prevLink).toHaveClass('ds_sequential-nav__button', 'ds_sequential-nav__button--left');
-    expect(prevLink).toHaveAttribute('href', prevLinkObj.href);
-    expect(prevLink.textContent).toEqual(prevLinkObj.title);
+    expect(prevLink).toHaveAttribute('href', PREVIOUS_LINK_OBJECT.href);
+    expect(prevLink.textContent).toEqual(PREVIOUS_LINK_OBJECT.title);
     expect(prevLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--prev');
     expect(prevLinkWrapper?.tagName).toEqual('DIV');
     expect(prevLink.childNodes[0]).toHaveAttribute('data-label', 'Previous')
 
     expect(nextLink).toHaveClass('ds_sequential-nav__button', 'ds_sequential-nav__button--right');
-    expect(nextLink).toHaveAttribute('href', nextLinkObj.href);
-    expect(nextLink.textContent).toEqual(nextLinkObj.title);
+    expect(nextLink).toHaveAttribute('href', NEXT_LINK_OBJECT.href);
+    expect(nextLink.textContent).toEqual(NEXT_LINK_OBJECT.title);
     expect(nextLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--next');
     expect(nextLinkWrapper?.tagName).toEqual('DIV');
     expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next')
 });
 
 test('with custom aria label', () => {
-    const ariaLabel = 'My label';
+    const ARIA_LABEL = 'My label';
 
     render(
         <SequentialNavigation
-            ariaLabel={ariaLabel}
-            next={nextLinkObj}
-            previous={prevLinkObj}
+            ariaLabel={ARIA_LABEL}
+            next={NEXT_LINK_OBJECT}
+            previous={PREVIOUS_LINK_OBJECT}
         />
     );
 
     const sequentialNavigation = screen.getByRole('navigation');
 
-    expect(sequentialNavigation).toHaveAttribute('aria-label', ariaLabel);
+    expect(sequentialNavigation).toHaveAttribute('aria-label', ARIA_LABEL);
 });
 
 test('passing additional props', () => {
     render(
         <SequentialNavigation
             data-test="foo"
-            next={nextLinkObj}
-            previous={prevLinkObj}
+            next={NEXT_LINK_OBJECT}
+            previous={PREVIOUS_LINK_OBJECT}
         />
     );
 
@@ -70,8 +70,8 @@ test('passing additional CSS classes', () => {
     render(
         <SequentialNavigation
             className="foo"
-            next={nextLinkObj}
-            previous={prevLinkObj}
+            next={NEXT_LINK_OBJECT}
+            previous={PREVIOUS_LINK_OBJECT}
         />
     );
 

package/src/components/{side-navigation/side-navigation.test.tsx → SideNavigation/SideNavigation.test.tsx}

@@ -1,8 +1,8 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import SideNavigation, { List, Link } from './side-navigation';
+import SideNavigation, { List, Link } from './SideNavigation';
 
-const items = [
+const ITEMS = [
     {
         title: 'Apples',
         href: '#apples',
@@ -43,7 +43,7 @@ const items = [
 
 test('side navigation renders correctly', () => {
     render(
-        <SideNavigation items={items} />
+        <SideNavigation items={ITEMS} />
     );
 
     const sideNavigation = screen.getByRole('navigation');
@@ -124,7 +124,7 @@ test('side nav link with children', () => {
 });
 
 test('side nav list renders correctly', () => {
-    const items = [
+    const ITEMS = [
         {
             title: 'Bramley',
             href: '#bramley'
@@ -136,7 +136,7 @@ test('side nav list renders correctly', () => {
     ];
 
     render(
-        <List items={items}/>
+        <List items={ITEMS}/>
     );
 
     const list = screen.getByRole('list');
@@ -146,7 +146,7 @@ test('side nav list renders correctly', () => {
     expect(list).toHaveClass('ds_side-navigation__list');
     expect(list.tagName).toEqual('UL');
 
-    expect(list.children.length).toEqual(items.length);
+    expect(list.children.length).toEqual(ITEMS.length);
 
     // check properties of first link
     expect(item).toHaveClass('ds_side-navigation__item');
@@ -157,7 +157,7 @@ test('side nav list renders correctly', () => {
 
 test('passing additional props', () => {
     render(
-        <SideNavigation data-test="foo" items={items} />
+        <SideNavigation data-test="foo" items={ITEMS} />
     );
 
     const sideNavigation = screen.getByRole('navigation');
@@ -166,7 +166,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SideNavigation className="foo" items={items} />
+        <SideNavigation className="foo" items={ITEMS} />
     );
 
     const sideNavigation = screen.getByRole('navigation');

package/src/components/{site-header/site-header.test.tsx → SiteHeader/SiteHeader.test.tsx}

@@ -1,9 +1,9 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import SiteHeader from './site-header';
-import SiteNavigation from '../site-navigation/site-navigation';
-import SiteSearch from '../site-search/site-search';
-import PhaseBanner from '../phase-banner/phase-banner';
+import SiteHeader from './SiteHeader';
+import SiteNavigation from '../SiteNavigation/SiteNavigation';
+import SiteSearch from '../SiteSearch/SiteSearch';
+import PhaseBanner from '../PhaseBanner/PhaseBanner';
 
 test('site header renders correctly (maximal, testing markup structure)', () => {
     render(
@@ -67,14 +67,14 @@ test('site header renders correctly (maximal, testing markup structure)', () =>
 });
 
 test('site header branding: logo only, default URL', () => {
-    const logo = {
+    const LOGO = {
         alt: 'The Scottish Government',
         src: './scottish-government.svg'
     };
 
     render(
         <SiteHeader
-            logo={logo}
+            logo={LOGO}
         />
     );
 
@@ -87,24 +87,24 @@ test('site header branding: logo only, default URL', () => {
     expect(siteHeaderLogoLink).toHaveAttribute('href', '/');
 
     expect(siteHeaderLogoImg).toHaveClass('ds_site-branding__logo-image');
-    expect(siteHeaderLogoImg).toHaveAttribute('src', logo.src);
-    expect(siteHeaderLogoImg).toHaveAttribute('alt', logo.alt);
+    expect(siteHeaderLogoImg).toHaveAttribute('src', LOGO.src);
+    expect(siteHeaderLogoImg).toHaveAttribute('alt', LOGO.alt);
 
     expect(siteHeaderLogoImg.parentElement).toEqual(siteHeaderLogoLink);
     expect(siteHeaderLogoLink.parentElement).toEqual(siteHeaderBranding);
 });
 
 test('site header branding: logo and site title', () => {
-    const logo = {
+    const LOGO = {
         alt: 'The Scottish Government',
         src: './scottish-government.svg'
     };
-    const siteTitleContent = 'Design System React';
+    const SITE_TITLE_CONTENT = 'Design System React';
 
     render(
         <SiteHeader
-            logo={logo}
-            siteTitle={siteTitleContent}
+            logo={LOGO}
+            siteTitle={SITE_TITLE_CONTENT}
         />
     );
 
@@ -114,13 +114,13 @@ test('site header branding: logo and site title', () => {
     const siteTitle = siteHeader.querySelector('.ds_site-branding__title');
 
     expect(siteTitle?.tagName).toEqual('DIV');
-    expect(siteTitle?.textContent).toEqual(siteTitleContent);
+    expect(siteTitle?.textContent).toEqual(SITE_TITLE_CONTENT);
     expect(siteTitle?.parentElement).toEqual(siteHeaderBranding);
     expect(siteTitle?.previousElementSibling).toEqual(siteHeaderLogoLink);
 });
 
 test('site header branding: custom link URL', () => {
-    const logo = {
+    const LOGO = {
         alt: 'The Scottish Government',
         href: '/home.aspx',
         src: './scottish-government.svg'
@@ -128,18 +128,18 @@ test('site header branding: custom link URL', () => {
 
     render(
         <SiteHeader
-            logo={logo}
+            logo={LOGO}
         />
     );
 
     const siteHeader = screen.getByRole('banner');
     const siteHeaderLogoLink = within(siteHeader).getByRole('link');
 
-    expect(siteHeaderLogoLink).toHaveAttribute('href', logo.href);
+    expect(siteHeaderLogoLink).toHaveAttribute('href', LOGO.href);
 });
 
 test('site header with site search', () => {
-    const searchProps = {
+    const SEARCH_PROPS = {
         action: 'apple',
         autocompleteEndpoint: 'banana',
         autocompleteSuggestionMappingFunction: 'cucumber',
@@ -152,8 +152,8 @@ test('site header with site search', () => {
 
     render(
         <>
-            <SiteHeader siteSearch={searchProps} />
-            <SiteSearch data-testid="sitesearch" {...searchProps} />
+            <SiteHeader siteSearch={SEARCH_PROPS} />
+            <SiteSearch data-testid="sitesearch" {...SEARCH_PROPS} />
         </>
     );
 
@@ -165,7 +165,7 @@ test('site header with site search', () => {
 });
 
 test('site header with site navigation', () => {
-    const navigationItems = [
+    const NAVIGATION_ITEMS = [
         { title: 'About', href: '#about' },
         { title: 'Get started', href: '#get-started' },
         { title: 'Styles', href: '#styles' },
@@ -176,8 +176,8 @@ test('site header with site navigation', () => {
 
     render(
         <>
-            <SiteHeader navigationItems={navigationItems} />
-            <SiteNavigation data-testid="sitenavigation" items={navigationItems} />
+            <SiteHeader navigationItems={NAVIGATION_ITEMS} />
+            <SiteNavigation data-testid="sitenavigation" items={NAVIGATION_ITEMS} />
         </>
     );
 
@@ -212,15 +212,15 @@ test('site header with site navigation', () => {
 });
 
 test('site header with phase banner', () => {
-    const phaseBannerProps = {
+    const PHASE_BANNER_PROPS = {
         content: 'My content',
         phaseName: 'Beta'
     };
 
     render(
         <>
-            <SiteHeader phaseBanner={phaseBannerProps} />
-            <PhaseBanner data-testid="phasebanner" {...phaseBannerProps} />
+            <SiteHeader phaseBanner={PHASE_BANNER_PROPS} />
+            <PhaseBanner data-testid="phasebanner" {...PHASE_BANNER_PROPS} />
         </>
     );
 

package/src/components/{site-header/site-header.tsx → SiteHeader/SiteHeader.tsx}

@@ -2,10 +2,10 @@
 
 import { useEffect, useRef } from 'react';
 
-import Icon from '../../common/icon';
-import PhaseBanner from '../phase-banner/phase-banner';
-import SiteNavigation from "../site-navigation/site-navigation";
-import SiteSearch from "../site-search/site-search";
+import Icon from '../../common/Icon';
+import PhaseBanner from '../PhaseBanner/PhaseBanner';
+import SiteNavigation from "../SiteNavigation/SiteNavigation";
+import SiteSearch from "../SiteSearch/SiteSearch";
 
 // @ts-ignore
 import DSMobileMenu from '@scottish-government/design-system/src/components/site-navigation/site-navigation';

package/src/components/{site-navigation/site-navigation.test.tsx → SiteNavigation/SiteNavigation.test.tsx}

@@ -1,8 +1,8 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import SiteNavigation from './site-navigation';
+import SiteNavigation from './SiteNavigation';
 
-const items = [
+const ITEMS = [
     {title: 'About', href: '#about'},
     {title: 'Get started', href: '#get-started'},
     {title: 'Styles', href: '#styles'},
@@ -13,7 +13,7 @@ const items = [
 
 test('renders correctly', () => {
     render(
-        <SiteNavigation items={items}/>
+        <SiteNavigation items={ITEMS}/>
     );
 
     const nav = screen.getByRole('navigation');
@@ -29,7 +29,7 @@ test('renders correctly', () => {
     expect(list).toHaveClass('ds_site-navigation__list');
 
     // check items
-    expect(listItems.length).toEqual(items.length);
+    expect(listItems.length).toEqual(ITEMS.length);
 
     listItems.forEach((item, index) => {
         expect(item).toHaveClass('ds_site-navigation__item');
@@ -38,8 +38,8 @@ test('renders correctly', () => {
 
         expect(link).toHaveClass('ds_site-navigation__link');
         expect(link).not.toHaveClass('ds_current');
-        expect(link.textContent).toEqual(items[index].title);
-        expect(link).toHaveAttribute('href', items[index].href)
+        expect(link.textContent).toEqual(ITEMS[index].title);
+        expect(link).toHaveAttribute('href', ITEMS[index].href)
     });
 });
 
@@ -55,7 +55,7 @@ test('highlights current item', () => {
 
 test('passing additional props', () => {
     render(
-        <SiteNavigation data-test="foo" items={items}/>
+        <SiteNavigation data-test="foo" items={ITEMS}/>
     );
 
     const nav = screen.getByRole('navigation');
@@ -64,7 +64,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SiteNavigation className="foo" items={items}/>
+        <SiteNavigation className="foo" items={ITEMS}/>
     );
 
     const nav = screen.getByRole('navigation');