@warp-ds/elements 2.2.0-next.9 → 2.2.1

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}.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

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

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,33 +1,7 @@
-import { LitElement } from 'lit';
 import { Directions } from '@warp-ds/core/attention';
+import { LitElement } from 'lit';
 import '@warp-ds/icons/elements/close-16';
-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;
-};
+import '../button/index';
 declare class WarpAttention extends LitElement {
     show: boolean;
     placement: Directions;
@@ -62,7 +36,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;