Update Rule Card component

stories/RuleCard.stories.js

@@ -9,7 +9,7 @@ export default {
     docs: {
       description: {
         component:
-          "An interactive card component that displays governance templates and decision-making patterns. Features hover states, keyboard navigation, analytics tracking, and accessibility support. Use Tab key to test focus indicators and Enter/Space to activate.",
+          "An interactive card component that displays governance templates and decision-making patterns. Features collapsed/expanded states, size variants (L/M), category sections with pills and + buttons, hover states, keyboard navigation, analytics tracking, and accessibility support. Use Tab key to test focus indicators and Enter/Space to activate.",
       },
     },
   },
@@ -33,7 +33,18 @@ export default {
       ],
       description: "The background color variant for the card",
     },
+    expanded: {
+      control: { type: "boolean" },
+      description: "Whether the card is in expanded state",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["L", "M", "l", "m"],
+      description: "Size variant of the card",
+    },
     onClick: { action: "clicked" },
+    onPillClick: { action: "pillClicked" },
+    onCreateClick: { action: "createClicked" },
   },
   tags: ["autodocs"],
 };
@@ -44,6 +55,8 @@ export const Default = {
     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)]",
+    expanded: false,
+    size: "L",
     icon: (
       <Image
         src="assets/Icon_Sociocracy.svg"
@@ -56,6 +69,131 @@ export const Default = {
   },
 };
 
+export const Expanded = {
+  args: {
+    title: "Mutual Aid Mondays",
+    description:
+      "Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness.",
+    backgroundColor: "bg-[#b7d9d5]",
+    expanded: true,
+    size: "L",
+    logoUrl: "http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png",
+    logoAlt: "Mutual Aid Mondays",
+    categories: [
+      {
+        name: "Values",
+        items: ["Consciousness", "Ecology", "Abundance", "Art", "Decisiveness"],
+        createUrl: "/create/value",
+      },
+      {
+        name: "Communication",
+        items: ["Signal"],
+        createUrl: "/create/communication",
+      },
+      {
+        name: "Membership",
+        items: ["Open Admission"],
+        createUrl: "/create/membership",
+      },
+      {
+        name: "Decision-making",
+        items: ["Lazy Consensus", "Modified Consensus"],
+        createUrl: "/create/decision-making",
+      },
+      {
+        name: "Conflict management",
+        items: ["Code of Conduct", "Restorative Justice"],
+        createUrl: "/create/conflict-management",
+      },
+    ],
+  },
+};
+
+export const SizeLarge = {
+  args: {
+    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)]",
+    expanded: false,
+    size: "L",
+    icon: (
+      <Image
+        src="assets/Icon_Sociocracy.svg"
+        alt="Sociocracy"
+        width={103}
+        height={103}
+      />
+    ),
+  },
+};
+
+export const SizeMedium = {
+  args: {
+    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)]",
+    expanded: false,
+    size: "M",
+    icon: (
+      <Image
+        src="assets/Icon_Sociocracy.svg"
+        alt="Sociocracy"
+        width={56}
+        height={56}
+      />
+    ),
+  },
+};
+
+export const ExpandedMedium = {
+  args: {
+    title: "Mutual Aid Mondays",
+    description:
+      "Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness.",
+    backgroundColor: "bg-[#b7d9d5]",
+    expanded: true,
+    size: "M",
+    logoUrl: "http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png",
+    logoAlt: "Mutual Aid Mondays",
+    categories: [
+      {
+        name: "Values",
+        items: ["Consciousness", "Ecology", "Abundance", "Art", "Decisiveness"],
+      },
+      {
+        name: "Communication",
+        items: ["Signal"],
+      },
+      {
+        name: "Membership",
+        items: ["Open Admission"],
+      },
+      {
+        name: "Decision-making",
+        items: ["Lazy Consensus", "Modified Consensus"],
+      },
+      {
+        name: "Conflict management",
+        items: ["Code of Conduct", "Restorative Justice"],
+      },
+    ],
+  },
+};
+
+export const WithLogoFallback = {
+  args: {
+    title: "Community Example",
+    description:
+      "This card shows the logo fallback with community initials when no logo is provided.",
+    backgroundColor: "bg-[var(--color-surface-default-brand-teal)]",
+    expanded: false,
+    size: "L",
+    communityInitials: "CE",
+  },
+};
+
 export const AllVariants = {
   // eslint-disable-next-line no-unused-vars
   render: (_args) => (
@@ -136,19 +274,37 @@ export const InteractiveStates = {
   args: {
     title: "Interactive Demo",
     description:
-      "Hover over this card to see the scale and shadow effects. Use Tab to focus and Enter/Space to activate.",
+      "Hover over this card to see the scale and shadow effects. Use Tab to focus and Enter/Space to activate. Click pills and + buttons to see event handlers.",
     backgroundColor: "bg-[var(--color-community-teal-100)]",
+    expanded: true,
+    size: "L",
     icon: (
-      <div className="w-10 h-10 md:w-14 md:h-14 lg:w-[90px] lg:h-[90px] bg-white rounded-full flex items-center justify-center">
-        <span className="text-lg font-bold text-gray-800">?</span>
+      <div className="w-[103px] h-[103px] bg-white rounded-full flex items-center justify-center">
+        <span className="text-[36px] font-bold text-gray-800">?</span>
       </div>
     ),
+    categories: [
+      {
+        name: "Values",
+        items: ["Consciousness", "Ecology", "Abundance"],
+      },
+      {
+        name: "Communication",
+        items: ["Signal"],
+      },
+    ],
+    onPillClick: (category, item) => {
+      console.log(`Pill clicked: ${category} - ${item}`);
+    },
+    onCreateClick: (category) => {
+      console.log(`Create clicked: ${category}`);
+    },
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Demonstrates interactive states including hover effects, focus indicators, and keyboard navigation. Test with mouse hover and keyboard Tab/Enter/Space.",
+          "Demonstrates interactive states including hover effects, focus indicators, keyboard navigation, and pill/+ button interactions. Test with mouse hover, keyboard Tab/Enter/Space, and click pills/+ buttons.",
       },
     },
   },