@scottish-government/designsystem-react 0.3.0 → 0.5.0

package/src/components/site-header/site-header.test.tsx

@@ -37,33 +37,33 @@ test('site header renders correctly (maximal, testing markup structure)', () =>
     const siteHeaderNavigationMobile = within(siteHeader).getAllByRole('navigation')[0];
     const siteHeaderNavigationDesktop = within(siteHeader).getAllByRole('navigation')[1];
     const siteHeaderPhaseBanner = siteHeader.querySelector('.ds_phase-banner');
-    const siteHeaderSearch = within(siteHeader).getByRole('search').parentNode;
+    const siteHeaderSearch = within(siteHeader).getByRole('search').parentElement;
 
     expect(siteHeader).toHaveClass('ds_site-header');
     expect(siteHeaderContentWrapper).toHaveClass('ds_wrapper');
 
-    expect(siteHeaderBranding?.parentNode).toEqual(siteHeaderContent);
-    expect(siteHeaderControls?.parentNode).toEqual(siteHeaderContent);
-    expect(siteHeaderNavToggle?.parentNode).toEqual(siteHeaderContent);
-    expect(siteHeaderNavigationMobile.parentNode).toEqual(siteHeaderContent);
-    expect(siteHeaderSearch?.parentNode).toEqual(siteHeaderContent);
+    expect(siteHeaderBranding?.parentElement).toEqual(siteHeaderContent);
+    expect(siteHeaderControls?.parentElement).toEqual(siteHeaderContent);
+    expect(siteHeaderNavToggle?.parentElement).toEqual(siteHeaderContent);
+    expect(siteHeaderNavigationMobile.parentElement).toEqual(siteHeaderContent);
+    expect(siteHeaderSearch?.parentElement).toEqual(siteHeaderContent);
 
-    expect(siteHeaderBranding?.previousSibling).toBeNull();
-    expect(siteHeaderControls?.previousSibling).toEqual(siteHeaderBranding);
-    expect(siteHeaderNavToggle?.previousSibling).toEqual(siteHeaderControls);
-    expect(siteHeaderNavigationMobile.previousSibling).toEqual(siteHeaderNavToggle);
-    expect(siteHeaderSearch?.previousSibling).toEqual(siteHeaderNavigationMobile);
+    expect(siteHeaderBranding?.previousElementSibling).toBeNull();
+    expect(siteHeaderControls?.previousElementSibling).toEqual(siteHeaderBranding);
+    expect(siteHeaderNavToggle?.previousElementSibling).toEqual(siteHeaderControls);
+    expect(siteHeaderNavigationMobile.previousElementSibling).toEqual(siteHeaderNavToggle);
+    expect(siteHeaderSearch?.previousElementSibling).toEqual(siteHeaderNavigationMobile);
 
-    expect(siteHeaderNavigationDesktop.parentNode).toHaveClass('ds_wrapper');
-    expect(siteHeaderNavigationDesktop?.parentNode?.parentNode).toHaveClass('ds_site-header__navigation');
+    expect(siteHeaderNavigationDesktop.parentElement).toHaveClass('ds_wrapper');
+    expect(siteHeaderNavigationDesktop?.parentElement?.parentElement).toHaveClass('ds_site-header__navigation');
 
-    expect(siteHeaderNavigationDesktop?.parentNode?.parentNode?.previousSibling).toEqual(siteHeaderPhaseBanner);
+    expect(siteHeaderNavigationDesktop?.parentElement?.parentElement?.previousElementSibling).toEqual(siteHeaderPhaseBanner);
 
-    expect(siteHeaderPhaseBanner?.previousSibling).toEqual(siteHeaderContentWrapper);
+    expect(siteHeaderPhaseBanner?.previousElementSibling).toEqual(siteHeaderContentWrapper);
 
-    expect(siteHeaderPhaseBanner?.parentNode).toEqual(siteHeader);
-    expect(siteHeaderNavigationDesktop?.parentNode?.parentNode?.parentNode).toEqual(siteHeader);
-    expect(siteHeaderContentWrapper?.parentNode).toEqual(siteHeader);
+    expect(siteHeaderPhaseBanner?.parentElement).toEqual(siteHeader);
+    expect(siteHeaderNavigationDesktop?.parentElement?.parentElement?.parentElement).toEqual(siteHeader);
+    expect(siteHeaderContentWrapper?.parentElement).toEqual(siteHeader);
 });
 
 test('site header branding: logo only, default URL', () => {
@@ -90,8 +90,8 @@ test('site header branding: logo only, default URL', () => {
     expect(siteHeaderLogoImg).toHaveAttribute('src', logo.src);
     expect(siteHeaderLogoImg).toHaveAttribute('alt', logo.alt);
 
-    expect(siteHeaderLogoImg.parentNode).toEqual(siteHeaderLogoLink);
-    expect(siteHeaderLogoLink.parentNode).toEqual(siteHeaderBranding);
+    expect(siteHeaderLogoImg.parentElement).toEqual(siteHeaderLogoLink);
+    expect(siteHeaderLogoLink.parentElement).toEqual(siteHeaderBranding);
 });
 
 test('site header branding: logo and site title', () => {
@@ -115,8 +115,8 @@ test('site header branding: logo and site title', () => {
 
     expect(siteTitle?.tagName).toEqual('DIV');
     expect(siteTitle?.textContent).toEqual(siteTitleContent);
-    expect(siteTitle?.parentNode).toEqual(siteHeaderBranding);
-    expect(siteTitle?.previousSibling).toEqual(siteHeaderLogoLink);
+    expect(siteTitle?.parentElement).toEqual(siteHeaderBranding);
+    expect(siteTitle?.previousElementSibling).toEqual(siteHeaderLogoLink);
 });
 
 test('site header branding: custom link URL', () => {

package/src/components/site-search/site-search.test.tsx

@@ -12,27 +12,27 @@ test('site search renders correctly', () => {
     );
 
     const searchForm = screen.getByRole('search');
-    const searchFormContainer = searchForm.parentNode;
+    const searchFormContainer = searchForm.parentElement;
     const searchLabel = document.querySelector('label');
     const searchInput = within(searchForm).getByRole('searchbox');
-    const inputWrapper = searchInput.parentNode;
+    const inputWrapper = searchInput.parentElement;
     const searchButton = within(searchForm).getByRole('button');
 
     expect(searchFormContainer).toHaveClass('ds_site-search');
-    expect(searchFormContainer.tagName).toEqual('DIV');
+    expect(searchFormContainer?.tagName).toEqual('DIV');
     expect(searchFormContainer).not.toHaveAttribute('id', 'site-search-autocomplete');
 
     expect(searchForm).toHaveClass('ds_site-search__form');
     expect(searchForm).toHaveAttribute('method', 'GET');
     expect(searchForm).toHaveAttribute('action', '/search');
 
-    expect(searchLabel.textContent).toEqual(labelText);
+    expect(searchLabel?.textContent).toEqual(labelText);
     expect(searchLabel).toHaveAttribute('for', id);
     expect(searchLabel).toHaveAttribute('id', `${id}-label`);
     expect(searchLabel).toHaveClass('ds_label', 'visually-hidden');
 
     expect(inputWrapper).toHaveClass('ds_input__wrapper  ds_input__wrapper--has-icon');
-    expect(inputWrapper.tagName).toEqual('DIV');
+    expect(inputWrapper?.tagName).toEqual('DIV');
 
     expect(searchInput).toHaveClass('ds_input', 'ds_site-search__input');
     expect(searchInput).toHaveAttribute('id', id);
@@ -113,7 +113,7 @@ test('autocomplete', () => {
     )
 
     const searchForm = screen.getByRole('search');
-    const searchFormContainer = searchForm.parentNode;
+    const searchFormContainer = searchForm.parentElement;
     const searchInput = within(searchForm).getByRole('searchbox');
     const autocompleteStatus = within(searchForm).getByRole('status');
     const suggestionsContainer = document.querySelector('.ds_autocomplete__suggestions');
@@ -134,7 +134,7 @@ test('autocomplete', () => {
     expect(searchInput).toHaveClass('js-autocomplete-input');
 
     expect(suggestionsContainer).toHaveAttribute('id', suggestionsId);
-    expect(suggestionsContainer.tagName).toEqual('DIV');
+    expect(suggestionsContainer?.tagName).toEqual('DIV');
 
     expect(suggestionsList).toHaveClass('ds_autocomplete__suggestions-list');
     expect(suggestionsList).toHaveAttribute('aria-labelledby', `${id}-label`);
@@ -148,7 +148,7 @@ test('passing additional props', () => {
     );
 
     const searchForm = screen.getByRole('search');
-    const searchFormContainer = searchForm.parentNode;
+    const searchFormContainer = searchForm.parentElement;
     expect(searchFormContainer?.dataset.test).toEqual('foo');
 });
 
@@ -158,6 +158,6 @@ test('passing additional CSS classes', () => {
     );
 
     const searchForm = screen.getByRole('search');
-    const searchFormContainer = searchForm.parentNode;
+    const searchFormContainer = searchForm.parentElement;
     expect(searchFormContainer).toHaveClass('foo', 'ds_site-search');
 });

package/src/components/skip-links/skip-links.test.tsx

@@ -11,12 +11,12 @@ test('skip links renders correctly', () => {
     );
 
     const skipLinksList = screen.getByRole('list');
-    const skipLinksContainer = skipLinksList.parentNode;
+    const skipLinksContainer = skipLinksList.parentElement;
     const skipLinksListItem = within(skipLinksList).getByRole('listitem');
     const skipLinksLink = within(skipLinksList).getByRole('link');
 
     expect(skipLinksContainer).toHaveClass('ds_skip-links');
-    expect(skipLinksContainer.tagName).toEqual('DIV');
+    expect(skipLinksContainer?.tagName).toEqual('DIV');
 
     expect(skipLinksList).toHaveClass('ds_skip-links__list');
     expect(skipLinksList.tagName).toEqual('UL');
@@ -78,7 +78,7 @@ test('passing additional props', () => {
     );
 
     const skipLinksList = screen.getByRole('list');
-    const skipLinksContainer = skipLinksList.parentNode;
+    const skipLinksContainer = skipLinksList.parentElement;
 
     expect(skipLinksContainer?.dataset.test).toEqual('foo');
 });

package/src/components/summary-card/summary-card.test.tsx

@@ -45,8 +45,8 @@ test('summary card renders correctly', () => {
 
     const summaryCard = screen.getByTestId('foo');
     const title = within(summaryCard).getByRole('heading');
-    const header = title.parentElement;
-    const content = header?.nextSibling;
+    const header = title.parentElement as HTMLElement;
+    const content = header?.nextElementSibling as HTMLElement;
     const actionsList = within(header).getByRole('list')
 
     const thisList = within(content).getByRole('list');

package/src/components/summary-list/summary-list.test.tsx

@@ -116,7 +116,7 @@ test('summary list item with multiple values', () => {
     const item = screen.getAllByRole('listitem')[0];
     const value = item.querySelector('.ds_summary-list__value');
     const valueList = value?.children[0];
-    const valueListItems = valueList?.children;
+    const valueListItems = valueList?.children as HTMLCollection;
 
     expect(valueList).toHaveClass('ds_no-bullets');
     expect(valueList?.tagName).toEqual('UL');
@@ -143,31 +143,47 @@ test('summary list item with no value', () => {
 });
 
 test('summary list item with multiple actions', () => {
+    const title = 'Name';
+    const value = 'Jane Smith';
+    const actions = [
+        {
+            title: 'Change',
+            href: '#foo'
+        },
+        {
+            title: 'Delete',
+            onclick: onClickFn
+        }
+    ];
+
     render(
         <Item
             actions={items[0].actions}
-            title={items[0].title}
-            value={items[0].value}
+            title={title}
+            value={value}
         />
     );
 
     const item = screen.getAllByRole('listitem')[0];
-    const actions = item.querySelector('.ds_summary-list__actions');
+    const actionsElement = item.querySelector('.ds_summary-list__actions');
 
-    expect(actions.children.length).toEqual(items[0].actions.length);
-    expect(actions.children[0].textContent).toEqual(items[0].actions[0].title);
-    expect(actions.children[1].textContent).toEqual(items[0].actions[1].title);
+    expect(actionsElement?.children.length).toEqual(actions.length);
+    expect(actionsElement?.children[0].textContent).toEqual(actions[0].title);
+    expect(actionsElement?.children[1].textContent).toEqual(actions[1].title);
 });
 
 test('button action', () => {
     const describedById = 'q1-name';
+    const title = 'Name';
+    const href = undefined;
+    const onClick = onClickFn;
 
     render(
         <Action
             describedby={describedById}
-            href={items[0].actions[1].href}
-            onclick={items[0].actions[1].onclick}
-            title={items[0].actions[1].title}
+            href={href}
+            onclick={onClick}
+            title={title}
         />
     );
 
@@ -178,7 +194,7 @@ test('button action', () => {
     expect(action).toHaveAttribute('type', 'button');
     expect(action).not.toHaveAttribute('href');
     expect(action.tagName).toEqual('BUTTON');
-    expect(action.textContent).toEqual('Delete');
+    expect(action.textContent).toEqual(title);
 
     fireEvent.click(action);
 
@@ -187,13 +203,16 @@ test('button action', () => {
 
 test('link action', () => {
     const describedById = 'q1-name';
+    const title = 'Name';
+    const href = "#foo"
+    const onClick = onClickFn;
 
     render(
         <Action
             describedby={describedById}
-            href={items[0].actions[0].href}
-            onclick={items[0].actions[0].onclick}
-            title={items[0].actions[0].title}
+            href={href}
+            onclick={onClick}
+            title={title}
         />
     );
 
@@ -201,10 +220,10 @@ test('link action', () => {
 
     expect(action).toHaveClass('ds_link');
     expect(action).toHaveAttribute('aria-describedby', describedById);
-    expect(action).toHaveAttribute('href', items[0].actions[0].href);
+    expect(action).toHaveAttribute('href', href);
     expect(action).not.toHaveAttribute('type');
     expect(action.tagName).toEqual('A');
-    expect(action.textContent).toEqual('Change');
+    expect(action.textContent).toEqual(title);
 });
 
 test('multiline answer', () => {

package/src/components/table/table.test.tsx

@@ -0,0 +1,77 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Table from './table';
+
+test('table renders correctly', () => {
+    render(
+        <Table>
+            <caption>Public holidays in 2020</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Date</th>
+                    <th scope="col">Day</th>
+                    <th scope="col">Holiday</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>10 April</td>
+                    <td>Friday</td>
+                    <td>Good Friday</td>
+                </tr>
+            </tbody>
+        </Table>
+    );
+
+    const table = screen.getByRole('table');
+
+    expect(table).toHaveClass('ds_table');
+    expect(table.nodeName).toEqual('TABLE');
+});
+
+test('table with smallscreen behaviour', () => {
+    const behaviour = 'scrolling';
+
+    render(
+        <Table smallscreen={behaviour}>
+            <caption>Public holidays in 2020</caption>
+            <thead>
+                <tr>
+                    <th scope="col">Date</th>
+                    <th scope="col">Day</th>
+                    <th scope="col">Holiday</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>10 April</td>
+                    <td>Friday</td>
+                    <td>Good Friday</td>
+                </tr>
+            </tbody>
+        </Table>
+    );
+
+    const table = screen.getByRole('table');
+
+    expect(table).toHaveAttribute('data-smallscreen', behaviour);
+    expect(table.nodeName).toEqual('TABLE');
+});
+
+test('passing additional props', () => {
+    render(
+        <Table data-test="foo"/>
+    );
+
+    const table = screen.getByRole('table');
+    expect(table?.dataset.test).toEqual('foo');
+});
+
+test('table with additional CSS class', () => {
+    render(
+        <Table className="foo"/>
+    );
+
+    const table = screen.getByRole('table');
+    expect(table).toHaveClass('foo', 'ds_table');
+});

package/src/components/table/table.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSTable from '@scottish-government/design-system/src/components/table/table';
+
+const Table: React.FC<SGDS.Component.Table> = ({
+    children,
+    className,
+    smallscreen,
+    ...props
+}) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSTable().init();
+        }
+    }, [ref]);
+
+    return (
+        <table
+            className={[
+                'ds_table',
+                className
+            ].join(' ')}
+            data-smallscreen={smallscreen}
+            ref={ref}
+            {...props}
+        >
+            {children}
+        </table>
+    );
+};
+
+Table.displayName = 'Table';
+
+export default Table;

package/src/components/tabs/tabs.test.tsx

@@ -0,0 +1,258 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Tabs from './tabs';
+import slugify from '../../utils/slugify';
+
+test('tab container renders correctly', () => {
+    render(
+        <Tabs data-testid="tabcontainer">
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+            <Tabs.Item tabLabel="Tab 2" data-testid="tabpanel2">
+                Content two
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    const tabHeading = within(tabContainer).getByRole('heading');
+    const tabList = within(tabContainer).getByRole('tablist');
+    const tabListItems = within(tabList).getAllByRole('presentation');
+    const tabListLinkOne = within(tabListItems[0]).getByRole('tab');
+    const tabListLinkTwo = within(tabListItems[1]).getByRole('tab');
+    const tabPanels = document.querySelectorAll('.ds_tabs__content');
+    const tabPanelOne = screen.getByTestId('tabpanel1');
+    const tabPanelTwo = screen.getByTestId('tabpanel2');
+
+    expect(tabContainer).toHaveClass('ds_tabs');
+    expect(tabContainer.tagName).toEqual('DIV');
+
+    expect(tabHeading).toHaveClass('ds_tabs__title');
+    // default header level
+    expect(tabHeading.tagName).toEqual('H2');
+    expect(tabHeading.parentElement).toEqual(tabContainer);
+    // default ID-heading
+    expect(tabHeading).toHaveAttribute('id', 'tabs-heading');
+
+    expect(tabList).toHaveClass('ds_tabs__list');
+    expect(tabList.tagName).toEqual('UL');
+    expect(tabList.parentElement).toEqual(tabContainer);
+    expect(tabList.previousElementSibling).toEqual(tabHeading);
+
+    // number of items in the provided markup
+    expect(tabListItems.length).toEqual(2);
+
+    expect(tabListItems[0]).toHaveClass('ds_tabs__tab');
+    expect(tabListItems[0].tagName).toEqual('LI');
+
+    expect(tabListLinkOne).toHaveClass('ds_tabs__tab-link');
+    expect(tabListLinkOne).toHaveAttribute('href', `#${tabPanelOne.id}`);
+    expect(tabListLinkTwo).toHaveAttribute('href', `#${tabPanelTwo.id}`);
+    // text content in provided markup
+    expect(tabListLinkOne.textContent).toEqual('Tab 1');
+    expect(tabListLinkTwo.textContent).toEqual('Tab 2');
+
+    // number of items in the provided markup
+    expect(tabPanels.length).toEqual(2)
+
+    expect(tabPanelOne).toHaveClass('ds_tabs__content', 'ds_tabs__content--bordered');
+
+    // todo: this will be true after the tab script has been updated in the core DS
+    //expect(tabPanelOne.tabIndex).toEqual(0);
+
+    // tab panels have ID
+    expect(tabPanelOne).toHaveAttribute('id');
+    expect(tabPanelTwo).toHaveAttribute('id');
+});
+
+test('non-bordered tabs', () => {
+    render(
+        <Tabs data-testid="tabcontainer" bordered={false}>
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+            <Tabs.Item tabLabel="Tab 2" data-testid="tabpanel2">
+                Content two
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabPanelOne = screen.getByTestId('tabpanel1');
+    expect(tabPanelOne).not.toHaveClass('ds_tabs__content--bordered');
+});
+
+test('custom title', () => {
+    const title = 'My title';
+
+    render(
+        <Tabs data-testid="tabcontainer" title={title}>
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+            <Tabs.Item tabLabel="Tab 2" data-testid="tabpanel2">
+                Content two
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    const tabList = within(tabContainer).getByRole('tablist');
+    const tabHeading = within(tabContainer).getByRole('heading');
+
+    expect(tabList).toHaveAttribute('aria-labelledby', tabHeading.id);
+    expect(tabHeading.textContent).toEqual(title)
+});
+
+test('custom base ID', () => {
+    const baseId = 'foo';
+
+    render(
+        <Tabs data-testid="tabcontainer" baseId={baseId}>
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+            <Tabs.Item tabLabel="Tab 2" data-testid="tabpanel2">
+                Content two
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    const tabHeading = within(tabContainer).getByRole('heading');
+
+    expect(tabHeading).toHaveAttribute('id', `${baseId}-heading`);
+});
+
+test('custom header level', () => {
+    const headerLevel = 'h3';
+
+    render(
+        <Tabs data-testid="tabcontainer" headerLevel={headerLevel}>
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+            <Tabs.Item tabLabel="Tab 2" data-testid="tabpanel2">
+                Content two
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    const tabHeading = within(tabContainer).getByRole('heading');
+
+    expect(tabHeading.tagName).toEqual(headerLevel.toUpperCase());
+});
+
+test('custom baseID', () => {
+    const baseId = 'myId';
+
+    render(
+        <Tabs data-testid="tabcontainer" baseId={baseId}>
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+            <Tabs.Item tabLabel="Tab 2" data-testid="tabpanel2">
+                Content two
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    const tabHeading = within(tabContainer).getByRole('heading');
+    const tabPanelOne = screen.getByTestId('tabpanel1');
+    const tabPanelTwo = screen.getByTestId('tabpanel2');
+
+    // default title slugified to part of the ID
+    expect(tabHeading).toHaveAttribute('id', `${baseId}-heading`);
+    // generated IDs using the slug of the tab title
+    expect(tabPanelOne).toHaveAttribute('id', `${baseId}-tab-1`);
+    expect(tabPanelTwo).toHaveAttribute('id', `${baseId}-tab-2`);
+});
+
+test('tab with and without specific ID attribute', () => {
+    const baseId = 'foo'
+    const tabLabel = 'Tab 1';
+    const id = 'bar';
+
+    render(
+        <Tabs baseId={baseId}>
+            <Tabs.Item tabLabel={tabLabel} data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+            <Tabs.Item tabLabel="Tab 2" id={id} data-testid="tabpanel2">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabPanelOne = screen.getByTestId('tabpanel1');
+    const tabPanelTwo = screen.getByTestId('tabpanel2');
+
+    expect(tabPanelOne).toHaveAttribute('id', `${baseId}-${slugify(tabLabel)}`);
+    expect(tabPanelTwo).toHaveAttribute('id', id);
+});
+
+test('with manual activation', () => {
+    render(
+        <Tabs data-testid="tabcontainer" manual>
+            <Tabs.Item title="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+            <Tabs.Item title="Tab 2" data-testid="tabpanel2">
+                Content two
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    expect(tabContainer).toHaveClass('ds_tabs--manual');
+});
+
+test('passing additional props to tab container', () => {
+    render(
+        <Tabs data-testid="tabcontainer" data-test="foo">
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    expect(tabContainer.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes tab container', () => {
+    render(
+        <Tabs data-testid="tabcontainer" className="foo">
+            <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1">
+                <div data-testid="tabpanel1content">Content one</div>
+            </Tabs.Item>
+        </Tabs>
+    );
+
+    const tabContainer = screen.getByTestId('tabcontainer');
+    expect(tabContainer).toHaveClass('foo');
+});
+
+test('passing additional props to tab panel', () => {
+    render(
+        <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1" data-test="foo">
+            <div data-testid="tabpanel1content">Content one</div>
+        </Tabs.Item>
+    );
+
+    const tabItem = screen.getByTestId('tabpanel1');
+    expect(tabItem.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes tab panel', () => {
+    render(
+        <Tabs.Item tabLabel="Tab 1" data-testid="tabpanel1" className="foo">
+            <div data-testid="tabpanel1content">Content one</div>
+        </Tabs.Item>
+    );
+
+    const tabItem = screen.getByTestId('tabpanel1');
+    expect(tabItem).toHaveClass('foo');
+});