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

package/src/components/Select/Select.test.tsx

@@ -4,28 +4,20 @@ import Select from './Select';
 
 const SELECT_ID = 'select-component';
 const LABEL_TEXT = 'choose a component';
-const OPTIONS = [
-    {
-        text: 'Accordion',
-        value: 'accordion'
-    },
-    {
-        text: 'Breadcrumbs',
-        value: 'breadcrumbs'
-    },
-    {
-        text: 'Button',
-        value: 'button'
-    }
-];
+const OPTIONS = <>
+    <option value="accordion">Accordion</option>
+    <option value="breadcrumbs">Breadcrumbs</option>
+    <option value="button">Button</option>
+</>;
 
 test('select renders correctly', () => {
     render(
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -55,9 +47,10 @@ test('select with width', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             width={SELECTWIDTH}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const selectWrapper = screen.getByRole('combobox').parentElement;
@@ -71,9 +64,10 @@ test('select with hint text', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             hintText={HINT_TEXT}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const hintTextEl = screen.getByText(HINT_TEXT);
@@ -90,9 +84,10 @@ test('select with custom name', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             name={SELECT_NAME}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -106,9 +101,10 @@ test('select with blur function', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             onBlur={ONBLUR_FUNCTION}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -125,9 +121,10 @@ test('select with change function', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             onChange={ONCHANGE_FUNCTION}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -144,9 +141,10 @@ test('select with placeholder option', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             placeholder={PLACEHOLDER_TEXT}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -162,9 +160,10 @@ test('select with initial value', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             defaultValue={INITIAL_VALUE}
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -179,10 +178,11 @@ test('select with error message', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
-            error
             errorMessage={ERROR_MESSAGE_TEXT}
-        />
+            hasError
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -201,9 +201,10 @@ test('passing additional props', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             data-test="foo"
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');
@@ -216,9 +217,10 @@ test('passing additional CSS classes', () => {
         <Select
             id={SELECT_ID}
             label={LABEL_TEXT}
-            options={OPTIONS}
             className="foo"
-        />
+        >
+            {OPTIONS}
+        </Select>
     );
 
     const select = screen.getByRole('combobox');

package/src/components/Select/Select.tsx

@@ -1,31 +1,22 @@
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import HintText from '../../common/HintText';
 
-const Option: React.FC<SGDS.Component.Select.Option> = function ({
-    text,
-    value
-}) {
-    return (
-        <option value={value}>{text}</option>
-    );
-};
-
-const Select: React.FC<SGDS.Component.Select> = function ({
+const Select = function ({
+    children,
     className,
     defaultValue,
-    error,
     errorMessage,
+    hasError,
     hintText,
     id,
     label,
     name,
     onBlur,
     onChange,
-    options,
     placeholder,
     width,
     ...props
-}) {
+}: SGDS.Component.Select) {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const describedbys: string[] = [];
@@ -53,7 +44,7 @@ const Select: React.FC<SGDS.Component.Select> = function ({
             <div
                 className={[
                     "ds_select-wrapper",
-                    error && 'ds_input--error',
+                    hasError && 'ds_input--error',
                     width && `ds_input--${width}`,
                     className
                 ].join(' ')}
@@ -61,7 +52,7 @@ const Select: React.FC<SGDS.Component.Select> = function ({
             >
                 <select
                     aria-describedby={describedbys.join(' ')}
-                    aria-invalid={error}
+                    aria-invalid={hasError}
                     className="ds_select"
                     defaultValue={defaultValue}
                     id={id}
@@ -70,13 +61,7 @@ const Select: React.FC<SGDS.Component.Select> = function ({
                     onChange={handleChange}
                 >
                     <option value="">{placeholder}</option>
-                    {options && options.map((option, index: number) => (
-                        <Option
-                            value={option.value}
-                            text={option.text}
-                            key={`option-${index}`}
-                        />
-                    ))}
+                    {children}
                 </select>
                 <span className="ds_select-arrow" aria-hidden="true"></span>
             </div>

package/src/components/SequentialNavigation/SequentialNavigation.test.tsx

@@ -2,18 +2,23 @@ import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import SequentialNavigation from './SequentialNavigation';
 
-const NEXT_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
+const NEXT_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#next' }
 const PREVIOUS_LINK_OBJECT = { title: 'Apply for or renew a Blue Badge?', href: '#prev' }
 
 test('sequential navigation renders correctly', () => {
     render(
-        <SequentialNavigation
-            next={NEXT_LINK_OBJECT}
-            previous={PREVIOUS_LINK_OBJECT}
-        />
+        <SequentialNavigation>
+            <SequentialNavigation.Previous href={PREVIOUS_LINK_OBJECT.href}>
+                {PREVIOUS_LINK_OBJECT.title}
+            </SequentialNavigation.Previous>
+            <SequentialNavigation.Next href={NEXT_LINK_OBJECT.href}>
+                {NEXT_LINK_OBJECT.title}
+            </SequentialNavigation.Next>
+        </SequentialNavigation>
     );
 
     const sequentialNavigation = screen.getByRole('navigation');
+
     const prevLink = screen.getAllByRole('link')[0];
     const prevLinkWrapper = prevLink.parentElement;
     const nextLink = screen.getAllByRole('link')[1];
@@ -34,18 +39,14 @@ test('sequential navigation renders correctly', () => {
     expect(nextLink.textContent).toEqual(NEXT_LINK_OBJECT.title);
     expect(nextLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--next');
     expect(nextLinkWrapper?.tagName).toEqual('DIV');
-    expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next')
+    expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next');
 });
 
 test('with custom aria label', () => {
     const ARIA_LABEL = 'My label';
 
     render(
-        <SequentialNavigation
-            ariaLabel={ARIA_LABEL}
-            next={NEXT_LINK_OBJECT}
-            previous={PREVIOUS_LINK_OBJECT}
-        />
+        <SequentialNavigation aria-label={ARIA_LABEL}/>
     );
 
     const sequentialNavigation = screen.getByRole('navigation');
@@ -53,13 +54,27 @@ test('with custom aria label', () => {
     expect(sequentialNavigation).toHaveAttribute('aria-label', ARIA_LABEL);
 });
 
+test('sequential nav links with custom element', () => {
+    render(
+        <SequentialNavigation>
+            <SequentialNavigation.Previous href={PREVIOUS_LINK_OBJECT.href} linkComponent={
+                ({ className, ...props }) => (
+                    <span role="link" className={className} {...props}/>
+                )}>
+                {PREVIOUS_LINK_OBJECT.title}
+            </SequentialNavigation.Previous>
+        </SequentialNavigation>
+    );
+
+    const link = screen.queryByRole('link');
+
+    expect(link?.tagName).toEqual('SPAN');
+    expect(link?.textContent).toEqual(PREVIOUS_LINK_OBJECT.title);
+});
+
 test('passing additional props', () => {
     render(
-        <SequentialNavigation
-            data-test="foo"
-            next={NEXT_LINK_OBJECT}
-            previous={PREVIOUS_LINK_OBJECT}
-        />
+        <SequentialNavigation data-test="foo" />
     );
 
     const sequentialNavigation = screen.getByRole('navigation');
@@ -68,11 +83,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SequentialNavigation
-            className="foo"
-            next={NEXT_LINK_OBJECT}
-            previous={PREVIOUS_LINK_OBJECT}
-        />
+        <SequentialNavigation className="foo" />
     );
 
     const sequentialNavigation = screen.getByRole('navigation');

package/src/components/SequentialNavigation/SequentialNavigation.tsx

@@ -1,44 +1,63 @@
-const NextLink: React.FC<SGDS.Component.SequentialNavigation.Link> = ({
+const SeqNavLink = ({
+    children,
     href,
-    title
-}) => {
+    isPrev,
+    linkComponent,
+    textLabel
+}: SGDS.Component.SequentialNavigation.Link) => {
+    const LINK_CLASSES = [
+        'ds_sequential-nav__button',
+        isPrev ? 'ds_sequential-nav__button--left' : 'ds_sequential-nav__button--right'
+    ].join(' ');
+
+    const ITEM_CLASSES = [
+        'ds_sequential-nav__item',
+        isPrev ? 'ds_sequential-nav__item--prev' : 'ds_sequential-nav__item--next'
+    ].join(' ');
+
+    function processChildren(children: React.ReactNode) {
+        const linkInner = <span className="ds_sequential-nav__text" data-label={textLabel}>{children}</span>
+
+        if (linkComponent) {
+            return linkComponent({ className: LINK_CLASSES, href, children: linkInner });
+        } else {
+            return <a href={href} className={LINK_CLASSES}>{linkInner}</a>;
+        }
+    }
+
     return (
         <div
-            className="ds_sequential-nav__item  ds_sequential-nav__item--next"
+            className={ITEM_CLASSES}
         >
-            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--right">
-                <span className="ds_sequential-nav__text" data-label="Next">
-                    {title}
-                </span>
-            </a>
+            {processChildren(children)}
         </div>
-    );
+    )
 };
 
-const PrevLink: React.FC<SGDS.Component.SequentialNavigation.Link> = ({
+const NextLink = ({
+    children,
     href,
-    title,
-}) => {
-    return (
-        <div
-            className="ds_sequential-nav__item  ds_sequential-nav__item--prev"
-        >
-            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--left">
-                <span className="ds_sequential-nav__text" data-label="Previous">
-                    {title}
-                </span>
-            </a>
-        </div>
-    );
+    linkComponent,
+    textLabel = 'Next'
+}: SGDS.Component.SequentialNavigation.Link) => {
+    return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel}>{children}</SeqNavLink>
+};
+
+const PreviousLink = ({
+    children,
+    href,
+    linkComponent,
+    textLabel = 'Previous'
+}: SGDS.Component.SequentialNavigation.Link) => {
+    return <SeqNavLink href={href} linkComponent={linkComponent} textLabel={textLabel} isPrev>{children}</SeqNavLink>
 };
 
-const SequentialNavigation: React.FC<SGDS.Component.SequentialNavigation> = ({
+const SequentialNavigation = ({
     ariaLabel = 'Article navigation',
+    children,
     className,
-    next,
-    previous,
     ...props
-}) => {
+}: SGDS.Component.SequentialNavigation) => {
     return (
         <nav
             className={[
@@ -48,12 +67,15 @@ const SequentialNavigation: React.FC<SGDS.Component.SequentialNavigation> = ({
             aria-label={ariaLabel}
             {...props}
         >
-            {previous && <PrevLink href={previous.href} title={previous.title}></PrevLink>}
-            {next && <NextLink href={next.href} title={next.title}></NextLink>}
+            {children}
         </nav>
     );
 };
 
 SequentialNavigation.displayName = 'SequentialNavigation';
+SequentialNavigation.Next = NextLink;
+SequentialNavigation.Previous = PreviousLink;
+NextLink.displayName = 'SequentialNavigation.Next';
+PreviousLink.displayName = 'SequentialNavigation.Previous';
 
 export default SequentialNavigation;

package/src/components/SideNavigation/SideNavigation.test.tsx

@@ -1,49 +1,27 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import SideNavigation, { List, Link } from './SideNavigation';
-
-const ITEMS = [
-    {
-        title: 'Apples',
-        href: '#apples',
-        items: [
-            {
-                title: 'Green apples',
-                href: '#green-apples',
-                items: [
-                    {
-                        title: 'Bramley',
-                        current: true
-                    },
-                    {
-                        title: 'Granny Smith',
-                        href: '#granny-smith'
-                    }
-                ]
-            },
-            {
-                title: 'Red apples',
-                href: '#red-apples'
-            }
-        ]
-    },
-    {
-        title: 'Bananas',
-        href: '#bananas'
-    },
-    {
-        title: 'Cherries',
-        href: '#cherries'
-    },
-    {
-        title: 'Dates',
-        href: '#dates'
-    }
-];
+import SideNavigation from './SideNavigation';
 
 test('side navigation renders correctly', () => {
     render(
-        <SideNavigation items={ITEMS} />
+        <SideNavigation>
+            <SideNavigation.List isRoot>
+                <SideNavigation.Item href="#apples" title="Apples">
+                    <SideNavigation.List>
+                        <SideNavigation.Item href="#green-apples" title="Green apples">
+                            <SideNavigation.List>
+                                <SideNavigation.Item href="#bramley" title="Bramley" current/>
+                                <SideNavigation.Item href="#granny-smith" title="Granny smith"/>
+                            </SideNavigation.List>
+                        </SideNavigation.Item>
+                        <SideNavigation.Item href="#red-apples" title="Red apples"/>
+                    </SideNavigation.List>
+                </SideNavigation.Item>
+                <SideNavigation.Item href="#bananas" title="Bananas" />
+                <SideNavigation.Item href="#cherries" title="Cherries" />
+                <SideNavigation.Item href="#dates" title="Dates"/>
+            </SideNavigation.List>
+        </SideNavigation>
     );
 
     const sideNavigation = screen.getByRole('navigation');
@@ -63,16 +41,11 @@ test('side navigation renders correctly', () => {
     expect(label?.textContent).toEqual('Show all Pages in this section');
 
     expect(rootList).toHaveAttribute('id', 'side-navigation-root');
-
-    // some specifics of this case
-    expect(rootList.children.length).toEqual(4);
-    expect(document.querySelectorAll('.ds_side-navigation__link').length).toEqual(8);
-    expect(document.querySelectorAll('.ds_side-navigation__list').length).toEqual(3);
 });
 
 test('side nav link renders correctly', () => {
     render(
-        <Link title="Green apples" href="#green-apples" />
+        <SideNavigation.Item href="#green-apples" title="Green apples" />
     );
 
     const item = screen.getByRole('listitem');
@@ -87,7 +60,7 @@ test('side nav link renders correctly', () => {
 
 test('current side nav item without link renders correctly', () => {
     render(
-        <Link title="Green apples" href="#green-apples" current />
+        <SideNavigation.Item href="#green-apples" title="Green apples" current />
     );
 
     const item = screen.getByRole('listitem');
@@ -99,22 +72,18 @@ test('current side nav item without link renders correctly', () => {
 
 test('side nav link with children', () => {
     render(
-        <Link title="Green apples" href="#green-apples" items={[{
-            title: 'Bramley',
-            href: '#bramley'
-        },
-        {
-            title: 'Granny Smith',
-            href: '#granny-smith'
-        }]} />
+        <SideNavigation.Item href="#green-apples" title="Green apples">
+            <SideNavigation.List>
+                <SideNavigation.Item href="#bramley" title="Bramley" />
+            </SideNavigation.List>
+        </SideNavigation.Item>
     );
 
     const childList = screen.getByRole('list');
-    const childItem = screen.getAllByRole('listitem')[1];
+    const childItem = within(childList).getByRole('listitem');
     const childLink = within(childItem).getByRole('link');
 
     expect(childList).toHaveClass('ds_side-navigation__list');
-    expect(childList.children.length).toEqual(2);
 
     // check properties of first child link
     expect(childItem).toHaveClass('ds_side-navigation__item');
@@ -123,41 +92,26 @@ test('side nav link with children', () => {
     expect(childLink.textContent).toEqual('Bramley');
 });
 
-test('side nav list renders correctly', () => {
-    const ITEMS = [
-        {
-            title: 'Bramley',
-            href: '#bramley'
-        },
-        {
-            title: 'Granny Smith',
-            href: '#granny-smith'
-        }
-    ];
+test('side nav link with custom element', () => {
+    const LINK_TEXT = 'Green apples'
 
     render(
-        <List items={ITEMS}/>
+        <SideNavigation.Item href="#green-apples" title={LINK_TEXT} linkComponent={
+            ({ className, ...props }) => (
+                <span role="link" className={className} {...props}/>
+            )}/>
     );
 
-    const list = screen.getByRole('list');
-    const item = screen.getAllByRole('listitem')[0];
-    const link = within(item).getByRole('link');
-
-    expect(list).toHaveClass('ds_side-navigation__list');
-    expect(list.tagName).toEqual('UL');
-
-    expect(list.children.length).toEqual(ITEMS.length);
+    const item = screen.getByRole('listitem');
+    const link = within(item).queryByRole('link');
 
-    // check properties of first link
-    expect(item).toHaveClass('ds_side-navigation__item');
-    expect(link).toHaveClass('ds_side-navigation__link');
-    expect(link).toHaveAttribute('href', '#bramley');
-    expect(link.textContent).toEqual('Bramley');
+    expect(link?.tagName).toEqual('SPAN');
+    expect(link?.textContent).toEqual(LINK_TEXT);
 });
 
 test('passing additional props', () => {
     render(
-        <SideNavigation data-test="foo" items={ITEMS} />
+        <SideNavigation data-test="foo" />
     );
 
     const sideNavigation = screen.getByRole('navigation');
@@ -166,7 +120,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <SideNavigation className="foo" items={ITEMS} />
+        <SideNavigation className="foo" />
     );
 
     const sideNavigation = screen.getByRole('navigation');