@scottish-government/designsystem-react 0.6.0 → 0.7.1

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

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">