@scottish-government/designsystem-react 0.3.0-beta.0 → 0.4.0

package/src/common/abstract-notification-banner.test.tsx

@@ -0,0 +1,126 @@
+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';
+
+const text = 'We need to tell you about something';
+
+test('abstract notification banner renders correctly', () => {
+    render(
+        <AbstractNotificationBanner>
+            {text}
+        </AbstractNotificationBanner>
+    );
+
+    const bannerTitle = screen.getByRole('heading');
+    const bannerText = bannerTitle.nextElementSibling;
+    const bannerContent = bannerTitle.parentElement;
+    const bannerWrapper = bannerContent?.parentElement;
+    const bannerContainer = bannerWrapper?.parentElement;
+
+
+    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);
+
+    expect(bannerContent).toHaveClass('ds_notification__content');
+    expect(bannerWrapper).toHaveClass('ds_wrapper');
+    expect(bannerContainer).toHaveClass('ds_notification');
+});
+
+test('abstract notification banner with close button', () => {
+    render(
+        <AbstractNotificationBanner close>
+            {text}
+        </AbstractNotificationBanner>
+    );
+
+    const bannerTitle = screen.getByRole('heading');
+    const bannerContent = bannerTitle.parentElement;
+    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');
+});
+
+test('abstract notification banner with icon', () => {
+    render(
+        <AbstractNotificationBanner icon="Search">
+            {text}
+        </AbstractNotificationBanner>
+    );
+
+    const bannerTitle = screen.getByRole('heading');
+    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('abstract notification banner with icon modifier classes', () => {
+    render(
+        <AbstractNotificationBanner icon="Search" iconColour iconInverse>
+            {text}
+        </AbstractNotificationBanner>
+    );
+
+    const bannerTitle = screen.getByRole('heading');
+    const bannerIconContainer = bannerTitle.nextElementSibling;
+
+    expect(bannerIconContainer).toHaveClass('ds_notification__icon', 'ds_notification__icon--inverse', 'ds_notification__icon--colour');
+});
+
+test('abstract notification banner with buttons', () => {
+    render(
+        <AbstractNotificationBanner>
+            {text}
+            <AbstractNotificationBanner.Buttons>
+                <Button data-testid="button">Foo</Button>
+            </AbstractNotificationBanner.Buttons>
+        </AbstractNotificationBanner>
+    );
+
+    const bannerContainer = document.querySelector('.ds_notification');
+    const button = screen.getByTestId('button');
+    const buttonContainer = button.parentElement;
+    const textContainer = bannerContainer?.querySelector('.ds_notification__text');
+
+    expect(buttonContainer).toHaveClass('ds_button-group');
+    expect(buttonContainer?.tagName).toEqual('DIV');
+    expect(buttonContainer?.previousElementSibling).toEqual(textContainer);
+});
+
+test('passing additional props', () => {
+    render(
+        <AbstractNotificationBanner data-test="foo">
+            {text}
+        </AbstractNotificationBanner>
+    )
+
+    const bannerContainer = document.querySelector('.ds_notification') as HTMLElement;
+    expect(bannerContainer?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <AbstractNotificationBanner className="foo">
+            {text}
+        </AbstractNotificationBanner>
+    )
+
+    const bannerContainer = document.querySelector('.ds_notification');
+    expect(bannerContainer).toHaveClass('foo', 'ds_notification');
+});

package/src/common/abstract-notification-banner.tsx

@@ -0,0 +1,87 @@
+import { Children, isValidElement } from 'react';
+import Icon from './icon';
+import ScreenReaderText from './screen-reader-text';
+
+const Buttons: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> = ({
+    children
+}) => {
+    return (<>{children}</>);
+}
+
+const AbstractNotificationBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
+    & { Buttons: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> } = ({
+    children,
+    className,
+    close,
+    icon,
+    iconColour,
+    iconInverse,
+    title = 'Information',
+    ...props
+}) => {
+    let content: any[] = [];
+    let buttons;
+
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === Buttons) {
+            buttons = child;
+        } else {
+            content.push(child);
+        }
+    });
+
+    return (
+        <div
+            className={[
+                'ds_notification',
+                className
+            ].join(' ')}
+            data-module="ds-notification"
+            {...props}
+        >
+            <div className="ds_wrapper">
+                <div className={
+                    [
+                        'ds_notification__content',
+                        close && 'ds_notification__content--has-close'
+                    ].join(' ')}
+                >
+                    <h2 className="visually-hidden">{title}</h2>
+
+                    {icon &&
+                        <span
+                        className={[
+                                'ds_notification__icon',
+                                iconInverse && 'ds_notification__icon--inverse',
+                                iconColour && 'ds_notification__icon--colour'
+                            ].join(' ')} aria-hidden="true">
+                            <Icon icon={icon} />
+                        </span>
+                    }
+
+                    <div className="ds_notification__text">
+                        {content}
+                    </div>
+
+                    {close &&
+                        <button type="button" className="ds_notification__close js-close-notification">
+                            <ScreenReaderText>Close this notification</ScreenReaderText>
+                            <Icon fill icon="Close" aria-hidden="true" />
+                        </button>
+                    }
+
+                    {buttons &&
+                        <div className="ds_button-group">
+                            {buttons}
+                        </div>
+                    }
+                </div>
+            </div>
+        </div>
+    );
+};
+
+AbstractNotificationBanner.displayName = 'AbstractNotificationBanner';
+AbstractNotificationBanner.Buttons = Buttons;
+
+export default AbstractNotificationBanner;

package/src/common/conditional-wrapper.test.tsx

@@ -16,7 +16,7 @@ test('conditional wrapper true', () => {
     const elementParent = screen.getByTestId('wrapper');
     expect(element).toBeInTheDocument();
     expect(elementParent).toBeInTheDocument();
-    expect(element.parentNode).toEqual(elementParent)
+    expect(element.parentElement).toEqual(elementParent)
 });
 
 test('conditional wrapper false', () => {

package/src/common/screen-reader-text.test.tsx

@@ -14,7 +14,7 @@ test('screen reader text renders correctly', () => {
     const srtext = document.querySelector('span');
 
     expect(srtext).toHaveClass('visually-hidden');
-    expect(srtext.textContent).toEqual(content)
+    expect(srtext?.textContent).toEqual(content)
 });
 
 test('passing additional props', () => {

package/src/common/wrapper-tag.test.tsx

@@ -13,7 +13,7 @@ test('wrapper tag renders correctly', () => {
 
     const wrapper = document.querySelector('#foo');
 
-    expect(wrapper.tagName).toEqual('DIV');
+    expect(wrapper?.tagName).toEqual('DIV');
 });
 
 test('wrapper tag widh tag name', () => {
@@ -27,7 +27,7 @@ test('wrapper tag widh tag name', () => {
 
     const wrapper = document.querySelector('#foo');
 
-    expect(wrapper.tagName).toEqual('SECTION');
+    expect(wrapper?.tagName).toEqual('SECTION');
 });
 
 test('passing additional props', () => {
@@ -37,6 +37,6 @@ test('passing additional props', () => {
         </WrapperTag>
     );
 
-    const wrapper = document.querySelector('#foo');
+    const wrapper = document.querySelector('#foo') as HTMLElement;
     expect(wrapper?.dataset.test).toEqual('foo');
 });

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