@warp-ds/elements 2.2.0-next.2 → 2.2.0-next.21

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

@@ -0,0 +1,5 @@
+import { WarpPagination } from '.';
+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 { LitElement } from 'lit';
+import { createComponent } from '@lit/react';
+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}.flex{display:flex}.inline-flex{display:inline-flex}.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}.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)}`;

package/dist/packages/pill/index.d.ts

@@ -1,34 +1,50 @@
-declare const WarpPill_base: {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/close-16';
+export declare const pillStyles: {
+    wrapper: string;
+    button: string;
+    suggestion: string;
+    filter: string;
+    label: string;
+    labelWithoutClose: string;
+    labelWithClose: string;
+    close: string;
+    closeIcon: string;
+    a11y: string;
 };
-export class WarpPill extends WarpPill_base {
-    static styles: any[];
-    static properties: {
-        canClose: {
-            type: BooleanConstructor;
-        };
-        suggestion: {
-            type: BooleanConstructor;
-        };
-        openSrLabel: {
-            type: StringConstructor;
-        };
-        closeSrLabel: {
-            type: StringConstructor;
-        };
-    };
+/**
+ * Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)
+ */
+declare class WarpPill extends LitElement {
     canClose: boolean;
     suggestion: boolean;
+    /**
+     * @deprecated Used "open-arial-label" instead.
+     */
+    openSrLabel: string;
+    openAriaLabel: string;
+    /**
+     * @deprecated Used "close-arial-label" instead.
+     */
+    closeSrLabel: string;
+    closeAriaLabel: string;
+    /** @internal */
     openFilterSrText: string;
+    /** @internal */
     removeFilterSrText: string;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    /** @internal */
     get _labelClasses(): string;
+    /** @internal */
     get _closeClasses(): string;
+    /** @internal */
     _onClick(): void;
+    /** @internal */
     _onClose(): void;
+    connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }
-export {};
+export { WarpPill };