srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/components/02.molecules/profile-section/stories/ProfileSection.stories.ts

@@ -0,0 +1,154 @@
+import ProfileSection from "../ProfileSection.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof ProfileSection> = {
+  title: "Molecules/ProfileSection",
+  component: ProfileSection,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "HTML element to render as the root",
+    },
+    profilePicture: {
+      control: "object",
+      description: "Profile picture src and alt text",
+    },
+    profileInfoCount: {
+      control: { type: "number", min: 1, step: 1 },
+      description: "Number of profile-info slot blocks to render",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    tag: "div",
+    profilePicture: {
+      src: "/images/services/service-balayage.jpg",
+      alt: "Natasha — mobile hairdresser in Bath",
+    },
+    profileInfoCount: 3,
+    styleClassPassthrough: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProfileSection>;
+
+// ─── Stories ─────────────────────────────────────────────────────────────────
+
+/** Default — three profile-info blocks with representative content. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { ProfileSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProfileSection v-bind="args">
+        <template #profile-info-1>
+          <div class="experience">
+            <p class="page-body-normal">With over 10 years of experience as a mobile hairdresser, Natasha brings the salon to you — whether you're at home, in the office, or getting ready for a special occasion.</p>
+          </div>
+        </template>
+        <template #profile-info-2>
+          <div class="location">
+            <p class="page-body-normal">Based in <span class="highlight">Bath</span>, covering the surrounding area including Bristol, Frome, and beyond.</p>
+          </div>
+        </template>
+        <template #profile-info-3>
+          <div class="services">
+            <p class="page-body-normal">Specialising in <a href="#" class="highlight">cuts</a>, <a href="#" class="highlight">colour</a>, and <a href="#" class="highlight">styling</a> for all hair types.</p>
+          </div>
+        </template>
+      </ProfileSection>
+    `,
+  }),
+};
+
+/** With profile links — demonstrates the optional profileLinks slot. */
+export const WithProfileLinks: Story = {
+  name: "With Profile Links",
+  render: (args) => ({
+    components: { ProfileSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProfileSection v-bind="args">
+        <template #profile-info-1>
+          <div class="experience">
+            <p class="page-body-normal">With over 10 years of experience as a mobile hairdresser, Natasha brings the salon to you.</p>
+          </div>
+        </template>
+        <template #profile-info-2>
+          <div class="location">
+            <p class="page-body-normal">Based in <span class="highlight">Bath</span>, covering the surrounding area including Bristol, Frome, and beyond.</p>
+          </div>
+        </template>
+        <template #profile-info-3>
+          <div class="services">
+            <p class="page-body-normal">Specialising in <a href="#" class="highlight">cuts</a>, <a href="#" class="highlight">colour</a>, and <a href="#" class="highlight">styling</a> for all hair types.</p>
+          </div>
+        </template>
+        <template #profileLinks>
+          <a href="#">Instagram</a>
+          <a href="#">Book now</a>
+        </template>
+      </ProfileSection>
+    `,
+  }),
+};
+
+/** Section tag — renders the root as a semantic section element. */
+export const AsSectionTag: Story = {
+  name: "As section Tag",
+  args: {
+    tag: "section",
+  },
+  render: (args) => ({
+    components: { ProfileSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProfileSection v-bind="args">
+        <template #profile-info-1>
+          <p class="page-body-normal">Profile information block one.</p>
+        </template>
+        <template #profile-info-2>
+          <p class="page-body-normal">Profile information block two.</p>
+        </template>
+        <template #profile-info-3>
+          <p class="page-body-normal">Profile information block three.</p>
+        </template>
+      </ProfileSection>
+    `,
+  }),
+};
+
+/** Custom count — renders a different number of profile-info slot blocks. */
+export const CustomInfoCount: Story = {
+  name: "Custom Profile Info Count",
+  args: {
+    profileInfoCount: 2,
+  },
+  render: (args) => ({
+    components: { ProfileSection },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProfileSection v-bind="args">
+        <template #profile-info-1>
+          <p class="page-body-normal">First block of information about this person.</p>
+        </template>
+        <template #profile-info-2>
+          <p class="page-body-normal">Second block of information about this person.</p>
+        </template>
+      </ProfileSection>
+    `,
+  }),
+};

package/app/components/02.molecules/profile-section/tests/ProfileSection.spec.ts

@@ -0,0 +1,147 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ProfileSection from "../ProfileSection.vue";
+
+const defaultProps = {
+  profilePicture: { src: "/images/test.jpg", alt: "Test profile picture" },
+};
+
+describe("ProfileSection", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: {
+        ...defaultProps,
+        styleClassPassthrough: ["custom-class"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("renders with the correct tag when tag prop is provided", async () => {
+    for (const tag of ["section", "article", "main"] as const) {
+      const wrapper = await mountSuspended(ProfileSection, {
+        props: { ...defaultProps, tag },
+      });
+      expect(wrapper.element.tagName.toLowerCase()).toBe(tag);
+    }
+  });
+
+  it("renders profilePicture with correct src and alt", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: {
+        profilePicture: { src: "/images/profile.jpg", alt: "Jane Doe" },
+      },
+    });
+    const img = wrapper.find("img");
+    expect(img.attributes("src")).toContain("profile.jpg");
+    expect(img.attributes("alt")).toBe("Jane Doe");
+  });
+
+  it("renders 3 profile-info blocks by default", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+    });
+    const blocks = wrapper.findAll(".profile-info-block");
+    expect(blocks.length).toBe(3);
+  });
+
+  it("renders the correct number of profile-info blocks from profileInfoCount", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, profileInfoCount: 5 },
+    });
+    const blocks = wrapper.findAll(".profile-info-block");
+    expect(blocks.length).toBe(5);
+  });
+
+  it("renders named profile-info slot content", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, profileInfoCount: 2 },
+      slots: {
+        "profile-info-1": "<p>First info block</p>",
+        "profile-info-2": "<p>Second info block</p>",
+      },
+    });
+    expect(wrapper.html()).toContain("First info block");
+    expect(wrapper.html()).toContain("Second info block");
+  });
+
+  it("adds aria-labelledby referencing the heading id when tag is section", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, tag: "section" },
+    });
+    const root = wrapper.find(".profile-section");
+    const labelledBy = root.attributes("aria-labelledby");
+    expect(labelledBy).toBeTruthy();
+    const heading = wrapper.find(".hero-text");
+    expect(heading.attributes("id")).toBe(labelledBy);
+  });
+
+  it("adds aria-labelledby referencing the heading id when tag is article", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, tag: "article" },
+    });
+    const root = wrapper.find(".profile-section");
+    const labelledBy = root.attributes("aria-labelledby");
+    expect(labelledBy).toBeTruthy();
+    const heading = wrapper.find(".hero-text");
+    expect(heading.attributes("id")).toBe(labelledBy);
+  });
+
+  it("does not add aria-labelledby when tag is div", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, tag: "div" },
+    });
+    expect(wrapper.find(".profile-section").attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it("does not add aria-labelledby when tag is main", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: { ...defaultProps, tag: "main" },
+    });
+    expect(wrapper.find(".profile-section").attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it("does not render profile-links section when slot is not provided", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+    });
+    expect(wrapper.find(".profile-links").exists()).toBe(false);
+  });
+
+  it("renders profile-links section when profileLinks slot is provided", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: defaultProps,
+      slots: {
+        profileLinks: "<a href='/'>Link</a>",
+      },
+    });
+    expect(wrapper.find(".profile-links").exists()).toBe(true);
+    expect(wrapper.html()).toContain("Link");
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(ProfileSection, {
+      props: {
+        ...defaultProps,
+        styleClassPassthrough: ["extra-class", "another-class"],
+      },
+    });
+    const el = wrapper.find(".profile-section");
+    expect(el.classes()).toContain("extra-class");
+    expect(el.classes()).toContain("another-class");
+  });
+});

package/app/components/02.molecules/profile-section/tests/__snapshots__/ProfileSection.spec.ts.snap

@@ -0,0 +1,29 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ProfileSection > renders correct HTML structure 1`] = `
+"<div class="profile-section custom-class">
+  <header class="profile-section-header">
+    <p class="eyebrow-text mb-0 medium">About Natasha</p>
+    <h2 id="v-0-0" class="hero-text mb-20 display axis-vertical">
+      <!--v-if--><span class="text-block-0 normal">Your </span><span class="text-block-1 accent">mobile hairdresser </span><span class="text-block-2 normal">in Bath</span>
+    </h2>
+  </header>
+  <div class="profile-section-inner">
+    <div class="picture"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test profile picture" class="profile-picture" src="/_ipx/_/images/test.jpg"></div>
+    <div class="profile-info">
+      <div class="profile-info-content">
+        <div class="profile-info-block">
+          <p>Profile info content 1</p>
+        </div>
+        <div class="profile-info-block">
+          <p>Profile info content 2</p>
+        </div>
+        <div class="profile-info-block">
+          <p>Profile info content 3</p>
+        </div>
+      </div>
+      <!--v-if-->
+    </div>
+  </div>
+</div>"
+`;

package/app/components/02.molecules/stepper-list/StepperList.vue

@@ -0,0 +1,158 @@
+<template>
+  <component :is="tag" class="stepper-list" :class="[elementClasses, { 'has-connectors': props.connected }]">
+    <li
+      v-for="index in itemCount"
+      :key="index"
+      :class="[
+        { 'has-indicator': $slots[`indicator-${index - 1}`] },
+        `indicator-${props.indicatorAlignment}`,
+        `indicator-${props.indicatorVariant}`,
+      ]"
+    >
+      <div
+        :class="
+          $slots[`indicator-${index - 1}`] ? 'stepper-list__indicator-custom' : 'stepper-list__indicator-counter'
+        "
+      >
+        <slot :name="`indicator-${index - 1}`"></slot>
+      </div>
+      <div>
+        <slot :name="`item-${index - 1}`"></slot>
+      </div>
+    </li>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "ul" | "ol";
+  indicatorAlignment?: "top" | "center";
+  indicatorVariant?: "disc" | "square" | "circle";
+  connected?: boolean;
+  itemCount: number;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "ul",
+  indicatorAlignment: "top",
+  indicatorVariant: "disc",
+  connected: true,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.stepper-list {
+  --_list-padding-block: 1.2rem;
+  --_counter-size: 3rem;
+  --_stepper-list-connector-width: 0.2rem;
+
+  list-style: none;
+  counter-reset: stepper-list;
+  padding: 0;
+
+  li {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 2.2rem;
+    counter-increment: stepper-list;
+    padding-inline-start: 0rem;
+    padding-block: var(--_list-padding-block);
+    position: relative;
+
+    &.indicator-top {
+      align-items: start;
+    }
+
+    &.indicator-center {
+      align-items: center;
+    }
+
+    .stepper-list__indicator-counter::before {
+      content: counter(stepper-list);
+
+      display: grid;
+      place-content: center;
+      width: var(--_counter-size);
+      height: var(--_counter-size);
+      font-size: 1.4rem;
+      font-weight: 600;
+    }
+
+    &.indicator-circle .stepper-list__indicator-counter::before {
+      background-color: var(--stepper-list-counter-circle-background);
+      color: var(--stepper-list-counter-circle-text);
+      border: 2px solid var(--stepper-list-counter-circle-border);
+      border-radius: 100vw;
+    }
+
+    &.indicator-disc .stepper-list__indicator-counter::before {
+      background-color: var(--stepper-list-counter-disc-background);
+      color: var(--stepper-list-counter-disc-text);
+      border: 2px solid var(--stepper-list-counter-disc-border);
+      border-radius: 100vw;
+    }
+
+    &.indicator-square .stepper-list__indicator-counter::before {
+      background-color: var(--stepper-list-counter-square-background);
+      color: var(--stepper-list-counter-square-text);
+      border: 2px solid var(--stepper-list-counter-square-border);
+      border-radius: 0.25rem;
+    }
+
+    &.has-indicator::before {
+      display: none;
+    }
+
+    .stepper-list__indicator-custom,
+    .stepper-list__indicator-counter {
+      anchor-name: --indicator-bubble;
+    }
+
+    .stepper-list__indicator-custom {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      .indicator-icon {
+        color: var(--stepper-list-icon);
+        width: var(--_counter-size);
+        height: var(--_counter-size);
+      }
+    }
+  }
+}
+
+/* Fallback: per-li connectors for browsers without anchor positioning */
+/* @supports not (anchor-name: --x) { */
+.stepper-list.has-connectors li:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--_counter-size) / 2);
+  transform: translateX(-50%);
+  top: calc(1.2rem + 3rem);
+  bottom: calc(-1 * var(--_list-padding-block));
+  width: var(--_stepper-list-connector-width);
+  background-color: var(--stepper-list-connector-color, currentColor);
+}
+/* } */
+
+/* Enhanced: anchor-based connector positioning */
+/* @supports (anchor-name: --x) {
+  .stepper-list.has-connectors li:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    left: anchor(--indicator-bubble, center);
+    transform: translateX(-50%);
+    top: anchor(--indicator-bubble, bottom);
+    bottom: calc(-1 * var(--stepper-list-item-gap, 2.4rem));
+    width: var(--stepper-list-connector-width, 2px);
+    background-color: var(--stepper-list-connector-color, currentColor);
+  }
+} */
+}
+</style>