@scottish-government/designsystem-react 0.7.0 → 0.8.0

package/src/components/SiteNavigation/SiteNavigation.tsx

@@ -1,27 +1,39 @@
-const SiteNavLink: React.FC<SGDS.Component.SiteNavigation.Link> = ({
-    current=false,
+const Item = ({
+    children,
+    current = false,
     href,
-    title
-}) => {
+    linkComponent
+}: SGDS.Component.SiteNavigation.Item) => {
+    const classNames = ['ds_site-navigation__link'];
+    let ariaCurrent: React.AriaAttributes["aria-current"];
+
+    if (current) {
+        classNames.push('ds_current');
+        ariaCurrent = 'page';
+    }
+
+    function processChildren(children: React.ReactNode) {
+        if (linkComponent) {
+            return linkComponent({ className: classNames.join(' '), href, children });
+        } else if (href) {
+            return <a href={href} aria-current={ariaCurrent ? ariaCurrent : undefined} className={classNames.join(' ')}>{children}</a>;
+        }
+    }
+
     return (
         <li
             className="ds_site-navigation__item"
         >
-            <a
-                href={href}
-                className={[
-                    'ds_site-navigation__link',
-                    current ? 'ds_current' : undefined
-                ].join(' ')}>{title}</a>
+            {processChildren(children)}
         </li>
     );
 };
 
-const SiteNavigation: React.FC<SGDS.Component.SiteNavigation> = ({
+const SiteNavigation = ({
+    children,
     className,
-    items,
     ...props
-}) => {
+}: SGDS.Component.SiteNavigation) => {
     return (
         <nav
             className={[
@@ -31,14 +43,14 @@ const SiteNavigation: React.FC<SGDS.Component.SiteNavigation> = ({
             {...props}
         >
             <ul className="ds_site-navigation__list">
-                {items && items.map((item, index: number) => (
-                    <SiteNavLink current={item.current} href={item.href} title={item.title} key={`link-${index}`} />
-                ))}
+                {children}
             </ul>
         </nav>
     );
 };
 
 SiteNavigation.displayName = 'SiteNavigation';
+SiteNavigation.Item = Item;
+Item.displayName = 'SiteNavigation.Item';
 
 export default SiteNavigation;

package/src/components/SiteSearch/SiteSearch.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
 import Button from '../Button/Button';
 
-const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
+const SiteSearch = function ({
     action = '/search',
     autocompleteEndpoint,
     autocompleteSuggestionMappingFunction,
@@ -14,7 +14,7 @@ const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
     name = 'q',
     placeholder = 'Search',
     ...props
-}) {
+}: SGDS.Component.SiteSearch) {
     const ref = useRef(null);
     const hasAutocomplete = !!autocompleteEndpoint;
     let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';

package/src/components/SkipLinks/SkipLinks.test.tsx

@@ -54,23 +54,35 @@ test('custom link target', () => {
     expect(skipLinksLink).toHaveAttribute('href', `#${CUSTOM_ID}`)
 });
 
-test('additional links', () => {
-    const ITEMS = [
-        { title: 'foo', targetId: 'bar' }
-    ];
+test('explicit links', () => {
+    const LINK_ID = 'foo';
+    const LINK_TEXT = 'bar';
 
     render(
-        <SkipLinks items={ITEMS} />
+        <SkipLinks>
+            <SkipLinks.Link fragmentId={LINK_ID}>{LINK_TEXT}</SkipLinks.Link>
+        </SkipLinks>
     );
 
     const skipLinksList = screen.getByRole('list');
     const skipLinksListItems = within(skipLinksList).getAllByRole('listitem');
-    const skipLinksSecondLink = within(skipLinksList).getAllByRole('link')[1];
+    const skipLinksSecondLink = within(skipLinksList).getByRole('link');
 
-    expect(skipLinksListItems.length).toEqual(2);
-    expect(skipLinksSecondLink).toHaveAttribute('href', `#${ITEMS[0].targetId}`);
-    expect(skipLinksSecondLink.textContent).toEqual(ITEMS[0].title);
-})
+    expect(skipLinksListItems.length).toEqual(1);
+    expect(skipLinksSecondLink).toHaveAttribute('href', `#${LINK_ID}`);
+    expect(skipLinksSecondLink.textContent).toEqual(LINK_TEXT);
+});
+
+test('static skip links', () => {
+    render(
+        <SkipLinks isStatic />
+    );
+
+    const skipLinksList = screen.getByRole('list');
+    const skipLinksContainer = skipLinksList.parentElement;
+
+    expect(skipLinksContainer).toHaveClass('ds_skip-links--static');
+});
 
 test('passing additional props', () => {
     render(

package/src/components/SkipLinks/SkipLinks.tsx

@@ -1,39 +1,40 @@
-export const SkipLink: React.FC<SGDS.Component.SkipLinks.Link> = ({
-    targetId,
-    title
-}) => {
+const Link = ({
+    children,
+    fragmentId
+}: SGDS.Component.SkipLinks.Link) => {
     return (
         <li
             className="ds_skip-links__item"
         >
-            <a href={`#${targetId}`} className="ds_skip-links__link">{ title }</a>
+            <a href={`#${fragmentId}`} className="ds_skip-links__link">{ children }</a>
         </li>
     );
 };
 
-const SkipLinks: React.FC<SGDS.Component.SkipLinks> = ({
-    items,
+const SkipLinks = ({
+    children,
     mainContentId = 'main-content',
     mainLinkText = 'Skip to main content',
+    isStatic,
     ...props
-}) => {
+}: SGDS.Component.SkipLinks) => {
     return (
         <div
-            className="ds_skip-links"
+            className={[
+                'ds_skip-links',
+                isStatic && 'ds_skip-links--static',
+            ].join(' ')}
             {...props}
         >
             <ul className="ds_skip-links__list">
-                <SkipLink title={mainLinkText} targetId={mainContentId}/>
-
-                {items && items.map((item, index: number) => (
-                    <SkipLink title={item.title} targetId={item.targetId} key={`skiplink-${index}`}/>
-                ))}
+                {children ? children : <Link fragmentId={mainContentId}>{mainLinkText}</Link>}
             </ul>
         </div>
     );
 };
 
 SkipLinks.displayName = 'SkipLinks';
-SkipLink.displayName = 'SkipLink';
+Link.displayName = 'SkipLink';
+SkipLinks.Link = Link;
 
 export default SkipLinks;

package/src/components/SummaryCard/SummaryCard.test.tsx

@@ -30,29 +30,21 @@ const ITEMS = [
 const TITLE_TEXT = 'Joe Bloggs';
 
 test('summary card renders correctly', () => {
-    const DESCRIBEDBY_ID = 'summary-card-joe-bloggs';
-
     render(
-        <>
-            <SummaryCard
-                data-testid="foo"
-                actions={ACTIONS}
-                items={ITEMS}
-                title={TITLE_TEXT}
-            />
-
-            <SummaryList data-testid="bar" items={ITEMS}/>
-        </>
+        <SummaryCard
+            data-testid="foo"
+            title={TITLE_TEXT}
+        >
+            <SummaryCard.Action href={ACTIONS[0].href}>{ACTIONS[0].title}</SummaryCard.Action>
+            <SummaryList data-testid="bar" />
+        </SummaryCard>
     );
 
     const summaryCard = screen.getByTestId('foo');
     const title = within(summaryCard).getByRole('heading');
     const header = title.parentElement as HTMLElement;
     const content = header?.nextElementSibling as HTMLElement;
-    const actionsList = within(header).getByRole('list')
-
-    const thisList = within(content).getByRole('list');
-    const comparisonList = screen.getByTestId('bar');
+    const action = within(header).getByRole('link');
 
     expect(summaryCard).toHaveClass('ds_summary-card');
 
@@ -60,34 +52,20 @@ test('summary card renders correctly', () => {
     expect(header?.tagName).toEqual('DIV');
 
     expect(title).toHaveClass('ds_summary-card__header-title');
-    expect(title).toHaveAttribute('id', DESCRIBEDBY_ID);
     expect(title?.tagName).toEqual('H3');
     expect(title.textContent).toEqual(TITLE_TEXT);
 
-    expect(actionsList?.tagName).toEqual('UL');
-    expect(actionsList.children.length).toEqual(ACTIONS.length);
-    expect(actionsList.children[0]).toHaveClass('ds_summary-card__actions-list-item');
-    expect(actionsList.children[0].tagName).toEqual('LI');
-    expect(actionsList.children[0].innerHTML).toEqual('<a aria-describedby="summary-card-joe-bloggs" class="ds_link" href="#foo">Change</a>');
-    expect(actionsList.children[1].innerHTML).toEqual('<button aria-describedby="summary-card-joe-bloggs" class="ds_link" type="button">Delete</button>');
-
-    fireEvent.click(actionsList.children[1].children[0]);
-
-    expect(ONCLICK_FUNCTION).toHaveBeenCalled();
+    expect(action).toHaveAttribute('aria-describedby', title.id);
 
     expect(content).toHaveClass('ds_summary-card__content');
     expect(content?.tagName).toEqual('DIV');
-
-    expect(thisList?.innerHTML).toEqual(comparisonList?.innerHTML);
 });
 
 test('custom heading level', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={ACTIONS}
             headingLevel="h2"
-            items={ITEMS}
             title={TITLE_TEXT}
         />
     );
@@ -98,12 +76,32 @@ test('custom heading level', () => {
     expect(title?.tagName).toEqual('H2');
 });
 
+test('summary card with multiple actions renders actions as a list', () => {
+    render(
+        <SummaryCard
+            data-testid="foo"
+            title={TITLE_TEXT}
+        >
+            <SummaryCard.Action href={ACTIONS[0].href}>{ACTIONS[0].title}</SummaryCard.Action>
+            <SummaryCard.Action onclick={ACTIONS[1].onclick}>{ACTIONS[1].title}</SummaryCard.Action>
+            <SummaryList data-testid="bar" />
+        </SummaryCard>
+    );
+
+    const summaryCard = screen.getByTestId('foo');
+    const title = within(summaryCard).getByRole('heading');
+    const header = title.parentElement as HTMLElement;
+    const actionsList = within(header).getByRole('list')
+
+    expect(actionsList?.tagName).toEqual('UL');
+    expect(actionsList.children[0]).toHaveClass('ds_summary-card__actions-list-item');
+    expect(actionsList.children[0].tagName).toEqual('LI');
+});
+
 test('passing additional props', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={ACTIONS}
-            items={ITEMS}
             title={TITLE_TEXT}
             data-test="foo"
         />
@@ -117,8 +115,6 @@ test('passing additional CSS classes', () => {
     render(
         <SummaryCard
             data-testid="foo"
-            actions={ACTIONS}
-            items={ITEMS}
             title={TITLE_TEXT}
             className="foo"
         />

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;