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

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

@@ -6,7 +6,7 @@ export default {
     component: Snackbar,
 };
 export const Default = {
-    render: (args) => (React.createElement("div", { className: "flex gap-8" },
+    render: () => (React.createElement("div", { className: "flex gap-8" },
         React.createElement(Button, { onClick: () => {
                 const snackbar = document.querySelector("w-snackbar");
                 snackbar.create("The message should be short", {
@@ -35,7 +35,7 @@ export const Default = {
             } }, "Neutral variant"))),
 };
 export const WithAction = {
-    render: (args) => (React.createElement("div", { className: "flex gap-8" },
+    render: () => (React.createElement("div", { className: "flex gap-8" },
         React.createElement(Button, { onClick: () => {
                 const snackbar = document.querySelector("w-snackbar");
                 snackbar.create("The message should be short", {
@@ -97,7 +97,7 @@ export const WithAction = {
             } }, "Neutral variant"))),
 };
 export const WithLongActionLabel = {
-    render: (args) => (React.createElement("div", { className: "flex gap-8" },
+    render: () => (React.createElement("div", { className: "flex gap-8" },
         React.createElement(Button, { onClick: () => {
                 const snackbar = document.querySelector("w-snackbar");
                 snackbar.create("The message should be short", {

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

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import 'virtual:uno.css';
-import type { WarpSnackbar } from './snackbar.js';
-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 type { Meta, StoryObj } from "@storybook/web-components-vite";
+import "virtual:uno.css";
+import type { WarpSnackbar } from "./snackbar.js";
+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";
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof WarpSnackbar & {

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

@@ -1,19 +1,19 @@
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
+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');
+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',
+    title: "Overlays/Snackbar",
     args: {
         ...snackbarArgs,
         canClose: true,
@@ -22,12 +22,8 @@ const meta = {
     argTypes: {
         ...snackbarArgTypes,
         duration: {
-            control: { type: 'select' },
-            options: [
-                '4 seconds',
-                '10 seconds',
-                'Infinite',
-            ],
+            control: { type: "select" },
+            options: ["4 seconds", "10 seconds", "Infinite"],
         },
     },
     parameters: {
@@ -39,253 +35,329 @@ const meta = {
 export default meta;
 export const Default = {
     render({ duration, canClose }) {
-        const durationNum = duration === 'Infinite' ?
-            SnackbarDuration.Infinite :
-            duration === '10 seconds' ?
-                SnackbarDuration.Long :
-                SnackbarDuration.Short;
+        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>
+			<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: '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';
+				<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>
-    `;
+        }}"
+					>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;
+        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',
+			<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',
+                    label: "Action",
                     onclick() {
-                        const modal = document.getElementById('with-action-modal');
+                        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',
+        }}"
+					>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',
+                    label: "Action",
                     onclick() {
-                        const modal = document.getElementById('with-action-modal');
+                        const modal = document.getElementById("with-action-modal");
                         modal.show = true;
                     },
-                }
+                },
             });
-        }}">Warning variant</w-button>
+        }}"
+					>Warning variant</w-button
+				>
 
-          <w-button @click="${() => {
-            const snackbar = document.querySelector('w-snackbar');
-            snackbar.create('The message should be short', {
-                variant: 'negative',
+				<w-button
+					@click="${() => {
+            const snackbar = document.querySelector("w-snackbar");
+            snackbar.create("The message should be short", {
+                variant: "negative",
                 duration: durationNum,
                 canClose,
                 action: {
-                    label: 'Action',
+                    label: "Action",
                     onclick() {
-                        const modal = document.getElementById('with-action-modal');
+                        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',
+        }}"
+					>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',
+                    label: "Action",
                     onclick() {
-                        const modal = document.getElementById('with-action-modal');
+                        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', {
+        }}"
+					>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',
+                    label: "Action",
                     onclick() {
-                        const modal = document.getElementById('with-action-modal');
+                        const modal = document.getElementById("with-action-modal");
                         modal.show = true;
                     },
-                }
+                },
             });
-        }}">Neutral variant</w-button>
-        </div>
+        }}"
+					>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>
-    `;
+			<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;
+        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',
+			<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',
+                    label: "Long action label",
                     onclick() {
-                        const modal = document.getElementById('with-long-action-modal');
+                        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',
+        }}"
+					>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',
+                    label: "Long action label",
                     onclick() {
-                        const modal = document.getElementById('with-long-action-modal');
+                        const modal = document.getElementById("with-long-action-modal");
                         modal.show = true;
                     },
-                }
+                },
             });
-        }}">Warning variant</w-button>
+        }}"
+					>Warning variant</w-button
+				>
 
-          <w-button @click="${() => {
-            const snackbar = document.querySelector('w-snackbar');
-            snackbar.create('The message should be short', {
-                variant: 'negative',
+				<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',
+                    label: "Long action label",
                     onclick() {
-                        const modal = document.getElementById('with-long-action-modal');
+                        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',
+        }}"
+					>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',
+                    label: "Long action label",
                     onclick() {
-                        const modal = document.getElementById('with-long-action-modal');
+                        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', {
+        }}"
+					>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',
+                    label: "Long action label",
                     onclick() {
-                        const modal = document.getElementById('with-long-action-modal');
+                        const modal = document.getElementById("with-long-action-modal");
                         modal.show = true;
                     },
-                }
+                },
             });
-        }}">Neutral variant</w-button>
-        </div>
+        }}"
+					>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>
-    `;
+			<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

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

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

@@ -1,17 +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 () => {
+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');
+    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();
+    snackbar.create("Test message");
+    await expect.element(page.getByText("Test message")).toBeVisible();
 });