Update Rule Card component

app/components-preview/page.tsx

@@ -1,20 +1,40 @@
 "use client";
 
 import { useState } from "react";
-import TextInput from "../components/TextInput";
+import RuleCard from "../components/RuleCard";
-import Checkbox from "../components/Checkbox";
+import Image from "next/image";
-import CheckboxGroup from "../components/CheckboxGroup";
+import { getAssetPath } from "../../lib/assetUtils";
-import RadioGroup from "../components/RadioGroup";
 
 export default function ComponentsPreview() {
-  const [defaultInputValue, setDefaultInputValue] = useState("");
+  const [expandedCard, setExpandedCard] = useState<string | null>(null);
-  const [activeInputValue, setActiveInputValue] = useState("");
+
-  const [errorInputValue, setErrorInputValue] = useState("");
+  const sampleCategories = [
-  const [standardCheckbox, setStandardCheckbox] = useState(false);
+    {
-  const [inverseCheckbox, setInverseCheckbox] = useState(false);
+      name: "Values",
-  const [checkboxGroupValues, setCheckboxGroupValues] = useState<string[]>([]);
+      items: ["Consciousness", "Ecology", "Abundance", "Art", "Decisiveness"],
-  const [radioValue, setRadioValue] = useState("");
+      createUrl: "/create/value",
-  const [inverseRadioValue, setInverseRadioValue] = useState("");
+    },
+    {
+      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",
+    },
+  ];
 
   return (
     <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]">
@@ -24,236 +44,165 @@ export default function ComponentsPreview() {
             Component Preview
           </h1>
           <p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
-            Temporary page for viewing and testing new components
+            RuleCard component examples - collapsed/expanded states, size variants, and interactions
           </p>
         </header>
 
-        {/* Text Input Section */}
+        {/* Collapsed State - Large */}
         <section className="space-y-[var(--spacing-scale-024)]">
           <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
-            Text Input Component
+            Collapsed State - Large (L)
           </h2>
-
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
-            <div className="space-y-[var(--spacing-scale-016)]">
+            <RuleCard
-              <div>
+              title="Mutual Aid Mondays"
-                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+              description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
-                  States
+              backgroundColor="bg-[#b7d9d5]"
-                </h3>
+              expanded={false}
-                <div className="space-y-[var(--spacing-scale-016)]">
+              size="L"
-                  <TextInput
+              className="w-[525px]"
-                    label="Default Text Input"
+              logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
-                    placeholder="Enter text"
+              logoAlt="Mutual Aid Mondays"
-                    value={defaultInputValue}
+              onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
-                    onChange={(e) => setDefaultInputValue(e.target.value)}
+            />
-                  />
+          </div>
-                  <TextInput
+        </section>
-                    label="Interactive Text Input (click = active, tab = focus)"
-                    placeholder="Enter text"
-                    value={activeInputValue}
-                    onChange={(e) => setActiveInputValue(e.target.value)}
-                  />
-                  <TextInput
-                    label="Disabled Text Input"
-                    placeholder="Enter text"
-                    value=""
-                    disabled
-                  />
-                  <TextInput
-                    label="Error Text Input"
-                    placeholder="Enter text"
-                    value={errorInputValue}
-                    onChange={(e) => setErrorInputValue(e.target.value)}
-                    error
-                  />
-                </div>
-              </div>
 
+        {/* Collapsed State - Medium */}
+        <section className="space-y-[var(--spacing-scale-024)]">
+          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
+            Collapsed State - Medium (M)
+          </h2>
+          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
+            <RuleCard
+              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={false}
+              size="M"
+              className="w-[289px]"
+              logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
+              logoAlt="Mutual Aid Mondays"
+              onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
+            />
+          </div>
+        </section>
+
+        {/* Expanded State - Large */}
+        <section className="space-y-[var(--spacing-scale-024)]">
+          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
+            Expanded State - Large (L)
+          </h2>
+          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
+            <RuleCard
+              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"
+              className="w-[568px]"
+              logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
+              logoAlt="Mutual Aid Mondays"
+              categories={sampleCategories}
+              onPillClick={(category, item) => {
+                console.log(`Pill clicked: ${category} - ${item}`);
+              }}
+              onCreateClick={(category) => {
+                console.log(`Create clicked: ${category}`);
+              }}
+              onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
+            />
+          </div>
+        </section>
+
+        {/* Expanded State - Medium */}
+        <section className="space-y-[var(--spacing-scale-024)]">
+          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
+            Expanded State - Medium (M)
+          </h2>
+          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
+            <RuleCard
+              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"
+              className="w-[398px]"
+              logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
+              logoAlt="Mutual Aid Mondays"
+              categories={sampleCategories}
+              onPillClick={(category, item) => {
+                console.log(`Pill clicked: ${category} - ${item}`);
+              }}
+              onCreateClick={(category) => {
+                console.log(`Create clicked: ${category}`);
+              }}
+              onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
+            />
+          </div>
+        </section>
+
+        {/* Different Background Colors */}
+        <section className="space-y-[var(--spacing-scale-024)]">
+          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
+            Different Background Colors
+          </h2>
+          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-scale-024)]">
+              <RuleCard
+                title="Consensus clusters"
+                description="Units called Circles have the ability to decide and act on matters in their domains."
+                backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
+                expanded={false}
+                size="L"
+                className="w-[525px]"
+                icon={
+                  <Image
+                    src={getAssetPath("assets/Icon_Sociocracy.svg")}
+                    alt="Sociocracy"
+                    width={103}
+                    height={103}
+                  />
+                }
+                onClick={() => console.log("Consensus clusters selected")}
+              />
+              <RuleCard
+                title="Consensus"
+                description="Decisions that affect the group collectively should involve participation of all participants."
+                backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
+                expanded={false}
+                size="L"
+                className="w-[525px]"
+                icon={
+                  <Image
+                    src={getAssetPath("assets/Icon_Consensus.svg")}
+                    alt="Consensus"
+                    width={103}
+                    height={103}
+                  />
+                }
+                onClick={() => console.log("Consensus selected")}
+              />
             </div>
           </div>
         </section>
 
-        {/* Checkbox Section */}
+        {/* Logo Fallback */}
         <section className="space-y-[var(--spacing-scale-024)]">
           <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
-            Checkbox Component
+            Logo Fallback (Community Initials)
           </h2>
-
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
-            <div className="space-y-[var(--spacing-scale-016)]">
+            <RuleCard
-              <div>
+              title="Community Example"
-                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
+              description="This card shows the logo fallback with community initials when no logo is provided."
-                  Standard Mode
+              backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
-                </h3>
+              expanded={false}
-                <div className="space-y-[var(--spacing-scale-016)]">
+              size="L"
-                  <Checkbox
+              className="w-[525px]"
-                    label="Standard Checkbox"
+              communityInitials="CE"
-                    checked={standardCheckbox}
+              onClick={() => console.log("Community Example selected")}
-                    mode="standard"
+            />
-                    onChange={({ checked }) => setStandardCheckbox(checked)}
-                  />
-                </div>
-              </div>
-              <div>
-                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
-                  Inverse Mode
-                </h3>
-                <div className="space-y-[var(--spacing-scale-016)]">
-                  <Checkbox
-                    label="Inverse Checkbox"
-                    checked={inverseCheckbox}
-                    mode="inverse"
-                    onChange={({ checked }) => setInverseCheckbox(checked)}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-            {/* Checkbox Group Section */}
-            <section className="space-y-[var(--spacing-scale-024)]">
-              <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
-                Checkbox Group Component
-              </h2>
-
-              <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
-                <div className="space-y-[var(--spacing-scale-016)]">
-                  <div>
-                    <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
-                      Standard Mode
-                    </h3>
-                    <div className="space-y-[var(--spacing-scale-016)]">
-                      <CheckboxGroup
-                        name="standard-checkbox-group"
-                        value={checkboxGroupValues}
-                        onChange={({ value }) => setCheckboxGroupValues(value)}
-                        mode="standard"
-                        options={[
-                          { value: "option1", label: "Checkbox label" },
-                          {
-                            value: "option2",
-                            label: "Checkbox label",
-                            subtext: "Nunc sed hendrerit consequat.",
-                          },
-                        ]}
-                      />
-                    </div>
-                  </div>
-                  <div>
-                    <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
-                      Inverse Mode
-                    </h3>
-                    <div className="space-y-[var(--spacing-scale-016)]">
-                      <CheckboxGroup
-                        name="inverse-checkbox-group"
-                        value={checkboxGroupValues}
-                        onChange={({ value }) => setCheckboxGroupValues(value)}
-                        mode="inverse"
-                        options={[
-                          { value: "option3", label: "Checkbox label" },
-                          {
-                            value: "option4",
-                            label: "Checkbox label",
-                            subtext: "Nunc sed hendrerit consequat.",
-                          },
-                        ]}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-
-            {/* Radio Group Section */}
-            <section className="space-y-[var(--spacing-scale-024)]">
-              <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
-                Radio Group Component
-              </h2>
-
-          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
-            <div className="space-y-[var(--spacing-scale-016)]">
-              <div>
-                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
-                  Standard Mode
-                </h3>
-                <div className="space-y-[var(--spacing-scale-016)]">
-                  <RadioGroup
-                    name="default-radio"
-                    value={radioValue}
-                    onChange={({ value }) => setRadioValue(value)}
-                    mode="standard"
-                    options={[
-                      { value: "option1", label: "Option 1" },
-                      { value: "option2", label: "Option 2" },
-                      { value: "option3", label: "Option 3" },
-                    ]}
-                  />
-                  <RadioGroup
-                    name="interactive-radio"
-                    value={radioValue}
-                    onChange={({ value }) => setRadioValue(value)}
-                    mode="standard"
-                    options={[
-                      { value: "option1", label: "Option 1" },
-                      { value: "option2", label: "Option 2" },
-                      { value: "option3", label: "Option 3" },
-                    ]}
-                  />
-                  <RadioGroup
-                    name="disabled-radio"
-                    value=""
-                    mode="standard"
-                    disabled
-                    options={[
-                      { value: "option1", label: "Option 1" },
-                      { value: "option2", label: "Option 2" },
-                      { value: "option3", label: "Option 3" },
-                    ]}
-                  />
-                </div>
-              </div>
-              <div>
-                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
-                  Inverse Mode
-                </h3>
-                <div className="space-y-[var(--spacing-scale-016)]">
-                  <RadioGroup
-                    name="inverse-default-radio"
-                    value={inverseRadioValue}
-                    onChange={({ value }) => setInverseRadioValue(value)}
-                    mode="inverse"
-                    options={[
-                      { value: "option1", label: "Option 1" },
-                      { value: "option2", label: "Option 2" },
-                      { value: "option3", label: "Option 3" },
-                    ]}
-                  />
-                  <RadioGroup
-                    name="inverse-interactive-radio"
-                    value={inverseRadioValue}
-                    onChange={({ value }) => setInverseRadioValue(value)}
-                    mode="inverse"
-                    options={[
-                      { value: "option1", label: "Option 1" },
-                      { value: "option2", label: "Option 2" },
-                      { value: "option3", label: "Option 3" },
-                    ]}
-                  />
-                  <RadioGroup
-                    name="inverse-disabled-radio"
-                    value=""
-                    mode="inverse"
-                    disabled
-                    options={[
-                      { value: "option1", label: "Option 1" },
-                      { value: "option2", label: "Option 2" },
-                      { value: "option3", label: "Option 3" },
-                    ]}
-                  />
-                </div>
-              </div>
-            </div>
           </div>
         </section>
       </div>

app/components/RuleCard/RuleCard.container.tsx

@@ -3,6 +3,7 @@
 import { memo } from "react";
 import { RuleCardView } from "./RuleCard.view";
 import type { RuleCardProps } from "./RuleCard.types";
+import { normalizeRuleCardSize } from "../../../lib/propNormalization";
 
 declare global {
   interface Window {
@@ -25,7 +26,18 @@ const RuleCardContainer = memo<RuleCardProps>(
     backgroundColor = "bg-[var(--color-community-teal-100)]",
     className = "",
     onClick,
+    expanded = false,
+    size: sizeProp,
+    categories,
+    onPillClick,
+    onCreateClick,
+    logoUrl,
+    logoAlt,
+    communityInitials,
   }) => {
+    // Normalize size prop
+    const size = normalizeRuleCardSize(sizeProp, "L");
+
     const handleClick = () => {
       // Basic analytics event tracking
       if (typeof window !== "undefined" && window.gtag) {
@@ -62,6 +74,14 @@ const RuleCardContainer = memo<RuleCardProps>(
         className={className}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
+        expanded={expanded}
+        size={size}
+        categories={categories}
+        onPillClick={onPillClick}
+        onCreateClick={onCreateClick}
+        logoUrl={logoUrl}
+        logoAlt={logoAlt}
+        communityInitials={communityInitials}
       />
     );
   },

app/components/RuleCard/RuleCard.types.ts

@@ -1,3 +1,9 @@
+export interface Category {
+  name: string;
+  items: string[];
+  createUrl?: string;
+}
+
 export interface RuleCardProps {
   title: string;
   description?: string;
@@ -5,6 +11,14 @@ export interface RuleCardProps {
   backgroundColor?: string;
   className?: string;
   onClick?: () => void;
+  expanded?: boolean;
+  size?: "L" | "M" | "l" | "m";
+  categories?: Category[];
+  onPillClick?: (category: string, item: string) => void;
+  onCreateClick?: (category: string) => void;
+  logoUrl?: string;
+  logoAlt?: string;
+  communityInitials?: string;
 }
 
 export interface RuleCardViewProps {
@@ -15,4 +29,12 @@ export interface RuleCardViewProps {
   className: string;
   onClick: () => void;
   onKeyDown: (_event: React.KeyboardEvent<HTMLDivElement>) => void;
+  expanded: boolean;
+  size: "L" | "M";
+  categories?: Category[];
+  onPillClick?: (category: string, item: string) => void;
+  onCreateClick?: (category: string) => void;
+  logoUrl?: string;
+  logoAlt?: string;
+  communityInitials?: string;
 }

app/components/RuleCard/RuleCard.view.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useTranslation } from "../../contexts/MessagesContext";
 import type { RuleCardViewProps } from "./RuleCard.types";
 
@@ -11,40 +12,210 @@ export function RuleCardView({
   className,
   onClick,
   onKeyDown,
+  expanded,
+  size,
+  categories,
+  onPillClick,
+  onCreateClick,
+  logoUrl,
+  logoAlt,
+  communityInitials,
 }: RuleCardViewProps) {
   const t = useTranslation("ruleCard");
   const ariaLabel = t("ariaLabel").replace("{title}", title);
 
+  // Size-based styling
+  const isLarge = size === "L";
+  
+  // Card dimensions - make width flexible for grid layouts, but can be overridden via className
+  // For standalone/preview use, add fixed width via className
+  const cardPadding = isLarge ? "p-[24px]" : "p-[16px]";
+  const cardGap = expanded
+    ? "gap-[16px]"
+    : isLarge ? "gap-[10px]" : "gap-[12px]";
+
+  // Logo/Icon dimensions
+  const logoSize = isLarge ? 103 : 56;
+  const logoContainerClass = isLarge
+    ? "size-[103px]"
+    : "size-[56px]";
+
+  // Title typography
+  const titleClass = isLarge
+    ? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
+    : "font-bricolage-grotesque font-bold text-[24px] leading-[32px]";
+
+  // Description typography
+  const descriptionClass = isLarge
+    ? "font-inter font-medium text-[18px] leading-[24px]"
+    : "font-inter font-medium text-[14px] leading-[16px]";
+
+  // Category label typography
+  const categoryLabelClass = "font-inter font-normal text-[14px] leading-[20px]";
+
+  // Pill typography
+  const pillTextClass = "font-inter font-medium text-[12px] leading-[14px]";
+
+  // Render logo/icon
+  const renderLogo = () => {
+    if (logoUrl) {
+      // Check if it's a localhost URL or external URL that needs regular img tag
+      const isLocalhost = logoUrl.startsWith("http://localhost") || logoUrl.startsWith("https://localhost");
+      
+      if (isLocalhost) {
+        return (
+          <div className={`${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity`}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={logoUrl}
+              alt={logoAlt || title}
+              width={logoSize}
+              height={logoSize}
+              className="absolute inset-0 w-full h-full object-cover rounded-full"
+            />
+          </div>
+        );
+      }
+      
+      return (
+        <div className={`${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity`}>
+          <Image
+            src={logoUrl}
+            alt={logoAlt || title}
+            width={logoSize}
+            height={logoSize}
+            className="absolute inset-0 w-full h-full object-cover rounded-full"
+          />
+        </div>
+      );
+    }
+    
+    if (icon) {
+      return (
+        <div className={`${logoContainerClass} flex items-center justify-center`}>
+          {icon}
+        </div>
+      );
+    }
+    
+    if (communityInitials) {
+      return (
+        <div className={`${logoContainerClass} rounded-full bg-[var(--color-surface-default-primary)] flex items-center justify-center`}>
+          <span className={`${isLarge ? "text-[36px]" : "text-[24px]"} font-bricolage-grotesque font-bold text-[var(--color-content-inverse-primary)]`}>
+            {communityInitials}
+          </span>
+        </div>
+      );
+    }
+    
+    return null;
+  };
+
+  // Handle pill click with stopPropagation
+  const handlePillClick = (e: React.MouseEvent<HTMLButtonElement>, categoryName: string, item: string) => {
+    e.stopPropagation();
+    if (onPillClick) {
+      onPillClick(categoryName, item);
+    }
+  };
+
+  // Handle create button click with stopPropagation
+  const handleCreateClick = (e: React.MouseEvent<HTMLButtonElement>, categoryName: string) => {
+    e.stopPropagation();
+    if (onCreateClick) {
+      onCreateClick(categoryName);
+    }
+  };
+
   return (
     <div
-      className={`${backgroundColor} rounded-[var(--radius-measures-radius-small)] pt-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] pl-[var(--spacing-scale-012)] pb-[var(--spacing-scale-024)] md:p-[var(--spacing-scale-024)] md:h-[210px] lg:h-[277px] flex flex-col gap-[18px] shadow-lg backdrop-blur-sm transition-all duration-500 ease-in-out hover:shadow-xl hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-[var(--color-community-teal-500)] focus:ring-offset-2 cursor-pointer min-h-[44px] min-w-[44px] ${className}`}
+      className={`${backgroundColor} ${cardPadding} ${cardGap} rounded-[var(--radius-measures-radius-small)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] flex flex-col items-start justify-center relative w-full ${className}`}
       tabIndex={0}
       role="button"
       aria-label={ariaLabel}
+      aria-expanded={expanded}
       onClick={onClick}
       onKeyDown={onKeyDown}
     >
       {/* Header Container */}
-      <div className="grid grid-cols-[auto_1fr] h-[72px] md:h-[80px] lg:h-[138px] border-b border-[var(--color-surface-default-primary)]">
+      <div className={`border-b border-[var(--color-content-inverse-primary)] flex gap-[16px] items-center relative shrink-0 w-full ${isLarge ? "min-h-[103px]" : "min-h-[56px]"}`}>
-        {/* Icon Container */}
+        {/* Logo/Icon Container */}
-        {icon && (
+        {renderLogo() && (
-          <div className="p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-012)] lg:p-[var(--spacing-scale-024)] border-r border-[var(--color-surface-default-primary)] w-fit flex items-center justify-center">
+          <div className="flex items-center justify-center shrink-0">
-            {icon}
+            {renderLogo()}
           </div>
         )}
         {/* Title Container */}
         {title && (
-          <div className="pl-[var(--spacing-scale-008)] md:pl-[var(--spacing-scale-012)] lg:pl-[var(--spacing-scale-024)] flex items-center gap-[var(--spacing-scale-004)]">
+          <div className={`border-l border-[var(--color-content-inverse-primary)] flex ${isLarge ? "px-[16px] py-[24px]" : "px-[16px] py-[12px]"} items-center justify-center flex-1 min-w-0`}>
-            <h3 className="font-space-grotesk font-bold text-[20px] md:text-[28px] lg:text-[36px] leading-[28px] md:leading-[36px] lg:leading-[44px] text-[--color-content-inverse-primary]">
+            <h3 className={`${titleClass} text-[var(--color-content-inverse-primary)] overflow-hidden text-ellipsis w-full`}>
               {title}
             </h3>
           </div>
         )}
       </div>
-      {description && (
+
-        <p className="font-inter font-medium text-[12px] md:text-[14px] lg:text-[18px] leading-[14px] md:leading-[16px] lg:leading-[24px] text-[var(--color-content-inverse-primary)]">
+      {expanded ? (
-          {description}
+        <>
-        </p>
+          {/* Categories Section */}
+          {categories && categories.length > 0 && (
+            <div className="flex flex-col gap-[16px] items-start px-[12px] relative shrink-0 w-full">
+              {categories.map((category, categoryIndex) => (
+                <div key={categoryIndex} className="flex flex-col gap-[var(--spacing-scale-008)] items-start relative shrink-0 w-full">
+                  {/* Category Label */}
+                  <div className="flex items-baseline gap-[var(--spacing-scale-008)] pr-[var(--spacing-scale-004)] relative shrink-0 w-full">
+                    <h4 className={`${categoryLabelClass} text-[var(--color-content-inverse-primary)]`}>
+                      {category.name}
+                    </h4>
+                  </div>
+                  {/* Pills Container */}
+                  <div className="flex flex-wrap gap-[var(--spacing-scale-008)] items-center relative shrink-0 w-full">
+                    {/* Pills */}
+                    {category.items && category.items.map((item, itemIndex) => (
+                      <button
+                        key={itemIndex}
+                        type="button"
+                        className="bg-transparent border-[1.25px] border-[var(--color-content-inverse-primary)] h-[30px] px-[var(--spacing-scale-008)] rounded-[var(--radius-measures-radius-full)] flex items-center justify-center shrink-0 cursor-pointer"
+                        onClick={(e) => handlePillClick(e, category.name, item)}
+                        aria-label={`Edit ${item}`}
+                      >
+                        <span className={`${pillTextClass} text-[var(--color-content-inverse-primary)]`}>
+                          {item}
+                        </span>
+                      </button>
+                    ))}
+                    {/* Add Button */}
+                    <button
+                      type="button"
+                      className="bg-transparent border-[1.25px] border-[var(--color-content-inverse-primary)] size-[30px] rounded-[var(--radius-measures-radius-full)] flex items-center justify-center shrink-0 cursor-pointer"
+                      onClick={(e) => handleCreateClick(e, category.name)}
+                      aria-label={`Add new ${category.name}`}
+                    >
+                      <span className="text-[var(--color-content-inverse-primary)] text-[14px] leading-[14px]">+</span>
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+          {/* Footer: Description */}
+          {description && (
+            <div className="border-t border-[var(--color-content-inverse-primary)] pt-[16px] relative shrink-0 w-full">
+              <p className={`${descriptionClass} text-[var(--color-content-inverse-primary)]`}>
+                {description}
+              </p>
+            </div>
+          )}
+        </>
+      ) : (
+        /* Collapsed State: Description */
+        description && (
+          <div className="flex items-center justify-center relative shrink-0 w-full">
+            <p className={`${descriptionClass} text-[var(--color-content-inverse-primary)] flex-1`}>
+              {description}
+            </p>
+          </div>
+        )
       )}
     </div>
   );

lib/propNormalization.ts

@@ -512,3 +512,18 @@ export function normalizeSmallMediumLargeSize(
   }
   return defaultValue;
 }
+
+/**
+ * Normalize RuleCard size prop values (L/M -> l/m -> L/M)
+ */
+export function normalizeRuleCardSize(
+  value: string | undefined,
+  defaultValue: "L" = "L"
+): "L" | "M" {
+  if (!value) return defaultValue;
+  const normalized = value.toUpperCase();
+  if (normalized === "L" || normalized === "M") {
+    return normalized;
+  }
+  return defaultValue;
+}

next.config.mjs

@@ -16,6 +16,14 @@ const nextConfig = {
     minimumCacheTTL: 60,
     dangerouslyAllowSVG: true,
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+    remotePatterns: [
+      {
+        protocol: "http",
+        hostname: "localhost",
+        port: "",
+        pathname: "/**",
+      },
+    ],
   },
   // Headers for caching
   async headers() {

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">
+      <div className="w-[103px] h-[103px] bg-white rounded-full flex items-center justify-center">
-        <span className="text-lg font-bold text-gray-800">?</span>
+        <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.",
       },
     },
   },