srcdev-nuxt-components 9.0.3 → 9.0.5

package/app/components/01.atoms/text-blocks/link-text/stories/LinkText.stories.ts

@@ -0,0 +1,140 @@
+import LinkText from "../LinkText.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof LinkText> = {
+  title: "Atoms/Text Blocks/LinkText",
+  component: LinkText,
+  argTypes: {
+    to: {
+      control: "text",
+      description: "Link destination (internal path or external URL)",
+    },
+    linkText: {
+      control: "text",
+      description: "Visible link label",
+    },
+    external: {
+      control: "boolean",
+      description: "Force external link handling",
+      defaultValue: false,
+    },
+    target: {
+      control: { type: "select" },
+      options: [undefined, "_blank", "_self"],
+      description: "Link target attribute",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional classes",
+      defaultValue: [],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LinkText>;
+
+export const Default: Story = {
+  args: {
+    to: "/",
+    linkText: "Read More",
+    external: false,
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { LinkText },
+    setup() {
+      return { args };
+    },
+    template: `<LinkText v-bind="args" />`,
+  }),
+};
+
+export const WithLeftIcon: Story = {
+  args: {
+    to: "/",
+    linkText: "Go Back",
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { LinkText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <LinkText v-bind="args">
+        <template #left>
+          <Icon name="lucide:arrow-left" />
+        </template>
+      </LinkText>
+    `,
+  }),
+};
+
+export const WithRightIcon: Story = {
+  args: {
+    to: "/",
+    linkText: "Learn More",
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { LinkText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <LinkText v-bind="args">
+        <template #right>
+          <Icon name="lucide:arrow-right" />
+        </template>
+      </LinkText>
+    `,
+  }),
+};
+
+export const WithBothIcons: Story = {
+  args: {
+    to: "/",
+    linkText: "Explore",
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { LinkText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <LinkText v-bind="args">
+        <template #left>
+          <Icon name="lucide:sparkles" />
+        </template>
+        <template #right>
+          <Icon name="lucide:arrow-right" />
+        </template>
+      </LinkText>
+    `,
+  }),
+};
+
+export const ExternalLink: Story = {
+  args: {
+    to: "https://nuxt.com",
+    linkText: "Nuxt Docs",
+    external: true,
+    target: "_blank",
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { LinkText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <LinkText v-bind="args">
+        <template #right>
+          <Icon name="lucide:external-link" />
+        </template>
+      </LinkText>
+    `,
+  }),
+};

package/app/components/01.atoms/text-blocks/link-text/tests/LinkText.spec.ts

@@ -0,0 +1,168 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import LinkText from "../LinkText.vue";
+
+describe("LinkText", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/about", linkText: "About Us" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure with default props", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/about", linkText: "About Us" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with left slot", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/about", linkText: "About Us" },
+      slots: { left: "<svg data-testid='icon-left' />" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with right slot", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/about", linkText: "About Us" },
+      slots: { right: "<svg data-testid='icon-right' />" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with both slots", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/about", linkText: "About Us" },
+      slots: {
+        left: "<svg data-testid='icon-left' />",
+        right: "<svg data-testid='icon-right' />",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with all props set", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: {
+        to: "https://example.com",
+        linkText: "Visit Us",
+        external: true,
+        target: "_blank",
+        styleClassPassthrough: ["custom-class"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Base class ──────────────────────────────────────────────────────────
+
+  it("always has the link-text class", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "Home" },
+    });
+    expect(wrapper.classes()).toContain("link-text");
+  });
+
+  // ─── linkText ────────────────────────────────────────────────────────────
+
+  it("renders the linkText in a label span", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "Read More" },
+    });
+    expect(wrapper.find(".link-text__label").text()).toBe("Read More");
+  });
+
+  it("renders linkText with special characters", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "Édition & Co." },
+    });
+    expect(wrapper.find(".link-text__label").text()).toBe("Édition & Co.");
+  });
+
+  // ─── Slots ───────────────────────────────────────────────────────────────
+
+  it("renders no icon spans when no slots provided", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "No Icons" },
+    });
+    expect(wrapper.find(".link-text__icon--left").exists()).toBe(false);
+    expect(wrapper.find(".link-text__icon--right").exists()).toBe(false);
+  });
+
+  it("renders left icon span when left slot is provided", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "With Left Icon" },
+      slots: { left: "<svg />" },
+    });
+    expect(wrapper.find(".link-text__icon--left").exists()).toBe(true);
+    expect(wrapper.find(".link-text__icon--right").exists()).toBe(false);
+  });
+
+  it("renders right icon span when right slot is provided", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "With Right Icon" },
+      slots: { right: "<svg />" },
+    });
+    expect(wrapper.find(".link-text__icon--left").exists()).toBe(false);
+    expect(wrapper.find(".link-text__icon--right").exists()).toBe(true);
+  });
+
+  it("renders both icon spans when both slots are provided", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "Both Icons" },
+      slots: { left: "<svg />", right: "<svg />" },
+    });
+    expect(wrapper.find(".link-text__icon--left").exists()).toBe(true);
+    expect(wrapper.find(".link-text__icon--right").exists()).toBe(true);
+  });
+
+  // ─── Props ───────────────────────────────────────────────────────────────
+
+  it("passes target prop to NuxtLink", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "https://example.com", linkText: "External", target: "_blank" },
+    });
+    expect(wrapper.attributes("target")).toBe("_blank");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a styleClassPassthrough array", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: {
+        to: "/",
+        linkText: "Styled",
+        styleClassPassthrough: ["class-a", "class-b"],
+      },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "Styled", styleClassPassthrough: "solo-class" },
+    });
+    expect(wrapper.classes()).toContain("solo-class");
+  });
+
+  // ─── DOM order ───────────────────────────────────────────────────────────
+
+  it("renders left icon before label and right icon after label", async () => {
+    const wrapper = await mountSuspended(LinkText, {
+      props: { to: "/", linkText: "Ordered" },
+      slots: { left: "<span class='l' />", right: "<span class='r' />" },
+    });
+    const children = wrapper.element.children;
+    expect(children[0].classList.contains("link-text__icon--left")).toBe(true);
+    expect(children[1].classList.contains("link-text__label")).toBe(true);
+    expect(children[2].classList.contains("link-text__icon--right")).toBe(true);
+  });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.0.3",
+  "version": "9.0.5",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -33,9 +33,8 @@
     "playwright:update": "SRCDEV_STANDALONE=true npx playwright test --update-snapshots"
   },
   "files": [
+    ".claude/",
     "app/",
-    "types/",
-    "app/types/components/",
     "nuxt.config.ts",
     "types.d.ts"
   ],