feat(evo-web): infotip, tooltip, tourtip

package.json

@@ -62,7 +62,7 @@
     "@marko/run": "^0.9.4",
     "@marko/run-adapter-static": "^2.0.4",
     "@marko/testing-library": "^6",
-    "@marko/type-check": "^2.1.18",
+    "@marko/type-check": "^2.1.26",
     "@marko/vite": "^5.4.2",
     "@mdx-js/mdx": "^3.1.1",
     "@octokit/rest": "^22.0.0",

packages/evo-marko/package.json

@@ -57,7 +57,7 @@
     "shaka-player": "4.16.12"
   },
   "devDependencies": {
-    "marko": "^6.0.138"
+    "marko": "^6.0.140"
   },
   "peerDependencies": {
     "@ebay/skin": "^19.2.0",

packages/evo-marko/src/tags/evo-infotip/examples/controlled.marko

@@ -0,0 +1,14 @@
+<let/open=false>
+
+<evo-button onClick() { open = !open; }>
+    Toggle Infotip
+</evo-button>
+
+<evo-infotip
+    ...input
+    open:=open
+    a11yIconText="Help"
+    a11yCloseText="Dismiss">
+    <@heading>Controlled</@heading>
+    This infotip is controlled externally.
+</evo-infotip>

packages/evo-marko/src/tags/evo-infotip/examples/custom-icon.marko

@@ -0,0 +1,10 @@
+<evo-infotip
+    ...input
+    a11yIconText="Help with shipping"
+    a11yCloseText="Dismiss">
+    <@icon>
+        <evo-icon-help-24/>
+    </@icon>
+    <@heading>Shipping Info</@heading>
+    Free shipping on orders over $50.
+</evo-infotip>

packages/evo-marko/src/tags/evo-infotip/examples/default.marko

@@ -0,0 +1,7 @@
+<evo-infotip
+    ...input
+    a11yIconText="Important information"
+    a11yCloseText="Dismiss infotip">
+    <@heading>Important</@heading>
+    This is some important info about this feature.
+</evo-infotip>

packages/evo-marko/src/tags/evo-infotip/examples/disabled.marko

@@ -0,0 +1,8 @@
+<evo-infotip
+    ...input
+    disabled
+    a11yIconText="Help"
+    a11yCloseText="Dismiss">
+    <@heading>Disabled</@heading>
+    This infotip is disabled.
+</evo-infotip>

packages/evo-marko/src/tags/evo-infotip/examples/in-paragraph.marko

@@ -0,0 +1,10 @@
+<p>
+    Here is some text with an info icon
+    <evo-infotip
+        ...input
+        a11yIconText="More information"
+        a11yCloseText="Dismiss">
+        This provides additional context about the text.
+    </evo-infotip>
+    and the paragraph continues.
+</p>

packages/evo-marko/src/tags/evo-infotip/index.marko

@@ -0,0 +1,125 @@
+import type { Input as ExpanderInput } from "<evo-expander>";
+
+export interface Input extends Marko.HTML.Span {
+    open?: boolean;
+    openChange?: (open: boolean) => void;
+    placement?: ExpanderInput["placement"];
+    offset?: number;
+    flip?: boolean;
+    shift?: boolean;
+    inline?: boolean;
+    disabled?: boolean;
+    icon?: Marko.AttrTag<Marko.HTML.Span>;
+    heading?: Marko.AttrTag<
+        Marko.HTML.Span & {
+            as?: Marko.Renderable;
+        }
+    >;
+    /**
+     * The `aria-label` for the infotip trigger button
+     *
+     * English default to be overridden is `"Help"`
+     */
+    a11yIconText: string;
+    /**
+     * The `aria-label` for the close button
+     *
+     * English default to be overridden is `"Dismiss infotip"`
+     */
+    a11yCloseText: string;
+}
+
+<const/{
+    class: inputClass,
+    placement = "bottom" as const,
+    offset: inputOffset,
+    open: inputOpen,
+    openChange,
+    flip,
+    shift,
+    inline,
+    disabled,
+    icon,
+    heading,
+    a11yIconText = "Help",
+    a11yCloseText = "Dismiss infotip",
+    ...htmlInput
+}=input>
+
+<let/open=(inputOpen ?? false) valueChange=openChange>
+
+<id/hostId> // TODO: Remove once we fix Marko TS recursive issue
+<const/$host() { return document.getElementById(hostId)! }>
+<id/overlayId> // TODO: Remove once we fix Marko TS recursive issue
+<const/$overlay() { return document.getElementById(overlayId)! }>
+<id/arrowId> // TODO: Remove once we fix Marko TS recursive issue
+<const/$arrow() { return document.getElementById(arrowId)! }>
+
+<id/headingId=heading?.id as string | undefined>
+
+<evo-expander/expander
+    open=open
+    placement=placement
+    offset=(inputOffset ?? 8)
+    flip=flip
+    shift=shift
+    inline=inline
+    strategy="absolute"
+    host=$host
+    overlay=$overlay
+    arrow=$arrow/>
+
+<span ...htmlInput class=["infotip", inputClass]>
+    <button
+        id=hostId
+        class="infotip__host icon-btn icon-btn--transparent"
+        type="button"
+        disabled=disabled
+        aria-label=a11yIconText
+        aria-expanded=expander.ariaExpanded
+        onClick() {
+            open = !open;
+        }>
+        <if=icon>
+            <${icon}/>
+        </if>
+        <else>
+            <evo-icon-information-16/>
+        </else>
+    </button>
+    <span
+        id=overlayId
+        class="infotip__overlay"
+        style=expander.floatingStyles
+        role="tooltip"
+        aria-labelledby=(heading && headingId)>
+        <span id=arrowId class="infotip__pointer" style=expander.arrowStyles/>
+        <span class="infotip__mask">
+            <span class="infotip__cell">
+                <span class="infotip__content">
+                    <if=heading>
+                        <const/{
+                            as: headingAs = "span",
+                            class: headingClass,
+                            ...htmlHeading
+                        }=heading>
+                        <${headingAs}
+                            ...htmlHeading
+                            class=["infotip__heading", headingClass]
+                            id=headingId/>
+                    </if>
+                    <${input.content}/>
+                </span>
+                <button
+                    aria-label=a11yCloseText
+                    class="icon-btn icon-btn--transparent infotip__close"
+                    type="button"
+                    onClick() {
+                        open = false;
+                    }>
+                    <evo-icon-close-16/>
+                </button>
+            </span>
+        </span>
+    </span>
+</span>

packages/evo-marko/src/tags/evo-infotip/infotip.stories.ts

@@ -0,0 +1,178 @@
+import { buildExtensionTemplate } from "../../common/storybook/utils";
+import DefaultTemplate from "./examples/default.marko";
+import DefaultTemplateCode from "./examples/default.marko?raw";
+import InParagraphTemplate from "./examples/in-paragraph.marko";
+import InParagraphTemplateCode from "./examples/in-paragraph.marko?raw";
+import DisabledTemplate from "./examples/disabled.marko";
+import DisabledTemplateCode from "./examples/disabled.marko?raw";
+import CustomIconTemplate from "./examples/custom-icon.marko";
+import CustomIconTemplateCode from "./examples/custom-icon.marko?raw";
+import ControlledTemplate from "./examples/controlled.marko";
+import ControlledTemplateCode from "./examples/controlled.marko?raw";
+import Component from "./index.marko";
+
+export default {
+  title: "notices & tips/evo-infotip",
+  component: Component,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An infotip provides additional information via a clickable info icon button.",
+      },
+    },
+  },
+
+  argTypes: {
+    open: {
+      type: "boolean",
+      control: { type: "boolean" },
+      description: "Whether the infotip is open",
+      table: {
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    openChange: {
+      description:
+        "Used to hoist `open` value with the [controllable](https://markojs.com/docs/explanation/controllable-components) pattern",
+      table: {
+        category: "Events",
+        defaultValue: {
+          summary: "(open: boolean) => void",
+        },
+      },
+    },
+    placement: {
+      control: { type: "select" },
+      options: [
+        "top",
+        "top-start",
+        "top-end",
+        "right",
+        "right-start",
+        "right-end",
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "left",
+        "left-start",
+        "left-end",
+      ],
+      description: "Position of the overlay relative to the trigger button",
+      table: {
+        defaultValue: {
+          summary: "bottom",
+        },
+      },
+    },
+    offset: {
+      control: { type: "number" },
+      description: "Offset distance from the trigger button in pixels",
+      table: {
+        defaultValue: {
+          summary: "8",
+        },
+      },
+    },
+    flip: {
+      type: "boolean",
+      control: { type: "boolean" },
+      description: "Enable automatic flipping when near viewport edge",
+      table: {
+        defaultValue: {
+          summary: "true",
+        },
+      },
+    },
+    shift: {
+      type: "boolean",
+      control: { type: "boolean" },
+      description: "Enable automatic shifting when near viewport edge",
+      table: {
+        defaultValue: {
+          summary: "true",
+        },
+      },
+    },
+    inline: {
+      type: "boolean",
+      control: { type: "boolean" },
+      description: "Enable inline positioning middleware",
+      table: {
+        defaultValue: {
+          summary: "true",
+        },
+      },
+    },
+    disabled: {
+      type: "boolean",
+      control: { type: "boolean" },
+      description: "Disable the trigger button",
+      table: {
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    a11yIconText: {
+      control: { type: "text" },
+      description: "Accessibility label for the trigger button",
+      table: {
+        defaultValue: {
+          summary: "Help",
+        },
+      },
+    },
+    a11yCloseText: {
+      control: { type: "text" },
+      description: "Accessibility label for the close button",
+      table: {
+        defaultValue: {
+          summary: "Dismiss infotip",
+        },
+      },
+    },
+    icon: {
+      name: "@icon",
+      description: "Custom icon to replace the default info icon.",
+      table: {
+        category: "@attribute tags",
+      },
+    },
+    heading: {
+      name: "@heading",
+      description:
+        "Optional heading content. Supports `as` attribute for custom heading element.",
+      table: {
+        category: "@attribute tags",
+      },
+    },
+  },
+};
+
+export const Default = buildExtensionTemplate(
+  DefaultTemplate,
+  DefaultTemplateCode,
+);
+
+export const InParagraph = buildExtensionTemplate(
+  InParagraphTemplate,
+  InParagraphTemplateCode,
+);
+
+export const Disabled = buildExtensionTemplate(
+  DisabledTemplate,
+  DisabledTemplateCode,
+);
+
+export const CustomIcon = buildExtensionTemplate(
+  CustomIconTemplate,
+  CustomIconTemplateCode,
+);
+
+export const Controlled = buildExtensionTemplate(
+  ControlledTemplate,
+  ControlledTemplateCode,
+);

packages/evo-marko/src/tags/evo-infotip/style.ts

@@ -0,0 +1,2 @@
+import "@ebay/skin/icon-button";
+import "@ebay/skin/infotip";