@warp-ds/elements 2.10.0-next.14 → 2.10.0-next.15

package/dist/packages/snackbar/snackbar.stories.js

@@ -0,0 +1,291 @@
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
+// @ts-expect-error You'll find no types here, TypeScript the Grey
+import 'virtual:uno.css';
+import '../attention/attention.js';
+import '../button/button.js';
+import '../icon/icon.js';
+import '../modal/modal.js';
+import '../modal-header/modal-header.js';
+import '../modal-footer/modal-footer.js';
+import './snackbar.js';
+import '../snackbar-item/snackbar-item.js';
+import { SnackbarDuration } from '../snackbar-item/snackbar-item.js';
+const { events: snackbarEvents, args: snackbarArgs, argTypes: snackbarArgTypes, } = getStorybookHelpers('w-snackbar');
+const meta = {
+    title: 'Overlays/Snackbar',
+    args: {
+        ...snackbarArgs,
+        canClose: true,
+        duration: undefined,
+    },
+    argTypes: {
+        ...snackbarArgTypes,
+        duration: {
+            control: { type: 'select' },
+            options: [
+                '4 seconds',
+                '10 seconds',
+                'Infinite',
+            ],
+        },
+    },
+    parameters: {
+        actions: {
+            handles: snackbarEvents,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render({ duration, canClose }) {
+        const durationNum = duration === 'Infinite' ?
+            SnackbarDuration.Infinite :
+            duration === '10 seconds' ?
+                SnackbarDuration.Long :
+                SnackbarDuration.Short;
+        return html `
+        <div class="flex gap-8">
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short, but if it is not and spans multiple lines then the icon and actions should be centered vertically', { variant: 'positive', duration: durationNum, canClose });
+        }}">Positive variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', { variant: 'warning', duration: durationNum, canClose });
+        }}">Warning variant</w-button>
+
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', { variant: 'negative', duration: durationNum, canClose });
+        }}">Negative variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', { variant: 'info', duration: durationNum, canClose });
+        }}">Info variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', { duration: durationNum, canClose });
+        }}">Neutral variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            const item = snackbar.create('The message should be short', { duration: durationNum, canClose });
+            const customIcon = document.createElement('w-icon');
+            customIcon.name = 'Rocket';
+            customIcon.slot = 'icon';
+            item.prepend(customIcon);
+        }}">Neutral w/ icon</w-button>
+        </div>
+    `;
+    },
+};
+export const WithAction = {
+    render({ duration, canClose }) {
+        const durationNum = duration === 'Infinite' ?
+            SnackbarDuration.Infinite :
+            duration === '10 seconds' ?
+                SnackbarDuration.Long :
+                SnackbarDuration.Short;
+        return html `
+        <div class="flex gap-8">
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short, but if it is not and spans multiple lines then the icon and actions should be centered vertically', {
+                variant: 'positive',
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Action',
+                    onclick() {
+                        const modal = document.getElementById('with-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Positive variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', {
+                variant: 'warning',
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Action',
+                    onclick() {
+                        const modal = document.getElementById('with-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Warning variant</w-button>
+
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', {
+                variant: 'negative',
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Action',
+                    onclick() {
+                        const modal = document.getElementById('with-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Negative variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', {
+                variant: 'info',
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Action',
+                    onclick() {
+                        const modal = document.getElementById('with-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Info variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', {
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Action',
+                    onclick() {
+                        const modal = document.getElementById('with-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Neutral variant</w-button>
+        </div>
+
+        <w-modal id="with-action-modal">
+          <w-modal-header slot="header" no-close></w-modal-header>
+          <div slot="content">
+            <p>Action was triggered</p>
+          </div>
+          <w-modal-footer slot="footer">
+            <div class="flex gap-16">
+              <w-button variant="primary" commandfor="with-action-modal" command="--close">Close</w-button>
+            </div>
+          </w-modal-footer>
+        </w-modal>
+    `;
+    },
+};
+export const WithLongActionLabel = {
+    render({ duration, canClose }) {
+        const durationNum = duration === 'Infinite' ?
+            SnackbarDuration.Infinite :
+            duration === '10 seconds' ?
+                SnackbarDuration.Long :
+                SnackbarDuration.Short;
+        return html `
+        <div class="flex gap-8">
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short, but if it is not and spans multiple lines then the icon and actions should be centered vertically', {
+                variant: 'positive',
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Long action label',
+                    onclick() {
+                        const modal = document.getElementById('with-long-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Positive variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', {
+                variant: 'warning',
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Long action label',
+                    onclick() {
+                        const modal = document.getElementById('with-long-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Warning variant</w-button>
+
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', {
+                variant: 'negative',
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Long action label',
+                    onclick() {
+                        const modal = document.getElementById('with-long-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Negative variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', {
+                variant: 'info',
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Long action label',
+                    onclick() {
+                        const modal = document.getElementById('with-long-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Info variant</w-button>
+          
+          <w-button @click="${() => {
+            const snackbar = document.querySelector('w-snackbar');
+            snackbar.create('The message should be short', {
+                duration: durationNum,
+                canClose,
+                action: {
+                    label: 'Long action label',
+                    onclick() {
+                        const modal = document.getElementById('with-long-action-modal');
+                        modal.show = true;
+                    },
+                }
+            });
+        }}">Neutral variant</w-button>
+        </div>
+
+        <w-modal id="with-long-action-modal">
+          <w-modal-header slot="header" no-close></w-modal-header>
+          <div slot="content">
+            <p>Action was triggered</p>
+          </div>
+          <w-modal-footer slot="footer">
+            <div class="flex gap-16">
+              <w-button variant="primary" commandfor="with-long-action-modal" command="--close">Close</w-button>
+            </div>
+          </w-modal-footer>
+        </w-modal>
+    `;
+    },
+};

package/dist/packages/snackbar/snackbar.test.d.ts

@@ -0,0 +1,4 @@
+import '../button/button.js';
+import '../icon/icon.js';
+import '../snackbar-item/snackbar-item.js';
+import './snackbar.js';

package/dist/packages/snackbar/snackbar.test.js

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import '../button/button.js';
+import '../icon/icon.js';
+import '../snackbar-item/snackbar-item.js';
+import './snackbar.js';
+test('exposes a create function that adds snackbar items', async () => {
+    const component = html `<w-snackbar></w-snackbar>`;
+    const page = render(component);
+    const snackbar = page.container.querySelector('w-snackbar');
+    if (!snackbar)
+        return expect(snackbar).not.toBeNull();
+    await snackbar.updateComplete;
+    snackbar.create('Test message');
+    await expect.element(page.getByText('Test message')).toBeVisible();
+});

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

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

package/dist/packages/snackbar/styles.js

@@ -0,0 +1,35 @@
+import { css } from "lit";
+export const styles = css `
+    :host {
+        position: fixed;
+        pointer-events: none;
+        
+        --_snackbar-gap: var(--w-c-snackbar-container-gap, 8px);
+        --_snackbar-position-top: var(--w-c-snackbar-position-top, initial);
+        --_snackbar-position-right: var(--w-c-snackbar-position-right, 0);
+        --_snackbar-position-bottom: var(--w-c-snackbar-position-bottom, 16px);
+        --_snackbar-position-left: var(--w-c-snackbar-position-left, 0);
+        --_snackbar-z-index: var(--w-c-snackbar-z-index, 50);
+
+        bottom: var(--_snackbar-position-bottom);
+        left: var(--_snackbar-position-left);
+        right: var(--_snackbar-position-right);
+        top: var(--_snackbar-position-top);
+        
+        z-index: var(--_snackbar-z-index);
+    }
+
+    [part='container'] {
+        display: grid;
+        gap: var(--_snackbar-gap);
+        grid-template-rows: auto;
+        justify-content: center;
+        justify-items: center;
+        margin-inline: auto;
+        pointer-events: none;
+    }
+
+    ::slotted(*) {
+        pointer-events: initial;
+    }
+`;

package/dist/packages/snackbar-item/react.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SnackbarActionPlacement, WarpSnackbarItem } from './snackbar-item.js';
+export declare const SnackbarItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSnackbarItem>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "close" | "actionPlacement" | "duration"> & {} & Partial<Omit<WarpSnackbarItem, keyof HTMLElement>> & React.RefAttributes<WarpSnackbarItem>, "ref">, "action-placement"> & {
+    actionPlacement?: SnackbarActionPlacement;
+} & React.RefAttributes<WarpSnackbarItem>>;

package/dist/packages/snackbar-item/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 {
+}
+const BaseSnackbarItem = createComponent({
+    tagName: 'w-snackbar-item',
+    elementClass: Component,
+    react: React,
+});
+export const SnackbarItem = React.forwardRef(({ actionPlacement, ...props }, ref) => React.createElement(BaseSnackbarItem, {
+    ...props,
+    ...(actionPlacement ? { 'action-placement': actionPlacement } : {}),
+}));

package/dist/packages/snackbar-item/snackbar-item.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+export type SnackbarVariant = 'positive' | 'warning' | 'negative' | 'info' | 'neutral';
+export type SnackbarActionPlacement = 'inline' | 'block';
+export declare enum SnackbarDuration {
+    Short = 4000,
+    Long = 10000,
+    Infinite = 120000000
+}
+/**
+ * An item to show in a `w-snackbar`.
+ *
+ * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
+ *
+ * @parent w-snackbar
+ *
+ * @slot default - the snackbar message.
+ * @slot icon - icon preceeding the message.
+ * @slot action - action following the message.
+ *
+ * @csspart item - the container wrapping the message, icon and actions.
+ * @csspart icon - the icon for the variant.
+ * @csspart message - the default slot, body of the snackbar item.
+ * @csspart action - close and action button.
+ *
+ * @cssprop --w-c-snackbar-item-radius
+ * @cssprop --w-c-snackbar-item-max-width
+ * @cssprop --w-c-snackbar-item-min-width
+ * @cssprop --w-c-snackbar-item-padding
+ *
+ * @cssprop --w-c-snackbar-item-bg
+ * @cssprop --w-c-snackbar-item-action-bg-active
+ * @cssprop --w-c-snackbar-item-action-bg-hover
+ *
+ * @cssprop --w-c-snackbar-item-color
+ * @cssprop --w-c-snackbar-item-action-color-active
+ * @cssprop --w-c-snackbar-item-action-color-hover
+ *
+ * @cssprop --w-c-snackbar-item-box-shadow
+ */
+export declare class WarpSnackbarItem extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The placement of the action and close buttons.
+     */
+    actionPlacement: SnackbarActionPlacement;
+    /**
+     * How long the message should stay in the document before removing itself.
+     */
+    duration: number;
+    private root;
+    private hasAction;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): Promise<void>;
+    /**
+     * Remove the snackbar item from the document.
+     *
+     * Moves focus to the last focused element outside of the snackbar item, if available.
+     */
+    close(): void;
+    protected firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-snackbar-item': WarpSnackbarItem;
+    }
+}