srcdev-nuxt-components 9.6.12 → 9.6.13

package/app/components/02.molecules/display-tooltip-defined/DisplayTooltipDefined.vue

@@ -1,117 +0,0 @@
-<template>
-  <DisplayTooltip
-    :tooltip-id="tooltipId"
-    :trigger-aria-label="triggerAriaLabel"
-    :style-class-passthrough="styleClassPassthrough"
-  >
-    <template v-if="$slots.triggerContent" #triggerContent>
-      <slot name="triggerContent"></slot>
-    </template>
-    <template #tooltipContent="{ close }">
-      <div class="popover-content-defined">
-        <component
-          :is="contentText.tooltipTitle?.tag"
-          v-if="contentText.tooltipTitle"
-          class="tooltip-title subtitle-sm"
-        >
-          {{ contentText.tooltipTitle.text }}
-        </component>
-        <component :is="contentText.tooltipContent?.tag" v-if="contentText.tooltipContent" class="tooltip-body body-sm">
-          {{ contentText.tooltipContent.text }}
-        </component>
-        <component
-          :is="contentText.tooltipAction?.tag"
-          v-if="contentText.tooltipAction"
-          class="tooltip-action input-value"
-        >
-          {{ contentText.tooltipAction.text }}
-        </component>
-        <button
-          :popovertarget="tooltipId"
-          popovertargetaction="hide"
-          class="display-tooltip-close-button"
-          :aria-label="closeButtonAriaLabel"
-          @click="close"
-        >
-          {{ closeButtonText }}
-        </button>
-      </div>
-    </template>
-  </DisplayTooltip>
-</template>
-
-<script setup lang="ts">
-import type { TooltipContentText } from "~/types/components";
-
-interface Props {
-  tooltipId?: string;
-  contentText?: TooltipContentText;
-  /** aria-label on the trigger button — override for localisation. */
-  triggerAriaLabel?: string;
-  /** Visible text on the close button — override for localisation. */
-  closeButtonText?: string;
-  /** aria-label on the close button — override for localisation. */
-  closeButtonAriaLabel?: string;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  tooltipId: "",
-  contentText: () => ({}),
-  triggerAriaLabel: "Toggle the popover",
-  closeButtonText: "Close",
-  closeButtonAriaLabel: "Close tool tip",
-  styleClassPassthrough: () => [],
-});
-
-const tooltipId = computed(() =>
-  props.tooltipId.length ? `nuxt-tooltip-${props.tooltipId}` : `nuxt-tooltip-${useId()}`
-);
-</script>
-
-<style lang="css">
-@layer components {
-  .display-tooltip-core {
-    .popover-content-defined {
-      display: flex;
-      flex-direction: column;
-      gap: var(--display-tooltip-defined-content-gap, 1.2rem);
-
-      /* margin-block resets below neutralise the UA default margin of whatever tag the consumer
-         picks via contentText.*.tag (e.g. h3/h4 carry their own margin-block) — gap is the only
-         intended spacing mechanism between these three. */
-      .tooltip-title {
-        color: var(--display-tooltip-defined-title-colour, inherit);
-        margin-block: var(--display-tooltip-defined-title-margin-block, 0 0);
-        font-size: var(--display-tooltip-defined-title-font-size, 1.6rem);
-        font-weight: var(--display-tooltip-defined-title-font-weight, 700);
-        line-height: var(--display-tooltip-defined-title-line-height, 120%);
-        letter-spacing: var(--display-tooltip-defined-title-letter-spacing, normal);
-      }
-
-      .tooltip-body {
-        color: var(--display-tooltip-defined-body-colour, inherit);
-        margin-block: var(--display-tooltip-defined-body-margin-block, 0 0);
-        font-size: var(--display-tooltip-defined-body-font-size, 1.3rem);
-        font-weight: var(--display-tooltip-defined-body-font-weight, inherit);
-        line-height: var(--display-tooltip-defined-body-line-height, 140%);
-        letter-spacing: var(--display-tooltip-defined-body-letter-spacing, normal);
-      }
-
-      .tooltip-action {
-        color: var(--display-tooltip-defined-action-colour, inherit);
-        margin-block: var(--display-tooltip-defined-action-margin-block, 0 0);
-        font-size: var(--display-tooltip-defined-action-font-size, 1.4rem);
-        font-weight: var(--display-tooltip-defined-action-font-weight, 700);
-        line-height: var(--display-tooltip-defined-action-line-height, 130%);
-        letter-spacing: var(--display-tooltip-defined-action-letter-spacing, normal);
-      }
-
-      .display-tooltip-close-button {
-        align-self: flex-end;
-        margin-block: var(--display-tooltip-defined-close-button-margin-block, 1.2rem 0);
-      }
-    }
-  }
-}
-</style>

package/app/components/02.molecules/display-tooltip-defined/stories/DisplayTooltipDefined.stories.ts

@@ -1,129 +0,0 @@
-import { ref } from "vue";
-import DisplayTooltipDefined from "../DisplayTooltipDefined.vue";
-import DisplayTooltip from "../../../01.atoms/display-tooltip/DisplayTooltip.vue";
-import { useTooltipsGuide } from "~/composables/useTooltips";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
-import type { TooltipContentText } from "~/types/components";
-
-const contentText: TooltipContentText = {
-  tooltipTitle: { tag: "h4", text: "Free delivery" },
-  tooltipContent: { tag: "p", text: "Orders over £50 qualify for free standard delivery." },
-  tooltipAction: { tag: "span", text: "See delivery policy" },
-};
-
-const meta: Meta<typeof DisplayTooltipDefined> = {
-  title: "Molecules/DisplayTooltipDefined",
-  component: DisplayTooltipDefined,
-  argTypes: {
-    tooltipId: {
-      control: "text",
-      description: "Id used to link the trigger button to the popover. Auto-generated when omitted.",
-      table: { category: "Basic" },
-    },
-    contentText: { table: { disable: true } },
-    styleClassPassthrough: { table: { disable: true } },
-  },
-  args: {
-    contentText,
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Structured title/body/action content variant of DisplayTooltip, plus a built-in close button wired to the popover.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DisplayTooltipDefined>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { DisplayTooltipDefined },
-    setup() {
-      return { args };
-    },
-    template: `<div style="padding: 8rem;"><DisplayTooltipDefined v-bind="args" /></div>`,
-  }),
-};
-
-export const TitleOnly: Story = {
-  args: {
-    contentText: { tooltipTitle: { tag: "h4", text: "Just a title" } },
-  },
-  render: (args) => ({
-    components: { DisplayTooltipDefined },
-    setup() {
-      return { args };
-    },
-    template: `<div style="padding: 8rem;"><DisplayTooltipDefined v-bind="args" /></div>`,
-  }),
-};
-
-export const GuidedTour: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Recreates the deleted `app/pages/ui/tooltips.vue` demo: `useTooltipsGuide` walks a container's `[popover]` elements in DOM order, opening each and waiting for its close button before advancing — the autoplay-through-steps pattern seen on some guide intros. Mixes a `DisplayTooltipDefined` step (its close button relabelled \"Next\" via `closeButtonText`) with a plain `DisplayTooltip` step. A hand-written close button must call the `tooltipContent` slot's `close()` as well as carrying `popovertargetaction=\"hide\"`: the attribute alone does nothing on Safari 16, which has no Popover API. Guide auto-starts 800ms after mount in this story; use \"Run guide again\" to replay it.",
-      },
-    },
-  },
-  render: () => ({
-    components: { DisplayTooltipDefined, DisplayTooltip },
-    setup() {
-      const guideContainer = ref<HTMLElement | null>(null);
-      const { isGuideRunning, restartGuide, currentTooltipIndex, totalPopovers } = useTooltipsGuide(guideContainer, {
-        autoStart: true,
-        startDelay: 800,
-      });
-
-      return { guideContainer, isGuideRunning, restartGuide, currentTooltipIndex, totalPopovers };
-    },
-    template: `
-      <div style="padding: 4rem; display: grid; gap: 2rem; max-width: 48rem;">
-        <div style="display: flex; align-items: center; gap: 1.2rem;">
-          <button @click="restartGuide" :disabled="isGuideRunning" style="padding: 0.6rem 1.2rem;">
-            {{ isGuideRunning ? 'Guide running…' : 'Run guide again' }}
-          </button>
-          <span v-if="isGuideRunning" style="font-size: 1.3rem; color: #666;">
-            Step {{ currentTooltipIndex + 1 }} of {{ totalPopovers }} — click Next (Close on the last step) to advance
-          </span>
-        </div>
-
-        <div ref="guideContainer" style="display: grid; gap: 2rem;">
-          <DisplayTooltipDefined
-            close-button-text="Next"
-            close-button-aria-label="Next step"
-            :content-text="{
-              tooltipTitle: { tag: 'h3', text: 'Step 1' },
-              tooltipContent: { tag: 'p', text: 'This step uses DisplayTooltipDefined — structured title/body/action content plus a built-in close button.' },
-              tooltipAction: { tag: 'p', text: 'Step 1 of 2' },
-            }"
-          >
-            <template #triggerContent>Trigger from DisplayTooltipDefined</template>
-          </DisplayTooltipDefined>
-
-          <DisplayTooltip tooltip-id="guided-tour-step-2">
-            <template #triggerContent>Trigger from plain DisplayTooltip</template>
-            <template #tooltipContent="{ close }">
-              <p>This step uses plain DisplayTooltip — you supply the close button yourself via the tooltipContent slot.</p>
-              <button
-                popovertarget="guided-tour-step-2"
-                popovertargetaction="hide"
-                class="display-tooltip-close-button"
-                style="align-self: flex-end;"
-                aria-label="Close tool tip"
-                @click="close"
-              >
-                Close
-              </button>
-            </template>
-          </DisplayTooltip>
-        </div>
-      </div>
-    `,
-  }),
-};

package/app/components/02.molecules/display-tooltip-defined/tests/DisplayTooltipDefined.spec.ts

@@ -1,85 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import DisplayTooltipDefined from "../DisplayTooltipDefined.vue";
-import type { TooltipContentText } from "~/types/components";
-
-const contentText: TooltipContentText = {
-  tooltipTitle: { tag: "h4", text: "Title" },
-  tooltipContent: { tag: "p", text: "Body copy" },
-  tooltipAction: { tag: "span", text: "Learn more" },
-};
-
-describe("DisplayTooltipDefined", () => {
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined);
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders correct HTML structure", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText, tooltipId: "fixed" } });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("renders the title, body, and action from contentText", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText } });
-    expect(wrapper.find(".tooltip-title").text()).toBe("Title");
-    expect(wrapper.find(".tooltip-body").text()).toBe("Body copy");
-    expect(wrapper.find(".tooltip-action").text()).toBe("Learn more");
-  });
-
-  it("renders each contentText field with its given tag", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText } });
-    expect(wrapper.find(".tooltip-title").element.tagName.toLowerCase()).toBe("h4");
-    expect(wrapper.find(".tooltip-body").element.tagName.toLowerCase()).toBe("p");
-    expect(wrapper.find(".tooltip-action").element.tagName.toLowerCase()).toBe("span");
-  });
-
-  it("omits a field when not present in contentText", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, {
-      props: { contentText: { tooltipTitle: { tag: "h4", text: "Only a title" } } },
-    });
-    expect(wrapper.find(".tooltip-title").exists()).toBe(true);
-    expect(wrapper.find(".tooltip-body").exists()).toBe(false);
-    expect(wrapper.find(".tooltip-action").exists()).toBe(false);
-  });
-
-  it("renders a close button wired to the tooltip id", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { tooltipId: "my-tip" } });
-    const closeButton = wrapper.find(".display-tooltip-close-button");
-    expect(closeButton.attributes("popovertarget")).toBe("nuxt-tooltip-my-tip");
-    expect(closeButton.attributes("popovertargetaction")).toBe("hide");
-  });
-
-  it("renders the triggerContent slot", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, {
-      slots: { triggerContent: "<span class='slot-trigger'>?</span>" },
-    });
-    expect(wrapper.find(".slot-trigger").text()).toBe("?");
-  });
-
-  it("applies styleClassPassthrough classes to the underlying DisplayTooltip", async () => {
-    const wrapper = await mountSuspended(DisplayTooltipDefined, {
-      props: { styleClassPassthrough: ["custom-class"] },
-    });
-    expect(wrapper.classes()).toContain("custom-class");
-  });
-
-  describe("without the Popover API", () => {
-    beforeEach(() => {
-      Object.defineProperty(HTMLElement.prototype, "showPopover", { value: undefined, writable: true, configurable: true });
-    });
-
-    afterEach(() => {
-      delete (HTMLElement.prototype as unknown as Record<string, unknown>)["showPopover"];
-    });
-
-    it("closes from the close button", async () => {
-      const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText } });
-      await wrapper.find(".display-tooltip-trigger-button").trigger("click");
-      expect(wrapper.find(".display-tooltip-popover").classes()).toContain("display-tooltip-popover-open");
-
-      await wrapper.find(".display-tooltip-close-button").trigger("click");
-      expect(wrapper.find(".display-tooltip-popover").classes()).not.toContain("display-tooltip-popover-open");
-    });
-  });
-});

package/app/components/02.molecules/display-tooltip-defined/tests/__snapshots__/DisplayTooltipDefined.spec.ts.snap

@@ -1,17 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`DisplayTooltipDefined > renders correct HTML structure 1`] = `
-"<div class="display-tooltip-core" style="--_anchor-name: --tooltip-anchor-v-0-0-0;">
-  <div class="display-tooltip-trigger-wrapper body-md">
-    <!--v-if--><button popovertarget="nuxt-tooltip-fixed" popovertargetaction="toggle" class="display-tooltip-trigger-button" aria-label="Toggle the popover" aria-expanded="false"><span class="iconify i-fa7-solid:circle-question display-tooltip-trigger-icon" aria-hidden="true"></span></button>
-  </div>
-  <div id="nuxt-tooltip-fixed" popover="" class="display-tooltip-popover">
-    <div class="display-tooltip-popover-content">
-      <div class="popover-content-defined">
-        <h4 class="tooltip-title subtitle-sm">Title</h4>
-        <p class="tooltip-body body-sm">Body copy</p><span class="tooltip-action input-value">Learn more</span><button popovertarget="nuxt-tooltip-fixed" popovertargetaction="hide" class="display-tooltip-close-button" aria-label="Close tool tip">Close</button>
-      </div>
-    </div>
-  </div>
-</div>"
-`;