srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/components/02.molecules/contact-section/stories/ContactSection.stories.ts

@@ -0,0 +1,197 @@
+import ContactSection from "../tests/ContactSection.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof ContactSection> = {
+  title: "Molecules/ContactSection",
+  component: ContactSection,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "HTML element to render as the root",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    tag: "div",
+    styleClassPassthrough: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContactSection>;
+
+// ─── Stories ─────────────────────────────────────────────────────────────────
+
+/** Default — three info items with default slot fallback content and no form. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { ContactSection },
+    setup() {
+      return { args };
+    },
+    template: `<ContactSection v-bind="args" />`,
+  }),
+};
+
+/** With form — a contact form in the form slot alongside the info items. */
+export const WithForm: Story = {
+  name: "With Contact Form",
+  render: (args) => ({
+    components: { ContactSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContactSection v-bind="args">
+        <template #item-0>
+          <div>
+            <strong>Get in touch</strong>
+            <p class="page-body-normal">We'd love to hear from you. Fill in the form and we'll get back to you within one business day.</p>
+          </div>
+        </template>
+        <template #item-1>
+          <div>
+            <strong>Email us</strong>
+            <p class="page-body-normal"><a href="mailto:hello@example.com">hello@example.com</a></p>
+          </div>
+        </template>
+        <template #item-2>
+          <div>
+            <strong>Call us</strong>
+            <p class="page-body-normal"><a href="tel:+441234567890">+44 1234 567 890</a> — Monday to Friday, 9am–5pm</p>
+          </div>
+        </template>
+        <template #form>
+          <form style="display:flex;flex-direction:column;gap:1rem;">
+            <div style="display:flex;flex-direction:column;gap:0.25rem;">
+              <label for="name">Name</label>
+              <input id="name" type="text" placeholder="Your name" style="padding:0.5rem;border:1px solid #ccc;border-radius:0.25rem;" />
+            </div>
+            <div style="display:flex;flex-direction:column;gap:0.25rem;">
+              <label for="email">Email</label>
+              <input id="email" type="email" placeholder="your@email.com" style="padding:0.5rem;border:1px solid #ccc;border-radius:0.25rem;" />
+            </div>
+            <div style="display:flex;flex-direction:column;gap:0.25rem;">
+              <label for="message">Message</label>
+              <textarea id="message" rows="5" placeholder="How can we help?" style="padding:0.5rem;border:1px solid #ccc;border-radius:0.25rem;resize:vertical;"></textarea>
+            </div>
+            <button type="submit" style="padding:0.75rem 1.5rem;background:#111;color:#fff;border:none;border-radius:0.25rem;cursor:pointer;">Send message</button>
+          </form>
+        </template>
+      </ContactSection>
+    `,
+  }),
+};
+
+/** With custom indicators — icons alongside each info item. */
+export const WithCustomIndicators: Story = {
+  name: "With Custom Indicators",
+  render: (args) => ({
+    components: { ContactSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContactSection v-bind="args">
+        <template #indicator-0>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+          </svg>
+        </template>
+        <template #item-0>
+          <div>
+            <strong>Location</strong>
+            <p class="page-body-normal">123 High Street, Bath, BA1 1AA</p>
+          </div>
+        </template>
+        <template #indicator-1>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
+            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.26h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 15.92z"/>
+          </svg>
+        </template>
+        <template #item-1>
+          <div>
+            <strong>Phone</strong>
+            <p class="page-body-normal"><a href="tel:+441234567890">+44 1234 567 890</a></p>
+          </div>
+        </template>
+        <template #indicator-2>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
+            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
+          </svg>
+        </template>
+        <template #item-2>
+          <div>
+            <strong>Email</strong>
+            <p class="page-body-normal"><a href="mailto:hello@example.com">hello@example.com</a></p>
+          </div>
+        </template>
+        <template #form>
+          <form style="display:flex;flex-direction:column;gap:1rem;">
+            <div style="display:flex;flex-direction:column;gap:0.25rem;">
+              <label for="name2">Name</label>
+              <input id="name2" type="text" placeholder="Your name" style="padding:0.5rem;border:1px solid #ccc;border-radius:0.25rem;" />
+            </div>
+            <div style="display:flex;flex-direction:column;gap:0.25rem;">
+              <label for="message2">Message</label>
+              <textarea id="message2" rows="5" placeholder="How can we help?" style="padding:0.5rem;border:1px solid #ccc;border-radius:0.25rem;resize:vertical;"></textarea>
+            </div>
+            <button type="submit" style="padding:0.75rem 1.5rem;background:#111;color:#fff;border:none;border-radius:0.25rem;cursor:pointer;">Send message</button>
+          </form>
+        </template>
+      </ContactSection>
+    `,
+  }),
+};
+
+/** As section tag — renders the root as a semantic section element. */
+export const AsSectionTag: Story = {
+  name: "As section Tag",
+  args: {
+    tag: "section",
+  },
+  render: (args) => ({
+    components: { ContactSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContactSection v-bind="args">
+        <template #item-0>
+          <p class="page-body-normal">Contact info item one.</p>
+        </template>
+        <template #item-1>
+          <p class="page-body-normal">Contact info item two.</p>
+        </template>
+        <template #item-2>
+          <p class="page-body-normal">Contact info item three.</p>
+        </template>
+      </ContactSection>
+    `,
+  }),
+};
+
+/** With styleClassPassthrough — demonstrates custom classes on the root element. */
+export const WithStyleClassPassthrough: Story = {
+  name: "With styleClassPassthrough",
+  args: {
+    styleClassPassthrough: ["custom-class", "another-class"],
+  },
+  render: (args) => ({
+    components: { ContactSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContactSection v-bind="args">
+        <template #item-0><p class="page-body-normal">Item one</p></template>
+        <template #item-1><p class="page-body-normal">Item two</p></template>
+        <template #item-2><p class="page-body-normal">Item three</p></template>
+      </ContactSection>
+    `,
+  }),
+};

package/app/components/02.molecules/contact-section/tests/ContactSection.spec.ts

@@ -0,0 +1,196 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ContactSection from "./ContactSection.vue";
+
+describe("ContactSection", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure with default props", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      props: { styleClassPassthrough: ["custom-class", "another-class"] },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with form slot", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      slots: { form: '<form><input type="text" /></form>' },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Tag rendering ───────────────────────────────────────────────────────
+
+  it("renders as <div> by default", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("renders with the correct tag when tag prop is provided", async () => {
+    for (const tag of ["section", "article", "main"] as const) {
+      const wrapper = await mountSuspended(ContactSection, { props: { tag } });
+      expect(wrapper.element.tagName.toLowerCase()).toBe(tag);
+    }
+  });
+
+  // ─── Base classes ────────────────────────────────────────────────────────
+
+  it("always has the contact-section class", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.classes()).toContain("contact-section");
+  });
+
+  // ─── Structure ───────────────────────────────────────────────────────────
+
+  it("renders contact-section-inner wrapper", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.find(".contact-section-inner").exists()).toBe(true);
+  });
+
+  it("renders contact-section-info wrapper", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.find(".contact-section-info").exists()).toBe(true);
+  });
+
+  it("renders contact-section-form wrapper", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.find(".contact-section-form").exists()).toBe(true);
+  });
+
+  // ─── Default slot content ─────────────────────────────────────────────────
+
+  it("renders default content for item-0 slot", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.html()).toContain("Default slot content for item 1");
+  });
+
+  it("renders default content for item-1 slot", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.html()).toContain("Default slot content for item 2");
+  });
+
+  it("renders default content for item-2 slot", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.html()).toContain("Default slot content for item 3");
+  });
+
+  // ─── Item slots ───────────────────────────────────────────────────────────
+
+  it("renders custom item-0 slot content", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      slots: { "item-0": "<span>Custom item 1</span>" },
+    });
+    expect(wrapper.html()).toContain("Custom item 1");
+    expect(wrapper.html()).not.toContain("Default slot content for item 1");
+  });
+
+  it("renders custom item-1 slot content", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      slots: { "item-1": "<span>Custom item 2</span>" },
+    });
+    expect(wrapper.html()).toContain("Custom item 2");
+    expect(wrapper.html()).not.toContain("Default slot content for item 2");
+  });
+
+  it("renders custom item-2 slot content", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      slots: { "item-2": "<span>Custom item 3</span>" },
+    });
+    expect(wrapper.html()).toContain("Custom item 3");
+    expect(wrapper.html()).not.toContain("Default slot content for item 3");
+  });
+
+  // ─── Indicator slots ──────────────────────────────────────────────────────
+
+  it("renders indicator-0 slot content", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      slots: { "indicator-0": '<span class="icon-0">★</span>' },
+    });
+    expect(wrapper.find(".icon-0").exists()).toBe(true);
+  });
+
+  it("renders indicator-1 slot content", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      slots: { "indicator-1": '<span class="icon-1">★</span>' },
+    });
+    expect(wrapper.find(".icon-1").exists()).toBe(true);
+  });
+
+  it("renders indicator-2 slot content", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      slots: { "indicator-2": '<span class="icon-2">★</span>' },
+    });
+    expect(wrapper.find(".icon-2").exists()).toBe(true);
+  });
+
+  // ─── Form slot ────────────────────────────────────────────────────────────
+
+  it("renders form slot content inside contact-section-form", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      slots: { form: '<form class="test-form"><button>Submit</button></form>' },
+    });
+    const formWrapper = wrapper.find(".contact-section-form");
+    expect(formWrapper.find(".test-form").exists()).toBe(true);
+    expect(formWrapper.html()).toContain("Submit");
+  });
+
+  it("renders contact-section-form as empty when no form slot provided", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    const formWrapper = wrapper.find(".contact-section-form");
+    expect(formWrapper.find("form").exists()).toBe(false);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      props: { styleClassPassthrough: "my-class" },
+    });
+    expect(wrapper.classes()).toContain("my-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("renders cleanly with no styleClassPassthrough prop", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.classes()).toContain("contact-section");
+  });
+
+  // ─── Combined ─────────────────────────────────────────────────────────────
+
+  it("renders correctly with all props and slots combined", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      props: { tag: "section", styleClassPassthrough: ["combined-class"] },
+      slots: {
+        "indicator-0": '<span class="icon">✓</span>',
+        "item-0": "<span>Step one</span>",
+        "item-1": "<span>Step two</span>",
+        "item-2": "<span>Step three</span>",
+        form: '<form class="contact-form"><button>Send</button></form>',
+      },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("section");
+    expect(wrapper.classes()).toContain("combined-class");
+    expect(wrapper.html()).toContain("Step one");
+    expect(wrapper.find(".contact-form").exists()).toBe(true);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/app/components/02.molecules/contact-section/tests/ContactSection.vue

@@ -0,0 +1,87 @@
+<template>
+  <component :is="tag" class="contact-section" :class="[elementClasses]">
+    <div class="contact-section-inner">
+      <div class="contact-section-info">
+        <StepperList tag="ul" :connected="false" indicator-alignment="top" :item-count="3">
+          <template #indicator-0>
+            <slot name="indicator-0"></slot>
+          </template>
+          <template #item-0>
+            <slot name="item-0">
+              <p class="page-body-normal">Default slot content for item 1</p>
+            </slot>
+          </template>
+
+          <template #indicator-1>
+            <slot name="indicator-1"></slot>
+          </template>
+          <template #item-1>
+            <slot name="item-1">
+              <p class="page-body-normal">Default slot content for item 2</p>
+            </slot>
+          </template>
+
+          <template #indicator-2>
+            <slot name="indicator-2"></slot>
+          </template>
+          <template #item-2>
+            <slot name="item-2">
+              <p class="page-body-normal">Default slot content for item 3</p>
+            </slot>
+          </template>
+        </StepperList>
+      </div>
+      <div class="contact-section-form">
+        <slot name="form"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+.contact-section {
+  .contact-section-inner {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    align-items: start;
+
+    @media (width >= 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .contact-section-info {
+    }
+
+    .contact-section-form {
+      /* outline: 1px solid green; */
+
+      form {
+        /* outline: 1px solid red; */
+      }
+    }
+  }
+}
+}
+</style>

package/app/components/02.molecules/contact-section/tests/__snapshots__/ContactSection.spec.ts.snap

@@ -0,0 +1,119 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ContactSection > renders correct HTML structure with default props 1`] = `
+"<div class="contact-section">
+  <div class="contact-section-inner">
+    <div class="contact-section-info">
+      <ul class="stepper-list">
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 1</p>
+          </div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 2</p>
+          </div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 3</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="contact-section-form"></div>
+  </div>
+</div>"
+`;
+
+exports[`ContactSection > renders correct HTML structure with form slot 1`] = `
+"<div class="contact-section">
+  <div class="contact-section-inner">
+    <div class="contact-section-info">
+      <ul class="stepper-list">
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 1</p>
+          </div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 2</p>
+          </div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 3</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="contact-section-form">
+      <form><input type="text"></form>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`ContactSection > renders correct HTML structure with styleClassPassthrough 1`] = `
+"<div class="contact-section custom-class another-class">
+  <div class="contact-section-inner">
+    <div class="contact-section-info">
+      <ul class="stepper-list">
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 1</p>
+          </div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 2</p>
+          </div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div>
+            <p class="page-body-normal">Default slot content for item 3</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="contact-section-form"></div>
+  </div>
+</div>"
+`;
+
+exports[`ContactSection > renders correctly with all props and slots combined 1`] = `
+"<section class="contact-section combined-class">
+  <div class="contact-section-inner">
+    <div class="contact-section-info">
+      <ul class="stepper-list">
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"><span class="icon">✓</span></div>
+          <div><span>Step one</span></div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div><span>Step two</span></div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"></div>
+          <div><span>Step three</span></div>
+        </li>
+      </ul>
+    </div>
+    <div class="contact-section-form">
+      <form class="contact-form"><button>Send</button></form>
+    </div>
+  </div>
+</section>"
+`;