srcdev-nuxt-components 9.3.7 → 9.3.8

package/app/components/03.organisms/services/service-detail/stories/ServiceDetail.stories.ts

@@ -0,0 +1,282 @@
+import ServiceDetail from "../ServiceDetail.vue";
+import InputButtonCore from "../../../../05.forms/input-button/InputButtonCore.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { Service } from "~/types/types.services";
+
+const meta: Meta<typeof ServiceDetail> = {
+  title: "Organisms/Services/Service Detail",
+  component: ServiceDetail,
+  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 in the hero banner",
+    },
+    subheadingTag: {
+      control: { type: "select" },
+      options: ["h2", "h3"],
+      description: "Heading element used for every section subheading below the hero",
+    },
+    breadcrumbItems: {
+      control: "object",
+      description:
+        "Items for the Breadcrumb atom. Defaults to a plain (non-linked) [category, title] trail built from serviceData when omitted",
+    },
+    processHeading: { control: "text", description: "Heading text for the process section" },
+    idealForHeading: { control: "text", description: "Heading text for the ideal-for section" },
+    maintenanceHeading: { control: "text", description: "Heading text for the maintenance/aftercare section" },
+    faqsHeading: { control: "text", description: "Heading text for the FAQs section" },
+    bookingHeading: { control: "text", description: "Label above the sidebar booking card" },
+    priceLabel: { control: "text", description: "Row label for the price in the sidebar booking card" },
+    durationLabel: { control: "text", description: "Row label for the duration in the sidebar booking card" },
+    locationLabel: { control: "text", description: "Row label for the location in the sidebar booking card" },
+    location: { control: "text", description: "Location text — the row is hidden entirely when omitted" },
+    relatedServicesHeading: { control: "text", description: "Heading above the 'You may also like' list" },
+    relatedServices: { control: "object", description: "Services rendered in the 'You may also like' sidebar list" },
+    finalCtaHeading: { control: "text", description: "Heading in the closing full-width CTA banner" },
+    finalCtaBody: { control: "text", description: "Body text in the closing full-width CTA banner" },
+    styleClassPassthrough: { control: "object", description: "Additional CSS classes applied to the root element" },
+  },
+  args: {
+    tag: "article",
+    headerTag: "h1",
+    subheadingTag: "h2",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    backgrounds: {
+      default: "storybook-canvas",
+      options: {
+        "storybook-canvas": { name: "Canvas", value: "oklch(0.163 0.005 17)" },
+      },
+    },
+    docs: {
+      description: {
+        component:
+          "Renders a full service detail page: a full-bleed hero banner (breadcrumb, eyebrow, title, price/duration pills over the service image), a two-column body (long-form content plus a sticky sidebar booking card and related-services list), and a closing full-width CTA banner. Routing (breadcrumb links, book-cta, related-service links, final-cta) is delegated to the consumer via slots, same pattern as ServicesSection.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServiceDetail>;
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const balayage: Service = {
+  slug: "balayage",
+  category: "Colour",
+  title: "Balayage",
+  subtitle: "Freehand colour artistry",
+  price: "From £95",
+  duration: "2.5 - 3.5 hours",
+  image: "https://picsum.photos/seed/balayage/1600/900",
+  shortDescription: "Freehand hand-painted colour for a soft, sun-kissed finish.",
+  longDescription:
+    "Balayage is a freehand hair colouring technique that creates a soft, natural-looking gradient of lightness through the hair. Unlike traditional highlights, balayage is painted on by hand without foils, allowing for a more blended and sun-kissed finish. It's perfect for those who want a low-maintenance style with depth and movement, as the regrowth line is less noticeable.",
+  heroHeading: [{ text: "What is Balayage?", styleClass: "normal" }],
+  whatIsIt:
+    "The word 'balayage' comes from the French word meaning 'to sweep'. During the technique, colour is literally swept onto sections of hair by hand using a brush or paddle. This freehand approach means no two balayage results are ever identical — each is bespoke to your hair's natural fall, texture, and the placement that best frames your face.",
+  process: [
+    "We discuss your desired look, assess your natural colour and hair condition, and plan placement.",
+    "Your hair is divided into panels based on where the lightness will have the most impact.",
+    "Lightener is hand-painted onto the surface of each section, concentrating colour towards the ends for that graduated effect.",
+    "The lightener develops (typically 30-45 minutes) with or without wrapping, depending on the desired intensity.",
+    "Once lifted, a toner is applied to achieve the perfect shade: warm caramel, cool ash, honey blonde, or anything in between.",
+    "A professional finish so you can see the full dimension and movement of your new colour.",
+  ],
+  idealFor: [
+    "First-time colour clients who want a natural-looking result",
+    "Anyone wanting low-maintenance colour that grows out gracefully",
+    "Adding depth and dimension to flat or single-tone hair",
+    "Creating a sun-kissed, lived-in look year-round",
+  ],
+  maintenance:
+    "One of the biggest advantages of balayage is its low maintenance. Because the colour is graduated rather than starting at the root, regrowth is soft and natural. Most clients return every 12-16 weeks for a refresh, though some go even longer. Using colour-safe shampoo and a weekly hair mask will keep your balayage looking vibrant between appointments.",
+  faqs: [
+    {
+      question: "Will balayage damage my hair?",
+      answer:
+        "All lightening processes involve some chemical change, but balayage is gentler than full-head bleaching because it's applied to selected sections only. I use professional-grade products with bond-strengthening technology to minimise damage and keep your hair healthy.",
+    },
+    {
+      question: "Can I get balayage on dark hair?",
+      answer:
+        "Absolutely! Balayage looks stunning on dark hair. Warm toffee, rich caramel, and chestnut tones create beautiful contrast against a dark base. Very dark hair may require a two-session approach to lift gradually and avoid brassiness.",
+    },
+    {
+      question: "How long does a balayage appointment take?",
+      answer:
+        "Allow 2.5 to 3.5 hours depending on hair length and thickness. This includes consultation, application, processing, toning, and styling.",
+    },
+  ],
+  seoTitle: "Balayage | Luxury Locs by Natasha",
+  seoDescription: "Balayage hair colouring — freehand, low-maintenance colour. Mobile service across Bath.",
+};
+
+const relatedServices: Service[] = [
+  { ...balayage, slug: "highlights", title: "Highlights", price: "From £85" },
+  { ...balayage, slug: "lowlights", title: "Lowlights", price: "From £75" },
+  { ...balayage, slug: "toner-gloss", title: "Toner & Gloss", price: "From £35" },
+];
+
+// Story-only palette matching the design mock — cards, borders, and a gold accent, applied via
+// ServiceDetail's own --service-detail-*/--glass-panel-*/--breadcrumb-* tokens (see
+// CONSUMER-STYLING.md) rather than new component defaults.
+const storyTheme = {
+  "--glass-panel-bg": "oklch(0.216 0.006 40)",
+  "--glass-panel-border-color": "oklch(0.283 0.008 44)",
+  "--service-detail-process-divider-colour": "oklch(0.283 0.008 44)",
+  "--service-detail-faq-divider-colour": "oklch(0.283 0.008 44)",
+  "--service-detail-sidebar-row-divider-colour": "oklch(0.283 0.008 44)",
+  "--service-detail-final-cta-divider-colour": "oklch(0.283 0.008 44)",
+  "--service-detail-ideal-for-item-border-colour": "oklch(0.283 0.008 44)",
+  "--service-detail-process-index-colour": "oklch(0.727 0.089 87)",
+  "--service-detail-ideal-for-icon-colour": "oklch(0.727 0.089 87)",
+  "--service-detail-hero-pill-border-colour": "oklch(0.727 0.089 87)",
+  "--breadcrumb-colour-current": "oklch(0.727 0.089 87)",
+};
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { ServiceDetail, InputButtonCore },
+    setup() {
+      return { args, balayage, relatedServices, storyTheme };
+    },
+    template: `
+      <ServiceDetail
+        v-bind="args"
+        :service-data="balayage"
+        location="Mobile — across Bath"
+        :related-services="relatedServices"
+        :style="storyTheme"
+      >
+        <template #book-cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
+        </template>
+        <template #sidebar-note>
+          A patch test is required at least 48 hours before any colour treatment.
+        </template>
+        <template #final-cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+        </template>
+      </ServiceDetail>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Matches the real service detail page mock: breadcrumb + hero image, full content, sticky sidebar with location, patch-test note, and 'You may also like' related services.",
+      },
+    },
+  },
+};
+
+export const NoLocationOrRelated: Story = {
+  name: "No Location / No Related Services",
+  render: (args) => ({
+    components: { ServiceDetail, InputButtonCore },
+    setup() {
+      return { args, balayage, storyTheme };
+    },
+    template: `
+      <ServiceDetail v-bind="args" :service-data="balayage" :style="storyTheme">
+        <template #book-cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
+        </template>
+        <template #final-cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+        </template>
+      </ServiceDetail>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Both the location row and the 'You may also like' block are optional — they simply don't render when `location` / `relatedServices` aren't passed.",
+      },
+    },
+  },
+};
+
+export const CustomBreadcrumbAndHeadings: Story = {
+  name: "Custom Breadcrumb & Headings",
+  render: (args) => ({
+    components: { ServiceDetail, InputButtonCore },
+    setup() {
+      return { args, balayage, relatedServices, storyTheme };
+    },
+    template: `
+      <ServiceDetail
+        v-bind="args"
+        :service-data="balayage"
+        :related-services="relatedServices"
+        :breadcrumb-items="[{ label: 'Home', to: '/' }, { label: 'Services', to: '/services' }, { label: 'Balayage' }]"
+        process-heading="How It Works"
+        ideal-for-heading="Who Is This For"
+        maintenance-heading="Aftercare"
+        faqs-heading="FAQs"
+        booking-heading="Reserve Your Slot"
+        :style="storyTheme"
+      >
+        <template #book-cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
+        </template>
+        <template #final-cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+        </template>
+      </ServiceDetail>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Real breadcrumb routes and overridden section/booking copy, all via props — no hardcoded English text to fight.",
+      },
+    },
+  },
+};
+
+export const CustomRelatedServiceLink: Story = {
+  name: "Custom Related Service Link (slot override)",
+  render: (args) => ({
+    components: { ServiceDetail, InputButtonCore },
+    setup() {
+      return { args, balayage, relatedServices, storyTheme };
+    },
+    template: `
+      <ServiceDetail v-bind="args" :service-data="balayage" :related-services="relatedServices" :style="storyTheme">
+        <template #book-cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" :style-class-passthrough="['mbs-16']" />
+        </template>
+        <template #related-service="{ service }">
+          <a :href="'/services/' + service.slug" style="display:flex;gap:1.2rem;align-items:center;color:inherit;text-decoration:none;">
+            <img :src="service.image" :alt="service.title" style="width:5.6rem;height:5.6rem;object-fit:cover;border-radius:0.4rem;" />
+            <span>{{ service.title }} — {{ service.price }}</span>
+          </a>
+        </template>
+        <template #final-cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="secondary" />
+        </template>
+      </ServiceDetail>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The related-service scoped slot replaces each related item's default (non-clickable) markup — use it to wrap the item in a real link, matching the pattern of ServicesSection's summary-link slot.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/service-detail/tests/ServiceDetail.spec.ts

@@ -0,0 +1,270 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ServiceDetail from "../ServiceDetail.vue";
+import type { Service } from "~/types/types.services";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const mockService: Service = {
+  slug: "balayage",
+  category: "Colour",
+  title: "Balayage",
+  subtitle: "Freehand colour artistry",
+  price: "£95",
+  duration: "2.5 - 3.5 hours",
+  image: "/images/balayage.jpg",
+  shortDescription: "Freehand hand-painted colour",
+  longDescription: "Balayage is a freehand hair colouring technique that creates a soft gradient.",
+  heroHeading: [{ text: "What is Balayage?", styleClass: "normal" }],
+  whatIsIt: "The word balayage comes from the French for 'to sweep'.",
+  process: ["Consultation", "Sectioning", "Painting"],
+  idealFor: ["First-time colour clients", "Low-maintenance colour"],
+  maintenance: "Balayage is low maintenance since regrowth is soft and natural.",
+  faqs: [{ question: "Will it damage my hair?", answer: "Balayage is gentler than full-head bleaching." }],
+  seoTitle: "Balayage",
+  seoDescription: "Balayage service",
+};
+
+const relatedService: Service = {
+  ...mockService,
+  slug: "highlights",
+  title: "Highlights",
+  price: "£85",
+};
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ServiceDetail", () => {
+  // ─── Mount ─────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ───────────────────────────────────────────────────────
+
+  it("has service-detail class on root", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.classes()).toContain("service-detail");
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders the tag prop as the root element", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { 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(ServiceDetail, {
+      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);
+  });
+
+  // ─── Heading tags ───────────────────────────────────────────────────────
+
+  it("renders the title as an h1 by default", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.find("h1").text()).toContain(mockService.title);
+  });
+
+  it("renders the title tag from the headerTag prop", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService, headerTag: "h2" } });
+    expect(wrapper.find("h2").exists()).toBe(true);
+  });
+
+  it("renders section subheadings as h2 by default", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    const h2s = wrapper.findAll("h2");
+    expect(h2s.some((h) => h.text() === "The Process")).toBe(true);
+  });
+
+  it("renders section subheadings from the subheadingTag prop", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService, subheadingTag: "h3" } });
+    const h3s = wrapper.findAll("h3");
+    expect(h3s.some((h) => h.text() === "The Process")).toBe(true);
+  });
+
+  // ─── Breadcrumb ─────────────────────────────────────────────────────────
+
+  it("builds a default breadcrumb from the service's category and title", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.text()).toContain(mockService.category);
+    expect(wrapper.findComponent({ name: "Breadcrumb" }).exists()).toBe(true);
+  });
+
+  it("uses breadcrumbItems prop over the default when provided", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: {
+        serviceData: mockService,
+        breadcrumbItems: [{ label: "Home", to: "/" }, { label: "Custom Crumb" }],
+      },
+    });
+    expect(wrapper.text()).toContain("Custom Crumb");
+    expect(wrapper.text()).not.toContain(mockService.category);
+  });
+
+  // ─── Service data ───────────────────────────────────────────────────────
+
+  it("renders service price and duration in the hero pills", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.text()).toContain(mockService.duration);
+    expect(wrapper.text()).toContain(mockService.price);
+  });
+
+  it("renders the process steps via StepperList, one li per step", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.find(".service-detail__process").findAll("li").length).toBe(mockService.process.length);
+    expect(wrapper.text()).toContain("Consultation");
+  });
+
+  it("renders the ideal-for list", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.text()).toContain("First-time colour clients");
+  });
+
+  it("renders the faqs", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.text()).toContain("Will it damage my hair?");
+    expect(wrapper.text()).toContain("Balayage is gentler than full-head bleaching.");
+  });
+
+  // ─── Sidebar ────────────────────────────────────────────────────────────
+
+  it("renders default sidebar labels and service price/duration rows", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.text()).toContain("Book This Service");
+    expect(wrapper.text()).toContain("Price");
+    expect(wrapper.text()).toContain("Duration");
+  });
+
+  it("does not render a location row when location is not provided", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.text()).not.toContain("Location");
+  });
+
+  it("renders a location row when location is provided", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService, location: "Mobile — across Bath" },
+    });
+    expect(wrapper.text()).toContain("Location");
+    expect(wrapper.text()).toContain("Mobile — across Bath");
+  });
+
+  it("renders the book-cta slot scoped with serviceData", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService },
+      slots: {
+        "book-cta": `<template #book-cta="{ serviceData }"><button class="test-book">{{ serviceData.title }}</button></template>`,
+      },
+    });
+    expect(wrapper.find(".test-book").text()).toBe(mockService.title);
+  });
+
+  it("renders the sidebar-note slot", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService },
+      slots: { "sidebar-note": '<p class="test-note">A patch test is required.</p>' },
+    });
+    expect(wrapper.find(".test-note").exists()).toBe(true);
+  });
+
+  // ─── Related services ───────────────────────────────────────────────────
+
+  it("does not render the related-services block when none are provided", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.find(".service-detail__related").exists()).toBe(false);
+  });
+
+  it("renders related services with default markup", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService, relatedServices: [relatedService] },
+    });
+    expect(wrapper.find(".service-detail__related").exists()).toBe(true);
+    expect(wrapper.text()).toContain("Highlights");
+    expect(wrapper.text()).toContain("£85");
+  });
+
+  it("replaces a related service item via the related-service scoped slot", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService, relatedServices: [relatedService] },
+      slots: {
+        "related-service": `<template #related-service="{ service }"><a class="test-related">{{ service.title }}</a></template>`,
+      },
+    });
+    expect(wrapper.find(".test-related").exists()).toBe(true);
+    expect(wrapper.find(".test-related").text()).toBe("Highlights");
+  });
+
+  // ─── Final CTA ──────────────────────────────────────────────────────────
+
+  it("renders default final CTA heading and body", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, { props: { serviceData: mockService } });
+    expect(wrapper.text()).toContain("Ready to book your appointment?");
+    expect(wrapper.text()).toContain("Get in touch to book your appointment.");
+  });
+
+  it("overrides final CTA heading and body via props", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: {
+        serviceData: mockService,
+        finalCtaHeading: "Book your colour appointment",
+        finalCtaBody: "Mobile service across Bath.",
+      },
+    });
+    expect(wrapper.text()).toContain("Book your colour appointment");
+    expect(wrapper.text()).toContain("Mobile service across Bath.");
+  });
+
+  it("renders the final-cta slot scoped with serviceData", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      props: { serviceData: mockService },
+      slots: {
+        "final-cta": `<template #final-cta="{ serviceData }"><button class="test-final-cta">{{ serviceData.title }}</button></template>`,
+      },
+    });
+    expect(wrapper.find(".test-final-cta").text()).toBe(mockService.title);
+  });
+
+  // ─── styleClassPassthrough ──────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ServiceDetail, {
+      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(ServiceDetail, {
+      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(ServiceDetail, {
+      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-detail/tests/__snapshots__/ServiceDetail.spec.ts.snap

@@ -0,0 +1,99 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServiceDetail > renders correct HTML structure 1`] = `
+"<div class="service-detail">
+  <div class="service-detail__hero"><img data-nuxt-img="" srcset="/_ipx/_/images/balayage.jpg 1x, /_ipx/_/images/balayage.jpg 2x" alt="Balayage" loading="eager" fetchpriority="high" class="service-detail__hero-image" src="/_ipx/_/images/balayage.jpg">
+    <div class="service-detail__hero-overlay">
+      <div class="service-detail__hero-content">
+        <nav class="breadcrumb service-detail__breadcrumb" aria-label="Breadcrumb">
+          <ol class="breadcrumb__list">
+            <li class="breadcrumb__item"><span class="breadcrumb__label">Colour</span><span class="breadcrumb__separator" aria-hidden="true">/</span></li>
+            <li class="breadcrumb__item"><span class="breadcrumb__label" aria-current="page">Balayage</span>
+              <!--v-if-->
+            </li>
+          </ol>
+        </nav>
+        <div class="eyebrow-text large">Freehand colour artistry</div>
+        <h1 id="v-0-0" class="hero-text mb-20 display axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Balayage</span>
+        </h1>
+        <div class="service-detail__hero-pills"><span class="display-pill md neutral"><span class="pill-label">2.5 - 3.5 hours</span></span><span class="display-pill md neutral"><span class="pill-label">From £95</span></span></div>
+      </div>
+    </div>
+  </div>
+  <div class="service-detail__body">
+    <div class="service-detail__main">
+      <p class="page-body-normal">Balayage is a freehand hair colouring technique that creates a soft gradient.</p>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">What is Balayage?</span>
+      </h2>
+      <p class="page-body-normal">The word balayage comes from the French for 'to sweep'.</p>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">The Process</span>
+      </h2>
+      <ol class="stepper-list has-connectors service-detail__process">
+        <li class="indicator-top indicator-circle" style="--_connector-top: 0px; --_connector-height: 0px;">
+          <div class="stepper-list__indicator-counter"></div>
+          <div>
+            <p class="page-body-normal">Consultation</p>
+          </div>
+        </li>
+        <li class="indicator-top indicator-circle" style="--_connector-top: 0px; --_connector-height: 0px;">
+          <div class="stepper-list__indicator-counter"></div>
+          <div>
+            <p class="page-body-normal">Sectioning</p>
+          </div>
+        </li>
+        <li class="indicator-top indicator-circle">
+          <div class="stepper-list__indicator-counter"></div>
+          <div>
+            <p class="page-body-normal">Painting</p>
+          </div>
+        </li>
+      </ol>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Ideal For</span>
+      </h2>
+      <ul class="service-detail__ideal-for">
+        <li class="service-detail__ideal-for-item"><span class="iconify i-mdi:diamond-stone service-detail__ideal-for-icon" aria-hidden="true"></span>
+          <p class="page-body-normal">First-time colour clients</p>
+        </li>
+        <li class="service-detail__ideal-for-item"><span class="iconify i-mdi:diamond-stone service-detail__ideal-for-icon" aria-hidden="true"></span>
+          <p class="page-body-normal">Low-maintenance colour</p>
+        </li>
+      </ul>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Aftercare &amp; Maintenance</span>
+      </h2>
+      <p class="page-body-normal">Balayage is low maintenance since regrowth is soft and natural.</p>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Frequently Asked Questions</span>
+      </h2>
+      <div class="service-detail__faqs">
+        <div class="service-detail__faq">
+          <h3 class="service-detail__faq-question">Will it damage my hair?</h3>
+          <p class="page-body-normal">Balayage is gentler than full-head bleaching.</p>
+        </div>
+      </div>
+    </div>
+    <aside class="service-detail__sidebar">
+      <div class="glass-panel service-detail__booking-card">
+        <p class="service-detail__sidebar-label">Book This Service</p>
+        <div class="service-detail__sidebar-row"><span>Price</span><span>£95</span></div>
+        <div class="service-detail__sidebar-row"><span>Duration</span><span>2.5 - 3.5 hours</span></div>
+        <!--v-if-->
+        <div class="service-detail__sidebar-note"></div>
+      </div>
+      <!--v-if-->
+    </aside>
+  </div>
+  <div class="service-detail__final-cta">
+    <div class="service-detail__final-cta-copy">
+      <h2 class="hero-text mbs-0 mbe-8 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Ready to book your appointment?</span>
+      </h2>
+      <p class="page-body-normal">Get in touch to book your appointment.</p>
+    </div>
+  </div>
+</div>"
+`;