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

package/dist/packages/button/button.stories.js

@@ -1,13 +1,13 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import './button.js';
-const { events, args, argTypes } = getStorybookHelpers('w-button');
-import '../icon/icon.js';
-import { detectLocale } from '../i18n.js';
+import { spread } from "@open-wc/lit-helpers";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit";
+import { prespread } from "../../.storybook/utilities.js";
+import "./button.js";
+const { events, args, argTypes } = getStorybookHelpers("w-button");
+import "../icon/icon.js";
+import { detectLocale } from "../i18n.js";
 const meta = {
-    title: 'Buttons/Button',
+    title: "Buttons/Button",
     render(args) {
         return html `<w-button ${spread(prespread(args))}>Button Text</w-button>`;
     },
@@ -22,109 +22,157 @@ const meta = {
 export default meta;
 export const Primary = {
     args: {
-        variant: 'primary',
-        type: 'button',
+        variant: "primary",
+        type: "button",
     },
 };
 export const Secondary = {
     args: {
-        variant: 'secondary',
-        type: 'button',
+        variant: "secondary",
+        type: "button",
     },
 };
 export const Negative = {
     args: {
-        variant: 'negative',
-        type: 'button',
+        variant: "negative",
+        type: "button",
     },
 };
 export const Utility = {
     args: {
-        variant: 'utility',
-        type: 'button',
+        variant: "utility",
+        type: "button",
     },
 };
 export const Link = {
     args: {
-        variant: 'link',
-        type: 'button',
+        variant: "link",
+        type: "button",
     },
 };
 export const Pill = {
     args: {
-        variant: 'pill',
-        type: 'button',
+        variant: "pill",
+        type: "button",
     },
     render(args) {
         const locale = detectLocale();
         return html `<w-button ${spread(prespread(args))}>
-        <w-icon name="ChevronLeft" size="small" locale="${locale}" style="height: 16px;" class="flex"></w-icon>
-      </w-button>
-      <w-button ${spread(prespread(args))}>
-        <w-icon name="Close" size="small" locale="${locale}" style="height: 16px;" class="flex"></w-icon>
-      </w-button>
-      <w-button ${spread(prespread(args))}>
-        <w-icon name="Heart" size="small" locale="${locale}" style="height: 16px;" class="flex"></w-icon>
-      </w-button>
-      <w-button ${spread(prespread(args))}>
-        <w-icon name="ChevronRight" size="small" locale="${locale}" style="height: 16px;" class="flex"></w-icon>
-      </w-button>
-      <br />
-      <w-button ${spread(prespread(args))} small="">
-        <w-icon name="ChevronLeft" size="small" locale="${locale}" style="height: 16px;" class="flex"></w-icon>
-      </w-button>
-      <w-button ${spread(prespread(args))} small="">
-        <w-icon name="Close" size="small" locale="${locale}" style="height: 16px;" class="flex"></w-icon>
-      </w-button>
-      <w-button ${spread(prespread(args))} small="">
-        <w-icon name="Heart" size="small" locale="${locale}" style="height: 16px;" class="flex"></w-icon>
-      </w-button>
-      <w-button ${spread(prespread(args))} small="">
-        <w-icon name="ChevronRight" size="small" locale="${locale}" style="height: 16px;" class="flex"></w-icon>
-      </w-button>`;
+				<w-icon
+					name="ChevronLeft"
+					size="small"
+					locale="${locale}"
+					style="height: 16px;"
+					class="flex"
+				></w-icon>
+			</w-button>
+			<w-button ${spread(prespread(args))}>
+				<w-icon
+					name="Close"
+					size="small"
+					locale="${locale}"
+					style="height: 16px;"
+					class="flex"
+				></w-icon>
+			</w-button>
+			<w-button ${spread(prespread(args))}>
+				<w-icon
+					name="Heart"
+					size="small"
+					locale="${locale}"
+					style="height: 16px;"
+					class="flex"
+				></w-icon>
+			</w-button>
+			<w-button ${spread(prespread(args))}>
+				<w-icon
+					name="ChevronRight"
+					size="small"
+					locale="${locale}"
+					style="height: 16px;"
+					class="flex"
+				></w-icon>
+			</w-button>
+			<br />
+			<w-button ${spread(prespread(args))} small="">
+				<w-icon
+					name="ChevronLeft"
+					size="small"
+					locale="${locale}"
+					style="height: 16px;"
+					class="flex"
+				></w-icon>
+			</w-button>
+			<w-button ${spread(prespread(args))} small="">
+				<w-icon
+					name="Close"
+					size="small"
+					locale="${locale}"
+					style="height: 16px;"
+					class="flex"
+				></w-icon>
+			</w-button>
+			<w-button ${spread(prespread(args))} small="">
+				<w-icon
+					name="Heart"
+					size="small"
+					locale="${locale}"
+					style="height: 16px;"
+					class="flex"
+				></w-icon>
+			</w-button>
+			<w-button ${spread(prespread(args))} small="">
+				<w-icon
+					name="ChevronRight"
+					size="small"
+					locale="${locale}"
+					style="height: 16px;"
+					class="flex"
+				></w-icon>
+			</w-button>`;
     },
 };
 export const Small = {
     args: {
-        variant: 'primary',
+        variant: "primary",
         small: true,
-        type: 'button',
+        type: "button",
     },
 };
 export const Quiet = {
     args: {
-        variant: 'secondary',
+        variant: "secondary",
         quiet: true,
-        type: 'button',
+        type: "button",
     },
 };
 export const Loading = {
     args: {
-        variant: 'primary',
+        variant: "primary",
         loading: true,
-        type: 'button',
+        type: "button",
     },
 };
 export const FullWidth = {
     args: {
-        variant: 'primary',
-        'full-width': true,
-        type: 'button',
+        variant: "primary",
+        "full-width": true,
+        type: "button",
     },
     render(args) {
         return html `
-      <div class="w-full flex flex-col gap-8">
-        <w-button ${spread(prespread(args))}>Full width</w-button>
-      </div>
-    `;
+			<div class="w-full flex flex-col gap-8">
+				<w-button ${spread(prespread(args))}>Full width</w-button>
+			</div>
+		`;
     },
 };
 export const AsLink = {
     args: {
-        variant: 'primary',
-        href: 'https://example.com',
-        target: '_blank',
-        type: 'button',
+        variant: "primary",
+        href: "https://example.com",
+        target: "_blank",
+        type: "button",
     },
     render(args) {
         return html `<w-button ${spread(prespread(args))}>Visit Example</w-button>`;
@@ -134,12 +182,21 @@ export const FormControl = {
     args: {},
     render() {
         return html `
-      <form name="form-control">
-        <input type="text" value="I am an input field" name="demoValue" style="border: 1px solid lime" />
-        <w-button type="reset" name="resetButton" value="fooyoo">Reset</w-button>
-        <w-button type="submit" name="submuitButtton" value="fooyoo">Send thing</w-button>
-      </form>
-    `;
+			<form name="form-control">
+				<input
+					type="text"
+					value="I am an input field"
+					name="demoValue"
+					style="border: 1px solid lime"
+				/>
+				<w-button type="reset" name="resetButton" value="fooyoo"
+					>Reset</w-button
+				>
+				<w-button type="submit" name="submuitButtton" value="fooyoo"
+					>Send thing</w-button
+				>
+			</form>
+		`;
     },
 };
 /* -------------------------------------------------------------------------------------------------
@@ -147,26 +204,26 @@ export const FormControl = {
  * ------------------------------------------------------------------------------------------------- */
 export const Overlay = {
     args: {
-        variant: 'overlay',
-        type: 'button',
+        variant: "overlay",
+        type: "button",
     },
 };
 export const OverlayInverted = {
     args: {
-        variant: 'overlayInverted',
-        type: 'button',
+        variant: "overlayInverted",
+        type: "button",
     },
 };
 export const OverlayQuiet = {
     args: {
-        variant: 'overlayQuiet',
-        type: 'button',
+        variant: "overlayQuiet",
+        type: "button",
     },
 };
 export const OverlayInvertedQuiet = {
     args: {
-        variant: 'overlayInvertedQuiet',
-        type: 'button',
+        variant: "overlayInvertedQuiet",
+        type: "button",
     },
 };
 /**
@@ -180,51 +237,63 @@ export const AllVariantsGrid = {
     render() {
         const locale = detectLocale();
         const variants = [
-            'primary',
-            'secondary',
-            'negative',
-            'negativeQuiet',
-            'utility',
-            'utilityQuiet',
-            'quiet',
-            'link',
-            'pill',
-            'overlay',
-            'overlayInverted',
-            'overlayQuiet',
-            'overlayInvertedQuiet',
+            "primary",
+            "secondary",
+            "negative",
+            "negativeQuiet",
+            "utility",
+            "utilityQuiet",
+            "quiet",
+            "link",
+            "pill",
+            "overlay",
+            "overlayInverted",
+            "overlayQuiet",
+            "overlayInvertedQuiet",
         ];
         return html `
-      <div style="display:grid; gap: 16px;">
-        <div style="font: 12px/1.4 system-ui; opacity: 0.8;">
-          Grid for visual regression checking (hover states / padding / icon colors).
-        </div>
+			<div style="display:grid; gap: 16px;">
+				<div style="font: 12px/1.4 system-ui; opacity: 0.8;">
+					Grid for visual regression checking (hover states / padding / icon
+					colors).
+				</div>
 
-        <div style="display:grid; gap: 12px;">
-          ${variants.map((v) => html `
-              <div style="display:flex; align-items:center; gap: 12px; flex-wrap: wrap;">
-                <div style="width: 210px; font: 12px/1.4 system-ui; opacity: 0.8;">variant="${v}"</div>
+				<div style="display:grid; gap: 12px;">
+					${variants.map((v) => html `
+							<div
+								style="display:flex; align-items:center; gap: 12px; flex-wrap: wrap;"
+							>
+								<div
+									style="width: 210px; font: 12px/1.4 system-ui; opacity: 0.8;"
+								>
+									variant="${v}"
+								</div>
 
-                <w-button variant=${v} type="button">Label</w-button>
+								<w-button variant=${v} type="button">Label</w-button>
 
-                ${v === 'pill'
+								${v === "pill"
             ? html `
-                      <w-button variant="pill" type="button" icon-only aria-label="Pill icon">
-                        <w-icon
-                          name="Heart"
-                          size="small"
-                          locale="${locale}"
-                          style="height: 16px;"
-                          class="flex"
-                        ></w-icon>
-                      </w-button>
-                    `
+											<w-button
+												variant="pill"
+												type="button"
+												icon-only
+												aria-label="Pill icon"
+											>
+												<w-icon
+													name="Heart"
+													size="small"
+													locale="${locale}"
+													style="height: 16px;"
+													class="flex"
+												></w-icon>
+											</w-button>
+										`
             : null}
-              </div>
-            `)}
-        </div>
-      </div>
-    `;
+							</div>
+						`)}
+				</div>
+			</div>
+		`;
     },
 };
 /**
@@ -235,20 +304,31 @@ export const QuietBackCompatMapping = {
     args: {},
     render() {
         return html `
-      <div style="display:grid; gap: 12px;">
-        <div style="font: 12px/1.4 system-ui; opacity: 0.8;">
-          These should look like their corresponding <code>*Quiet</code> variants.
-        </div>
+			<div style="display:grid; gap: 12px;">
+				<div style="font: 12px/1.4 system-ui; opacity: 0.8;">
+					These should look like their corresponding
+					<code>*Quiet</code> variants.
+				</div>
 
-        <div style="display:flex; gap: 12px; flex-wrap: wrap;">
-          <w-button variant="negative" quiet type="button">negative + quiet</w-button>
-          <w-button variant="utility" quiet type="button">utility + quiet</w-button>
-          <w-button variant="overlay" quiet type="button">overlay + quiet</w-button>
-          <w-button variant="overlayInverted" quiet type="button">overlayInverted + quiet</w-button>
-          <w-button variant="secondary" quiet type="button">secondary + quiet</w-button>
-        </div>
-      </div>
-    `;
+				<div style="display:flex; gap: 12px; flex-wrap: wrap;">
+					<w-button variant="negative" quiet type="button"
+						>negative + quiet</w-button
+					>
+					<w-button variant="utility" quiet type="button"
+						>utility + quiet</w-button
+					>
+					<w-button variant="overlay" quiet type="button"
+						>overlay + quiet</w-button
+					>
+					<w-button variant="overlayInverted" quiet type="button"
+						>overlayInverted + quiet</w-button
+					>
+					<w-button variant="secondary" quiet type="button"
+						>secondary + quiet</w-button
+					>
+				</div>
+			</div>
+		`;
     },
 };
 /**
@@ -259,31 +339,33 @@ export const LoadingAcrossVariants = {
     args: {},
     render() {
         const variants = [
-            'primary',
-            'secondary',
-            'negative',
-            'negativeQuiet',
-            'utility',
-            'utilityQuiet',
-            'quiet',
-            'link',
-            'overlay',
-            'overlayInverted',
-            'overlayQuiet',
-            'overlayInvertedQuiet',
-            'pill',
+            "primary",
+            "secondary",
+            "negative",
+            "negativeQuiet",
+            "utility",
+            "utilityQuiet",
+            "quiet",
+            "link",
+            "overlay",
+            "overlayInverted",
+            "overlayQuiet",
+            "overlayInvertedQuiet",
+            "pill",
         ];
         return html `
-      <div style="display:grid; gap: 16px;">
-        <div style="font: 12px/1.4 system-ui; opacity: 0.8;">
-          Loading should look the same no matter the variant.
-        </div>
+			<div style="display:grid; gap: 16px;">
+				<div style="font: 12px/1.4 system-ui; opacity: 0.8;">
+					Loading should look the same no matter the variant.
+				</div>
 
-        <div style="display:flex; flex-wrap: wrap; gap: 12px;">
-          ${variants.map((v) => html `<w-button variant=${v} loading type="button">${v}</w-button>`)}
-        </div>
-      </div>
-    `;
+				<div style="display:flex; flex-wrap: wrap; gap: 12px;">
+					${variants.map((v) => html `<w-button variant=${v} loading type="button"
+								>${v}</w-button
+							>`)}
+				</div>
+			</div>
+		`;
     },
 };
 /**
@@ -297,24 +379,51 @@ export const HrefModeRegression = {
     args: {},
     render() {
         return html `
-      <div style="display:grid; gap: 12px;">
-        <div style="font: 12px/1.4 system-ui; opacity: 0.8;">
-          <code>w-button[href]</code> renders <code>w-link</code> (backwards compatibility path).
-          Hover these and check for unwanted gray backgrounds / padding.
-        </div>
+			<div style="display:grid; gap: 12px;">
+				<div style="font: 12px/1.4 system-ui; opacity: 0.8;">
+					<code>w-button[href]</code> renders <code>w-link</code> (backwards
+					compatibility path). Hover these and check for unwanted gray
+					backgrounds / padding.
+				</div>
 
-        <div style="display:flex; gap: 12px; flex-wrap: wrap;">
-          <w-button variant="primary" href="https://example.com" target="_blank" type="button">primary href</w-button>
-          <w-button variant="overlay" href="https://example.com" target="_blank" type="button">overlay href</w-button>
-          <w-button variant="overlayQuiet" href="https://example.com" target="_blank" type="button"
-            >overlayQuiet href</w-button
-          >
-          <w-button variant="overlayInvertedQuiet" href="https://example.com" target="_blank" type="button"
-            >overlayInvertedQuiet href</w-button
-          >
-          <w-button variant="link" href="https://example.com" target="_blank" type="button">link href</w-button>
-        </div>
-      </div>
-    `;
+				<div style="display:flex; gap: 12px; flex-wrap: wrap;">
+					<w-button
+						variant="primary"
+						href="https://example.com"
+						target="_blank"
+						type="button"
+						>primary href</w-button
+					>
+					<w-button
+						variant="overlay"
+						href="https://example.com"
+						target="_blank"
+						type="button"
+						>overlay href</w-button
+					>
+					<w-button
+						variant="overlayQuiet"
+						href="https://example.com"
+						target="_blank"
+						type="button"
+						>overlayQuiet href</w-button
+					>
+					<w-button
+						variant="overlayInvertedQuiet"
+						href="https://example.com"
+						target="_blank"
+						type="button"
+						>overlayInvertedQuiet href</w-button
+					>
+					<w-button
+						variant="link"
+						href="https://example.com"
+						target="_blank"
+						type="button"
+						>link href</w-button
+					>
+				</div>
+			</div>
+		`;
     },
 };

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

@@ -1 +1 @@
-import './button.js';
+import "./button.js";

package/dist/packages/button/button.test.js

@@ -1,53 +1,55 @@
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './button.js';
-test('renders the slotted label', async () => {
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./button.js";
+test("renders the slotted label", async () => {
     const component = html `<w-button>This is a button</w-button>`;
     const page = render(component);
-    await expect.element(page.getByText('This is a button')).toBeVisible();
-    await expect.element(page.getByRole('button')).toBeVisible();
+    await expect.element(page.getByText("This is a button")).toBeVisible();
+    await expect.element(page.getByRole("button")).toBeVisible();
 });
-test('by default button type is button', async () => {
+test("by default button type is button", async () => {
     const component = html `<w-button>This is a button</w-button>`;
     const page = render(component);
-    await expect.element(page.getByRole('button')).toHaveAttribute('type', 'button');
+    await expect
+        .element(page.getByRole("button"))
+        .toHaveAttribute("type", "button");
 });
-test.todo('works in a form as type submit');
-test('Works in a form as type reset', async () => {
-    const label = 'Test label';
+test.todo("works in a form as type submit");
+test("Works in a form as type reset", async () => {
+    const label = "Test label";
     render(html `
-    <form>
-      <w-button
-        label=${label}
-        name="test"
-        type="reset"
-        value="test"
-        variant="secondary"
-      >
-        Reset the form
-      </w-button>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wButton = document.querySelector('w-button');
+		<form>
+			<w-button
+				label=${label}
+				name="test"
+				type="reset"
+				value="test"
+				variant="secondary"
+			>
+				Reset the form
+			</w-button>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wButton = document.querySelector("w-button");
     // sanity
     expect(form).not.toBeNull();
     expect(wButton).not.toBeNull();
     // Initial value is "test"
-    expect(wButton.value).toBe('test');
+    expect(wButton.value).toBe("test");
     // Change the value to "definitely not test"
-    wButton.value = 'definitely not test';
-    expect(wButton.value).toBe('definitely not test');
+    wButton.value = "definitely not test";
+    expect(wButton.value).toBe("definitely not test");
     // Reset the form
     form.reset();
     // Value should be reset back to "test"
-    expect(wButton.value).toBe('test');
+    expect(wButton.value).toBe("test");
 });
-test('calling focus on w-button focuses the button inside the shadow root', async () => {
+test("calling focus on w-button focuses the button inside the shadow root", async () => {
     const component = html `<w-button>This is a button</w-button>`;
     const page = render(component);
-    await expect.element(page.getByRole('button')).toBeVisible();
-    page.container.querySelector('w-button').focus();
-    await vi.waitFor(() => page.container.querySelector(':focus').tagName === 'BUTTON');
+    await expect.element(page.getByRole("button")).toBeVisible();
+    page.container.querySelector("w-button").focus();
+    await vi.waitFor(() => page.container.querySelector(":focus").tagName === "BUTTON");
 });