@amsterdam/design-system-react 0.14.1 → 0.16.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

@@ -0,0 +1,35 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { HeadingProps } from '../Heading/Heading';
+export type AccordionProps = {
+    /**
+     * The hierarchical level of this Accordion’s Section Headings within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
+    headingLevel: HeadingProps['level'];
+    /** The HTML element to use for each Accordion Section. */
+    sectionAs?: 'div' | 'section';
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const Accordion: import("react").ForwardRefExoticComponent<{
+    /**
+     * The hierarchical level of this Accordion’s Section Headings within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
+    headingLevel: HeadingProps["level"];
+    /** The HTML element to use for each Accordion Section. */
+    sectionAs?: "div" | "section";
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Section: import("react").ForwardRefExoticComponent<{
+        expanded?: boolean;
+        label: string;
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/Accordion/Accordion.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import AccordionContext from './AccordionContext';
+import { AccordionSection } from './AccordionSection';
+import { useKeyboardFocus } from '../common/useKeyboardFocus';
+const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs = 'section' }, ref) => {
+    const innerRef = useRef(null);
+    // use a passed ref if it's there, otherwise use innerRef
+    useImperativeHandle(ref, () => innerRef.current);
+    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';
+export const Accordion = Object.assign(AccordionRoot, { Section: AccordionSection });

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

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

package/dist/Accordion/Accordion.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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: 1 }));
+        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: 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 }));
+        const accordion = container.querySelector('.ams-accordion');
+        expect(ref.current).toBe(accordion);
+    });
+});

package/dist/Accordion/AccordionContext.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AccordionProps } from './Accordion';
+import type { HeadingProps } from '../Heading/Heading';
+export type AccordionContextValue = {
+    headingLevel: HeadingProps['level'] | null;
+    sectionAs?: AccordionProps['sectionAs'];
+};
+declare const AccordionContext: import("react").Context<AccordionContextValue>;
+export default AccordionContext;

package/dist/Accordion/AccordionContext.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { createContext } from 'react';
+const defaultValues = {
+    headingLevel: null,
+    sectionAs: 'section',
+};
+const AccordionContext = createContext(defaultValues);
+export default AccordionContext;

package/dist/Accordion/AccordionSection.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type AccordionSectionProps = {
+    /** Whether the content is displayed initially. */
+    expanded?: boolean;
+    /** The heading text. */
+    label: string;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const AccordionSection: import("react").ForwardRefExoticComponent<{
+    /** Whether the content is displayed initially. */
+    expanded?: boolean;
+    /** The heading text. */
+    label: string;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Accordion/AccordionSection.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { ChevronDownIcon } from '@amsterdam/design-system-react-icons';
+import clsx from 'clsx';
+import { forwardRef, useContext, useId, useState } from 'react';
+import AccordionContext from './AccordionContext';
+import { getHeadingTag } from '../Heading/getHeadingTag';
+import { Icon } from '../Icon/Icon';
+export const AccordionSection = forwardRef(({ children, className, expanded = false, label, ...restProps }, ref) => {
+    const { headingLevel, sectionAs } = useContext(AccordionContext);
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const HeadingTag = getHeadingTag(headingLevel);
+    const SectionTag = sectionAs || 'section';
+    const id = useId();
+    const buttonId = `button-${id}`;
+    const panelId = `panel-${id}`;
+    return (_jsxs("div", { className: clsx('ams-accordion__section', className), ref: ref, ...restProps, children: [_jsx(HeadingTag, { className: "ams-accordion__header", children: _jsxs("button", { "aria-controls": panelId, "aria-expanded": isExpanded, className: "ams-accordion__button", id: buttonId, onClick: () => setIsExpanded(!isExpanded), type: "button", children: [_jsx(Icon, { className: "ams-accordion__icon", size: "heading-4", svg: ChevronDownIcon }), label] }) }), _jsx(SectionTag, { "aria-labelledby": buttonId, className: clsx('ams-accordion__panel', { 'ams-accordion__panel--expanded': isExpanded }), id: panelId, children: children })] }));
+});
+AccordionSection.displayName = 'Accordion.Section';

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

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

package/dist/Accordion/AccordionSection.test.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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-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 defaultt', () => {
+        render(_jsx(Accordion, { headingLevel: 1, 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: 1, 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 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/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
+export type { AccordionSectionProps } from './AccordionSection';

package/dist/Accordion/index.js

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

package/dist/ActionGroup/ActionGroup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const ActionGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ActionGroup/ActionGroup.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 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

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

package/dist/ActionGroup/ActionGroup.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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/ActionGroup/index.d.ts

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

package/dist/ActionGroup/index.js

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

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { HeadingProps } from '../Heading';
+type Severity = 'error' | 'success' | 'warning';
+export type AlertProps = {
+    /** Whether the user can dismiss the Alert. Adds a button to its top right. */
+    closeable?: boolean;
+    /** The label for the button that dismisses the Alert. */
+    closeButtonLabel?: string;
+    /** The text for the Heading. */
+    heading: string;
+    /**
+     * The hierarchical level of the Alert’s Heading within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
+    headingLevel: HeadingProps['level'];
+    /** A function to run when dismissing. */
+    onClose?: () => void;
+    /** The significance of the message conveyed. */
+    severity?: Severity;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const Alert: import("react").ForwardRefExoticComponent<{
+    /** Whether the user can dismiss the Alert. Adds a button to its top right. */
+    closeable?: boolean;
+    /** The label for the button that dismisses the Alert. */
+    closeButtonLabel?: string;
+    /** The text for the Heading. */
+    heading: string;
+    /**
+     * The hierarchical level of the Alert’s Heading within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
+    headingLevel: HeadingProps["level"];
+    /** A function to run when dismissing. */
+    onClose?: () => void;
+    /** The significance of the message conveyed. */
+    severity?: Severity;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/Alert/Alert.js

@@ -0,0 +1,22 @@
+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 clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Heading } from '../Heading';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Row } from '../Row';
+const iconSvgBySeverity = {
+    error: AlertIcon,
+    success: CheckmarkIcon,
+    warning: AlertIcon,
+};
+export const Alert = forwardRef(({ children, className, closeable, closeButtonLabel = 'Sluiten', heading, headingLevel, onClose, severity, ...restProps }, ref) => {
+    const SeverityIcon = severity ? iconSvgBySeverity[severity] : InfoIcon;
+    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

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

package/dist/Alert/Alert.test.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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', () => {
+        const { container } = render(_jsx(Alert, { heading: "Let op!", headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        const icon = component?.querySelector('.ams-alert__severity-indicator > .ams-icon');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(icon).toBeInTheDocument();
+        expect(icon).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Alert, { heading: "Let op!", headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-alert');
+    });
+    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');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Alert, { heading: "Let op!", headingLevel: 2, ref: ref }));
+        const component = container.querySelector(':only-child');
+        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', () => {
+        const { container } = render(_jsx(Alert, { closeable: true, heading: "Let op!", headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        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();
+        const { container } = render(_jsx(Alert, { closeable: true, heading: "Let op!", headingLevel: 2, onClose: onClose }));
+        const component = container.querySelector(':only-child');
+        const closeButton = component?.querySelector('.ams-icon-button');
+        fireEvent.click(closeButton);
+        expect(onClose).toHaveBeenCalled();
+    });
+});

package/dist/Alert/index.d.ts

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

package/dist/Alert/index.js

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

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+export declare const avatarColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
+type AvatarColor = (typeof avatarColors)[number];
+export type AvatarProps = {
+    /** The background colour. */
+    color?: AvatarColor;
+    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    imageSrc?: string;
+    /** The text content. Should be the user’s initials. The first two characters will be displayed. */
+    label: string;
+} & HTMLAttributes<HTMLSpanElement>;
+export declare const Avatar: import("react").ForwardRefExoticComponent<{
+    /** The background colour. */
+    color?: AvatarColor;
+    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    imageSrc?: string;
+    /** The text content. Should be the user’s initials. The first two characters will be displayed. */
+    label: string;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/Avatar/Avatar.js

@@ -0,0 +1,25 @@
+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 clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const avatarColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'];
+const AvatarContent = ({ imageSrc, initials }) => {
+    if (imageSrc) {
+        return _jsx("img", { alt: "", src: imageSrc });
+    }
+    if (initials.length) {
+        return _jsx("span", { "aria-hidden": true, children: initials });
+    }
+    return _jsx(Icon, { size: "small", svg: PersonalLoginIcon });
+};
+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}`;
+    return (_jsxs("span", { ...restProps, className: clsx('ams-avatar', color && `ams-avatar--${color}`, imageSrc && 'ams-avatar--has-image', className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", children: a11yLabel }), _jsx(AvatarContent, { imageSrc: imageSrc, initials: initials })] }));
+});
+Avatar.displayName = 'Avatar';

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

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

package/dist/Avatar/Avatar.test.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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).toBeVisible();
+    });
+    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/Avatar/index.d.ts

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

package/dist/Avatar/index.js

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

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+export declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
+type BadgeColor = (typeof badgeColors)[number];
+export type BadgeProps = {
+    /** The background colour. */
+    color?: BadgeColor;
+    /** The text content. */
+    label: string | number;
+} & HTMLAttributes<HTMLElement>;
+export declare const Badge: import("react").ForwardRefExoticComponent<{
+    /** The background colour. */
+    color?: BadgeColor;
+    /** The text content. */
+    label: string | number;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/Badge/Badge.js

@@ -0,0 +1,10 @@
+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 badgeColors = ['azure', 'lime', 'magenta', 'orange', 'purple', 'red', 'yellow'];
+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

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