@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/Header/Header.test.js

@@ -0,0 +1,121 @@
+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 '@testing-library/jest-dom';
+describe('Header', () => {
+    it('renders', () => {
+        render(_jsx(Header, {}));
+        const component = screen.getByRole('banner');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Header, {}));
+        const component = screen.getByRole('banner');
+        expect(component).toHaveClass('ams-header');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Header, { className: "extra" }));
+        const component = screen.getByRole('banner');
+        expect(component).toHaveClass('extra');
+        expect(component).toHaveClass('ams-header');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Header, { ref: ref }));
+        const component = screen.getByRole('banner');
+        expect(ref.current).toBe(component);
+    });
+    it('renders a logo link', () => {
+        render(_jsx(Header, {}));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-header__logo-link');
+    });
+    it('renders a different brand logo', () => {
+        const { container } = render(_jsx(Header, { 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" }));
+        const logoLink = screen.getByRole('link');
+        expect(logoLink).toHaveAttribute('href', '/home');
+    });
+    it('renders a custom logo link title', () => {
+        render(_jsx(Header, { 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" }));
+        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');
+        expect(logoContainer).toBeInTheDocument();
+    });
+    it('renders a nav section', () => {
+        render(_jsx(Header, { children: "Test" }));
+        const component = screen.getByRole('navigation');
+        expect(component).toHaveClass('ams-header__navigation');
+    });
+    it('renders a nav section with a custom label', () => {
+        render(_jsx(Header, { 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" }) }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-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),
+            ] }));
+        const item1 = screen.getByRole('link', { name: 'Menu Item 1' });
+        const item2 = screen.getByRole('link', { name: 'Menu Item 2' });
+        expect(item1).toBeInTheDocument();
+        expect(item2).toBeInTheDocument();
+    });
+    it('renders a menu button', () => {
+        render(_jsx(Header, { children: "Test" }));
+        const component = screen.getByRole('button', { name: 'Menu' });
+        expect(component).toHaveClass('ams-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');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a custom menu button text', () => {
+        render(_jsx(Header, { 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" }));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-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');
+        expect(closedMegaMenu).toBeInTheDocument();
+        const menuButton = screen.getByRole('button', { name: 'Menu' });
+        await user.click(menuButton);
+        const openMegaMenu = container.querySelector('.ams-header__mega-menu');
+        expect(openMegaMenu).toBeInTheDocument();
+        expect(openMegaMenu).not.toHaveClass('ams-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/Header/HeaderGridCellNarrowWindowOnly.d.ts

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

package/dist/Header/HeaderGridCellNarrowWindowOnly.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 HeaderGridCellNarrowWindowOnly = forwardRef(({ children, className, ...restProps }, ref) => (_jsx(Grid.Cell, { ...restProps, className: clsx('ams-header__grid-cell-narrow-window-only', className), ref: ref, children: children })));
+HeaderGridCellNarrowWindowOnly.displayName = 'Header.GridCellNarrowWindowOnly';

package/dist/Header/HeaderGridCellNarrowWindowOnly.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Header/HeaderGridCellNarrowWindowOnly.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { HeaderGridCellNarrowWindowOnly } from './HeaderGridCellNarrowWindowOnly';
+import '@testing-library/jest-dom';
+describe('Header narrow screen only grid cell', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a Grid.Cell', () => {
+        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, {}));
+        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 component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-header__grid-cell-narrow-window-only');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-header__grid-cell-narrow-window-only extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(HeaderGridCellNarrowWindowOnly, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Header/HeaderMenuIcon.d.ts

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

package/dist/Header/HeaderMenuIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HeaderMenuIcon = (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-header__menu-icon-top", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-header__menu-icon-middle", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-header__menu-icon-bottom", x1: "0", x2: "100%", y1: "50%", y2: "50%" })] }));

package/dist/Header/HeaderMenuLink.d.ts

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

package/dist/Header/HeaderMenuLink.js

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

package/dist/Header/HeaderMenuLink.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Header/HeaderMenuLink.test.js

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

package/dist/Header/index.d.ts

@@ -0,0 +1,3 @@
+export { Header } from './Header';
+export type { HeaderProps } from './Header';
+export type { HeaderMenuLinkProps } from './HeaderMenuLink';

package/dist/Header/index.js

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

package/dist/Header/matchMedia.mock.js

@@ -0,0 +1,15 @@
+"use strict";
+// Sourced from https://jestjs.io/docs/29.4/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+    value: jest.fn().mockImplementation((query) => ({
+        addEventListener: jest.fn(),
+        addListener: jest.fn(), // deprecated
+        dispatchEvent: jest.fn(),
+        matches: false,
+        media: query,
+        onchange: null,
+        removeEventListener: jest.fn(),
+        removeListener: jest.fn(), // deprecated
+    })),
+    writable: true,
+});

package/dist/Heading/Heading.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type HeadingProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+    /** The hierarchical level within the document. */
+    level: 1 | 2 | 3 | 4;
+    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
+    size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+export declare const Heading: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+    /** The hierarchical level within the document. */
+    level: 1 | 2 | 3 | 4;
+    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
+    size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Heading/Heading.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { getHeadingTag } from './getHeadingTag';
+export const Heading = forwardRef(({ children, className, color, level, size, ...restProps }, ref) => {
+    const Tag = getHeadingTag(level);
+    const visualLevel = size ? size.slice(-1) : level;
+    return (_jsx(Tag, { className: clsx('ams-heading', `ams-heading--${visualLevel}`, color && `ams-heading--${color}`, className), ref: ref, ...restProps, children: children }));
+});
+Heading.displayName = 'Heading';

package/dist/Heading/Heading.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Heading/Heading.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Heading } from './Heading';
+import '@testing-library/jest-dom';
+describe('Heading', () => {
+    it('renders an element with role heading', () => {
+        render(_jsx(Heading, { level: 1, children: "Breaking news" }));
+        const heading = screen.getByRole('heading', {
+            name: 'Breaking news',
+        });
+        expect(heading).toBeInTheDocument();
+        expect(heading).toBeVisible();
+    });
+    it('renders the other allowed levels correctly', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, children: "Heading 2" }), _jsx(Heading, { level: 3, children: "Heading 3" }), _jsx(Heading, { level: 4, children: "Heading 4" })] }));
+        const h2 = screen.getByRole('heading', { level: 2, name: 'Heading 2' });
+        const h3 = screen.getByRole('heading', { level: 3, name: 'Heading 3' });
+        const h4 = screen.getByRole('heading', { level: 4, name: 'Heading 4' });
+        expect(h2).toBeInTheDocument();
+        expect(h3).toBeInTheDocument();
+        expect(h4).toBeInTheDocument();
+    });
+    it('renders the correct style level class', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, size: "level-1", children: "Size level 1" }), _jsx(Heading, { level: 1, size: "level-2", children: "Size level 2" }), _jsx(Heading, { level: 1, size: "level-3", children: "Size level 3" }), _jsx(Heading, { level: 1, size: "level-4", children: "Size level 4" }), _jsx(Heading, { level: 1, size: "level-5", children: "Size level 5" }), _jsx(Heading, { level: 1, size: "level-6", children: "Size level 6" })] }));
+        const sizeLevel1 = screen.getByRole('heading', { level: 1, name: 'Size level 1' });
+        const sizeLevel2 = screen.getByRole('heading', { level: 1, name: 'Size level 2' });
+        const sizeLevel3 = screen.getByRole('heading', { level: 1, name: 'Size level 3' });
+        const sizeLevel4 = screen.getByRole('heading', { level: 1, name: 'Size level 4' });
+        const sizeLevel5 = screen.getByRole('heading', { level: 1, name: 'Size level 5' });
+        const sizeLevel6 = screen.getByRole('heading', { level: 1, name: 'Size level 6' });
+        expect(sizeLevel1).toHaveClass('ams-heading--1');
+        expect(sizeLevel2).toHaveClass('ams-heading--2');
+        expect(sizeLevel3).toHaveClass('ams-heading--3');
+        expect(sizeLevel4).toHaveClass('ams-heading--4');
+        expect(sizeLevel5).toHaveClass('ams-heading--5');
+        expect(sizeLevel6).toHaveClass('ams-heading--6');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(Heading, { color: "inverse", level: 1, children: "Heading" }));
+        const heading = screen.getByRole('heading', { name: 'Heading' });
+        expect(heading).toHaveClass('ams-heading--inverse');
+    });
+    it('renders inline markup', () => {
+        render(_jsxs(Heading, { level: 1, children: [_jsx("strong", { children: "Breaking" }), " news"] }));
+        const heading = screen.getByRole('heading', { name: 'Breaking news' });
+        const inlineMarkup = heading.querySelector('strong');
+        expect(inlineMarkup).toBeInTheDocument();
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Heading, { className: "large", level: 1 }));
+        const heading = container.querySelector(':only-child');
+        expect(heading).toHaveClass('large');
+        expect(heading).toHaveClass('ams-heading');
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Heading, { level: 1, ref: ref }));
+        const heading = container.querySelector(':only-child');
+        expect(ref.current).toBe(heading);
+    });
+});

package/dist/Heading/getHeadingTag.d.ts

@@ -0,0 +1,2 @@
+import type { HeadingProps } from './Heading';
+export declare function getHeadingTag(level: HeadingProps['level'] | null): "h2" | "h3" | "h4" | "h1";

package/dist/Heading/getHeadingTag.js

@@ -0,0 +1,13 @@
+export function getHeadingTag(level) {
+    switch (level) {
+        case 2:
+            return 'h2';
+        case 3:
+            return 'h3';
+        case 4:
+            return 'h4';
+        // Ensure valid HTML with invalid input outside of TypeScript.
+        default:
+            return 'h1';
+    }
+}

package/dist/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from './Heading';
+export type { HeadingProps } from './Heading';

package/dist/Heading/index.js

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

package/dist/Hint/Hint.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+type HintAndOptionalProps = {
+    /** Show a custom hint text. */
+    hint?: string;
+    /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
+    optional?: boolean;
+};
+export type HintProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & HintAndOptionalProps;
+export declare const Hint: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & HintAndOptionalProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/Hint/Hint.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+const getHintText = ({ hint, optional }) => {
+    if (hint) {
+        return hint;
+    }
+    else if (optional) {
+        return 'niet verplicht';
+    }
+    return null;
+};
+export const Hint = forwardRef(({ className, hint, optional, ...restProps }, ref) => {
+    const hintText = getHintText({ hint, optional });
+    return (hintText && (_jsxs("span", { ...restProps, className: clsx('ams-hint', className), ref: ref, children: ["(", hintText, ")"] })));
+});
+Hint.displayName = 'Hint';

package/dist/Hint/Hint.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Hint/Hint.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Hint } from '.';
+import '@testing-library/jest-dom';
+describe('Hint', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Hint, { hint: "hint" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Hint, { optional: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-hint');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Hint, { className: "extra", optional: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-hint extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Hint, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders the provided hint text', () => {
+        const { container } = render(_jsx(Hint, { hint: "hint text" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('(hint text)');
+    });
+    it('renders the default hint text', () => {
+        const { container } = render(_jsx(Hint, { optional: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('(niet verplicht)');
+    });
+    it('renders the provided hint text when `optional` is set to `false`', () => {
+        const { container } = render(_jsx(Hint, { hint: "not required", optional: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('(not required)');
+    });
+    it('renders the provided hint text "required" while also being marked as not optional', () => {
+        const { container } = render(_jsx(Hint, { hint: "required", optional: false }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('(required)');
+    });
+});

package/dist/Hint/index.d.ts

@@ -0,0 +1,2 @@
+export { Hint } from './Hint';
+export type { HintProps } from './Hint';

package/dist/Hint/index.js

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

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+export declare const iconSizes: string[];
+type IconSize = (typeof iconSizes)[number];
+export type IconProps = {
+    /** Changes the icon colour for readability on a dark background. */
+    color?: 'inverse';
+    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    size?: IconSize;
+    /** Whether the icon container should be made square. */
+    square?: boolean;
+    /** The component rendering the icon’s markup. */
+    svg: Function | ReactNode;
+} & HTMLAttributes<HTMLSpanElement>;
+export declare const Icon: import("react").ForwardRefExoticComponent<{
+    /** Changes the icon colour for readability on a dark background. */
+    color?: "inverse";
+    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    size?: IconSize;
+    /** Whether the icon container should be made square. */
+    square?: boolean;
+    /** The component rendering the icon’s markup. */
+    svg: Function | ReactNode;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/Icon/Icon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const iconSizes = ['small', 'large', 'heading-3', 'heading-4', 'heading-5', 'heading-6'];
+export const Icon = forwardRef(({ className, color, size, square, svg, ...restProps }, ref) => (_jsx("span", { className: clsx('ams-icon', color && `ams-icon--${color}`, size && `ams-icon--${size}`, square && 'ams-icon--square', className), ref: ref, ...restProps, children: typeof svg === 'function' ? svg() : svg })));
+Icon.displayName = 'Icon';

package/dist/Icon/Icon.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Icon/Icon.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertIcon } from '@amsterdam/design-system-react-icons';
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Icon, iconSizes } from './Icon';
+import '@testing-library/jest-dom';
+describe('Icon', () => {
+    it('renders a span element', () => {
+        const { container } = render(_jsx(Icon, { svg: AlertIcon }));
+        const icon = container.querySelector('span:only-child');
+        expect(icon).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Icon, { svg: AlertIcon }));
+        const icon = container.querySelector(':only-child');
+        expect(icon).toHaveClass('ams-icon');
+    });
+    it('renders an svg child', () => {
+        const { container } = render(_jsx(Icon, { svg: AlertIcon }));
+        const svg = container.querySelector(':only-child svg');
+        expect(svg).toBeInTheDocument();
+    });
+    iconSizes.forEach((size) => {
+        it(`renders the correct class name for a ‘${size}’ icon`, () => {
+            const { container } = render(_jsx(Icon, { size: size, svg: AlertIcon }));
+            const icon = container.querySelector(':only-child');
+            expect(icon).toHaveClass(`ams-icon--${size}`);
+        });
+    });
+    it('renders the right square class', () => {
+        const { container } = render(_jsx(Icon, { square: true, svg: AlertIcon }));
+        const icon = container.querySelector('span:only-child');
+        expect(icon).toHaveClass('ams-icon--square');
+    });
+    it('renders the class name for inverse color', () => {
+        const { container } = render(_jsx(Icon, { color: "inverse", svg: AlertIcon }));
+        const icon = container.querySelector('span:only-child');
+        expect(icon).toHaveClass('ams-icon--inverse');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Icon, { className: "large", svg: AlertIcon }));
+        const icon = container.querySelector(':only-child');
+        expect(icon).toHaveClass('large');
+        expect(icon).toHaveClass('ams-icon');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Icon, { ref: ref, svg: AlertIcon }));
+        const icon = container.querySelector(':only-child');
+        expect(ref.current).toBe(icon);
+    });
+});

package/dist/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';

package/dist/Icon/index.js

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