@warp-ds/elements 2.5.1 → 2.6.0-next.1

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/packages/step/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Tom cirkel\"],\"steps.aria.active\":[\"Trinindikator aktiv cirkel\"],\"steps.aria.completed\":[\"Trinindikator fuldført cirkel\"]}");

package/dist/packages/step/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Empty circle\"],\"steps.aria.active\":[\"Step indicator active circle\"],\"steps.aria.completed\":[\"Step indicator completed circle\"]}");

package/dist/packages/step/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Tyhjä ympyrä\"],\"steps.aria.active\":[\"Vaiheilmaisin aktiivinen ympyrä\"],\"steps.aria.completed\":[\"Vaiheilmaisin valmis ympyrä\"]}");

package/dist/packages/step/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Tom sirkel\"],\"steps.aria.active\":[\"Stegindikator aktiv sirkel\"],\"steps.aria.completed\":[\"Stegindikator hel sirkel\"]}");

package/dist/packages/step/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Tom cirkel\"],\"steps.aria.active\":[\"Stegindikator aktiv cirkel\"],\"steps.aria.completed\":[\"Stegindikator fulländad cirkel\"]}");

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

@@ -0,0 +1,2 @@
+import { WarpStep } from './step.js';
+export declare const Step: import("@lit/react").ReactWebComponent<WarpStep, {}>;

package/dist/packages/step/react.js

@@ -0,0 +1,11 @@
+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 Step = createComponent({
+    tagName: 'w-step',
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/step/step.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/check-16';
+export interface StepsContext {
+    horizontal?: boolean;
+    right?: boolean;
+    isLast?: boolean;
+    isFirst?: boolean;
+}
+/**
+ * Individual step component that shows a single step in a process
+ */
+export declare class WarpStep extends LitElement {
+    active: boolean;
+    completed: boolean;
+    private _context;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    connectedCallback(): void;
+    setContext(context: StepsContext): void;
+    getAriaLabel(): string;
+    render(): import("lit").TemplateResult<1>;
+}