@warp-ds/elements 2.11.0-next.1 → 2.12.0-next.1

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

@@ -0,0 +1,12 @@
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { Tooltip } from "./react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<import("./tooltip").WarpTooltip>, "open" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "show" | "hide" | "placement" | "noArrow" | "for" | "showDelay" | "hideDelay"> & {} & Partial<Omit<import("./tooltip").WarpTooltip, keyof HTMLElement>> & React.RefAttributes<import("./tooltip").WarpTooltip>, "ref"> & {
+        htmlFor?: string;
+    } & React.RefAttributes<import("./tooltip").WarpTooltip>>;
+};
+export default _default;
+export type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Button } from "../button/react";
+import { Tooltip } from "./react";
+export default {
+    title: "Overlays/Tooltip",
+    component: Tooltip,
+};
+export const Default = {
+    render: () => (React.createElement(React.Fragment, null,
+        React.createElement(Button, { id: "my-button", "aria-labelledby": "my-tooltip" }, "Hover over me"),
+        React.createElement(Tooltip, { id: "my-tooltip", htmlFor: "my-button" }, "Check out this tooltip"))),
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import "virtual:uno.css";
+import "../button/button.js";
+import "../textfield/textfield.js";
+import "./tooltip.js";
+declare const args: {
+    "no-arrow": boolean;
+    placement: string;
+    "show-delay": number;
+    "hide-delay": number;
+};
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Default: Story;
+export declare const Placement: Story;
+export declare const Textfield: Story;

package/dist/packages/tooltip/tooltip.stories.js

@@ -0,0 +1,115 @@
+import { spread } from "@open-wc/lit-helpers";
+import { html } from "lit";
+// @ts-expect-error You'll find no types here, TypeScript the Grey
+import "virtual:uno.css";
+import { prespread } from "../../.storybook/utilities.js";
+import "../button/button.js";
+import "../textfield/textfield.js";
+import "./tooltip.js";
+const args = {
+    "no-arrow": false,
+    placement: "top",
+    "show-delay": 150,
+    "hide-delay": 0,
+};
+const meta = {
+    title: "Overlays/Tooltip",
+    args,
+    argTypes: {
+        placement: {
+            control: { type: "select" },
+            options: ["top", "bottom", "left", "right"],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return html `
+			<w-button id="my-button" aria-labelledby="my-tooltip">
+				Hover over me
+			</w-button>
+			<w-tooltip id="my-tooltip" for="my-button" ${spread(prespread(args))}>
+				Check out this tooltip
+			</w-tooltip>
+		`;
+    },
+};
+export const Placement = {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render({ placement, ...rest }) {
+        return html `
+			<div style="display: flex; gap: 32px; flex-direction: column;">
+				<div>
+					<w-button id="top-button" aria-labelledby="top-tooltip">
+						Top
+					</w-button>
+					<w-tooltip
+						id="top-tooltip"
+						for="top-button"
+						placement="top"
+						${spread(prespread(rest))}
+					>
+						Placement top
+					</w-tooltip>
+				</div>
+				<div>
+					<w-button id="right-button" aria-labelledby="right-tooltip"
+						>Right</w-button
+					>
+					<w-tooltip
+						id="right-tooltip"
+						for="right-button"
+						placement="right"
+						${spread(prespread(rest))}
+					>
+						Placement right
+					</w-tooltip>
+				</div>
+				<div>
+					<w-button id="bottom-button" aria-labelledby="bottom-tooltip">
+						Bottom
+					</w-button>
+					<w-tooltip
+						id="bottom-tooltip"
+						for="bottom-button"
+						placement="bottom"
+						${spread(prespread(rest))}
+					>
+						Placement bottom
+					</w-tooltip>
+				</div>
+				<div>
+					<w-button id="left-button" aria-labelledby="left-tooltip">
+						Left
+					</w-button>
+					<w-tooltip
+						id="left-tooltip"
+						for="left-button"
+						placement="left"
+						${spread(prespread(rest))}
+					>
+						Placement left
+					</w-tooltip>
+				</div>
+			</div>
+		`;
+    },
+};
+export const Textfield = {
+    args: {},
+    argTypes: {},
+    parameters: {},
+    render() {
+        return html `
+			<w-textfield
+				name="tooltip-demo"
+				label="Needs an explanation"
+				placeholder="Placeholder"
+				help-text="Help text is available, but might not be enough, or the added context is not important enough that we use help-text"
+				tooltip="This tooltip adds supplementary information"
+				optional
+			></w-textfield>
+		`;
+    },
+};

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

@@ -0,0 +1,2 @@
+import "../button/button.js";
+import "./tooltip.js";

package/dist/packages/tooltip/tooltip.test.js

@@ -0,0 +1,130 @@
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { server, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-lit";
+import "../button/button.js";
+import "./tooltip.js";
+test("tooltip is not shown by default", async () => {
+    // We wrap the contents in a span here so the test Locator can find an element
+    // that is not the w-tooltip itself for visibility testsing.
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button">
+			<span>Tooltip contents</span>
+		</w-tooltip>
+	`;
+    const page = render(component);
+    expect(page.getByText("Tooltip contents")).not.toBeVisible();
+});
+test("tooltip with open property is shown by default", async () => {
+    // We wrap the contents in a span here so the test Locator can find an element
+    // that is not the w-tooltip itself for visibility testsing.
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button" open>
+			<span>Tooltip contents</span>
+		</w-tooltip>
+	`;
+    const page = render(component);
+    await expect.element(page.getByText("Tooltip contents")).toBeVisible();
+});
+test("tooltip has an accessible description of its appearance and arrow direction", async () => {
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button" open>
+			Tooltip contents
+		</w-tooltip>
+	`;
+    const page = render(component);
+    await expect
+        .element(page.getByRole("tooltip"))
+        .toHaveAccessibleDescription("A black speech bubble providing complementary information pointing down");
+});
+test("tooltip's accessible description does not include arrow direction if the tooltip has the no-arrow property", async () => {
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button" open no-arrow>
+			Tooltip contents
+		</w-tooltip>
+	`;
+    const page = render(component);
+    await expect
+        .element(page.getByRole("tooltip"))
+        .toHaveAccessibleDescription("A black speech bubble providing complementary information");
+});
+test("tooltip opens when its target gets hovered", async () => {
+    // We wrap the contents in a span here so the test Locator can find an element
+    // that is not the w-tooltip itself for visibility testsing.
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button">
+			<span>Tooltip contents</span>
+		</w-tooltip>
+	`;
+    const page = render(component);
+    await expect.element(page.getByText("Tooltip contents")).not.toBeVisible();
+    await userEvent.hover(page.getByRole("button"));
+    await expect.element(page.getByText("Tooltip contents")).toBeVisible();
+});
+test("tooltip closes when its target gets unhovered, except when the tooltip itself gets hovered", async () => {
+    // We wrap the contents in a span here so the test Locator can find an element
+    // that is not the w-tooltip itself for visibility testsing.
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button">
+			<span data-testid="contents">Tooltip contents</span>
+		</w-tooltip>
+	`;
+    const page = render(component);
+    await expect.element(page.getByText("Tooltip contents")).not.toBeVisible();
+    await userEvent.hover(page.getByRole("button"));
+    await expect.element(page.getByText("Tooltip contents")).toBeVisible();
+    await userEvent.hover(page.getByTestId("contents"));
+    await expect.element(page.getByText("Tooltip contents")).toBeVisible();
+    await userEvent.unhover(page.getByTestId("contents"));
+    await expect.element(page.getByText("Tooltip contents")).not.toBeVisible();
+});
+test("tooltip opens when its target gets focus", async () => {
+    // We wrap the contents in a span here so the test Locator can find an element
+    // that is not the w-tooltip itself for visibility testsing.
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button">
+			<span>Tooltip contents</span>
+		</w-tooltip>
+	`;
+    const page = render(component);
+    await expect.element(page.getByText("Tooltip contents")).not.toBeVisible();
+    await userEvent.keyboard("[Tab]"); // focus!
+    await expect.element(page.getByText("Tooltip contents")).toBeVisible();
+});
+// tested OK manually in Firefox 152
+test.skipIf(server.browser === "firefox")("tooltip hides on blur", async () => {
+    // We wrap the contents in a span here so the test Locator can find an element
+    // that is not the w-tooltip itself for visibility testsing.
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button">
+			<span>Tooltip contents</span>
+		</w-tooltip>
+	`;
+    const page = render(component);
+    await expect.element(page.getByText("Tooltip contents")).not.toBeVisible();
+    await userEvent.keyboard("[Tab]"); // focus!
+    await userEvent.keyboard("[Tab]"); // blur!
+    await expect.element(page.getByText("Tooltip contents")).not.toBeVisible();
+});
+test("tooltip can be dismissed with the Escape key", async () => {
+    // We wrap the contents in a span here so the test Locator can find an element
+    // that is not the w-tooltip itself for visibility testsing.
+    const component = html `
+		<w-button id="test-button" aria-labelledby="test-tooltip">Button</w-button>
+		<w-tooltip id="test-tooltip" for="test-button" open>
+			<span>Tooltip contents</span>
+		</w-tooltip>
+	`;
+    const page = render(component);
+    await expect.element(page.getByText("Tooltip contents")).toBeVisible();
+    await userEvent.keyboard("[Escape]");
+    await expect.element(page.getByText("Tooltip contents")).not.toBeVisible();
+});

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.1-next.1",
+  "version": "2.11.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -113,6 +113,11 @@
               "value": {
                 "type": "HTMLInputElement[\"autocomplete\"] | undefined"
               }
+            },
+            {
+              "name": "tooltip",
+              "description": "Suplementary information that should show in a tooltip behind an information icon after the label.\n\nUse the `tooltip` slot if you need markup and not just text.\n\nYou must provide a label to be able to show an info icon with a tooltip.",
+              "value": { "type": "string | undefined" }
             }
           ],
           "slots": [
@@ -226,6 +231,11 @@
                 "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.",
                 "type": "HTMLInputElement[\"autocomplete\"] | undefined"
               },
+              {
+                "name": "tooltip",
+                "description": "Suplementary information that should show in a tooltip behind an information icon after the label.\n\nUse the `tooltip` slot if you need markup and not just text.\n\nYou must provide a label to be able to show an info icon with a tooltip.",
+                "type": "string | undefined"
+              },
               {
                 "name": "formatter",
                 "description": "Function to format value when the input field.\n\nOnly active when the input field does not have focus,\nsimilar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html).",
@@ -1542,7 +1552,7 @@
         },
         {
           "name": "w-modal",
-          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.\n\n### **CSS Properties:**\n - **--w-c-modal-backdrop-color** - undefined _(default: undefined)_\n- **--w-c-modal-bg** - undefined _(default: undefined)_\n- **--w-c-modal-box-shadow** - undefined _(default: undefined)_\n- **--w-c-modal-color** - undefined _(default: undefined)_\n- **--w-c-modal-height** - undefined _(default: undefined)_\n- **--w-c-modal-max-height** - undefined _(default: undefined)_\n- **--w-c-modal-min-height** - undefined _(default: undefined)_\n- **--w-c-modal-translate-distance** - undefined _(default: undefined)_\n- **--w-c-modal-width** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **dialog** - the root element inside the component (`<dialog>` element).\n- **wrapper** - container for all elements, direct child of `<dialog>`.\n- **content** - the container for the `content` slot items (children).",
+          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.\n\n### **CSS Properties:**\n - **--w-c-modal-backdrop-color** - undefined _(default: undefined)_\n- **--w-c-modal-bg** - undefined _(default: undefined)_\n- **--w-c-modal-box-shadow** - undefined _(default: undefined)_\n- **--w-c-modal-color** - undefined _(default: undefined)_\n- **--w-c-modal-height** - undefined _(default: undefined)_\n- **--w-c-modal-max-height** - undefined _(default: undefined)_\n- **--w-c-modal-min-height** - undefined _(default: undefined)_\n- **--w-c-modal-translate-distance** - undefined _(default: undefined)_\n- **--w-c-modal-padding-bottom** - undefined _(default: undefined)_\n- **--w-c-modal-width** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **dialog** - the root element inside the component (`<dialog>` element).\n- **wrapper** - container for all elements, direct child of `<dialog>`.\n- **content** - the container for the `content` slot items (children).",
           "doc-url": "",
           "attributes": [
             {
@@ -2839,6 +2849,82 @@
             ],
             "events": []
           }
+        },
+        {
+          "name": "w-tooltip",
+          "description": "A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.\n\nTooltips should be used sparingly and contain succinct, supplementary information.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "for",
+              "description": "ID of the element that triggers the tooltip on hover or focus.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "no-arrow",
+              "description": "Hide the arrow pointing toward the tooltip target.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "open",
+              "description": "Indicates whether the tooltip is visible or not.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "description": "Sets the placement of the tooltip relative to its target.\n\nThe tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.",
+              "value": {
+                "type": "'top' | 'right' | 'bottom' | 'left'",
+                "default": "\"top\""
+              }
+            },
+            {
+              "name": "show-delay",
+              "description": "Milliseconds to wait before showing the tooltip on hover.\n\nKeep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.\n\nFocusing the target element shows the tooltip immediately.",
+              "value": { "type": "number", "default": "150" }
+            },
+            {
+              "name": "hide-delay",
+              "description": "Milliseconds to wait before hiding the tooltip on mouseout.",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "for",
+                "description": "ID of the element that triggers the tooltip on hover or focus.",
+                "type": "string"
+              },
+              {
+                "name": "noArrow",
+                "description": "Hide the arrow pointing toward the tooltip target.",
+                "type": "boolean"
+              },
+              {
+                "name": "open",
+                "description": "Indicates whether the tooltip is visible or not.",
+                "type": "boolean"
+              },
+              {
+                "name": "placement",
+                "description": "Sets the placement of the tooltip relative to its target.\n\nThe tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.",
+                "type": "'top' | 'right' | 'bottom' | 'left'"
+              },
+              {
+                "name": "showDelay",
+                "description": "Milliseconds to wait before showing the tooltip on hover.\n\nKeep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.\n\nFocusing the target element shows the tooltip immediately.",
+                "type": "number"
+              },
+              {
+                "name": "hideDelay",
+                "description": "Milliseconds to wait before hiding the tooltip on mouseout.",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
         }
       ]
     },
@@ -2852,6 +2938,7 @@
         { "name": "--w-c-modal-max-height" },
         { "name": "--w-c-modal-min-height" },
         { "name": "--w-c-modal-translate-distance" },
+        { "name": "--w-c-modal-padding-bottom" },
         { "name": "--w-c-modal-width" },
         {
           "name": "--w-c-modal-footer-gap",