@scottish-government/designsystem-react 0.3.0 → 0.5.0

package/src/components/accordion/accordion.test.tsx

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import Accordion, { AccordionItem } from './accordion';
+import Accordion from './accordion';
 
 const id = 'my-accordion';
 const itemId = 'my-accordion-item';
@@ -13,20 +13,20 @@ test('accordion renders correctly', () => {
 
     render(
         <Accordion id={id} data-testid={id}>
-            <AccordionItem id="accordion-1" title="Healthcare for veterans">
+            <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>
                 <p>If you have a health condition that’s related to your service, you’re
                     entitled to priority treatment based on clinical need.</p>
-            </AccordionItem>
-            <AccordionItem open id="accordion-2" title="Employability for veterans">
+            </Accordion.Item>
+            <Accordion.Item open id="accordion-2" title="Employability for veterans">
                 <p>If you&apos;re looking for a job, there are several organisations that can help
                     you <a href="#accordion-link">find a job or develop new skills</a>.</p>
-            </AccordionItem>
-            <AccordionItem id="accordion-3" title="Housing for veterans">
+            </Accordion.Item>
+            <Accordion.Item id="accordion-3" title="Housing for veterans">
                 <p>If you need <a href="#accordion-link">help finding a place to live</a>{' '}
                     there&apos;s support specifically for veterans.</p>
-            </AccordionItem>
+            </Accordion.Item>
         </Accordion>
     );
 
@@ -40,31 +40,31 @@ test('accordion renders correctly', () => {
 
     expect(openAllButton).toHaveClass('ds_accordion__open-all', 'ds_link', 'js-open-all');
     expect(openAllButton).toHaveAttribute('type', 'button');
-    expect(openAllButton.textContent).toEqual('Open all sections');
-    expect(openAllButton.innerHTML).toEqual('Open all <span class="visually-hidden">sections</span>');
+    expect(openAllButton?.textContent).toEqual('Open all sections');
+    expect(openAllButton?.innerHTML).toEqual('Open all <span class="visually-hidden">sections</span>');
 
     expect(accordionItems.length).toEqual(3);
 
-    expect(firstAccordionTitle.tagName).toEqual(defaultHeaderLevel.toUpperCase());
+    expect(firstAccordionTitle?.tagName).toEqual(defaultHeaderLevel.toUpperCase());
 });
 
 test('accordion without open all', () => {
     render(
         <Accordion id={id} data-testid={id} hideOpenAll>
-            <AccordionItem id="accordion-1" title="Healthcare for veterans">
+            <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>
                 <p>If you have a health condition that’s related to your service, you’re
                     entitled to priority treatment based on clinical need.</p>
-            </AccordionItem>
-            <AccordionItem id="accordion-2" title="Employability for veterans">
+            </Accordion.Item>
+            <Accordion.Item id="accordion-2" title="Employability for veterans">
                 <p>If you&apos;re looking for a job, there are several organisations that can help
                     you <a href="#accordion-link">find a job or develop new skills</a>.</p>
-            </AccordionItem>
-            <AccordionItem id="accordion-3" title="Housing for veterans">
+            </Accordion.Item>
+            <Accordion.Item id="accordion-3" title="Housing for veterans">
                 <p>If you need <a href="#accordion-link">help finding a place to live</a>{' '}
                     there&apos;s support specifically for veterans.</p>
-            </AccordionItem>
+            </Accordion.Item>
         </Accordion>
     );
 
@@ -89,12 +89,12 @@ test('accordion with custom header level', () => {
 
     render(
         <Accordion id={id} data-testid={id} headerLevel={headerLevel}>
-            <AccordionItem id="accordion-1" title="Healthcare for veterans">
+            <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>
                 <p>If you have a health condition that’s related to your service, you’re
                     entitled to priority treatment based on clinical need.</p>
-            </AccordionItem>
+            </Accordion.Item>
         </Accordion>
     );
 
@@ -124,9 +124,9 @@ test('passing additional CSS classes', () => {
 
 test('accordion item renders correctly', () => {
     render(
-        <AccordionItem id={itemId} data-testid={itemId} title={titleText}>
+        <Accordion.Item id={itemId} data-testid={itemId} title={titleText}>
             <p>{contentText}</p>
-        </AccordionItem>
+        </Accordion.Item>
     );
 
     const accordionItem = screen.getByTestId(itemId);
@@ -134,7 +134,7 @@ test('accordion item renders correctly', () => {
     const header = document.querySelector('.ds_accordion-item__header');
     const title = header?.querySelector('.ds_accordion-item__title');
     const indicator = header?.querySelector('.ds_accordion-item__indicator');
-    const label = header.querySelector('.ds_accordion-item__label');
+    const label = header?.querySelector('.ds_accordion-item__label');
     const body = document.querySelector('.ds_accordion-item__body');
 
     expect(accordionItem).toHaveClass('ds_accordion-item');
@@ -143,39 +143,39 @@ test('accordion item renders correctly', () => {
     expect(input).toHaveClass('ds_accordion-item__control', 'visually-hidden')
     expect(input).toHaveAttribute('id', `${itemId}-control`);
 
-    expect(header.tagName).toEqual('DIV');
+    expect(header?.tagName).toEqual('DIV');
 
     expect(title).toHaveAttribute('id', `panel-${itemId}-heading`);
-    expect(title.tagName).toEqual('H3');
-    expect(title.textContent).toEqual(titleText);
+    expect(title?.tagName).toEqual('H3');
+    expect(title?.textContent).toEqual(titleText);
 
-    expect(indicator.tagName).toEqual('SPAN');
+    expect(indicator?.tagName).toEqual('SPAN');
 
     expect(label).toHaveAttribute('for', input.id);
-    expect(label.tagName).toEqual('LABEL');
-    expect(label.textContent).toEqual('Show this section');
+    expect(label?.tagName).toEqual('LABEL');
+    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>${contentText}</p>`);
 });
 
 test('accordion items without ID are given unique IDs', () => {
     render(
         <Accordion id={id} data-testid={id} hideOpenAll>
-            <AccordionItem data-testid="item1" title="Healthcare for veterans">
+            <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>
                 <p>If you have a health condition that’s related to your service, you’re
                     entitled to priority treatment based on clinical need.</p>
-            </AccordionItem>
-            <AccordionItem data-testid="item2" title="Employability for veterans">
+            </Accordion.Item>
+            <Accordion.Item data-testid="item2" title="Employability for veterans">
                 <p>If you&apos;re looking for a job, there are several organisations that can help
                     you <a href="#accordion-link">find a job or develop new skills</a>.</p>
-            </AccordionItem>
-            <AccordionItem data-testid="item3" title="Housing for veterans">
+            </Accordion.Item>
+            <Accordion.Item data-testid="item3" title="Housing for veterans">
                 <p>If you need <a href="#accordion-link">help finding a place to live</a>{' '}
                     there&apos;s support specifically for veterans.</p>
-            </AccordionItem>
+            </Accordion.Item>
         </Accordion>
     );
 
@@ -194,9 +194,9 @@ test('accordion items without ID are given unique IDs', () => {
 
 test('open accordion item', () => {
     render(
-        <AccordionItem open id={itemId} data-testid={itemId} title={titleText}>
+        <Accordion.Item open id={itemId} data-testid={itemId} title={titleText}>
             <p>{contentText}</p>
-        </AccordionItem>
+        </Accordion.Item>
     );
 
     const accordionItem = screen.getByTestId(itemId);
@@ -207,12 +207,12 @@ test('open accordion item', () => {
 
 test('passing additional props to accordion item', () => {
     render(
-        <AccordionItem id={itemId} data-testid={itemId} title="Healthcare for veterans" data-test="foo">
+        <Accordion.Item id={itemId} data-testid={itemId} 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
                 entitled to priority treatment based on clinical need.</p>
-        </AccordionItem>
+        </Accordion.Item>
     );
 
     const accordionItem = screen.getByTestId(itemId);
@@ -221,12 +221,12 @@ test('passing additional props to accordion item', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <AccordionItem id={itemId} data-testid={itemId} title="Healthcare for veterans" className="foo">
+        <Accordion.Item id={itemId} data-testid={itemId} 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
                 entitled to priority treatment based on clinical need.</p>
-        </AccordionItem>
+        </Accordion.Item>
     );
 
     const accordionItem = screen.getByTestId(itemId);

package/src/components/accordion/accordion.tsx

@@ -5,7 +5,7 @@ import DSAccordion from '@scottish-government/design-system/src/components/accor
 
 let accordionItemCounter = 0;
 
-export const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
+const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
     children,
     className,
     headerLevel = 'h3',
@@ -58,7 +58,8 @@ export const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
     );
 };
 
-const Accordion: React.FC<SGDS.Component.Accordion> = ({
+const Accordion: React.FC<SGDS.Component.Accordion>
+    & { Item: React.FC<SGDS.Component.Accordion.Item> } = ({
     children,
     className,
     headerLevel = 'h3',
@@ -112,5 +113,6 @@ const Accordion: React.FC<SGDS.Component.Accordion> = ({
 
 Accordion.displayName = 'Accordion';
 AccordionItem.displayName = 'AccordionItem';
+Accordion.Item = AccordionItem;
 
 export default Accordion;

package/src/components/aspect-box/aspect-box.test.tsx

@@ -10,7 +10,7 @@ test('aspect box renders correctly', () => {
     );
 
     const image = document.querySelector('img');
-    const imageContainer = image?.parentNode;
+    const imageContainer = image?.parentElement;
 
     expect(image).toHaveClass('ds_aspect-box__inner');
     expect(imageContainer).toHaveClass('ds_aspect-box');
@@ -24,7 +24,7 @@ test('1:1 ratio', () => {
     );
 
     const image = document.querySelector('img');
-    const imageContainer = image?.parentNode;
+    const imageContainer = image?.parentElement;
 
     expect(imageContainer).toHaveClass('ds_aspect-box--square');
 });
@@ -37,7 +37,7 @@ test('square ratio', () => {
     );
 
     const image = document.querySelector('img');
-    const imageContainer = image?.parentNode;
+    const imageContainer = image?.parentElement;
 
     expect(imageContainer).toHaveClass('ds_aspect-box--square');
 });
@@ -50,7 +50,7 @@ test('4:3 ratio', () => {
     );
 
     const image = document.querySelector('img');
-    const imageContainer = image?.parentNode;
+    const imageContainer = image?.parentElement;
 
     expect(imageContainer).toHaveClass('ds_aspect-box--43');
 });
@@ -63,7 +63,7 @@ test('21:9 ratio', () => {
     );
 
     const image = document.querySelector('img');
-    const imageContainer = image?.parentNode;
+    const imageContainer = image?.parentElement;
 
     expect(imageContainer).toHaveClass('ds_aspect-box--219');
 });
@@ -76,7 +76,7 @@ test('passing additional props', () => {
     );
 
     const image = document.querySelector('img');
-    const imageContainer = image?.parentNode;
+    const imageContainer = image?.parentElement;
     expect(imageContainer?.dataset.test).toEqual('foo');
 });
 
@@ -88,6 +88,6 @@ test('passing additional CSS classes', () => {
     );
 
     const image = document.querySelector('img');
-    const imageContainer = image?.parentNode;
+    const imageContainer = image?.parentElement;
     expect(imageContainer).toHaveClass('foo', 'ds_aspect-box');
 });

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -25,7 +25,6 @@ const Breadcrumb: React.FC<SGDS.Component.Breadcrumbs.Item> = ({
  * @returns {JSX.Element} - The element
  */
 const Breadcrumbs: React.FC<SGDS.Component.Breadcrumbs> = ({
-    className,
     hideLastItem,
     items,
     ...props
@@ -33,7 +32,6 @@ const Breadcrumbs: React.FC<SGDS.Component.Breadcrumbs> = ({
     return (
         <nav
             aria-label="Breadcrumb"
-            className={className}
             {...props}
         >
             <ol className="ds_breadcrumbs">

package/src/components/checkbox/checkbox.test.tsx

@@ -29,7 +29,7 @@ test('checkbox group renders correct children', () => {
     );
 
     const checkboxes = screen.getAllByRole('checkbox');
-    const groupContainer = checkboxes[0].parentNode.parentNode;
+    const groupContainer = checkboxes[0].parentElement?.parentElement;
     expect(checkboxes.length).toEqual(items.length);
     expect(groupContainer).toHaveClass('ds_checkboxes', 'ds_field-group');
 });
@@ -54,7 +54,7 @@ test('checkbox group passes all expected item params', () => {
     );
 
     const checkbox = screen.getByRole('checkbox');
-    const checkboxContainer = checkbox.parentNode;
+    const checkboxContainer = checkbox.parentElement;
     const hintText = screen.getByText('hint text');
 
     expect(checkbox).toHaveAttribute('data-behaviour', 'exclusive');
@@ -77,7 +77,7 @@ test('individual checkbox renders correctly', () => {
     );
 
     const checkbox = screen.getByRole('checkbox');
-    const checkboxContainer = checkbox.parentNode;
+    const checkboxContainer = checkbox.parentElement;
     const label = screen.getByText('Pension Credit');
 
     expect(checkboxContainer).toHaveClass('ds_checkbox');
@@ -107,12 +107,12 @@ test('exclusive checkbox', () => {
     );
 
     const checkbox = screen.getByRole('checkbox');
-    const separator = checkbox.parentNode?.previousSibling;
+    const separator = checkbox.parentElement?.previousSibling;
 
     expect(checkbox).toHaveAttribute('data-behaviour', 'exclusive');
     expect(separator).toBeInTheDocument();
     expect(separator).toHaveClass('ds_checkbox-separator');
-    expect(separator.textContent).toEqual('or');
+    expect(separator?.textContent).toEqual('or');
 });
 
 test('checkbox with blur fn', () => {
@@ -161,7 +161,7 @@ test('small checkbox', () => {
     );
 
     const checkbox = screen.getByRole('checkbox');
-    const checkboxContainer = checkbox.parentNode;
+    const checkboxContainer = checkbox.parentElement;
 
     expect(checkboxContainer).toHaveClass('ds_checkbox--small');
 });
@@ -175,7 +175,7 @@ test('passing additional props', () => {
     );
 
     const checkboxes = screen.getAllByRole('checkbox');
-    const groupContainer = checkboxes[0]?.parentNode?.parentNode;
+    const groupContainer = checkboxes[0]?.parentElement?.parentElement;
     expect(groupContainer?.dataset.test).toEqual('foo');
 });
 
@@ -188,6 +188,6 @@ test('passing additional CSS classes', () => {
     );
 
     const checkboxes = screen.getAllByRole('checkbox');
-    const groupContainer = checkboxes[0]?.parentNode?.parentNode;
+    const groupContainer = checkboxes[0]?.parentElement?.parentElement;
     expect(groupContainer).toHaveClass('foo', 'ds_checkboxes');
 });

package/src/components/confirmation-message/confirmation-message.test.tsx

@@ -52,7 +52,7 @@ test('passing additional props', () => {
         </ConfirmationMessage>
     );
 
-    const container = document.querySelector('.ds_confirmation-message');
+    const container = document.querySelector('.ds_confirmation-message') as HTMLElement;
     expect(container?.dataset.test).toEqual('foo');
 });
 

package/src/components/cookie-banner/cookie-banner.test.tsx

@@ -0,0 +1,25 @@
+/**
+ * Most of the functionality for CookieBanner is covered in AbstractNotificationBanner.
+ * Differences are specifically tested here.
+ */
+
+import { test, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import CookieBanner from './cookie-banner';
+
+const text = 'We need to tell you about something';
+
+/**
+ * CookieBanner has additional classNames
+ */
+test('cookie banner renders correctly', () => {
+    render(
+        <CookieBanner>
+            {text}
+        </CookieBanner>
+    );
+
+    const bannerContainer = document.querySelector('.ds_notification');
+
+    expect(bannerContainer).toHaveClass('ds_notification', 'ds_notification--large', 'ds_notification--cookie', 'js-initial-cookie-content');
+});

package/src/components/cookie-banner/cookie-banner.tsx

@@ -0,0 +1,36 @@
+
+import AbstractNotificationBanner from '../../common/abstract-notification-banner';
+// @ts-ignore
+import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';
+
+const CookieBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
+    & { Buttons?: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> } = ({
+    children,
+    className,
+    title,
+    ...props
+    }) => {
+
+    return (
+        <>
+            <AbstractNotificationBanner
+                className={[
+                    'ds_notification--large',
+                    'ds_notification--cookie',
+                    'js-initial-cookie-content',
+                    className
+                ].join(' ')}
+                data-module="ds-cookie-notification"
+                title={title}
+                {...props}
+            >
+                {children}
+            </AbstractNotificationBanner>
+        </>
+    );
+}
+
+CookieBanner.displayName = 'CookieBanner';
+CookieBanner.Buttons = AbstractNotificationBanner.Buttons;
+
+export default CookieBanner;

package/src/components/details/details.test.tsx

@@ -14,15 +14,15 @@ test('details renders correctly', () => {
     );
 
     const summaryElement = screen.getByText(summaryText);
-    const detailsElement = summaryElement.parentNode;
-    const textElement = summaryElement.nextSibling;
+    const detailsElement = summaryElement.parentElement;
+    const textElement = summaryElement.nextElementSibling;
 
     expect(detailsElement).toHaveClass('ds_details');
-    expect(detailsElement.tagName).toEqual('DETAILS');
+    expect(detailsElement?.tagName).toEqual('DETAILS');
     expect(summaryElement).toHaveClass('ds_details__summary');
-    expect(summaryElement.tagName).toEqual('SUMMARY');
+    expect(summaryElement?.tagName).toEqual('SUMMARY');
     expect(textElement).toHaveClass('ds_details__text');
-    expect(textElement.innerHTML).toEqual(content);
+    expect(textElement?.innerHTML).toEqual(content);
 });
 
 test('passing additional props', () => {
@@ -33,7 +33,7 @@ test('passing additional props', () => {
     )
 
     const summaryElement = screen.getByText(summaryText);
-    const detailsElement = summaryElement.parentNode;
+    const detailsElement = summaryElement.parentElement;
     expect(detailsElement?.dataset.test).toEqual('foo');
 });
 
@@ -45,6 +45,6 @@ test('passing additional CSS classes', () => {
     )
 
     const summaryElement = screen.getByText(summaryText);
-    const detailsElement = summaryElement.parentNode;
+    const detailsElement = summaryElement.parentElement;
     expect(detailsElement).toHaveClass('foo', 'ds_details');
 });

package/src/components/inset-text/inset-text.test.tsx

@@ -28,7 +28,7 @@ test('passing additional props', () => {
         </InsetText>
     )
 
-    const insetTextOuter = document.querySelector('.ds_inset-text');
+    const insetTextOuter = document.querySelector('.ds_inset-text') as HTMLElement;
     expect(insetTextOuter?.dataset.test).toEqual('foo');
 });
 

package/src/components/notification-banner/notification-banner.test.tsx

@@ -1,9 +1,17 @@
+/**
+ * Most of the functionality for NotificationBanner is covered in AbstractNotificationBanner.
+ * Differences are specifically tested here.
+ */
+
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import NotificationBanner from './notification-banner';
 
 const text = 'We need to tell you about something';
 
+/**
+ * NotificationBanner has the ds_reversed class
+ */
 test('notification banner renders correctly', () => {
     render(
         <NotificationBanner>
@@ -11,47 +19,14 @@ test('notification banner renders correctly', () => {
         </NotificationBanner>
     );
 
-    const bannerTitle = screen.getByRole('heading');
-    const bannerText = bannerTitle.nextSibling;
-    const bannerContent = bannerTitle.parentNode;
-    const bannerWrapper = bannerContent?.parentNode;
-    const bannerContainer = bannerWrapper?.parentNode;
-
-    expect(bannerTitle.textContent).toEqual('Information');
-    expect(bannerTitle.tagName).toEqual('H2');
-    expect(bannerTitle).toHaveClass('visually-hidden');
-
-    expect(bannerText).toHaveClass('ds_notification__text');
-    expect(bannerText.textContent).toEqual(text);
+    const bannerContainer = document.querySelector('.ds_notification');
 
-    expect(bannerContent).toHaveClass('ds_notification__content');
-    expect(bannerWrapper).toHaveClass('ds_wrapper');
     expect(bannerContainer).toHaveClass('ds_notification', 'ds_reversed');
 });
 
-test('notification banner with close button', () => {
-    render(
-        <NotificationBanner close>
-            {text}
-        </NotificationBanner>
-    );
-
-    const bannerTitle = screen.getByRole('heading');
-    const bannerContent = bannerTitle.parentNode;
-    const closeButton = screen.getByRole('button');
-    const closeButtonLabel = within(closeButton).getByText('Close this notification');
-    const closeButtonIcon = within(closeButton).getByRole('img', { hidden: true });
-
-    expect(bannerContent).toHaveClass('ds_notification__content--has-close');
-    expect(closeButton).toHaveClass('ds_notification__close', 'js-close-notification');
-    expect(closeButton).toHaveAttribute('type', 'button');
-
-    expect(closeButtonLabel).toBeInTheDocument();
-    expect(closeButtonLabel).toHaveClass('visually-hidden');
-
-    expect(closeButtonIcon).toHaveClass('ds_icon', 'ds_icon--fill');
-});
-
+/**
+ * NotificationBanner uses a boolean to toggle icon display, as only a single icon (PriorityHigh) is expected.
+ */
 test('notification banner with icon', () => {
     render(
         <NotificationBanner icon>
@@ -60,45 +35,10 @@ test('notification banner with icon', () => {
     );
 
     const bannerTitle = screen.getByRole('heading');
-    const bannerIconContainer = bannerTitle.nextSibling;
+    const bannerIconContainer = bannerTitle.nextElementSibling as HTMLElement;
     const bannerIcon = within(bannerIconContainer).getByRole('img', { hidden: true });
 
     expect(bannerIconContainer).toHaveClass('ds_notification__icon');
     expect(bannerIcon).toHaveClass('ds_icon');
     expect(bannerIcon).toHaveAttribute('aria-hidden');
 });
-
-test('notification banner with icon modifier classes', () => {
-    render(
-        <NotificationBanner icon iconColour iconInverse>
-            {text}
-        </NotificationBanner>
-    );
-
-    const bannerTitle = screen.getByRole('heading');
-    const bannerIconContainer = bannerTitle.nextSibling;
-
-    expect(bannerIconContainer).toHaveClass('ds_notification__icon', 'ds_notification__icon--inverse', 'ds_notification__icon--colour');
-});
-
-test('passing additional props', () => {
-    render(
-        <NotificationBanner data-test="foo">
-            {text}
-        </NotificationBanner>
-    )
-
-    const bannerContainer = document.querySelector('.ds_notification');
-    expect(bannerContainer?.dataset.test).toEqual('foo');
-});
-
-test('passing additional CSS classes', () => {
-    render(
-        <NotificationBanner className="foo">
-            {text}
-        </NotificationBanner>
-    )
-
-    const bannerContainer = document.querySelector('.ds_notification');
-    expect(bannerContainer).toHaveClass('foo', 'ds_notification');
-});