Card compact and expanded template

2026-02-11 22:02:10 -07:00
parent f60df15c2b
commit b2ed1d438c
44 changed files with 1920 additions and 48 deletions
@@ -0,0 +1,139 @@
+import CardStack from "../../app/components/utility/CardStack";
+
+const SAMPLE_CARDS = [
+  {
+    id: "1",
+    label: "Label",
+    supportText:
+      "Collaborative work to reach a resolution that all parties can agree upon.",
+    recommended: true,
+  },
+  {
+    id: "2",
+    label: "Label",
+    supportText:
+      "Structured sessions where parties collaboratively resolve disputes.",
+    recommended: true,
+  },
+  {
+    id: "3",
+    label: "Label",
+    supportText: "Members vote to resolve a dispute democratically.",
+    recommended: true,
+  },
+  {
+    id: "4",
+    label: "Label",
+    supportText: "Arbitrators are chosen specifically for a particular case.",
+    recommended: true,
+  },
+  {
+    id: "5",
+    label: "Label",
+    supportText:
+      "Encouraging direct, respectful dialogue between those involved.",
+    recommended: true,
+  },
+  {
+    id: "6",
+    label: "Label",
+    supportText: "Invite-only",
+    recommended: true,
+  },
+];
+
+export default {
+  title: "Create Flow/CardStack",
+  component: CardStack,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Card stack for the create flow: compact grid or expanded list with toggle. Uses Card components; toggle visible only when hasMore is true.",
+      },
+    },
+  },
+  argTypes: {
+    expanded: {
+      control: { type: "boolean" },
+      description: "Expanded (list) vs compact (grid) mode",
+    },
+    hasMore: {
+      control: { type: "boolean" },
+      description: "Whether to show the See all / Show less toggle",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    cards: SAMPLE_CARDS,
+    hasMore: true,
+    title: "How should this community communicate with each-other?",
+    description:
+      "You can select multiple methods for different needs or add your own",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Compact grid with sample cards and See all toggle.",
+      },
+    },
+  },
+};
+
+export const Expanded = {
+  args: {
+    cards: SAMPLE_CARDS,
+    expanded: true,
+    hasMore: true,
+    title:
+      "What method should this community use to communicate with eachother?",
+    description:
+      "You can select multiple methods for different needs or add your own",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Expanded list layout with vertical cards and Show less toggle.",
+      },
+    },
+  },
+};
+
+export const WithSelection = {
+  args: {
+    cards: SAMPLE_CARDS,
+    selectedId: "2",
+    hasMore: true,
+    title: "How should this community communicate with each-other?",
+    description:
+      "You can select multiple methods for different needs or add your own",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Second card is selected; click cards to change selection.",
+      },
+    },
+  },
+};
+
+export const NoToggle = {
+  args: {
+    cards: SAMPLE_CARDS.slice(0, 3),
+    hasMore: false,
+    title: "How should this community communicate with each-other?",
+    description:
+      "You can select multiple methods for different needs or add your own",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "When hasMore is false, the See all toggle is hidden.",
+      },
+    },
+  },
+};