@amsterdam/design-system-react 0.15.0 → 0.16.0

package/dist/{Header/Header.test.js → PageHeader/PageHeader.test.js}

@@ -2,82 +2,81 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
-import './matchMedia.mock'; // Must be imported before Header
-import { Header } from './Header';
+import './matchMedia.mock'; // Must be imported before PageHeader
+import { PageHeader } from './PageHeader';
 import '@testing-library/jest-dom';
-describe('Header', () => {
+describe('Page Header', () => {
     it('renders', () => {
-        render(_jsx(Header, {}));
+        render(_jsx(PageHeader, {}));
         const component = screen.getByRole('banner');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
     });
     it('renders a design system BEM class name', () => {
-        render(_jsx(Header, {}));
+        render(_jsx(PageHeader, {}));
         const component = screen.getByRole('banner');
-        expect(component).toHaveClass('ams-header');
+        expect(component).toHaveClass('ams-page-header');
     });
-    it('renders an additional class name', () => {
-        render(_jsx(Header, { className: "extra" }));
+    it('renders an extra class name', () => {
+        render(_jsx(PageHeader, { className: "extra" }));
         const component = screen.getByRole('banner');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-header');
+        expect(component).toHaveClass('ams-page-header extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        render(_jsx(Header, { ref: ref }));
+        render(_jsx(PageHeader, { ref: ref }));
         const component = screen.getByRole('banner');
         expect(ref.current).toBe(component);
     });
     it('renders a logo link', () => {
-        render(_jsx(Header, {}));
+        render(_jsx(PageHeader, {}));
         const component = screen.getByRole('link');
-        expect(component).toHaveClass('ams-header__logo-link');
+        expect(component).toHaveClass('ams-page-header__logo-link');
     });
     it('renders a different brand logo', () => {
-        const { container } = render(_jsx(Header, { logoBrand: "ggd-amsterdam" }));
+        const { container } = render(_jsx(PageHeader, { logoBrand: "ggd-amsterdam" }));
         const component = container.querySelector('.ams-logo__text-secondary');
         expect(component).toBeInTheDocument();
     });
     it('renders a custom logo link', () => {
-        render(_jsx(Header, { logoLink: "/home" }));
+        render(_jsx(PageHeader, { logoLink: "/home" }));
         const logoLink = screen.getByRole('link');
         expect(logoLink).toHaveAttribute('href', '/home');
     });
     it('renders a custom logo link title', () => {
-        render(_jsx(Header, { logoLinkTitle: "Go to homepage" }));
+        render(_jsx(PageHeader, { logoLinkTitle: "Go to homepage" }));
         const logoLinkTitle = screen.getByRole('link', { name: 'Go to homepage' });
         expect(logoLinkTitle).toBeInTheDocument();
     });
     it('renders an application name', () => {
-        render(_jsx(Header, { brandName: "Application name" }));
+        render(_jsx(PageHeader, { brandName: "Application name" }));
         const brandName = screen.getByText('Application name');
         expect(brandName).toBeInTheDocument();
     });
     it('renders the correct class for the responsive logo', () => {
-        const { container } = render(_jsx(Header, { brandName: "Application name" }));
-        const logoContainer = container.querySelector('.ams-header__logo-container');
+        const { container } = render(_jsx(PageHeader, { brandName: "Application name" }));
+        const logoContainer = container.querySelector('.ams-page-header__logo-container');
         expect(logoContainer).toBeInTheDocument();
     });
     it('renders a nav section', () => {
-        render(_jsx(Header, { children: "Test" }));
+        render(_jsx(PageHeader, { children: "Test" }));
         const component = screen.getByRole('navigation');
-        expect(component).toHaveClass('ams-header__navigation');
+        expect(component).toHaveClass('ams-page-header__navigation');
     });
     it('renders a nav section with a custom label', () => {
-        render(_jsx(Header, { navigationLabel: "Custom Navigation", children: "Test" }));
+        render(_jsx(PageHeader, { navigationLabel: "Custom Navigation", children: "Test" }));
         const component = screen.getByRole('navigation', { name: 'Custom Navigation' });
         expect(component).toBeInTheDocument();
     });
     it('renders a menu', () => {
-        render(_jsx(Header, { menuItems: _jsx(Header.MenuLink, { children: "Menu Item" }) }));
+        render(_jsx(PageHeader, { menuItems: _jsx(PageHeader.MenuLink, { children: "Menu Item" }) }));
         const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-header__menu');
+        expect(component).toHaveClass('ams-page-header__menu');
     });
     it('renders menu items', () => {
-        render(_jsx(Header, { menuItems: [
-                _jsx(Header.MenuLink, { href: "/", children: "Menu Item 1" }, 1),
-                _jsx(Header.MenuLink, { href: "/", children: "Menu Item 2" }, 2),
+        render(_jsx(PageHeader, { menuItems: [
+                _jsx(PageHeader.MenuLink, { href: "/", children: "Menu Item 1" }, 1),
+                _jsx(PageHeader.MenuLink, { href: "/", children: "Menu Item 2" }, 2),
             ] }));
         const item1 = screen.getByRole('link', { name: 'Menu Item 1' });
         const item2 = screen.getByRole('link', { name: 'Menu Item 2' });
@@ -85,35 +84,35 @@ describe('Header', () => {
         expect(item2).toBeInTheDocument();
     });
     it('renders a menu button', () => {
-        render(_jsx(Header, { children: "Test" }));
+        render(_jsx(PageHeader, { children: "Test" }));
         const component = screen.getByRole('button', { name: 'Menu' });
-        expect(component).toHaveClass('ams-header__mega-menu-button');
+        expect(component).toHaveClass('ams-page-header__mega-menu-button');
     });
     it('renders a menu button icon', () => {
-        const { container } = render(_jsx(Header, { children: "Test" }));
-        const component = container.querySelector('.ams-header__menu-icon');
+        const { container } = render(_jsx(PageHeader, { children: "Test" }));
+        const component = container.querySelector('.ams-page-header__menu-icon');
         expect(component).toBeInTheDocument();
     });
     it('renders a custom menu button text', () => {
-        render(_jsx(Header, { menuButtonText: "Custom button text", children: "Test" }));
+        render(_jsx(PageHeader, { menuButtonText: "Custom button text", children: "Test" }));
         const component = screen.getByRole('button', { name: 'Custom button text' });
         expect(component).toBeInTheDocument();
     });
     it('renders the correct class when noMenuButtonOnWideWindow is true', () => {
-        render(_jsx(Header, { noMenuButtonOnWideWindow: true, children: "Test" }));
+        render(_jsx(PageHeader, { noMenuButtonOnWideWindow: true, children: "Test" }));
         const component = screen.getByRole('listitem');
-        expect(component).toHaveClass('ams-header__mega-menu-button-item--hide-on-wide-window');
+        expect(component).toHaveClass('ams-page-header__mega-menu-button-item--hide-on-wide-window');
     });
     it('opens and closes the mega menu', async () => {
         const user = userEvent.setup();
-        const { container } = render(_jsx(Header, { children: "Test" }));
-        const closedMegaMenu = container.querySelector('.ams-header__mega-menu--closed');
+        const { container } = render(_jsx(PageHeader, { children: "Test" }));
+        const closedMegaMenu = container.querySelector('.ams-page-header__mega-menu--closed');
         expect(closedMegaMenu).toBeInTheDocument();
         const menuButton = screen.getByRole('button', { name: 'Menu' });
         await user.click(menuButton);
-        const openMegaMenu = container.querySelector('.ams-header__mega-menu');
+        const openMegaMenu = container.querySelector('.ams-page-header__mega-menu');
         expect(openMegaMenu).toBeInTheDocument();
-        expect(openMegaMenu).not.toHaveClass('ams-header__mega-menu--closed');
+        expect(openMegaMenu).not.toHaveClass('ams-page-header__mega-menu--closed');
     });
     it.skip('it closes the mega menu when it is open and the screen width passes the breakpoint', () => {
         // TODO: Add this test

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.d.ts

@@ -0,0 +1,2 @@
+import { GridCellProps } from '../Grid';
+export declare const PageHeaderGridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<HTMLElement>>;

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Grid } from '../Grid';
+export const PageHeaderGridCellNarrowWindowOnly = forwardRef(({ children, className, ...restProps }, ref) => (_jsx(Grid.Cell, { ...restProps, className: clsx('ams-page-header__grid-cell-narrow-window-only', className), ref: ref, children: children })));
+PageHeaderGridCellNarrowWindowOnly.displayName = 'PageHeader.GridCellNarrowWindowOnly';

package/dist/{Header/HeaderGridCellNarrowWindowOnly.test.js → PageHeader/PageHeaderGridCellNarrowWindowOnly.test.js}

@@ -1,33 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { HeaderGridCellNarrowWindowOnly } from './HeaderGridCellNarrowWindowOnly';
+import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
 import '@testing-library/jest-dom';
-describe('Header narrow screen only grid cell', () => {
+describe('Page Header Grid Cell Narrow Window Only', () => {
     it('renders', () => {
-        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, {}));
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
         const component = container.querySelector(':only-child');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
     });
     it('renders a Grid.Cell', () => {
-        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, {}));
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-grid__cell');
     });
     it('renders a design system BEM class name', () => {
-        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, {}));
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-header__grid-cell-narrow-window-only');
+        expect(component).toHaveClass('ams-page-header__grid-cell-narrow-window-only');
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, { className: "extra" }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-header__grid-cell-narrow-window-only extra');
+        expect(component).toHaveClass('ams-page-header__grid-cell-narrow-window-only extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, { ref: ref }));
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, { ref: ref }));
         const component = container.querySelector(':only-child');
         expect(ref.current).toBe(component);
     });

package/dist/PageHeader/PageHeaderMenuIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const PageHeaderMenuIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/PageHeader/PageHeaderMenuIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PageHeaderMenuIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("line", { className: "ams-page-header__menu-icon-top", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-page-header__menu-icon-middle", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-page-header__menu-icon-bottom", x1: "0", x2: "100%", y1: "50%", y2: "50%" })] }));

package/dist/{Header/HeaderMenuLink.d.ts → PageHeader/PageHeaderMenuLink.d.ts}

@@ -1,8 +1,8 @@
 import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
-export type HeaderMenuLinkProps = {
+export type PageHeaderMenuLinkProps = {
     fixed?: boolean;
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
-export declare const HeaderMenuLink: import("react").ForwardRefExoticComponent<{
+export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<{
     fixed?: boolean;
 } & AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/PageHeader/PageHeaderMenuLink.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsx("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: children }) })));
+PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';

package/dist/{Header/HeaderMenuLink.test.js → PageHeader/PageHeaderMenuLink.test.js}

@@ -1,40 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { HeaderMenuLink } from './HeaderMenuLink';
+import { PageHeaderMenuLink } from './PageHeaderMenuLink';
 import '@testing-library/jest-dom';
-describe('Header menu link', () => {
+describe('Page Header Menu Link', () => {
     it('renders', () => {
-        render(_jsx(HeaderMenuLink, { href: "/" }));
+        render(_jsx(PageHeaderMenuLink, { href: "/" }));
         const component = screen.getByRole('listitem');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
     });
     it('renders a design system BEM class name', () => {
-        render(_jsx(HeaderMenuLink, { href: "/" }));
+        render(_jsx(PageHeaderMenuLink, { href: "/" }));
         const item = screen.getByRole('listitem');
-        expect(item).toHaveClass('ams-header__menu-item');
+        expect(item).toHaveClass('ams-page-header__menu-item');
         const link = screen.getByRole('link');
-        expect(link).toHaveClass('ams-header__menu-link');
+        expect(link).toHaveClass('ams-page-header__menu-link');
     });
-    it('renders an additional class name', () => {
-        render(_jsx(HeaderMenuLink, { className: "extra", href: "/" }));
+    it('renders an extra class name', () => {
+        render(_jsx(PageHeaderMenuLink, { className: "extra", href: "/" }));
         const component = screen.getByRole('link');
-        expect(component).toHaveClass('ams-header__menu-link extra');
+        expect(component).toHaveClass('ams-page-header__menu-link extra');
     });
     it('renders the href attribute', () => {
-        render(_jsx(HeaderMenuLink, { href: "/" }));
+        render(_jsx(PageHeaderMenuLink, { href: "/" }));
         const component = screen.getByRole('link');
         expect(component).toHaveAttribute('href', '/');
     });
     it('renders the ‘fixed’ prop classname', () => {
-        render(_jsx(HeaderMenuLink, { fixed: true, href: "/" }));
+        render(_jsx(PageHeaderMenuLink, { fixed: true, href: "/" }));
         const component = screen.getByRole('listitem');
-        expect(component).toHaveClass('ams-header__menu-item--fixed');
+        expect(component).toHaveClass('ams-page-header__menu-item--fixed');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        render(_jsx(HeaderMenuLink, { href: "/", ref: ref }));
+        render(_jsx(PageHeaderMenuLink, { href: "/", ref: ref }));
         const component = screen.getByRole('link');
         expect(ref.current).toBe(component);
     });

package/dist/PageHeader/index.d.ts

@@ -0,0 +1,3 @@
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';
+export type { PageHeaderMenuLinkProps } from './PageHeaderMenuLink';

package/dist/PageHeader/index.js

@@ -0,0 +1 @@
+export { PageHeader } from './PageHeader';

package/dist/PageHeading/PageHeading.test.js

@@ -17,11 +17,10 @@ describe('Page heading', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-page-heading');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(PageHeading, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-page-heading');
+        expect(component).toHaveClass('ams-page-heading extra');
     });
     it('renders the class name for inverse color', () => {
         render(_jsx(PageHeading, { color: "inverse", children: "Titel" }));

package/dist/Pagination/Pagination.test.js

@@ -16,7 +16,7 @@ describe('Pagination', () => {
         const component = screen.getByRole('navigation', { name: 'Paginering' });
         expect(component).toHaveClass('ams-pagination');
     });
-    it('can have a additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Pagination, { className: "extra", linkTemplate: linkTemplate, totalPages: 10 }));
         const component = screen.getByRole('navigation', { name: 'Paginering' });
         expect(component).toHaveClass('ams-pagination extra');

package/dist/Paragraph/Paragraph.test.js

@@ -43,7 +43,7 @@ describe('Paragraph', () => {
         const paragraph = screen.getByText('Paragraph');
         expect(paragraph).toHaveClass('ams-paragraph--inverse');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Paragraph, { className: "intro" }));
         const paragraph = container.querySelector(':only-child');
         expect(paragraph).toHaveClass('intro');

package/dist/PasswordInput/PasswordInput.test.js

@@ -17,7 +17,7 @@ describe('Password input', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-password-input');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(PasswordInput, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-password-input extra');

package/dist/Radio/Radio.test.js

@@ -30,7 +30,7 @@ describe('Radio', () => {
         expect(circle).toBeInTheDocument();
         expect(indicator).toBeInTheDocument();
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Radio, { className: "extra" }));
         const wrapper = container.querySelector(':only-child');
         expect(wrapper).toHaveClass('ams-radio extra');

package/dist/Row/Row.d.ts

@@ -4,9 +4,10 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import type { CrossAlign, MainAlign } from '../common/types';
-export declare const rowGaps: readonly ["none", "x-small", "small", "large", "x-large"];
-type RowGap = (typeof rowGaps)[number];
-type RowTag = 'article' | 'div' | 'section';
+export declare const rowTags: readonly ["article", "div", "section"];
+type RowTag = (typeof rowTags)[number];
+export declare const rowGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
+type RowGap = (typeof rowGapSizes)[number];
 export type RowProps = {
     /**
      * The horizontal alignment of the items in the row.

package/dist/Row/Row.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-export const rowGaps = ['none', 'x-small', 'small', 'large', 'x-large'];
+export const rowTags = ['article', 'div', 'section'];
+export const rowGapSizes = ['none', 'x-small', 'small', 'large', 'x-large'];
 export const Row = forwardRef(({ align, alignVertical, as: Tag = 'div', children, className, gap, wrap, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-row', align && `ams-row--align-${align}`, alignVertical && `ams-row--align-vertical-${alignVertical}`, gap && `ams-row--gap-${gap}`, wrap && 'ams-row--wrap', className), ref: ref, children: children })));
 Row.displayName = 'Row';

package/dist/Row/Row.test.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Row, rowGaps } from './Row';
+import { Row, rowGapSizes, rowTags } from './Row';
+import { ariaRoleForTag } from '../common/accessibility';
 import { crossAlignOptions, mainAlignOptions } from '../common/types';
 import '@testing-library/jest-dom';
 describe('Row', () => {
@@ -16,12 +17,12 @@ describe('Row', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-row');
     });
-    rowGaps.map((gap) => it(`renders with ‘${gap}’ gap`, () => {
+    rowGapSizes.map((gap) => it(`renders with ‘${gap}’ gap`, () => {
         const { container } = render(_jsx(Row, { gap: gap }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass(`ams-row--gap-${gap}`);
     }));
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Row, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-row extra');
@@ -31,15 +32,12 @@ describe('Row', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-row--wrap');
     });
-    it('renders with an article tag', () => {
-        render(_jsx(Row, { as: "article" }));
-        const component = screen.getByRole('article');
-        expect(component).toBeInTheDocument();
-    });
-    it('renders with a section tag', () => {
-        const { container } = render(_jsx(Row, { as: "section" }));
-        const component = container.querySelector('section');
-        expect(component).toBeInTheDocument();
+    rowTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Row, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
+            expect(component).toBeInTheDocument();
+        });
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();

package/dist/SearchField/SearchField.d.ts

@@ -58,6 +58,8 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;

package/dist/SearchField/SearchField.test.js

@@ -32,11 +32,10 @@ describe('Search field', () => {
         const component = screen.getByRole('search');
         expect(component).toHaveClass('ams-search-field');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(SearchField, { className: "extra" }));
         const component = screen.getByRole('search');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-search-field');
+        expect(component).toHaveClass('ams-search-field extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();

package/dist/SearchField/SearchFieldInput.test.js

@@ -16,11 +16,10 @@ describe('Search field input', () => {
         const component = screen.getByRole('searchbox', { name: 'Zoeken' });
         expect(component).toHaveClass('ams-search-field__input');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(SearchFieldInput, { className: "extra" }));
         const component = screen.getByRole('searchbox', { name: 'Zoeken' });
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-search-field__input');
+        expect(component).toHaveClass('ams-search-field__input extra');
     });
     it('supports a custom label', () => {
         render(_jsx(SearchFieldInput, { label: "Test label" }));

package/dist/Select/Select.test.js

@@ -15,7 +15,7 @@ describe('Select', () => {
         const component = screen.getByRole('combobox');
         expect(component).toHaveClass('ams-select');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Select, { className: "extra" }));
         const component = screen.getByRole('combobox');
         expect(component).toHaveClass('ams-select extra');

package/dist/Select/SelectOption.test.js

@@ -22,7 +22,7 @@ describe('Select option', () => {
         const component = screen.getByRole('option');
         expect(component).toHaveClass('ams-select__option');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Select.Option, { className: "extra" }));
         const component = screen.getByRole('option');
         expect(component).toHaveClass('ams-select__option extra');

package/dist/Select/SelectOptionGroup.test.js

@@ -22,7 +22,7 @@ describe('Select option group', () => {
         const component = screen.getByRole('group');
         expect(component).toHaveClass('ams-select__group');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Select.Group, { className: "extra" }));
         const component = screen.getByRole('group');
         expect(component).toHaveClass('ams-select__group extra');

package/dist/SkipLink/SkipLink.test.js

@@ -15,7 +15,7 @@ describe('Skip link', () => {
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-skip-link');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(SkipLink, { className: "extra", href: "/" }));
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-skip-link extra');

package/dist/Spotlight/Spotlight.d.ts

@@ -3,17 +3,19 @@
  * Copyright Gemeente Amsterdam
  */
 import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const spotlightTags: readonly ["article", "aside", "div", "footer", "section"];
+type SpotlightTag = (typeof spotlightTags)[number];
 export declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
 type SpotlightColor = (typeof spotlightColors)[number];
 export type SpotlightProps = {
     /** The HTML element to use. */
-    as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
+    as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 export declare const Spotlight: import("react").ForwardRefExoticComponent<{
     /** The HTML element to use. */
-    as?: "article" | "aside" | "div" | "footer" | "section";
+    as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
 } & HTMLAttributes<HTMLElement> & {

package/dist/Spotlight/Spotlight.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+export const spotlightTags = ['article', 'aside', 'div', 'footer', 'section'];
 export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'];
 export const Spotlight = forwardRef(({ as: Tag = 'div', children, className, color, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-spotlight', color && `ams-spotlight--${color}`, className), ref: ref, children: children })));
 Spotlight.displayName = 'Spotlight';

package/dist/Spotlight/Spotlight.test.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Spotlight, spotlightColors } from './Spotlight';
+import { Spotlight, spotlightColors, spotlightTags } from './Spotlight';
+import { ariaRoleForTag } from '../common/accessibility';
 import '@testing-library/jest-dom';
 describe('Spotlight', () => {
     it('renders', () => {
@@ -15,11 +16,17 @@ describe('Spotlight', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-spotlight');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Spotlight, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-spotlight');
+        expect(component).toHaveClass('ams-spotlight extra');
+    });
+    spotlightTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Spotlight, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
+            expect(component).toBeInTheDocument();
+        });
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
@@ -32,9 +39,4 @@ describe('Spotlight', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass(`ams-spotlight--${color}`);
     }));
-    it('renders a custom tag', () => {
-        render(_jsx(Spotlight, { as: "article" }));
-        const cell = screen.getByRole('article');
-        expect(cell).toBeInTheDocument();
-    });
 });

package/dist/StandaloneLink/StandaloneLink.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes } from 'react';
+export type StandaloneLinkProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
+    /** Adds an icon to the link, showing it before the link text. */
+    icon?: Function;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
+export declare const StandaloneLink: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
+    /** Adds an icon to the link, showing it before the link text. */
+    icon?: Function;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & import("react").RefAttributes<HTMLAnchorElement>>;