@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.21

package/dist/packages/alert/react.d.ts

@@ -1,2 +1,2 @@
-import { WarpAlert } from './index.js';
+import { WarpAlert } from '.';
 export declare const Alert: import("@lit/react").ReactWebComponent<WarpAlert, {}>;

package/dist/packages/alert/react.js

@@ -1,8 +1,11 @@
-import React from 'react';
+import { LitElement } from 'lit';
 import { createComponent } from '@lit/react';
-import { WarpAlert } from './index.js';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
 export const Alert = createComponent({
     tagName: 'w-alert',
-    elementClass: WarpAlert,
+    elementClass: Component,
     react: React,
 });

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Attention } from './react';
+declare const _default: {
+    title: string;
+    component: React.FC<import("./react").AttentionProps>;
+};
+export default _default;
+export type Story = StoryObj<typeof Attention>;
+export declare const Default: Story;
+export declare const ToolTip: Story;
+export declare const Callout: Story;
+export declare const Highlight: Story;
+export declare const DismissibleHighlight: Story;
+export declare const AccessibleTooltip: Story;

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

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Button } from '../button/react';
+import { Attention } from './react';
+export default {
+    title: 'Overlays/Attention',
+    component: Attention,
+};
+export const Default = {
+    args: {
+        placement: 'bottom',
+        popover: true,
+        flip: true,
+    },
+    render: (args) => {
+        const [show, setShow] = useState(false);
+        return (React.createElement(Attention, { ...args, show: show },
+            React.createElement(Button, { onClick: () => setShow(!show), slot: "target" }, "Click to toggle a popover"),
+            React.createElement("span", { slot: "message" }, "I'm a popover")));
+    },
+};
+export const ToolTip = {
+    args: {
+        placement: 'right',
+        id: 'tooltip-element',
+        tooltip: true,
+        flip: true,
+    },
+    render: (args) => {
+        const [show, setShow] = useState(false);
+        return (React.createElement(Attention, { ...args, show: show },
+            React.createElement(Button, { slot: "target", onMouseEnter: () => {
+                    setShow(true);
+                }, onMouseLeave: () => setShow(false), onFocus: () => setShow(true), onBlur: () => setShow(false) }, "hover me"),
+            React.createElement("span", { slot: "message" }, "Tooltip content")));
+    },
+};
+export const Callout = {
+    args: {
+        placement: 'right',
+        callout: false,
+        show: true,
+        className: 'flex items-center gap-8',
+    },
+    render: (args) => {
+        return (React.createElement(Attention, { ...args },
+            React.createElement(Button, { slot: "target" }, "I need a callout"),
+            React.createElement("span", { slot: "message" }, "Callout")));
+    },
+};
+export const Highlight = {
+    args: {
+        placement: 'right',
+        highlight: true,
+        flip: true,
+    },
+    render: (args) => {
+        const [show, setShow] = useState(false);
+        return (React.createElement(Attention, { ...args, show: show },
+            React.createElement(Button, { onClick: () => setShow(!show), slot: "target" }, "I'm highlighted"),
+            React.createElement("span", { slot: "message" }, "Highlighted content")));
+    },
+};
+export const DismissibleHighlight = {
+    args: {
+        className: 'flex items-center gap-8',
+        placement: 'right',
+        canClose: true,
+        crossAxis: true,
+        highlight: true,
+        flip: true,
+    },
+    render: (args) => {
+        const [show, setShow] = useState(false);
+        return (React.createElement(Attention, { ...args, show: show, onClose: () => setShow(false) },
+            React.createElement(Button, { onClick: () => setShow(!show), slot: "target" }, "click me"),
+            React.createElement("span", { slot: "message" }, "Dismissible highlight content")));
+    },
+};
+export const AccessibleTooltip = {
+    args: {
+        placement: 'right',
+        popover: true,
+    },
+    render: (args) => {
+        const [show, setShow] = useState(false);
+        return (React.createElement(Attention, { ...args, show: show },
+            React.createElement("div", { slot: "message" },
+                React.createElement("p", { id: "aria-content", role: "tooltip" }, "I'm a popover with ARIA \"tooltip\" role"),
+                React.createElement("p", null, "(this text is less relevant)")),
+            React.createElement("button", { onClick: () => setShow(!show), "aria-details": "aria-content", id: "accessible-target", className: "group block relative break-words last-child:mb-0 p-16 rounded-8 s-bg-subtle", slot: "target" }, "Click to toggle a popover")));
+    },
+};

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

@@ -1,6 +1,6 @@
-import { html } from 'lit';
 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 './index.js';
 const { events, args, argTypes } = getStorybookHelpers('w-attention');
@@ -37,42 +37,21 @@ export const Default = {
     render(args) {
         return html `
       <w-attention ${spread(prespread(args))}>
-        <w-button id="popoverTarget" slot="target"> Click to toggle a popover </w-button>
+        <w-button id="popoverTarget" slot="target" @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>
-
-      <script>
-        const popoverTarget = document.querySelector('#popoverTarget');
-        const popoverEl = document.querySelector('[popover]');
-
-        popoverTarget.addEventListener('click', () => {
-          if (popoverEl.show) {
-            popoverEl.removeAttribute('show');
-          } else {
-            popoverEl.setAttribute('show', 'true');
-          }
-        });
-      </script>
     `;
     },
-    decorators: [
-        (story) => html `
-      ${story()}
-      <script>
-        // use IIFE to create local scope
-        (() => {
-          const popoverIconEl = document.getElementById('attention-element');
-          const popoverIconTarget = document.getElementById('icon-button-target');
-          popoverIconTarget.addEventListener('click', () => {
-            popoverIconEl.show = !popoverIconEl.show;
-          });
-        })();
-      </script>
-    `,
-    ],
 };
 export const ToolTip = {
-    args: { placement: 'right', buttonText: 'hover me', id: 'tooltip-element', tooltip: true, flip: true, buttonId: 'tooltip-target' },
+    args: {
+        placement: 'right',
+        buttonText: 'hover me',
+        id: 'tooltip-element',
+        tooltip: true,
+        flip: true,
+        buttonId: 'tooltip-target',
+    },
     decorators: [
         (story) => html `
       ${story()}
@@ -98,7 +77,13 @@ export const ToolTip = {
     ],
 };
 export const Callout = {
-    args: { buttonText: 'i need a callout', class: 'flex items-center gap-8', placement: 'right', callout: true, show: true },
+    args: {
+        buttonText: 'i need a callout',
+        class: 'flex items-center gap-8',
+        placement: 'right',
+        callout: true,
+        show: true,
+    },
 };
 export const Highlight = {
     args: {

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

@@ -1,5 +1,5 @@
-import { html } from 'lit';
 import { page } from '@vitest/browser/context';
+import { html } from 'lit';
 import { expect, test } from 'vitest';
 import './index.js';
 test('renders an info', async () => {

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

@@ -1,6 +1,7 @@
-import { LitElement } from 'lit';
 import { Directions } from '@warp-ds/core/attention';
+import { LitElement } from 'lit';
 import '@warp-ds/icons/elements/close-16';
+import '../button/index';
 export declare const ccAttention: {
     base: string;
     tooltip: string;
@@ -62,7 +63,7 @@ declare class WarpAttention extends LitElement {
     /** @internal */
     get _arrowClasses(): string;
     /** @internal */
-    get _arrowHtml(): "" | import("lit").TemplateResult<1>;
+    get _arrowHtml(): import("lit").TemplateResult<1> | "";
     /** @internal */
     get _activeVariantClasses(): {
         wrapper: any;