srcdev-nuxt-components 9.1.28 → 9.1.29

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

@@ -47,6 +47,7 @@ type Story = StoryObj<typeof ServicesCard>;
 
 const sampleService: Service = {
   slug: "locs-installation",
+  category: "locs",
   title: "Locs Installation",
   subtitle: "Start your loc journey",
   price: "£120",

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

@@ -7,6 +7,7 @@ import type { Service } from "~/types/types.services";
 
 const mockService: Service = {
   slug: "test-service",
+  category: "hair",
   title: "Test Service",
   subtitle: "A subtitle",
   price: "£50",

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

@@ -57,6 +57,7 @@ type Story = StoryObj<typeof ServicesCardGrid>;
 
 const makeService = (slug: string, title: string, subtitle: string, image: string): Service => ({
   slug,
+  category: "locs",
   title,
   subtitle,
   price: "£120",

package/app/components/03.organisms/services/services-grids/stories/ServicesSectionGrid.stories.ts

@@ -48,6 +48,7 @@ type Story = StoryObj<typeof ServicesSectionGrid>;
 
 const makeService = (slug: string, title: string, subtitle: string, image: string): Service => ({
   slug,
+  category: "locs",
   title,
   subtitle,
   price: "£120",

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

@@ -7,6 +7,7 @@ import type { Service } from "~/types/types.services";
 
 const makeService = (slug: string, title: string): Service => ({
   slug,
+  category: "hair",
   title,
   subtitle: `Subtitle for ${title}`,
   price: "£50",

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

@@ -7,6 +7,7 @@ import type { Service } from "~/types/types.services";
 
 const makeService = (slug: string, title: string): Service => ({
   slug,
+  category: "hair",
   title,
   subtitle: `Subtitle for ${title}`,
   price: "£50",

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

@@ -4,7 +4,7 @@ exports[`ServicesSectionGrid > renders correct HTML structure 1`] = `
 "<div class="services-grid">
   <div class="services-section">
     <div class="services-section__grid">
-      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
       <div class="info-wrapper is-summary align-center">
         <div class="eyebrow-text large">Subtitle for Locs Installation</div>
         <h2 class="hero-text mb-20 title axis-horizontal">
@@ -31,7 +31,7 @@ exports[`ServicesSectionGrid > renders correct HTML structure 1`] = `
   </div>
   <div class="services-section">
     <div class="services-section__grid">
-      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
       <div class="info-wrapper is-summary align-center">
         <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
         <h2 class="hero-text mb-20 title axis-horizontal">
@@ -58,7 +58,7 @@ exports[`ServicesSectionGrid > renders correct HTML structure 1`] = `
   </div>
   <div class="services-section">
     <div class="services-section__grid">
-      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
       <div class="info-wrapper is-summary align-center">
         <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
         <h2 class="hero-text mb-20 title axis-horizontal">

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

@@ -69,6 +69,7 @@ type Story = StoryObj<typeof ServicesSection>;
 
 const sampleService: Service = {
   slug: "locs-installation",
+  category: "locs",
   title: "Locs Installation",
   subtitle: "Start your loc journey",
   price: "£120",

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

@@ -7,6 +7,7 @@ import type { Service } from "~/types/types.services";
 
 const mockService: Service = {
   slug: "test-service",
+  category: "hair",
   title: "Test Service",
   subtitle: "A subtitle",
   price: "£50",

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

@@ -3,7 +3,7 @@
 exports[`ServicesSection > renders correct HTML structure 1`] = `
 "<div class="services-section">
   <div class="services-section__grid">
-    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="eager" class="image" src="/_ipx/_/images/test.jpg"></div>
+    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="image" src="/_ipx/_/images/test.jpg"></div>
     <div class="info-wrapper">
       <div class="eyebrow-text large">A subtitle</div>
       <h2 class="hero-text mb-20 title axis-horizontal">

package/app/layouts/default.vue

@@ -62,9 +62,11 @@ const responsiveNavLinks = {
       childLinksTitle: "UI Components",
       childLinks: [
         { name: "Wipe Away Vertical", path: "/ui/wipe-away-vertical" },
+        { name: "Scroll Reveal Image", path: "/ui/scroll-reveal-image" },
         { name: "Tooltips", path: "/ui/tooltips" },
         { name: "Marquee Scroller", path: "/ui/marquee-scroller" },
         { name: "Banner", path: "/ui/display-banner" },
+        { name: "Banner Video", path: "/banner-video" },
         { name: "Section Parallax", path: "/ui/section-parallax" },
         { name: "Animated SVG Text", path: "/ui/animated-svg-text" },
         { name: "Carousel (Basic)", path: "/ui/carousel-basic" },

package/app/pages/banner-video.vue

@@ -0,0 +1,296 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <BannerVideo
+          src="/images/banners/video/lake-banner.mp4"
+          poster="/images/banners/video/lake-banner.jpg"
+          alt="A serene lake landscape"
+          :max-height="maxHeight"
+          :max-height-tablet="maxHeightTablet || undefined"
+          :max-height-mobile="maxHeightMobile || undefined"
+          :aspect-ratio="aspectRatio"
+          :tag="tag"
+          :object-fit="objectFit"
+          :vertical-position="verticalPosition"
+          :horizontal-position="horizontalPosition"
+          :style-class-passthrough="['mbe-32']"
+        />
+
+        <LayoutRow tag="div" variant="full-width">
+          <div class="banner-video-demo-controls">
+            <p class="demo-controls__heading">Props</p>
+
+            <div class="demo-controls__row">
+              <MultipleRadiobuttons
+                v-model="maxHeight"
+                v-model:field-data="maxHeightData"
+                name="maxHeight"
+                label="maxHeight"
+                legend="maxHeight (desktop)"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+
+            <div class="demo-controls__row">
+              <MultipleRadiobuttons
+                v-model="maxHeightTablet"
+                v-model:field-data="maxHeightTabletData"
+                name="maxHeightTablet"
+                label="maxHeightTablet"
+                legend="maxHeightTablet (≥768px, falls back to maxHeight)"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+
+            <div class="demo-controls__row">
+              <MultipleRadiobuttons
+                v-model="maxHeightMobile"
+                v-model:field-data="maxHeightMobileData"
+                name="maxHeightMobile"
+                label="maxHeightMobile"
+                legend="maxHeightMobile (<768px, falls back through tablet → desktop)"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+
+            <div class="demo-controls__row">
+              <MultipleRadiobuttons
+                v-model="aspectRatio"
+                v-model:field-data="aspectRatioData"
+                name="aspectRatio"
+                label="aspectRatio"
+                legend="aspectRatio"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+
+            <div class="demo-controls__row">
+              <MultipleRadiobuttons
+                v-model="objectFit"
+                v-model:field-data="objectFitData"
+                name="objectFit"
+                label="objectFit"
+                legend="objectFit"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+
+            <div class="demo-controls__row">
+              <MultipleRadiobuttons
+                v-model="verticalPosition"
+                v-model:field-data="verticalPositionData"
+                name="verticalPosition"
+                label="verticalPosition"
+                legend="verticalPosition"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+
+            <div class="demo-controls__row">
+              <MultipleRadiobuttons
+                v-model="horizontalPosition"
+                v-model:field-data="horizontalPositionData"
+                name="horizontalPosition"
+                label="horizontalPosition"
+                legend="horizontalPosition"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+
+            <div class="demo-controls__row">
+              <MultipleRadiobuttons
+                v-model="tag"
+                v-model:field-data="tagData"
+                name="tag"
+                label="tag"
+                legend="tag"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "BannerVideo",
+  meta: [{ name: "description", content: "BannerVideo component demo" }],
+  bodyAttrs: { class: "banner-video-page" },
+});
+
+const maxHeight = ref("56rem");
+const maxHeightTablet = ref("");
+const maxHeightMobile = ref("");
+const aspectRatio = ref("21/9");
+const tag = ref<"section" | "div" | "header" | "main" | "article">("section");
+const objectFit = ref<"cover" | "contain" | "fill" | "none" | "scale-down">("cover");
+const verticalPosition = ref<"start" | "center" | "end">("center");
+const horizontalPosition = ref<"start" | "center" | "end">("center");
+
+const maxHeightData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "mh-40rem", name: "maxHeight", value: "40rem", label: "40rem" },
+    { id: "mh-56rem", name: "maxHeight", value: "56rem", label: "56rem" },
+    { id: "mh-80rem", name: "maxHeight", value: "80rem", label: "80rem" },
+    { id: "mh-100vh", name: "maxHeight", value: "100vh", label: "100vh" },
+    { id: "mh-none", name: "maxHeight", value: "none", label: "none" },
+  ],
+  total: 5,
+  skip: 0,
+  limit: 5,
+});
+
+const maxHeightTabletData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "mht-unset", name: "maxHeightTablet", value: "", label: "unset" },
+    { id: "mht-32rem", name: "maxHeightTablet", value: "32rem", label: "32rem" },
+    { id: "mht-40rem", name: "maxHeightTablet", value: "40rem", label: "40rem" },
+    { id: "mht-56rem", name: "maxHeightTablet", value: "56rem", label: "56rem" },
+  ],
+  total: 4,
+  skip: 0,
+  limit: 4,
+});
+
+const maxHeightMobileData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "mhm-unset", name: "maxHeightMobile", value: "", label: "unset" },
+    { id: "mhm-24rem", name: "maxHeightMobile", value: "24rem", label: "24rem" },
+    { id: "mhm-32rem", name: "maxHeightMobile", value: "32rem", label: "32rem" },
+    { id: "mhm-40rem", name: "maxHeightMobile", value: "40rem", label: "40rem" },
+  ],
+  total: 4,
+  skip: 0,
+  limit: 4,
+});
+
+const aspectRatioData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "ar-16-9", name: "aspectRatio", value: "16/9", label: "16/9" },
+    { id: "ar-21-9", name: "aspectRatio", value: "21/9", label: "21/9" },
+    { id: "ar-4-3", name: "aspectRatio", value: "4/3", label: "4/3" },
+    { id: "ar-1-1", name: "aspectRatio", value: "1/1", label: "1/1" },
+  ],
+  total: 4,
+  skip: 0,
+  limit: 4,
+});
+
+const tagData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "tag-section", name: "tag", value: "section", label: "section" },
+    { id: "tag-div", name: "tag", value: "div", label: "div" },
+    { id: "tag-header", name: "tag", value: "header", label: "header" },
+    { id: "tag-main", name: "tag", value: "main", label: "main" },
+    { id: "tag-article", name: "tag", value: "article", label: "article" },
+  ],
+  total: 5,
+  skip: 0,
+  limit: 5,
+});
+
+const objectFitData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "fit-cover", name: "objectFit", value: "cover", label: "cover" },
+    { id: "fit-contain", name: "objectFit", value: "contain", label: "contain" },
+    { id: "fit-fill", name: "objectFit", value: "fill", label: "fill" },
+    { id: "fit-none", name: "objectFit", value: "none", label: "none" },
+    { id: "fit-scale-down", name: "objectFit", value: "scale-down", label: "scale-down" },
+  ],
+  total: 5,
+  skip: 0,
+  limit: 5,
+});
+
+const verticalPositionData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "vp-start", name: "verticalPosition", value: "start", label: "start (top)" },
+    { id: "vp-center", name: "verticalPosition", value: "center", label: "center" },
+    { id: "vp-end", name: "verticalPosition", value: "end", label: "end (bottom)" },
+  ],
+  total: 3,
+  skip: 0,
+  limit: 3,
+});
+
+const horizontalPositionData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "hp-start", name: "horizontalPosition", value: "start", label: "start (left)" },
+    { id: "hp-center", name: "horizontalPosition", value: "center", label: "center" },
+    { id: "hp-end", name: "horizontalPosition", value: "end", label: "end (right)" },
+  ],
+  total: 3,
+  skip: 0,
+  limit: 3,
+});
+</script>
+
+<style lang="css">
+.banner-video-page {
+  .banner-video-demo-controls {
+    padding: 1.6rem;
+    border: 1px solid var(--slate-06);
+    border-radius: 0.8rem;
+    /* background: var(--slate-01); */
+
+    .demo-controls__heading {
+      font-size: 1.1rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--slate-08);
+      margin-block-end: 1.2rem;
+    }
+
+    .demo-controls__row {
+      margin-block-end: 1.2rem;
+
+      &:last-child {
+        margin-block-end: 0;
+      }
+    }
+  }
+}
+</style>