srcdev-nuxt-components 9.0.18 → 9.1.1

package/app/components/04.templates/page-hero-highlights/PageHeroHighlights.vue

@@ -2,7 +2,7 @@
   <component
     :is="tag"
     class="page-hero-highlights"
-    :class="[elementClasses, componentClasses]"
+    :class="[elementClasses, componentClasses, { 'has-content-panel': contentPanel }]"
     :aria-labelledby="ariaLabelledby"
   >
     <div class="header-row">
@@ -28,6 +28,7 @@ interface Props {
   highlightsJustify?: "start" | "center" | "end" | "space-between" | "space-around";
   maxWidth?: string;
   contentAlign?: "start" | "center";
+  contentPanel?: boolean;
   highlightTitleBaseline?: boolean;
   styleClassPassthrough?: string | string[];
 }
@@ -38,13 +39,14 @@ const props = withDefaults(defineProps<Props>(), {
   highlightsJustify: "start",
   maxWidth: undefined,
   contentAlign: "center",
+  contentPanel: true,
   highlightTitleBaseline: false,
   styleClassPassthrough: () => [],
 });
 
 const gridColumns = computed(() => {
   if (!props.maxWidth) return "16px 1fr 16px";
-  if (props.contentAlign === "start") return `16px minmax(0, ${props.maxWidth}) 1fr`;
+  if (props.contentAlign === "start") return `16px minmax(0, ${props.maxWidth}) minmax(16px, 1fr)`;
   return `max(16px, (100% - ${props.maxWidth}) / 2) 1fr max(16px, (100% - ${props.maxWidth}) / 2)`;
 });
 
@@ -122,6 +124,7 @@ watch(
     .header-slot {
       grid-column: 2;
       grid-row: 1;
+      container-type: inline-size;
     }
   }
 
@@ -135,7 +138,7 @@ watch(
 
     /* Element theme */
     gap: var(--highlights-row-item-gap);
-    margin-inline-start: var(--highlights-row-initial-item-offset);
+    margin-inline-start: 0;
 
     &.equal-widths {
       display: grid;
@@ -211,28 +214,40 @@ watch(
     background-color: var(--content-row-background-color);
     padding-block-end: var(--content-row-end-gap);
 
-    &:before {
-      /* Element geometry */
-      content: "";
-      grid-template-columns: subgrid;
-      grid-template-rows: subgrid;
-      display: grid;
-      grid-column: 2;
-      grid-row: 1 / span 2;
-
-      /* Element theme */
-      margin-top: var(--content-row-start-gap);
-
-      background-color: var(--content-slot-background-color);
-      border: var(--content-slot-border);
-      outline: var(--content-slot-outline);
-      border-radius: var(--content-slot-border-radius);
-    }
     .content-slot {
       grid-column: 2;
       grid-row: 2;
       margin-block: var(--content-slot-margin-block-start) var(--content-slot-margin);
-      margin-inline: var(--content-slot-margin);
+      margin-inline: 0;
+    }
+  }
+
+  &.has-content-panel {
+    .highlights-row {
+      margin-inline: var(--highlights-row-initial-item-offset);
+    }
+    .content-row {
+      &:before {
+        /* Element geometry */
+        content: "";
+        grid-template-columns: subgrid;
+        grid-template-rows: subgrid;
+        display: grid;
+        grid-column: 2;
+        grid-row: 1 / span 2;
+
+        /* Element theme */
+        margin-top: var(--content-row-start-gap);
+
+        background-color: var(--content-slot-background-color);
+        border: var(--content-slot-border);
+        outline: var(--content-slot-outline);
+        border-radius: var(--content-slot-border-radius);
+      }
+
+      .content-slot {
+        margin-inline: var(--content-slot-margin);
+      }
     }
   }
 }

package/app/components/04.templates/page-hero-highlights/PageHeroHighlightsHeader.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="page-hero-highlights-header" :class="elementClasses">
+    <div class="phh-start">
+      <slot name="start"></slot>
+    </div>
+    <div v-if="hasEndSlot" class="phh-end">
+      <slot name="end"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+});
+
+const slots = useSlots();
+const hasEndSlot = computed(() => Boolean(slots.end));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+.page-hero-highlights-header {
+  /* User themable tokens */
+  --phh-padding-block: 1.6rem;
+  --phh-gap: 1.6rem;
+  --phh-end-gap: 0.8rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--phh-gap);
+  padding-block: var(--phh-padding-block);
+
+  &:has(.phh-end) {
+    @container (width >= 768px) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      align-items: flex-end;
+      justify-content: space-between;
+    }
+  }
+
+  .phh-start {
+    /* flex: 1; */
+  }
+
+  .phh-end {
+    display: flex;
+    align-items: center;
+    gap: var(--phh-end-gap);
+    /* flex-shrink: 0; */
+  }
+}
+</style>

package/app/components/04.templates/page-hero-highlights/stories/PageHeroHighlights.stories.ts

@@ -8,6 +8,7 @@ type StoryArgs = {
   highlightsJustify?: "start" | "center" | "end" | "space-between" | "space-around";
   maxWidth?: string;
   contentAlign?: "start" | "center";
+  contentPanel?: boolean;
   highlightTitleBaseline?: boolean;
   headerBackground?: string;
   contentBackground?: string;
@@ -35,7 +36,7 @@ const meta: Meta<StoryArgs> = {
     },
     maxWidth: {
       control: { type: "select" },
-      options: ["", "600px", "800px", "1024px", "1200px", "1440px"],
+      options: ["", "600px", "800px", "1024px", "1064px", "1200px", "1440px"],
       description:
         "Max width of the central content column. Gutters grow to enforce the constraint; below this width they hold at 16px.",
     },
@@ -45,6 +46,11 @@ const meta: Meta<StoryArgs> = {
       description:
         "Align the content column to the start (left gutter stays 16px, right takes remaining space) or center (equal gutters). Only meaningful when maxWidth is set.",
     },
+    contentPanel: {
+      control: "boolean",
+      description:
+        "When true (default), renders a decorative panel behind the content slot and offsets the highlights strip. Set to false for a flat layout with no backdrop.",
+    },
     highlightTitleBaseline: {
       control: "boolean",
       description:
@@ -74,6 +80,7 @@ const meta: Meta<StoryArgs> = {
     highlightsJustify: "start",
     maxWidth: "",
     contentAlign: "center",
+    contentPanel: true,
     highlightTitleBaseline: false,
     headerBackground: "",
     contentBackground: "",
@@ -162,8 +169,8 @@ All layout and visual properties are customisable via CSS custom properties. Set
       <PageHeroHighlights v-bind="componentArgs" :style="bgStyles">
         <template #header>
           <div style="color: white; padding-block: 1.6rem;">
-            <p class="page-heading-1">Dashboard</p>
-            <p class="page-body-normal">Overview of your account activity and key metrics.</p>
+            <h1 class="page-heading-1" style="color: white;">Dashboard</h1>
+            <p class="page-body-normal" style="color: white;">Overview of your account activity and key metrics.</p>
           </div>
         </template>
 
@@ -402,3 +409,43 @@ export const MaxWidthStart: Story = {
     `,
   }),
 };
+
+/** No content panel — flat layout with no backdrop or highlight offset behind the content slot. */
+export const NoContentPanel: Story = {
+  name: "No Content Panel",
+  args: { contentPanel: false },
+  render: (args: StoryArgs) => ({
+    components: { PageHeroHighlights },
+    setup() {
+      return useStorySetup(args);
+    },
+    template: `
+      <PageHeroHighlights v-bind="componentArgs" :style="bgStyles">
+        <template #header>
+          <p class="page-heading-1">Dashboard</p>
+          <p class="page-body-normal">Flat layout — no decorative panel behind the content slot.</p>
+        </template>
+
+        <template #highlights>
+          <div style="border-radius: 12px; background: #1a1a2e; color: white; padding: 1.6rem;">
+            <p class="page-heading-2">Total Revenue</p>
+            <p class="page-body-normal">£24,500</p>
+          </div>
+          <div v-if="highlightCount >= 2" style="border-radius: 12px; background: #1a1a2e; color: white; padding: 1.6rem;">
+            <p class="page-heading-2">Active Users</p>
+            <p class="page-body-normal">1,284</p>
+          </div>
+          <div v-if="highlightCount >= 3" style="border-radius: 12px; background: #1a1a2e; color: white; padding: 1.6rem;">
+            <p class="page-heading-2">Open Tasks</p>
+            <p class="page-body-normal">37</p>
+          </div>
+        </template>
+
+        <template #content>
+          <p class="page-heading-2">Recent Activity</p>
+          <p class="page-body-normal">Your most recent transactions and events will appear here.</p>
+        </template>
+      </PageHeroHighlights>
+    `,
+  }),
+};

package/app/components/04.templates/page-hero-highlights/stories/PageHeroHighlightsHeader.stories.ts

@@ -0,0 +1,77 @@
+import PageHeroHighlights from "../PageHeroHighlights.vue";
+import PageHeroHighlightsHeader from "../PageHeroHighlightsHeader.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+type StoryArgs = {
+  styleClassPassthrough?: string | string[];
+};
+
+const meta: Meta<StoryArgs> = {
+  title: "Templates/PageHeroHighlightsHeader",
+  component: PageHeroHighlightsHeader,
+  argTypes: {
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    styleClassPassthrough: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageHeroHighlightsHeader>;
+
+/** Default — start slot only, fills full width. */
+export const Default: Story = {
+  render: (args: StoryArgs) => ({
+    components: { PageHeroHighlights, PageHeroHighlightsHeader },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PageHeroHighlights tag="section" style="--header-row-background-colour: #2d4a35;">
+        <template #header>
+          <PageHeroHighlightsHeader v-bind="args">
+            <template #start>
+              <div style="color: white; padding-block: 1.6rem;">
+                <h1 class="page-heading-1" style="color: white;">Dashboard</h1>
+                <p class="page-body-normal" style="color: white;">Overview of your account activity and key metrics.</p>
+              </div>
+            </template>
+          </PageHeroHighlightsHeader>
+        </template>
+      </PageHeroHighlights>
+    `,
+  }),
+};
+
+/** With actions — start slot for title/description, end slot for action buttons. */
+export const WithActions: Story = {
+  name: "With Actions",
+  render: (args: StoryArgs) => ({
+    components: { PageHeroHighlights, PageHeroHighlightsHeader },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PageHeroHighlights tag="section" style="--header-row-background-colour: #2d4a35;">
+        <template #header>
+          <PageHeroHighlightsHeader v-bind="args">
+            <template #start>
+              <div style="color: white; padding-block: 1.6rem;">
+                <h1 class="page-heading-1" style="color: white;">Dashboard</h1>
+                <p class="page-body-normal" style="color: white;">Overview of your account activity and key metrics.</p>
+              </div>
+            </template>
+            <template #end>
+              <button style="border: 2px solid white; color: white; background: transparent; border-radius: 50%; width: 4rem; height: 4rem; cursor: pointer;">?</button>
+              <button style="border: 2px solid white; color: white; background: transparent; border-radius: 0.8rem; padding: 1rem 1.6rem; cursor: pointer;">Create something new</button>
+            </template>
+          </PageHeroHighlightsHeader>
+        </template>
+      </PageHeroHighlights>
+    `,
+  }),
+};

package/app/components/04.templates/page-hero-highlights/tests/PageHeroHighlights.spec.ts

@@ -45,10 +45,7 @@ describe("PageHeroHighlights", () => {
   it("renders highlights slot content", async () => {
     const wrapper = await mountSuspended(PageHeroHighlights, {
       slots: {
-        highlights: [
-          "<div class='highlight-card'>Card 1</div>",
-          "<div class='highlight-card'>Card 2</div>",
-        ].join(""),
+        highlights: ["<div class='highlight-card'>Card 1</div>", "<div class='highlight-card'>Card 2</div>"].join(""),
       },
     });
     expect(wrapper.findAll(".highlight-card").length).toBe(2);
@@ -101,8 +98,7 @@ describe("PageHeroHighlights", () => {
     const wrapper = await mountSuspended(PageHeroHighlights, {
       props: { tag: "section" },
       slots: {
-        header: (props: Record<string, unknown>) =>
-          h("h1", { id: props.headingId, class: "page-title" }, "Dashboard"),
+        header: (props: Record<string, unknown>) => h("h1", { id: props.headingId, class: "page-title" }, "Dashboard"),
       },
     });
     const labelledBy = wrapper.find(".page-hero-highlights").attributes("aria-labelledby");
@@ -139,6 +135,18 @@ describe("PageHeroHighlights", () => {
     }
   });
 
+  it("applies has-content-panel class by default", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights);
+    expect(wrapper.find(".page-hero-highlights").classes()).toContain("has-content-panel");
+  });
+
+  it("does not apply has-content-panel class when contentPanel is false", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      props: { contentPanel: false },
+    });
+    expect(wrapper.find(".page-hero-highlights").classes()).not.toContain("has-content-panel");
+  });
+
   it("does not apply highlight-title-baseline class by default", async () => {
     const wrapper = await mountSuspended(PageHeroHighlights);
     expect(wrapper.find(".page-hero-highlights").classes()).not.toContain("highlight-title-baseline");
@@ -184,7 +192,7 @@ describe("PageHeroHighlights", () => {
         props: { maxWidth: "1064px", contentAlign: "start" },
       });
       const vm = wrapper.vm as unknown as ComponentInstance;
-      expect(vm.gridColumns).toBe("16px minmax(0, 1064px) 1fr");
+      expect(vm.gridColumns).toBe("16px minmax(0, 1064px) minmax(16px, 1fr)");
     });
 
     it("ignores contentAlign when maxWidth is not set", async () => {

package/app/components/04.templates/page-hero-highlights/tests/PageHeroHighlightsHeader.spec.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import PageHeroHighlightsHeader from "../PageHeroHighlightsHeader.vue";
+
+describe("PageHeroHighlightsHeader", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlightsHeader);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders start slot content", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+      slots: { start: "<h1 class='page-title'>Surplus needs</h1>" },
+    });
+    expect(wrapper.find(".phh-start .page-title").exists()).toBe(true);
+    expect(wrapper.html()).toContain("Surplus needs");
+  });
+
+  it("renders end slot content when provided", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+      slots: {
+        start: "<h1>Title</h1>",
+        end: "<button class='cta'>Create new need</button>",
+      },
+    });
+    expect(wrapper.find(".phh-end .cta").exists()).toBe(true);
+  });
+
+  it("does not render .phh-end when no end slot is provided", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+      slots: { start: "<h1>Title</h1>" },
+    });
+    expect(wrapper.find(".phh-end").exists()).toBe(false);
+  });
+
+  it("renders .phh-start as full width when no end slot is provided", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+      slots: { start: "<h1>Title</h1>" },
+    });
+    expect(wrapper.find(".phh-start").exists()).toBe(true);
+    expect(wrapper.find(".phh-end").exists()).toBe(false);
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlightsHeader, {
+      props: { styleClassPassthrough: ["extra-class", "another-class"] },
+    });
+    expect(wrapper.find(".page-hero-highlights-header").classes()).toContain("extra-class");
+    expect(wrapper.find(".page-hero-highlights-header").classes()).toContain("another-class");
+  });
+});

package/app/components/04.templates/page-hero-highlights/tests/__snapshots__/PageHeroHighlights.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageHeroHighlights > renders correct HTML structure 1`] = `
-"<div class="page-hero-highlights">
+"<div class="page-hero-highlights has-content-panel">
   <div class="header-row">
     <div class="header-slot">
       <h1>Page Title</h1>