@amsterdam/design-system-react 0.14.0 → 0.15.0

package/dist/OrderedList/OrderedList.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { OlHTMLAttributes, PropsWithChildren } from 'react';
+export type OrderedListProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+    /** Whether the list items show a marker. */
+    markers?: boolean;
+    /** The size of the text. */
+    size?: 'small';
+} & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
+export declare const OrderedList: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+    /** Whether the list items show a marker. */
+    markers?: boolean;
+    /** The size of the text. */
+    size?: "small";
+} & OlHTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLLIElement>>;
+};

package/dist/OrderedList/OrderedList.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 { OrderedListItem } from './OrderedListItem';
+const OrderedListRoot = forwardRef(({ children, className, color, markers = true, size, ...restProps }, ref) => (_jsx("ol", { className: clsx('ams-ordered-list', color && `ams-ordered-list--${color}`, !markers && 'ams-ordered-list--no-markers', size && `ams-ordered-list--${size}`, className), ref: ref, ...restProps, children: children })));
+OrderedListRoot.displayName = 'OrderedList';
+export const OrderedList = Object.assign(OrderedListRoot, { Item: OrderedListItem });

package/dist/OrderedList/OrderedList.test.d.ts

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

package/dist/OrderedList/OrderedList.test.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { OrderedList } from './OrderedList';
+import '@testing-library/jest-dom';
+describe('Ordered list', () => {
+    it('renders an HTML ol element', () => {
+        const { container } = render(_jsx(OrderedList, {}));
+        const list = container.querySelector('ol:only-child');
+        expect(list).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(OrderedList, {}));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list');
+    });
+    it('renders a no markers class', () => {
+        render(_jsx(OrderedList, { markers: false }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list--no-markers');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(OrderedList, { color: "inverse" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list--inverse');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(OrderedList, { className: "extra" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list extra');
+    });
+    it('renders its subcomponent', () => {
+        const listItems = ['Item 1', 'Item 2', 'Item 3'];
+        const { container } = render(_jsx(OrderedList, { children: listItems.map((item, index) => (_jsx(OrderedList.Item, { children: item }, index))) }));
+        const list = screen.getByRole('list');
+        const items = container.querySelectorAll('.ams-ordered-list__item');
+        expect(list).toBeInTheDocument();
+        expect(items.length).toBe(3);
+    });
+    it('renders the small size class', () => {
+        render(_jsx(OrderedList, { size: "small" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list--small');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(OrderedList, { ref: ref }));
+        const component = screen.getByRole('list');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/OrderedList/OrderedListItem.d.ts

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

package/dist/OrderedList/OrderedListItem.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 OrderedListItem = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-ordered-list__item', className), ref: ref, ...restProps, children: children })));
+OrderedListItem.displayName = 'OrderedList.Item';

package/dist/OrderedList/OrderedListItem.test.d.ts

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

package/dist/OrderedList/OrderedListItem.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { OrderedListItem } from './OrderedListItem';
+import '@testing-library/jest-dom';
+describe('Ordered list item', () => {
+    it('renders', () => {
+        render(_jsx(OrderedListItem, {}));
+        const component = screen.getByRole('listitem');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(OrderedListItem, {}));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-ordered-list__item');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(OrderedListItem, { className: "extra" }));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-ordered-list__item extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(OrderedListItem, { ref: ref }));
+        const component = screen.getByRole('listitem');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/OrderedList/index.d.ts

@@ -0,0 +1,3 @@
+export { OrderedList } from './OrderedList';
+export type { OrderedListProps } from './OrderedList';
+export type { OrderedListItemProps } from './OrderedListItem';

package/dist/OrderedList/index.js

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

package/dist/Overlap/Overlap.d.ts

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

package/dist/Overlap/Overlap.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 Overlap = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-overlap', className), ref: ref, children: children })));
+Overlap.displayName = 'Overlap';

package/dist/Overlap/Overlap.test.d.ts

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

package/dist/Overlap/Overlap.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Overlap } from './Overlap';
+import '@testing-library/jest-dom';
+describe('Overlap', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Overlap, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Overlap, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-overlap');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Overlap, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-overlap extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Overlap, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders children', () => {
+        render(_jsx(Overlap, { children: _jsx("p", { children: "Test Child" }) }));
+        const testChild = screen.getByText('Test Child');
+        expect(testChild).toBeTruthy();
+    });
+});

package/dist/Overlap/index.d.ts

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

package/dist/Overlap/index.js

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

package/dist/PageHeading/PageHeading.d.ts

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

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

package/dist/PageHeading/PageHeading.test.d.ts

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

package/dist/PageHeading/PageHeading.test.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { PageHeading } from './PageHeading';
+import '@testing-library/jest-dom';
+describe('Page heading', () => {
+    it('renders a heading role element', () => {
+        render(_jsx(PageHeading, { children: "Breaking news" }));
+        const pageHeading = screen.getByRole('heading', {
+            name: 'Breaking news',
+        });
+        expect(pageHeading).toBeInTheDocument();
+        expect(pageHeading).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(PageHeading, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-heading');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(PageHeading, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('extra');
+        expect(component).toHaveClass('ams-page-heading');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(PageHeading, { color: "inverse", children: "Titel" }));
+        const pageHeading = screen.getByRole('heading', { name: 'Titel' });
+        expect(pageHeading).toHaveClass('ams-page-heading--inverse');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(PageHeading, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/PageHeading/index.d.ts

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

package/dist/PageHeading/index.js

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

package/dist/PageMenu/PageMenu.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type PageMenuProps = {
+    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
+    alignEnd?: boolean;
+    /** Whether menu items should wrap if they don’t fit on a single row. */
+    wrap?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const PageMenu: import("react").ForwardRefExoticComponent<{
+    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
+    alignEnd?: boolean;
+    /** Whether menu items should wrap if they don’t fit on a single row. */
+    wrap?: boolean;
+} & HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLUListElement>> & {
+    Link: import("react").ForwardRefExoticComponent<{
+        icon?: Function;
+    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/PageMenu/PageMenu.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 { PageMenuLink } from './PageMenuLink';
+/** @deprecated Use the menuItems prop of Header or the Footer.Menu subcomponent instead. */
+const PageMenuRoot = forwardRef(({ alignEnd, children, className, wrap = true, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-page-menu', alignEnd && `ams-page-menu--align-end`, !wrap && `ams-page-menu--no-wrap`, className), ref: ref, children: children })));
+PageMenuRoot.displayName = 'PageMenu';
+export const PageMenu = Object.assign(PageMenuRoot, { Link: PageMenuLink });

package/dist/PageMenu/PageMenu.test.d.ts

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

package/dist/PageMenu/PageMenu.test.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoginIcon } from '@amsterdam/design-system-react-icons';
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { PageMenu } from './PageMenu';
+import '@testing-library/jest-dom';
+describe('Page menu', () => {
+    it('renders a page menu with children', () => {
+        const { container } = render(_jsxs(PageMenu, { children: [_jsx(PageMenu.Link, { href: "#", lang: "en", children: "English" }), _jsx(PageMenu.Link, { href: "#", icon: LoginIcon, children: "Mijn Amsterdam" })] }));
+        const component = container.querySelector(':only-child');
+        const children = container.querySelectorAll('li');
+        const icons = container.querySelectorAll('svg');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(children.length).toBe(2);
+        expect(icons.length).toBe(1);
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(PageMenu, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-menu');
+    });
+    it('renders a class name for end alignment', () => {
+        const { container } = render(_jsx(PageMenu, { alignEnd: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-menu--align-end');
+    });
+    it('renders a class name to prevent wrapping', () => {
+        const { container } = render(_jsx(PageMenu, { wrap: false }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-menu--no-wrap');
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(PageMenu, { ref: ref, children: _jsx(PageMenu.Link, { href: "#", lang: "en", children: "English" }) }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(PageMenu, { className: "intro" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('intro');
+        expect(component).toHaveClass('ams-page-menu');
+    });
+});

package/dist/PageMenu/PageMenuLink.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+export type PageMenuLinkProps = {
+    icon?: Function;
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export declare const PageMenuLink: import("react").ForwardRefExoticComponent<{
+    icon?: Function;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageMenu/PageMenuLink.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 PageMenuLink = forwardRef(({ children, className, icon, ...restProps }, ref) => (_jsx("li", { children: _jsxs("a", { ...restProps, className: clsx('ams-page-menu__link', className), ref: ref, children: [children, icon && _jsx(Icon, { size: "small", svg: icon })] }) })));
+PageMenuLink.displayName = 'PageMenu.Link';

package/dist/PageMenu/PageMenuLink.test.d.ts

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

package/dist/PageMenu/PageMenuLink.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronRightIcon } from '@amsterdam/design-system-react-icons';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { PageMenuLink } from './PageMenuLink';
+import '@testing-library/jest-dom';
+describe('Page menu link', () => {
+    it('renders with href attribute', () => {
+        render(_jsx(PageMenuLink, { href: "#", children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('href', '#');
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(PageMenuLink, { href: "#", children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-page-menu__link');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(PageMenuLink, { className: "extra", href: "#", children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-page-menu__link extra');
+    });
+    it('does not render an icon by default', () => {
+        const { container } = render(_jsx(PageMenuLink, { href: "#", children: "Link" }));
+        const svg = container.querySelector('.ams-icon');
+        expect(svg).not.toBeInTheDocument();
+    });
+    it('renders an icon when specified', () => {
+        const { container } = render(_jsx(PageMenuLink, { href: "#", icon: ChevronRightIcon, children: "Link" }));
+        const svg = container.querySelector('.ams-icon');
+        expect(svg).toBeInTheDocument();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(PageMenuLink, { className: "extra", href: "#", ref: ref, children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/PageMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { PageMenu } from './PageMenu';
+export type { PageMenuProps } from './PageMenu';
+export type { PageMenuLinkProps } from './PageMenuLink';

package/dist/PageMenu/index.js

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

package/dist/Pagination/LinkItem.d.ts

@@ -0,0 +1,7 @@
+import { PaginationProps } from './Pagination';
+type LinkItemProps = Pick<PaginationProps, 'linkComponent' | 'linkTemplate'> & {
+    currentPage: PaginationProps['page'];
+    pageNumber: number;
+};
+export declare const LinkItem: ({ currentPage, linkComponent, linkTemplate, pageNumber }: LinkItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Pagination/LinkItem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LinkItem = ({ currentPage, linkComponent, linkTemplate, pageNumber }) => {
+    if (!linkComponent)
+        return null;
+    const Link = linkComponent;
+    return (_jsx("li", { children: _jsxs(Link, { "aria-current": pageNumber === currentPage ? 'page' : undefined, className: "ams-pagination__link", href: linkTemplate(pageNumber), children: [_jsx("span", { className: "ams-visually-hidden", children: pageNumber === currentPage ? `Pagina ${pageNumber}` : `Ga naar pagina ${pageNumber}` }), _jsx("span", { "aria-hidden": true, children: pageNumber })] }) }));
+};

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes } from 'react';
+export type PaginationProps = {
+    /** The React component to use for the links. */
+    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    /** The template used to construct the link hrefs. */
+    linkTemplate: (page: number) => string;
+    /** The maximum amount of pages shown. Minimum value: 5. */
+    maxVisiblePages?: number;
+    /** The visible label for the link to the next page. */
+    nextLabel?: string;
+    /** The accessible name for the link to the next page. */
+    nextVisuallyHiddenLabel?: string;
+    /** The current page number. */
+    page?: number;
+    /** The visible label for the link to the previous page. */
+    previousLabel?: string;
+    /** The accessible name for the link to the previous page. */
+    previousVisuallyHiddenLabel?: string;
+    /** The total amount of pages. */
+    totalPages: number;
+    /** The accessible name for the Pagination component. */
+    visuallyHiddenLabel?: string;
+    /**
+     * Connects the component with an internal element that defines its accessible name.
+     * Note: must be unique for the page.
+     */
+    visuallyHiddenLabelId?: string;
+} & HTMLAttributes<HTMLElement>;
+export declare const Pagination: import("react").ForwardRefExoticComponent<{
+    /** The React component to use for the links. */
+    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    /** The template used to construct the link hrefs. */
+    linkTemplate: (page: number) => string;
+    /** The maximum amount of pages shown. Minimum value: 5. */
+    maxVisiblePages?: number;
+    /** The visible label for the link to the next page. */
+    nextLabel?: string;
+    /** The accessible name for the link to the next page. */
+    nextVisuallyHiddenLabel?: string;
+    /** The current page number. */
+    page?: number;
+    /** The visible label for the link to the previous page. */
+    previousLabel?: string;
+    /** The accessible name for the link to the previous page. */
+    previousVisuallyHiddenLabel?: string;
+    /** The total amount of pages. */
+    totalPages: number;
+    /** The accessible name for the Pagination component. */
+    visuallyHiddenLabel?: string;
+    /**
+     * Connects the component with an internal element that defines its accessible name.
+     * Note: must be unique for the page.
+     */
+    visuallyHiddenLabelId?: string;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/Pagination/Pagination.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { ChevronLeftIcon, ChevronRightIcon } from '@amsterdam/design-system-react-icons';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { LinkItem } from './LinkItem';
+import { Spacer } from './Spacer';
+import { getRange } from './getRange';
+import { Icon } from '../Icon/Icon';
+export const Pagination = forwardRef(({ className, linkComponent = (props) => _jsx("a", { ...props }), linkTemplate, maxVisiblePages = 7, nextLabel = 'volgende', nextVisuallyHiddenLabel = 'Volgende pagina', page = 1, previousLabel = 'vorige', previousVisuallyHiddenLabel = 'Vorige pagina', totalPages, visuallyHiddenLabel = 'Paginering', visuallyHiddenLabelId = 'ams-pagination-a11y-label', ...restProps }, ref) => {
+    // Don't show pagination if you only have one page
+    if (totalPages <= 1) {
+        return null;
+    }
+    const Link = linkComponent;
+    // Get array of page numbers and / or spacers
+    const range = getRange(page, totalPages, maxVisiblePages);
+    return (_jsxs("nav", { ...restProps, "aria-labelledby": visuallyHiddenLabelId, className: clsx('ams-pagination', className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", id: visuallyHiddenLabelId, children: visuallyHiddenLabel }), page !== 1 && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page - 1), rel: "prev", children: [_jsx(Icon, { svg: ChevronLeftIcon }), _jsx("span", { className: "ams-visually-hidden", children: previousVisuallyHiddenLabel }), _jsx("span", { "aria-hidden": true, children: previousLabel })] })), _jsx("ol", { className: "ams-pagination__list", children: range.map((pageNumberOrSpacer) => typeof pageNumberOrSpacer === 'number' ? (_jsx(LinkItem, { currentPage: page, linkComponent: linkComponent, linkTemplate: linkTemplate, pageNumber: pageNumberOrSpacer }, pageNumberOrSpacer)) : (_jsx(Spacer, {}, pageNumberOrSpacer))) }), page !== totalPages && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page + 1), rel: "next", children: [_jsx("span", { className: "ams-visually-hidden", children: nextVisuallyHiddenLabel }), _jsx("span", { "aria-hidden": true, children: nextLabel }), _jsx(Icon, { svg: ChevronRightIcon })] }))] }));
+});
+Pagination.displayName = 'Pagination';

package/dist/Pagination/Pagination.test.d.ts

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