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",

stories/utility/Tag.stories.js

@@ -8,14 +8,14 @@ export default {
     docs: {
       description: {
         component:
-          "Small status tag with recommended (yellow) or selected (dark) variant. Default labels are RECOMMENDED and SELECTED; pass children for custom text.",
+          "Small status tag: recommended (yellow), selected (dark on light), templateRecommended (dark on pastel `Card / Rule`). Default labels are RECOMMENDED/SELECTED; pass children for custom text.",
       },
     },
   },
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: ["recommended", "selected"],
+      options: ["recommended", "selected", "templateRecommended"],
       description: "Visual variant",
     },
     children: {
@@ -37,6 +37,12 @@ export const Selected = {
   },
 };
 
+export const TemplateRecommended = {
+  args: {
+    variant: "templateRecommended",
+  },
+};
+
 export const CustomLabel = {
   args: {
     variant: "recommended",