@amsterdam/design-system-react 2.0.2 → 2.2.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.2",
+  "version": "2.2.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All React components from the Amsterdam Design System. Use it to compose pages in your website or application.",
   "homepage": "https://designsystem.amsterdam",
@@ -31,51 +31,52 @@
   "dependencies": {
     "@babel/runtime": "7.28.4",
     "clsx": "2.1.1",
-    "@amsterdam/design-system-react-icons": "1.1.0"
+    "@amsterdam/design-system-react-icons": "1.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.28.4",
-    "@babel/plugin-transform-runtime": "7.28.3",
-    "@babel/preset-env": "7.28.3",
-    "@babel/preset-react": "7.27.1",
-    "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "28.0.6",
-    "@rollup/plugin-node-resolve": "16.0.1",
+    "@babel/core": "7.28.5",
+    "@babel/plugin-transform-runtime": "7.28.5",
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-react": "7.28.5",
+    "@rollup/plugin-babel": "6.1.0",
+    "@rollup/plugin-commonjs": "28.0.9",
+    "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/pluginutils": "5.3.0",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.8.0",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "30.0.0",
     "@types/lodash": "4.17.20",
-    "@types/react": "18.3.23",
-    "jest": "30.1.3",
-    "jest-environment-jsdom": "30.1.2",
-    "next": "15.5.3",
+    "@types/react": "18.3.26",
+    "@types/react-dom": "18.3.7",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
+    "next": "15.5.6",
     "npm-run-all": "4.1.5",
     "postcss": "8.5.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "4.52.0",
+    "rollup": "4.53.2",
     "rollup-plugin-dts": "6.2.3",
     "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-node-externals": "8.1.1",
+    "rollup-plugin-node-externals": "8.1.2",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.93.0",
+    "sass": "1.94.0",
     "tslib": "2.8.1"
   },
   "peerDependencies": {
     "react": "16 - 19",
     "react-dom": "16 - 19",
-    "@amsterdam/design-system-css": "2.0.1"
+    "@amsterdam/design-system-css": "2.2.0"
   },
   "scripts": {
-    "build": "tsc && rollup -c",
+    "build": "tsc --project ./tsconfig.build.json && rollup -c",
     "build:watch": "rollup -c --watch",
     "clean": "rimraf dist/",
-    "lint": "tsc --noEmit --project ./tsconfig.json && tsc --noEmit --project ./tsconfig.test.json",
+    "lint": "tsc --noEmit --project ./tsconfig.json",
     "test": "jest --verbose --coverage",
     "watch:test": "jest --verbose --watch"
   }

package/dist/Accordion/Accordion.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/Accordion/Accordion.test.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { createRef } from 'react';
-import { Accordion } from './Accordion';
-import '@testing-library/jest-dom';
-describe('Accordion', () => {
-    it('renders an accordion', () => {
-        const { container } = render(_jsx(Accordion, { headingLevel: 2 }));
-        const accordion = container.querySelector('.ams-accordion');
-        expect(accordion).toBeInTheDocument();
-        expect(accordion).toBeVisible();
-    });
-    it('renders an extra class name', () => {
-        const { container } = render(_jsx(Accordion, { className: "test", headingLevel: 2 }));
-        const accordion = container.querySelector('.ams-accordion');
-        expect(accordion).toHaveClass('test');
-    });
-    it('sets focus on Accordion buttons when using arrow keys', async () => {
-        const user = userEvent.setup();
-        render(_jsxs(Accordion, { headingLevel: 2, children: [_jsx(Accordion.Section, { label: "one" }), _jsx(Accordion.Section, { label: "two" }), _jsx(Accordion.Section, { label: "three" })] }));
-        const firstButton = screen.getByRole('button', { name: 'one' });
-        const thirdButton = screen.getByRole('button', { name: 'three' });
-        await user.click(firstButton);
-        expect(firstButton).toHaveFocus();
-        // Click the down arrow key twice
-        await user.keyboard('{ArrowDown}');
-        await user.keyboard('{ArrowDown}');
-        expect(thirdButton).toHaveFocus();
-        expect(firstButton).not.toHaveFocus();
-        await user.keyboard('{ArrowDown}');
-        expect(firstButton).toHaveFocus();
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        const { container } = render(_jsx(Accordion, { headingLevel: 2, ref: ref }));
-        const accordion = container.querySelector('.ams-accordion');
-        expect(ref.current).toBe(accordion);
-    });
-});

package/dist/Accordion/AccordionSection.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/Accordion/AccordionSection.test.js

@@ -1,100 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { fireEvent, render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Accordion } from './Accordion';
-import '@testing-library/jest-dom';
-describe('Accordion section', () => {
-    const testLabel = 'Test title';
-    const testContent = 'Test content';
-    it('renders an accordion section', () => {
-        const { container } = render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
-        const accordionSection = container.querySelector('.ams-accordion__section');
-        expect(accordionSection).toBeInTheDocument();
-        expect(accordionSection).toBeVisible();
-    });
-    it('renders the accordion section BEM class names', () => {
-        const { container } = render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
-        const heading = screen.getByRole('heading', {
-            name: testLabel,
-        });
-        const button = screen.getByRole('button', {
-            name: testLabel,
-        });
-        const section = container.querySelector('.ams-accordion__panel');
-        expect(heading).toHaveClass('ams-heading ams-accordion__header');
-        expect(button).toHaveClass('ams-accordion__button');
-        expect(section).toBeInTheDocument();
-    });
-    it('adds and removes --expanded class when the button is clicked', () => {
-        const { getByText } = render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
-        const button = screen.getByRole('button', {
-            name: testLabel,
-        });
-        const sectionContent = getByText(testContent);
-        expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded');
-        fireEvent.click(button);
-        expect(sectionContent).toHaveClass('ams-accordion__panel--expanded');
-        fireEvent.click(button);
-        expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded');
-    });
-    it('adds --expanded class when expanded prop is true', () => {
-        const { getByText } = render(_jsx(Accordion.Section, { expanded: true, label: testLabel, children: testContent }));
-        const sectionContent = getByText(testContent);
-        expect(sectionContent).toHaveClass('ams-accordion__panel--expanded');
-    });
-    it('renders a section HTML tag by default', () => {
-        render(_jsx(Accordion, { headingLevel: 2, children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
-        const sectionQuery = screen.queryByRole('region');
-        expect(sectionQuery).toBeInTheDocument();
-    });
-    it('does not render a section HTML tag when the sectionAs is "div"', () => {
-        render(_jsx(Accordion, { headingLevel: 2, sectionAs: "div", children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
-        const sectionQuery = screen.queryByRole('region');
-        expect(sectionQuery).not.toBeInTheDocument();
-    });
-    it('renders an accessible heading', () => {
-        render(_jsx(Accordion, { headingLevel: 3, children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
-        const heading = screen.getByRole('heading', {
-            level: 3,
-            name: testLabel,
-        });
-        expect(heading).toBeInTheDocument();
-        expect(heading).toBeVisible();
-    });
-    it('renders the allowed levels correctly', () => {
-        render(_jsxs(_Fragment, { children: [_jsx(Accordion, { headingLevel: 2, children: _jsx(Accordion.Section, { label: "Level 2", children: testContent }) }), _jsx(Accordion, { headingLevel: 4, children: _jsx(Accordion.Section, { label: "Level 4", children: testContent }) })] }));
-        const headingLevel2 = screen.getByRole('heading', {
-            level: 2,
-            name: 'Level 2',
-        });
-        const headingLevel4 = screen.getByRole('heading', {
-            level: 4,
-            name: 'Level 4',
-        });
-        expect(headingLevel2).toBeInTheDocument();
-        expect(headingLevel4).toBeInTheDocument();
-    });
-    it('renders an icon', () => {
-        render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
-        const button = screen.getByRole('button', {
-            name: testLabel,
-        });
-        const icon = button ? button.querySelector('svg:only-child') : null;
-        expect(icon).toBeInTheDocument();
-    });
-    it('renders an extra class name', () => {
-        const { container } = render(_jsx(Accordion.Section, { className: "test", label: testLabel, children: testContent }));
-        const accordionSection = container.querySelector('.ams-accordion__section');
-        expect(accordionSection).toHaveClass('test');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        const { container } = render(_jsx(Accordion.Section, { label: testLabel, ref: ref, children: testContent }));
-        const accordionSection = container.querySelector('.ams-accordion__section');
-        expect(ref.current).toBe(accordionSection);
-    });
-});

package/dist/ActionGroup/ActionGroup.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/ActionGroup/ActionGroup.test.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { ActionGroup } from './ActionGroup';
-import '@testing-library/jest-dom';
-describe('Action Group', () => {
-    it('renders', () => {
-        render(_jsx(ActionGroup, {}));
-        const component = screen.getByRole('group');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-    });
-    it('renders a design system BEM class name', () => {
-        render(_jsx(ActionGroup, {}));
-        const component = screen.getByRole('group');
-        expect(component).toHaveClass('ams-action-group');
-    });
-    it('renders an extra class name', () => {
-        render(_jsx(ActionGroup, { className: "extra" }));
-        const component = screen.getByRole('group');
-        expect(component).toHaveClass('ams-action-group extra');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        render(_jsx(ActionGroup, { ref: ref }));
-        const component = screen.getByRole('group');
-        expect(ref.current).toBe(component);
-    });
-});

package/dist/Alert/Alert.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/Alert/Alert.test.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { fireEvent, render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Alert } from './Alert';
-import '@testing-library/jest-dom';
-describe('Alert', () => {
-    it('renders', () => {
-        render(_jsx(Alert, { heading: "Let op!", headingLevel: 2 }));
-        const component = screen.getByRole('region', { name: 'Let op!' });
-        const icon = component?.querySelector('.ams-alert__severity-indicator > .ams-icon');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-        expect(icon).toBeInTheDocument();
-        expect(icon).not.toBeVisible(); // The icon is hidden by default, and only shown when the CSS loads.
-    });
-    it('renders a design system BEM class name', () => {
-        render(_jsx(Alert, { heading: "Let op!", headingLevel: 2 }));
-        const component = screen.getByRole('region', { name: 'Let op!' });
-        expect(component).toHaveClass('ams-alert');
-    });
-    it('renders an extra class name', () => {
-        render(_jsx(Alert, { className: "extra", heading: "Let op!", headingLevel: 2 }));
-        const component = screen.getByRole('region', { name: 'Let op!' });
-        expect(component).toHaveClass('ams-alert extra');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        render(_jsx(Alert, { heading: "Let op!", headingLevel: 2, ref: ref }));
-        const component = screen.getByRole('region', { name: 'Let op!' });
-        expect(ref.current).toBe(component);
-    });
-    it('renders a heading', () => {
-        render(_jsx(Alert, { heading: "Test heading", headingLevel: 2 }));
-        const heading = screen.getByRole('heading', {
-            name: 'Test heading',
-        });
-        expect(heading).toBeInTheDocument();
-    });
-    it('renders the close button', () => {
-        render(_jsx(Alert, { closeable: true, heading: "Let op!", headingLevel: 2 }));
-        const component = screen.getByRole('region', { name: 'Let op!' });
-        const closeButton = component?.querySelector('.ams-icon-button');
-        expect(closeButton).toBeInTheDocument();
-        expect(closeButton).toBeVisible();
-    });
-    it('renders the close button with a label', () => {
-        render(_jsx(Alert, { closeable: true, closeButtonLabel: "Close", heading: "Let op!", headingLevel: 2 }));
-        const closeButton = screen.getByRole('button', { name: 'Close' });
-        expect(closeButton).toBeInTheDocument();
-    });
-    it('fires the onClose event when the close button is clicked', () => {
-        const onClose = jest.fn();
-        render(_jsx(Alert, { closeable: true, heading: "Let op!", headingLevel: 2, onClose: onClose }));
-        const component = screen.getByRole('region', { name: 'Let op!' });
-        const closeButton = component?.querySelector('.ams-icon-button');
-        fireEvent.click(closeButton);
-        expect(onClose).toHaveBeenCalled();
-    });
-    it('uses a custom headingId to label the Alert', () => {
-        render(_jsx(Alert, { heading: "Let op!", headingId: "custom-heading-id", headingLevel: 2 }));
-        const component = screen.getByRole('region', { name: 'Let op!' });
-        expect(component).toBeInTheDocument();
-        expect(component).toHaveAttribute('aria-labelledby', 'custom-heading-id');
-    });
-    it('does not label the Alert when headingId is set to null', () => {
-        const { container } = render(_jsx(Alert, { heading: "Let op!", headingId: null, headingLevel: 2 }));
-        const component = container.querySelector(':only-child');
-        expect(component).not.toHaveAttribute('aria-labelledby');
-    });
-});

package/dist/Avatar/Avatar.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/Avatar/Avatar.test.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Avatar, avatarColors } from './Avatar';
-import '@testing-library/jest-dom';
-describe('Avatar', () => {
-    it('renders', () => {
-        render(_jsx(Avatar, { label: "NR" }));
-        const component = screen.getByText('Initialen gebruiker: NR');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-    });
-    it('renders a design system BEM class name', () => {
-        const { container } = render(_jsx(Avatar, { label: "RS" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-avatar');
-    });
-    it('renders an extra class name', () => {
-        const { container } = render(_jsx(Avatar, { className: "extra", label: "VS" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-avatar extra');
-    });
-    it('renders with a label consisting of no more than two, uppercase letters', () => {
-        const { container } = render(_jsx(Avatar, { label: "Design System" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveTextContent('DE');
-    });
-    it('renders with default content and title', () => {
-        const { container } = render(_jsx(Avatar, { label: "" }));
-        const component = screen.getByText('Gebruiker');
-        const svg = container.querySelector('svg');
-        expect(component).toBeVisible();
-        expect(svg).toBeInTheDocument();
-        expect(svg).not.toBeVisible(); // The icon is hidden by default, and only shown when the CSS loads.
-    });
-    it('renders with a profile picture', () => {
-        const { container } = render(_jsx(Avatar, { imageSrc: "image-source", label: "RS" }));
-        const component = screen.getByText('Initialen gebruiker: RS');
-        const image = container.querySelector('[src="image-source"]');
-        expect(component).toBeVisible();
-        expect(image).toBeVisible();
-    });
-    it('shortens a label that is too long', () => {
-        const { container } = render(_jsx(Avatar, { label: "ABC" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveTextContent('AB');
-    });
-    avatarColors.map((color) => it(`renders with ${color} color`, () => {
-        const { container } = render(_jsx(Avatar, { color: color, label: "AL" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass(`ams-avatar--${color}`);
-    }));
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        const { container } = render(_jsx(Avatar, { label: "AL", ref: ref }));
-        const component = container.querySelector(':only-child');
-        expect(ref.current).toBe(component);
-    });
-});

package/dist/Badge/Badge.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/Badge/Badge.test.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-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/Blockquote/Blockquote.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/Blockquote/Blockquote.test.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-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/Breadcrumb/Breadcrumb.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/Breadcrumb/Breadcrumb.test.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-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) => (_jsx(Breadcrumb.Link, { href: link.href, children: link.label }, link.label))) }));
-        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.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';

package/dist/Breadcrumb/BreadcrumbLink.test.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-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/Breakout/Breakout.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import '@testing-library/jest-dom';