Edit flow configured

stories/cards/Rule.stories.js

@@ -37,6 +37,11 @@ export default {
       control: { type: "boolean" },
       description: "Whether the card is in expanded state",
     },
+    recommended: {
+      control: { type: "boolean" },
+      description:
+        "When true and collapsed, show RECOMMENDED tag above the title (templates grid)",
+    },
     size: {
       control: { type: "select" },
       options: ["XS", "S", "M", "L", "xs", "s", "m", "l"],
@@ -54,6 +59,7 @@ export const Default = {
       "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,
+    recommended: false,
     size: "L",
     icon: (
       <Image
@@ -67,6 +73,18 @@ export const Default = {
   },
 };
 
+/** Figma `22142:898446` — compact `Card / Rule` with template recommendation tag. */
+export const CollapsedWithRecommended = {
+  args: {
+    ...Default.args,
+    title: "Do-ocracy",
+    description:
+      "Authority is granted to those doing the work. If you do the task, you decide how it gets done.",
+    backgroundColor: "bg-[var(--color-surface-invert-brand-royal)]",
+    recommended: true,
+  },
+};
+
 export const Expanded = {
   args: {
     title: "Mutual Aid Mondays",