srcdev-nuxt-components 9.1.28 → 9.1.30

package/app/components/01.atoms/scroll-reveal-image/stories/ScrollRevealImage.stories.ts

@@ -0,0 +1,181 @@
+import ScrollRevealImage from "../ScrollRevealImage.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof ScrollRevealImage> = {
+  title: "Atoms/Effects/ScrollRevealImage",
+  component: ScrollRevealImage,
+  argTypes: {
+    src: {
+      control: "text",
+      description: "Image source path",
+      table: { category: "Image" },
+    },
+    alt: {
+      control: "text",
+      description: "Alt text for the image",
+      table: { category: "Image" },
+    },
+    imgWidth: {
+      control: { type: "number" },
+      description: "Intrinsic width of the source image — required for NuxtImg optimisation",
+      table: { category: "Image" },
+    },
+    imgHeight: {
+      control: { type: "number" },
+      description: "Intrinsic height of the source image — required for NuxtImg optimisation",
+      table: { category: "Image" },
+    },
+    frameHeight: {
+      control: "text",
+      description: "Height of the visible clipping frame",
+      table: { category: "Layout" },
+    },
+    parallaxOffset: {
+      control: "text",
+      description: "Distance the image travels vertically as the frame scrolls through the viewport",
+      table: { category: "Layout" },
+    },
+    focalX: {
+      control: "text",
+      description: "Horizontal focal point — CSS object-position x-axis value (e.g. '50%', 'left', '30%')",
+      table: { category: "Layout" },
+    },
+    radius: {
+      control: "text",
+      description: "Border-radius applied to the clipping frame",
+      table: { category: "Appearance" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Single-image parallax reveal built on ScrollRevealFrame. Adds NuxtImg optimisation (src, alt, intrinsic dimensions) and a horizontal focal-point prop (focalX). For arbitrary slot content — grids, video, etc. — use ScrollRevealFrame directly.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollRevealImage>;
+
+const scrollWrapper = (inner: string) => `
+  <div style="padding-block: 60vh; max-width: 860px; margin-inline: auto;">
+    <p style="text-align: center; font-size: 1.4rem; opacity: 0.5; margin-block-end: 4rem;">Scroll to see the parallax effect</p>
+    ${inner}
+  </div>
+`;
+
+export const Default: Story = {
+  args: {
+    src: "/images/page/hero/hero-blonde.jpg",
+    alt: "Blonde hair portrait",
+    imgWidth: 1280,
+    imgHeight: 1920,
+    frameHeight: "540px",
+    parallaxOffset: "36rem",
+    focalX: "50%",
+    radius: "0px",
+  },
+  render: (args) => ({
+    components: { ScrollRevealImage },
+    setup() {
+      return { args };
+    },
+    template: scrollWrapper(`<ScrollRevealImage v-bind="args" />`),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "All props at their default values. A portrait image panning from top to bottom as the frame crosses the viewport.",
+      },
+    },
+  },
+};
+
+export const ShortFrame: Story = {
+  args: {
+    src: "/images/banners/banner-mid-brown.webp",
+    alt: "Mid brown hair banner",
+    imgWidth: 1920,
+    imgHeight: 800,
+    frameHeight: "320px",
+    parallaxOffset: "24rem",
+    focalX: "50%",
+    radius: "0px",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "A shallow banner frame with a wide landscape image. parallaxOffset is reduced proportionally to match the shorter frame height.",
+      },
+    },
+  },
+};
+
+export const RoundedCorners: Story = {
+  args: {
+    src: "/images/banners/banner-ginger.webp",
+    alt: "Ginger hair banner",
+    imgWidth: 1920,
+    imgHeight: 800,
+    frameHeight: "480px",
+    parallaxOffset: "36rem",
+    focalX: "50%",
+    radius: "2.4rem",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "The radius prop applies border-radius to the clipping frame. The image reveal stays contained within the rounded shape.",
+      },
+    },
+  },
+};
+
+export const FocalPoint: Story = {
+  args: {
+    src: "/images/page/hero/hero-red.jpg",
+    alt: "Red hair portrait",
+    imgWidth: 1280,
+    imgHeight: 1920,
+    frameHeight: "540px",
+    parallaxOffset: "36rem",
+    focalX: "75%",
+    radius: "0px",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "focalX pins the horizontal crop axis. Here it is pushed right to keep the subject centred in a narrower frame.",
+      },
+    },
+  },
+};
+
+export const TallFrame: Story = {
+  args: {
+    src: "/images/page/hero/hero-hair.jpg",
+    alt: "Hair portrait",
+    imgWidth: 1280,
+    imgHeight: 1920,
+    frameHeight: "70vh",
+    parallaxOffset: "60rem",
+    focalX: "50%",
+    radius: "0px",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "A tall frame combined with a large parallaxOffset creates the most dramatic reveal — nearly the full image height is traversed as you scroll.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/scroll-reveal-image/tests/ScrollRevealImage.spec.ts

@@ -0,0 +1,235 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ScrollRevealImage from "../ScrollRevealImage.vue";
+
+describe("ScrollRevealImage", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", alt: "Test image" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (all props set)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: {
+        src: "/images/test.jpg",
+        alt: "All props",
+        imgWidth: 800,
+        imgHeight: 600,
+        frameHeight: "400px",
+        parallaxOffset: "20rem",
+        focalX: "30%",
+        radius: "1.6rem",
+        styleClassPassthrough: ["custom-class"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ────────────────────────────────────────────────────────
+
+  it("renders a <figure> as the root element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.element.tagName).toBe("FIGURE");
+  });
+
+  it("always has the reveal-frame class", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.classes()).toContain("reveal-frame");
+  });
+
+  // ─── CSS custom properties ───────────────────────────────────────────────
+
+  it("sets --_frame-height to 540px by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_frame-height")).toBe("540px");
+  });
+
+  it("sets --_parallax-offset to 36rem by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_parallax-offset")).toBe("36rem");
+  });
+
+  it("sets --_radius to 0px by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_radius")).toBe("0px");
+  });
+
+  it("sets --_focal-x to 50% by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_focal-x")).toBe("50%");
+  });
+
+  it("reflects frameHeight prop in --_frame-height", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", frameHeight: "80vh" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_frame-height")).toBe("80vh");
+  });
+
+  it("reflects parallaxOffset prop in --_parallax-offset", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", parallaxOffset: "48rem" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_parallax-offset")).toBe("48rem");
+  });
+
+  it("reflects radius prop in --_radius", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", radius: "2.4rem" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_radius")).toBe("2.4rem");
+  });
+
+  it("reflects focalX prop in --_focal-x", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", focalX: "75%" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_focal-x")).toBe("75%");
+  });
+
+  // ─── Image element ───────────────────────────────────────────────────────
+
+  it("renders an img child element with the reveal-image class", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    // NuxtImg resolves to a real <img> element in the Nuxt test environment,
+    // identified by the data-nuxt-img attribute it injects.
+    const img = wrapper.find("img[data-nuxt-img]");
+    expect(img.exists()).toBe(true);
+    expect(img.classes()).toContain("reveal-image");
+  });
+
+  it("passes src through to the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/hero.jpg" },
+    });
+    // NuxtImg transforms the URL via /_ipx/, so check the original path is present.
+    const src = wrapper.find("img[data-nuxt-img]").attributes("src") ?? "";
+    expect(src).toContain("hero.jpg");
+  });
+
+  it("passes alt to the image element (default empty string)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("alt")).toBe("");
+  });
+
+  it("passes alt to the image element when provided", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", alt: "A hair portrait" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("alt")).toBe("A hair portrait");
+  });
+
+  it("passes imgWidth to the image element (default 1920)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("width")).toBe("1920");
+  });
+
+  it("passes imgHeight to the image element (default 1080)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("height")).toBe("1080");
+  });
+
+  it("passes custom imgWidth and imgHeight to the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", imgWidth: 1280, imgHeight: 1920 },
+    });
+    const img = wrapper.find("img[data-nuxt-img]");
+    expect(img.attributes("width")).toBe("1280");
+    expect(img.attributes("height")).toBe("1920");
+  });
+
+  it("sets loading=lazy on the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("loading")).toBe("lazy");
+  });
+
+  it("sets decoding=async on the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("decoding")).toBe("async");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string to the root", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", styleClassPassthrough: "hero-image" },
+    });
+    expect(wrapper.classes()).toContain("hero-image");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: {
+        src: "/images/test.jpg",
+        styleClassPassthrough: ["hero-image", "mbe-32"],
+      },
+    });
+    expect(wrapper.classes()).toContain("hero-image");
+    expect(wrapper.classes()).toContain("mbe-32");
+  });
+
+  it("does not apply styleClassPassthrough to the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: {
+        src: "/images/test.jpg",
+        styleClassPassthrough: "hero-image",
+      },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").classes()).not.toContain("hero-image");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/01.atoms/scroll-reveal-image/tests/__snapshots__/ScrollRevealImage.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ScrollRevealImage > renders correct HTML structure (all props set) 1`] = `
+"<figure class="reveal-frame custom-class" style="--_frame-height: 400px; --_parallax-offset: 20rem; --_radius: 1.6rem; --_focal-x: 30%;">
+  <div class="reveal-content"><img width="800" height="600" data-nuxt-img="" srcset="/_ipx/s_800x600/images/test.jpg 1x, /_ipx/s_1600x1200/images/test.jpg 2x" class="reveal-image" alt="All props" loading="lazy" decoding="async" src="/_ipx/s_800x600/images/test.jpg"></div>
+</figure>"
+`;
+
+exports[`ScrollRevealImage > renders correct HTML structure (default props) 1`] = `
+"<figure class="reveal-frame" style="--_frame-height: 540px; --_parallax-offset: 36rem; --_radius: 0px; --_focal-x: 50%;">
+  <div class="reveal-content"><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/test.jpg 1x, /_ipx/s_3840x2160/images/test.jpg 2x" class="reveal-image" alt="Test image" loading="lazy" decoding="async" src="/_ipx/s_1920x1080/images/test.jpg"></div>
+</figure>"
+`;

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" },