Component cleanup

stories/cards/CardStack.stories.js

@@ -0,0 +1,139 @@
+import CardStack from "../../app/components/cards/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: "Components/Cards/CardStack",
+  component: CardStack,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Card stack for the create flow: compact grid or expanded list with toggle. Uses Selection tiles; 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.",
+      },
+    },
+  },
+};

stories/cards/Icon.stories.js

@@ -1,9 +1,9 @@
-import IconCard from "../../app/components/cards/IconCard";
-import { getAssetPath } from "../../lib/assetUtils";
+import Icon from "../../app/components/cards/Icon";
+import { getAssetPath, vectorMarkPath } from "../../lib/assetUtils";
 
 export default {
-  title: "Components/Cards/IconCard",
-  component: IconCard,
+  title: "Components/Cards/Icon",
+  component: Icon,
   parameters: {
     layout: "centered",
     docs: {
@@ -34,7 +34,7 @@ export default {
 // Worker's Coop icon
 const WorkerCoopIcon = () => (
   <img
-    src={getAssetPath("assets/Vector_WorkerCoop.svg")}
+    src={getAssetPath(vectorMarkPath("worker-coop"))}
     alt=""
     className="w-[36px] h-[36px]"
     width="36"

stories/cards/Mini.stories.js

@@ -1,8 +1,8 @@
-import MiniCard from "../../app/components/cards/MiniCard";
+import Mini from "../../app/components/cards/Mini";
 
 export default {
-  title: "Components/Cards/MiniCard",
-  component: MiniCard,
+  title: "Components/Cards/Mini",
+  component: Mini,
   parameters: {
     layout: "centered",
   },
@@ -37,25 +37,25 @@ export const Default = {
 export const ColorVariants = {
   render: () => (
     <div className="grid grid-cols-2 gap-4">
-      <MiniCard
+      <Mini
         backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
         labelLine1="Decision-making"
         labelLine2="support"
         panelContent="assets/Feature_Support.png"
       />
-      <MiniCard
+      <Mini
         backgroundColor="bg-[#D1FFE2]"
         labelLine1="Values alignment"
         labelLine2="exercises"
         panelContent="assets/Feature_Exercises.png"
       />
-      <MiniCard
+      <Mini
         backgroundColor="bg-[#F4CAFF]"
         labelLine1="Membership"
         labelLine2="guidance"
         panelContent="assets/Feature_Guidance.png"
       />
-      <MiniCard
+      <Mini
         backgroundColor="bg-[#CBDDFF]"
         labelLine1="Conflict resolution"
         labelLine2="tools"

stories/cards/Rule.stories.js

@@ -1,9 +1,9 @@
-import RuleCard from "../../app/components/cards/RuleCard";
+import Rule from "../../app/components/cards/Rule";
 import Image from "next/image";
 
 export default {
-  title: "Components/Cards/RuleCard",
-  component: RuleCard,
+  title: "Components/Cards/Rule",
+  component: Rule,
   parameters: {
     layout: "centered",
     docs: {
@@ -305,7 +305,7 @@ export const AllVariants = {
   // eslint-disable-next-line no-unused-vars
   render: (_args) => (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
-      <RuleCard
+      <Rule
         title="Consensus clusters"
         description="Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council."
         backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
@@ -320,7 +320,7 @@ export const AllVariants = {
         }
         onClick={() => console.log("Consensus clusters selected")}
       />
-      <RuleCard
+      <Rule
         title="Consensus"
         description="Decisions that affect the group collectively should involve participation of all participants."
         backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
@@ -335,7 +335,7 @@ export const AllVariants = {
         }
         onClick={() => console.log("Consensus selected")}
       />
-      <RuleCard
+      <Rule
         title="Elected Board"
         description="An elected board determines policies and organizes their implementation."
         backgroundColor="bg-[var(--color-surface-default-brand-red)]"
@@ -350,7 +350,7 @@ export const AllVariants = {
         }
         onClick={() => console.log("Elected Board selected")}
       />
-      <RuleCard
+      <Rule
         title="Petition"
         description="All participants can propose and vote on proposals for the group."
         backgroundColor="bg-[var(--color-surface-default-brand-teal)]"

stories/cards/Selection.stories.js

@@ -1,8 +1,8 @@
-import Card from "../../app/components/cards/Card";
+import Selection from "../../app/components/cards/Selection";
 
 export default {
-  title: "Components/Cards/Card",
-  component: Card,
+  title: "Components/Cards/Selection",
+  component: Selection,
   parameters: {
     layout: "centered",
     docs: {
@@ -104,7 +104,7 @@ export const AllVariants = {
         <p className="font-inter text-sm font-medium text-gray-600">
           Horizontal + Recommended
         </p>
-        <Card
+        <Selection
           label="Label"
           supportText="Members vote to resolve a dispute democratically."
           recommended={true}
@@ -116,7 +116,7 @@ export const AllVariants = {
         <p className="font-inter text-sm font-medium text-gray-600">
           Horizontal + Selected
         </p>
-        <Card
+        <Selection
           label="Label"
           supportText="Members vote to resolve a dispute democratically."
           recommended={false}
@@ -128,7 +128,7 @@ export const AllVariants = {
         <p className="font-inter text-sm font-medium text-gray-600">
           Vertical + Recommended
         </p>
-        <Card
+        <Selection
           label="Label"
           supportText="Invite-only"
           recommended={true}
@@ -141,7 +141,7 @@ export const AllVariants = {
         <p className="font-inter text-sm font-medium text-gray-600">
           Vertical + Selected
         </p>
-        <Card
+        <Selection
           label="Label"
           supportText="Invite-only"
           recommended={false}

stories/cards/Step.stories.js

@@ -1,14 +1,14 @@
-import NumberCard from "../../app/components/cards/NumberCard";
+import Step from "../../app/components/cards/Step";
 
 export default {
-  title: "Components/Cards/NumberCard",
-  component: NumberCard,
+  title: "Components/Cards/Step",
+  component: Step,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "Individual number card component that displays a step in a process with a numbered icon and descriptive text. Supports explicit size variants (Small, Medium, Large, XLarge) matching Figma designs, or responsive layouts when size is not specified.",
+          "Figma Card / Step: numbered tile with descriptive text. Supports explicit size variants (small, medium, large, xlarge) matching Figma, or responsive layouts when size is not specified.",
       },
     },
   },
@@ -23,9 +23,9 @@ export default {
     },
     size: {
       control: { type: "select" },
-      options: ["Small", "Medium", "Large", "XLarge", undefined],
+      options: ["small", "medium", "large", "xlarge", undefined],
       description:
-        "Explicit size variant matching Figma designs. If not specified, uses responsive breakpoints for backward compatibility.",
+        "Explicit size variant matching Figma. If not specified, uses responsive breakpoints for backward compatibility.",
     },
     iconShape: {
       control: { type: "select" },
@@ -129,34 +129,34 @@ export const AllSizes = {
     <div className="space-y-8">
       <div>
         <h3 className="mb-4 text-lg font-semibold">Small</h3>
-        <NumberCard
+        <Step
           number={1}
           text="Document how your community makes decisions"
-          size="Small"
+          size="small"
         />
       </div>
       <div>
         <h3 className="mb-4 text-lg font-semibold">Medium</h3>
-        <NumberCard
+        <Step
           number={2}
           text="Document how your community makes decisions"
-          size="Medium"
+          size="medium"
         />
       </div>
       <div>
         <h3 className="mb-4 text-lg font-semibold">Large</h3>
-        <NumberCard
+        <Step
           number={3}
           text="Document how your community makes decisions"
-          size="Large"
+          size="large"
         />
       </div>
       <div>
         <h3 className="mb-4 text-lg font-semibold">XLarge</h3>
-        <NumberCard
+        <Step
           number={1}
           text="Document how your community makes decisions"
-          size="XLarge"
+          size="xlarge"
         />
       </div>
     </div>
@@ -180,24 +180,16 @@ export const AllNumbers = {
   },
   render: (args) => (
     <div className="space-y-4">
-      <NumberCard {...args} number={1} text="First step in the process" />
-      <NumberCard
-        {...args}
-        number={2}
-        text="Second step with different content"
-      />
-      <NumberCard
-        {...args}
-        number={3}
-        text="Third and final step of the workflow"
-      />
+      <Step {...args} number={1} text="First step in the process" />
+      <Step {...args} number={2} text="Second step with different content" />
+      <Step {...args} number={3} text="Third and final step of the workflow" />
     </div>
   ),
   parameters: {
     docs: {
       description: {
         story:
-          "Shows all three numbered cards with different content to demonstrate the visual hierarchy.",
+          "Shows three Step tiles with different content to demonstrate the visual hierarchy.",
       },
     },
   },

stories/cards/TemplateReviewCard.stories.js

@@ -42,11 +42,11 @@ export default {
     size: {
       control: "select",
       options: ["XS", "S", "M", "L"],
-      description: "RuleCard size variant",
+      description: "Rule size variant",
     },
     ruleCardClassName: {
       control: "text",
-      description: "Class names merged onto the inner RuleCard",
+      description: "Class names merged onto the inner Rule",
     },
   },
 };