srcdev-nuxt-components 9.1.22 → 9.1.24

package/app/components/03.organisms/services/services-grids/tests/ServicesSectionGrid.spec.ts

@@ -0,0 +1,167 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ServicesSectionGrid from "../ServicesSectionGrid.vue";
+import type { Service } from "~/types/types.services";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const makeService = (slug: string, title: string): Service => ({
+  slug,
+  title,
+  subtitle: `Subtitle for ${title}`,
+  price: "£50",
+  duration: "60 mins",
+  image: `/images/${slug}.jpg`,
+  shortDescription: `Short description for ${title}.`,
+  longDescription: "Long description.",
+  heroHeading: [{ text: title, styleClass: "normal" }],
+  whatIsIt: "What this service is.",
+  process: ["Step one"],
+  idealFor: ["Everyone"],
+  maintenance: "Maintenance advice.",
+  faqs: [{ question: "A question?", answer: "An answer." }],
+  seoTitle: title,
+  seoDescription: `SEO description for ${title}.`,
+});
+
+const mockServices: Service[] = [
+  makeService("locs-installation", "Locs Installation"),
+  makeService("locs-retwist", "Locs Retwist"),
+  makeService("colour-treatment", "Colour Treatment"),
+];
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ServicesSectionGrid", () => {
+  // ─── Mount ─────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ───────────────────────────────────────────────────────
+
+  it("has services-grid class on root", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.classes()).toContain("services-grid");
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders the tag prop as the root element", async () => {
+    for (const tag of ["section", "main"] as const) {
+      const wrapper = await mountSuspended(ServicesSectionGrid, {
+        props: { servicesData: mockServices, tag },
+      });
+      expect(wrapper.element.tagName).toBe(tag.toUpperCase());
+    }
+  });
+
+  // ─── Children ───────────────────────────────────────────────────────────
+
+  it("renders the correct number of service sections", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.findAll(".services-section")).toHaveLength(mockServices.length);
+  });
+
+  it("renders no sections when servicesData is empty", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: [] },
+    });
+    expect(wrapper.findAll(".services-section")).toHaveLength(0);
+  });
+
+  it("renders a single section correctly", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: [mockServices[0]!] },
+    });
+    expect(wrapper.findAll(".services-section")).toHaveLength(1);
+  });
+
+  // ─── useAlternateReverse ────────────────────────────────────────────────
+
+  it("does not apply reverse to any section by default", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices },
+    });
+    wrapper.findAll(".services-section__grid").forEach((grid) => {
+      expect(grid.classes()).not.toContain("services-section__grid--reverse");
+    });
+  });
+
+  it("applies reverse to odd-indexed sections when useAlternateReverse is true", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices, useAlternateReverse: true },
+    });
+    const grids = wrapper.findAll(".services-section__grid");
+    expect(grids[0]?.classes()).not.toContain("services-section__grid--reverse"); // index 0 — even
+    expect(grids[1]?.classes()).toContain("services-section__grid--reverse"); // index 1 — odd
+    expect(grids[2]?.classes()).not.toContain("services-section__grid--reverse"); // index 2 — even
+  });
+
+  // ─── Slots ─────────────────────────────────────────────────────────────
+
+  it("renders summary-link slot content in each section", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices },
+      slots: {
+        "summary-link": '<a class="test-link" href="/services/test">View service</a>',
+      },
+    });
+    expect(wrapper.findAll(".test-link")).toHaveLength(mockServices.length);
+  });
+
+  it("renders nothing in summary-link when slot is not provided", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: [mockServices[0]!] },
+    });
+    // isSummary=true, so summary-link slot is rendered — but empty since no content was provided
+    expect(wrapper.find(".test-link").exists()).toBe(false);
+  });
+
+  // ─── styleClassPassthrough ──────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices, styleClassPassthrough: "custom-grid" },
+    });
+    expect(wrapper.classes()).toContain("custom-grid");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(ServicesSectionGrid, {
+      props: { servicesData: mockServices, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap

@@ -0,0 +1,42 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
+"<div class="services-card-grid">
+  <div class="services-card">
+    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
+    <div class="eyebrow-text large">Subtitle for Locs Installation</div>
+    <h2 class="hero-text heading axis-horizontal">
+      <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
+    </h2>
+    <div class="description">Short description for Locs Installation.</div><a href="/ui/services/services-section/locs-installation" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+      <!--v-if-->
+      <!--v-if--><span class="button-text">Enquire about Locs Installation</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </a>
+  </div>
+  <div class="services-card">
+    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+    <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
+    <h2 class="hero-text heading axis-horizontal">
+      <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
+    </h2>
+    <div class="description">Short description for Locs Retwist.</div><a href="/ui/services/services-section/locs-retwist" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+      <!--v-if-->
+      <!--v-if--><span class="button-text">Enquire about Locs Retwist</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </a>
+  </div>
+  <div class="services-card">
+    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+    <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
+    <h2 class="hero-text heading axis-horizontal">
+      <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
+    </h2>
+    <div class="description">Short description for Colour Treatment.</div><a href="/ui/services/services-section/colour-treatment" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+      <!--v-if-->
+      <!--v-if--><span class="button-text">Enquire about Colour Treatment</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </a>
+  </div>
+</div>"
+`;

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesSectionGrid.spec.ts.snap

@@ -0,0 +1,87 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServicesSectionGrid > renders correct HTML structure 1`] = `
+"<div class="services-grid">
+  <div class="services-section">
+    <div class="services-section__grid">
+      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="info-wrapper is-summary align-center">
+        <div class="eyebrow-text large">Subtitle for Locs Installation</div>
+        <h2 class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
+        </h2>
+        <div class="price-duration">
+          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline decorator" aria-hidden="true"></span><span>60 mins</span></div>
+          <div class="flex-row"><span class="iconify i-mdi:currency-gbp decorator" aria-hidden="true"></span><span>£50</span></div>
+        </div>
+        <!--v-if-->
+        <!--v-if-->
+        <p class="page-body-normal">What this service is.</p>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </div>
+  <div class="services-section">
+    <div class="services-section__grid">
+      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="info-wrapper is-summary align-center">
+        <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
+        <h2 class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
+        </h2>
+        <div class="price-duration">
+          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline decorator" aria-hidden="true"></span><span>60 mins</span></div>
+          <div class="flex-row"><span class="iconify i-mdi:currency-gbp decorator" aria-hidden="true"></span><span>£50</span></div>
+        </div>
+        <!--v-if-->
+        <!--v-if-->
+        <p class="page-body-normal">What this service is.</p>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </div>
+  <div class="services-section">
+    <div class="services-section__grid">
+      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="info-wrapper is-summary align-center">
+        <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
+        <h2 class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
+        </h2>
+        <div class="price-duration">
+          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline decorator" aria-hidden="true"></span><span>60 mins</span></div>
+          <div class="flex-row"><span class="iconify i-mdi:currency-gbp decorator" aria-hidden="true"></span><span>£50</span></div>
+        </div>
+        <!--v-if-->
+        <!--v-if-->
+        <p class="page-body-normal">What this service is.</p>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/03.organisms/services/services-section/ServicesSection.vue

@@ -20,11 +20,11 @@
 
         <div class="price-duration">
           <div class="flex-row">
-            <Icon name="mdi:clock-time-four-outline" class="decorator" />
+            <Icon :name="durationIcon" class="decorator" />
             <span>{{ serviceData.duration }}</span>
           </div>
           <div class="flex-row">
-            <Icon name="mdi:currency-gbp" class="decorator" />
+            <Icon :name="priceIcon" class="decorator" />
             <span>{{ serviceData.price }}</span>
           </div>
         </div>
@@ -150,6 +150,8 @@ interface Props {
   isSummary?: boolean;
   summaryAlignment?: "start" | "center" | "end";
   reverse?: boolean;
+  durationIcon?: string;
+  priceIcon?: string;
   styleClassPassthrough?: string | string[];
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -158,6 +160,8 @@ const props = withDefaults(defineProps<Props>(), {
   index: 0,
   isSummary: false,
   summaryAlignment: "center",
+  durationIcon: "mdi:clock-time-four-outline",
+  priceIcon: "mdi:currency-gbp",
   styleClassPassthrough: () => [],
 });
 

package/app/components/03.organisms/services/services-section/stories/ServicesSection.stories.ts

@@ -0,0 +1,214 @@
+import ServicesSection from "../ServicesSection.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { Service } from "~/types/types.services";
+
+const meta: Meta<typeof ServicesSection> = {
+  title: "Organisms/Services/Services Section",
+  component: ServicesSection,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "HTML element rendered as the root",
+    },
+    headerTag: {
+      control: { type: "select" },
+      options: ["h1", "h2", "h3"],
+      description: "Heading element used for the service title",
+    },
+    isSummary: {
+      control: { type: "boolean" },
+      description: "Summary mode — compact view with summary-link slot",
+    },
+    summaryAlignment: {
+      control: { type: "select" },
+      options: ["start", "center", "end"],
+      description: "Vertical alignment of the info column in summary mode",
+    },
+    reverse: {
+      control: { type: "boolean" },
+      description: "Swap image and content columns",
+    },
+    durationIcon: {
+      control: { type: "text" },
+      description: "Icon name for the duration row (any Iconify icon)",
+    },
+    priceIcon: {
+      control: { type: "text" },
+      description: "Icon name for the price row (any Iconify icon)",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    tag: "section",
+    headerTag: "h2",
+    isSummary: false,
+    summaryAlignment: "center",
+    reverse: false,
+    durationIcon: "mdi:clock-time-four-outline",
+    priceIcon: "mdi:currency-gbp",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renders a single service as a two-column section: image on one side, detailed content on the other. Two modes: summary (compact, with navigation slot) and full (complete content with CTA slot). Icon names for the price/duration row are configurable via `durationIcon` and `priceIcon` props.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServicesSection>;
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const sampleService: Service = {
+  slug: "locs-installation",
+  title: "Locs Installation",
+  subtitle: "Start your loc journey",
+  price: "£120",
+  duration: "3–4 hours",
+  image: "https://picsum.photos/seed/locs/800/600",
+  shortDescription: "Professional loc installation tailored to your hair type.",
+  longDescription:
+    "Our loc installation service covers everything from initial consultation through to the finished style. We work with all hair types and lengths to create beautiful, long-lasting locs.",
+  heroHeading: [
+    { text: "Why choose ", styleClass: "normal" },
+    { text: "locs?", styleClass: "accent" },
+  ],
+  whatIsIt:
+    "Locs are a protective hairstyle formed by allowing hair to naturally matt and coil over time. They require minimal daily maintenance and are suitable for all hair types.",
+  process: [
+    "Consultation to assess hair type and length",
+    "Scalp preparation and cleanse",
+    "Sectioning and palm-rolling",
+    "Drying and finishing",
+  ],
+  idealFor: [
+    "Anyone looking for a low-maintenance protective style",
+    "Those with natural hair wanting a permanent style",
+    "People seeking a versatile long-term hairstyle",
+  ],
+  maintenance:
+    "Re-twist every 4–6 weeks to maintain neat roots. Keep scalp moisturised and protect hair at night with a satin bonnet.",
+  faqs: [
+    {
+      question: "How long do locs take to mature?",
+      answer: "Locs typically take 12–18 months to fully mature depending on hair type and texture.",
+    },
+    {
+      question: "Can I wash my locs?",
+      answer: "Yes — regular washing is encouraged. We recommend a residue-free shampoo every 1–2 weeks.",
+    },
+  ],
+  seoTitle: "Locs Installation | Professional Hair Locs Service",
+  seoDescription:
+    "Professional locs installation service. Book a consultation today and start your loc journey with an experienced stylist.",
+};
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const FullMode: Story = {
+  name: "Full Mode",
+  render: (args) => ({
+    components: { ServicesSection },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <ServicesSection v-bind="args" :service-data="sampleService">
+        <template #cta>
+          <button style="margin-top:1.6rem;padding:1.2rem 2.4rem;background:#333;color:#fff;border:none;border-radius:0.4rem;cursor:pointer;">
+            Book Now
+          </button>
+        </template>
+      </ServicesSection>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Full mode (isSummary: false) — renders all content including process, ideal-for, FAQs, and the CTA GlassPanel.",
+      },
+    },
+  },
+};
+
+export const SummaryMode: Story = {
+  name: "Summary Mode",
+  args: {
+    isSummary: true,
+  },
+  render: (args) => ({
+    components: { ServicesSection },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <ServicesSection v-bind="args" :service-data="sampleService">
+        <template #summary-link="{ serviceData }">
+          <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+            More about {{ serviceData.title }} →
+          </a>
+        </template>
+      </ServicesSection>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Summary mode — compact view with eyebrow, title, price/duration, whatIsIt, and summary-link slot.",
+      },
+    },
+  },
+};
+
+export const Reversed: Story = {
+  name: "Reversed Layout",
+  args: {
+    reverse: true,
+  },
+  render: (args) => ({
+    components: { ServicesSection },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `<ServicesSection v-bind="args" :service-data="sampleService" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Image on the right, content on the left — use on alternating items in a list.",
+      },
+    },
+  },
+};
+
+export const CustomIcons: Story = {
+  name: "Custom Icons",
+  args: {
+    durationIcon: "mdi:timer-outline",
+    priceIcon: "mdi:currency-eur",
+  },
+  render: (args) => ({
+    components: { ServicesSection },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `<ServicesSection v-bind="args" :service-data="sampleService" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Custom icon names passed via durationIcon and priceIcon props — useful when the consuming app uses a different currency or wants a different clock style.",
+      },
+    },
+  },
+};