@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/PageHeader/PageHeader.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { LogoBrand } from '../Logo';
+export type PageHeaderProps = {
+    /** The name of the application. */
+    brandName?: string;
+    /** The name of the brand for which to display the logo. */
+    logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
+    logoLink?: string;
+    /** The accessible text for the link on the logo. */
+    logoLinkTitle?: string;
+    /** The text for the menu button. */
+    menuButtonText?: string;
+    /** A slot for the menu items. Use PageHeader.MenuLink here. */
+    menuItems?: ReactNode;
+    /** The accessible label for the navigation section. */
+    navigationLabel?: string;
+    /** Whether the menu button is visible on wide screens.  */
+    noMenuButtonOnWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement>;
+export declare const PageHeader: import("react").ForwardRefExoticComponent<{
+    /** The name of the application. */
+    brandName?: string;
+    /** The name of the brand for which to display the logo. */
+    logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
+    logoLink?: string;
+    /** The accessible text for the link on the logo. */
+    logoLinkTitle?: string;
+    /** The text for the menu button. */
+    menuButtonText?: string;
+    /** A slot for the menu items. Use PageHeader.MenuLink here. */
+    menuItems?: ReactNode;
+    /** The accessible label for the navigation section. */
+    navigationLabel?: string;
+    /** Whether the menu button is visible on wide screens.  */
+    noMenuButtonOnWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
+    GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
+    MenuLink: import("react").ForwardRefExoticComponent<{
+        fixed?: boolean;
+    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/PageHeader/PageHeader.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import { Icon } from '../Icon';
+import { Logo } from '../Logo';
+import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
+import { PageHeaderMenuIcon } from './PageHeaderMenuIcon';
+import { PageHeaderMenuLink } from './PageHeaderMenuLink';
+import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
+const LogoLinkContent = ({ brandName, logoBrand }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'), children: _jsx(Logo, { brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandName }))] }));
+const PageHeaderRoot = forwardRef(({ brandName, children, className, logoBrand = 'amsterdam', logoLink = '/', logoLinkTitle = 'Ga naar de homepage', menuButtonText = 'Menu', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
+    const [open, setOpen] = useState(false);
+    const hasMegaMenu = Boolean(children);
+    const isWideWindow = hasMegaMenu && useIsAfterBreakpoint('wide');
+    useEffect(() => {
+        // Close the menu when the menu button disappears
+        if (noMenuButtonOnWideWindow && isWideWindow) {
+            setOpen(false);
+        }
+    }, [isWideWindow]);
+    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs("a", { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle }), _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: _jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') }) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
+});
+PageHeaderRoot.displayName = 'PageHeader';
+export const PageHeader = Object.assign(PageHeaderRoot, {
+    GridCellNarrowWindowOnly: PageHeaderGridCellNarrowWindowOnly,
+    MenuLink: PageHeaderMenuLink,
+});

package/dist/PageHeader/PageHeader.test.d.ts

@@ -0,0 +1,2 @@
+import './matchMedia.mock';
+import '@testing-library/jest-dom';

package/dist/PageHeader/PageHeader.test.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import './matchMedia.mock'; // Must be imported before PageHeader
+import { PageHeader } from './PageHeader';
+import '@testing-library/jest-dom';
+describe('Page Header', () => {
+    it('renders', () => {
+        render(_jsx(PageHeader, {}));
+        const component = screen.getByRole('banner');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(PageHeader, {}));
+        const component = screen.getByRole('banner');
+        expect(component).toHaveClass('ams-page-header');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(PageHeader, { className: "extra" }));
+        const component = screen.getByRole('banner');
+        expect(component).toHaveClass('ams-page-header extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(PageHeader, { ref: ref }));
+        const component = screen.getByRole('banner');
+        expect(ref.current).toBe(component);
+    });
+    it('renders a logo link', () => {
+        render(_jsx(PageHeader, {}));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-page-header__logo-link');
+    });
+    it('renders a different brand logo', () => {
+        const { container } = render(_jsx(PageHeader, { logoBrand: "ggd-amsterdam" }));
+        const component = container.querySelector('.ams-logo__text-secondary');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a custom logo link', () => {
+        render(_jsx(PageHeader, { logoLink: "/home" }));
+        const logoLink = screen.getByRole('link');
+        expect(logoLink).toHaveAttribute('href', '/home');
+    });
+    it('renders a custom logo link title', () => {
+        render(_jsx(PageHeader, { logoLinkTitle: "Go to homepage" }));
+        const logoLinkTitle = screen.getByRole('link', { name: 'Go to homepage' });
+        expect(logoLinkTitle).toBeInTheDocument();
+    });
+    it('renders an application name', () => {
+        render(_jsx(PageHeader, { brandName: "Application name" }));
+        const brandName = screen.getByText('Application name');
+        expect(brandName).toBeInTheDocument();
+    });
+    it('renders the correct class for the responsive logo', () => {
+        const { container } = render(_jsx(PageHeader, { brandName: "Application name" }));
+        const logoContainer = container.querySelector('.ams-page-header__logo-container');
+        expect(logoContainer).toBeInTheDocument();
+    });
+    it('renders a nav section', () => {
+        render(_jsx(PageHeader, { children: "Test" }));
+        const component = screen.getByRole('navigation');
+        expect(component).toHaveClass('ams-page-header__navigation');
+    });
+    it('renders a nav section with a custom label', () => {
+        render(_jsx(PageHeader, { navigationLabel: "Custom Navigation", children: "Test" }));
+        const component = screen.getByRole('navigation', { name: 'Custom Navigation' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a menu', () => {
+        render(_jsx(PageHeader, { menuItems: _jsx(PageHeader.MenuLink, { children: "Menu Item" }) }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-page-header__menu');
+    });
+    it('renders menu items', () => {
+        render(_jsx(PageHeader, { menuItems: [
+                _jsx(PageHeader.MenuLink, { href: "/", children: "Menu Item 1" }, 1),
+                _jsx(PageHeader.MenuLink, { href: "/", children: "Menu Item 2" }, 2),
+            ] }));
+        const item1 = screen.getByRole('link', { name: 'Menu Item 1' });
+        const item2 = screen.getByRole('link', { name: 'Menu Item 2' });
+        expect(item1).toBeInTheDocument();
+        expect(item2).toBeInTheDocument();
+    });
+    it('renders a menu button', () => {
+        render(_jsx(PageHeader, { children: "Test" }));
+        const component = screen.getByRole('button', { name: 'Menu' });
+        expect(component).toHaveClass('ams-page-header__mega-menu-button');
+    });
+    it('renders a menu button icon', () => {
+        const { container } = render(_jsx(PageHeader, { children: "Test" }));
+        const component = container.querySelector('.ams-page-header__menu-icon');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a custom menu button text', () => {
+        render(_jsx(PageHeader, { menuButtonText: "Custom button text", children: "Test" }));
+        const component = screen.getByRole('button', { name: 'Custom button text' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the correct class when noMenuButtonOnWideWindow is true', () => {
+        render(_jsx(PageHeader, { noMenuButtonOnWideWindow: true, children: "Test" }));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-page-header__mega-menu-button-item--hide-on-wide-window');
+    });
+    it('opens and closes the mega menu', async () => {
+        const user = userEvent.setup();
+        const { container } = render(_jsx(PageHeader, { children: "Test" }));
+        const closedMegaMenu = container.querySelector('.ams-page-header__mega-menu--closed');
+        expect(closedMegaMenu).toBeInTheDocument();
+        const menuButton = screen.getByRole('button', { name: 'Menu' });
+        await user.click(menuButton);
+        const openMegaMenu = container.querySelector('.ams-page-header__mega-menu');
+        expect(openMegaMenu).toBeInTheDocument();
+        expect(openMegaMenu).not.toHaveClass('ams-page-header__mega-menu--closed');
+    });
+    it.skip('it closes the mega menu when it is open and the screen width passes the breakpoint', () => {
+        // TODO: Add this test
+    });
+});

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.d.ts

@@ -0,0 +1,2 @@
+import { GridCellProps } from '../Grid';
+export declare const PageHeaderGridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<HTMLElement>>;

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Grid } from '../Grid';
+export const PageHeaderGridCellNarrowWindowOnly = forwardRef(({ children, className, ...restProps }, ref) => (_jsx(Grid.Cell, { ...restProps, className: clsx('ams-page-header__grid-cell-narrow-window-only', className), ref: ref, children: children })));
+PageHeaderGridCellNarrowWindowOnly.displayName = 'PageHeader.GridCellNarrowWindowOnly';

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.test.d.ts

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

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
+import '@testing-library/jest-dom';
+describe('Page Header Grid Cell Narrow Window Only', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a Grid.Cell', () => {
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell');
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-header__grid-cell-narrow-window-only');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-header__grid-cell-narrow-window-only extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/PageHeader/PageHeaderMenuIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const PageHeaderMenuIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/PageHeader/PageHeaderMenuIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PageHeaderMenuIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("line", { className: "ams-page-header__menu-icon-top", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-page-header__menu-icon-middle", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-page-header__menu-icon-bottom", x1: "0", x2: "100%", y1: "50%", y2: "50%" })] }));

package/dist/PageHeader/PageHeaderMenuLink.d.ts

@@ -0,0 +1,9 @@
+import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+export type PageHeaderMenuLinkProps = {
+    fixed?: boolean;
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<{
+    fixed?: boolean;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageHeader/PageHeaderMenuLink.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsx("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: children }) })));
+PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';

package/dist/PageHeader/PageHeaderMenuLink.test.d.ts

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

package/dist/PageHeader/PageHeaderMenuLink.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { PageHeaderMenuLink } from './PageHeaderMenuLink';
+import '@testing-library/jest-dom';
+describe('Page Header Menu Link', () => {
+    it('renders', () => {
+        render(_jsx(PageHeaderMenuLink, { href: "/" }));
+        const component = screen.getByRole('listitem');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(PageHeaderMenuLink, { href: "/" }));
+        const item = screen.getByRole('listitem');
+        expect(item).toHaveClass('ams-page-header__menu-item');
+        const link = screen.getByRole('link');
+        expect(link).toHaveClass('ams-page-header__menu-link');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(PageHeaderMenuLink, { className: "extra", href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-page-header__menu-link extra');
+    });
+    it('renders the href attribute', () => {
+        render(_jsx(PageHeaderMenuLink, { href: "/" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveAttribute('href', '/');
+    });
+    it('renders the ‘fixed’ prop classname', () => {
+        render(_jsx(PageHeaderMenuLink, { fixed: true, href: "/" }));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-page-header__menu-item--fixed');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(PageHeaderMenuLink, { href: "/", ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/PageHeader/index.d.ts

@@ -0,0 +1,3 @@
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';
+export type { PageHeaderMenuLinkProps } from './PageHeaderMenuLink';

package/dist/PageHeader/index.js

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

package/dist/PageHeader/matchMedia.mock.js

@@ -0,0 +1,15 @@
+"use strict";
+// Sourced from https://jestjs.io/docs/29.4/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+    value: jest.fn().mockImplementation((query) => ({
+        addEventListener: jest.fn(),
+        addListener: jest.fn(), // deprecated
+        dispatchEvent: jest.fn(),
+        matches: false,
+        media: query,
+        onchange: null,
+        removeEventListener: jest.fn(),
+        removeListener: jest.fn(), // deprecated
+    })),
+    writable: true,
+});

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,36 @@
+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 extra class name', () => {
+        const { container } = render(_jsx(PageHeading, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-heading extra');
+    });
+    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/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';