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

package/src/components/radio-button/radio-button.test.tsx

@@ -29,7 +29,7 @@ test('radio group renders correct children', () => {
     );
 
     const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0].parentNode.parentNode;
+    const groupContainer = radios[0].parentElement?.parentElement;
     expect(radios.length).toEqual(items.length);
     expect(groupContainer).toHaveClass('ds_radios', 'ds_field-group');
 });
@@ -53,7 +53,7 @@ test('inline radio group', () => {
 
 
     const radio = screen.getAllByRole('radio')[0];
-    const groupContainer = radio.parentNode.parentNode;
+    const groupContainer = radio.parentElement?.parentElement;
     expect(groupContainer).toHaveClass('ds_field-group--inline');
 });
 
@@ -78,7 +78,7 @@ test('radio group passes all expected item params', () => {
     );
 
     const radio = screen.getByRole('radio');
-    const radioContainer = radio.parentNode;
+    const radioContainer = radio.parentElement;
     const hintText = screen.getByText('hint text');
 
     expect(radio).toHaveAttribute('checked');
@@ -101,7 +101,7 @@ test('individual radio renders correctly', () => {
     );
 
     const radio = screen.getByRole('radio');
-    const radioContainer = radio.parentNode;
+    const radioContainer = radio.parentElement;
     const label = screen.getByText('Pension Credit');
 
     expect(radioContainer).toHaveClass('ds_radio');
@@ -171,7 +171,7 @@ test('small radio', () => {
     );
 
     const radio = screen.getByRole('radio');
-    const radioContainer = radio.parentNode;
+    const radioContainer = radio.parentElement;
 
     expect(radioContainer).toHaveClass('ds_radio--small');
 });
@@ -185,7 +185,7 @@ test('passing additional props', () => {
     );
 
     const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0]?.parentNode?.parentNode;
+    const groupContainer = radios[0]?.parentElement?.parentElement;
     expect(groupContainer?.dataset.test).toEqual('foo');
 });
 
@@ -198,6 +198,6 @@ test('passing additional CSS classes', () => {
     );
 
     const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0]?.parentNode?.parentNode;
+    const groupContainer = radios[0]?.parentElement?.parentElement;
     expect(groupContainer).toHaveClass('foo', 'ds_radios');
 });

package/src/components/select/select.test.tsx

@@ -29,23 +29,23 @@ test('select renders correctly', () => {
     );
 
     const select = screen.getByRole('combobox');
-    const selectWrapper = select.parentNode;
-    const label = selectWrapper?.previousSibling;
-    const selectArrow = select.nextSibling;
+    const selectWrapper = select.parentElement;
+    const label = selectWrapper?.previousElementSibling;
+    const selectArrow = select.nextElementSibling;
 
     expect(select).toHaveClass('ds_select');
     expect(select.id).toEqual(id);
     expect(select).toHaveAttribute('name', id);
 
     expect(selectWrapper).toHaveClass('ds_select-wrapper');
-    expect(selectWrapper.tagName).toEqual('DIV');
+    expect(selectWrapper?.tagName).toEqual('DIV');
 
     expect(label).toHaveClass('ds_label');
     expect(label).toHaveAttribute('for', id);
 
     expect(selectArrow).toHaveClass('ds_select-arrow');
     expect(selectArrow).toHaveAttribute('aria-hidden');
-    expect(selectArrow.textContent).toEqual('');
+    expect(selectArrow?.textContent).toEqual('');
 });
 
 test('select with width', () => {
@@ -60,7 +60,7 @@ test('select with width', () => {
         />
     );
 
-    const selectWrapper = screen.getByRole('combobox').parentNode;
+    const selectWrapper = screen.getByRole('combobox').parentElement;
     expect(selectWrapper).toHaveClass(`ds_input--${width}`);
 });
 
@@ -183,7 +183,7 @@ test('select with error message', () => {
     );
 
     const select = screen.getByRole('combobox');
-    const selectWrapper = select.parentNode;
+    const selectWrapper = select.parentElement;
     const errorMessageElement = screen.getByText(errorMessage);
 
     expect(selectWrapper).toHaveClass('ds_input--error')
@@ -204,7 +204,7 @@ test('passing additional props', () => {
     );
 
     const select = screen.getByRole('combobox');
-    const selectWrapper = select.parentNode;
+    const selectWrapper = select.parentElement;
     expect(selectWrapper?.dataset.test).toEqual('foo');
 });
 
@@ -219,6 +219,6 @@ test('passing additional CSS classes', () => {
     );
 
     const select = screen.getByRole('combobox');
-    const selectWrapper = select.parentNode;
+    const selectWrapper = select.parentElement;
     expect(selectWrapper).toHaveClass('foo', 'ds_select-wrapper');
 });

package/src/components/sequential-navigation/sequential-navigation.test.tsx

@@ -15,9 +15,9 @@ test('sequential navigation renders correctly', () => {
 
     const sequentialNavigation = screen.getByRole('navigation');
     const prevLink = screen.getAllByRole('link')[0];
-    const prevLinkWrapper = prevLink.parentNode;
+    const prevLinkWrapper = prevLink.parentElement;
     const nextLink = screen.getAllByRole('link')[1];
-    const nextLinkWrapper = nextLink.parentNode;
+    const nextLinkWrapper = nextLink.parentElement;
 
     expect(sequentialNavigation).toHaveClass('ds_sequential-nav');
     expect(sequentialNavigation).toHaveAttribute('aria-label', 'Article navigation');
@@ -26,14 +26,14 @@ test('sequential navigation renders correctly', () => {
     expect(prevLink).toHaveAttribute('href', prevLinkObj.href);
     expect(prevLink.textContent).toEqual(prevLinkObj.title);
     expect(prevLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--prev');
-    expect(prevLinkWrapper.tagName).toEqual('DIV');
+    expect(prevLinkWrapper?.tagName).toEqual('DIV');
     expect(prevLink.childNodes[0]).toHaveAttribute('data-label', 'Previous')
 
     expect(nextLink).toHaveClass('ds_sequential-nav__button', 'ds_sequential-nav__button--right');
     expect(nextLink).toHaveAttribute('href', nextLinkObj.href);
     expect(nextLink.textContent).toEqual(nextLinkObj.title);
     expect(nextLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--next');
-    expect(nextLinkWrapper.tagName).toEqual('DIV');
+    expect(nextLinkWrapper?.tagName).toEqual('DIV');
     expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next')
 });
 

package/src/components/side-navigation/side-navigation.test.tsx

@@ -60,7 +60,7 @@ test('side navigation renders correctly', () => {
 
     expect(label).toHaveClass('ds_link');
     expect(label).toHaveAttribute('for', toggle.id);
-    expect(label.textContent).toEqual('Show all Pages in this section');
+    expect(label?.textContent).toEqual('Show all Pages in this section');
 
     expect(rootList).toHaveAttribute('id', 'side-navigation-root');
 

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;