srcdev-nuxt-components 9.0.15 → 9.0.17

package/app/components/03.organisms/image-galleries/slider-gallery/stories/SliderGallery.stories.ts

@@ -0,0 +1,233 @@
+import SliderGallery from "../SliderGallery.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { IGalleryData } from "~/types/components";
+
+const meta: Meta<typeof SliderGallery> = {
+  title: "Organisms/Image Galleries/Slider Gallery",
+  component: SliderGallery,
+  argTypes: {
+    autoRun: {
+      control: { type: "boolean" },
+      description: "Automatically advance to the next slide",
+    },
+    autoRunInterval: {
+      control: { type: "number", min: 1000, step: 500 },
+      description: "Time between auto-advances in milliseconds",
+    },
+    animationDuration: {
+      control: { type: "number", min: 100, step: 100 },
+      description: "Slide transition duration in milliseconds",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    autoRun: true,
+    autoRunInterval: 7000,
+    animationDuration: 3000,
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A full-screen image slider gallery with animated slide transitions, thumbnail navigation, arrow controls, and keyboard support. Gallery data is passed via v-model:galleryData.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SliderGallery>;
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const sampleSlides: IGalleryData[] = [
+  {
+    src: "https://picsum.photos/seed/gallery1/1920/1080",
+    alt: "Mountain landscape at sunrise",
+    stylist: "NATURE PHOTOGRAPHY",
+    title: "Into the Wild",
+    category: "Landscape",
+    description: "Vast mountain ranges stretching to the horizon at the golden hour of sunrise.",
+    thumbnail: { title: "Into the Wild", description: "Landscape" },
+    textBrightness: "light",
+  },
+  {
+    src: "https://picsum.photos/seed/gallery2/1920/1080",
+    alt: "Urban architecture at dusk",
+    stylist: "URBAN SERIES",
+    title: "City Lights",
+    category: "Architecture",
+    description: "Modern skyscrapers reflecting the warm hues of the setting sun.",
+    thumbnail: { title: "City Lights", description: "Architecture" },
+    textBrightness: "light",
+  },
+  {
+    src: "https://picsum.photos/seed/gallery3/1920/1080",
+    alt: "Ocean waves on a sandy beach",
+    stylist: "COASTAL COLLECTION",
+    title: "Shoreline",
+    category: "Seascape",
+    description: "Gentle waves rolling over golden sand as the tide comes in.",
+    thumbnail: { title: "Shoreline", description: "Seascape" },
+    textBrightness: "light",
+  },
+  {
+    src: "https://picsum.photos/seed/gallery4/1920/1080",
+    alt: "Dense forest path in autumn",
+    stylist: "FOREST SERIES",
+    title: "Through the Trees",
+    category: "Nature",
+    description: "A winding path through autumn foliage in a dense woodland.",
+    thumbnail: { title: "Through the Trees", description: "Nature" },
+    textBrightness: "dark",
+  },
+  {
+    src: "https://picsum.photos/seed/gallery5/1920/1080",
+    alt: "Snow-capped peaks in winter",
+    stylist: "WINTER COLLECTION",
+    title: "Frozen Peaks",
+    category: "Winter",
+    description: "Remote snow-capped summits under a crystal-clear winter sky.",
+    thumbnail: { title: "Frozen Peaks", description: "Winter" },
+    textBrightness: "light",
+  },
+];
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { SliderGallery },
+    setup() {
+      const galleryData = ref<IGalleryData[]>(sampleSlides);
+      return { args, galleryData };
+    },
+    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
+  }),
+};
+
+export const AutoRunDisabled: Story = {
+  name: "Auto-Run Disabled",
+  args: {
+    autoRun: false,
+  },
+  render: (args) => ({
+    components: { SliderGallery },
+    setup() {
+      const galleryData = ref<IGalleryData[]>(sampleSlides);
+      return { args, galleryData };
+    },
+    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Slides only advance when the user clicks the arrow buttons or uses arrow keys.",
+      },
+    },
+  },
+};
+
+export const FastTransition: Story = {
+  name: "Fast Transition (500ms)",
+  args: {
+    animationDuration: 500,
+    autoRunInterval: 3000,
+  },
+  render: (args) => ({
+    components: { SliderGallery },
+    setup() {
+      const galleryData = ref<IGalleryData[]>(sampleSlides);
+      return { args, galleryData };
+    },
+    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
+  }),
+};
+
+export const SlowTransition: Story = {
+  name: "Slow Transition (5000ms)",
+  args: {
+    animationDuration: 5000,
+    autoRunInterval: 10000,
+  },
+  render: (args) => ({
+    components: { SliderGallery },
+    setup() {
+      const galleryData = ref<IGalleryData[]>(sampleSlides);
+      return { args, galleryData };
+    },
+    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
+  }),
+};
+
+export const SingleSlide: Story = {
+  name: "Single Slide",
+  args: {
+    autoRun: false,
+  },
+  render: (args) => ({
+    components: { SliderGallery },
+    setup() {
+      const galleryData = ref<IGalleryData[]>([sampleSlides[0]!]);
+      return { args, galleryData };
+    },
+    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Gallery with only one image — navigation buttons are still rendered.",
+      },
+    },
+  },
+};
+
+export const MinimalSlideData: Story = {
+  name: "Minimal Slide Data",
+  args: {
+    autoRun: false,
+  },
+  render: (args) => ({
+    components: { SliderGallery },
+    setup() {
+      const galleryData = ref<IGalleryData[]>([
+        { src: "https://picsum.photos/seed/min1/1920/1080", alt: "Image one", textBrightness: "light" },
+        { src: "https://picsum.photos/seed/min2/1920/1080", alt: "Image two", textBrightness: "dark" },
+        { src: "https://picsum.photos/seed/min3/1920/1080", alt: "Image three", textBrightness: "light" },
+      ]);
+      return { args, galleryData };
+    },
+    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Only src, alt, and textBrightness are required — all content overlay fields are optional.",
+      },
+    },
+  },
+};
+
+export const EmptyGallery: Story = {
+  name: "Empty Gallery",
+  render: (args) => ({
+    components: { SliderGallery },
+    setup() {
+      const galleryData = ref<IGalleryData[]>([]);
+      return { args, galleryData };
+    },
+    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "When galleryData is empty the loading state is dismissed immediately.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/image-galleries/slider-gallery/tests/SliderGallery.spec.ts

@@ -0,0 +1,226 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import SliderGallery from "../SliderGallery.vue";
+import type { IGalleryData } from "~/types/components";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const mockGalleryData: IGalleryData[] = [
+  {
+    src: "/images/slide-1.jpg",
+    alt: "Slide 1",
+    stylist: "Stylist One",
+    title: "First Slide",
+    category: "Fashion",
+    description: "Description for first slide",
+    thumbnail: { title: "Thumb 1", description: "Thumb desc 1" },
+    textBrightness: "light",
+  },
+  {
+    src: "/images/slide-2.jpg",
+    alt: "Slide 2",
+    title: "Second Slide",
+    category: "Style",
+    thumbnail: { title: "Thumb 2", description: "Thumb desc 2" },
+    textBrightness: "dark",
+  },
+  {
+    src: "/images/slide-3.jpg",
+    alt: "Slide 3",
+    textBrightness: "light",
+  },
+];
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type MockImageInstance = {
+  src: string;
+  onload: (() => void) | null;
+  onerror: (() => void) | null;
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Mount the gallery and simulate the first image loading successfully. */
+async function mountAndLoad(galleryData: IGalleryData[], mockImage: MockImageInstance) {
+  const wrapper = await mountSuspended(SliderGallery, {
+    props: { galleryData },
+  });
+  mockImage.onload?.();
+  await nextTick(); // let onMounted resume after Promise.race resolves
+  vi.advanceTimersByTime(500); // fire the 500ms loading fade-out timeout
+  await nextTick(); // let Vue update the DOM
+  return wrapper;
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("SliderGallery", () => {
+  let mockImage: MockImageInstance;
+
+  beforeEach(() => {
+    mockImage = { src: "", onload: null, onerror: null };
+    vi.stubGlobal(
+      "Image",
+      vi.fn(() => mockImage)
+    );
+  });
+
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(SliderGallery);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure after load", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("has slider-gallery class on root", async () => {
+    const wrapper = await mountSuspended(SliderGallery);
+    expect(wrapper.classes()).toContain("slider-gallery");
+  });
+
+  // ─── Loading state ────────────────────────────────────────────────────────
+
+  it("shows loading state before images load", async () => {
+    const wrapper = await mountSuspended(SliderGallery, {
+      props: { galleryData: mockGalleryData },
+    });
+    expect(wrapper.find(".loading-state").exists()).toBe(true);
+  });
+
+  it("hides gallery content before images load", async () => {
+    const wrapper = await mountSuspended(SliderGallery, {
+      props: { galleryData: mockGalleryData },
+    });
+    expect(wrapper.find(".gallery-content").exists()).toBe(false);
+  });
+
+  it("shows gallery content after image loads", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    expect(wrapper.find(".gallery-content").exists()).toBe(true);
+  });
+
+  it("dismisses loading state when galleryData is empty", async () => {
+    const wrapper = await mountSuspended(SliderGallery, {
+      props: { galleryData: [] },
+    });
+    await nextTick();
+    // galleryLoaded becomes false → loading-state gains the galleryLoaded class
+    expect(wrapper.find(".loading-state.galleryLoaded").exists()).toBe(true);
+  });
+
+  it("resolves loading when first image errors", async () => {
+    const wrapper = await mountSuspended(SliderGallery, {
+      props: { galleryData: mockGalleryData },
+    });
+    mockImage.onerror?.();
+    await nextTick();
+    await nextTick(); // extra tick — onerror → resolve → Promise.race → onMounted resume
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(wrapper.find(".gallery-content").exists()).toBe(true);
+  });
+
+  // ─── Gallery items ────────────────────────────────────────────────────────
+
+  it("renders correct number of slide items", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    expect(wrapper.findAll(".list .item")).toHaveLength(mockGalleryData.length);
+  });
+
+  it("renders correct number of thumbnail items", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    expect(wrapper.findAll(".thumbnail .item")).toHaveLength(mockGalleryData.length);
+  });
+
+  it("renders slide image alt text correctly", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    const images = wrapper.findAll(".list .item img");
+    expect(images[0]?.attributes("alt")).toBe(mockGalleryData[0]?.alt);
+    expect(images[1]?.attributes("alt")).toBe(mockGalleryData[1]?.alt);
+  });
+
+  it("renders thumbnail images with lazy loading", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    const thumbImages = wrapper.findAll(".thumbnail .item img");
+    thumbImages.forEach((img) => {
+      expect(img.attributes("loading")).toBe("lazy");
+    });
+  });
+
+  it("renders slide content fields when provided", async () => {
+    const wrapper = await mountAndLoad([mockGalleryData[0]!], mockImage);
+    expect(wrapper.find(".list .item .author").text()).toBe(mockGalleryData[0]!.stylist);
+    expect(wrapper.find(".list .item .title").text()).toBe(mockGalleryData[0]!.title);
+    expect(wrapper.find(".list .item .topic").text()).toBe(mockGalleryData[0]!.category);
+    expect(wrapper.find(".list .item .description").text()).toBe(mockGalleryData[0]!.description);
+  });
+
+  it("renders thumbnail content when provided", async () => {
+    const wrapper = await mountAndLoad([mockGalleryData[0]!], mockImage);
+    expect(wrapper.find(".thumbnail .item .title").text()).toBe(mockGalleryData[0]!.thumbnail?.title);
+    expect(wrapper.find(".thumbnail .item .description").text()).toBe(mockGalleryData[0]!.thumbnail?.description);
+  });
+
+  // ─── Navigation buttons ───────────────────────────────────────────────────
+
+  it("renders prev and next arrow buttons", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    expect(wrapper.find("#prev").exists()).toBe(true);
+    expect(wrapper.find("#next").exists()).toBe(true);
+  });
+
+  it("prev button has accessible aria-label", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    expect(wrapper.find("#prev").attributes("aria-label")).toBe("Previous image");
+  });
+
+  it("next button has accessible aria-label", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    expect(wrapper.find("#next").attributes("aria-label")).toBe("Next image");
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(SliderGallery, {
+      props: { styleClassPassthrough: "custom-gallery" },
+    });
+    expect(wrapper.classes()).toContain("custom-gallery");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(SliderGallery, {
+      props: { 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(SliderGallery, {
+      props: { styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+
+  // ─── Cleanup ──────────────────────────────────────────────────────────────
+
+  it("removes keydown listener from wrapper on unmount", async () => {
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage);
+    const el = wrapper.element as HTMLElement;
+    const spy = vi.spyOn(el, "removeEventListener");
+    wrapper.unmount();
+    expect(spy).toHaveBeenCalledWith("keydown", expect.any(Function));
+  });
+});

package/app/components/03.organisms/image-galleries/slider-gallery/tests/__snapshots__/SliderGallery.spec.ts.snap

@@ -0,0 +1,69 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SliderGallery > renders correct HTML structure after load 1`] = `
+"<div class="slider-gallery">
+  <div class="loading-state">
+    <div class="loading-spinner"></div>
+    <p>Loading gallery...</p>
+  </div>
+  <div class="gallery-content">
+    <div class="list">
+      <div class="item"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-1.jpg 1x, /_ipx/_/images/slide-1.jpg 2x" alt="Slide 1" src="/_ipx/_/images/slide-1.jpg">
+        <div class="content light">
+          <div class="author light">Stylist One</div>
+          <div class="title light">First Slide</div>
+          <div class="topic light">Fashion</div>
+          <div class="description light">Description for first slide</div>
+          <div class="buttons light"><button>SEE MORE</button></div>
+        </div>
+      </div>
+      <div class="item"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-2.jpg 1x, /_ipx/_/images/slide-2.jpg 2x" alt="Slide 2" src="/_ipx/_/images/slide-2.jpg">
+        <div class="content dark">
+          <div class="author dark"></div>
+          <div class="title dark">Second Slide</div>
+          <div class="topic dark">Style</div>
+          <div class="description dark"></div>
+          <div class="buttons dark"><button>SEE MORE</button></div>
+        </div>
+      </div>
+      <div class="item"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-3.jpg 1x, /_ipx/_/images/slide-3.jpg 2x" alt="Slide 3" src="/_ipx/_/images/slide-3.jpg">
+        <div class="content light">
+          <div class="author light"></div>
+          <div class="title light"></div>
+          <div class="topic light"></div>
+          <div class="description light"></div>
+          <div class="buttons light"><button>SEE MORE</button></div>
+        </div>
+      </div>
+    </div>
+    <div class="thumbnail">
+      <div class="item">
+        <div class="inner"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-1.jpg 1x, /_ipx/_/images/slide-1.jpg 2x" alt="Slide 1" loading="lazy" src="/_ipx/_/images/slide-1.jpg">
+          <div class="content light">
+            <div class="title light">Thumb 1</div>
+            <div class="description light">Thumb desc 1</div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="inner"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-2.jpg 1x, /_ipx/_/images/slide-2.jpg 2x" alt="Slide 2" loading="lazy" src="/_ipx/_/images/slide-2.jpg">
+          <div class="content dark">
+            <div class="title dark">Thumb 2</div>
+            <div class="description dark">Thumb desc 2</div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="inner"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-3.jpg 1x, /_ipx/_/images/slide-3.jpg 2x" alt="Slide 3" loading="lazy" src="/_ipx/_/images/slide-3.jpg">
+          <div class="content light">
+            <div class="title light"></div>
+            <div class="description light"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="arrows"><button id="prev" aria-label="Previous image"><span class="iconify i-ic:outline-keyboard-arrow-left arrows-icon" aria-hidden="true"></span></button><button id="next" aria-label="Next image"><span class="iconify i-ic:outline-keyboard-arrow-right arrows-icon" aria-hidden="true"></span></button></div>
+    <div class="time"></div>
+  </div>
+</div>"
+`;

package/app/components/03.organisms/services/services-grids/ServicesCardGrid.vue

@@ -5,7 +5,7 @@
         <InputButtonCore
           variant="secondary"
           :button-text="`Enquire about ${serviceData.title}`"
-          :href="`/services/${serviceData.slug}`"
+          :href="`/ui/services/services-section/${serviceData.slug}`"
           :style-class-passthrough="['mbs-24']"
         >
           <template #right>

package/app/components/03.organisms/services/services-grids/ServicesSectionGrid.vue

@@ -11,7 +11,7 @@
     >
       <template #summary-link="{ serviceData }">
         <LinkText
-          :to="`/services/${serviceData.slug}`"
+          :to="`/ui/services/services-section/${serviceData.slug}`"
           :link-text="`More about ${serviceData.title}`"
           :style-class-passthrough="['mb-20']"
         />

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

@@ -3,7 +3,7 @@
     :is="tag"
     class="services-section"
     :class="[elementClasses]"
-    :aria-labelledby="needsLabel ? headingId : undefined"
+    :aria-labelledby="ariaLabelledby"
   >
     <div class="services-section__grid" :class="{ 'services-section__grid--reverse': reverse }">
       <div class="image-wrapper">
@@ -166,8 +166,7 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const headingId = useId();
-const needsLabel = computed(() => props.tag === "section" || props.tag === "article");
+const { ariaLabelledby } = useAriaLabelledById(() => props.tag);
 
 const infoWrapperClasses = computed(() => {
   return {