srcdev-nuxt-components 9.6.3 → 9.6.5

package/app/components/02.molecules/stepper-list/stories/StepperList.stories.ts

@@ -1,9 +1,26 @@
+import { computed } from "vue";
 import StepperList from "../StepperList.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const parentStoriesNote = `
+  <p style="${storyNoteStyle}">
+    StepperList in real use: ServiceDetail renders its process steps from CMS data (<a href="/?path=/story/organisms-services-service-detail--default" target="_top">ServiceDetail</a> story), and ProgressTracker adds done, current and upcoming states, a progress header and a focus card (<a href="/?path=/story/molecules-progresstracker--default" target="_top">ProgressTracker</a> story).
+  </p>
+`;
+
 const meta: Meta<typeof StepperList> = {
   title: "Molecules/Lists/StepperList",
   component: StepperList,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A list of steps, each with an indicator and a content area. `itemCount` sets how many rows render; fill them with the zero-indexed `#item-{n}` slots. Each row shows an auto-numbered counter bubble (`indicatorVariant`: disc, circle or square; `indicatorSize`) unless an `#indicator-{n}` slot replaces it. `connected` draws a line between indicators. Used by [ServiceDetail](?path=/story/organisms-services-service-detail--default) for its process steps and by [ProgressTracker](?path=/story/molecules-progresstracker--default), which adds step states, a progress header and a focus card.",
+      },
+    },
+  },
   argTypes: {
     tag: {
       control: { type: "select" },
@@ -30,7 +47,7 @@ const meta: Meta<typeof StepperList> = {
     },
     connected: {
       control: "boolean",
-      description: "Whether to show connectors between indicators (only visible in supported browsers)",
+      description: "Draws a vertical line between indicators, positioned from measured indicator sizes",
     },
     styleClassPassthrough: {
       control: "object",
@@ -66,6 +83,7 @@ export const Default: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">Plan your project goals and define what success looks like</p></template>
         <template #item-1><p class="page-body-normal">Set up your development environment</p></template>
@@ -90,6 +108,7 @@ export const OrderedList: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">Preheat the oven to 180°C</p></template>
         <template #item-1><p class="page-body-normal">Sift together the flour, baking powder, and a pinch of salt into a large bowl</p></template>
@@ -115,6 +134,7 @@ export const WithCustomIndicators: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #indicator-0>
           <svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -169,6 +189,7 @@ export const MixedIndicators: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #indicator-0>
           <svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -208,6 +229,7 @@ export const AlignmentCenter: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">Connect your data source</p></template>
         <template #item-1><p class="page-body-normal">Configure sync settings</p></template>
@@ -219,6 +241,62 @@ export const AlignmentCenter: Story = {
   }),
 };
 
+type ConnectorGapArgs = InstanceType<typeof StepperList>["$props"] & { connectorGap: string };
+
+export const ConnectorGap: StoryObj<ConnectorGapArgs> = {
+  name: "Connector Gap",
+  argTypes: {
+    connectorGap: {
+      name: "Connector gap",
+      control: "select",
+      options: ["0", "0.2rem", "0.4rem", "0.6rem", "0.8rem", "1.2rem"],
+      description:
+        "**Story control, not a prop.** Sets the `--stepper-list-connector-gap` CSS token so you can try it here. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.how-it-works { --stepper-list-connector-gap: 0.6rem; }`. " +
+        "`0` (the default) makes the line touch both indicators.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "0" } },
+    },
+  },
+  args: {
+    tag: "ol",
+    itemCount: 5,
+    connected: true,
+    indicatorAlignment: "center",
+    connectorGap: "0.6rem",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`--stepper-list-connector-gap` leaves a space between each end of the connector line and the indicators it joins. It defaults to `0`, where the line touches both indicators. The Connector gap control sets that CSS token on a wrapper; it isn't a prop.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { StepperList },
+    setup() {
+      const componentArgs = computed(() => {
+        const { connectorGap: _connectorGap, ...rest } = args;
+        return rest;
+      });
+      const tokenStyles = computed(() => ({ "--stepper-list-connector-gap": args.connectorGap }));
+      return { componentArgs, tokenStyles };
+    },
+    template: `
+      ${parentStoriesNote}
+      <div :style="tokenStyles">
+        <StepperList v-bind="componentArgs">
+          <template #item-0><p class="page-body-normal">Connect your data source</p></template>
+          <template #item-1><p class="page-body-normal">Configure sync settings</p></template>
+          <template #item-2><p class="page-body-normal">Map your fields</p></template>
+          <template #item-3><p class="page-body-normal">Run a test import to check everything looks right</p></template>
+          <template #item-4><p class="page-body-normal">Publish</p></template>
+        </StepperList>
+      </div>
+    `,
+  }),
+};
+
 /** Disc variant — filled circle with solid background (default). */
 export const VariantDisc: Story = {
   name: "Variant — Disc",
@@ -233,6 +311,7 @@ export const VariantDisc: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">Research and define requirements with stakeholders</p></template>
         <template #item-1><p class="page-body-normal">Wireframe key user journeys</p></template>
@@ -258,6 +337,7 @@ export const VariantCircle: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">Research and define requirements with stakeholders</p></template>
         <template #item-1><p class="page-body-normal">Wireframe key user journeys</p></template>
@@ -283,6 +363,7 @@ export const VariantSquare: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">Research and define requirements with stakeholders</p></template>
         <template #item-1><p class="page-body-normal">Wireframe key user journeys</p></template>
@@ -310,6 +391,7 @@ export const CustomIndicatorSize: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">Create your account</p></template>
         <template #item-1><p class="page-body-normal">Verify your email and complete your profile with a photo, bio, and preferred contact details</p></template>
@@ -333,6 +415,7 @@ export const RichContent: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0>
           <div>
@@ -381,6 +464,7 @@ export const SingleItem: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">The only item</p></template>
       </StepperList>
@@ -398,7 +482,7 @@ export const Empty: Story = {
     setup() {
       return { args };
     },
-    template: `<StepperList v-bind="args" />`,
+    template: `${parentStoriesNote}<StepperList v-bind="args" />`,
   }),
 };
 
@@ -414,6 +498,7 @@ export const WithStyleClassPassthrough: Story = {
       return { args };
     },
     template: `
+      ${parentStoriesNote}
       <StepperList v-bind="args">
         <template #item-0><p class="page-body-normal">First item</p></template>
         <template #item-1><p class="page-body-normal">Second item</p></template>
@@ -421,3 +506,204 @@ export const WithStyleClassPassthrough: Story = {
     `,
   }),
 };
+
+// ─── Styled demo ──────────────────────────────────────────────────────────────
+
+type TimelineState = "done" | "current" | "upcoming";
+
+const timelineStateLabels: Record<TimelineState, string> = {
+  done: "Done",
+  current: "In progress",
+  upcoming: "Up next",
+};
+
+const timelineSteps: { state: TimelineState; title: string; body: string }[] = [
+  { state: "done", title: "Create your account", body: "Enter your email and choose a password to get started." },
+  {
+    state: "current",
+    title: "Verify your email",
+    body: "Click the link we sent to your inbox. If you don't see it, check your spam folder: it should arrive within a few minutes.",
+  },
+  { state: "upcoming", title: "Choose a plan", body: "Select from Starter, Pro, or Enterprise depending on your needs." },
+  { state: "upcoming", title: "Invite your team", body: "Add colleagues by email so they can collaborate on your workspace." },
+  { state: "upcoming", title: "Start building", body: "You're all set. Dive into the dashboard and start your first project." },
+];
+
+const timelineCss = `
+  .stepper-timeline-demo {
+    background: #16171b;
+    color: #e8e9ec;
+    padding: 4rem 3.2rem;
+    border-radius: 1.2rem;
+  }
+
+  .stepper-list.stepper-timeline {
+    --stepper-list-gap: 3.2rem;
+    --stepper-list-padding-block: 2rem;
+    --stepper-list-connector-width: 0.2rem;
+    --stepper-list-connector-color: transparent;
+    --stepper-list-connector-image: repeating-linear-gradient(to bottom, #3a3d45 0 0.2rem, transparent 0.2rem 0.6rem);
+    margin: 0;
+
+    .stepper-list-item:has(.stepper-timeline-marker.is-done) {
+      --stepper-list-connector-image: repeating-linear-gradient(to bottom, #00c8d7 0 0.4rem, transparent 0.4rem 0.7rem);
+    }
+
+    .stepper-timeline-marker {
+      display: grid;
+      place-items: center;
+      inline-size: 3.2rem;
+      block-size: 3.2rem;
+      margin-block-start: -0.6rem;
+
+      &::before {
+        content: "";
+        inline-size: 2.2rem;
+        block-size: 2.2rem;
+        rotate: 45deg;
+        border: 0.2rem solid #4a4d55;
+        background: transparent;
+      }
+
+      &.is-done::before {
+        border-color: #00c8d7;
+        background: #00c8d7;
+      }
+
+      &.is-current::before {
+        border-color: #00c8d7;
+        background: #16171b;
+        box-shadow: 0 0 0 0.4rem rgb(0 200 215 / 0.15), 0 0 1.6rem 0.2rem rgb(0 200 215 / 0.45);
+      }
+    }
+
+    .stepper-timeline-eyebrow {
+      margin: 0 0 0.6rem;
+      font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
+      font-size: var(--step-4);
+      font-weight: 600;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: #8a8d96;
+    }
+
+    .stepper-timeline-title {
+      margin: 0 0 0.8rem;
+      font-size: 2.2rem;
+      font-weight: 600;
+      line-height: 1.2;
+      color: #ffffff;
+    }
+
+    .stepper-timeline-body {
+      margin: 0;
+      font-size: 1.6rem;
+      line-height: 1.5;
+      color: #a6a9b2;
+    }
+
+    .stepper-list-item:has(.is-current) .stepper-timeline-eyebrow {
+      color: #00c8d7;
+    }
+
+    .stepper-list-item:has(.is-upcoming) .stepper-list-content {
+      opacity: 0.45;
+    }
+  }
+`;
+
+export const TimelineDemo: Story = {
+  name: "Timeline (styled demo)",
+  args: {
+    tag: "ol",
+    itemCount: timelineSteps.length,
+    connected: true,
+    indicatorAlignment: "top",
+    indicatorSize: "3.2rem",
+    styleClassPassthrough: ["stepper-timeline"],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A consumer-styled timeline built only from public tokens and slots, no extra props. Diamond markers are rotated squares in the `#indicator-{n}` slots, each with a state class (`is-done`, `is-current`, `is-upcoming`). `.stepper-list-item:has(.is-done)` swaps that item's connector to a cyan dashed line through `--stepper-list-connector-image`; the rest stay grey and dotted. The current step's eyebrow turns cyan and upcoming steps are dimmed. The state is also written in each eyebrow, so it never depends on colour alone. See CONSUMER-STYLING.md, \"Recipe: per-step states and dashed connectors\".",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { StepperList },
+    setup() {
+      return { args, timelineSteps, timelineStateLabels, timelineCss };
+    },
+    template: `
+      ${parentStoriesNote}
+      <div class="stepper-timeline-demo">
+        <component :is="'style'">{{ timelineCss }}</component>
+        <StepperList v-bind="args">
+          <template v-for="(step, i) in timelineSteps" :key="'indicator-' + i" #[\`indicator-\${i}\`]>
+            <span class="stepper-timeline-marker" :class="'is-' + step.state" aria-hidden="true"></span>
+          </template>
+          <template v-for="(step, i) in timelineSteps" :key="'item-' + i" #[\`item-\${i}\`]>
+            <p class="stepper-timeline-eyebrow">Step {{ String(i + 1).padStart(2, "0") }} · {{ timelineStateLabels[step.state] }}</p>
+            <h3 class="stepper-timeline-title" :aria-current="step.state === 'current' ? 'step' : undefined">{{ step.title }}</h3>
+            <p class="stepper-timeline-body">{{ step.body }}</p>
+          </template>
+        </StepperList>
+      </div>
+    `,
+  }),
+};
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+const unbroken = "Haarpflegebehandlungsterminvereinbarungsbestätigungsschreiben".repeat(3);
+const longGerman =
+  "Bitte vereinbaren Sie vor der ersten Behandlung einen ausführlichen Beratungstermin, damit wir Ihre Haarstruktur, Ihre bisherigen Färbungen und Ihre Wünsche gemeinsam besprechen können.";
+const longUrl = "https://example.com/a/very/long/url/without/any/spaces/that/keeps/going/and/going/and/going";
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    tag: "ol",
+    itemCount: 12,
+    connected: true,
+    indicatorVariant: "circle",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Worst-case content in every row. Check that: unbroken strings and the long URL wrap inside the content column instead of widening the list; rows 10 to 12 (no slots provided) render as numbered rows with an empty content area; the two-digit counters still fit their bubble; the HTML-like text renders as text; the RTL row reads right to left; the wide custom indicator in row 2 still has the connector line running from its centre; and the second list (fractional `itemCount` 2.9) renders 2 rows rather than none.",
+      },
+      story: { inline: false, height: "1400px" },
+    },
+  },
+  render: (args) => ({
+    components: { StepperList },
+    setup() {
+      return { args, unbroken, longGerman, longUrl };
+    },
+    template: `
+      ${parentStoriesNote}
+      <div style="max-inline-size: 48rem;">
+        <StepperList v-bind="args">
+          <template #item-0><p class="page-body-normal">{{ unbroken }}</p></template>
+          <template #indicator-1><span style="white-space: nowrap; padding-inline: 0.8rem; border: 2px solid currentColor; border-radius: 100vw;">Step 2 of 12 ✨</span></template>
+          <template #item-1><p class="page-body-normal">{{ longGerman }} {{ longGerman }}</p></template>
+          <template #item-2><p class="page-body-normal"><a :href="longUrl">{{ longUrl }}</a></p></template>
+          <template #item-3><p class="page-body-normal">🦄💇‍♀️ Emoji first, then text</p></template>
+          <template #item-4><p class="page-body-normal" dir="rtl">مرحبا بكم في صالوننا، نحن نقدم جميع خدمات الشعر</p></template>
+          <template #item-5><p class="page-body-normal">&lt;script&gt;alert(1)&lt;/script&gt; renders as text</p></template>
+          <template #item-6><p class="page-body-normal">A</p></template>
+          <template #item-7></template>
+          <template #item-8><p class="page-body-normal">{{ longGerman }}</p><p class="page-body-normal">{{ unbroken }}</p></template>
+        </StepperList>
+        <StepperList :item-count="2.9" indicator-variant="square" style="margin-block-start: 3.2rem;">
+          <template #item-0><p class="page-body-normal">Fractional itemCount: first row</p></template>
+          <template #item-1><p class="page-body-normal">Second row (a third would be wrong)</p></template>
+          <template #item-2><p class="page-body-normal">Third row: should not render</p></template>
+        </StepperList>
+      </div>
+    `,
+  }),
+};