srcdev-nuxt-components 9.6.13 → 9.6.15

package/app/components/02.molecules/sliding-toggle/tests/SlidingToggle.spec.ts

@@ -0,0 +1,335 @@
+import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import SlidingToggle from "../SlidingToggle.vue";
+import type { SlidingToggleOption } from "~/types/components";
+
+const billing: SlidingToggleOption[] = [
+  { value: "monthly", label: "Monthly" },
+  { value: "yearly", label: "Yearly" },
+  { value: "lifetime", label: "Lifetime" },
+];
+
+const observed: Element[] = [];
+
+class MockResizeObserver {
+  observe = vi.fn((element: Element) => observed.push(element));
+  unobserve = vi.fn();
+  disconnect = vi.fn(() => observed.splice(0));
+}
+
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountToggle = async (props: Record<string, unknown> = {}, attrs: Record<string, unknown> = {}) => {
+  const holder: { current?: Awaited<ReturnType<typeof mountSuspended>> } = {};
+  const onUpdate = (value: string | number) => {
+    void holder.current?.setProps({ modelValue: value });
+  };
+  const wrapper = await mountSuspended(SlidingToggle, {
+    props: { options: billing, modelValue: "monthly", ariaLabel: "Billing period", "onUpdate:modelValue": onUpdate, ...props },
+    attrs,
+    attachTo: document.body,
+  });
+  holder.current = wrapper;
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+const radios = (wrapper: Awaited<ReturnType<typeof mountToggle>>) => wrapper.findAll('[role="radio"]');
+
+const mockRow = () => {
+  vi.spyOn(HTMLElement.prototype, "offsetLeft", "get").mockImplementation(function (this: HTMLElement) {
+    return this.dataset.index === undefined ? 0 : Number(this.dataset.index) * 100;
+  });
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(function (this: HTMLElement) {
+    return this.dataset.index === undefined ? 0 : 100;
+  });
+  vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockImplementation(function (this: HTMLElement) {
+    return this.classList.contains("sliding-toggle") ? 300 : 0;
+  });
+};
+
+const edge = (wrapper: Awaited<ReturnType<typeof mountToggle>>, name: string) =>
+  (wrapper.element as HTMLElement).style.getPropertyValue(`--_sliding-toggle-${name}`);
+
+beforeEach(() => {
+  vi.stubGlobal("ResizeObserver", MockResizeObserver);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+  observed.splice(0);
+});
+
+describe("SlidingToggle", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountToggle();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountToggle({ styleClassPassthrough: "custom-class" });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Semantics ───────────────────────────────────────────────────────────
+
+  it("renders a named radiogroup", async () => {
+    const wrapper = await mountToggle();
+    expect(wrapper.attributes("role")).toBe("radiogroup");
+    expect(wrapper.attributes("aria-label")).toBe("Billing period");
+  });
+
+  it("can be named by aria-labelledby instead", async () => {
+    const wrapper = await mountToggle({ ariaLabel: "", ariaLabelledby: "billing-heading" });
+    expect(wrapper.attributes("aria-label")).toBeUndefined();
+    expect(wrapper.attributes("aria-labelledby")).toBe("billing-heading");
+  });
+
+  it("renders one type=button radio per option, labelled by its text", async () => {
+    const wrapper = await mountToggle();
+    const options = radios(wrapper);
+    expect(options).toHaveLength(3);
+    options.forEach((option, index) => {
+      expect(option.element.tagName).toBe("BUTTON");
+      expect(option.attributes("type")).toBe("button");
+      expect(option.text()).toBe(billing[index]!.label);
+    });
+  });
+
+  it("marks the selected option aria-checked", async () => {
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    expect(radios(wrapper).map((option) => option.attributes("aria-checked"))).toEqual(["false", "true", "false"]);
+  });
+
+  it("hides both indicators from assistive tech", async () => {
+    const wrapper = await mountToggle();
+    wrapper.findAll(".sliding-toggle-indicator").forEach((indicator) => {
+      expect(indicator.attributes("aria-hidden")).toBe("true");
+    });
+  });
+
+  // ─── Selection ───────────────────────────────────────────────────────────
+
+  it("selects on click", async () => {
+    const wrapper = await mountToggle();
+    await radios(wrapper)[2]!.trigger("click");
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+    expect(radios(wrapper)[2]!.attributes("aria-checked")).toBe("true");
+  });
+
+  it("follows an external v-model change", async () => {
+    const wrapper = await mountToggle();
+    await wrapper.setProps({ modelValue: "lifetime" });
+    expect(radios(wrapper)[2]!.attributes("aria-checked")).toBe("true");
+    expect(radios(wrapper)[0]!.attributes("aria-checked")).toBe("false");
+  });
+
+  it("supports numeric values", async () => {
+    const wrapper = await mountToggle({
+      options: [
+        { value: 1, label: "One" },
+        { value: 2, label: "Two" },
+      ],
+      modelValue: 1,
+    });
+    await radios(wrapper)[1]!.trigger("click");
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([2]);
+  });
+
+  // ─── Roving tabindex ─────────────────────────────────────────────────────
+
+  it("gives only the checked option the tab stop", async () => {
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    expect(radios(wrapper).map((option) => option.attributes("tabindex"))).toEqual(["-1", "0", "-1"]);
+  });
+
+  it("gives the first enabled option the tab stop when the value matches no option", async () => {
+    const wrapper = await mountToggle({
+      modelValue: "weekly",
+      options: [{ value: "a", label: "A", disabled: true }, ...billing],
+    });
+    expect(radios(wrapper).map((option) => option.attributes("tabindex"))).toEqual(["-1", "0", "-1", "-1"]);
+    expect(wrapper.attributes("data-has-selection")).toBeUndefined();
+  });
+
+  // ─── Keyboard ────────────────────────────────────────────────────────────
+
+  it("ArrowRight selects and focuses the next option", async () => {
+    const wrapper = await mountToggle();
+    await radios(wrapper)[0]!.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["yearly"]);
+    expect(document.activeElement).toBe(radios(wrapper)[1]!.element);
+  });
+
+  it("ArrowDown also moves to the next option, and ArrowLeft/ArrowUp to the previous", async () => {
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    await radios(wrapper)[1]!.trigger("keydown", { key: "ArrowDown" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+    await radios(wrapper)[2]!.trigger("keydown", { key: "ArrowUp" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["yearly"]);
+    await radios(wrapper)[1]!.trigger("keydown", { key: "ArrowLeft" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["monthly"]);
+  });
+
+  it("wraps from the last option to the first and back", async () => {
+    const wrapper = await mountToggle({ modelValue: "lifetime" });
+    await radios(wrapper)[2]!.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["monthly"]);
+    await radios(wrapper)[0]!.trigger("keydown", { key: "ArrowLeft" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+  });
+
+  it("Home and End select the first and last options", async () => {
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    await radios(wrapper)[1]!.trigger("keydown", { key: "End" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+    await radios(wrapper)[2]!.trigger("keydown", { key: "Home" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["monthly"]);
+  });
+
+  it("skips disabled options", async () => {
+    const wrapper = await mountToggle({
+      options: [billing[0]!, { ...billing[1]!, disabled: true }, billing[2]!],
+    });
+    await radios(wrapper)[0]!.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["lifetime"]);
+  });
+
+  it("RTL swaps the arrow directions", async () => {
+    const wrapper = await mountToggle({}, { dir: "rtl" });
+    await radios(wrapper)[0]!.trigger("keydown", { key: "ArrowLeft" });
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["yearly"]);
+  });
+
+  it("ignores other keys", async () => {
+    const wrapper = await mountToggle();
+    await radios(wrapper)[0]!.trigger("keydown", { key: "a" });
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  // ─── Disabled ────────────────────────────────────────────────────────────
+
+  it("disables every option and blocks selection when the group is disabled", async () => {
+    const wrapper = await mountToggle({ disabled: true });
+    expect(wrapper.attributes("aria-disabled")).toBe("true");
+    radios(wrapper).forEach((option) => expect(option.attributes("disabled")).toBeDefined());
+    await radios(wrapper)[1]!.trigger("keydown", { key: "ArrowRight" });
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  it("does not select a disabled option on click", async () => {
+    const wrapper = await mountToggle({ options: [billing[0]!, { ...billing[1]!, disabled: true }, billing[2]!] });
+    const vm = wrapper.vm as unknown as { select: (index: number) => void };
+    vm.select(1);
+    await nextTick();
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  // ─── Indicators ──────────────────────────────────────────────────────────
+
+  it("sets data-ready once mounted and measured", async () => {
+    const wrapper = await mountToggle();
+    expect(wrapper.attributes("data-ready")).toBeDefined();
+    expect(wrapper.attributes("data-has-selection")).toBeDefined();
+  });
+
+  it("snaps the active indicator onto the checked option on mount", async () => {
+    mockRow();
+    const wrapper = await mountToggle({ modelValue: "yearly" });
+    expect(edge(wrapper, "active-start")).toBe("100px");
+    expect(edge(wrapper, "active-end")).toBe("100px");
+    expect(edge(wrapper, "active-duration")).toBe("0ms");
+  });
+
+  it("slides the active indicator with the leading edge first", async () => {
+    mockRow();
+    const wrapper = await mountToggle();
+    await radios(wrapper)[2]!.trigger("click");
+    await nextTick();
+    expect(edge(wrapper, "active-start")).toBe("200px");
+    expect(edge(wrapper, "active-start-delay")).toBe("200ms");
+    expect(edge(wrapper, "active-end-delay")).toBe("0ms");
+  });
+
+  it("moves the hover indicator with the pointer and back to the checked option on leave", async () => {
+    mockRow();
+    const wrapper = await mountToggle();
+    await radios(wrapper)[2]!.trigger("mouseenter");
+    expect(edge(wrapper, "hover-start")).toBe("200px");
+    expect(wrapper.attributes("data-hovering")).toBeDefined();
+    await wrapper.trigger("mouseleave");
+    expect(edge(wrapper, "hover-start")).toBe("0px");
+    expect(wrapper.attributes("data-hovering")).toBeUndefined();
+  });
+
+  it("does not track hover when trackHover is false", async () => {
+    mockRow();
+    const wrapper = await mountToggle({ trackHover: false });
+    await radios(wrapper)[2]!.trigger("mouseenter");
+    expect(edge(wrapper, "hover-start")).toBe("0px");
+    expect(wrapper.attributes("data-hovering")).toBeUndefined();
+  });
+
+  it("uses transitionDuration for the slide", async () => {
+    mockRow();
+    const wrapper = await mountToggle({ transitionDuration: 350 });
+    await radios(wrapper)[1]!.trigger("click");
+    await nextTick();
+    expect(edge(wrapper, "active-duration")).toBe("350ms");
+  });
+
+  // ─── Re-measuring ────────────────────────────────────────────────────────
+
+  it("observes the track and each option for size changes", async () => {
+    const wrapper = await mountToggle();
+    expect(observed).toContain(wrapper.element);
+    radios(wrapper).forEach((option) => expect(observed).toContain(option.element));
+  });
+
+  it("re-places the indicators when the options change", async () => {
+    mockRow();
+    const wrapper = await mountToggle({ modelValue: "lifetime" });
+    await wrapper.setProps({ options: [billing[2]!, billing[0]!] });
+    await nextTick();
+    await nextTick();
+    expect(edge(wrapper, "active-start")).toBe("0px");
+  });
+
+  // ─── Worst-case data ─────────────────────────────────────────────────────
+
+  it("renders an empty group without errors", async () => {
+    const wrapper = await mountToggle({ options: [] });
+    expect(radios(wrapper)).toHaveLength(0);
+    expect(wrapper.attributes("data-has-selection")).toBeUndefined();
+  });
+
+  it("renders duplicate labels as separate radios", async () => {
+    const wrapper = await mountToggle({
+      options: [
+        { value: "a", label: "Same" },
+        { value: "b", label: "Same" },
+      ],
+      modelValue: "b",
+    });
+    expect(radios(wrapper)).toHaveLength(2);
+    expect(radios(wrapper)[1]!.attributes("aria-checked")).toBe("true");
+  });
+
+  it("renders HTML-like labels as text", async () => {
+    const wrapper = await mountToggle({ options: [{ value: "x", label: "<b>not bold</b>" }], modelValue: "x" });
+    expect(wrapper.find("b").exists()).toBe(false);
+    expect(radios(wrapper)[0]!.text()).toBe("<b>not bold</b>");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("updates classes when styleClassPassthrough changes after mount", async () => {
+    const wrapper = await mountToggle({ styleClassPassthrough: ["original"] });
+    expect(wrapper.classes()).toContain("sliding-toggle");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/02.molecules/sliding-toggle/tests/__snapshots__/SlidingToggle.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SlidingToggle > renders correct HTML structure 1`] = `"<div class="sliding-toggle custom-class" role="radiogroup" aria-label="Billing period" data-has-selection="" style="--_sliding-toggle-active-duration: 0ms; --_sliding-toggle-active-start-delay: 0ms; --_sliding-toggle-active-end-delay: 0ms; --_sliding-toggle-active-start: 0px; --_sliding-toggle-active-end: 0px; --_sliding-toggle-hover-duration: 0ms; --_sliding-toggle-hover-start-delay: 0ms; --_sliding-toggle-hover-end-delay: 0ms; --_sliding-toggle-hover-start: 0px; --_sliding-toggle-hover-end: 0px;" data-ready=""><span class="sliding-toggle-indicator sliding-toggle-indicator-hover" aria-hidden="true"></span><span class="sliding-toggle-indicator sliding-toggle-indicator-active" aria-hidden="true"></span><button type="button" role="radio" class="sliding-toggle-option" data-index="0" aria-checked="true" tabindex="0">Monthly</button><button type="button" role="radio" class="sliding-toggle-option" data-index="1" aria-checked="false" tabindex="-1">Yearly</button><button type="button" role="radio" class="sliding-toggle-option" data-index="2" aria-checked="false" tabindex="-1">Lifetime</button></div>"`;

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

@@ -17,9 +17,9 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
               </li>
             </ol>
           </nav>
-          <div class="eyebrow-text large">Freehand colour artistry</div>
-          <h1 id="v-0-0" class="hero-text display axis-horizontal">
-            <!--v-if--><span class="text-block-0 normal">Balayage</span>
+          <div class="eyebrow-text" data-font-size="large">Freehand colour artistry</div>
+          <h1 id="v-0-0" class="hero-text" data-font-size="display" data-axis="horizontal">
+            <!--v-if--><span class="hero-text-segment normal">Balayage</span>
           </h1>
           <div class="service-detail__hero-pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">2.5 - 3.5 hours</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £95</span></span></div>
         </div>
@@ -30,12 +30,12 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
     <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 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment 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 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">The Process</span>
         </h2>
         <ol role="list" class="stepper-list has-connectors service-detail__process">
           <li class="stepper-list-item indicator-top indicator-circle" style="--_connector-left: 0px; --_connector-top: 0px; --_connector-height: 0px;">
@@ -57,8 +57,8 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
             </div>
           </li>
         </ol>
-        <h2 class="hero-text mb-20 subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Ideal For</span>
+        <h2 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment 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>
@@ -68,12 +68,12 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
             <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 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment 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 class="hero-text mb-20" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Frequently Asked Questions</span>
         </h2>
         <div class="service-detail__faqs">
           <div class="service-detail__faq">
@@ -98,8 +98,8 @@ exports[`ServiceDetail > renders correct HTML structure 1`] = `
   <div class="page-row content service-detail__final-cta-row">
     <div class="service-detail__final-cta">
       <div class="service-detail__final-cta-copy">
-        <h2 class="hero-text subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Ready to book your appointment?</span>
+        <h2 class="hero-text" data-font-size="subheading" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Ready to book your appointment?</span>
         </h2>
         <p class="page-body-normal">Get in touch to book your appointment.</p>
       </div>

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

@@ -5,9 +5,9 @@ exports[`ServiceSummary > renders correct HTML structure 1`] = `
   <div class="service-summary__grid">
     <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/test.jpg 1x, /_ipx/s_2160x2160/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/s_1080x1080/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>
+      <div class="eyebrow-text" data-font-size="large">A subtitle</div>
+      <h2 id="v-0-0" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
+        <!--v-if--><span class="hero-text-segment normal">Test Service</span>
       </h2>
       <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
       <p class="page-body-normal">What this service is</p>

package/app/components/03.organisms/services/services-card/tests/ServicesCard.spec.ts

@@ -217,14 +217,14 @@ describe("ServicesCard", () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService },
     });
-    expect(wrapper.find(".eyebrow-text").classes()).toContain("large");
+    expect(wrapper.find(".eyebrow-text").attributes("data-font-size")).toBe("large");
   });
 
   it("applies eyebrowConfig.fontSize override", async () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService, eyebrowConfig: { fontSize: "small" } },
     });
-    expect(wrapper.find(".eyebrow-text").classes()).toContain("small");
+    expect(wrapper.find(".eyebrow-text").attributes("data-font-size")).toBe("small");
   });
 
   it("applies eyebrowConfig.tag override", async () => {
@@ -254,7 +254,7 @@ describe("ServicesCard", () => {
     const wrapper = await mountSuspended(ServicesCard, {
       props: { serviceData: mockService, heroConfig: { fontSize: "title" } },
     });
-    expect(wrapper.find(".hero-text").classes()).toContain("title");
+    expect(wrapper.find(".hero-text").attributes("data-font-size")).toBe("title");
   });
 
   // ─── styleClassPassthrough ──────────────────────────────────────────────

package/app/components/03.organisms/services/services-card/tests/__snapshots__/ServicesCard.spec.ts.snap

@@ -7,9 +7,9 @@ exports[`ServicesCard > renders correct HTML structure 1`] = `
     <div class="grid-stack__layer"></div>
   </div>
   <div class="services-card-details">
-    <div class="eyebrow-text large">A subtitle</div>
-    <h2 class="hero-text heading axis-horizontal">
-      <!--v-if--><span class="text-block-0 normal">Test Service</span>
+    <div class="eyebrow-text" data-font-size="large">A subtitle</div>
+    <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
+      <!--v-if--><span class="hero-text-segment normal">Test Service</span>
     </h2>
     <div class="services-card-description">A short description of the service.</div>
     <div class="services-card-footer">

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

@@ -139,7 +139,7 @@ describe("ServicesCardGrid", () => {
       props: { servicesData: mockServices, eyebrowConfig: { fontSize: "small" } },
     });
     wrapper.findAll(".eyebrow-text").forEach((el) => {
-      expect(el.classes()).toContain("small");
+      expect(el.attributes("data-font-size")).toBe("small");
     });
   });
 

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

@@ -6,9 +6,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
     <div class="service-summary__grid">
       <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/locs-installation.jpg 1x, /_ipx/s_2160x2160/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/s_1080x1080/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>
+        <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Installation</div>
+        <h2 id="v-0-0-0" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Locs Installation</span>
         </h2>
         <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>
@@ -19,9 +19,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
     <div class="service-summary__grid">
       <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/locs-retwist.jpg 1x, /_ipx/s_2160x2160/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="service-summary__image" src="/_ipx/s_1080x1080/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>
+        <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Retwist</div>
+        <h2 id="v-0-0-1" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Locs Retwist</span>
         </h2>
         <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>
@@ -32,9 +32,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
     <div class="service-summary__grid">
       <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/colour-treatment.jpg 1x, /_ipx/s_2160x2160/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="service-summary__image" src="/_ipx/s_1080x1080/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>
+        <div class="eyebrow-text" data-font-size="large">Subtitle for Colour Treatment</div>
+        <h2 id="v-0-0-2" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
+          <!--v-if--><span class="hero-text-segment normal">Colour Treatment</span>
         </h2>
         <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
         <p class="page-body-normal">What this service is.</p>

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

@@ -8,9 +8,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
       <div class="grid-stack__layer"></div>
     </div>
     <div class="services-card-details">
-      <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>
+      <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Installation</div>
+      <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
+        <!--v-if--><span class="hero-text-segment normal">Locs Installation</span>
       </h2>
       <div class="services-card-description">Short description for Locs Installation.</div>
       <div class="services-card-footer">
@@ -31,9 +31,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
       <div class="grid-stack__layer"></div>
     </div>
     <div class="services-card-details">
-      <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>
+      <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Retwist</div>
+      <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
+        <!--v-if--><span class="hero-text-segment normal">Locs Retwist</span>
       </h2>
       <div class="services-card-description">Short description for Locs Retwist.</div>
       <div class="services-card-footer">
@@ -54,9 +54,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
       <div class="grid-stack__layer"></div>
     </div>
     <div class="services-card-details">
-      <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>
+      <div class="eyebrow-text" data-font-size="large">Subtitle for Colour Treatment</div>
+      <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
+        <!--v-if--><span class="hero-text-segment normal">Colour Treatment</span>
       </h2>
       <div class="services-card-description">Short description for Colour Treatment.</div>
       <div class="services-card-footer">