@warp-ds/elements 2.10.0-next.9 → 2.10.0

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

@@ -0,0 +1,363 @@
+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,16 @@
+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 } : {}),
+    ref,
+}));

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;
+    }
+}