srcdev-nuxt-components 9.5.6 → 9.6.0

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

@@ -6,6 +6,8 @@
           <NuxtImg
             :src="serviceData.image"
             :alt="serviceData.title"
+            width="1920"
+            height="1080"
             :loading="imageLoading"
             :fetchpriority="imageFetchPriority"
             class="service-detail__hero-image"
@@ -15,18 +17,23 @@
       <template #content>
         <PageRow tag="div" :variant="heroContentVariant" class="service-detail__hero-overlay">
           <div class="service-detail__hero-content">
-            <Breadcrumb :items="resolvedBreadcrumbItems" class="service-detail__breadcrumb" />
-            <EyebrowText font-size="large" :text-content="serviceData.subtitle" />
+            <Breadcrumb
+              v-if="resolvedBreadcrumbItems.length"
+              :items="resolvedBreadcrumbItems"
+              :aria-label="breadcrumbAriaLabel"
+              class="service-detail__breadcrumb"
+            />
+            <EyebrowText v-if="serviceData.subtitle" font-size="large" :text-content="serviceData.subtitle" />
             <HeroText
+              v-if="serviceData.title"
               :id="headingId"
               :tag="headerTag"
               font-size="display"
               :text-content="[{ text: serviceData.title, styleClass: 'normal' }]"
-              :style-class-passthrough="['mb-20']"
             />
-            <div class="service-detail__hero-pills">
-              <DisplayPill :label="serviceData.duration" size="md" variant="neutral" />
-              <DisplayPill :label="`From ${serviceData.price}`" size="md" variant="neutral" />
+            <div v-if="serviceData.duration || serviceData.price" class="service-detail__hero-pills">
+              <DisplayPill v-if="serviceData.duration" :label="serviceData.duration" size="md" variant="neutral" />
+              <DisplayPill v-if="serviceData.price" :label="heroPriceLabel" size="md" variant="neutral" />
             </div>
           </div>
         </PageRow>
@@ -36,84 +43,99 @@
     <PageRow tag="div" :variant="bodyVariant" class="service-detail__body-row">
       <div class="service-detail__body">
         <div class="service-detail__main">
-          <p class="page-body-normal">{{ serviceData.longDescription }}</p>
+          <p v-if="serviceData.longDescription" class="page-body-normal">{{ serviceData.longDescription }}</p>
 
           <HeroText
+            v-if="hasHeroHeading"
             :tag="subheadingTag"
             axis="horizontal"
             font-size="subheading"
             :text-content="serviceData.heroHeading"
             :style-class-passthrough="['mb-20']"
           />
-          <p class="page-body-normal">{{ serviceData.whatIsIt }}</p>
+          <p v-if="serviceData.whatIsIt" class="page-body-normal">{{ serviceData.whatIsIt }}</p>
 
-          <HeroText
-            :tag="subheadingTag"
-            axis="horizontal"
-            font-size="subheading"
-            :text-content="[{ text: processHeading, styleClass: 'normal' }]"
-            :style-class-passthrough="['mb-20']"
-          />
-          <StepperList
-            tag="ol"
+          <template v-if="serviceData.process?.length">
+            <HeroText
+              v-if="processHeading"
+              :tag="subheadingTag"
+              axis="horizontal"
+              font-size="subheading"
+              :text-content="[{ text: processHeading, styleClass: 'normal' }]"
+              :style-class-passthrough="['mb-20']"
+            />
+            <StepperList
+              tag="ol"
             indicator-alignment="top"
             indicator-variant="circle"
             :connected="true"
             :item-count="serviceData.process.length"
             class="service-detail__process"
           >
-            <template v-for="(step, i) in serviceData.process" :key="i" #[`item-${i}`]>
-              <p class="page-body-normal">{{ step }}</p>
-            </template>
-          </StepperList>
+              <template v-for="(step, i) in serviceData.process" :key="i" #[`item-${i}`]>
+                <p class="page-body-normal">{{ step }}</p>
+              </template>
+            </StepperList>
+          </template>
 
-          <HeroText
-            :tag="subheadingTag"
-            axis="horizontal"
-            font-size="subheading"
-            :text-content="[{ text: idealForHeading, styleClass: 'normal' }]"
-            :style-class-passthrough="['mb-20']"
-          />
-          <ul class="service-detail__ideal-for">
-            <li v-for="(item, i) in serviceData.idealFor" :key="i" class="service-detail__ideal-for-item">
-              <Icon name="mdi:diamond-stone" class="service-detail__ideal-for-icon" />
-              <p class="page-body-normal">{{ item }}</p>
-            </li>
-          </ul>
-
-          <HeroText
-            :tag="subheadingTag"
-            axis="horizontal"
-            font-size="subheading"
-            :text-content="[{ text: maintenanceHeading, styleClass: 'normal' }]"
-            :style-class-passthrough="['mb-20']"
-          />
-          <p class="page-body-normal">{{ serviceData.maintenance }}</p>
+          <template v-if="serviceData.idealFor?.length">
+            <HeroText
+              v-if="idealForHeading"
+              :tag="subheadingTag"
+              axis="horizontal"
+              font-size="subheading"
+              :text-content="[{ text: idealForHeading, styleClass: 'normal' }]"
+              :style-class-passthrough="['mb-20']"
+            />
+            <ul class="service-detail__ideal-for">
+              <li v-for="(item, i) in serviceData.idealFor" :key="i" class="service-detail__ideal-for-item">
+                <Icon :name="idealForIcon" class="service-detail__ideal-for-icon" aria-hidden="true" />
+                <p class="page-body-normal">{{ item }}</p>
+              </li>
+            </ul>
+          </template>
+
+          <template v-if="serviceData.maintenance">
+            <HeroText
+              v-if="maintenanceHeading"
+              :tag="subheadingTag"
+              axis="horizontal"
+              font-size="subheading"
+              :text-content="[{ text: maintenanceHeading, styleClass: 'normal' }]"
+              :style-class-passthrough="['mb-20']"
+            />
+            <p class="page-body-normal">{{ serviceData.maintenance }}</p>
+          </template>
 
-          <HeroText
-            :tag="subheadingTag"
-            axis="horizontal"
-            font-size="subheading"
-            :text-content="[{ text: faqsHeading, styleClass: 'normal' }]"
-            :style-class-passthrough="['mb-20']"
-          />
-          <div class="service-detail__faqs">
-            <div v-for="(faq, i) in serviceData.faqs" :key="i" class="service-detail__faq">
-              <h3 class="service-detail__faq-question">{{ faq.question }}</h3>
-              <p class="page-body-normal">{{ faq.answer }}</p>
+          <template v-if="serviceData.faqs?.length">
+            <HeroText
+              v-if="faqsHeading"
+              :tag="subheadingTag"
+              axis="horizontal"
+              font-size="subheading"
+              :text-content="[{ text: faqsHeading, styleClass: 'normal' }]"
+              :style-class-passthrough="['mb-20']"
+            />
+            <div class="service-detail__faqs">
+              <div v-for="(faq, i) in serviceData.faqs" :key="i" class="service-detail__faq">
+                <component :is="faqQuestionTag" v-if="faq.question" class="service-detail__faq-question">
+                  {{ faq.question }}
+                </component>
+                <p v-if="faq.answer" class="page-body-normal">{{ faq.answer }}</p>
+              </div>
             </div>
-          </div>
+          </template>
         </div>
 
         <aside class="service-detail__sidebar">
           <GlassPanel :style-class-passthrough="['service-detail__booking-card']">
-            <p class="service-detail__sidebar-label">{{ bookingHeading }}</p>
+            <p v-if="bookingHeading" class="service-detail__sidebar-label">{{ bookingHeading }}</p>
 
-            <div class="service-detail__sidebar-row">
+            <div v-if="serviceData.price" class="service-detail__sidebar-row">
               <span>{{ priceLabel }}</span>
               <span>{{ serviceData.price }}</span>
             </div>
-            <div class="service-detail__sidebar-row">
+            <div v-if="serviceData.duration" class="service-detail__sidebar-row">
               <span>{{ durationLabel }}</span>
               <span>{{ serviceData.duration }}</span>
             </div>
@@ -132,12 +154,12 @@
           </GlassPanel>
 
           <div v-if="relatedServices.length" class="service-detail__related">
-            <p class="service-detail__sidebar-label">{{ relatedServicesHeading }}</p>
+            <p v-if="relatedServicesHeading" class="service-detail__sidebar-label">{{ relatedServicesHeading }}</p>
 
             <div class="service-detail__related-items">
               <div
                 v-for="(related, i) in relatedServices"
-                :key="related.slug"
+                :key="`${i}-${related.slug}`"
                 class="service-detail__related-item-slot"
               >
                 <slot name="related-service" :service="related" :index="i">
@@ -145,6 +167,8 @@
                     <NuxtImg
                       :src="related.image"
                       :alt="related.title"
+                      width="640"
+                      height="640"
                       loading="lazy"
                       class="service-detail__related-image"
                     />
@@ -165,15 +189,17 @@
       <div class="service-detail__final-cta">
         <div class="service-detail__final-cta-copy">
           <HeroText
+            v-if="finalCtaHeading"
             :tag="subheadingTag"
             axis="horizontal"
             font-size="subheading"
             :text-content="[{ text: finalCtaHeading, styleClass: 'normal' }]"
-            :style-class-passthrough="['mbs-0', 'mbe-8']"
           />
-          <p class="page-body-normal">{{ finalCtaBody }}</p>
+          <p v-if="finalCtaBody" class="page-body-normal">{{ finalCtaBody }}</p>
+        </div>
+        <div v-if="$slots['final-cta']" class="service-detail__final-cta-action">
+          <slot name="final-cta" :service-data="serviceData"></slot>
         </div>
-        <slot name="final-cta" :service-data="serviceData"></slot>
       </div>
     </PageRow>
   </component>
@@ -189,6 +215,11 @@ interface Props {
   subheadingTag?: "h2" | "h3";
   serviceData: Service;
   breadcrumbItems?: BreadcrumbItem[];
+  /** aria-label on the breadcrumb nav. Defaults to Breadcrumb's own label; override for localisation. */
+  breadcrumbAriaLabel?: string;
+  /** Text before the price in the hero pill, e.g. "From £95". Override for localisation; "" shows the price alone. */
+  pricePrefix?: string;
+  idealForIcon?: string;
   heroImageVariant?: "full" | "popout" | "content" | "inset-content";
   heroContentVariant?: "full" | "popout" | "content" | "inset-content";
   bodyVariant?: "full" | "popout" | "content" | "inset-content";
@@ -216,6 +247,9 @@ const props = withDefaults(defineProps<Props>(), {
   headerTag: "h1",
   subheadingTag: "h2",
   breadcrumbItems: undefined,
+  breadcrumbAriaLabel: undefined,
+  pricePrefix: "From",
+  idealForIcon: "mdi:diamond-stone",
   heroImageVariant: "full",
   heroContentVariant: "content",
   bodyVariant: "content",
@@ -238,12 +272,20 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
+// No title means no heading to point at, so don't label the landmark from one.
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => (props.serviceData.title ? props.tag : "div"));
+
+const heroPriceLabel = computed(() => `${props.pricePrefix} ${props.serviceData.price}`.trim());
+const hasHeroHeading = computed(() => Boolean(props.serviceData.heroHeading?.some((item) => item.text)));
+const faqQuestionTag = computed(() => (props.subheadingTag === "h2" ? "h3" : "h4"));
 
 // Falls back to a plain, non-linked breadcrumb built from the service's own category/title
 // when the consumer doesn't pass real routes — routing is always the consumer's decision.
 const resolvedBreadcrumbItems = computed<BreadcrumbItem[]>(
-  () => props.breadcrumbItems ?? [{ label: props.serviceData.category }, { label: props.serviceData.title }]
+  () =>
+    (props.breadcrumbItems ?? [{ label: props.serviceData.category }, { label: props.serviceData.title }]).filter(
+      (item) => item.label
+    )
 );
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -259,20 +301,22 @@ watch(
 <style lang="css">
 @layer components {
   .service-detail {
+    --_clip-allowance: 0.2em;
+
     container-type: inline-size;
     container-name: service-detail;
 
     .service-detail__hero {
       border-radius: var(--service-detail-hero-border-radius, 0.8rem);
       overflow: hidden;
-      height: var(--service-detail-hero-min-height-mobile, 32rem);
+      min-block-size: var(--service-detail-hero-min-height-mobile, 32rem);
 
       @container (width >= 768px) {
-        height: var(--service-detail-hero-min-height-tablet, 36rem);
+        min-block-size: var(--service-detail-hero-min-height-tablet, 36rem);
       }
 
       @container (width >= 1024px) {
-        height: var(--service-detail-hero-min-height-desktop, 42rem);
+        min-block-size: var(--service-detail-hero-min-height-desktop, 42rem);
       }
 
       .grid-stack__layer {
@@ -309,6 +353,8 @@ watch(
 
         .service-detail__hero-content {
           display: grid;
+          min-inline-size: 0;
+          overflow-wrap: anywhere;
           align-content: var(--service-detail-hero-content-align, end);
 
           .service-detail__breadcrumb {
@@ -319,6 +365,25 @@ watch(
           .eyebrow-text,
           .hero-text {
             color: var(--service-detail-hero-text-colour, white);
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            /* Room for descenders and italic overhang inside the clip, cancelled by the margins. */
+            padding-block-end: var(--_clip-allowance);
+            padding-inline-end: var(--_clip-allowance);
+            margin-inline-end: calc(-1 * var(--_clip-allowance));
+          }
+
+          .eyebrow-text {
+            margin-block-end: calc(-1 * var(--_clip-allowance));
+            -webkit-line-clamp: var(--service-detail-hero-eyebrow-line-clamp, none);
+            line-clamp: var(--service-detail-hero-eyebrow-line-clamp, none);
+          }
+
+          .hero-text {
+            margin-block: 2rem calc(2rem - var(--_clip-allowance));
+            -webkit-line-clamp: var(--service-detail-hero-title-line-clamp, none);
+            line-clamp: var(--service-detail-hero-title-line-clamp, none);
           }
 
           .service-detail__hero-pills {
@@ -347,6 +412,7 @@ watch(
 
       .service-detail__main {
         min-inline-size: 0;
+        overflow-wrap: anywhere;
         display: flex;
         flex-direction: column;
         gap: var(--service-detail-main-section-gap, 2.4rem);
@@ -378,8 +444,8 @@ watch(
           align-items: flex-start;
           gap: var(--service-detail-ideal-for-item-gap, 1rem);
           padding: var(--service-detail-ideal-for-item-padding, 1.6rem);
-          background-color: var(--service-detail-ideal-for-item-background, var(--slate-09));
-          border: 1px solid var(--service-detail-ideal-for-item-border-colour, var(--slate-06));
+          background-color: var(--service-detail-ideal-for-item-background, var(--theme-surface-subtle));
+          border: 1px solid var(--service-detail-ideal-for-item-border-colour, transparent);
           border-radius: var(--service-detail-ideal-for-item-border-radius, 0.4rem);
 
           .service-detail__ideal-for-icon {
@@ -392,6 +458,7 @@ watch(
 
           p {
             margin: 0;
+            min-inline-size: 0;
           }
         }
       }
@@ -420,6 +487,8 @@ watch(
     }
 
     .service-detail__sidebar {
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
       display: flex;
       flex-direction: column;
       gap: var(--service-detail-sidebar-gap, 2rem);
@@ -428,6 +497,11 @@ watch(
 
       .service-detail__sidebar-label {
         margin: 0 0 var(--service-detail-sidebar-label-margin-block-end, 1.6rem);
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        -webkit-line-clamp: var(--service-detail-sidebar-label-line-clamp, none);
+        line-clamp: var(--service-detail-sidebar-label-line-clamp, none);
         font-size: var(--service-detail-sidebar-label-font-size, 1.2rem);
         text-transform: uppercase;
         letter-spacing: var(--service-detail-sidebar-label-letter-spacing, 0.05em);
@@ -451,7 +525,21 @@ watch(
           justify-content: var(--service-detail-sidebar-row-book-cta-justify-content, end);
         }
 
+        span:last-child {
+          flex: 1 1 0;
+          min-inline-size: 0;
+          text-align: end;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          -webkit-line-clamp: var(--service-detail-sidebar-value-line-clamp, none);
+          line-clamp: var(--service-detail-sidebar-value-line-clamp, none);
+        }
+
         span:first-child {
+          flex: 0 0 auto;
+          max-inline-size: 50%;
+          overflow-wrap: break-word;
           text-transform: uppercase;
           font-size: var(--service-detail-sidebar-row-label-font-size, 1.2rem);
           opacity: var(--service-detail-muted-opacity, 0.7);
@@ -474,14 +562,14 @@ watch(
           gap: var(--service-detail-related-items-gap, 1rem);
 
           .service-detail__related-item-slot {
-            background-color: var(--service-detail-related-item-background, var(--slate-09));
+            background-color: var(--service-detail-related-item-background, var(--theme-surface-subtle));
             padding: var(--service-detail-related-item-padding, 1rem);
-            border: 1px solid var(--service-detail-related-item-border-colour, var(--slate-06));
+            border: 1px solid var(--service-detail-related-item-border-colour, transparent);
             border-radius: var(--service-detail-related-item-border-radius, 0.4rem);
 
             .service-detail__related-item {
               display: grid;
-              grid-template-columns: auto 1fr;
+              grid-template-columns: auto minmax(0, 1fr);
               gap: var(--service-detail-related-item-gap, 1.2rem);
               align-items: center;
 
@@ -498,6 +586,14 @@ watch(
                 margin: 0;
               }
 
+              .service-detail__related-title {
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                -webkit-line-clamp: var(--service-detail-related-title-line-clamp, none);
+                line-clamp: var(--service-detail-related-title-line-clamp, none);
+              }
+
               .service-detail__related-price {
                 margin-block-start: var(--service-detail-related-price-margin-block-start, 0.6rem);
                 font-size: var(--service-detail-related-price-font-size, 1.2rem);
@@ -523,12 +619,41 @@ watch(
         @container (width >= 700px) {
           flex-direction: row;
           align-items: center;
+
+          .service-detail__final-cta-copy {
+            flex: 1 1 0;
+          }
+        }
+
+        .service-detail__final-cta-action {
+          flex-shrink: 0;
+          max-inline-size: 100%;
         }
 
         .service-detail__final-cta-copy {
+          min-inline-size: 0;
+          overflow-wrap: anywhere;
+
+          .hero-text {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            padding-block-end: var(--_clip-allowance);
+            padding-inline-end: var(--_clip-allowance);
+            margin-block: 0 calc(0.8rem - var(--_clip-allowance));
+            margin-inline-end: calc(-1 * var(--_clip-allowance));
+            -webkit-line-clamp: var(--service-detail-final-cta-heading-line-clamp, none);
+            line-clamp: var(--service-detail-final-cta-heading-line-clamp, none);
+          }
+
           p {
             margin: 0;
             opacity: var(--service-detail-muted-opacity, 0.7);
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            -webkit-line-clamp: var(--service-detail-final-cta-body-line-clamp, none);
+            line-clamp: var(--service-detail-final-cta-body-line-clamp, none);
           }
         }
       }