chore: catch up Storybook preview, coverage, and story hygiene

Stories were throwing without AuthModal/CreateFlow providers, autodocs was a no-op, and several DS/create-flow screens had no stories.
2026-08-17 19:25:46 -06:00
parent 1983a67ffd
commit db1581337c
44 changed files with 1215 additions and 932 deletions
@@ -0,0 +1,83 @@
+import React from "react";
+import HeaderLockup from "../../app/components/type/HeaderLockup";
+import InfoMessageBox from "../../app/components/controls/InfoMessageBox";
+import {
+  HEADER_LOCKUP_JUSTIFICATION_OPTIONS,
+  HEADER_LOCKUP_SIZE_OPTIONS,
+} from "../../lib/propNormalization";
+
+/**
+ * Compose pattern used by create-flow “decision approaches” rail: headline lockup
+ * plus bordered checklist — no standalone wrapper component.
+ */
+export default {
+  title: "Create Flow/Rail header (lockup + info box)",
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "`HeaderLockup` stacked with `InfoMessageBox` — same chrome as decision-approaches step sidebars.",
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: [...HEADER_LOCKUP_SIZE_OPTIONS],
+    },
+    justification: {
+      control: { type: "select" },
+      options: [...HEADER_LOCKUP_JUSTIFICATION_OPTIONS],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-lg bg-[var(--color-surface-default-primary)] p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const messageItems = [
+  { id: "c1", label: "Consensus" },
+  { id: "c2", label: "Majority vote" },
+];
+
+const compose = (args) => (
+  <div className="flex w-full min-w-0 flex-col gap-3">
+    <HeaderLockup
+      title={args.title}
+      description={args.description}
+      size={args.size}
+      justification={args.justification}
+    />
+    <InfoMessageBox title={args.messageBoxTitle} items={args.messageBoxItems} />
+  </div>
+);
+
+export const Default = {
+  render: compose,
+  args: {
+    title: "How does your group make decisions?",
+    description:
+      "Choose the approaches that best match how your community operates.",
+    messageBoxTitle: "Common approaches",
+    messageBoxItems: messageItems,
+    size: "L",
+    justification: "left",
+  },
+};
+
+export const Medium = {
+  render: compose,
+  args: {
+    title: "Decision-making",
+    description: "Short description.",
+    messageBoxTitle: "Pick any",
+    messageBoxItems: [{ id: "x", label: "Single method" }],
+    size: "M",
+    justification: "left",
+  },
+};