srcdev-nuxt-components 9.1.22 → 9.1.24

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

@@ -0,0 +1,181 @@
+import ServicesCardGrid from "../ServicesCardGrid.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { Service } from "~/types/types.services";
+
+const meta: Meta<typeof ServicesCardGrid> = {
+  title: "Organisms/Services/Services Card Grid",
+  component: ServicesCardGrid,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "main"],
+      description: "HTML element rendered as the root",
+    },
+    eyebrowConfig: {
+      control: "object",
+      description: "Override eyebrow tag and fontSize on every card — omit keys to use defaults",
+    },
+    heroConfig: {
+      control: "object",
+      description: "Override hero tag and fontSize on every card — omit keys to use defaults",
+    },
+    hrefBase: {
+      control: { type: "text" },
+      description: "Base path for each card's CTA button — appended with the service slug",
+    },
+    buttonTextPrefix: {
+      control: { type: "text" },
+      description: "Prefix for each card's CTA button text — appended with the service title",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    tag: "div",
+    eyebrowConfig: {},
+    heroConfig: {},
+    hrefBase: "/services/",
+    buttonTextPrefix: "Enquire about",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Responsive auto-fit grid of `ServicesCard` components from a `Service[]` array. Button hrefs and text are built from `hrefBase` + `service.slug` and `buttonTextPrefix` + `service.title`. Typography is configured once via `eyebrowConfig` and `heroConfig` and applied to every card.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServicesCardGrid>;
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const makeService = (slug: string, title: string, subtitle: string, image: string): Service => ({
+  slug,
+  title,
+  subtitle,
+  price: "£120",
+  duration: "3–4 hours",
+  image,
+  shortDescription: `Professional ${title.toLowerCase()} service tailored to your hair type and style goals.`,
+  longDescription: "Full description available on the service detail page.",
+  heroHeading: [{ text: `Why choose ${title}?`, styleClass: "normal" }],
+  whatIsIt: `${title} is a popular protective style.`,
+  process: ["Consultation", "Preparation", "Application", "Finishing"],
+  idealFor: ["Natural hair", "All textures"],
+  maintenance: "Regular maintenance recommended every 4–6 weeks.",
+  faqs: [{ question: "How long does it last?", answer: "Results vary by hair type." }],
+  seoTitle: title,
+  seoDescription: `Book a ${title.toLowerCase()} appointment today.`,
+});
+
+const sampleServices: Service[] = [
+  makeService("locs-installation", "Locs Installation", "Start your loc journey", "https://picsum.photos/seed/card-a/600/800"),
+  makeService("locs-retwist", "Locs Retwist", "Keep your locs fresh", "https://picsum.photos/seed/card-b/600/800"),
+  makeService("colour-treatment", "Colour Treatment", "Add dimension and depth", "https://picsum.photos/seed/card-c/600/800"),
+];
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { args, sampleServices };
+    },
+    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Default three-card grid — columns auto-fit above the 250px minimum width.",
+      },
+    },
+  },
+};
+
+export const CustomButtonText: Story = {
+  name: "Custom Button Text",
+  args: {
+    hrefBase: "/services/",
+    buttonTextPrefix: "More about",
+  },
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { args, sampleServices };
+    },
+    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Override hrefBase and buttonTextPrefix to match the consuming app's route structure and copy.",
+      },
+    },
+  },
+};
+
+export const ConfigOverrides: Story = {
+  name: "Config Overrides",
+  args: {
+    eyebrowConfig: { tag: "p", fontSize: "small" },
+    heroConfig: { tag: "h3", fontSize: "title" },
+  },
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { args, sampleServices };
+    },
+    template: `<ServicesCardGrid v-bind="args" :services-data="sampleServices" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "eyebrowConfig and heroConfig are applied uniformly to every card — set heroConfig.tag to h3 when the page already has an h2 above the grid.",
+      },
+    },
+  },
+};
+
+export const SingleCard: Story = {
+  name: "Single Card",
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { args, sampleServices };
+    },
+    template: `<ServicesCardGrid v-bind="args" :services-data="[sampleServices[0]]" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Grid with a single service — the card expands to fill the full column width.",
+      },
+    },
+  },
+};
+
+export const EmptyData: Story = {
+  name: "Empty Data",
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { args };
+    },
+    template: `<ServicesCardGrid v-bind="args" :services-data="[]" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "When servicesData is empty the grid renders with no children — pass an empty array as a safe fallback while data loads.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,196 @@
+import ServicesSectionGrid from "../ServicesSectionGrid.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { Service } from "~/types/types.services";
+
+const meta: Meta<typeof ServicesSectionGrid> = {
+  title: "Organisms/Services/Services Section Grid",
+  component: ServicesSectionGrid,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "main"],
+      description: "HTML element rendered as the root",
+    },
+    useAlternateReverse: {
+      control: { type: "boolean" },
+      description: "Alternate image/content column order on every other section",
+    },
+    summaryAlignment: {
+      control: { type: "select" },
+      options: ["start", "center", "end"],
+      description: "Vertical alignment of the info column in each section",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    tag: "div",
+    useAlternateReverse: false,
+    summaryAlignment: "center",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renders a vertical stack of `ServicesSection` components (summary mode) from a `Service[]` array. Each section includes a summary-link and a CTA button. Alternate image/content column order is controlled via `useAlternateReverse`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServicesSectionGrid>;
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const makeService = (slug: string, title: string, subtitle: string, image: string): Service => ({
+  slug,
+  title,
+  subtitle,
+  price: "£120",
+  duration: "3–4 hours",
+  image,
+  shortDescription: `Professional ${title.toLowerCase()} service tailored to your hair type and style goals.`,
+  longDescription: "Full description available on the service detail page.",
+  heroHeading: [{ text: `Why choose ${title}?`, styleClass: "normal" }],
+  whatIsIt: `${title} is a popular protective style suitable for all hair types.`,
+  process: ["Consultation", "Preparation", "Application", "Finishing"],
+  idealFor: ["Natural hair", "All textures"],
+  maintenance: "Regular maintenance recommended every 4–6 weeks.",
+  faqs: [{ question: "How long does it last?", answer: "Results vary by hair type and aftercare." }],
+  seoTitle: title,
+  seoDescription: `Book a ${title.toLowerCase()} appointment today.`,
+});
+
+const sampleServices: Service[] = [
+  makeService("locs-installation", "Locs Installation", "Start your loc journey", "https://picsum.photos/seed/locs-a/800/600"),
+  makeService("locs-retwist", "Locs Retwist", "Keep your locs fresh", "https://picsum.photos/seed/locs-b/800/600"),
+  makeService("colour-treatment", "Colour Treatment", "Add dimension and depth", "https://picsum.photos/seed/colour/800/600"),
+];
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { ServicesSectionGrid },
+    setup() {
+      return { args, sampleServices };
+    },
+    template: `
+      <ServicesSectionGrid v-bind="args" :services-data="sampleServices">
+        <template #summary-link="{ serviceData }">
+          <a
+            :href="'/services/' + serviceData.slug"
+            style="display:inline-flex;align-items:center;gap:0.4rem;margin-top:1.6rem;color:inherit;"
+          >
+            More about {{ serviceData.title }} →
+          </a>
+        </template>
+      </ServicesSectionGrid>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "summary-link slot receives serviceData as a scoped prop so the href and label can be built from the service slug and title.",
+      },
+    },
+  },
+};
+
+export const AlternateReverse: Story = {
+  name: "Alternate Reverse",
+  args: {
+    useAlternateReverse: true,
+  },
+  render: (args) => ({
+    components: { ServicesSectionGrid },
+    setup() {
+      return { args, sampleServices };
+    },
+    template: `
+      <ServicesSectionGrid v-bind="args" :services-data="sampleServices">
+        <template #summary-link="{ serviceData }">
+          <a :href="'/services/' + serviceData.slug" style="display:inline-flex;margin-top:1.6rem;color:inherit;">
+            More about {{ serviceData.title }} →
+          </a>
+        </template>
+      </ServicesSectionGrid>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "useAlternateReverse — odd-indexed sections flip image/content columns, creating a zigzag layout for visual variety.",
+      },
+    },
+  },
+};
+
+export const NoSlots: Story = {
+  name: "No Slots (empty sections)",
+  render: (args) => ({
+    components: { ServicesSectionGrid },
+    setup() {
+      return { args, sampleServices };
+    },
+    template: `<ServicesSectionGrid v-bind="args" :services-data="sampleServices" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Without slots provided the summary-link and cta areas render empty — use this to verify layout before wiring up navigation.",
+      },
+    },
+  },
+};
+
+export const SingleService: Story = {
+  name: "Single Service",
+  render: (args) => ({
+    components: { ServicesSectionGrid },
+    setup() {
+      return { args, sampleServices };
+    },
+    template: `
+      <ServicesSectionGrid v-bind="args" :services-data="[sampleServices[0]]">
+        <template #summary-link="{ serviceData }">
+          <a :href="'/services/' + serviceData.slug" style="display:inline-flex;margin-top:1.6rem;color:inherit;">
+            More about {{ serviceData.title }} →
+          </a>
+        </template>
+      </ServicesSectionGrid>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Grid with a single service item.",
+      },
+    },
+  },
+};
+
+export const EmptyData: Story = {
+  name: "Empty Data",
+  render: (args) => ({
+    components: { ServicesSectionGrid },
+    setup() {
+      return { args };
+    },
+    template: `<ServicesSectionGrid v-bind="args" :services-data="[]" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "When servicesData is empty the grid renders with no children — pass an empty array as a safe fallback while data loads.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,180 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ServicesCardGrid from "../ServicesCardGrid.vue";
+import type { Service } from "~/types/types.services";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const makeService = (slug: string, title: string): Service => ({
+  slug,
+  title,
+  subtitle: `Subtitle for ${title}`,
+  price: "£50",
+  duration: "60 mins",
+  image: `/images/${slug}.jpg`,
+  shortDescription: `Short description for ${title}.`,
+  longDescription: "Long description.",
+  heroHeading: [{ text: title, styleClass: "normal" }],
+  whatIsIt: "What this service is.",
+  process: ["Step one"],
+  idealFor: ["Everyone"],
+  maintenance: "Maintenance advice.",
+  faqs: [{ question: "A question?", answer: "An answer." }],
+  seoTitle: title,
+  seoDescription: `SEO description for ${title}.`,
+});
+
+const mockServices: Service[] = [
+  makeService("locs-installation", "Locs Installation"),
+  makeService("locs-retwist", "Locs Retwist"),
+  makeService("colour-treatment", "Colour Treatment"),
+];
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ServicesCardGrid", () => {
+  // ─── Mount ─────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ───────────────────────────────────────────────────────
+
+  it("has services-card-grid class on root", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.classes()).toContain("services-card-grid");
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders the tag prop as the root element", async () => {
+    for (const tag of ["section", "main"] as const) {
+      const wrapper = await mountSuspended(ServicesCardGrid, {
+        props: { servicesData: mockServices, tag },
+      });
+      expect(wrapper.element.tagName).toBe(tag.toUpperCase());
+    }
+  });
+
+  // ─── Children ───────────────────────────────────────────────────────────
+
+  it("renders the correct number of service cards", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices },
+    });
+    expect(wrapper.findAll(".services-card")).toHaveLength(mockServices.length);
+  });
+
+  it("renders no cards when servicesData is empty", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: [] },
+    });
+    expect(wrapper.findAll(".services-card")).toHaveLength(0);
+  });
+
+  it("renders a single card correctly", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: [mockServices[0]!] },
+    });
+    expect(wrapper.findAll(".services-card")).toHaveLength(1);
+  });
+
+  // ─── hrefBase ───────────────────────────────────────────────────────────
+
+  it("builds card href from default hrefBase and service slug", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: [mockServices[0]!] },
+    });
+    const link = wrapper.find("a");
+    expect(link.attributes("href")).toContain(mockServices[0]!.slug);
+  });
+
+  it("uses a custom hrefBase in the card button href", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: [mockServices[0]!], hrefBase: "/services/" },
+    });
+    const link = wrapper.find("a");
+    expect(link.attributes("href")).toBe(`/services/${mockServices[0]!.slug}`);
+  });
+
+  // ─── buttonTextPrefix ───────────────────────────────────────────────────
+
+  it("uses default buttonTextPrefix in card button text", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: [mockServices[0]!] },
+    });
+    expect(wrapper.text()).toContain(`Enquire about ${mockServices[0]!.title}`);
+  });
+
+  it("uses a custom buttonTextPrefix in card button text", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: [mockServices[0]!], buttonTextPrefix: "Learn more about" },
+    });
+    expect(wrapper.text()).toContain(`Learn more about ${mockServices[0]!.title}`);
+  });
+
+  // ─── eyebrowConfig / heroConfig ─────────────────────────────────────────
+
+  it("passes eyebrowConfig fontSize to each card", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices, eyebrowConfig: { fontSize: "small" } },
+    });
+    wrapper.findAll(".eyebrow-text").forEach((el) => {
+      expect(el.classes()).toContain("small");
+    });
+  });
+
+  it("passes heroConfig tag to each card", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices, heroConfig: { tag: "h3" } },
+    });
+    wrapper.findAll(".hero-text").forEach((el) => {
+      expect(el.element.tagName).toBe("H3");
+    });
+  });
+
+  // ─── styleClassPassthrough ──────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices, styleClassPassthrough: "custom-grid" },
+    });
+    expect(wrapper.classes()).toContain("custom-grid");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ServicesCardGrid, {
+      props: { servicesData: mockServices, 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(ServicesCardGrid, {
+      props: { servicesData: mockServices, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});