@scottish-government/designsystem-react 0.7.0 → 0.8.0-beta.0

package/src/components/SummaryCard/SummaryCard.tsx

@@ -1,21 +1,29 @@
-import SummaryList, { Action } from "../SummaryList/SummaryList";
-import WrapperTag from "../../common/WrapperTag";
+import React, { Children, useId } from 'react';
 
-function convertToSlug(string: string) {
-    return string.toLowerCase()
-        .replace(/[^\w ]+/g, "")
-        .replace(/ +/g, "-");
-}
+import ActionLink from '../../common/ActionLink';
+import ConditionalWrapper from '../../common/ConditionalWrapper';
+import WrapperTag from "../../common/WrapperTag";
 
-const SummaryCard: React.FC<SGDS.Component.SummaryCard> = ({
-    actions,
+const SummaryCard = ({
+    children,
     className,
     headingLevel = 'h3',
-    items,
     title,
     ...props
-}) => {
-    const describedById = `summary-card-${convertToSlug(title)}`;
+}: SGDS.Component.SummaryCard) => {
+    let actions: any[] = [];
+    let remainingChildren: any[] = [];
+
+    const describedById = useId();
+
+    Children.forEach(children, (child: React.ReactNode) => {
+        const thisChild = child as React.ReactElement<SGDS.Common.ActionLink>;
+        if (thisChild && thisChild.type === ActionLink) {
+            actions.push(React.cloneElement(thisChild, { describedby: describedById }));
+        } else {
+            remainingChildren.push(thisChild);
+        }
+    });
 
     return (
         <div
@@ -32,29 +40,32 @@ const SummaryCard: React.FC<SGDS.Component.SummaryCard> = ({
                     tagName={headingLevel}
                 >{title}</WrapperTag>
 
-                <ul className="ds_summary-card__actions-list">
-                    {actions && actions.map((action, index: number) => (
-                        <li
-                            className="ds_summary-card__actions-list-item"
-                            key={'summarylistaction' + index}
-                        >
-                            <Action
-                                describedby={describedById}
-                                href={action.href}
-                                onclick={action.onclick}
-                                title={action.title}
-                            />
-                        </li>
-                    ))}
-                </ul>
+                {actions &&
+                    <ConditionalWrapper
+                        condition={actions.length > 1}
+                        wrapper={(children: React.JSX.Element) => <ul className="ds_summary-card__actions-list">{children}</ul>}
+                    >
+                        {actions && actions.map((action, index: number) => (
+                            <ConditionalWrapper
+                                condition={actions.length > 1}
+                                wrapper={(children: React.JSX.Element) => <li className="ds_summary-card__actions-list-item">{children}</li>}
+                                key={'action' + index}
+                            >
+                                {action}
+                            </ConditionalWrapper>
+                        ))}
+                    </ConditionalWrapper>
+                }
             </div>
             <div className="ds_summary-card__content">
-                <SummaryList items={items} />
+                {remainingChildren}
             </div>
         </div>
     );
 };
 
 SummaryCard.displayName = 'SummaryCard';
+SummaryCard.Action = ActionLink;
+SummaryCard.Action.displayName = 'SummaryCard.Action';
 
 export default SummaryCard;

package/src/components/SummaryList/SummaryList.test.tsx

@@ -1,69 +1,39 @@
 import { test, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import SummaryList, { Item, Action, Answer } from './SummaryList';
+import { within, render, screen, fireEvent } from '@testing-library/react';
+import SummaryList from './SummaryList';
 
 const ONCLICK_FUNCTION = vi.fn();
+const TITLE = 'Name';
+const VALUE_1 = 'Jane Smith';
+const VALUE_2 = 'Tony Brown';
 
-const SUMMARY_ITEMS = [
-    {
-        title: 'Name',
-        value: 'Jane Smith',
-        actions: [
-            {
-                title: 'Change',
-                href: '#foo'
-            },
-            {
-                title: 'Delete',
-                onclick: ONCLICK_FUNCTION
-            }
-        ]
-    },
-    {
-        title: 'Date of birth',
-        value: '13 April 2001',
-        actions: [
-            {
-                title: 'Change',
-                href: '#bar'
-            }
-        ]
-    },
-    {
-        title: 'Address',
-        value: `Scottish Government\nSt Andrew's House\nRegent Road\nEdinburgh\nEH1 3DG`,
-        actions: [
-            {
-                title: 'Change',
-                href: '#baz'
-            }
-        ]
-    },
-    {
-        title: 'Contact details',
-        value: [
-            'email@gov.scot',
-            '0123 456 7890',
-        ]
-    }
-];
+const ACTION_HREF = "#foo"
+const ACTION_ONCLICK = ONCLICK_FUNCTION;
+const ACTION_TEXT = 'Name';
+const DESCRIBEDBY_ID = 'q1-name';
 
 test('summary list renders correctly', () => {
     render(
-        <SummaryList items={SUMMARY_ITEMS} />
+        <SummaryList data-testid="summarylist">
+            <SummaryList.Item title="key">
+                <SummaryList.Value>value</SummaryList.Value>
+                <SummaryList.Value>value2</SummaryList.Value>
+                <SummaryList.Value>value3</SummaryList.Value>
+                <SummaryList.Action href="foo">foo</SummaryList.Action>
+                <SummaryList.Action onclick={() => true}>bar</SummaryList.Action>
+            </SummaryList.Item>
+        </SummaryList>
     );
 
-    const summaryList = screen.getAllByRole('list')[0];
-    const summaryListItems = summaryList.children;
+    const summaryList = screen.getByTestId('summarylist');
 
     expect(summaryList).toHaveClass('ds_summary-list');
     expect(summaryList.tagName).toEqual('OL');
-    expect(summaryListItems.length).toEqual(SUMMARY_ITEMS.length);
 });
 
 test('summary list without border', () => {
     render(
-        <SummaryList noBorder items={SUMMARY_ITEMS} />
+        <SummaryList noBorder/>
     );
 
     const summaryList = screen.getAllByRole('list')[0];
@@ -72,14 +42,11 @@ test('summary list without border', () => {
 });
 
 test('summary list item renders correctly', () => {
-    const DESCRIBEDBY_ID = 'q2-date-of-birth';
-
     render(
-        <Item
-            actions={SUMMARY_ITEMS[1].actions}
-            title={SUMMARY_ITEMS[1].title}
-            value={SUMMARY_ITEMS[1].value}
-        />
+        <SummaryList.Item title={TITLE}>
+            <SummaryList.Value>{VALUE_1}</SummaryList.Value>
+            <SummaryList.Action></SummaryList.Action>
+        </SummaryList.Item>
     );
 
     const item = screen.getAllByRole('listitem')[0];
@@ -91,8 +58,7 @@ test('summary list item renders correctly', () => {
     expect(item).toHaveClass('ds_summary-list__item');
 
     expect(key?.tagName).toEqual('SPAN');
-    expect(key?.textContent).toEqual('Date of birth');
-    expect(key).toHaveAttribute('id', DESCRIBEDBY_ID);
+    expect(key?.textContent).toEqual(TITLE);
 
     expect(value?.tagName).toEqual('SPAN');
 
@@ -101,16 +67,15 @@ test('summary list item renders correctly', () => {
 
     expect(actions?.tagName).toEqual('DIV');
 
-    expect(actions?.querySelector('.ds_link')).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
+    expect(actions?.querySelector('.ds_link')).toHaveAttribute('aria-describedby', key?.id);
 });
 
 test('summary list item with multiple values', () => {
     render(
-        <Item
-            actions={SUMMARY_ITEMS[3].actions}
-            title={SUMMARY_ITEMS[3].title}
-            value={SUMMARY_ITEMS[3].value}
-        />
+        <SummaryList.Item title={TITLE}>
+            <SummaryList.Value>{VALUE_1}</SummaryList.Value>
+            <SummaryList.Value>{VALUE_2}</SummaryList.Value>
+        </SummaryList.Item>
     );
 
     const item = screen.getAllByRole('listitem')[0];
@@ -121,30 +86,23 @@ test('summary list item with multiple values', () => {
     expect(valueList).toHaveClass('ds_no-bullets');
     expect(valueList?.tagName).toEqual('UL');
 
-    expect(valueListItems?.length).toEqual(SUMMARY_ITEMS[3].value.length);
-
     expect(valueListItems[0].tagName).toEqual('LI');
-    expect(valueListItems[0].innerHTML).toEqual(`<q class="ds_summary-list__answer">${SUMMARY_ITEMS[3].value[0]}</q>`);
+    expect(valueListItems[0].innerHTML).toEqual(`<q class="ds_summary-list__answer">${VALUE_1}</q>`);
 });
 
 test('summary list item with no value', () => {
     render(
-        <Item
-            actions={SUMMARY_ITEMS[3].actions}
-            title={SUMMARY_ITEMS[3].title}
-        />
+        <SummaryList.Item title={TITLE}>
+        </SummaryList.Item>
     );
 
     const item = screen.getAllByRole('listitem')[0];
     const value = item.querySelector('.ds_summary-list__value');
-    const answer = value?.children[0];
 
-    expect(answer?.textContent).toEqual('');
+    expect(value?.textContent).toEqual('');
 });
 
 test('summary list item with multiple actions', () => {
-    const ITEM_TITLE = 'Name';
-    const ITEM_VALUE = 'Jane Smith';
     const ITEM_ACTIONS = [
         {
             title: 'Change',
@@ -157,87 +115,30 @@ test('summary list item with multiple actions', () => {
     ];
 
     render(
-        <Item
-            actions={SUMMARY_ITEMS[0].actions}
-            title={ITEM_TITLE}
-            value={ITEM_VALUE}
-        />
+        <SummaryList.Item title={TITLE}>
+            <SummaryList.Value>{VALUE_1}</SummaryList.Value>
+            <SummaryList.Action href={ITEM_ACTIONS[0].href}>{ITEM_ACTIONS[0].title}</SummaryList.Action>
+            <SummaryList.Action onclick={ITEM_ACTIONS[0].onclick}>{ITEM_ACTIONS[1].title}</SummaryList.Action>
+        </SummaryList.Item>
     );
 
     const item = screen.getAllByRole('listitem')[0];
     const actionsElement = item.querySelector('.ds_summary-list__actions');
+    const actionsList = within(actionsElement as HTMLElement).getByRole('list')
 
-    expect(actionsElement?.children.length).toEqual(ITEM_ACTIONS.length);
-    expect(actionsElement?.children[0].textContent).toEqual(ITEM_ACTIONS[0].title);
-    expect(actionsElement?.children[1].textContent).toEqual(ITEM_ACTIONS[1].title);
-});
-
-test('button action', () => {
-    const DESCRIBEDBY_ID = 'q1-name';
-    const ACTION_TITLE = 'Name';
-    const ACTION_ONCLICK = ONCLICK_FUNCTION;
-
-    render(
-        <Action
-            describedby={DESCRIBEDBY_ID}
-            href={undefined}
-            onclick={ACTION_ONCLICK}
-            title={ACTION_TITLE}
-        />
-    );
-
-    const action = screen.getByRole('button');
-
-    expect(action).toHaveClass('ds_link');
-    expect(action).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
-    expect(action).toHaveAttribute('type', 'button');
-    expect(action).not.toHaveAttribute('href');
-    expect(action.tagName).toEqual('BUTTON');
-    expect(action.textContent).toEqual(ACTION_TITLE);
-
-    fireEvent.click(action);
-
-    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
-});
-
-test('link action', () => {
-    const DESCRIBEDBY_ID = 'q1-name';
-    const ACTION_TITLE = 'Name';
-    const ACTION_HREF = "#foo"
-    const ACTION_ONCLICK = ONCLICK_FUNCTION;
-
-    render(
-        <Action
-            describedby={DESCRIBEDBY_ID}
-            href={ACTION_HREF}
-            onclick={ACTION_ONCLICK}
-            title={ACTION_TITLE}
-        />
-    );
-
-    const action = screen.getByRole('link');
-
-    expect(action).toHaveClass('ds_link');
-    expect(action).toHaveAttribute('aria-describedby', DESCRIBEDBY_ID);
-    expect(action).toHaveAttribute('href', ACTION_HREF);
-    expect(action).not.toHaveAttribute('type');
-    expect(action.tagName).toEqual('A');
-    expect(action.textContent).toEqual(ACTION_TITLE);
-});
-
-test('multiline answer', () => {
-    render(
-        <Answer value={SUMMARY_ITEMS[2].value} />
-    );
-
-    const answer = document.querySelector('.ds_summary-list__answer');
+    expect(actionsList).toHaveClass('ds_summary-list__actions-list');
+    expect(actionsList.tagName).toEqual('UL');
 
-    expect(answer?.outerHTML).toEqual('<q class="ds_summary-list__answer">Scottish Government<br>St Andrew\'s House<br>Regent Road<br>Edinburgh<br>EH1 3DG</q>');
+    expect(actionsList?.children.length).toEqual(2);
+    expect(actionsList?.children[0]).toHaveClass('ds_summary-list__actions-list-item');
+    expect(actionsList?.children[0].tagName).toEqual('LI');
+    expect(actionsList?.children[0].textContent).toEqual(ITEM_ACTIONS[0].title);
+    expect(actionsList?.children[1].textContent).toEqual(ITEM_ACTIONS[1].title);
 });
 
 test('passing additional props', () => {
     render(
-        <SummaryList data-test="foo" items={SUMMARY_ITEMS} />
+        <SummaryList data-test="foo" />
     );
 
     const summaryList = screen.getAllByRole('list')[0];
@@ -246,7 +147,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SummaryList className="foo" items={SUMMARY_ITEMS} />
+        <SummaryList className="foo" />
     );
 
     const summaryList = screen.getAllByRole('list')[0];

package/src/components/SummaryList/SummaryList.tsx

@@ -1,71 +1,25 @@
-import ConditionalWrapper from '../../common/ConditionalWrapper';
-import WrapperTag from '../../common/WrapperTag';
-
-function escapedNewLineToLineBreakTag (string: string) {
-    if (typeof string === 'string') {
-        // @ts-ignore
-        return string.split('\n').map((item, index) => {
-            return (index === 0) ? item : [<br key={index} />, item]
-        });
-    }
-}
-
-function convertToSlug(string: string) {
-    return string.toLowerCase()
-        .replace(/[^\w ]+/g, "")
-        .replace(/ +/g, "-");
-}
+import React, { Children, useId } from 'react';
 
-export const Answer: React.FC<SGDS.Component.SummaryList.Answer> = ({
-    value
-}) => {
-    const processedValue = escapedNewLineToLineBreakTag(value.toString());
-
-    return (
-        <q className="ds_summary-list__answer">{processedValue}</q>
-    );
-};
-
-export const Action: React.FC<SGDS.Component.SummaryList.Action> = ({
-    describedby,
-    href,
-    onclick,
-    title,
-}) => {
-    let tagName = 'button';
-    if (href) {
-        tagName = 'a';
-    }
-
-    return (
-        <WrapperTag
-            aria-describedby={describedby}
-            className="ds_link"
-            href={href}
-            onClick={onclick}
-            tagName={tagName}
-            type={tagName === 'button' ? 'button' : undefined}
-        >
-            {title}
-        </WrapperTag>
-    );
-};
+import ActionLink from '../../common/ActionLink';
+import ConditionalWrapper from '../../common/ConditionalWrapper';
 
-export const Item: React.FC<SGDS.Component.SummaryList.Item> = ({
-    actions,
-    index = 1,
-    title,
-    value
-}) => {
-    let values: string[] = [];
+const Item = ({
+    children,
+    title
+}: SGDS.Component.SummaryList.Item) => {
+    let values: any[] = [];
+    let actions: any[] = [];
 
-    if (Array.isArray(value)) {
-        values = value;
-    } else {
-        values = [value || ''];
-    }
+    const describedById = useId();
 
-    const describedById = `q${index+1}-${convertToSlug(title)}`;
+    Children.forEach(children, (child: React.ReactNode) => {
+        const thisChild = child as React.ReactElement<SGDS.Common.ActionLink>;
+        if (thisChild && thisChild.type === Value) {
+            values.push(thisChild);
+        } else if (thisChild && thisChild.type === ActionLink) {
+            actions.push(React.cloneElement(thisChild, { describedby: describedById }));
+        }
+    });
 
     return (
         <li className="ds_summary-list__item">
@@ -75,42 +29,53 @@ export const Item: React.FC<SGDS.Component.SummaryList.Item> = ({
                     condition={values.length > 1}
                     wrapper={(children: React.JSX.Element) => <ul className="ds_no-bullets">{children}</ul>}
                 >
-                    {values && values.map((value, index: number) => (
+                     {values && values.map((value, index: number) => (
                         <ConditionalWrapper
                             condition={values.length > 1}
                             wrapper={(children: React.JSX.Element) => <li>{children}</li>}
                             key={'answer' + index}
                         >
-                            <Answer
-                                value={value}
-                            />
+                            {value}
                         </ConditionalWrapper>
                     ))}
                 </ConditionalWrapper>
             </span>
             {actions &&
                 <div className="ds_summary-list__actions">
-                    {actions && actions.map((action, index: number) => (
-                        <Action
-                            describedby={describedById}
-                            href={action.href}
-                            onclick={action.onclick}
-                            title={action.title}
-                            key={'summarylistaction' + index}
-                        />
-                    ))}
+                    <ConditionalWrapper
+                        condition={actions.length > 1}
+                        wrapper={(children: React.JSX.Element) => <ul className="ds_summary-list__actions-list">{children}</ul>}
+                    >
+                        {actions && actions.map((action, index: number) => (
+                            <ConditionalWrapper
+                                condition={actions.length > 1}
+                                wrapper={(children: React.JSX.Element) => <li className="ds_summary-list__actions-list-item">{children}</li>}
+                                key={'action' + index}
+                            >
+                                {action}
+                            </ConditionalWrapper>
+                        ))}
+                    </ConditionalWrapper>
                 </div>
             }
         </li>
     );
 };
 
-const SummaryList: React.FC<SGDS.Component.SummaryList> = ({
+const Value = ({
+    children
+}: SGDS.Component.SummaryList.Answer) => {
+    return (
+        <q className="ds_summary-list__answer">{children}</q>
+    );
+};
+
+const SummaryList = ({
+    children,
     className,
-    items,
     noBorder,
     ...props
-}) => {
+}: SGDS.Component.SummaryList) => {
     return (
         <ol
             className={[
@@ -120,22 +85,19 @@ const SummaryList: React.FC<SGDS.Component.SummaryList> = ({
             ].join(' ')}
             {...props}
         >
-            {items && items.map((item, index: number) => (
-                <Item
-                    actions={item.actions}
-                    title={item.title}
-                    value={item.value}
-                    index={index}
-                    key={'summarylistitem' + index}
-                />
-            ))}
+           {children}
         </ol>
     );
 };
 
+
+SummaryList.Action = ActionLink;
+SummaryList.Item = Item;
+SummaryList.Value = Value;
+
 SummaryList.displayName = 'SummaryList';
-Action.displayName = 'SummaryListAction';
-Answer.displayName = 'SumaryListAnswer';
-Item.displayName = 'SummaryListItem';
+SummaryList.Action.displayName = 'SummaryList.Action';
+Item.displayName = 'SummaryList.Item';
+Value.displayName = 'SumaryList.Value';
 
 export default SummaryList;

package/src/components/Table/Table.tsx

@@ -2,12 +2,12 @@ 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> = ({
+const Table = ({
     children,
     className,
     smallscreen,
     ...props
-}) => {
+}: SGDS.Component.Table) => {
     const ref = useRef(null);
 
     useEffect(() => {

package/src/components/Tabs/Tabs.tsx

@@ -1,17 +1,17 @@
-import React, { isValidElement, Children, useEffect, useRef } from 'react';
+import React, { Children, useEffect, useRef } from 'react';
 import WrapperTag from '../../common/WrapperTag';
 // @ts-ignore
 import DSTabs from '@scottish-government/design-system/src/components/tabs/tabs';
 import slugify from '../../utils/slugify';
 
-const TabItem: React.FC<SGDS.Component.Tabs.Item> = ({
+const TabItem = ({
     bordered,
     children,
     className,
     id,
     tabLabel,
     ...props
-}) => {
+}: SGDS.Component.Tabs.Item) => {
     return (
         <div
             className={[
@@ -27,19 +27,18 @@ const TabItem: React.FC<SGDS.Component.Tabs.Item> = ({
     );
 };
 
-const TabListItem: React.FC<SGDS.Component.Tabs.TabListItem> = ({
-    title,
+const TabListItem = ({
+    children,
     href
-}) => {
+}: SGDS.Component.Tabs.TabListItem) => {
     return (
         <li className="ds_tabs__tab">
-            <a className="ds_tabs__tab-link" href={href}>{title}</a>
+            <a className="ds_tabs__tab-link" href={href}>{children}</a>
         </li>
     );
 }
 
-const Tabs: React.FC<SGDS.Component.Tabs>
-    & { Item: React.FC<SGDS.Component.Tabs.Item> } = ({
+const Tabs = ({
     baseId = 'tabs',
     bordered = true,
     children,
@@ -48,7 +47,7 @@ const Tabs: React.FC<SGDS.Component.Tabs>
     manual = false,
     title = 'Contents',
     ...props
-}) => {
+}: SGDS.Component.Tabs) => {
     const ref = useRef(null);
 
     const headingId = `${baseId}-heading`;
@@ -60,10 +59,10 @@ const Tabs: React.FC<SGDS.Component.Tabs>
     }, [ref]);
 
     const processedItems = Children.map(children, child => {
-        if (isValidElement(child) && child.type === TabItem) {
-            let thisChild = child as React.ReactElement<SGDS.Component.Tabs.Item>;
+        const thisChild = child as React.ReactElement<SGDS.Component.Tabs.Item>;
 
-            return React.cloneElement(thisChild as React.ReactElement<SGDS.Component.Tabs.Item>, {
+        if (thisChild && thisChild.type === TabItem) {
+            return React.cloneElement(thisChild, {
                 bordered: bordered,
                 id: thisChild.props.id || `${baseId}-${slugify(thisChild.props.tabLabel)}`,
             });
@@ -71,8 +70,8 @@ const Tabs: React.FC<SGDS.Component.Tabs>
     });
 
     const tabListItems = Children.map(processedItems, child => {
-        if (isValidElement(child) && child.type === TabItem) {
-            return React.createElement(TabListItem, { title: child.props.tabLabel, href: `#${child.props.id}` });
+        if (child && child.type === TabItem) {
+            return <TabListItem href={`#${child.props.id}`}>{child.props.tabLabel}</TabListItem>
         }
     });