@scottish-government/designsystem-react 0.0.0

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

@@ -0,0 +1,63 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import SiteNavigation from './site-navigation';
+
+const items = [
+    {title: 'About', href: '#about'},
+    {title: 'Get started', href: '#get-started'},
+    {title: 'Styles', href: '#styles'},
+    {title: 'Components', href: '#components'},
+    {title: 'Patterns', href: '#patterns'},
+    {title: 'Guidance', href: '#guidance'},
+]
+
+test('renders correctly', () => {
+    render(
+        <SiteNavigation items={items}/>
+    );
+
+    const nav = screen.getByRole('navigation');
+    const list = within(nav).getByRole('list');
+    const listItems = within(list).getAllByRole('listitem');
+
+    // check nav
+    expect(nav).toHaveClass('ds_site-navigation');
+    expect(nav.tagName).toEqual('NAV');
+
+    // check list
+    expect(list.tagName).toEqual('UL');
+    expect(list).toHaveClass('ds_site-navigation__list');
+
+    // check items
+    expect(listItems.length).toEqual(items.length);
+
+    listItems.forEach((item, index) => {
+        expect(item).toHaveClass('ds_site-navigation__item');
+
+        const link = within(item).getByRole('link');
+
+        expect(link).toHaveClass('ds_site-navigation__link');
+        expect(link).not.toHaveClass('ds_current');
+        expect(link.textContent).toEqual(items[index].title);
+        expect(link).toHaveAttribute('href', items[index].href)
+    });
+});
+
+test('highlights current item', () => {
+    render(
+        <SiteNavigation data-test="foo" items={[{title: 'About', href: '#about', current: true}]}/>
+    );
+
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveClass('ds_current');
+});
+
+test('passing additional props', () => {
+    render(
+        <SiteNavigation data-test="foo" items={items}/>
+    );
+
+    const nav = screen.getByRole('navigation');
+    expect(nav.dataset.test).toEqual('foo');
+});

package/src/components/site-navigation/site-navigation.tsx

@@ -0,0 +1,40 @@
+const SiteNavLink: React.FC<SGDS.Component.SiteNavigation.Link> = ({
+    current=false,
+    href,
+    title
+}) => {
+    return (
+        <li
+            className="ds_site-navigation__item"
+        >
+            <a
+                href={href}
+                className={[
+                    'ds_site-navigation__link',
+                    current ? 'ds_current' : undefined
+                ].join(' ')}>{title}</a>
+        </li>
+    );
+};
+
+const SiteNavigation: React.FC<SGDS.Component.SiteNavigation> = ({
+    items,
+    ...props
+}) => {
+    return (
+        <nav
+            className="ds_site-navigation"
+            {...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}`} />
+                ))}
+            </ul>
+        </nav>
+    );
+};
+
+SiteNavigation.displayName = 'SiteNavigation';
+
+export default SiteNavigation;

package/src/components/site-search/site-search.test.tsx

@@ -0,0 +1,153 @@
+import { test, expect, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import SiteSearch from './site-search';
+
+const id = 'site-search';
+const labelText = 'Search';
+const placeholderText = 'Search';
+
+test('site search renders correctly', () => {
+    render(
+        <SiteSearch />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchFormContainer = searchForm.parentNode;
+    const searchLabel = document.querySelector('label');
+    const searchInput = within(searchForm).getByRole('searchbox');
+    const inputWrapper = searchInput.parentNode;
+    const searchButton = within(searchForm).getByRole('button');
+
+    expect(searchFormContainer).toHaveClass('ds_site-search');
+    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).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(searchInput).toHaveClass('ds_input', 'ds_site-search__input');
+    expect(searchInput).toHaveAttribute('id', id);
+    expect(searchInput).toHaveAttribute('placeholder', placeholderText);
+    expect(searchInput).toHaveAttribute('required');
+    expect(searchInput).toHaveAttribute('spellcheck', 'false');
+    expect(searchInput).toHaveAttribute('type', 'search');
+    expect(searchInput).toHaveAttribute('name', 'q');
+    expect(searchInput).not.toHaveAttribute('autocomplete');
+
+    expect(searchButton).toHaveClass('ds_button');
+    expect(searchButton).toHaveAttribute('type', 'submit');
+    expect(searchButton.textContent).toEqual('Search');
+});
+
+test('custom action', () => {
+    render(
+        <SiteSearch action="/foo" />
+    );
+
+    const searchForm = screen.getByRole('search');
+
+    expect(searchForm).toHaveAttribute('action', '/foo');
+});
+
+test('custom id', () => {
+    render(
+        <SiteSearch id="foo" />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchInput = within(searchForm).getByRole('searchbox');
+
+    expect(searchInput).toHaveAttribute('id', 'foo');
+});
+
+test('custom method', () => {
+    render(
+        <SiteSearch method="POST" />
+    );
+
+    const searchForm = screen.getByRole('search');
+
+    expect(searchForm).toHaveAttribute('method', 'POST');
+});
+
+test('custom name', () => {
+    render(
+        <SiteSearch name="foo" />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchInput = within(searchForm).getByRole('searchbox');
+
+    expect(searchInput).toHaveAttribute('name', 'foo');
+});
+
+test('custom placeholder', () => {
+    render(
+        <SiteSearch placeholder="foo" />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchInput = within(searchForm).getByRole('searchbox');
+
+    expect(searchInput).toHaveAttribute('placeholder', 'foo');
+});
+
+test('autocomplete', () => {
+    const autocompleteSuggestionMappingFunction = vi.fn();
+    const suggestionsId = 'autocomplete-suggestions';
+
+    render(
+        <SiteSearch
+            autocompleteEndpoint="/endpoint"
+            autocompleteSuggestionMappingFunction={autocompleteSuggestionMappingFunction}
+        />
+    )
+
+    const searchForm = screen.getByRole('search');
+    const searchFormContainer = searchForm.parentNode;
+    const searchInput = within(searchForm).getByRole('searchbox');
+    const autocompleteStatus = within(searchForm).getByRole('status');
+    const suggestionsContainer = document.querySelector('.ds_autocomplete__suggestions');
+    const suggestionsList = within(searchForm).getByRole('listbox');
+
+    expect(searchFormContainer).toHaveClass('ds_autocomplete');
+    expect(searchFormContainer).toHaveAttribute('id', `${id}-autocomplete`);
+
+    expect(autocompleteStatus).toBeInTheDocument();
+    expect(autocompleteStatus).toHaveClass('visually-hidden');
+    expect(autocompleteStatus).toHaveAttribute('aria-live', 'polite');
+    expect(autocompleteStatus).toHaveAttribute('id', 'autocomplete-status');
+    expect(autocompleteStatus.tagName).toEqual('DIV');
+
+    expect(searchInput).toHaveAttribute('aria-autocomplete', 'list');
+    expect(searchInput).toHaveAttribute('aria-owns', suggestionsId);
+    expect(searchInput).toHaveAttribute('autocomplete', 'off');
+    expect(searchInput).toHaveClass('js-autocomplete-input');
+
+    expect(suggestionsContainer).toHaveAttribute('id', suggestionsId);
+    expect(suggestionsContainer.tagName).toEqual('DIV');
+
+    expect(suggestionsList).toHaveClass('ds_autocomplete__suggestions-list');
+    expect(suggestionsList).toHaveAttribute('aria-labelledby', `${id}-label`);
+    expect(suggestionsList.tagName).toEqual('OL');
+
+});
+
+test('passing additional props', () => {
+    render(
+        <SiteSearch data-test="foo" />
+    );
+
+    const searchForm = screen.getByRole('search');
+    const searchFormContainer = searchForm.parentNode;
+    expect(searchFormContainer?.dataset.test).toEqual('foo');
+});

package/src/components/site-search/site-search.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef } from 'react';
+// @ts-ignore
+import DSAutocomplete from '@scottish-government/design-system/src/components/autocomplete/autocomplete';
+import Button from '../button/button';
+
+const SiteSearch: React.FC<SGDS.Component.SiteSearch> = function ({
+    action = '/search',
+    autocompleteEndpoint,
+    autocompleteSuggestionMappingFunction,
+    id = 'site-search',
+    method = 'GET',
+    minLength = 3,
+    name = 'q',
+    placeholder = 'Search',
+    ...props
+}) {
+    const ref = useRef(null);
+    const hasAutocomplete = !!autocompleteEndpoint;
+    let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
+
+    type AutoCompleteOptions = {
+        minLength?: number,
+        suggestionMappingFunction?: Function,
+        throttleDelay?: number
+    }
+
+    useEffect(() => {
+        if (hasAutocomplete && ref.current) {
+            const options: AutoCompleteOptions = {};
+            if (minLength) {
+                options.minLength = minLength;
+            }
+            if (autocompleteSuggestionMappingFunction) {
+                options.suggestionMappingFunction = autocompleteSuggestionMappingFunction
+            }
+
+            const autocomplete = new DSAutocomplete(
+                document.getElementById(autocompleteId),
+                autocompleteEndpoint,
+                options
+            );
+
+            autocomplete.init();
+        }
+    }, [ref, autocompleteEndpoint, autocompleteId, hasAutocomplete, minLength, autocompleteSuggestionMappingFunction]);
+
+    return (
+        <div
+            className={[
+                'ds_site-search',
+                hasAutocomplete ? 'ds_autocomplete' : undefined
+            ].join(' ')}
+            id={autocompleteId ? autocompleteId : undefined}
+            ref={ref}
+            {...props}
+        >
+
+            <form role="search" className="ds_site-search__form" method={method} action={action}>
+                <label className="ds_label  visually-hidden" htmlFor={id} id={id + '-label'}>Search</label>
+
+                {hasAutocomplete && (
+                    <div role="status" aria-live="polite" id="autocomplete-status" className="visually-hidden"></div>
+                )}
+
+                <div className="ds_input__wrapper  ds_input__wrapper--has-icon">
+                    <input aria-autocomplete={hasAutocomplete ? 'list' : undefined}
+                        aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined}
+                        autoComplete={hasAutocomplete ? 'off' : undefined}
+                        className={[
+                            'ds_input',
+                            'ds_site-search__input',
+                            hasAutocomplete ? 'js-autocomplete-input' : undefined
+                        ].join(' ')}
+                        id={id}
+                        name={name}
+                        placeholder={placeholder}
+                        required
+                        spellCheck="false"
+                        type="search"
+                    />
+
+                    <Button type="submit" icon="search" iconOnly>Search</Button>
+
+                    {hasAutocomplete && (
+                        <div id="autocomplete-suggestions" className="ds_autocomplete__suggestions">
+                            <ol className="ds_autocomplete__suggestions-list" role="listbox" aria-labelledby="site-search-label"></ol>
+                        </div>
+                    )}
+                </div>
+            </form>
+        </div>
+    );
+};
+
+SiteSearch.displayName = 'SiteSearch';
+
+export default SiteSearch;

package/src/components/skip-links/skip-links.test.tsx

@@ -0,0 +1,84 @@
+import { test, expect } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import SkipLinks from './skip-links';
+
+const mainContentId = 'main-content';
+const linkText = 'Skip to main content';
+
+test('skip links renders correctly', () => {
+    render(
+        <SkipLinks />
+    );
+
+    const skipLinksList = screen.getByRole('list');
+    const skipLinksContainer = skipLinksList.parentNode;
+    const skipLinksListItem = within(skipLinksList).getByRole('listitem');
+    const skipLinksLink = within(skipLinksList).getByRole('link');
+
+    expect(skipLinksContainer).toHaveClass('ds_skip-links');
+    expect(skipLinksContainer.tagName).toEqual('DIV');
+
+    expect(skipLinksList).toHaveClass('ds_skip-links__list');
+    expect(skipLinksList.tagName).toEqual('UL');
+
+    expect(skipLinksListItem).toHaveClass('ds_skip-links__item');
+
+    expect(skipLinksLink).toHaveClass('ds_skip-links__link');
+    expect(skipLinksLink).toHaveAttribute('href', `#${mainContentId}`);
+    expect(skipLinksLink.textContent).toEqual(linkText);
+});
+
+test('custom link text', () => {
+    const mainLinkText = 'foo';
+
+    render(
+        <SkipLinks mainLinkText={mainLinkText} />
+    );
+
+    const skipLinksList = screen.getByRole('list');
+    const skipLinksLink = within(skipLinksList).getByRole('link');
+
+    expect(skipLinksLink.textContent).toEqual(mainLinkText);
+});
+
+test('custom link target', () => {
+    const customId = 'bar'
+
+    render(
+        <SkipLinks mainContentId={customId} />
+    );
+
+    const skipLinksList = screen.getByRole('list');
+    const skipLinksLink = within(skipLinksList).getByRole('link');
+
+    expect(skipLinksLink).toHaveAttribute('href', `#${customId}`)
+});
+
+test('additional links', () => {
+    const items = [
+        { title: 'foo', targetId: 'bar' }
+    ];
+
+    render(
+        <SkipLinks items={items} />
+    );
+
+    const skipLinksList = screen.getByRole('list');
+    const skipLinksListItems = within(skipLinksList).getAllByRole('listitem');
+    const skipLinksSecondLink = within(skipLinksList).getAllByRole('link')[1];
+
+    expect(skipLinksListItems.length).toEqual(2);
+    expect(skipLinksSecondLink).toHaveAttribute('href', `#${items[0].targetId}`);
+    expect(skipLinksSecondLink.textContent).toEqual(items[0].title);
+})
+
+test('passing additional props', () => {
+    render(
+        <SkipLinks data-test="foo" />
+    );
+
+    const skipLinksList = screen.getByRole('list');
+    const skipLinksContainer = skipLinksList.parentNode;
+
+    expect(skipLinksContainer?.dataset.test).toEqual('foo');
+});

package/src/components/skip-links/skip-links.tsx

@@ -0,0 +1,39 @@
+export const SkipLink: React.FC<SGDS.Component.SkipLinks.Link> = ({
+    targetId,
+    title
+}) => {
+    return (
+        <li
+            className="ds_skip-links__item"
+        >
+            <a href={`#${targetId}`} className="ds_skip-links__link">{ title }</a>
+        </li>
+    );
+};
+
+const SkipLinks: React.FC<SGDS.Component.SkipLinks> = ({
+    items,
+    mainContentId = 'main-content',
+    mainLinkText = 'Skip to main content',
+    ...props
+}) => {
+    return (
+        <div
+            className="ds_skip-links"
+            {...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}`}/>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+SkipLinks.displayName = 'SkipLinks';
+SkipLink.displayName = 'SkipLink';
+
+export default SkipLinks;

package/src/components/tag/tag.test.tsx

@@ -0,0 +1,45 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Tag from './tag';
+
+const tagText = 'Beta';
+
+test('tag renders correctly', () => {
+    render(
+        <Tag title={tagText}/>
+    );
+
+    const tag = screen.getByText(tagText);
+
+    expect(tag).toHaveClass('ds_tag');
+    expect(tag.nodeName).toEqual('SPAN');
+});
+
+test('tag with custom colour', () => {
+    render(
+        <Tag colour="red" title={tagText}/>
+    );
+
+    const tag = screen.getByText(tagText);
+
+    expect(tag).toHaveClass('ds_tag--red');
+});
+
+test('tag with additional CSS class', () => {
+    render(
+        <Tag className="foo" title={tagText}/>
+    );
+
+    const tag = screen.getByText(tagText);
+
+    expect(tag).toHaveClass('foo');
+});
+
+test('passing additional props', () => {
+    render(
+        <Tag data-test="foo" title={tagText}/>
+    );
+
+    const tag = screen.getByText(tagText);
+    expect(tag?.dataset.test).toEqual('foo');
+});

package/src/components/tag/tag.tsx

@@ -0,0 +1,23 @@
+const Tag: React.FC<SGDS.Component.Tag> = ({
+    className,
+    colour,
+    title,
+    ...props
+}) => {
+    return (
+        <span
+            className={[
+                'ds_tag',
+                className,
+                colour && `ds_tag--${colour}`,
+            ].join(' ')}
+            {...props}
+        >
+            {title}
+        </span>
+    );
+};
+
+Tag.displayName = 'Tag';
+
+export default Tag;