@amsterdam/design-system-react 0.15.0 → 1.0.0

package/README.md

@@ -24,7 +24,7 @@ npm install @amsterdam/design-system-assets @amsterdam/design-system-css @amster
 ```
 
 The React components themselves are unstyled.
-[Override the design tokens](https://github.com/Amsterdam/design-system/blob/main/proprietary/tokens/README.md) to use them with a different branding.
+[Override the design tokens](https://github.com/Amsterdam/design-system/blob/main/packages-proprietary/tokens/README.md) to use them with a different branding.
 
 ## Usage
 

package/dist/Accordion/Accordion.d.ts

@@ -14,6 +14,9 @@ export type AccordionProps = {
     /** The HTML element to use for each Accordion Section. */
     sectionAs?: 'div' | 'section';
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-accordion--docs Accordion docs at Amsterdam Design System}
+ */
 export declare const Accordion: import("react").ForwardRefExoticComponent<{
     /**
      * The hierarchical level of this Accordion’s Section Headings within the document.

package/dist/Accordion/Accordion.js

@@ -12,8 +12,14 @@ const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs
     const innerRef = useRef(null);
     // use a passed ref if it's there, otherwise use innerRef
     useImperativeHandle(ref, () => innerRef.current);
-    const { keyDown } = useKeyboardFocus(innerRef, { rotating: true });
+    const { keyDown } = useKeyboardFocus(innerRef, {
+        focusableElements: ['.ams-accordion__button:not([disabled])'],
+        rotating: true,
+    });
     return (_jsx(AccordionContext.Provider, { value: { headingLevel: headingLevel, sectionAs: sectionAs }, children: _jsx("div", { className: clsx('ams-accordion', className), onKeyDown: keyDown, ref: innerRef, children: children }) }));
 });
 AccordionRoot.displayName = 'Accordion';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-accordion--docs Accordion docs at Amsterdam Design System}
+ */
 export const Accordion = Object.assign(AccordionRoot, { Section: AccordionSection });

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

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

package/dist/Accordion/Accordion.test.js

@@ -1,5 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
+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';
@@ -10,11 +15,26 @@ describe('Accordion', () => {
         expect(accordion).toBeInTheDocument();
         expect(accordion).toBeVisible();
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Accordion, { className: "test", headingLevel: 1 }));
         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: 1, 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: 1, ref: ref }));

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

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

package/dist/Accordion/AccordionSection.test.js

@@ -1,4 +1,8 @@
 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 { Accordion } from './Accordion';
@@ -69,7 +73,7 @@ describe('Accordion section', () => {
         const icon = button ? button.querySelector('svg:only-child') : null;
         expect(icon).toBeInTheDocument();
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/Accordion/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Accordion } from './Accordion';
 export type { AccordionProps } from './Accordion';
 export type { AccordionSectionProps } from './AccordionSection';

package/dist/Accordion/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Accordion } from './Accordion';

package/dist/ActionGroup/ActionGroup.d.ts

@@ -4,6 +4,9 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs Action Group docs at Amsterdam Design System}
+ */
 export declare const ActionGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ActionGroup/ActionGroup.js

@@ -5,5 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs Action Group docs at Amsterdam Design System}
+ */
 export const ActionGroup = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-action-group', className), ref: ref, role: "group", children: children })));
 ActionGroup.displayName = 'ActionGroup';

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

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

package/dist/ActionGroup/ActionGroup.test.js

@@ -1,4 +1,8 @@
 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';
@@ -15,7 +19,7 @@ describe('Action Group', () => {
         const component = screen.getByRole('group');
         expect(component).toHaveClass('ams-action-group');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(ActionGroup, { className: "extra" }));
         const component = screen.getByRole('group');
         expect(component).toHaveClass('ams-action-group extra');

package/dist/ActionGroup/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { ActionGroup } from './ActionGroup';
 export type { ActionGroupProps } from './ActionGroup';

package/dist/ActionGroup/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { ActionGroup } from './ActionGroup';

package/dist/Alert/Alert.d.ts

@@ -23,6 +23,9 @@ export type AlertProps = {
     /** The significance of the message conveyed. */
     severity?: Severity;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-alert--docs Alert docs at Amsterdam Design System}
+ */
 export declare const Alert: import("react").ForwardRefExoticComponent<{
     /** Whether the user can dismiss the Alert. Adds a button to its top right. */
     closeable?: boolean;

package/dist/Alert/Alert.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { AlertIcon, CheckmarkIcon, InfoIcon } from '@amsterdam/design-system-react-icons';
+import { ErrorFillIcon, InfoFillIcon, SuccessFillIcon, WarningFillIcon } from '@amsterdam/design-system-react-icons';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Heading } from '../Heading';
@@ -11,12 +11,15 @@ import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Row } from '../Row';
 const iconSvgBySeverity = {
-    error: AlertIcon,
-    success: CheckmarkIcon,
-    warning: AlertIcon,
+    error: ErrorFillIcon,
+    success: SuccessFillIcon,
+    warning: WarningFillIcon,
 };
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-alert--docs Alert docs at Amsterdam Design System}
+ */
 export const Alert = forwardRef(({ children, className, closeable, closeButtonLabel = 'Sluiten', heading, headingLevel, onClose, severity, ...restProps }, ref) => {
-    const SeverityIcon = severity ? iconSvgBySeverity[severity] : InfoIcon;
+    const SeverityIcon = severity ? iconSvgBySeverity[severity] : InfoFillIcon;
     return (_jsxs("section", { ...restProps, className: clsx('ams-alert', severity && `ams-alert--${severity}`, className), ref: ref, children: [_jsx("div", { className: "ams-alert__severity-indicator", children: _jsx(Icon, { color: "inverse", size: "heading-4", svg: SeverityIcon }) }), _jsxs("div", { className: "ams-alert__content", children: [_jsxs(Row, { align: "between", alignVertical: "start", children: [_jsx(Heading, { level: headingLevel, size: "level-4", children: heading }), closeable && _jsx(IconButton, { label: closeButtonLabel, onClick: onClose, size: "heading-4" })] }), children] })] }));
 });
 Alert.displayName = 'Alert';

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

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

package/dist/Alert/Alert.test.js

@@ -1,4 +1,8 @@
 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';
@@ -18,7 +22,7 @@ describe('Alert', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-alert');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Alert, { className: "extra", heading: "Let op!", headingLevel: 2 }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-alert extra');

package/dist/Alert/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Alert } from './Alert';
 export type { AlertProps } from './Alert';

package/dist/Alert/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Alert } from './Alert';

package/dist/Avatar/Avatar.d.ts

@@ -13,6 +13,9 @@ export type AvatarProps = {
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
 } & HTMLAttributes<HTMLSpanElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-avatar--docs Avatar docs at Amsterdam Design System}
+ */
 export declare const Avatar: import("react").ForwardRefExoticComponent<{
     /** The background colour. */
     color?: AvatarColor;

package/dist/Avatar/Avatar.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { PersonalLoginIcon } from '@amsterdam/design-system-react-icons';
+import { PersonFillIcon } from '@amsterdam/design-system-react-icons';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
@@ -15,8 +15,11 @@ const AvatarContent = ({ imageSrc, initials }) => {
     if (initials.length) {
         return _jsx("span", { "aria-hidden": true, children: initials });
     }
-    return _jsx(Icon, { size: "small", svg: PersonalLoginIcon });
+    return _jsx(Icon, { size: "small", svg: PersonFillIcon });
 };
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-avatar--docs Avatar docs at Amsterdam Design System}
+ */
 export const Avatar = forwardRef(({ className, color, imageSrc, label, ...restProps }, ref) => {
     const initials = label.slice(0, 2).toUpperCase();
     const a11yLabel = initials.length === 0 ? 'Gebruiker' : `Initialen gebruiker: ${initials}`;

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

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

package/dist/Avatar/Avatar.test.js

@@ -1,4 +1,8 @@
 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';
@@ -15,7 +19,7 @@ describe('Avatar', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-avatar');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/Avatar/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';

package/dist/Avatar/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Avatar } from './Avatar';

package/dist/Badge/Badge.d.ts

@@ -11,6 +11,9 @@ export type BadgeProps = {
     /** The text content. */
     label: string | number;
 } & HTMLAttributes<HTMLElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-badge--docs Badge docs at Amsterdam Design System}
+ */
 export declare const Badge: import("react").ForwardRefExoticComponent<{
     /** The background colour. */
     color?: BadgeColor;

package/dist/Badge/Badge.js

@@ -6,5 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 export const badgeColors = ['azure', 'lime', 'magenta', 'orange', 'purple', 'red', 'yellow'];
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-badge--docs Badge docs at Amsterdam Design System}
+ */
 export const Badge = forwardRef(({ className, color, label, ...restProps }, ref) => (_jsx("span", { ...restProps, className: clsx('ams-badge', color && `ams-badge--${color}`, className), ref: ref, children: label })));
 Badge.displayName = 'Badge';

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

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

package/dist/Badge/Badge.test.js

@@ -1,4 +1,8 @@
 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';
@@ -15,7 +19,7 @@ describe('Badge', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-badge');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/Badge/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Badge } from './Badge';
 export type { BadgeProps } from './Badge';

package/dist/Badge/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Badge } from './Badge';

package/dist/Blockquote/Blockquote.d.ts

@@ -7,6 +7,9 @@ export type BlockquoteProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
 } & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-blockquote--docs Blockquote docs at Amsterdam Design System}
+ */
 export declare const Blockquote: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";

package/dist/Blockquote/Blockquote.js

@@ -5,5 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-blockquote--docs Blockquote docs at Amsterdam Design System}
+ */
 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

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

package/dist/Blockquote/Blockquote.test.js

@@ -1,4 +1,8 @@
 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';
@@ -23,15 +27,14 @@ describe('Blockquote', () => {
         const quote = container.querySelector(':only-child');
         expect(quote).toHaveClass('ams-blockquote');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Blockquote, { className: "extra" }));
         const quote = container.querySelector(':only-child');
-        expect(quote).toHaveClass('extra');
-        expect(quote).toHaveClass('ams-blockquote');
+        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('blockquote:only-child');
+        const quote = container.querySelector(':only-child');
         expect(quote).toHaveClass('ams-blockquote--inverse');
     });
     it('supports ForwardRef in React', () => {

package/dist/Blockquote/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Blockquote } from './Blockquote';
 export type { BlockquoteProps } from './Blockquote';

package/dist/Blockquote/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Blockquote } from './Blockquote';

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -4,6 +4,9 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-breadcrumb--docs Breadcrumb docs at Amsterdam Design System}
+ */
 export declare const Breadcrumb: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {

package/dist/Breadcrumb/Breadcrumb.js

@@ -8,4 +8,7 @@ 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';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-breadcrumb--docs Breadcrumb docs at Amsterdam Design System}
+ */
 export const Breadcrumb = Object.assign(BreadcrumbRoot, { Link: BreadcrumbLink });

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

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

package/dist/Breadcrumb/Breadcrumb.test.js

@@ -1,4 +1,8 @@
 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';
@@ -15,7 +19,7 @@ describe('Breadcrumb', () => {
         const component = screen.getByRole('navigation');
         expect(component).toHaveClass('ams-breadcrumb');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Breadcrumb, { className: "extra" }));
         const component = screen.getByRole('navigation');
         expect(component).toHaveClass('ams-breadcrumb extra');

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

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

package/dist/Breadcrumb/BreadcrumbLink.test.js

@@ -1,4 +1,8 @@
 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';
@@ -17,7 +21,7 @@ describe('Breadcrumb link', () => {
         const link = screen.getByRole('link');
         expect(link).toHaveClass('ams-breadcrumb__link');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(BreadcrumbLink, { className: "extra", href: "/" }));
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-breadcrumb__link extra');

package/dist/Breadcrumb/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Breadcrumb } from './Breadcrumb';
 export type { BreadcrumbProps } from './Breadcrumb';
 export type { BreadcrumbLinkProps } from './BreadcrumbLink';

package/dist/Breadcrumb/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Breadcrumb } from './Breadcrumb';

package/dist/Breakout/Breakout.d.ts

@@ -10,6 +10,9 @@ export type BreakoutRowNumbers = {
     wide: BreakoutRowNumber;
 };
 export type BreakoutProps = GridProps;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-breakout--docs Breakout docs at Amsterdam Design System}
+ */
 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

@@ -9,4 +9,7 @@ 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';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-breakout--docs Breakout docs at Amsterdam Design System}
+ */
 export const Breakout = Object.assign(BreakoutRoot, { Cell: BreakoutCell });

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

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