@warp-ds/elements 2.2.0-next.9 → 2.3.0-next.1

package/dist/packages/pagination/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Første side\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Næste side\"],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sider\"],\"pagination.aria.prev-page\":[\"Forrige side\"]}");

package/dist/packages/pagination/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"First page\"],\"pagination.aria.icon-suffix\":[\"icon\"],\"pagination.aria.next-page\":[\"Next page\"],\"pagination.aria.page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Pages\"],\"pagination.aria.prev-page\":[\"Previous page\"]}");

package/dist/packages/pagination/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Ensimmäinen sivu\"],\"pagination.aria.icon-suffix\":[\"kuvake\"],\"pagination.aria.next-page\":[\"Seuraava sivu\"],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sivut\"],\"pagination.aria.prev-page\":[\"Edellinen sivu\"]}");

package/dist/packages/pagination/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Første side\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Neste side\"],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sider\"],\"pagination.aria.prev-page\":[\"Forrige side\"]}");

package/dist/packages/pagination/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pagination.aria.first-page\":[\"Första sidan\"],\"pagination.aria.icon-suffix\":[\"ikon\"],\"pagination.aria.next-page\":[\"Nästa sida\"],\"pagination.aria.page\":[\"Sida \",[\"currentPage\"]],\"pagination.aria.pagination\":[\"Sidor\"],\"pagination.aria.prev-page\":[\"Föregående sida\"]}");

package/dist/packages/pagination/pagination.react.stories.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Pagination } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpPagination>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+        onPageClick?: (e: Event) => void;
+        'onpage-click'?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import(".").WarpPagination>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpPagination, {
+        onPageClick: string;
+        'onpage-click': string;
+    }>;
+};
+export default _default;
+export type Story = StoryObj<typeof Pagination>;
+export declare const BasicPagination: Story;
+export declare const MiddlePageSelected: Story;
+export declare const LastPageSelected: Story;
+export declare const ManyPagesWithLimitedVisible: Story;
+export declare const SinglePage: Story;

package/dist/packages/pagination/pagination.react.stories.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Pagination } from './react';
+export default {
+    title: 'Navigation/Pagination',
+    render(args) {
+        return React.createElement(Pagination, { ...args });
+    },
+    component: Pagination,
+};
+export const BasicPagination = {
+    args: {
+        currentPageNumber: 1,
+        pages: 5,
+        baseUrl: '/search?page=',
+    },
+};
+export const MiddlePageSelected = {
+    args: {
+        currentPageNumber: 3,
+        pages: 7,
+        baseUrl: '/search?page=',
+    },
+};
+export const LastPageSelected = {
+    args: {
+        currentPageNumber: 10,
+        pages: 10,
+        baseUrl: '/search?page=',
+    },
+};
+export const ManyPagesWithLimitedVisible = {
+    args: {
+        currentPageNumber: 15,
+        pages: 50,
+        visiblePages: 5,
+        baseUrl: '/search?page=',
+    },
+};
+export const SinglePage = {
+    args: {
+        currentPageNumber: 1,
+        pages: 1,
+        baseUrl: '/search?page=',
+    },
+};

package/dist/packages/pagination/pagination.stories.js

@@ -0,0 +1,56 @@
+import { spread } from '@open-wc/lit-helpers';
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
+import { prespread } from '../../.storybook/utilities.js';
+import './index.js';
+const { events, args, argTypes } = getStorybookHelpers('w-pagination');
+const meta = {
+    title: 'Navigation/Pagination',
+    render(args) {
+        return html `<w-pagination ${spread(prespread(args))}></w-pagination>`;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const BasicPagination = {
+    args: {
+        'current-page-number': 1,
+        pages: 5,
+        'base-url': '/search?page=',
+    },
+};
+export const MiddlePageSelected = {
+    args: {
+        'current-page-number': 3,
+        pages: 7,
+        'base-url': '/search?page=',
+    },
+};
+export const LastPageSelected = {
+    args: {
+        'current-page-number': 10,
+        pages: 10,
+        'base-url': '/search?page=',
+    },
+};
+export const ManyPagesWithLimitedVisible = {
+    args: {
+        'current-page-number': 15,
+        pages: 50,
+        'visible-pages': 5,
+        'base-url': '/search?page=',
+    },
+};
+export const SinglePage = {
+    args: {
+        'current-page-number': 1,
+        pages: 1,
+        'base-url': '/search?page=',
+    },
+};

package/dist/packages/pagination/pagination.test.js

@@ -0,0 +1,76 @@
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.js';
+test('current page is the active page', async () => {
+    const component = html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.element(page.getByLabelText('Page 5')).toBeInTheDocument();
+    await expect.element(page.getByLabelText('Page 5')).toHaveAttribute('aria-current', 'page');
+});
+test('limits the number of displayed pages', async () => {
+    const component = html `<w-pagination current-page="10" pages="20" visible-pages="5" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByRole('link').and(page.getByLabelText('Page ')).all()).toHaveLength(5);
+});
+test('shows link to first page if current page is page 3 or beyond', async () => {
+    const component = html `<w-pagination current-page="10" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('First page')).toBeInTheDocument();
+});
+test('does not show link to first page if current page is page 1 or 2', async () => {
+    for (let i = 1; i <= 2; i++) {
+        const component = html `<w-pagination current-page="${i}" pages="20" base-url="/page/"></w-pagination>`;
+        const page = render(component);
+        await expect.poll(() => page.getByText('First page').query()).not.toBeInTheDocument();
+    }
+});
+test('shows link to previous page if current page is page 2 or beyond', async () => {
+    const component = html `<w-pagination current-page="10" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('Previous page')).toBeInTheDocument();
+});
+test('does not show link to previous page if current page is the first page', async () => {
+    const component = html `<w-pagination current-page="1" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('Previous page').query()).not.toBeInTheDocument();
+});
+test('shows link to next page', async () => {
+    const component = html `<w-pagination current-page="15" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('Next page').query()).toBeInTheDocument();
+});
+test('does not show link to next page if current page is the last page', async () => {
+    const component = html `<w-pagination current-page="20" pages="20" base-url="/page/"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('Next page').query()).not.toBeInTheDocument();
+});
+test('is able to get the correct data-page-number attribute from the element on click', async () => {
+    const component = html `<w-pagination current-page="15" pages="20" base-url="/page/" data-testid="pagination"></w-pagination>`;
+    const page = render(component);
+    await expect.poll(() => page.getByText('14').query()).toBeInTheDocument();
+    let clickedPage = null;
+    page
+        .getByTestId('pagination')
+        .element()
+        .addEventListener('click', (e) => {
+        e.preventDefault();
+    });
+    page
+        .getByTestId('pagination')
+        .element()
+        .addEventListener('page-click', (e) => {
+        clickedPage = e.detail.clickedPage;
+    });
+    const element = page.getByLabelText('page 14');
+    await userEvent.click(element);
+    await vi.waitFor(() => {
+        if (clickedPage === null) {
+            throw new Error('clickedPage was not set');
+        }
+    }, {
+        interval: 100,
+    });
+    expect(clickedPage).toEqual('14');
+});

package/dist/packages/pagination/react.d.ts

@@ -1,2 +1,5 @@
-import { WarpPagination } from './index.js';
-export declare const Pagination: import("@lit/react").ReactWebComponent<WarpPagination, {}>;
+import { WarpPagination } from '.';
+export declare const Pagination: import("@lit/react").ReactWebComponent<WarpPagination, {
+    onPageClick: string;
+    'onpage-click': string;
+}>;