@scottish-government/designsystem-react 0.0.0

package/src/common/hint-text.test.tsx

@@ -0,0 +1,47 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import HintText from './hint-text';
+
+const id = 'hint-text';
+const content = 'Hint text';
+
+test('hint test renders correctly', () => {
+    render(
+        <HintText data-testid="hint-text"
+            id={id}
+            text={content}
+        />
+    );
+
+    const hintText = screen.getByTestId('hint-text');
+    expect(hintText).toHaveClass('ds_hint-text');
+    expect(hintText).toHaveAttribute('id', id);
+    expect(hintText.tagName).toEqual('P');
+    expect(hintText.textContent).toEqual(content);
+});
+
+test('hint test with children instead of text', () => {
+    render(
+        <HintText data-testid="hint-text"
+            id={id}
+        >
+            <span>{content}</span>
+        </HintText>
+    );
+
+    const hintText = screen.getByTestId('hint-text');
+    expect(hintText.innerHTML).toEqual(`<span>${content}</span>`);
+});
+
+test('passing additional props', () => {
+    render(
+        <HintText data-testid="hint-text"
+            id={id}
+            text={content}
+            data-test="foo"
+        />
+    );
+
+    const hintText = screen.getByTestId('hint-text');
+    expect(hintText?.dataset.test).toEqual('foo');
+});

package/src/common/hint-text.tsx

@@ -0,0 +1,21 @@
+const HintText: React.FC<SGDS.Common.HintText> = ({
+    children,
+    id,
+    text,
+    ...props
+}) => {
+    return (
+        <p
+            className="ds_hint-text"
+            dangerouslySetInnerHTML={text ? { __html: text } : undefined}
+            id={id}
+            {...props}
+        >
+            {!text ? children : null}
+        </p>
+    );
+};
+
+HintText.displayName = 'HintText';
+
+export default HintText;

package/src/common/icon.test.tsx

@@ -0,0 +1,100 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Icon from './icon';
+
+const defaultIconPath = './icons.stack.svg';
+const iconName = 'search';
+
+test('icon renders correctly', () => {
+    render(
+        <Icon data-testid="icon"
+            icon={iconName}
+        />
+    );
+
+    const icon = screen.getByRole('img', {hidden: true});
+    const use = icon.children[0];
+
+    expect(icon).toHaveClass('ds_icon');
+    expect(icon).toHaveAttribute('aria-hidden');
+    expect(icon).toHaveAttribute('role', 'img');
+    expect(icon.tagName).toEqual('svg');
+
+    expect(use).toHaveAttribute('xlink:href', `${defaultIconPath}#${iconName}`)
+    expect(use.tagName).toEqual('use')
+});
+
+test('icon with class name', () => {
+    const className = 'foo';
+
+    render(
+        <Icon data-testid="icon"
+            icon={iconName}
+            className={className}
+        />
+    );
+
+    const icon = screen.getByRole('img', {hidden: true});
+
+    expect(icon).toHaveClass('foo');
+});
+
+test('icon with fill', () => {
+    render(
+        <Icon data-testid="icon"
+            icon={iconName}
+            fill
+        />
+    );
+
+    const icon = screen.getByRole('img', {hidden: true});
+
+    expect(icon).toHaveClass('ds_icon--fill');
+});
+
+test('icon with custom path', () => {
+    const iconPath = '/path/to/icons.stack.svg';
+
+    render(
+        <Icon data-testid="icon"
+            icon={iconName}
+            iconPath={iconPath}
+        />
+    );
+
+    const icon = screen.getByRole('img', {hidden: true});
+    const use = icon.children[0];
+
+    expect(use).toHaveAttribute('xlink:href', `${iconPath}#${iconName}`)
+});
+
+test('icon with size', () => {
+    const size = 48;
+
+    render(
+        <Icon data-testid="icon"
+            icon={iconName}
+            iconSize={size}
+        />
+    );
+
+    const icon = screen.getByRole('img', {hidden: true});
+
+    expect(icon).toHaveClass(`ds_icon--${size}`);
+});
+
+test('icon with title', () => {
+    const title = 'My icon';
+
+    render(
+        <Icon data-testid="icon"
+            icon={iconName}
+            title={title}
+        />
+    );
+
+    const icon = screen.getByRole('img', {hidden: true});
+
+    expect(icon).toHaveAttribute('aria-label', title);
+    expect(icon).not.toHaveAttribute('aria-hidden');
+});

package/src/common/icon.tsx

@@ -0,0 +1,28 @@
+const Icon: React.FC<SGDS.Common.Icon> = ({
+    className,
+    fill,
+    icon,
+    iconPath = './icons.stack.svg',
+    iconSize,
+    title
+}) => {
+    return (
+        <svg
+            aria-hidden={title ? undefined : true}
+            aria-label={title}
+            className={[
+                'ds_icon',
+                className,
+                fill && 'ds_icon--fill',
+                iconSize && `ds_icon--${iconSize}`
+            ].join(' ')}
+            role="img"
+        >
+            <use xlinkHref={`${iconPath}#${icon}`} />
+        </svg>
+    );
+};
+
+Icon.displayName = 'Icon';
+
+export default Icon;

package/src/common/screen-reader-text.test.tsx

@@ -0,0 +1,31 @@
+import { test, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import ScreenReaderText from './screen-reader-text';
+
+const content = 'My content';
+
+test('screen reader text renders correctly', () => {
+    render(
+        <ScreenReaderText>
+            {content}
+        </ScreenReaderText>
+    );
+
+    const srtext = document.querySelector('span');
+
+    expect(srtext).toHaveClass('visually-hidden');
+    expect(srtext.textContent).toEqual(content)
+});
+
+test('passing additional props', () => {
+    render(
+        <ScreenReaderText
+            data-test="foo"
+        >
+            {content}
+        </ScreenReaderText>
+    );
+
+    const srtext = document.querySelector('span');
+    expect(srtext?.dataset.test).toEqual('foo');
+});

package/src/common/screen-reader-text.tsx

@@ -0,0 +1,17 @@
+const ScreenReaderText: React.FC<SGDS.Common.ScreenReaderText> = ({
+    children,
+    ...props
+}) => {
+    return (
+        <span
+            className="visually-hidden"
+            {...props}
+        >
+            {children}
+        </span>
+    );
+};
+
+ScreenReaderText.displayName = 'ScreenReaderText';
+
+export default ScreenReaderText;

package/src/common/wrapper-tag.test.tsx

@@ -0,0 +1,42 @@
+import { test, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import WrapperTag from './wrapper-tag';
+
+const content = 'My content';
+
+test('wrapper tag renders correctly', () => {
+    render(
+        <WrapperTag id="foo">
+            {content}
+        </WrapperTag>
+    );
+
+    const wrapper = document.querySelector('#foo');
+
+    expect(wrapper.tagName).toEqual('DIV');
+});
+
+test('wrapper tag widh tag name', () => {
+    render(
+        <WrapperTag id="foo"
+            tagName="section"
+        >
+            {content}
+        </WrapperTag>
+    );
+
+    const wrapper = document.querySelector('#foo');
+
+    expect(wrapper.tagName).toEqual('SECTION');
+});
+
+test('passing additional props', () => {
+    render(
+        <WrapperTag id="foo" data-test="foo">
+            {content}
+        </WrapperTag>
+    );
+
+    const wrapper = document.querySelector('#foo');
+    expect(wrapper?.dataset.test).toEqual('foo');
+});

package/src/common/wrapper-tag.tsx

@@ -0,0 +1,15 @@
+/**
+ * Wraps all children in a specified HTML tag.
+ */
+const WrapperTag: React.FC<SGDS.Common.WrapperTag> = ({
+    children,
+    tagName = 'div',
+    ...props
+}) => {
+    const TagName = tagName;
+    return <TagName {...props}>{children}</TagName>;
+};
+
+WrapperTag.displayName = 'WrapperTag';
+
+export default WrapperTag;

package/src/components/accordion/accordion.test.tsx

@@ -0,0 +1,212 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Accordion, { AccordionItem } from './accordion';
+
+const id = 'my-accordion';
+const itemId = 'my-accordion-item';
+const titleText = 'Healthcare for veterans';
+const contentText = `Veterans are entitled to the same healthcare as any citizen. And there
+    are health care options and support available specifically for veterans`;
+
+test('accordion renders correctly', () => {
+    const defaultHeaderLevel = 'h3';
+
+    render(
+        <Accordion id={id} data-testid={id}>
+            <AccordionItem id="accordion-1" title="Healthcare for veterans">
+                <p>Veterans are entitled to the same healthcare as any citizen. And there
+                    are health care options and support available specifically for veterans.</p>
+                <p>If you have a health condition that’s related to your service, you’re
+                    entitled to priority treatment based on clinical need.</p>
+            </AccordionItem>
+            <AccordionItem open id="accordion-2" title="Employability for veterans">
+                <p>If you&apos;re looking for a job, there are several organisations that can help
+                    you <a href="#accordion-link">find a job or develop new skills</a>.</p>
+            </AccordionItem>
+            <AccordionItem id="accordion-3" title="Housing for veterans">
+                <p>If you need <a href="#accordion-link">help finding a place to live</a>{' '}
+                    there&apos;s support specifically for veterans.</p>
+            </AccordionItem>
+        </Accordion>
+    );
+
+    // console.log(items.map(item => { console.log(item.id); return item.title; }));
+
+    const accordion = screen.getByTestId(id);
+    const openAllButton = document.querySelector('.ds_accordion__open-all');
+    const accordionItems = document.querySelectorAll('.ds_accordion-item');
+    const firstAccordionTitle = document.querySelector('.ds_accordion-item__title');
+
+    expect(accordion).toHaveClass('ds_accordion');
+    expect(accordion.tagName).toEqual('DIV');
+
+    expect(openAllButton).toHaveClass('ds_accordion__open-all', 'ds_link', 'js-open-all');
+    expect(openAllButton).toHaveAttribute('type', 'button');
+    expect(openAllButton.textContent).toEqual('Open all sections');
+    expect(openAllButton.innerHTML).toEqual('Open all <span class="visually-hidden">sections</span>');
+
+    expect(accordionItems.length).toEqual(3);
+
+    expect(firstAccordionTitle.tagName).toEqual(defaultHeaderLevel.toUpperCase());
+});
+
+test('accordion without open all', () => {
+    render(
+        <Accordion id={id} data-testid={id} hideOpenAll>
+            <AccordionItem id="accordion-1" title="Healthcare for veterans">
+                <p>Veterans are entitled to the same healthcare as any citizen. And there
+                    are health care options and support available specifically for veterans.</p>
+                <p>If you have a health condition that’s related to your service, you’re
+                    entitled to priority treatment based on clinical need.</p>
+            </AccordionItem>
+            <AccordionItem id="accordion-2" title="Employability for veterans">
+                <p>If you&apos;re looking for a job, there are several organisations that can help
+                    you <a href="#accordion-link">find a job or develop new skills</a>.</p>
+            </AccordionItem>
+            <AccordionItem id="accordion-3" title="Housing for veterans">
+                <p>If you need <a href="#accordion-link">help finding a place to live</a>{' '}
+                    there&apos;s support specifically for veterans.</p>
+            </AccordionItem>
+        </Accordion>
+    );
+
+    const openAllButton = document.querySelector('.ds_accordion__open-all');
+
+    expect(openAllButton).toBeNull();
+});
+
+test('empty accordion has no open all', () => {
+    render(
+        <Accordion id={id} data-testid={id} hideOpenAll>
+        </Accordion>
+    );
+
+    const openAllButton = document.querySelector('.ds_accordion__open-all');
+
+    expect(openAllButton).toBeNull();
+})
+
+test('accordion with custom header level', () => {
+    const headerLevel = 'h2';
+
+    render(
+        <Accordion id={id} data-testid={id} headerLevel={headerLevel}>
+            <AccordionItem id="accordion-1" title="Healthcare for veterans">
+                <p>Veterans are entitled to the same healthcare as any citizen. And there
+                    are health care options and support available specifically for veterans.</p>
+                <p>If you have a health condition that’s related to your service, you’re
+                    entitled to priority treatment based on clinical need.</p>
+            </AccordionItem>
+        </Accordion>
+    );
+
+    const firstAccordionTitle = document.querySelector('.ds_accordion-item__title');
+    expect(firstAccordionTitle.tagName).toEqual(headerLevel.toUpperCase());
+});
+
+test('passing additional props to accordion', () => {
+    render(
+        <Accordion id={id} data-testid={id} data-test="foo">
+        </Accordion>
+    );
+
+    const accordion = screen.getByTestId(id);
+    expect(accordion?.dataset.test).toEqual('foo');
+});
+
+test('accordion item renders correctly', () => {
+    render(
+        <AccordionItem id={itemId} data-testid={itemId} title={titleText}>
+            <p>{contentText}</p>
+        </AccordionItem>
+    );
+
+    const accordionItem = screen.getByTestId(itemId);
+    const input = within(accordionItem).getByRole('checkbox');
+    const header = document.querySelector('.ds_accordion-item__header');
+    const title = header?.querySelector('.ds_accordion-item__title');
+    const indicator = header?.querySelector('.ds_accordion-item__indicator');
+    const label = header.querySelector('.ds_accordion-item__label');
+    const body = document.querySelector('.ds_accordion-item__body');
+
+    expect(accordionItem).toHaveClass('ds_accordion-item');
+    expect(accordionItem).toHaveAttribute('id', itemId);
+
+    expect(input).toHaveClass('ds_accordion-item__control', 'visually-hidden')
+    expect(input).toHaveAttribute('id', `${itemId}-control`);
+
+    expect(header.tagName).toEqual('DIV');
+
+    expect(title).toHaveAttribute('id', `panel-${itemId}-heading`);
+    expect(title.tagName).toEqual('H3');
+    expect(title.textContent).toEqual(titleText);
+
+    expect(indicator.tagName).toEqual('SPAN');
+
+    expect(label).toHaveAttribute('for', input.id);
+    expect(label.tagName).toEqual('LABEL');
+    expect(label.textContent).toEqual('Show this section');
+    expect(label?.children[0]).toHaveClass('visually-hidden');
+
+    expect(body.innerHTML).toEqual(`<p>${contentText}</p>`);
+});
+
+test('accordion items without ID are given unique IDs', () => {
+    render(
+        <Accordion id={id} data-testid={id} hideOpenAll>
+            <AccordionItem data-testid="item1" title="Healthcare for veterans">
+                <p>Veterans are entitled to the same healthcare as any citizen. And there
+                    are health care options and support available specifically for veterans.</p>
+                <p>If you have a health condition that’s related to your service, you’re
+                    entitled to priority treatment based on clinical need.</p>
+            </AccordionItem>
+            <AccordionItem data-testid="item2" title="Employability for veterans">
+                <p>If you&apos;re looking for a job, there are several organisations that can help
+                    you <a href="#accordion-link">find a job or develop new skills</a>.</p>
+            </AccordionItem>
+            <AccordionItem data-testid="item3" title="Housing for veterans">
+                <p>If you need <a href="#accordion-link">help finding a place to live</a>{' '}
+                    there&apos;s support specifically for veterans.</p>
+            </AccordionItem>
+        </Accordion>
+    );
+
+    const accordionItem1 = screen.getByTestId('item1');
+    const accordionItem2 = screen.getByTestId('item2');
+    const accordionItem3 = screen.getByTestId('item3');
+
+    let idModifier = Number(accordionItem1.id.replace('accordion-item-', ''));
+
+    expect(accordionItem1).toHaveAttribute('id', `accordion-item-${idModifier}`);
+    idModifier = idModifier + 1;
+    expect(accordionItem2).toHaveAttribute('id', `accordion-item-${idModifier}`);
+    idModifier = idModifier + 1;
+    expect(accordionItem3).toHaveAttribute('id', `accordion-item-${idModifier}`);
+});
+
+test('open accordion item', () => {
+    render(
+        <AccordionItem open id={itemId} data-testid={itemId} title={titleText}>
+            <p>{contentText}</p>
+        </AccordionItem>
+    );
+
+    const accordionItem = screen.getByTestId(itemId);
+    const input = within(accordionItem).getByRole('checkbox');
+
+    expect(input).toHaveAttribute('checked');
+});
+
+test('passing additional props to accordion item', () => {
+    render(
+        <AccordionItem id={itemId} data-testid={itemId} title="Healthcare for veterans" data-test="foo">
+            <p>Veterans are entitled to the same healthcare as any citizen. And there
+                are health care options and support available specifically for veterans.</p>
+            <p>If you have a health condition that’s related to your service, you’re
+                entitled to priority treatment based on clinical need.</p>
+        </AccordionItem>
+    );
+
+    const accordionItem = screen.getByTestId(itemId);
+    expect(accordionItem?.dataset.test).toEqual('foo');
+});

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,108 @@
+import React, { Children, useEffect, useRef } from 'react';
+import WrapperTag from '../../common/wrapper-tag';
+// @ts-ignore
+import DSAccordion from '@scottish-government/design-system/src/components/accordion/accordion';
+
+let accordionItemCounter = 0;
+
+export const AccordionItem: React.FC<SGDS.Component.Accordion.Item> = ({
+    children,
+    headerLevel = 'h3',
+    id: rawId,
+    open = false,
+    title,
+    ...props
+}) => {
+    accordionItemCounter = accordionItemCounter + 1;
+    const processedId = rawId || `accordion-item-${accordionItemCounter}`;
+    return (
+        <div
+            className="ds_accordion-item"
+            id={processedId}
+            {...props}
+        >
+            <input
+                aria-labelledby={`panel-${processedId}-heading`}
+                className={[
+                    'ds_accordion-item__control',
+                    'visually-hidden'
+                ].join(' ')}
+                defaultChecked={open}
+                id={`${processedId}-control`}
+                type="checkbox"
+            />
+            <div className="ds_accordion-item__header">
+                <WrapperTag
+                    id={`panel-${processedId}-heading`}
+                    className="ds_accordion-item__title"
+                    tagName={headerLevel}
+                >
+                    {title}
+                </WrapperTag>
+                <span className='ds_accordion-item__indicator' />
+                <label
+                    className="ds_accordion-item__label"
+                    htmlFor={`${processedId}-control`}
+                >
+                    <span className="visually-hidden">Show this section</span>
+                </label>
+            </div>
+            <div className="ds_accordion-item__body">
+                {children}
+            </div>
+        </div>
+    );
+};
+
+const Accordion: React.FC<SGDS.Component.Accordion> = ({
+    children,
+    headerLevel = 'h3',
+    hideOpenAll,
+    ...props
+}) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            new DSAccordion(ref.current).init();
+        }
+    }, [ref]);
+
+    if (!children) {
+        hideOpenAll = true;
+    }
+
+    function processChild(child: any) {
+        return React.cloneElement(child, { headerLevel: headerLevel });
+    }
+
+    return (
+        <div
+            className='ds_accordion'
+            ref={ref}
+            {...props}
+        >
+            { !hideOpenAll && (
+                <button
+                className={[
+                    'ds_accordion__open-all',
+                    'ds_link',
+                    'js-open-all'
+                ].join(' ')}
+                type='button'
+                >
+                    Open all
+                    {' '}
+                    <span className="visually-hidden">sections</span>
+                </button>
+            )}
+
+            {Children.map(children, child => processChild(child))}
+        </div>
+    );
+};
+
+Accordion.displayName = 'Accordion';
+AccordionItem.displayName = 'AccordionItem';
+
+export default Accordion;