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

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/alert/styles.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.will-change-height{will-change:height}.border{border-width:1px}.border-l-4{border-left-width:4px}.rounded-4{border-radius:4px}.block{display:block}.flex{display:flex}.static{position:static}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-negative-subtle{background-color:var(--w-s-color-background-negative-subtle)}.s-bg-positive-subtle{background-color:var(--w-s-color-background-positive-subtle)}.s-bg-warning-subtle{background-color:var(--w-s-color-background-warning-subtle)}.s-text{color:var(--w-s-color-text)}.s-icon-info{color:var(--w-s-color-icon-info)}.s-icon-negative{color:var(--w-s-color-icon-negative)}.s-icon-positive{color:var(--w-s-color-icon-positive)}.s-icon-warning{color:var(--w-s-color-icon-warning)}.s-border-info-subtle{border-color:var(--w-s-color-border-info-subtle)}.s-border-l-info{border-left-color:var(--w-s-color-border-info)}.s-border-l-negative{border-left-color:var(--w-s-color-border-negative)}.s-border-l-positive{border-left-color:var(--w-s-color-border-positive)}.s-border-l-warning{border-left-color:var(--w-s-color-border-warning)}.s-border-negative-subtle{border-color:var(--w-s-color-border-negative-subtle)}.s-border-positive-subtle{border-color:var(--w-s-color-border-positive-subtle)}.s-border-warning-subtle{border-color:var(--w-s-color-border-warning-subtle)}.min-w-16{min-width:1.6rem}.w-16{width:1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.mr-8{margin-right:.8rem}.p-16{padding:1.6rem}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}`;
+export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.will-change-height{will-change:height}.border{border-width:1px}.border-l-4{border-left-width:4px}.rounded-4{border-radius:4px}.block{display:block}.inline{display:inline}.flex{display:flex}.static{position:static}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-negative-subtle{background-color:var(--w-s-color-background-negative-subtle)}.s-bg-positive-subtle{background-color:var(--w-s-color-background-positive-subtle)}.s-bg-warning-subtle{background-color:var(--w-s-color-background-warning-subtle)}.s-text{color:var(--w-s-color-text)}.s-icon-info{color:var(--w-s-color-icon-info)}.s-icon-negative{color:var(--w-s-color-icon-negative)}.s-icon-positive{color:var(--w-s-color-icon-positive)}.s-icon-warning{color:var(--w-s-color-icon-warning)}.s-border-info-subtle{border-color:var(--w-s-color-border-info-subtle)}.s-border-l-info{border-left-color:var(--w-s-color-border-info)}.s-border-l-negative{border-left-color:var(--w-s-color-border-negative)}.s-border-l-positive{border-left-color:var(--w-s-color-border-positive)}.s-border-l-warning{border-left-color:var(--w-s-color-border-warning)}.s-border-negative-subtle{border-color:var(--w-s-color-border-negative-subtle)}.s-border-positive-subtle{border-color:var(--w-s-color-border-positive-subtle)}.s-border-warning-subtle{border-color:var(--w-s-color-border-warning-subtle)}.min-w-16{min-width:1.6rem}.w-16{width:1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.mr-8{margin-right:.8rem}.p-16{padding:1.6rem}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}`;

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.d.ts

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

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

@@ -1,20 +1,21 @@
-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';
+import '../button/index.js';
 const { events, args, argTypes } = getStorybookHelpers('w-attention');
 const meta = {
     title: 'Overlays/Attention',
     render(args) {
         return html `
       <w-attention ${spread(prespread(args))}>
-        <button
+        <w-button
           ${spread({ id: args.buttonId })}
-          class="group block relative break-words last-child:mb-0 p-16 rounded-8 s-bg-subtle"
+          variant="secondary"
           slot="target">
           ${args.buttonText}
-        </button>
+        </w-button>
         <span slot="message">I'm a message</span>
       </w-attention>
     `;
@@ -37,42 +38,27 @@ 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"
+          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>
-
-      <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 +84,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: {
@@ -163,13 +155,13 @@ export const AccessibleTooltip = {
           <p id="aria-content" role="tooltip">I'm a popover with ARIA "tooltip" role</p>
           <p>(this text is less relevant)</p>
         </div>
-        <button
+        <w-button
           aria-details="aria-content"
           id="accessible-target"
-          class="group block relative break-words last-child:mb-0 p-16 rounded-8 s-bg-subtle"
-          slot="target">
+          slot="target"
+          variant="secondary">
           Click to toggle a popover
-        </button>
+        </w-button>
       </w-attention>
     `;
     },

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;