@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/Badge/Badge.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Badge, badgeColors } from './Badge';
+import '@testing-library/jest-dom';
+describe('Badge', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Badge, { label: "test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Badge, { label: "test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-badge');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Badge, { className: "extra", label: "test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-badge extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Badge, { label: "test", ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders with a number label', () => {
+        const { container } = render(_jsx(Badge, { label: 1 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('1');
+    });
+    badgeColors.map((color) => it(`renders with ${color} color`, () => {
+        const { container } = render(_jsx(Badge, { color: color, label: "test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass(`ams-badge--${color}`);
+    }));
+});

package/dist/Badge/index.d.ts

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

package/dist/Badge/index.js

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

package/dist/Blockquote/Blockquote.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { BlockquoteHTMLAttributes, PropsWithChildren } from 'react';
+export type BlockquoteProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+} & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
+export declare const Blockquote: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+} & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLQuoteElement>>;

package/dist/Blockquote/Blockquote.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 Blockquote = forwardRef(({ children, className, color, ...restProps }, ref) => (_jsx("blockquote", { ...restProps, className: clsx('ams-blockquote', color && `ams-blockquote--${color}`, className), ref: ref, children: children })));
+Blockquote.displayName = 'Blockquote';

package/dist/Blockquote/Blockquote.test.d.ts

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

package/dist/Blockquote/Blockquote.test.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Blockquote } from './Blockquote';
+import '@testing-library/jest-dom';
+describe('Blockquote', () => {
+    it('renders a blockquote HTML element', () => {
+        const { container } = render(_jsx(Blockquote, {}));
+        // TODO: Testing library doesn't seem to recognize the 'blockquote' ARIA role?
+        // const quote = screen.getByRole('blockquote')
+        const quote = container.querySelector('blockquote:only-child');
+        expect(quote).toBeInTheDocument();
+        expect(quote).toBeVisible();
+    });
+    it('renders its content', () => {
+        render(_jsx(Blockquote, { children: "Quote" }));
+        const quote = screen.getByText('Quote');
+        expect(quote).toBeInTheDocument();
+        expect(quote).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Blockquote, {}));
+        const quote = container.querySelector(':only-child');
+        expect(quote).toHaveClass('ams-blockquote');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Blockquote, { className: "extra" }));
+        const quote = container.querySelector(':only-child');
+        expect(quote).toHaveClass('ams-blockquote extra');
+    });
+    it('renders the class name for inverse color', () => {
+        const { container } = render(_jsx(Blockquote, { color: "inverse" }));
+        const quote = container.querySelector(':only-child');
+        expect(quote).toHaveClass('ams-blockquote--inverse');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Blockquote, { ref: ref }));
+        const quote = container.querySelector(':only-child');
+        expect(ref.current).toBe(quote);
+    });
+});

package/dist/Blockquote/index.d.ts

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

package/dist/Blockquote/index.js

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

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Link: import("react").ForwardRefExoticComponent<import("./BreadcrumbLink").BreadcrumbLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { BreadcrumbLink } from './BreadcrumbLink';
+const BreadcrumbRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("nav", { ...restProps, className: clsx('ams-breadcrumb', className), ref: ref, children: _jsx("ol", { className: "ams-breadcrumb__list", children: children }) })));
+BreadcrumbRoot.displayName = 'Breadcrumb';
+export const Breadcrumb = Object.assign(BreadcrumbRoot, { Link: BreadcrumbLink });

package/dist/Breadcrumb/Breadcrumb.test.d.ts

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

package/dist/Breadcrumb/Breadcrumb.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 { Breadcrumb } from './Breadcrumb';
+import '@testing-library/jest-dom';
+describe('Breadcrumb', () => {
+    it('renders', () => {
+        render(_jsx(Breadcrumb, {}));
+        const component = screen.getByRole('navigation');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Breadcrumb, {}));
+        const component = screen.getByRole('navigation');
+        expect(component).toHaveClass('ams-breadcrumb');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(Breadcrumb, { className: "extra" }));
+        const component = screen.getByRole('navigation');
+        expect(component).toHaveClass('ams-breadcrumb extra');
+    });
+    it('renders Breadcrumb component with children', () => {
+        const breadcrumbLinks = [
+            { href: '/link-1', label: 'Link 1' },
+            { href: '/link-2', label: 'Link 2' },
+            { href: '/link-3', label: 'Link 3' },
+        ];
+        const { container } = render(_jsx(Breadcrumb, { children: breadcrumbLinks.map((link, index) => (_jsx(Breadcrumb.Link, { href: link.href, children: link.label }, index))) }));
+        const breadcrumb = screen.getByRole('navigation');
+        const breadcrumbs = container.querySelectorAll('.ams-breadcrumb__item');
+        expect(breadcrumb).toBeInTheDocument();
+        expect(breadcrumbs.length).toBe(3);
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Breadcrumb, { ref: ref, children: _jsx(Breadcrumb.Link, { href: "/link-1", children: "Valid Link" }) }));
+        const breadcrumb = container.querySelector(':only-child');
+        expect(ref.current).toBe(breadcrumb);
+    });
+});

package/dist/Breadcrumb/BreadcrumbLink.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes } from 'react';
+export type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const BreadcrumbLink: import("react").ForwardRefExoticComponent<BreadcrumbLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Breadcrumb/BreadcrumbLink.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 BreadcrumbLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: "ams-breadcrumb__item", children: _jsx("a", { ...restProps, className: clsx('ams-breadcrumb__link', className), ref: ref, children: children }) })));
+BreadcrumbLink.displayName = 'Breadcrumb.Link';

package/dist/Breadcrumb/BreadcrumbLink.test.d.ts

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

package/dist/Breadcrumb/BreadcrumbLink.test.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { BreadcrumbLink } from './BreadcrumbLink';
+import '@testing-library/jest-dom';
+describe('Breadcrumb link', () => {
+    it('renders', () => {
+        render(_jsx(BreadcrumbLink, { href: "/" }));
+        const component = screen.getByRole('listitem');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(BreadcrumbLink, { href: "/" }));
+        const item = screen.getByRole('listitem');
+        expect(item).toHaveClass('ams-breadcrumb__item');
+        const link = screen.getByRole('link');
+        expect(link).toHaveClass('ams-breadcrumb__link');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(BreadcrumbLink, { className: "extra", href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-breadcrumb__link extra');
+    });
+    it('renders the href attribute', () => {
+        render(_jsx(BreadcrumbLink, { href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveAttribute('href', '/');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(BreadcrumbLink, { href: "/", ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps } from './Breadcrumb';
+export type { BreadcrumbLinkProps } from './BreadcrumbLink';

package/dist/Breadcrumb/index.js

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

package/dist/Breakout/Breakout.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { GridProps } from '../Grid';
+export type BreakoutRowNumber = 1 | 2 | 3 | 4;
+export type BreakoutRowNumbers = {
+    narrow: BreakoutRowNumber;
+    medium: BreakoutRowNumber;
+    wide: BreakoutRowNumber;
+};
+export type BreakoutProps = GridProps;
+export declare const Breakout: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Cell: import("react").ForwardRefExoticComponent<import("./BreakoutCell").BreakoutCellProps & import("react").RefAttributes<any>>;
+};

package/dist/Breakout/Breakout.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { BreakoutCell } from './BreakoutCell';
+import { paddingClasses } from '../Grid/paddingClasses';
+const BreakoutRoot = forwardRef(({ children, className, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-breakout', gapVertical && `ams-breakout--gap-vertical--${gapVertical}`, paddingClasses('breakout', paddingBottom, paddingTop, paddingVertical), className), ref: ref, children: children })));
+BreakoutRoot.displayName = 'Breakout';
+export const Breakout = Object.assign(BreakoutRoot, { Cell: BreakoutCell });

package/dist/Breakout/Breakout.test.d.ts

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

package/dist/Breakout/Breakout.test.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Breakout } from './Breakout';
+import { gridGaps, gridPaddings } from '../Grid/Grid';
+import '@testing-library/jest-dom';
+describe('Breakout', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Breakout, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Breakout, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Breakout, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout extra');
+    });
+    gridGaps.forEach((size) => {
+        it(`renders the correct class name for a ${size} vertical gap`, () => {
+            const { container } = render(_jsx(Breakout, { gapVertical: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-breakout--gap-vertical--${size}`);
+        });
+    });
+    gridPaddings.forEach((size) => {
+        it(`renders the correct class name for a ${size} bottom padding`, () => {
+            const { container } = render(_jsx(Breakout, { paddingBottom: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-breakout--padding-bottom--${size}`);
+        });
+    });
+    gridPaddings.forEach((size) => {
+        it(`renders the correct class name for a ${size} top padding`, () => {
+            const { container } = render(_jsx(Breakout, { paddingTop: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-breakout--padding-top--${size}`);
+        });
+    });
+    gridPaddings.forEach((size) => {
+        it(`renders the correct class name for a ${size} vertical padding`, () => {
+            const { container } = render(_jsx(Breakout, { paddingVertical: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-breakout--padding-vertical--${size}`);
+        });
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Breakout, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Breakout/BreakoutCell.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { BreakoutRowNumber, BreakoutRowNumbers } from './Breakout';
+import type { GridColumnNumber, GridColumnNumbers } from '../Grid/Grid';
+export declare const breakoutCellTags: readonly ["article", "div", "section"];
+type BreakoutCellTag = (typeof breakoutCellTags)[number];
+type BreakoutCellSpanAllProp = {
+    /** Lets the cell span the full width of all grid variants. */
+    colSpan: 'all';
+    colStart?: never;
+    /** The content of this cell.
+     * The Cell containing the Spotlight expands horizontally and vertically to cover the adjacent gaps and margins.
+     * The Cell containing the Image aligns itself to the bottom of the row, in case it is less tall than the text. */
+    has?: 'spotlight';
+};
+type BreakoutCellSpanAndStartProps = {
+    /** The amount of grid columns the cell spans. */
+    colSpan?: 'all' | GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    colStart?: GridColumnNumber | GridColumnNumbers;
+    has?: 'figure';
+};
+type BreakoutCellRowSpanAndStartProps = {
+    /** The amount of grid rows the cell spans. */
+    rowSpan?: BreakoutRowNumber | BreakoutRowNumbers;
+    /** The index of the grid row the cell starts at. */
+    rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
+};
+export type BreakoutCellProps = {
+    /** The HTML element to use. */
+    as?: BreakoutCellTag;
+} & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const BreakoutCell: import("react").ForwardRefExoticComponent<BreakoutCellProps & import("react").RefAttributes<any>>;
+export {};

package/dist/Breakout/BreakoutCell.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { breakoutCellClasses } from './breakoutCellClasses';
+export const breakoutCellTags = ['article', 'div', 'section'];
+export const BreakoutCell = forwardRef(({ as: Tag = 'div', children, className, colSpan, colStart, has, rowSpan, rowStart, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-breakout__cell', breakoutCellClasses(colSpan, colStart, rowSpan, rowStart), has && `ams-breakout__cell--has-${has}`, className), ref: ref, children: children })));
+BreakoutCell.displayName = 'Breakout.Cell';

package/dist/Breakout/BreakoutCell.test.d.ts

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

package/dist/Breakout/BreakoutCell.test.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Breakout } from './Breakout';
+import '@testing-library/jest-dom';
+import { breakoutCellTags } from './BreakoutCell';
+import { ariaRoleForTag } from '../common/accessibility';
+describe('Breakout cell', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Breakout.Cell, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Breakout.Cell, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Breakout.Cell, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell extra');
+    });
+    breakoutCellTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Breakout.Cell, { "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();
+        const { container } = render(_jsx(Breakout.Cell, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders no class names for undefined values for colStart and colSpan', () => {
+        const { container } = render(_jsx(Breakout.Cell, {}));
+        const elementWithColSpanClass = container.querySelector('[class*="ams-breakout__cell--col-span"]');
+        const elementWithColStartClass = container.querySelector('[class*="ams-breakout__cell--col-start"]');
+        const elementWithRowSpanClass = container.querySelector('[class*="ams-breakout__cell--row-span"]');
+        const elementWithRowStartClass = container.querySelector('[class*="ams-breakout__cell--row-start"]');
+        expect(elementWithColSpanClass).not.toBeInTheDocument();
+        expect(elementWithColStartClass).not.toBeInTheDocument();
+        expect(elementWithRowSpanClass).not.toBeInTheDocument();
+        expect(elementWithRowStartClass).not.toBeInTheDocument();
+    });
+    it('renders class names for single number values for colStart and colSpan', () => {
+        const { container } = render(_jsx(Breakout.Cell, { colSpan: 4, colStart: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--col-span-4 ams-breakout__cell--col-start-2');
+    });
+    it('renders class names for a single number value for colStart', () => {
+        const { container } = render(_jsx(Breakout.Cell, { colSpan: 8 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--col-span-8');
+    });
+    it('renders class names for a single number value for colSpan', () => {
+        const { container } = render(_jsx(Breakout.Cell, { colStart: 6 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--col-start-6');
+    });
+    it('renders class names for a single number for colSpan and an object for colStart', () => {
+        const { container } = render(_jsx(Breakout.Cell, { colSpan: 8, colStart: { narrow: 2, medium: 4, wide: 6 } }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--col-span-8 ams-breakout__cell--col-start-2 ams-breakout__cell--col-start-4-medium ams-breakout__cell--col-start-6-wide');
+    });
+    it('renders class names for an object for colSpan and a single number for colStart', () => {
+        const { container } = render(_jsx(Breakout.Cell, { colSpan: { narrow: 3, medium: 5, wide: 7 }, colStart: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--col-span-3 ams-breakout__cell--col-span-5-medium ams-breakout__cell--col-span-7-wide ams-breakout__cell--col-start-2');
+    });
+    it('renders class names for an object for both colSpan and colStart', () => {
+        const { container } = render(_jsx(Breakout.Cell, { colSpan: { narrow: 2, medium: 4, wide: 6 }, colStart: { narrow: 1, medium: 3, wide: 5 } }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--col-span-2 ams-breakout__cell--col-span-4-medium ams-breakout__cell--col-span-6-wide ams-breakout__cell--col-start-1 ams-breakout__cell--col-start-3-medium ams-breakout__cell--col-start-5-wide');
+    });
+    it('renders the correct class name for the “all” value of colSpan', () => {
+        const { container } = render(_jsx(Breakout.Cell, { colSpan: "all" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--col-span-all');
+    });
+    it('renders class names for single number values for rowStart and rowSpan', () => {
+        const { container } = render(_jsx(Breakout.Cell, { rowSpan: 3, rowStart: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--row-span-3 ams-breakout__cell--row-start-2');
+    });
+    it('renders class names for a single number value for rowStart', () => {
+        const { container } = render(_jsx(Breakout.Cell, { rowStart: 4 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--row-start-4');
+    });
+    it('renders class names for a single number value for rowSpan', () => {
+        const { container } = render(_jsx(Breakout.Cell, { rowSpan: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--row-span-2');
+    });
+    it('renders class names for a single number for rowSpan and an object for rowStart', () => {
+        const { container } = render(_jsx(Breakout.Cell, { rowSpan: 3, rowStart: { narrow: 1, medium: 2, wide: 3 } }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--row-span-3 ams-breakout__cell--row-start-1 ams-breakout__cell--row-start-2-medium ams-breakout__cell--row-start-3-wide');
+    });
+    it('renders class names for an object for rowSpan and a single number for rowStart', () => {
+        const { container } = render(_jsx(Breakout.Cell, { rowSpan: { narrow: 2, medium: 3, wide: 4 }, rowStart: 1 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--row-span-2 ams-breakout__cell--row-span-3-medium ams-breakout__cell--row-span-4-wide ams-breakout__cell--row-start-1');
+    });
+    it('renders class names for an object for both rowSpan and rowStart', () => {
+        const { container } = render(_jsx(Breakout.Cell, { rowSpan: { narrow: 2, medium: 3, wide: 4 }, rowStart: { narrow: 1, medium: 2, wide: 3 } }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-breakout__cell--row-span-2 ams-breakout__cell--row-span-3-medium ams-breakout__cell--row-span-4-wide ams-breakout__cell--row-start-1 ams-breakout__cell--row-start-2-medium ams-breakout__cell--row-start-3-wide');
+    });
+    it(`renders the correct class if it has a Figure`, () => {
+        const { container } = render(_jsx(Breakout.Cell, { has: "figure" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass(`ams-breakout__cell--has-figure`);
+    });
+    it(`renders the correct class if it has a Spotlight`, () => {
+        const { container } = render(_jsx(Breakout.Cell, { colSpan: "all", has: "spotlight" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass(`ams-breakout__cell--has-spotlight`);
+    });
+});

package/dist/Breakout/breakoutCellClasses.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { BreakoutCellProps } from './BreakoutCell';
+export declare const breakoutCellClasses: (colSpan?: BreakoutCellProps["colSpan"], colStart?: BreakoutCellProps["colStart"], rowSpan?: BreakoutCellProps["rowSpan"], rowStart?: BreakoutCellProps["rowStart"]) => string[];

package/dist/Breakout/breakoutCellClasses.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { addGridClass } from '../Grid/gridCellClasses';
+export const breakoutCellClasses = (colSpan, colStart, rowSpan, rowStart) => [
+    ...addGridClass('ams-breakout__cell--col-span-', colSpan),
+    ...addGridClass('ams-breakout__cell--col-start-', colStart),
+    ...addGridClass('ams-breakout__cell--row-span-', rowSpan),
+    ...addGridClass('ams-breakout__cell--row-start-', rowStart),
+];

package/dist/Breakout/index.d.ts

@@ -0,0 +1,3 @@
+export { Breakout } from './Breakout';
+export type { BreakoutProps } from './Breakout';
+export type { BreakoutCellProps } from './BreakoutCell';

package/dist/Breakout/index.js

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

package/dist/Button/Button.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+import type { IconProps } from '../Icon';
+type IconBeforeProp = {
+    /** Shows the icon before the label. Requires a value for `icon`. Cannot be used together with `iconOnly`. */
+    iconBefore?: boolean;
+    iconOnly?: never;
+};
+type IconOnlyProp = {
+    iconBefore?: never;
+    /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
+    iconOnly?: boolean;
+};
+type IconButtonProps = {
+    /** Adds an icon to the button, showing it after the label. */
+    icon: IconProps['svg'];
+} & (IconBeforeProp | IconOnlyProp);
+type TextButtonProps = {
+    icon?: never;
+    iconBefore?: never;
+    iconOnly?: never;
+};
+export type ButtonProps = {
+    /** The level of prominence. Use a primary button only once per page or section. */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+} & (IconButtonProps | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/Button/Button.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const Button = forwardRef(({ children, className, disabled, icon, iconBefore, iconOnly, type, variant = 'primary', ...restProps }, ref) => (_jsxs("button", { ...restProps, className: clsx('ams-button', `ams-button--${variant}`, icon && iconOnly && `ams-button--icon-only`, className), disabled: disabled, ref: ref, type: type || 'button', children: [icon && (iconBefore || iconOnly) && _jsx(Icon, { square: iconOnly, svg: icon }), icon && iconOnly ? _jsx("span", { className: "ams-visually-hidden", children: children }) : children, icon && !iconBefore && !iconOnly && _jsx(Icon, { svg: icon })] })));
+Button.displayName = 'Button';

package/dist/Button/Button.test.d.ts

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