@scottish-government/designsystem-react 0.6.0 → 0.7.0

package/src/components/{error-message/error-message.test.tsx → ErrorMessage/ErrorMessage.test.tsx}

@@ -1,28 +1,28 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import ErrorMessage from './error-message';
+import ErrorMessage from './ErrorMessage';
 
-const errorText = 'Error message';
-const errorId = 'errormessage';
+const ERROR_TEXT = 'Error message';
+const ERROR_ID = 'errormessage';
 
 test('error message renders correctly', () => {
 
     render(
-        <ErrorMessage text={errorText} id={errorId}/>
+        <ErrorMessage text={ERROR_TEXT} id={ERROR_ID}/>
     );
 
     const errorMessageElement = screen.getByRole('paragraph');
 
-    expect(errorMessageElement).toHaveAttribute('id', errorId);
+    expect(errorMessageElement).toHaveAttribute('id', ERROR_ID);
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
-    expect(errorMessageElement.textContent).toEqual(errorText);
+    expect(errorMessageElement.textContent).toEqual(ERROR_TEXT);
 });
 
 test('error message with HTML content', () => {
-    const errorId = 'errormessage';
+    const ERROR_ID = 'errormessage';
 
     render(
-        <ErrorMessage id={errorId}>hello <a href="#foo">world</a></ErrorMessage>
+        <ErrorMessage id={ERROR_ID}>hello <a href="#foo">world</a></ErrorMessage>
     );
 
     const errorMessageElement = screen.getByRole('paragraph');
@@ -32,7 +32,7 @@ test('error message with HTML content', () => {
 
 test('passing additional props', () => {
     render(
-        <ErrorMessage data-test="foo" text={errorText} id={errorId}/>
+        <ErrorMessage data-test="foo" text={ERROR_TEXT} id={ERROR_ID}/>
     )
 
     const errorMessageElement = screen.getByRole('paragraph');
@@ -41,7 +41,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <ErrorMessage className="foo" text={errorText} id={errorId}/>
+        <ErrorMessage className="foo" text={ERROR_TEXT} id={ERROR_ID}/>
     )
 
     const errorMessageElement = screen.getByRole('paragraph');

package/src/components/{error-summary/error-summary.test.tsx → ErrorSummary/ErrorSummary.test.tsx}

@@ -1,19 +1,18 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import ErrorSummary from './error-summary';
-import { title } from 'process';
+import ErrorSummary from './ErrorSummary';
 
-const errors = [
+const ERRORS = [
     { fragmentId: 'did-resolve', title: 'Did this resolve your issue?' },
     { fragmentId: 'what-topics', title: 'What topics are you interested in?' },
     { fragmentId: 'more-detail', title: 'Please provide more detail' }
 ];
 
 test('error summary renders correctly', () => {
-    const titleId = 'error-summary-title';
+    const TITLE_ID = 'error-summary-title';
 
     render(
-        <ErrorSummary data-testid="errorsummary" errors={errors} />
+        <ErrorSummary data-testid="errorsummary" errors={ERRORS} />
     );
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -28,30 +27,30 @@ test('error summary renders correctly', () => {
     expect(errorSummaryElement.tagName).toEqual('DIV');
 
     expect(errorSummaryTitle).toHaveClass('ds_error-summary__title');
-    expect(errorSummaryTitle).toHaveAttribute('id', titleId);
+    expect(errorSummaryTitle).toHaveAttribute('id', TITLE_ID);
     expect(errorSummaryTitle.tagName).toEqual('H2');
     expect(errorSummaryTitle.textContent).toEqual('There is a problem');
 
     expect(errorSummaryList).toHaveClass('ds_error-summary__list');
     expect(errorSummaryList.tagName).toEqual('UL');
 
-    expect(errorSummaryItems.length).toEqual(errors.length);
+    expect(errorSummaryItems.length).toEqual(ERRORS.length);
 
-    expect(errorSummaryLink1).toHaveAttribute('href', `#${errors[0].fragmentId}`);
-    expect(errorSummaryLink1.textContent).toEqual(errors[0].title);
+    expect(errorSummaryLink1).toHaveAttribute('href', `#${ERRORS[0].fragmentId}`);
+    expect(errorSummaryLink1.textContent).toEqual(ERRORS[0].title);
 });
 
 test('error summary with custom title', () => {
-    const title = 'Foo';
+    const TITLE_TEXT = 'Foo';
 
     render(
-        <ErrorSummary data-testid="errorsummary" errors={errors} title={title} />
+        <ErrorSummary data-testid="errorsummary" errors={ERRORS} title={TITLE_TEXT} />
     );
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
     const errorSummaryTitle = within(errorSummaryElement).getByRole('heading');
 
-    expect(errorSummaryTitle.textContent).toEqual(title);
+    expect(errorSummaryTitle.textContent).toEqual(TITLE_TEXT);
 });
 
 test('error summary with no errors (empty array) should not display', () => {
@@ -89,7 +88,7 @@ test('error sumary item with no link', () => {
 
 test('passing additional props', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" errors={errors} data-test="foo" />
+        <ErrorSummary data-testid="errorsummary" errors={ERRORS} data-test="foo" />
     )
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -98,7 +97,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" errors={errors} className="foo" />
+        <ErrorSummary data-testid="errorsummary" errors={ERRORS} className="foo" />
     )
 
     const errorSummaryElement = screen.getByTestId('errorsummary');

package/src/components/{error-summary/error-summary.tsx → ErrorSummary/ErrorSummary.tsx}

@@ -1,4 +1,4 @@
-import ConditionalWrapper from '../../common/conditional-wrapper';
+import ConditionalWrapper from '../../common/ConditionalWrapper';
 
 const Error: React.FC<SGDS.Component.ErrorSummary.Error> = ({
     fragmentId,

package/src/components/{file-download/file-download.test.tsx → FileDownload/FileDownload.test.tsx}

@@ -1,13 +1,13 @@
 import { test, expect } from 'vitest';
 import { screen, render } from '@testing-library/react';
-import FileDownload from './file-download';
+import FileDownload from './FileDownload';
 
-const title = 'Scotland\'s Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive';
-const fileUrl = 'my-file.file';
+const FILE_TITLE = 'Scotland\'s Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive';
+const FILE_URL = 'my-file.file';
 
 test('inset text renders correctly', () => {
     render(
-        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const fileDownload = screen.getByTestId('file-download');
@@ -26,7 +26,7 @@ test('inset text renders correctly', () => {
     expect(thumbnailLink).toHaveClass('ds_file-download__thumbnail-link');
     expect(thumbnailLink).toHaveAttribute('aria-hidden', 'true');
     expect(thumbnailLink).toHaveAttribute('tabindex', '-1');
-    expect(thumbnailLink).toHaveAttribute('href', fileUrl);
+    expect(thumbnailLink).toHaveAttribute('href', FILE_URL);
     expect(thumbnailLink?.tagName).toEqual('A');
 
     expect(thumbnailContainer).toHaveClass('ds_file-download__thumbnail');
@@ -38,14 +38,14 @@ test('inset text renders correctly', () => {
     expect(contentContainer?.parentElement).toEqual(fileDownload);
 
     expect(fileLink).toHaveClass('ds_file-download__title');
-    expect(fileLink).toHaveAttribute('href', fileUrl);
+    expect(fileLink).toHaveAttribute('href', FILE_URL);
     expect(fileLink?.tagName).toEqual('A');
-    expect(fileLink?.textContent).toEqual(title);
+    expect(fileLink?.textContent).toEqual(FILE_TITLE);
 });
 
 test('highlighted file download', () => {
     render(
-        <FileDownload highlighted fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload highlighted fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const fileDownload = screen.getByTestId('file-download');
@@ -58,25 +58,25 @@ test('highlighted file download', () => {
 // });
 
 test('file download with cover image', () => {
-    const coverUrl = 'my-image.png';
+    const COVER_URL = 'my-image.png';
 
     render(
-        <FileDownload cover={coverUrl} fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload cover={COVER_URL} fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const thumbnailImage = screen.getByRole('presentation', {hidden: true});
 
     expect(thumbnailImage).toHaveClass('ds_file-download__thumbnail-image');
     expect(thumbnailImage).toHaveAttribute('alt', '');
-    expect(thumbnailImage).toHaveAttribute('src', coverUrl);
+    expect(thumbnailImage).toHaveAttribute('src', COVER_URL);
     expect(thumbnailImage.tagName).toEqual('IMG');
 });
 
 test('file download with file size', () => {
-    const fileSize = '1.2 MB';
+    const FILE_SIZE = '1.2 MB';
 
     render(
-        <FileDownload fileSize={fileSize} fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload fileSize={FILE_SIZE} fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const metadataKey = screen.getByRole('term');
@@ -98,15 +98,15 @@ test('file download with file size', () => {
     expect(metadataKey.textContent).toEqual('File size');
 
     expect(metadataValue).toHaveClass('ds_metadata__value');
-    expect(metadataValue.textContent).toEqual(fileSize);
+    expect(metadataValue.textContent).toEqual(FILE_SIZE);
     expect(metadataValue.previousElementSibling).toEqual(metadataKey);
 });
 
 test('file download with file type', () => {
-    const fileType = '5 page PDF';
+    const FILE_TYPE = '5 page PDF';
 
     render(
-        <FileDownload fileType={fileType} fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload fileType={FILE_TYPE} fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const metadataKey = screen.getByRole('term');
@@ -128,15 +128,15 @@ test('file download with file type', () => {
     expect(metadataKey.textContent).toEqual('File type');
 
     expect(metadataValue).toHaveClass('ds_metadata__value');
-    expect(metadataValue.textContent).toEqual(fileType + ',');
+    expect(metadataValue.textContent).toEqual(FILE_TYPE + ',');
     expect(metadataValue.previousElementSibling).toEqual(metadataKey);
 });
 
 test('association of metadata with file link', () => {
-    const fileSize = '1.2 MB';
+    const FILE_SIZE = '1.2 MB';
 
     render(
-        <FileDownload fileSize={fileSize} fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload fileSize={FILE_SIZE} fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const fileLink = screen.getByRole('link');
@@ -150,7 +150,7 @@ test('association of metadata with file link', () => {
 
 test('passing additional props', () => {
     render(
-        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" data-test="foo" />
+        <FileDownload fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" data-test="foo" />
     );
 
     const fileDownload = screen.getByTestId('file-download');
@@ -159,7 +159,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" className="foo" />
+        <FileDownload fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" className="foo" />
     );
 
     const fileDownload = screen.getByTestId('file-download');

package/src/components/{file-download/file-download.tsx → FileDownload/FileDownload.tsx}

@@ -1,5 +1,5 @@
 import { useId } from 'react';
-import FileIcon from '../../common/file-icon';
+import FileIcon from '../../common/FileIcon';
 
 const FileDownload: React.FC<SGDS.Component.FileDownload> = ({
     className,

package/src/components/{hide-this-page/hide-this-page.test.tsx → HideThisPage/HideThisPage.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import HideThisPage from './hide-this-page';
+import HideThisPage from './HideThisPage';
 
 test('hide this page renders correctly', () => {
     render(
@@ -39,16 +39,16 @@ test('hide this page renders correctly', () => {
 });
 
 test('custom escape URL', () => {
-    const escapeUrl = 'https://www.mygov.scot';
+    const ESCAPE_URL = 'https://www.mygov.scot';
 
     render(
-        <HideThisPage data-testid="htp" escapeUrl={escapeUrl} />
+        <HideThisPage data-testid="htp" escapeUrl={ESCAPE_URL} />
     );
 
     const hideThisPageElement = screen.getByTestId('htp');
     const link = within(hideThisPageElement).getByRole('link');
 
-    expect(link).toHaveAttribute('href', escapeUrl);
+    expect(link).toHaveAttribute('href', ESCAPE_URL);
 })
 
 test('passing additional props', () => {

package/src/components/{hide-this-page/hide-this-page.tsx → HideThisPage/HideThisPage.tsx}

@@ -13,10 +13,10 @@ const HideThisPage: React.FC<SGDS.Component.HideThisPage> = ({
         if (ref.current) {
             new DSHideThisPage().init();
 
-            const htpDivId = 'hide-this-page-instruction';
-            if (!document.getElementById(htpDivId)) {
+            const HIDE_THIS_PAGE_DIV_ID = 'hide-this-page-instruction';
+            if (!document.getElementById(HIDE_THIS_PAGE_DIV_ID)) {
                 const htpDiv = document.createElement('div');
-                htpDiv.id = htpDivId;
+                htpDiv.id = HIDE_THIS_PAGE_DIV_ID;
                 htpDiv.classList.add('visually-hidden');
                 htpDiv.classList.add('ds_hide-page');
                 htpDiv.innerHTML = '<p>To leave the page quickly, press the escape key.</p>';

package/src/components/{inset-text/inset-text.test.tsx → InsetText/InsetText.test.tsx}

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import InsetText from './inset-text';
+import InsetText from './InsetText';
 
 const text = `You may be able to apply for free school meals at the same
     time as you apply for the clothing grant.`;

package/src/components/{notification-banner/notification-banner.test.tsx → NotificationBanner/NotificationBanner.test.tsx}

@@ -5,9 +5,9 @@
 
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import NotificationBanner from './notification-banner';
+import NotificationBanner from './NotificationBanner';
 
-const text = 'We need to tell you about something';
+const BANNER_TEXT = 'We need to tell you about something';
 
 /**
  * NotificationBanner has the ds_reversed class
@@ -15,7 +15,7 @@ const text = 'We need to tell you about something';
 test('notification banner renders correctly', () => {
     render(
         <NotificationBanner>
-            {text}
+            {BANNER_TEXT}
         </NotificationBanner>
     );
 
@@ -30,7 +30,7 @@ test('notification banner renders correctly', () => {
 test('notification banner with icon', () => {
     render(
         <NotificationBanner icon>
-            {text}
+            {BANNER_TEXT}
         </NotificationBanner>
     );
 

package/src/components/{notification-banner/notification-banner.tsx → NotificationBanner/NotificationBanner.tsx}

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import AbstractNotificationBanner from '../../common/abstract-notification-banner';
+import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
 // @ts-ignore
 import DSNotificationBanner from '@scottish-government/design-system/src/components/notification-banner/notification-banner';
 

package/src/components/{notification-panel/notification-panel.test.tsx → NotificationPanel/NotificationPanel.test.tsx}

@@ -1,14 +1,14 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import NotificationPanel from './notification-panel';
+import NotificationPanel from './NotificationPanel';
 
-const headingText = 'Thank you';
-const text = 'Your Saltire Scholarship Application form has been successfully submitted.';
+const HEADING_TEXT = 'Thank you';
+const TEXT = 'Your Saltire Scholarship Application form has been successfully submitted.';
 
 test('notification banner renders correctly', () => {
     render(
-        <NotificationPanel title={headingText}>
-            {text}
+        <NotificationPanel title={HEADING_TEXT}>
+            {TEXT}
         </NotificationPanel>
     );
 
@@ -18,56 +18,57 @@ test('notification banner renders correctly', () => {
 
     expect(notificationPanel).toHaveClass('ds_notification-panel');
     expect(notificationPanelHeading).toHaveClass('ds_notification-panel__title');
-    expect(notificationPanelHeading.textContent).toEqual(headingText);
+    expect(notificationPanelHeading.textContent).toEqual(HEADING_TEXT);
     expect(notificationPanelHeading.tagName).toEqual('H1');
     expect(notificationPanelContent).toHaveClass('ds_notification-panel__content');
-    expect(notificationPanelContent?.textContent).toEqual(text);
+    expect(notificationPanelContent?.textContent).toEqual(TEXT);
 });
 
 test('notification banner with custom heading level', () => {
-    const headerLevel = 'h2';
+    const HEADING_LEVEL = 'h2';
 
     render(
-        <NotificationPanel headerLevel={headerLevel} title={headingText}>
-            {text}
+        <NotificationPanel headingLevel={HEADING_LEVEL} title={HEADING_TEXT}>
+            {TEXT}
         </NotificationPanel>
     );
 
     const notificationPanelHeading = screen.getByRole('heading');
-    expect(notificationPanelHeading.tagName).toEqual(headerLevel.toUpperCase());
+    expect(notificationPanelHeading.tagName).toEqual(HEADING_LEVEL.toUpperCase());
 });
 
 test('notification banner with aria-live', () => {
-    const ariaLive = 'polite';
+    const ARIA_LIVE = 'polite';
 
     render(
-        <NotificationPanel ariaLive={ariaLive} title={headingText}>
-            {text}
+        <NotificationPanel ariaLive={ARIA_LIVE} title={HEADING_TEXT}>
+            {TEXT}
         </NotificationPanel>
     );
 
     const notificationPanelHeading = screen.getByRole('heading');
     const notificationPanel = notificationPanelHeading.parentElement;
 
-    expect(notificationPanel).toHaveAttribute('aria-live', ariaLive);
+    expect(notificationPanel).toHaveAttribute('aria-live', ARIA_LIVE);
 });
 
 test('notification banner with nonsense heading level reverts to H1', () => {
-    const headerLevel = 'h2';
+    const HEADING_LEVEL = 'h2';
+
     render(
-        <NotificationPanel headerLevel={headerLevel} title={headingText}>
-            {text}
+        <NotificationPanel headingLevel={HEADING_LEVEL} title={HEADING_TEXT}>
+            {TEXT}
         </NotificationPanel>
     );
 
     const notificationPanelHeading = screen.getByRole('heading');
-    expect(notificationPanelHeading.tagName).toEqual(headerLevel.toUpperCase());
+    expect(notificationPanelHeading.tagName).toEqual(HEADING_LEVEL.toUpperCase());
 });
 
 test('passing additional props', () => {
     render(
-        <NotificationPanel title={headingText} data-test="foo">
-            {text}
+        <NotificationPanel title={HEADING_TEXT} data-test="foo">
+            {TEXT}
         </NotificationPanel>
     )
 
@@ -78,8 +79,8 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <NotificationPanel title={headingText} className="foo">
-            {text}
+        <NotificationPanel title={HEADING_TEXT} className="foo">
+            {TEXT}
         </NotificationPanel>
     )
 

package/src/components/{notification-panel/notification-panel.tsx → NotificationPanel/NotificationPanel.tsx}

@@ -1,10 +1,10 @@
-import WrapperTag from '../../common/wrapper-tag';
+import WrapperTag from '../../common/WrapperTag';
 
 const NotificationPanel: React.FC<SGDS.Component.NotificationPanel> = function ({
     ariaLive,
     children,
     className,
-    headerLevel = 'h1',
+    headingLevel = 'h1',
     title,
     ...props
 }) {
@@ -19,7 +19,7 @@ const NotificationPanel: React.FC<SGDS.Component.NotificationPanel> = function (
         >
             <WrapperTag
                 className="ds_notification-panel__title"
-                tagName={headerLevel}
+                tagName={headingLevel}
             >
                 {title}
             </WrapperTag>

package/src/components/{page-header/page-header.test.tsx → PageHeader/PageHeader.test.tsx}

@@ -1,13 +1,13 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import PageHeader from './page-header';
+import PageHeader from './PageHeader';
 
-const labelText = 'Guide';
-const titleText = 'Apply for or renew a disabled parking permit';
+const LABEL_TEXT = 'Guide';
+const TITLE_TEXT = 'Apply for or renew a disabled parking permit';
 
 test('notification banner renders correctly', () => {
     render(
-        <PageHeader label={labelText} title={titleText}/>
+        <PageHeader label={LABEL_TEXT} title={TITLE_TEXT}/>
     );
 
     const header = screen.getByRole('banner');
@@ -18,17 +18,17 @@ test('notification banner renders correctly', () => {
     expect(header.tagName).toEqual('HEADER');
 
     expect(label).toHaveClass('ds_page-header__label', 'ds_content-label');
-    expect(label?.textContent).toEqual(labelText);
+    expect(label?.textContent).toEqual(LABEL_TEXT);
     expect(label?.tagName).toEqual('SPAN');
 
     expect(title).toHaveClass('ds_page-header__title');
-    expect(title.textContent).toEqual(titleText);
+    expect(title.textContent).toEqual(TITLE_TEXT);
     expect(title.tagName).toEqual('H1');
 });
 
 test('header with no label', () => {
     render(
-        <PageHeader title={titleText}/>
+        <PageHeader title={TITLE_TEXT}/>
     );
 
     const header = screen.getByRole('banner');
@@ -40,7 +40,7 @@ test('header with no label', () => {
 
 test('passing additional props', () => {
     render(
-       <PageHeader data-test="foo" label={labelText} title={titleText}/>
+       <PageHeader data-test="foo" label={LABEL_TEXT} title={TITLE_TEXT}/>
     )
 
     const header = screen.getByRole('banner');
@@ -49,7 +49,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-       <PageHeader className="foo" label={labelText} title={titleText}/>
+       <PageHeader className="foo" label={LABEL_TEXT} title={TITLE_TEXT}/>
     )
 
     const header = screen.getByRole('banner');

package/src/components/{page-metadata/page-metadata.test.tsx → PageMetadata/PageMetadata.test.tsx}

@@ -1,15 +1,15 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import Metadata from './page-metadata';
+import Metadata from './PageMetadata';
 
-const name = 'Directorate';
-const value = 'Equality, Inclusion and Human Rights Directorate';
+const NAME = 'Directorate';
+const VALUE = 'Equality, Inclusion and Human Rights Directorate';
 
 test('metadata renders correctly', () => {
     render(
         <Metadata>
-            <Metadata.Item name={name}>
-                {value}
+            <Metadata.Item name={NAME}>
+                {VALUE}
             </Metadata.Item>
         </Metadata>
     );
@@ -22,16 +22,16 @@ test('metadata renders correctly', () => {
     expect(metadata).toBeInTheDocument();
     expect(metadataItem).toBeInTheDocument();
     expect(metadataItemKey).toHaveClass('ds_metadata__key');
-    expect(metadataItemKey.textContent).toEqual(name);
+    expect(metadataItemKey.textContent).toEqual(NAME);
     expect(metadataItemValue).toHaveClass('ds_metadata__value');
-    expect(metadataItemValue.textContent).toEqual(value);
+    expect(metadataItemValue.textContent).toEqual(VALUE);
 });
 
 test('inline metadata', () => {
     render(
         <Metadata inline>
-            <Metadata.Item name={name}>
-                {value}
+            <Metadata.Item name={NAME}>
+                {VALUE}
             </Metadata.Item>
         </Metadata>
     );