@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/Pagination/Pagination.test.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Pagination } from './Pagination';
+import '@testing-library/jest-dom';
+describe('Pagination', () => {
+    const linkTemplate = (page) => `#?pagina=${page}`;
+    it('renders', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, totalPages: 10 }));
+        const component = screen.getByRole('navigation', { name: 'Paginering' });
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, totalPages: 10 }));
+        const component = screen.getByRole('navigation', { name: 'Paginering' });
+        expect(component).toHaveClass('ams-pagination');
+    });
+    it('can have a additional class name', () => {
+        render(_jsx(Pagination, { className: "extra", linkTemplate: linkTemplate, totalPages: 10 }));
+        const component = screen.getByRole('navigation', { name: 'Paginering' });
+        expect(component).toHaveClass('ams-pagination extra');
+    });
+    it('should render all the pages when totalPages < maxVisiblePages', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, maxVisiblePages: 7, totalPages: 6 }));
+        const listItem = screen.getAllByRole('listitem', { hidden: true });
+        const range = ['1', '2', '3', '4', '5', '6'];
+        range.forEach((item, index) => {
+            expect(listItem[index]).toHaveTextContent(item);
+        });
+    });
+    it('should render the pages including one (last) spacer in the correct location when totalPages > maxVisiblePages', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, maxVisiblePages: 7, page: 1, totalPages: 10 }));
+        const listItem = screen.getAllByRole('listitem', { hidden: true });
+        const range = ['1', '2', '3', '4', '5', '…', '10'];
+        range.forEach((item, index) => {
+            expect(listItem[index]).toHaveTextContent(item);
+        });
+    });
+    it('should render the pages including the two spacers in the correct location when totalPages > maxVisiblePages and current page > 4', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, maxVisiblePages: 7, page: 6, totalPages: 10 }));
+        const listItem = screen.getAllByRole('listitem', { hidden: true });
+        const range = ['1', '…', '5', '6', '7', '…', '10'];
+        range.forEach((item, index) => {
+            expect(listItem[index]).toHaveTextContent(item);
+        });
+    });
+    it('should render the pages including one (first) spacer in the correct location when totalPages > maxVisiblePages and page > maxVisiblePages', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, maxVisiblePages: 7, page: 8, totalPages: 10 }));
+        const listItem = screen.getAllByRole('listitem', { hidden: true });
+        const range = ['1', '…', '6', '7', '8', '9', '10'];
+        range.forEach((item, index) => {
+            expect(listItem[index]).toHaveTextContent(item);
+        });
+    });
+    it('should set aria-current to true on the current page', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, page: 4, totalPages: 10 }));
+        const currentPageLink = screen.getByRole('link', { name: 'Pagina 4' });
+        expect(currentPageLink).toHaveAttribute('aria-current', 'page');
+    });
+    it('should set the correct href on the links', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, page: 4, totalPages: 10 }));
+        const previousPageLink = screen.getByRole('link', { name: 'Vorige pagina' });
+        const currentPageLink = screen.getByRole('link', { name: 'Pagina 4' });
+        const nextPageLink = screen.getByRole('link', { name: 'Volgende pagina' });
+        expect(previousPageLink).toHaveAttribute('href', '#?pagina=3');
+        expect(currentPageLink).toHaveAttribute('href', '#?pagina=4');
+        expect(nextPageLink).toHaveAttribute('href', '#?pagina=5');
+    });
+    it('sets a custom id for the accessible label', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, totalPages: 10, visuallyHiddenLabelId: "custom-id" }));
+        const component = screen.getByRole('navigation', { name: 'Paginering' });
+        expect(component).toHaveAttribute('aria-labelledby', 'custom-id');
+    });
+    it('should not render when totalPages is 1 or less', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, totalPages: 1 }));
+        expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+    });
+    it('should not show the previous link on the first page', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, page: 1, totalPages: 10 }));
+        expect(screen.queryByRole('link', { name: 'Vorige pagina' })).not.toBeInTheDocument();
+    });
+    it('should not show the next link on the last page', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, page: 10, totalPages: 10 }));
+        expect(screen.queryByRole('link', { name: 'Volgende pagina' })).not.toBeInTheDocument();
+    });
+    it('renders custom labels for the ‘previous’ and ‘next’ links', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, nextLabel: "next", page: 4, previousLabel: "previous", totalPages: 10 }));
+        const previousLink = screen.getByRole('link', { name: 'Vorige pagina' });
+        const nextLink = screen.getByRole('link', { name: 'Volgende pagina' });
+        expect(previousLink).toHaveTextContent('previous');
+        expect(previousLink).toHaveAttribute('rel', 'prev');
+        expect(nextLink).toHaveTextContent('next');
+        expect(nextLink).toHaveAttribute('rel', 'next');
+    });
+    it('renders an accessible label for the navigation', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, totalPages: 10, visuallyHiddenLabel: "Pagination" }));
+        const component = screen.getByRole('navigation', { name: 'Pagination' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders accessible labels for the ‘previous’ and ‘next’ links', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, nextVisuallyHiddenLabel: "Next page", page: 4, previousVisuallyHiddenLabel: "Previous page", totalPages: 10 }));
+        const previousLink = screen.getByRole('link', { name: 'Previous page' });
+        const nextLink = screen.getByRole('link', { name: 'Next page' });
+        expect(previousLink).toBeInTheDocument();
+        expect(nextLink).toBeInTheDocument();
+    });
+    it('renders a custom link component', () => {
+        const CustomLink = (props) => _jsx("a", { "data-test": true, ...props });
+        render(_jsx(Pagination, { linkComponent: CustomLink, linkTemplate: linkTemplate, totalPages: 10 }));
+        const customLink = screen.getByRole('link', { name: 'Pagina 1' });
+        expect(customLink).toHaveAttribute('data-test');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, ref: ref, totalPages: 10 }));
+        const component = screen.getByRole('navigation', { name: 'Paginering' });
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Pagination/Spacer.d.ts

@@ -0,0 +1 @@
+export declare const Spacer: () => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/Spacer.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Spacer = () => _jsx("li", { "aria-hidden": true, children: '\u2026' });

package/dist/Pagination/getRange.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This returns an array of the range, including spacers
+ *
+ * @example
+ * currentPage = 4, totalPages = 7, maxVisiblePages = 7
+ * // returns [1, 2, 3, 4, 5, 6, 7]
+ *
+ * @example
+ * currentPage = 5, totalPages = 100, maxVisiblePages = 7
+ * // returns [1, 'firstSpacer', 4, 5, 6, 'lastSpacer', 100]
+ *
+ * @example
+ * currentPage = 97, totalPages = 100, maxVisiblePages = 7
+ * // returns [1, 'firstSpacer', 96, 97, 98, 99, 100]
+ */
+export declare function getRange(currentPage: number, totalPages: number, maxVisiblePages: number): Array<string | number>;

package/dist/Pagination/getRange.js

@@ -0,0 +1,41 @@
+/**
+ * This returns an array of the range, including spacers
+ *
+ * @example
+ * currentPage = 4, totalPages = 7, maxVisiblePages = 7
+ * // returns [1, 2, 3, 4, 5, 6, 7]
+ *
+ * @example
+ * currentPage = 5, totalPages = 100, maxVisiblePages = 7
+ * // returns [1, 'firstSpacer', 4, 5, 6, 'lastSpacer', 100]
+ *
+ * @example
+ * currentPage = 97, totalPages = 100, maxVisiblePages = 7
+ * // returns [1, 'firstSpacer', 96, 97, 98, 99, 100]
+ */
+export function getRange(currentPage, totalPages, maxVisiblePages) {
+    // the total amount of visible pages is whatever's lower, totalPages or maxVisiblePages
+    // maxVisiblePages has a lower limit of 5
+    const visiblePages = Math.min(totalPages, Math.max(maxVisiblePages, 5));
+    const min = 1;
+    // the center part of the range starts with the current page minus half of the visible pages
+    let centerStartPage = currentPage - Math.floor(visiblePages / 2);
+    // centerStartPage has a lower limit of 1
+    centerStartPage = Math.max(centerStartPage, min);
+    // centerStartPage has an upper limit of 1 plus total pages minus visible pages
+    centerStartPage = Math.min(centerStartPage, min + totalPages - visiblePages);
+    const pages = Array.from({ length: visiblePages }, (_el, i) => centerStartPage + i).reduce((acc, pageNr, index) => {
+        if (index === 0 && pageNr !== 1) {
+            return [1, 'firstSpacer'];
+        }
+        if (totalPages > visiblePages && index === visiblePages - 2 && currentPage < totalPages - 2) {
+            return [...acc, 'lastSpacer', totalPages];
+        }
+        // Skip a number when spacer is already added
+        if ((acc.includes('firstSpacer') && index === 1) || (acc.includes('lastSpacer') && index === visiblePages - 1)) {
+            return acc;
+        }
+        return [...acc, pageNr];
+    }, []);
+    return pages;
+}

package/dist/Pagination/index.d.ts

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

package/dist/Pagination/index.js

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

package/dist/Paragraph/Paragraph.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ParagraphProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+    /** The size of the text. */
+    size?: 'small' | 'large';
+} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+export declare const Paragraph: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+    /** The size of the text. */
+    size?: "small" | "large";
+} & HTMLAttributes<HTMLParagraphElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/Paragraph/Paragraph.js

@@ -0,0 +1,10 @@
+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';
+export const Paragraph = forwardRef(({ children, className, color, size, ...restProps }, ref) => (_jsx("p", { className: clsx('ams-paragraph', color && `ams-paragraph--${color}`, size && `ams-paragraph--${size}`, className), ref: ref, ...restProps, children: children })));
+Paragraph.displayName = 'Paragraph';

package/dist/Paragraph/Paragraph.test.d.ts

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

package/dist/Paragraph/Paragraph.test.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Paragraph } from './Paragraph';
+import '@testing-library/jest-dom';
+describe('Paragraph', () => {
+    it('renders an HTML p element', () => {
+        const { container } = render(_jsx(Paragraph, {}));
+        const paragraph = container.querySelector('p:only-child');
+        expect(paragraph).toBeInTheDocument();
+    });
+    it('renders a block element', () => {
+        const { container } = render(_jsx(Paragraph, {}));
+        const paragraph = container.querySelector(':only-child');
+        expect(paragraph).toHaveStyle({ display: 'block' });
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Paragraph, {}));
+        const paragraph = container.querySelector(':only-child');
+        expect(paragraph).toHaveClass('ams-paragraph');
+    });
+    it('renders rich text content', () => {
+        const { container } = render(_jsxs(Paragraph, { children: ["Hello, ", _jsx("strong", { children: "world" })] }));
+        const paragraph = container.querySelector(':only-child');
+        const richText = paragraph?.querySelector('strong');
+        expect(richText).toBeInTheDocument();
+    });
+    it('is a default paragraph without specifying props', () => {
+        const { container } = render(_jsx(Paragraph, {}));
+        const paragraph = container.querySelector(':only-child');
+        expect(paragraph).not.toHaveClass('ams-paragraph--large');
+        expect(paragraph).not.toHaveClass('ams-paragraph--small');
+    });
+    it('renders the right size classes', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Paragraph, { size: "small", children: "Small paragraph" }), _jsx(Paragraph, { size: "large", children: "Large paragraph" })] }));
+        const smallParagraph = screen.getByText('Small paragraph');
+        const largeParagraph = screen.getByText('Large paragraph');
+        expect(smallParagraph).toHaveClass('ams-paragraph--small');
+        expect(largeParagraph).toHaveClass('ams-paragraph--large');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(Paragraph, { color: "inverse", children: "Paragraph" }));
+        const paragraph = screen.getByText('Paragraph');
+        expect(paragraph).toHaveClass('ams-paragraph--inverse');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Paragraph, { className: "intro" }));
+        const paragraph = container.querySelector(':only-child');
+        expect(paragraph).toHaveClass('intro');
+        expect(paragraph).toHaveClass('ams-paragraph');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Paragraph, { ref: ref }));
+        const paragraph = container.querySelector(':only-child');
+        expect(ref.current).toBe(paragraph);
+    });
+});

package/dist/Paragraph/index.d.ts

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

package/dist/Paragraph/index.js

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

package/dist/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { InputHTMLAttributes } from 'react';
+export type PasswordInputProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'>;
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/PasswordInput/PasswordInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const PasswordInput = forwardRef(({ className, dir, invalid, ...restProps }, ref) => (_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, autoCorrect: "off", className: clsx('ams-password-input', className), dir: dir ?? 'auto', ref: ref, spellCheck: "false", type: "password" })));
+PasswordInput.displayName = 'PasswordInput';

package/dist/PasswordInput/PasswordInput.test.d.ts

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

package/dist/PasswordInput/PasswordInput.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef, useState } from 'react';
+import { PasswordInput } from './PasswordInput';
+import { Label } from '../Label';
+import '@testing-library/jest-dom';
+describe('Password input', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(PasswordInput, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(PasswordInput, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-password-input');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(PasswordInput, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-password-input extra');
+    });
+    it('renders two attributes for privacy', () => {
+        const { container } = render(_jsx(PasswordInput, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveAttribute('autocorrect', 'off');
+        expect(component).toHaveAttribute('spellcheck', 'false');
+    });
+    it('should be working in a controlled state', async () => {
+        function ControlledComponent() {
+            const [value, setValue] = useState('Hello');
+            return _jsx(PasswordInput, { onChange: (e) => setValue(e.target.value), value: value });
+        }
+        const { container } = render(_jsx(ControlledComponent, {}));
+        const componentText = screen.getByDisplayValue('Hello');
+        expect(componentText).toBeInTheDocument();
+        const component = container.querySelector(':only-child');
+        if (component) {
+            await userEvent.type(component, ', World!');
+        }
+        const newComponentText = screen.getByDisplayValue('Hello, World!');
+        expect(newComponentText).toBeInTheDocument();
+    });
+    it('should not update the value when disabled', async () => {
+        const { container } = render(_jsx(PasswordInput, { defaultValue: "Hello", disabled: true }));
+        const component = container.querySelector(':only-child');
+        if (component) {
+            await userEvent.type(component, ', World!');
+        }
+        expect(component).toHaveValue('Hello');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(PasswordInput, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    describe('Invalid state', () => {
+        it('is not invalid by default', () => {
+            const { container } = render(_jsx(PasswordInput, {}));
+            const component = container.querySelector(':only-child');
+            expect(component).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            const { container } = render(_jsx(PasswordInput, { invalid: true }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveAttribute('aria-invalid');
+            expect(component).toBeInvalid();
+        });
+        it('omits non-essential invalid attributes when not invalid', () => {
+            const { container } = render(_jsx(PasswordInput, { invalid: false }));
+            const component = container.querySelector(':only-child');
+            expect(component).not.toHaveAttribute('aria-invalid');
+        });
+    });
+    describe('Type', () => {
+        it('sets the ‘password’ type', () => {
+            render(_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "password-field", children: "Password" }), _jsx(PasswordInput, { id: "password-field" })] }));
+            const component = screen.getByLabelText(/password/i);
+            expect(component).toHaveAttribute('type', 'password');
+        });
+    });
+});

package/dist/PasswordInput/index.d.ts

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

package/dist/PasswordInput/index.js

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

package/dist/Radio/Radio.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+export type RadioProps = {
+    /** An icon to display instead of the default icon. */
+    icon?: ReactNode;
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
+export declare const Radio: import("react").ForwardRefExoticComponent<{
+    /** An icon to display instead of the default icon. */
+    icon?: ReactNode;
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Radio/Radio.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useId } from 'react';
+import RadioIcon from './RadioIcon';
+export const Radio = forwardRef(({ children, className, icon, invalid, ...restProps }, ref) => {
+    const id = useId();
+    return (
+    // This div is here because NVDA doesn't match the input to the label
+    // without a containing element
+    _jsxs("div", { className: clsx('ams-radio', className), children: [_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: "ams-radio__input", id: id, ref: ref, type: "radio" }), _jsxs("label", { className: "ams-radio__label", htmlFor: id, children: [_jsx("span", { className: "ams-radio__icon-container", children: icon ?? _jsx(RadioIcon, {}) }), children] })] }));
+});
+Radio.displayName = 'Radio';

package/dist/Radio/Radio.test.d.ts

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

package/dist/Radio/Radio.test.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FavouriteIcon } from '@amsterdam/design-system-react-icons';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Radio } from './Radio';
+import '@testing-library/jest-dom';
+describe('Radio', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Radio, {}));
+        const wrapper = container.querySelector(':only-child');
+        const input = screen.getByRole('radio');
+        const label = container.querySelector('label');
+        expect(wrapper).toBeInTheDocument();
+        expect(wrapper).toBeVisible();
+        expect(input).toBeInTheDocument();
+        expect(input).toBeVisible();
+        expect(label).toBeInTheDocument();
+        expect(label).toBeVisible();
+    });
+    it('renders design system BEM class names', () => {
+        const { container } = render(_jsx(Radio, {}));
+        const wrapper = container.querySelector(':only-child');
+        const input = screen.getByRole('radio');
+        const label = container.querySelector('label');
+        const circle = container.querySelector('.ams-radio__circle');
+        const indicator = container.querySelector('.ams-radio__checked-indicator');
+        expect(wrapper).toHaveClass('ams-radio');
+        expect(input).toHaveClass('ams-radio__input');
+        expect(label).toHaveClass('ams-radio__label');
+        expect(circle).toBeInTheDocument();
+        expect(indicator).toBeInTheDocument();
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Radio, { className: "extra" }));
+        const wrapper = container.querySelector(':only-child');
+        expect(wrapper).toHaveClass('ams-radio extra');
+    });
+    describe('Checked state', () => {
+        it('is not checked by default', () => {
+            render(_jsx(Radio, {}));
+            const input = screen.getByRole('radio');
+            expect(input).not.toBeChecked();
+        });
+        it('can have a checked state', () => {
+            const handleChange = () => { };
+            render(_jsx(Radio, { checked: true, onChange: handleChange }));
+            const input = screen.getByRole('radio');
+            expect(input).toBeChecked();
+        });
+    });
+    describe('Invalid state', () => {
+        it('is not invalid by default', () => {
+            render(_jsx(Radio, {}));
+            const input = screen.getByRole('radio');
+            expect(input).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            render(_jsx(Radio, { invalid: true }));
+            const input = screen.getByRole('radio');
+            expect(input).toHaveAttribute('aria-invalid');
+            expect(input).toBeInvalid();
+        });
+        it('omits non-essential invalid attributes when not invalid', () => {
+            render(_jsx(Radio, { invalid: false }));
+            const input = screen.getByRole('radio');
+            expect(input).not.toHaveAttribute('aria-invalid');
+        });
+    });
+    describe('Disabled state', () => {
+        it('is not disabled by default', () => {
+            render(_jsx(Radio, {}));
+            const input = screen.getByRole('radio');
+            expect(input).not.toBeDisabled();
+        });
+        it('can have a disabled state', () => {
+            render(_jsx(Radio, { disabled: true }));
+            const input = screen.getByRole('radio');
+            expect(input).toBeDisabled();
+        });
+    });
+    describe('Disabled invalid state', () => {
+        it('can have a disabled invalid state', () => {
+            render(_jsx(Radio, { disabled: true, invalid: true }));
+            const input = screen.getByRole('radio');
+            expect(input).toBeDisabled();
+            expect(input).toBeInvalid();
+        });
+    });
+    it('can trigger a change event', () => {
+        const handleChange = jest.fn();
+        render(_jsx(Radio, { onChange: handleChange }));
+        const input = screen.getByRole('radio');
+        input?.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('does not trigger a change event when disabled', () => {
+        const handleChange = jest.fn();
+        render(_jsx(Radio, { disabled: true, onChange: handleChange }));
+        const input = screen.getByRole('radio');
+        input?.click();
+        expect(handleChange).not.toHaveBeenCalled();
+    });
+    it('can trigger a change event by clicking on label', () => {
+        const handleChange = jest.fn();
+        const { container } = render(_jsx(Radio, { onChange: handleChange }));
+        const label = container.querySelector('label');
+        label?.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('shows a custom icon', () => {
+        const { container } = render(_jsx(Radio, { icon: _jsx(FavouriteIcon, { className: "test-class" }) }));
+        const icon = container.querySelector('svg');
+        expect(icon).toHaveClass('test-class');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Radio, { ref: ref }));
+        const input = screen.getByRole('radio');
+        expect(ref.current).toBe(input);
+    });
+});

package/dist/Radio/RadioIcon.d.ts

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

package/dist/Radio/RadioIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgRadio = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("circle", { className: "ams-radio__circle", cx: 12, cy: 12, r: 10 }), _jsx("circle", { className: "ams-radio__hover-indicator", cx: 12, cy: 12, r: 9.5 }), _jsx("circle", { className: "ams-radio__checked-indicator", cx: 12, cy: 12, r: 6 })] }));
+export default SvgRadio;

package/dist/Radio/index.d.ts

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

package/dist/Radio/index.js

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