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

package/dist/packages/attention/attention.react.stories.d.ts

@@ -1,6 +1,6 @@
-import { StoryObj } from '@storybook/react';
-import React from 'react';
-import { Attention } from './react';
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { Attention } from "./react";
 declare const _default: {
     title: string;
     component: React.FC<import("./react").AttentionProps>;

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

@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
-import { Button } from '../button/react';
-import { Attention } from './react';
+import React, { useState } from "react";
+import { Button } from "../button/react";
+import { Attention } from "./react";
 export default {
-    title: 'Overlays/Attention',
+    title: "Overlays/Attention",
     component: Attention,
 };
 export const Default = {
     args: {
-        placement: 'bottom',
+        placement: "bottom",
         popover: true,
         flip: true,
     },
@@ -20,8 +20,8 @@ export const Default = {
 };
 export const ToolTip = {
     args: {
-        placement: 'right',
-        id: 'tooltip-element',
+        placement: "right",
+        id: "tooltip-element",
         tooltip: true,
         flip: true,
     },
@@ -36,10 +36,10 @@ export const ToolTip = {
 };
 export const Callout = {
     args: {
-        placement: 'right',
+        placement: "right",
         callout: false,
         show: true,
-        className: 'flex items-center gap-8',
+        className: "flex items-center gap-8",
     },
     render: (args) => {
         return (React.createElement(Attention, { ...args },
@@ -49,7 +49,7 @@ export const Callout = {
 };
 export const Highlight = {
     args: {
-        placement: 'right',
+        placement: "right",
         highlight: true,
         flip: true,
     },
@@ -62,8 +62,8 @@ export const Highlight = {
 };
 export const DismissibleHighlight = {
     args: {
-        className: 'flex items-center gap-8',
-        placement: 'right',
+        className: "flex items-center gap-8",
+        placement: "right",
         canClose: true,
         crossAxis: true,
         highlight: true,
@@ -78,7 +78,7 @@ export const DismissibleHighlight = {
 };
 export const AccessibleTooltip = {
     args: {
-        placement: 'right',
+        placement: "right",
         popover: true,
     },
     render: (args) => {

package/dist/packages/attention/attention.react.test.js

@@ -1,8 +1,12 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { Attention } from './react.js';
-describeReactSsrAttributeMapping('Attention', Attention, [
-    { propName: 'canClose', attrName: 'can-close' },
-    { propName: 'noArrow', attrName: 'no-arrow' },
-    { propName: 'crossAxis', attrName: 'cross-axis' },
-    { propName: 'fallbackPlacements', attrName: 'fallback-placements', value: ['top', 'bottom'] },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { Attention } from "./react.js";
+describeReactSsrAttributeMapping("Attention", Attention, [
+    { propName: "canClose", attrName: "can-close" },
+    { propName: "noArrow", attrName: "no-arrow" },
+    { propName: "crossAxis", attrName: "cross-axis" },
+    {
+        propName: "fallbackPlacements",
+        attrName: "fallback-placements",
+        value: ["top", "bottom"],
+    },
 ]);

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

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpAttention } from './attention.js';
-import './attention.js';
-import '../button/button.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpAttention } from "./attention.js";
+import "./attention.js";
+import "../button/button.js";
 declare const args: Partial<WarpAttention> & {
     [key: string]: any;
 };

package/dist/packages/attention/attention.stories.js

@@ -1,24 +1,25 @@
-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 './attention.js';
-import '../button/button.js';
-const { events, args, argTypes } = getStorybookHelpers('w-attention');
+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 "./attention.js";
+import "../button/button.js";
+const { events, args, argTypes } = getStorybookHelpers("w-attention");
 const meta = {
-    title: 'Overlays/Attention',
+    title: "Overlays/Attention",
     render(args) {
         return html `
-      <w-attention ${spread(prespread(args))}>
-        <w-button
-          ${spread({ id: args.buttonId })}
-          variant="secondary"
-          slot="target">
-          ${args.buttonText}
-        </w-button>
-        <span slot="message">I'm a message</span>
-      </w-attention>
-    `;
+			<w-attention ${spread(prespread(args))}>
+				<w-button
+					${spread({ id: args.buttonId })}
+					variant="secondary"
+					slot="target"
+				>
+					${args.buttonText}
+				</w-button>
+				<span slot="message">I'm a message</span>
+			</w-attention>
+		`;
     },
     args,
     argTypes,
@@ -31,153 +32,161 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        placement: 'bottom',
+        placement: "bottom",
         popover: true,
         flip: true,
     },
     render(args) {
         return html `
-      <w-attention ${spread(prespread(args))}>
-        <w-button 
-          id="popoverTarget" 
-          slot="target"
-          variant="secondary"
-          @click=${(e) => {
-            const attention = e.currentTarget.closest('w-attention');
+			<w-attention ${spread(prespread(args))}>
+				<w-button
+					id="popoverTarget"
+					slot="target"
+					variant="secondary"
+					@click=${(e) => {
+            const attention = e.currentTarget.closest("w-attention");
             attention.show = !attention.show;
-        }}>
-            Click to toggle a popover
-        </w-button>
-        <span slot="message">I'm a popover</span>
-      </w-attention>
-    `;
+        }}
+				>
+					Click to toggle a popover
+				</w-button>
+				<span slot="message">I'm a popover</span>
+			</w-attention>
+		`;
     },
 };
 export const ToolTip = {
     args: {
-        placement: 'right',
-        buttonText: 'hover me',
-        id: 'tooltip-element',
+        placement: "right",
+        buttonText: "hover me",
+        id: "tooltip-element",
         tooltip: true,
         flip: true,
-        buttonId: 'tooltip-target',
+        buttonId: "tooltip-target",
     },
     decorators: [
         (story) => html `
-      ${story()}
-      <script>
-        (() => {
-          const button = document.getElementById('tooltip-target');
-          const tooltip = document.getElementById('tooltip-element');
-          button.addEventListener('mouseenter', () => {
-            tooltip.show = true;
-          });
-          button.addEventListener('mouseleave', () => {
-            tooltip.show = false;
-          });
-          button.addEventListener('focus', () => {
-            tooltip.show = true;
-          });
-          button.addEventListener('blur', () => {
-            tooltip.show = false;
-          });
-        })();
-      </script>
-    `,
+			${story()}
+			<script>
+				(() => {
+					const button = document.getElementById("tooltip-target");
+					const tooltip = document.getElementById("tooltip-element");
+					button.addEventListener("click", (e) => {
+						tooltip.show = true;
+					});
+					button.addEventListener("mouseleave", () => {
+						tooltip.show = false;
+					});
+					button.addEventListener("focus", () => {
+						tooltip.show = true;
+					});
+					button.addEventListener("blur", () => {
+						tooltip.show = false;
+					});
+				})();
+			</script>
+		`,
     ],
 };
 export const Callout = {
     args: {
-        buttonText: 'i need a callout',
-        class: 'flex items-center gap-8',
-        placement: 'right',
+        buttonText: "i need a callout",
+        class: "flex items-center gap-8",
+        placement: "right",
         callout: true,
         show: true,
     },
 };
 export const Highlight = {
     args: {
-        buttonId: 'highlight-target1',
-        id: 'highlight-message',
+        buttonId: "highlight-target1",
+        id: "highlight-message",
         buttonText: `I'm highlighted`,
-        placement: 'right',
+        placement: "right",
         highlight: true,
         flip: true,
     },
     decorators: [
         (story) => html `
-      ${story()}
-      <script>
-        (() => {
-          const button = document.getElementById('highlight-target1');
-          const highlight = document.getElementById('highlight-message');
-          button.addEventListener('click', () => {
-            highlight.show = !highlight.show;
-          });
-        })();
-      </script>
-    `,
+			${story()}
+			<script>
+				(() => {
+					const button = document.getElementById("highlight-target1");
+					const highlight = document.getElementById("highlight-message");
+					button.addEventListener("click", () => {
+						highlight.show = !highlight.show;
+					});
+				})();
+			</script>
+		`,
     ],
 };
 export const DismissibleHighlight = {
     args: {
-        class: 'flex items-center gap-8',
-        placement: 'right',
-        buttonId: 'highlight-target2',
-        buttonText: 'click me',
-        id: 'dismissible-highlight-message',
-        ['can-close']: true,
-        ['cross-axis']: true,
+        class: "flex items-center gap-8",
+        placement: "right",
+        buttonId: "highlight-target2",
+        buttonText: "click me",
+        id: "dismissible-highlight-message",
+        ["can-close"]: true,
+        ["cross-axis"]: true,
         highlight: true,
         flip: true,
     },
     decorators: [
         (story) => html `
-      ${story()}
-      <script>
-        (() => {
-          const button = document.getElementById('highlight-target2');
-          const highlight = document.getElementById('dismissible-highlight-message');
-          button.addEventListener('click', () => {
-            highlight.show = true;
-          });
-          highlight.addEventListener('close', () => {
-            highlight.show = false;
-          });
-        })();
-      </script>
-    `,
+			${story()}
+			<script>
+				(() => {
+					const button = document.getElementById("highlight-target2");
+					const highlight = document.getElementById(
+						"dismissible-highlight-message",
+					);
+					button.addEventListener("click", () => {
+						highlight.show = true;
+					});
+					highlight.addEventListener("close", () => {
+						highlight.show = false;
+					});
+				})();
+			</script>
+		`,
     ],
 };
 export const AccessibleTooltip = {
     args: {},
     render() {
         return html `
-      <w-attention id="accessible-attention" placement="right" popover>
-        <div slot="message">
-          <p id="aria-content" role="tooltip">I'm a popover with ARIA "tooltip" role</p>
-          <p>(this text is less relevant)</p>
-        </div>
-        <w-button
-          aria-details="aria-content"
-          id="accessible-target"
-          slot="target"
-          variant="secondary">
-          Click to toggle a popover
-        </w-button>
-      </w-attention>
-    `;
+			<w-attention id="accessible-attention" placement="right" popover>
+				<div slot="message">
+					<p id="aria-content" role="tooltip">
+						I'm a popover with ARIA "tooltip" role
+					</p>
+					<p>(this text is less relevant)</p>
+				</div>
+				<w-button
+					aria-details="aria-content"
+					id="accessible-target"
+					slot="target"
+					variant="secondary"
+				>
+					Click to toggle a popover
+				</w-button>
+			</w-attention>
+		`;
     },
     decorators: [
         (story) => html ` ${story()}
-        <script>
-          (() => {
-            const button = document.getElementById('accessible-target');
-            const accessibleAttention = document.getElementById('accessible-attention');
-            button.addEventListener('click', () => {
-              accessibleAttention.show = !accessibleAttention.show;
-            });
-          })();
-        </script>`,
+				<script>
+					(() => {
+						const button = document.getElementById("accessible-target");
+						const accessibleAttention = document.getElementById(
+							"accessible-attention",
+						);
+						button.addEventListener("click", () => {
+							accessibleAttention.show = !accessibleAttention.show;
+						});
+					})();
+				</script>`,
     ],
 };

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

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

package/dist/packages/attention/attention.test.js

@@ -1,11 +1,19 @@
-import { page } from 'vitest/browser';
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import './attention.js';
-test('renders an info', async () => {
-    const screen = await page.render(html `<w-attention show data-testid="attentionTarget" placement="bottom" popover flip>
-      <button id="target" slot="target" onclick="toggleShow()">Click to toggle a popover</button>
-      <span slot="message">I'm a popover</span>
-    </w-attention>`);
-    await expect.element(screen.getByTestId('attentionTarget')).toBeVisible();
+import { page } from "vitest/browser";
+import { html } from "lit";
+import { expect, test } from "vitest";
+import "./attention.js";
+test("renders an info", async () => {
+    const screen = await page.render(html `<w-attention
+			show
+			data-testid="attentionTarget"
+			placement="bottom"
+			popover
+			flip
+		>
+			<button id="target" slot="target" onclick="toggleShow()">
+				Click to toggle a popover
+			</button>
+			<span slot="message">I'm a popover</span>
+		</w-attention>`);
+    await expect.element(screen.getByTestId("attentionTarget")).toBeVisible();
 });