srcdev-nuxt-components 9.3.10 → 9.3.12

package/app/components/03.organisms/services/service-summary/tests/ServiceSummary.spec.ts

@@ -0,0 +1,210 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ServiceSummary from "../ServiceSummary.vue";
+import type { Service } from "~/types/types.services";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const mockService: Service = {
+  slug: "test-service",
+  category: "hair",
+  title: "Test Service",
+  subtitle: "A subtitle",
+  price: "£50",
+  duration: "60 mins",
+  image: "/images/test.jpg",
+  shortDescription: "Short description",
+  longDescription: "Long description text",
+  heroHeading: [{ text: "A great heading", styleClass: "normal" }],
+  whatIsIt: "What this service is",
+  process: ["Step one", "Step two"],
+  idealFor: ["Person A", "Person B"],
+  maintenance: "Maintenance advice",
+  faqs: [{ question: "FAQ question?", answer: "FAQ answer." }],
+  seoTitle: "SEO Title",
+  seoDescription: "SEO description",
+};
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ServiceSummary", () => {
+  // ─── Mount ─────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ───────────────────────────────────────────────────────
+
+  it("has service-summary class on root", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.classes()).toContain("service-summary");
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders the tag prop as the root element", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  // ─── Aria ───────────────────────────────────────────────────────────────
+
+  it("binds aria-labelledby to the title HeroText's own id when tag is section", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, tag: "section" },
+      attachTo: document.body,
+    });
+    const ariaLabelledby = wrapper.attributes("aria-labelledby");
+    expect(ariaLabelledby).toBeTruthy();
+    expect(document.getElementById(ariaLabelledby!)?.textContent).toContain(mockService.title);
+  });
+
+  // ─── Pills ──────────────────────────────────────────────────────────────
+
+  it("renders duration and price as DisplayPill instances", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    const pills = wrapper.findAll(".display-pill");
+    expect(pills).toHaveLength(2);
+    expect(pills[0]?.text()).toContain(mockService.duration);
+    expect(pills[1]?.text()).toContain(mockService.price);
+  });
+
+  // ─── Service data ───────────────────────────────────────────────────────
+
+  it("renders service duration text", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.duration);
+  });
+
+  it("renders service price text", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.price);
+  });
+
+  it("renders the whatIsIt text", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.whatIsIt);
+  });
+
+  it("does not render process, idealFor, maintenance, or FAQ content", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).not.toContain(mockService.longDescription);
+    expect(wrapper.text()).not.toContain(mockService.maintenance);
+    expect(wrapper.text()).not.toContain(mockService.faqs[0]?.question);
+  });
+
+  // ─── summary-link slot ────────────────────────────────────────────────
+
+  it("renders summary-link slot content", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+      slots: {
+        "summary-link": '<a class="test-link" href="/services/test">View service</a>',
+      },
+    });
+    expect(wrapper.find(".test-link").exists()).toBe(true);
+  });
+
+  it("passes serviceData to the summary-link slot", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+      slots: {
+        "summary-link": `<template #summary-link="{ serviceData }"><a class="test-link">{{ serviceData.title }}</a></template>`,
+      },
+    });
+    expect(wrapper.find(".test-link").text()).toBe(mockService.title);
+  });
+
+  // ─── Reverse ────────────────────────────────────────────────────────────
+
+  it("applies reverse class when reverse prop is true", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, reverse: true },
+    });
+    expect(wrapper.find(".service-summary__grid").classes()).toContain("service-summary__grid--reverse");
+  });
+
+  it("does not apply reverse class by default", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".service-summary__grid").classes()).not.toContain("service-summary__grid--reverse");
+  });
+
+  // ─── Alignment ──────────────────────────────────────────────────────────
+
+  it("defaults to center alignment", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".service-summary__info-wrapper").classes()).toContain(
+      "service-summary__info-wrapper--align-center"
+    );
+  });
+
+  it("applies the alignment prop", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, alignment: "start" },
+    });
+    expect(wrapper.find(".service-summary__info-wrapper").classes()).toContain(
+      "service-summary__info-wrapper--align-start"
+    );
+  });
+
+  // ─── styleClassPassthrough ──────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, 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(ServiceSummary, {
+      props: { serviceData: mockService, 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/service-summary/tests/__snapshots__/ServiceSummary.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServiceSummary > renders correct HTML structure 1`] = `
+"<div class="service-summary">
+  <div class="service-summary__grid">
+    <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/_/images/test.jpg"></div>
+    <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
+      <div class="eyebrow-text large">A subtitle</div>
+      <h2 id="v-0-0" class="hero-text mb-20 title axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Test Service</span>
+      </h2>
+      <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+      <p class="page-body-normal">What this service is</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/03.organisms/services/services-grids/{ServicesSectionGrid.vue → ServiceSummaryGrid.vue}

@@ -1,18 +1,17 @@
 <template>
-  <component :is="tag" class="services-grid" :class="[elementClasses]">
-    <ServicesSection
+  <component :is="tag" class="service-summary-grid" :class="[elementClasses]">
+    <ServiceSummary
       v-for="(item, index) in servicesData"
       :key="index"
       :index="index"
       :service-data="item"
-      :is-summary="true"
       :reverse="props.useAlternateReverse ? index % 2 !== 0 : false"
-      :summary-alignment="summaryAlignment"
+      :alignment="alignment"
     >
       <template #summary-link="{ serviceData }">
         <slot name="summary-link" :service-data="serviceData"></slot>
       </template>
-    </ServicesSection>
+    </ServiceSummary>
   </component>
 </template>
 
@@ -23,14 +22,14 @@ interface Props {
   tag?: "div" | "section" | "main";
   servicesData: Service[];
   useAlternateReverse?: boolean;
-  summaryAlignment?: "start" | "center" | "end";
+  alignment?: "start" | "center" | "end";
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   useAlternateReverse: false,
-  summaryAlignment: "center",
+  alignment: "center",
   styleClassPassthrough: () => [],
 });
 
@@ -46,11 +45,10 @@ watch(
 
 <style lang="css">
 @layer components {
-  .services-grid {
-    /* Component styles */
+  .service-summary-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 4rem;
+    gap: var(--service-summary-grid-row-gap, 4rem);
   }
 }
 </style>

package/app/components/03.organisms/services/services-grids/stories/{ServicesSectionGrid.stories.ts → ServiceSummaryGrid.stories.ts}

@@ -1,10 +1,10 @@
-import ServicesSectionGrid from "../ServicesSectionGrid.vue";
+import ServiceSummaryGrid from "../ServiceSummaryGrid.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
 
-const meta: Meta<typeof ServicesSectionGrid> = {
-  title: "Organisms/Services/Services Section Grid",
-  component: ServicesSectionGrid,
+const meta: Meta<typeof ServiceSummaryGrid> = {
+  title: "Organisms/Services/Service Summary Grid",
+  component: ServiceSummaryGrid,
   argTypes: {
     tag: {
       control: { type: "select" },
@@ -15,7 +15,7 @@ const meta: Meta<typeof ServicesSectionGrid> = {
       control: { type: "boolean" },
       description: "Alternate image/content column order on every other section",
     },
-    summaryAlignment: {
+    alignment: {
       control: { type: "select" },
       options: ["start", "center", "end"],
       description: "Vertical alignment of the info column in each section",
@@ -28,7 +28,7 @@ const meta: Meta<typeof ServicesSectionGrid> = {
   args: {
     tag: "div",
     useAlternateReverse: false,
-    summaryAlignment: "center",
+    alignment: "center",
     styleClassPassthrough: [],
   },
   parameters: {
@@ -41,14 +41,14 @@ const meta: Meta<typeof ServicesSectionGrid> = {
     docs: {
       description: {
         component:
-          "Renders a vertical stack of `ServicesSection` components (summary mode) from a `Service[]` array. Each section includes a summary-link and a CTA button. Alternate image/content column order is controlled via `useAlternateReverse`.",
+          "Renders a vertical stack of `ServiceSummary` components from a `Service[]` array. Each summary includes a summary-link slot. Alternate image/content column order is controlled via `useAlternateReverse`.",
       },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof ServicesSectionGrid>;
+type Story = StoryObj<typeof ServiceSummaryGrid>;
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
@@ -82,12 +82,12 @@ const sampleServices: Service[] = [
 
 export const Default: Story = {
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args, sampleServices };
     },
     template: `
-      <ServicesSectionGrid v-bind="args" :services-data="sampleServices">
+      <ServiceSummaryGrid v-bind="args" :services-data="sampleServices">
         <template #summary-link="{ serviceData }">
           <a
             :href="'/services/' + serviceData.slug"
@@ -96,7 +96,7 @@ export const Default: Story = {
             More about {{ serviceData.title }} →
           </a>
         </template>
-      </ServicesSectionGrid>
+      </ServiceSummaryGrid>
     `,
   }),
   parameters: {
@@ -115,18 +115,18 @@ export const AlternateReverse: Story = {
     useAlternateReverse: true,
   },
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args, sampleServices };
     },
     template: `
-      <ServicesSectionGrid v-bind="args" :services-data="sampleServices">
+      <ServiceSummaryGrid v-bind="args" :services-data="sampleServices">
         <template #summary-link="{ serviceData }">
           <a :href="'/services/' + serviceData.slug" style="display:inline-flex;margin-top:1.6rem;color:inherit;">
             More about {{ serviceData.title }} →
           </a>
         </template>
-      </ServicesSectionGrid>
+      </ServiceSummaryGrid>
     `,
   }),
   parameters: {
@@ -142,11 +142,11 @@ export const AlternateReverse: Story = {
 export const NoSlots: Story = {
   name: "No Slots (empty sections)",
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args, sampleServices };
     },
-    template: `<ServicesSectionGrid v-bind="args" :services-data="sampleServices" />`,
+    template: `<ServiceSummaryGrid v-bind="args" :services-data="sampleServices" />`,
   }),
   parameters: {
     docs: {
@@ -161,18 +161,18 @@ export const NoSlots: Story = {
 export const SingleService: Story = {
   name: "Single Service",
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args, sampleServices };
     },
     template: `
-      <ServicesSectionGrid v-bind="args" :services-data="[sampleServices[0]]">
+      <ServiceSummaryGrid v-bind="args" :services-data="[sampleServices[0]]">
         <template #summary-link="{ serviceData }">
           <a :href="'/services/' + serviceData.slug" style="display:inline-flex;margin-top:1.6rem;color:inherit;">
             More about {{ serviceData.title }} →
           </a>
         </template>
-      </ServicesSectionGrid>
+      </ServiceSummaryGrid>
     `,
   }),
   parameters: {
@@ -187,11 +187,11 @@ export const SingleService: Story = {
 export const EmptyData: Story = {
   name: "Empty Data",
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args };
     },
-    template: `<ServicesSectionGrid v-bind="args" :services-data="[]" />`,
+    template: `<ServiceSummaryGrid v-bind="args" :services-data="[]" />`,
   }),
   parameters: {
     docs: {

package/app/components/03.organisms/services/services-grids/tests/{ServicesSectionGrid.spec.ts → ServiceSummaryGrid.spec.ts}

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ServicesSectionGrid from "../ServicesSectionGrid.vue";
+import ServiceSummaryGrid from "../ServiceSummaryGrid.vue";
 import type { Service } from "~/types/types.services";
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
@@ -33,18 +33,18 @@ const mockServices: Service[] = [
 
 // ─── Tests ────────────────────────────────────────────────────────────────────
 
-describe("ServicesSectionGrid", () => {
+describe("ServiceSummaryGrid", () => {
   // ─── Mount ─────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders correct HTML structure", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
     expect(wrapper.html()).toMatchSnapshot();
@@ -52,15 +52,15 @@ describe("ServicesSectionGrid", () => {
 
   // ─── Root element ───────────────────────────────────────────────────────
 
-  it("has services-grid class on root", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+  it("has service-summary-grid class on root", async () => {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
-    expect(wrapper.classes()).toContain("services-grid");
+    expect(wrapper.classes()).toContain("service-summary-grid");
   });
 
   it("renders as a div by default", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
     expect(wrapper.element.tagName).toBe("DIV");
@@ -68,7 +68,7 @@ describe("ServicesSectionGrid", () => {
 
   it("renders the tag prop as the root element", async () => {
     for (const tag of ["section", "main"] as const) {
-      const wrapper = await mountSuspended(ServicesSectionGrid, {
+      const wrapper = await mountSuspended(ServiceSummaryGrid, {
         props: { servicesData: mockServices, tag },
       });
       expect(wrapper.element.tagName).toBe(tag.toUpperCase());
@@ -78,51 +78,51 @@ describe("ServicesSectionGrid", () => {
   // ─── Children ───────────────────────────────────────────────────────────
 
   it("renders the correct number of service sections", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
-    expect(wrapper.findAll(".services-section")).toHaveLength(mockServices.length);
+    expect(wrapper.findAll(".service-summary")).toHaveLength(mockServices.length);
   });
 
   it("renders no sections when servicesData is empty", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: [] },
     });
-    expect(wrapper.findAll(".services-section")).toHaveLength(0);
+    expect(wrapper.findAll(".service-summary")).toHaveLength(0);
   });
 
   it("renders a single section correctly", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: [mockServices[0]!] },
     });
-    expect(wrapper.findAll(".services-section")).toHaveLength(1);
+    expect(wrapper.findAll(".service-summary")).toHaveLength(1);
   });
 
   // ─── useAlternateReverse ────────────────────────────────────────────────
 
   it("does not apply reverse to any section by default", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
-    wrapper.findAll(".services-section__grid").forEach((grid) => {
-      expect(grid.classes()).not.toContain("services-section__grid--reverse");
+    wrapper.findAll(".service-summary__grid").forEach((grid) => {
+      expect(grid.classes()).not.toContain("service-summary__grid--reverse");
     });
   });
 
   it("applies reverse to odd-indexed sections when useAlternateReverse is true", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       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
+    const grids = wrapper.findAll(".service-summary__grid");
+    expect(grids[0]?.classes()).not.toContain("service-summary__grid--reverse"); // index 0 — even
+    expect(grids[1]?.classes()).toContain("service-summary__grid--reverse"); // index 1 — odd
+    expect(grids[2]?.classes()).not.toContain("service-summary__grid--reverse"); // index 2 — even
   });
 
   // ─── Slots ─────────────────────────────────────────────────────────────
 
   it("renders summary-link slot content in each section", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
       slots: {
         "summary-link": '<a class="test-link" href="/services/test">View service</a>',
@@ -132,7 +132,7 @@ describe("ServicesSectionGrid", () => {
   });
 
   it("renders nothing in summary-link when slot is not provided", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: [mockServices[0]!] },
     });
     // isSummary=true, so summary-link slot is rendered — but empty since no content was provided
@@ -142,14 +142,14 @@ describe("ServicesSectionGrid", () => {
   // ─── styleClassPassthrough ──────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       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, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices, styleClassPassthrough: ["class-a", "class-b"] },
     });
     expect(wrapper.classes()).toContain("class-a");
@@ -157,7 +157,7 @@ describe("ServicesSectionGrid", () => {
   });
 
   it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices, styleClassPassthrough: ["original"] },
     });
     expect(wrapper.classes()).toContain("original");

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

@@ -0,0 +1,45 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
+"<div class="service-summary-grid">
+  <div class="service-summary">
+    <div class="service-summary__grid">
+      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
+        <div class="eyebrow-text large">Subtitle for Locs Installation</div>
+        <h2 id="v-0-0-0" class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
+        </h2>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <p class="page-body-normal">What this service is.</p>
+      </div>
+    </div>
+  </div>
+  <div class="service-summary">
+    <div class="service-summary__grid">
+      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="service-summary__image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
+        <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
+        <h2 id="v-0-0-1" class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
+        </h2>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <p class="page-body-normal">What this service is.</p>
+      </div>
+    </div>
+  </div>
+  <div class="service-summary">
+    <div class="service-summary__grid">
+      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="service-summary__image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
+        <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
+        <h2 id="v-0-0-2" class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
+        </h2>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <p class="page-body-normal">What this service is.</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.3.10",
+  "version": "9.3.12",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",