srcdev-nuxt-components 9.3.11 → 9.3.12

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

@@ -1,345 +0,0 @@
-<template>
-  <component :is="tag" class="services-section" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
-    <div class="services-section__grid" :class="{ 'services-section__grid--reverse': reverse }">
-      <div class="services-section__image-wrapper">
-        <NuxtImg
-          :src="serviceData.image"
-          :alt="serviceData.title"
-          :loading="imageLoading"
-          :fetchpriority="imageFetchPriority"
-          class="services-section__image"
-        />
-      </div>
-      <div class="services-section__info-wrapper" :class="infoWrapperClasses">
-        <EyebrowText font-size="large" :text-content="serviceData.subtitle" />
-        <HeroText
-          :id="headingId"
-          :tag="headerTag"
-          font-size="title"
-          :text-content="[
-            {
-              text: serviceData.title,
-              styleClass: 'normal',
-            },
-          ]"
-          :style-class-passthrough="['mb-20']"
-        />
-
-        <div class="services-section__price-duration">
-          <div class="flex-row">
-            <Icon :name="durationIcon" class="services-section__decorator" />
-            <span>{{ serviceData.duration }}</span>
-          </div>
-          <div class="flex-row">
-            <Icon :name="priceIcon" class="services-section__decorator" />
-            <span>{{ serviceData.price }}</span>
-          </div>
-        </div>
-
-        <p v-if="!isSummary" class="page-body-normal">{{ serviceData.longDescription }}</p>
-
-        <HeroText
-          v-if="!isSummary"
-          :tag="headerTag"
-          axis="horizontal"
-          font-size="subheading"
-          :text-content="serviceData.heroHeading"
-          :style-class-passthrough="['mb-20']"
-        />
-        <p class="page-body-normal">
-          {{ serviceData.whatIsIt }}
-        </p>
-
-        <slot v-if="isSummary" name="summary-link" :service-data="serviceData"></slot>
-
-        <HeroText
-          v-if="!isSummary"
-          :tag="headerTag"
-          axis="horizontal"
-          font-size="subheading"
-          :text-content="[{ text: processHeading, styleClass: 'normal' }]"
-          :style-class-passthrough="['mb-20']"
-        />
-
-        <StepperList
-          v-if="!isSummary"
-          tag="ol"
-          indicator-alignment="top"
-          indicator-variant="circle"
-          :show-connectors="true"
-          :item-count="serviceData.process.length"
-        >
-          <template v-for="(item, i) in serviceData.process" :key="i" #[`item-${i}`]>
-            <p class="page-body-normal">{{ item }}</p>
-          </template>
-        </StepperList>
-
-        <HeroText
-          v-if="!isSummary"
-          :tag="headerTag"
-          axis="horizontal"
-          font-size="subheading"
-          :text-content="[{ text: idealForHeading, styleClass: 'normal' }]"
-          :style-class-passthrough="['mb-20']"
-        />
-
-        <StepperList v-if="!isSummary" :connected="false" :item-count="serviceData.idealFor.length">
-          <template v-for="(_, i) in serviceData.idealFor" :key="i" #[`indicator-${i}`]>
-            <Icon name="mdi:checkbox-marked-circle-outline" class="indicator-icon" />
-          </template>
-          <template v-for="(item, i) in serviceData.idealFor" :key="i" #[`item-${i}`]>
-            <p class="page-body-normal">{{ item }}</p>
-          </template>
-        </StepperList>
-
-        <HeroText
-          v-if="!isSummary"
-          :tag="headerTag"
-          axis="horizontal"
-          font-size="subheading"
-          :text-content="[{ text: maintenanceHeading, styleClass: 'normal' }]"
-          :style-class-passthrough="['mb-20']"
-        />
-
-        <p v-if="!isSummary" class="page-body-normal">{{ serviceData.maintenance }}</p>
-
-        <HeroText
-          v-if="!isSummary"
-          :tag="headerTag"
-          axis="horizontal"
-          font-size="subheading"
-          :text-content="[{ text: faqsHeading, styleClass: 'normal' }]"
-          :style-class-passthrough="['mb-20']"
-        />
-
-        <AccordianCore
-          v-if="!isSummary"
-          id="faq"
-          :item-count="serviceData.faqs.length"
-          :name="`faq-${useId()}`"
-          :style-class-passthrough="['services-section__faq']"
-        >
-          <template v-for="(_, key) in serviceData.faqs" :key="`summary-${key}`" #[`accordian-${key}-summary`]>
-            {{ serviceData.faqs[key]?.question }}
-          </template>
-          <template v-for="(_, key) in serviceData.faqs" :key="`icon-${key}`" #[`accordian-${key}-icon`]>
-            <Icon name="mdi:chevron-down" />
-          </template>
-          <template v-for="(_, key) in serviceData.faqs" :key="`content-${key}`" #[`accordian-${key}-content`]>
-            <p class="services-section__faq-answer">{{ serviceData.faqs[key]?.answer }}</p>
-          </template>
-        </AccordianCore>
-
-        <slot
-          v-if="!isSummary"
-          name="cta-panel"
-          :service-data="serviceData"
-          :cta-heading="ctaHeading"
-          :cta-body="ctaBody"
-        >
-          <GlassPanel :style-class-passthrough="['services-section__glass-panel', 'p-24']">
-            <HeroText
-              tag="h2"
-              axis="horizontal"
-              font-size="subheading"
-              :text-content="[{ text: ctaHeading, styleClass: 'normal' }]"
-              :style-class-passthrough="['mbs-0', 'mbe-20']"
-            />
-            <p class="page-body-normal">{{ ctaBody }}</p>
-            <slot name="cta" :service-data="serviceData"></slot>
-          </GlassPanel>
-        </slot>
-      </div>
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-import type { Service } from "~/types/types.services";
-
-interface Props {
-  tag?: "div" | "section" | "article" | "main";
-  headerTag?: "h1" | "h2" | "h3";
-  index?: number;
-  serviceData: Service;
-  isSummary?: boolean;
-  summaryAlignment?: "start" | "center" | "end";
-  reverse?: boolean;
-  durationIcon?: string;
-  priceIcon?: string;
-  processHeading?: string;
-  idealForHeading?: string;
-  maintenanceHeading?: string;
-  faqsHeading?: string;
-  ctaHeading?: string;
-  ctaBody?: string;
-  styleClassPassthrough?: string | string[];
-}
-const props = withDefaults(defineProps<Props>(), {
-  tag: "div",
-  headerTag: "h2",
-  index: 0,
-  isSummary: false,
-  summaryAlignment: "center",
-  durationIcon: "mdi:clock-time-four-outline",
-  priceIcon: "mdi:currency-gbp",
-  processHeading: "The Process",
-  idealForHeading: "Ideal For",
-  maintenanceHeading: "Aftercare & Maintenance",
-  faqsHeading: "Frequently Asked Questions",
-  ctaHeading: "Ready to book your appointment?",
-  ctaBody: "Get in touch to book your appointment.",
-  styleClassPassthrough: () => [],
-});
-
-const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
-
-const infoWrapperClasses = computed(() => {
-  return {
-    "services-section__info-wrapper--summary": props.isSummary,
-    "services-section__info-wrapper--align-start": props.isSummary && props.summaryAlignment === "start",
-    "services-section__info-wrapper--align-center": props.isSummary && props.summaryAlignment === "center",
-    "services-section__info-wrapper--align-end": props.isSummary && props.summaryAlignment === "end",
-  };
-});
-
-// Computed to return loading="lazy" if index is greater than 1, so that the first two sections prioritise image loading, but if there are more than 2 sections, the rest will lazy load their images to improve performance.
-const imageLoading = computed(() => (props.index !== undefined && props.index > 1 ? "lazy" : "eager"));
-
-// Only the first image (LCP candidate) gets fetchpriority="high" to reduce resource load delay.
-const imageFetchPriority = computed(() => (props.index === 0 ? "high" : "auto"));
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer components {
-  .services-section {
-    container-type: inline-size;
-    container-name: services-section;
-
-    .services-section__grid {
-      --_grid-gap: var(--services-section-grid-gap, 2rem);
-
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: var(--_grid-gap);
-
-      @media (width >= 768px) {
-        --_grid-gap: var(--services-section-grid-gap-desktop, 3rem);
-
-        grid-template-columns: repeat(auto-fit, minmax(446px, 1fr));
-
-        &.services-section__grid--reverse {
-          .services-section__image-wrapper {
-            /* The order: 2 on .services-section__image-wrapper pushes it after the content div, since by default both children have order: 0 and source order wins — so the content div naturally sits first. */
-            order: 2;
-          }
-        }
-      }
-
-      .services-section__info-wrapper {
-        &.services-section__info-wrapper--summary {
-          display: grid;
-
-          &.services-section__info-wrapper--align-start {
-            align-content: start;
-          }
-          &.services-section__info-wrapper--align-center {
-            align-content: center;
-          }
-          &.services-section__info-wrapper--align-end {
-            align-content: end;
-          }
-        }
-      }
-
-      .services-section__image-wrapper {
-        align-self: start;
-        border-radius: var(--services-section-image-border-radius, 0.8rem);
-        overflow: hidden;
-
-        .services-section__image {
-          display: block;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-
-      .services-section__price-duration {
-        display: flex;
-        flex-direction: row;
-        gap: var(--services-section-price-duration-gap, 3rem);
-        align-items: center;
-        margin-block-end: var(--services-section-price-duration-margin-block-end, 2rem);
-
-        > div {
-          display: flex;
-          flex-direction: row;
-          gap: var(--services-section-price-duration-item-gap, 0.8rem);
-          align-items: center;
-
-          .services-section__decorator {
-            width: var(--services-section-decorator-size, 2rem);
-            height: var(--services-section-decorator-size, 2rem);
-          }
-        }
-      }
-
-      .services-section__faq {
-        margin-block-end: var(--services-section-faq-margin-block-end, 2.4rem);
-
-        &.display-accordian {
-          max-width: none;
-
-          .accordian-item.expanding-panel {
-            border-block-end: 1px solid var(--services-section-faq-divider-color, currentColor);
-            opacity: var(--services-section-faq-divider-opacity, 0.7);
-
-            &:first-child {
-              border-block-start: 1px solid var(--services-section-faq-divider-color, currentColor);
-            }
-
-            .expanding-panel-details .expanding-panel-summary {
-              padding-block: 1.2rem;
-            }
-
-            .expanding-panel-content .inner {
-              .services-section__faq-answer {
-                line-height: var(--services-section-faq-answer-line-height, 1.6);
-              }
-            }
-          }
-
-          .accordian-item.expanding-panel-classic {
-            border-block-end: 1px solid var(--services-section-faq-divider-color, currentColor);
-            opacity: var(--services-section-faq-divider-opacity, 0.7);
-
-            &:first-child {
-              border-block-start: 1px solid var(--services-section-faq-divider-color, currentColor);
-            }
-
-            .expanding-panel-classic-details .expanding-panel-classic-summary {
-              padding-block: 1.2rem;
-            }
-
-            .expanding-panel-classic-content .inner {
-              .services-section__faq-answer {
-                line-height: var(--services-section-faq-answer-line-height, 1.6);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,297 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ServicesSection from "../ServicesSection.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("ServicesSection", () => {
-  // ─── Mount ─────────────────────────────────────────────────────────────
-
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders correct HTML structure", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  // ─── Root element ───────────────────────────────────────────────────────
-
-  it("has services-section class on root", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.classes()).toContain("services-section");
-  });
-
-  it("renders as a div by default", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.element.tagName).toBe("DIV");
-  });
-
-  it("renders the tag prop as the root element", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      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(ServicesSection, {
-      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);
-  });
-
-  // ─── Icons ──────────────────────────────────────────────────────────────
-
-  it("renders the default duration icon name in the template", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.html()).toContain("mdi:clock-time-four-outline");
-  });
-
-  it("renders the default price icon name in the template", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.html()).toContain("mdi:currency-gbp");
-  });
-
-  it("overrides the duration icon via durationIcon prop", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService, durationIcon: "mdi:timer-outline" },
-    });
-    expect(wrapper.html()).toContain("mdi:timer-outline");
-    expect(wrapper.html()).not.toContain("mdi:clock-time-four-outline");
-  });
-
-  it("overrides the price icon via priceIcon prop", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService, priceIcon: "mdi:currency-usd" },
-    });
-    expect(wrapper.html()).toContain("mdi:currency-usd");
-    expect(wrapper.html()).not.toContain("mdi:currency-gbp");
-  });
-
-  it("both icons can be overridden together", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: {
-        serviceData: mockService,
-        durationIcon: "mdi:timer-outline",
-        priceIcon: "mdi:currency-eur",
-      },
-    });
-    expect(wrapper.html()).toContain("mdi:timer-outline");
-    expect(wrapper.html()).toContain("mdi:currency-eur");
-  });
-
-  // ─── Service data ───────────────────────────────────────────────────────
-
-  it("renders service duration text", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.text()).toContain(mockService.duration);
-  });
-
-  it("renders service price text", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.text()).toContain(mockService.price);
-  });
-
-  // ─── Summary mode ───────────────────────────────────────────────────────
-
-  it("renders summary-link slot in summary mode", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService, isSummary: true },
-      slots: {
-        "summary-link": '<a class="test-link" href="/services/test">View service</a>',
-      },
-    });
-    expect(wrapper.find(".test-link").exists()).toBe(true);
-  });
-
-  it("does not render summary-link slot in full mode", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService, isSummary: false },
-      slots: {
-        "summary-link": '<a class="test-link" href="/services/test">View service</a>',
-      },
-    });
-    expect(wrapper.find(".test-link").exists()).toBe(false);
-  });
-
-  it("renders cta slot in full mode", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService, isSummary: false },
-      slots: {
-        cta: '<button class="test-cta">Book now</button>',
-      },
-    });
-    expect(wrapper.find(".test-cta").exists()).toBe(true);
-  });
-
-  it("does not render cta slot in summary mode", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService, isSummary: true },
-      slots: {
-        cta: '<button class="test-cta">Book now</button>',
-      },
-    });
-    expect(wrapper.find(".test-cta").exists()).toBe(false);
-  });
-
-  // ─── Reverse ────────────────────────────────────────────────────────────
-
-  it("applies reverse class when reverse prop is true", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService, reverse: true },
-    });
-    expect(wrapper.find(".services-section__grid").classes()).toContain("services-section__grid--reverse");
-  });
-
-  it("does not apply reverse class by default", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.find(".services-section__grid").classes()).not.toContain("services-section__grid--reverse");
-  });
-
-  // ─── styleClassPassthrough ──────────────────────────────────────────────
-
-  it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      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(ServicesSection, {
-      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(ServicesSection, {
-      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");
-  });
-
-  // ─── Headings ───────────────────────────────────────────────────────────
-
-  it("renders default section headings", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-    });
-    expect(wrapper.text()).toContain("The Process");
-    expect(wrapper.text()).toContain("Ideal For");
-    expect(wrapper.text()).toContain("Aftercare & Maintenance");
-    expect(wrapper.text()).toContain("Frequently Asked Questions");
-  });
-
-  it("overrides section headings via props", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: {
-        serviceData: mockService,
-        processHeading: "How It Works",
-        idealForHeading: "Who Is This For",
-        maintenanceHeading: "Aftercare",
-        faqsHeading: "FAQs",
-      },
-    });
-    expect(wrapper.text()).toContain("How It Works");
-    expect(wrapper.text()).toContain("Who Is This For");
-    expect(wrapper.text()).toContain("Aftercare");
-    expect(wrapper.text()).toContain("FAQs");
-  });
-
-  // ─── CTA panel ──────────────────────────────────────────────────────────
-
-  it("renders default CTA heading and body", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      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 CTA heading and body via props", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: {
-        serviceData: mockService,
-        ctaHeading: "Book your locs consultation",
-        ctaBody: "Mobile service across Bath — I come to you.",
-      },
-    });
-    expect(wrapper.text()).toContain("Book your locs consultation");
-    expect(wrapper.text()).toContain("Mobile service across Bath — I come to you.");
-  });
-
-  it("replaces the whole CTA panel via the cta-panel slot", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService },
-      slots: {
-        "cta-panel": '<div class="test-custom-cta">Custom CTA</div>',
-      },
-    });
-    expect(wrapper.find(".test-custom-cta").exists()).toBe(true);
-    expect(wrapper.text()).not.toContain("Ready to book your appointment?");
-  });
-
-  it("does not render cta-panel slot in summary mode", async () => {
-    const wrapper = await mountSuspended(ServicesSection, {
-      props: { serviceData: mockService, isSummary: true },
-      slots: {
-        "cta-panel": '<div class="test-custom-cta">Custom CTA</div>',
-      },
-    });
-    expect(wrapper.find(".test-custom-cta").exists()).toBe(false);
-  });
-});