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

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

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

package/dist/packages/alert/react.js

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

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/alert/styles.js

@@ -0,0 +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)}`;

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpAttention } from './index.js';
+import './index.js';
+declare const args: Partial<WarpAttention> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+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.stories.js

@@ -0,0 +1,173 @@
+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');
+const meta = {
+    title: 'Overlays/Attention',
+    render(args) {
+        return html `
+      <w-attention ${spread(prespread(args))}>
+        <button
+          ${spread({ id: args.buttonId })}
+          class="group block relative break-words last-child:mb-0 p-16 rounded-8 s-bg-subtle"
+          slot="target">
+          ${args.buttonText}
+        </button>
+        <span slot="message">I'm a message</span>
+      </w-attention>
+    `;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        placement: 'bottom',
+        popover: true,
+        flip: true,
+    },
+    render(args) {
+        return html `
+      <w-attention ${spread(prespread(args))}>
+        <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>
+    `;
+    },
+};
+export const ToolTip = {
+    args: {
+        placement: 'right',
+        buttonText: 'hover me',
+        id: 'tooltip-element',
+        tooltip: true,
+        flip: true,
+        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>
+    `,
+    ],
+};
+export const Callout = {
+    args: {
+        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',
+        buttonText: `I'm highlighted`,
+        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>
+    `,
+    ],
+};
+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,
+        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>
+    `,
+    ],
+};
+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>
+        <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">
+          Click to toggle a popover
+        </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>`,
+    ],
+};

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

@@ -0,0 +1 @@
+import './index.js';

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

@@ -0,0 +1,11 @@
+import { page } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import './index.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();
+});

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

@@ -1,69 +1,37 @@
-declare const WarpAttention_base: {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
+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;
+    callout: string;
+    highlight: string;
+    popover: string;
+    arrowBase: string;
+    arrowDirectionLeftStart: string;
+    arrowDirectionLeft: string;
+    arrowDirectionLeftEnd: string;
+    arrowDirectionRightStart: string;
+    arrowDirectionRight: string;
+    arrowDirectionRightEnd: string;
+    arrowDirectionBottomStart: string;
+    arrowDirectionBottom: string;
+    arrowDirectionBottomEnd: string;
+    arrowDirectionTopStart: string;
+    arrowDirectionTop: string;
+    arrowDirectionTopEnd: string;
+    arrowTooltip: string;
+    arrowCallout: string;
+    arrowPopover: string;
+    arrowHighlight: string;
+    content: string;
+    notCallout: string;
+    closeBtn: string;
 };
-export class WarpAttention extends WarpAttention_base {
-    static properties: {
-        show: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        placement: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        tooltip: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        callout: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        popover: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        highlight: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        canClose: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        noArrow: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        distance: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        skidding: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        flip: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        crossAxis: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        fallbackPlacements: {
-            type: ArrayConstructor;
-            reflect: boolean;
-        };
-    };
-    static styles: any[];
-    handleDone(): void;
+declare class WarpAttention extends LitElement {
     show: boolean;
-    placement: string;
+    placement: Directions;
     tooltip: boolean;
     callout: boolean;
     popover: boolean;
@@ -74,48 +42,53 @@ export class WarpAttention extends WarpAttention_base {
     skidding: number;
     flip: boolean;
     crossAxis: boolean;
-    _initialPlacement: string;
-    set _actualDirection(v: string);
-    get _actualDirection(): string;
+    fallbackPlacements: Directions[];
+    /** @internal */
+    attentionState: any;
+    /** @internal */
+    _initialPlacement: Directions;
+    static styles: import("lit").CSSResult[];
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    get _arrowEl(): any;
-    get _arrowDirection(): any;
+    handleDone(): void;
+    /** @internal */
+    get _actualDirection(): Directions;
+    /** @internal */
+    set _actualDirection(v: Directions);
+    /** @internal */
+    get _arrowEl(): Element;
+    /** @internal */
+    get _arrowDirection(): Directions;
+    /** @internal */
     get _arrowClasses(): string;
+    /** @internal */
     get _arrowHtml(): import("lit").TemplateResult<1> | "";
+    /** @internal */
     get _activeVariantClasses(): {
         wrapper: any;
         arrow: any;
     };
-    get _attentionEl(): any;
-    get _targetEl(): any;
-    get _messageEl(): any;
+    /** @internal */
+    get _attentionEl(): HTMLDivElement;
+    /** @internal */
+    get _targetEl(): Element | null;
+    /** @internal */
+    get _messageEl(): Element | null;
+    /** @internal */
     get _wrapperClasses(): string;
+    /** @internal */
     get _ariaClose(): string;
+    /** @internal */
     get _closeBtnHtml(): import("lit").TemplateResult<1>;
     updated(): void;
-    attentionState: {
-        isShowing: boolean;
-        isCallout: boolean;
-        actualDirection: string;
-        directionName: string;
-        arrowEl: any;
-        attentionEl: any;
-        targetEl: any;
-        noArrow: boolean;
-        distance: number;
-        skidding: number;
-        flip: boolean;
-        crossAxis: boolean;
-        fallbackPlacements: any;
-    };
     pointingAtDirection(): string;
     activeAttentionType(): string;
     defaultAriaLabel(): string;
     setAriaLabels(): void;
     firstUpdated(): void;
     close(): void;
-    keypressed(e: any): void;
+    keypressed(e: KeyboardEvent): void;
     render(): import("lit").TemplateResult<1>;
 }
-export {};
+export { WarpAttention };