srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/components/01.atoms/animations/entry/stories/EntryAnimation.stories.ts

@@ -0,0 +1,74 @@
+import EntryAnimation from "../EntryAnimation.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof EntryAnimation> = {
+  title: "Components/Effects/EntryAnimation",
+  component: EntryAnimation,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "aside"],
+      description: "HTML tag for the wrapper element",
+      defaultValue: "div",
+    },
+    animationType: {
+      control: { type: "select" },
+      options: ["entry-slide-in", "entry-zoom-reveal", "entry-exit-blur"],
+      description: "Type of entry animation",
+      defaultValue: "entry-slide-in",
+    },
+    styleClassPassthrough: {
+      control: { type: "text" },
+      description: "Additional classes for styling",
+      defaultValue: "",
+    },
+  },
+};
+
+export default meta;
+
+export const EntrySlideIn: StoryObj<typeof EntryAnimation> = {
+  args: {
+    tag: "div",
+    animationType: "entry-slide-in",
+    styleClassPassthrough: "",
+  },
+  render: (args) => ({
+    components: { EntryAnimation },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="height: 200px; background-color: red;">
+        <label style="display: block; font-weight: bold; margin-bottom: 1rem;">Scroll down to reveal animation</label>
+      </div>
+      <div style="padding-block: 600px; background-color: green;  margin-bottom: 1000px;">
+        <EntryAnimation v-bind="args">
+          <template #default>
+            <div style="padding: 2rem; background: #f0f0f0; border-radius: 8px;">
+              Entry Animation Content
+            </div>
+          </template>
+        </EntryAnimation>
+      </div>
+    `,
+  }),
+};
+
+export const ZoomReveal: StoryObj<typeof EntryAnimation> = {
+  args: {
+    tag: "section",
+    animationType: "entry-zoom-reveal",
+    styleClassPassthrough: "",
+  },
+  render: EntrySlideIn.render,
+};
+
+export const EntryExitBlur: StoryObj<typeof EntryAnimation> = {
+  args: {
+    tag: "aside",
+    animationType: "entry-exit-blur",
+    styleClassPassthrough: "",
+  },
+  render: EntrySlideIn.render,
+};

package/app/components/01.atoms/glass-panel/GlassPanel.vue

@@ -0,0 +1,52 @@
+<template>
+  <component :is="tag" class="glass-panel" :class="[elementClasses]">
+    <slot name="default"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main" | "header" | "footer";
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.glass-panel {
+  --_bg: var(--glass-panel-bg);
+  --_border-color: var(--glass-panel-border-color);
+  --_shadow: var(--glass-panel-shadow);
+  --_highlight: var(--glass-panel-highlight);
+
+  position: relative;
+  overflow: hidden;
+  border-radius: 1rem;
+
+  background: var(--_bg);
+  border: 1px solid var(--_border-color);
+  box-shadow: var(--_shadow);
+  backdrop-filter: blur(14px) saturate(180%);
+
+  /* Angled specular highlight — simulates light catching the top edge */
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(
+      135deg,
+      var(--_highlight) 0%,
+      transparent 55%
+    );
+    pointer-events: none;
+  }
+}
+}
+</style>

package/app/components/01.atoms/text-blocks/eyebrow-text/EyebrowText.vue

@@ -0,0 +1,42 @@
+<template>
+  <component :is="tag" class="eyebrow-text" :class="[elementClasses, props.fontSize]">
+    {{ textContent }}
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "p" | "div" | "span";
+  fontSize?: "large" | "medium" | "small";
+  textContent: string;
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  fontSize: "medium",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.eyebrow-text {
+  text-transform: uppercase;
+  color: var(--colour-text-eyebrow);
+
+  &.large {
+    font-size: var(--eyebrow-text-large);
+  }
+
+  &.medium {
+    font-size: var(--eyebrow-text-medium);
+  }
+
+  &.small {
+    font-size: var(--eyebrow-text-small);
+  }
+}
+}
+</style>

package/app/components/01.atoms/text-blocks/eyebrow-text/playwright/eyebrow-text.playwright.ts

@@ -0,0 +1,67 @@
+import { test, expect, type Page, type Locator } from "@playwright/test";
+
+// --- Config ---
+const STORYBOOK_URL = "http://127.0.0.1:6006";
+const STORY_BASE = "atoms-text-blocks-eyebrowtext";
+const HEADING_TIMEOUT = 20_000;
+
+// --- Types ---
+type Args = Record<string, string>;
+
+// --- Constants ---
+const TAGS = ["p", "div", "span"] as const;
+const FONT_SIZES = ["large", "medium", "small"] as const;
+
+// --- Helpers ---
+const getStoryUrl = (args: Args = {}): string => {
+  const url = `${STORYBOOK_URL}/?path=/story/${STORY_BASE}--default`;
+  const argsParam = Object.entries(args)
+    .map(([k, v]) => `${k}:${v}`)
+    .join(";");
+  return argsParam ? `${url}&args=${argsParam}` : url;
+};
+
+const getEyebrow = async (page: Page, args: Args = {}): Promise<Locator> => {
+  await page.goto(getStoryUrl(args), { waitUntil: "load" });
+
+  const frame = page.frameLocator("#storybook-preview-iframe");
+  await frame.locator("#storybook-root > *").waitFor({ state: "visible", timeout: HEADING_TIMEOUT });
+
+  const eyebrow = frame.locator(".eyebrow-text");
+  await eyebrow.waitFor({ state: "visible", timeout: HEADING_TIMEOUT });
+  return eyebrow;
+};
+
+// -------------------------
+// Baseline snapshot (default args)
+// -------------------------
+test.describe("EyebrowText — baseline", () => {
+  test("default matches snapshot", async ({ page }) => {
+    const eyebrow = await getEyebrow(page);
+    await expect(eyebrow).toHaveScreenshot("default.png");
+  });
+});
+
+// -------------------------
+// Tag variants (hold fontSize at default)
+// -------------------------
+test.describe("EyebrowText — tag variants", () => {
+  for (const tag of TAGS) {
+    test(`tag-${tag}`, async ({ page }) => {
+      const eyebrow = await getEyebrow(page, { tag });
+      await expect(eyebrow).toHaveScreenshot(`tag-${tag}.png`);
+    });
+  }
+});
+
+// -------------------------
+// fontSize variants (hold tag at default)
+// -------------------------
+test.describe("EyebrowText — fontSize variants", () => {
+  for (const fontSize of FONT_SIZES) {
+    test(`fontSize-${fontSize}`, async ({ page }) => {
+      const eyebrow = await getEyebrow(page, { fontSize });
+      await expect(eyebrow).toHaveScreenshot(`fontSize-${fontSize}.png`);
+    });
+  }
+});

package/app/components/01.atoms/text-blocks/eyebrow-text/stories/EyebrowText.stories.ts

@@ -0,0 +1,49 @@
+import EyebrowText from "../EyebrowText.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof EyebrowText> = {
+  title: "Atoms/Text Blocks/EyebrowText",
+  component: EyebrowText,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["p", "div", "span"],
+      description: "HTML tag for the text element",
+      defaultValue: "div",
+    },
+    fontSize: {
+      control: { type: "select" },
+      options: ["large", "medium", "small"],
+      description: "Font size",
+      defaultValue: "medium",
+    },
+    textContent: {
+      control: "object",
+      description: "Text content for the eyebrow text element",
+      defaultValue: "Designing Artistry at Home",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional classes",
+      defaultValue: [],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EyebrowText>;
+export const Default: Story = {
+  args: {
+    tag: "div",
+    fontSize: "medium",
+    textContent: "Designing Artistry at Home",
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { EyebrowText },
+    setup() {
+      return { args };
+    },
+    template: `<EyebrowText v-bind="args" />`,
+  }),
+};

package/app/components/01.atoms/text-blocks/eyebrow-text/tests/EyebrowText.spec.ts

@@ -0,0 +1,196 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import EyebrowText from "../EyebrowText.vue";
+
+describe("EyebrowText", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "Hello World" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure with default props", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "Featured Collection" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with all props set", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: {
+        tag: "p",
+        fontSize: "large",
+        textContent: "New Arrivals",
+        styleClassPassthrough: ["custom-class"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure for each tag variant", async () => {
+    for (const tag of ["p", "div", "span"] as const) {
+      const wrapper = await mountSuspended(EyebrowText, {
+        props: { tag, textContent: "Snapshot text" },
+      });
+      expect(wrapper.html()).toMatchSnapshot();
+    }
+  });
+
+  it("renders correct HTML structure for each fontSize variant", async () => {
+    for (const fontSize of ["large", "medium", "small"] as const) {
+      const wrapper = await mountSuspended(EyebrowText, {
+        props: { fontSize, textContent: "Snapshot text" },
+      });
+      expect(wrapper.html()).toMatchSnapshot();
+    }
+  });
+
+  // ─── Tag rendering ───────────────────────────────────────────────────────
+
+  it("renders as <div> by default", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "Default tag" },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders as <p> when tag='p'", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { tag: "p", textContent: "Paragraph tag" },
+    });
+    expect(wrapper.element.tagName).toBe("P");
+  });
+
+  it("renders as <span> when tag='span'", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { tag: "span", textContent: "Span tag" },
+    });
+    expect(wrapper.element.tagName).toBe("SPAN");
+  });
+
+  it("renders as <div> when tag='div'", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { tag: "div", textContent: "Div tag" },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  // ─── Base class ──────────────────────────────────────────────────────────
+
+  it("always has the eyebrow-text class", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "Base class check" },
+    });
+    expect(wrapper.classes()).toContain("eyebrow-text");
+  });
+
+  // ─── fontSize class ──────────────────────────────────────────────────────
+
+  it("applies the medium class by default", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "Default fontSize" },
+    });
+    expect(wrapper.classes()).toContain("medium");
+  });
+
+  it("applies the large class when fontSize='large'", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { fontSize: "large", textContent: "Large text" },
+    });
+    expect(wrapper.classes()).toContain("large");
+  });
+
+  it("applies the small class when fontSize='small'", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { fontSize: "small", textContent: "Small text" },
+    });
+    expect(wrapper.classes()).toContain("small");
+  });
+
+  it("applies only one fontSize class at a time", async () => {
+    const fontSizes = ["large", "medium", "small"] as const;
+    for (const fontSize of fontSizes) {
+      const wrapper = await mountSuspended(EyebrowText, {
+        props: { fontSize, textContent: "One class only" },
+      });
+      const otherSizes = fontSizes.filter((s) => s !== fontSize);
+      otherSizes.forEach((size) => {
+        expect(wrapper.classes()).not.toContain(size);
+      });
+    }
+  });
+
+  // ─── textContent ─────────────────────────────────────────────────────────
+
+  it("renders the textContent string", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "New Arrivals" },
+    });
+    expect(wrapper.text()).toBe("New Arrivals");
+  });
+
+  it("renders an empty string without error", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "" },
+    });
+    expect(wrapper.text()).toBe("");
+  });
+
+  it("renders textContent with special characters correctly", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "Édition Limitée & Co." },
+    });
+    expect(wrapper.text()).toBe("Édition Limitée & Co.");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a styleClassPassthrough array", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: {
+        textContent: "Styled",
+        styleClassPassthrough: ["class-a", "class-b"],
+      },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "Styled", styleClassPassthrough: "solo-class" },
+    });
+    expect(wrapper.classes()).toContain("solo-class");
+  });
+
+  it("renders cleanly with no styleClassPassthrough prop", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: { textContent: "No passthrough" },
+    });
+    expect(wrapper.classes()).toContain("eyebrow-text");
+  });
+
+  // ─── Combined props ───────────────────────────────────────────────────────
+
+  it("renders correctly with all props combined", async () => {
+    const wrapper = await mountSuspended(EyebrowText, {
+      props: {
+        tag: "span",
+        fontSize: "small",
+        textContent: "Limited Edition",
+        styleClassPassthrough: ["promo-label"],
+      },
+    });
+    expect(wrapper.element.tagName).toBe("SPAN");
+    expect(wrapper.classes()).toContain("eyebrow-text");
+    // expect(wrapper.classes()).toContain("small");
+    expect(wrapper.classes()).toContain("promo-label");
+    expect(wrapper.text()).toBe("Limited Edition");
+  });
+});

package/app/components/01.atoms/text-blocks/eyebrow-text/tests/__snapshots__/EyebrowText.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EyebrowText > renders correct HTML structure for each fontSize variant 1`] = `"<div class="eyebrow-text large">Snapshot text</div>"`;
+
+exports[`EyebrowText > renders correct HTML structure for each fontSize variant 2`] = `"<div class="eyebrow-text medium">Snapshot text</div>"`;
+
+exports[`EyebrowText > renders correct HTML structure for each fontSize variant 3`] = `"<div class="eyebrow-text small">Snapshot text</div>"`;
+
+exports[`EyebrowText > renders correct HTML structure for each tag variant 1`] = `"<p class="eyebrow-text medium">Snapshot text</p>"`;
+
+exports[`EyebrowText > renders correct HTML structure for each tag variant 2`] = `"<div class="eyebrow-text medium">Snapshot text</div>"`;
+
+exports[`EyebrowText > renders correct HTML structure for each tag variant 3`] = `"<span class="eyebrow-text medium">Snapshot text</span>"`;
+
+exports[`EyebrowText > renders correct HTML structure with all props set 1`] = `"<p class="eyebrow-text custom-class large">New Arrivals</p>"`;
+
+exports[`EyebrowText > renders correct HTML structure with default props 1`] = `"<div class="eyebrow-text medium">Featured Collection</div>"`;

package/app/components/01.atoms/text-blocks/hero-text/HeroText.vue

@@ -0,0 +1,101 @@
+<template>
+  <component :is="tag" :id="id" class="hero-text" :class="[elementClasses, ...componentClasses]">
+    <Icon v-if="props.icon" :name="props.icon" class="hero-text__icon" />
+    <span v-for="(item, index) in normalisedContent" :key="index" :class="['text-block-' + index, item.styleClass]">
+      {{ item.text }}
+    </span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { TextConfig } from "~/types/components/hero-text";
+
+interface Props {
+  tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  id?: string;
+  axis?: "horizontal" | "vertical";
+  fontSize?: "display" | "title" | "heading" | "subheading" | "label";
+  icon?: string;
+  textContent: TextConfig[];
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  id: undefined,
+  axis: "horizontal",
+  fontSize: "title",
+  icon: undefined,
+  styleClassPassthrough: () => [],
+});
+
+const componentClasses = computed(() => {
+  return [props.fontSize, `axis-${props.axis}`];
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const normalisedContent = computed(() =>
+  props.textContent.map((item, index) => ({
+    ...item,
+    text: item.text.trim() + (index < props.textContent.length - 1 ? " " : ""),
+  }))
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .hero-text {
+    font-family: "Playfair Display";
+    font-weight: 400;
+    font-variation-settings:
+      "wght" 400,
+      "ital" 1;
+    line-height: 1;
+
+    margin: 0;
+
+    &.axis-horizontal {
+      flex-direction: row;
+      gap: 0.5ch;
+    }
+    &.axis-vertical {
+      display: flex;
+      gap: 0.2rem;
+      flex-direction: column;
+    }
+
+    .hero-text__icon {
+      aspect-ratio: 1;
+      color: var(--colour-text-accent);
+    }
+
+    &.display {
+      font-size: var(--hero-text-display);
+    }
+
+    &.title {
+      font-size: var(--hero-text-title);
+    }
+
+    &.heading {
+      font-size: var(--hero-text-heading);
+    }
+
+    &.subheading {
+      font-size: var(--hero-text-subheading);
+
+      .hero-text__icon {
+        width: calc(var(--hero-text-subheading) * 0.75) !important;
+      }
+    }
+
+    &.label {
+      font-size: var(--hero-text-label);
+    }
+
+    .accent {
+      font-style: italic;
+      color: var(--colour-text-accent);
+    }
+  }
+}
+</style>