@warp-ds/elements 2.5.0 → 2.5.1-next.2

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 './pagination.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

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

package/dist/packages/pagination/react.js

@@ -0,0 +1,15 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Pagination = createComponent({
+    tagName: 'w-pagination',
+    elementClass: Component,
+    react: React,
+    events: {
+        onPageClick: 'page-click',
+        'onpage-click': 'page-click',
+    },
+});

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/pagination/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.border-0{border-width:0}.rounded-full{border-radius:9999px}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.hover\\:no-underline:hover,.focus\\:no-underline:focus{text-decoration:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-4{padding:.4rem}.p-8{padding:.8rem}.visible{visibility:visible}.font-bold{font-weight:700}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.md\\:block{display:block}.md\\:hidden{display:none}}`;

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.5.0-next.2",
+  "version": "2.5.1-next.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1134,6 +1134,45 @@
             ],
             "events": []
           }
+        },
+        {
+          "name": "w-pagination",
+          "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)\n---\n\n\n### **Events:**\n - **page-click** - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "base-url", "value": { "type": "string" } },
+            { "name": "pages", "value": { "type": "number" } },
+            {
+              "name": "current-page",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "visible-pages",
+              "value": { "type": "number", "default": "7" }
+            }
+          ],
+          "events": [
+            {
+              "name": "page-click",
+              "type": "CustomEvent",
+              "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "baseUrl", "type": "string" },
+              { "name": "pages", "type": "number" },
+              { "name": "currentPageNumber", "type": "number" },
+              { "name": "visiblePages", "type": "number" }
+            ],
+            "events": [
+              {
+                "name": "page-click",
+                "type": "CustomEvent",
+                "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
+              }
+            ]
+          }
         }
       ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.5.0",
+  "version": "2.5.1-next.2",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {
@@ -117,6 +117,10 @@
       "types": "./dist/packages/page-indicator/react.d.ts",
       "import": "./dist/packages/page-indicator/react.js"
     },
+    "./react/pagination": {
+      "types": "./dist/packages/pagination/react.d.ts",
+      "import": "./dist/packages/pagination/react.js"
+    },
     "./react/*": {
       "types": "./dist/packages/*/react.d.ts",
       "import": "./dist/packages/*/react.js"