@scottish-government/designsystem-react 0.6.0 → 0.7.1

package/src/common/{abstract-notification-banner.test.tsx → AbstractNotificationBanner.test.tsx}

@@ -1,14 +1,14 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import AbstractNotificationBanner from './abstract-notification-banner';
-import Button from '../components/button/button';
+import AbstractNotificationBanner from './AbstractNotificationBanner';
+import Button from '../components/Button/Button';
 
-const text = 'We need to tell you about something';
+const NOTIFICATION_TEXT = 'We need to tell you about something';
 
 test('abstract notification banner renders correctly', () => {
     render(
         <AbstractNotificationBanner>
-            {text}
+            {NOTIFICATION_TEXT}
         </AbstractNotificationBanner>
     );
 
@@ -24,7 +24,7 @@ test('abstract notification banner renders correctly', () => {
     expect(bannerTitle).toHaveClass('visually-hidden');
 
     expect(bannerText).toHaveClass('ds_notification__text');
-    expect(bannerText?.textContent).toEqual(text);
+    expect(bannerText?.textContent).toEqual(NOTIFICATION_TEXT);
 
     expect(bannerContent).toHaveClass('ds_notification__content');
     expect(bannerWrapper).toHaveClass('ds_wrapper');
@@ -34,7 +34,7 @@ test('abstract notification banner renders correctly', () => {
 test('abstract notification banner with close button', () => {
     render(
         <AbstractNotificationBanner close>
-            {text}
+            {NOTIFICATION_TEXT}
         </AbstractNotificationBanner>
     );
 
@@ -57,7 +57,7 @@ test('abstract notification banner with close button', () => {
 test('abstract notification banner with icon', () => {
     render(
         <AbstractNotificationBanner icon="Search">
-            {text}
+            {NOTIFICATION_TEXT}
         </AbstractNotificationBanner>
     );
 
@@ -73,7 +73,7 @@ test('abstract notification banner with icon', () => {
 test('abstract notification banner with icon modifier classes', () => {
     render(
         <AbstractNotificationBanner icon="Search" iconColour iconInverse>
-            {text}
+            {NOTIFICATION_TEXT}
         </AbstractNotificationBanner>
     );
 
@@ -86,7 +86,7 @@ test('abstract notification banner with icon modifier classes', () => {
 test('abstract notification banner with buttons', () => {
     render(
         <AbstractNotificationBanner>
-            {text}
+            {NOTIFICATION_TEXT}
             <AbstractNotificationBanner.Buttons>
                 <Button data-testid="button">Foo</Button>
             </AbstractNotificationBanner.Buttons>
@@ -106,7 +106,7 @@ test('abstract notification banner with buttons', () => {
 test('passing additional props', () => {
     render(
         <AbstractNotificationBanner data-test="foo">
-            {text}
+            {NOTIFICATION_TEXT}
         </AbstractNotificationBanner>
     )
 
@@ -117,7 +117,7 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <AbstractNotificationBanner className="foo">
-            {text}
+            {NOTIFICATION_TEXT}
         </AbstractNotificationBanner>
     )
 

package/src/common/{abstract-notification-banner.tsx → AbstractNotificationBanner.tsx}

@@ -1,6 +1,6 @@
 import { Children, isValidElement } from 'react';
-import Icon from './icon';
-import ScreenReaderText from './screen-reader-text';
+import Icon from './Icon';
+import ScreenReaderText from './ScreenReaderText';
 
 const Buttons: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> = ({
     children

package/src/common/{conditional-wrapper.test.tsx → ConditionalWrapper.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import ConditionalWrapper from './conditional-wrapper';
+import ConditionalWrapper from './ConditionalWrapper';
 
 test('conditional wrapper true', () => {
     render(

package/src/common/{file-icon.test.tsx → FileIcon.test.tsx}

@@ -1,13 +1,13 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import FileIcon from './file-icon';
+import FileIcon from './FileIcon';
 
-const iconName = 'Generic';
+const ICON_NAME = 'Generic';
 
 test('file icon renders correctly', () => {
     render(
         <FileIcon data-testid="icon"
-            icon={iconName}
+            icon={ICON_NAME}
         />
     );
 
@@ -19,12 +19,12 @@ test('file icon renders correctly', () => {
 });
 
 test('file icon with class name', () => {
-    const className = 'foo';
+    const CLASSNAME = 'foo';
 
     render(
         <FileIcon data-testid="icon"
-            icon={iconName}
-            className={className}
+            icon={ICON_NAME}
+            className={CLASSNAME}
         />
     );
 
@@ -34,17 +34,17 @@ test('file icon with class name', () => {
 });
 
 test('file icon with aria label', () => {
-    const label = 'My icon';
+    const LABEL = 'My icon';
 
     render(
         <FileIcon data-testid="icon"
-            icon={iconName}
-            ariaLabel={label}
+            icon={ICON_NAME}
+            ariaLabel={LABEL}
         />
     );
 
     const icon = screen.getByRole('img', {hidden: true});
 
-    expect(icon).toHaveAttribute('aria-label', label);
+    expect(icon).toHaveAttribute('aria-label', LABEL);
     expect(icon).not.toHaveAttribute('aria-hidden');
 });

package/src/common/{hint-text.test.tsx → HintText.test.tsx}

@@ -1,43 +1,43 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import HintText from './hint-text';
+import HintText from './HintText';
 
-const id = 'hint-text';
-const content = 'Hint text';
+const HINT_TEXT_ID = 'hint-text';
+const HINT_TEXT_CONTENT = 'Hint text';
 
 test('hint test renders correctly', () => {
     render(
         <HintText data-testid="hint-text"
-            id={id}
-            text={content}
+            id={HINT_TEXT_ID}
+            text={HINT_TEXT_CONTENT}
         />
     );
 
     const hintText = screen.getByTestId('hint-text');
     expect(hintText).toHaveClass('ds_hint-text');
-    expect(hintText).toHaveAttribute('id', id);
+    expect(hintText).toHaveAttribute('id', HINT_TEXT_ID);
     expect(hintText.tagName).toEqual('P');
-    expect(hintText.textContent).toEqual(content);
+    expect(hintText.textContent).toEqual(HINT_TEXT_CONTENT);
 });
 
 test('hint test with children instead of text', () => {
     render(
         <HintText data-testid="hint-text"
-            id={id}
+            id={HINT_TEXT_ID}
         >
-            <span>{content}</span>
+            <span>{HINT_TEXT_CONTENT}</span>
         </HintText>
     );
 
     const hintText = screen.getByTestId('hint-text');
-    expect(hintText.innerHTML).toEqual(`<span>${content}</span>`);
+    expect(hintText.innerHTML).toEqual(`<span>${HINT_TEXT_CONTENT}</span>`);
 });
 
 test('passing additional props', () => {
     render(
         <HintText data-testid="hint-text"
-            id={id}
-            text={content}
+            id={HINT_TEXT_ID}
+            text={HINT_TEXT_CONTENT}
             data-test="foo"
         />
     );

package/src/common/{icon.test.tsx → Icon.test.tsx}

@@ -1,13 +1,13 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import Icon from './icon';
+import Icon from './Icon';
 
-const iconName = 'Search';
+const ICON_NAME = 'Search';
 
 test('icon renders correctly', () => {
     render(
         <Icon data-testid="icon"
-            icon={iconName}
+            icon={ICON_NAME}
         />
     );
 
@@ -20,24 +20,24 @@ test('icon renders correctly', () => {
 });
 
 test('icon with class name', () => {
-    const className = 'foo';
+    const CLASSNAME = 'foo';
 
     render(
         <Icon data-testid="icon"
-            icon={iconName}
-            className={className}
+            icon={ICON_NAME}
+            className={CLASSNAME}
         />
     );
 
     const icon = screen.getByRole('img', {hidden: true});
 
-    expect(icon).toHaveClass('foo', 'ds_icon');
+    expect(icon).toHaveClass(CLASSNAME);
 });
 
 test('icon with fill', () => {
     render(
         <Icon data-testid="icon"
-            icon={iconName}
+            icon={ICON_NAME}
             fill
         />
     );
@@ -48,32 +48,32 @@ test('icon with fill', () => {
 });
 
 test('icon with size', () => {
-    const size = 48;
+    const ICON_SIZE = 48;
 
     render(
         <Icon data-testid="icon"
-            icon={iconName}
-            iconSize={size}
+            icon={ICON_NAME}
+            iconSize={ICON_SIZE}
         />
     );
 
     const icon = screen.getByRole('img', {hidden: true});
 
-    expect(icon).toHaveClass(`ds_icon--${size}`);
+    expect(icon).toHaveClass(`ds_icon--${ICON_SIZE}`);
 });
 
 test('icon with aria label', () => {
-    const label = 'My icon';
+    const ARIA_LABEL = 'My icon';
 
     render(
         <Icon data-testid="icon"
-            icon={iconName}
-            ariaLabel={label}
+            icon={ICON_NAME}
+            ariaLabel={ARIA_LABEL}
         />
     );
 
     const icon = screen.getByRole('img', {hidden: true});
 
-    expect(icon).toHaveAttribute('aria-label', label);
+    expect(icon).toHaveAttribute('aria-label', ARIA_LABEL);
     expect(icon).not.toHaveAttribute('aria-hidden');
 });

package/src/common/{screen-reader-text.test.tsx → ScreenReaderText.test.tsx}

@@ -1,20 +1,20 @@
 import { test, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import ScreenReaderText from './screen-reader-text';
+import ScreenReaderText from './ScreenReaderText';
 
-const content = 'My content';
+const CONTENT = 'My content';
 
 test('screen reader text renders correctly', () => {
     render(
         <ScreenReaderText>
-            {content}
+            {CONTENT}
         </ScreenReaderText>
     );
 
     const srtext = document.querySelector('span');
 
     expect(srtext).toHaveClass('visually-hidden');
-    expect(srtext?.textContent).toEqual(content)
+    expect(srtext?.textContent).toEqual(CONTENT)
 });
 
 test('passing additional props', () => {
@@ -22,7 +22,7 @@ test('passing additional props', () => {
         <ScreenReaderText
             data-test="foo"
         >
-            {content}
+            {CONTENT}
         </ScreenReaderText>
     );
 

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,