Completed template

stories/buttons/Button.stories.js

@@ -179,7 +179,9 @@ export const AllVariants = {
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
+        <h3 className="text-white font-semibold mb-3">
+          Filled Inverse Variant
+        </h3>
         <div className="space-x-4">
           <Button buttonType="filled" palette="inverse" size="xsmall">
             XSmall
@@ -221,7 +223,9 @@ export const AllVariants = {
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
+        <h3 className="text-white font-semibold mb-3">
+          Outline Inverse Variant
+        </h3>
         <div className="space-x-4">
           <Button buttonType="outline" palette="inverse" size="xsmall">
             XSmall
@@ -305,7 +309,9 @@ export const AllVariants = {
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
+        <h3 className="text-white font-semibold mb-3">
+          Danger Inverse Variant
+        </h3>
         <div className="space-x-4">
           <Button buttonType="danger" palette="inverse" size="xsmall">
             XSmall

stories/buttons/Button.visual.stories.js

@@ -273,7 +273,9 @@ export const StateComparison = {
         <Button disabled>Disabled</Button>
       </div>
       <div className="flex flex-wrap gap-4 items-center">
-        <Button buttonType="filled" palette="default">Home Default</Button>
+        <Button buttonType="filled" palette="default">
+          Home Default
+        </Button>
         <Button buttonType="filled" palette="default" disabled>
           Home Disabled
         </Button>
@@ -341,7 +343,9 @@ export const EdgeCases = {
       <div className="flex flex-wrap gap-4 items-center">
         <Button>Normal</Button>
         <Button disabled>Disabled</Button>
-        <Button buttonType="filled" palette="default">Home</Button>
+        <Button buttonType="filled" palette="default">
+          Home
+        </Button>
         <Button buttonType="filled" palette="default" disabled>
           Home Disabled
         </Button>

stories/cards/Card.stories.js

@@ -46,8 +46,7 @@ export default {
 export const Default = {
   args: {
     label: "Label",
-    supportText:
-      "Members vote to resolve a dispute democratically.",
+    supportText: "Members vote to resolve a dispute democratically.",
     recommended: true,
     selected: false,
     orientation: "horizontal",
@@ -69,8 +68,7 @@ export const HorizontalRecommended = {
 export const HorizontalSelected = {
   args: {
     label: "Label",
-    supportText:
-      "Members vote to resolve a dispute democratically.",
+    supportText: "Members vote to resolve a dispute democratically.",
     recommended: false,
     selected: true,
     orientation: "horizontal",
@@ -157,8 +155,7 @@ export const AllVariants = {
   parameters: {
     docs: {
       description: {
-        story:
-          "All four variants: horizontal/vertical × recommended/selected.",
+        story: "All four variants: horizontal/vertical × recommended/selected.",
       },
     },
   },

stories/cards/RuleCard.stories.js

@@ -75,7 +75,8 @@ export const Expanded = {
     backgroundColor: "bg-[#b7d9d5]",
     expanded: true,
     size: "L",
-    logoUrl: "http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png",
+    logoUrl:
+      "http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png",
     logoAlt: "Mutual Aid Mondays",
     categories: [
       {
@@ -96,9 +97,7 @@ export const Expanded = {
       },
       {
         name: "Communication",
-        chipOptions: [
-          { id: "comm-1", label: "Signal", state: "Unselected" },
-        ],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
         },
@@ -122,7 +121,11 @@ export const Expanded = {
         name: "Decision-making",
         chipOptions: [
           { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
-          { id: "decision-2", label: "Modified Consensus", state: "Unselected" },
+          {
+            id: "decision-2",
+            label: "Modified Consensus",
+            state: "Unselected",
+          },
         ],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
@@ -135,7 +138,11 @@ export const Expanded = {
         name: "Conflict management",
         chipOptions: [
           { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
-          { id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
+          {
+            id: "conflict-2",
+            label: "Restorative Justice",
+            state: "Unselected",
+          },
         ],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
@@ -232,7 +239,8 @@ export const ExpandedMedium = {
     backgroundColor: "bg-[#b7d9d5]",
     expanded: true,
     size: "M",
-    logoUrl: "http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png",
+    logoUrl:
+      "http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png",
     logoAlt: "Mutual Aid Mondays",
     categories: [
       {
@@ -247,9 +255,7 @@ export const ExpandedMedium = {
       },
       {
         name: "Communication",
-        chipOptions: [
-          { id: "comm-1", label: "Signal", state: "Unselected" },
-        ],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
       },
       {
         name: "Membership",
@@ -261,14 +267,22 @@ export const ExpandedMedium = {
         name: "Decision-making",
         chipOptions: [
           { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
-          { id: "decision-2", label: "Modified Consensus", state: "Unselected" },
+          {
+            id: "decision-2",
+            label: "Modified Consensus",
+            state: "Unselected",
+          },
         ],
       },
       {
         name: "Conflict management",
         chipOptions: [
           { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
-          { id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
+          {
+            id: "conflict-2",
+            label: "Restorative Justice",
+            state: "Unselected",
+          },
         ],
       },
     ],
@@ -393,9 +407,7 @@ export const InteractiveStates = {
       },
       {
         name: "Communication",
-        chipOptions: [
-          { id: "comm-1", label: "Signal", state: "Unselected" },
-        ],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
         },

stories/controls/Checkbox.stories.js

@@ -47,12 +47,14 @@ export default {
     mode: {
       control: "select",
       options: ["standard", "inverse", "Standard", "Inverse"],
-      description: "Visual mode of the checkbox (case-insensitive: accepts both lowercase and PascalCase)",
+      description:
+        "Visual mode of the checkbox (case-insensitive: accepts both lowercase and PascalCase)",
     },
     state: {
       control: "select",
       options: ["default", "hover", "focus", "Default", "Hover", "Focus"],
-      description: "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
+      description:
+        "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
     },
     disabled: {
       control: "boolean",
@@ -215,9 +217,12 @@ export const FigmaPascalCase = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Figma PascalCase Props (Standard/Inverse)</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Figma PascalCase Props (Standard/Inverse)
+        </h3>
         <p className="text-sm text-gray-400 mb-4">
-          These components accept both PascalCase (from Figma) and lowercase (from codebase) prop values.
+          These components accept both PascalCase (from Figma) and lowercase
+          (from codebase) prop values.
         </p>
         <div className="space-y-4">
           <Checkbox
@@ -237,7 +242,9 @@ export const FigmaPascalCase = () => {
         </div>
       </div>
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Mixed Case (backward compatibility)</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Mixed Case (backward compatibility)
+        </h3>
         <div className="space-y-4">
           <Checkbox
             label="Standard mode (lowercase) - still works"

stories/controls/RadioButton.stories.js

@@ -22,12 +22,23 @@ export default {
     mode: {
       control: "select",
       options: ["standard", "inverse", "Standard", "Inverse"],
-      description: "Visual mode of the radio button (case-insensitive: accepts both lowercase and PascalCase)",
+      description:
+        "Visual mode of the radio button (case-insensitive: accepts both lowercase and PascalCase)",
     },
     state: {
       control: "select",
-      options: ["default", "hover", "focus", "selected", "Default", "Hover", "Focus", "Selected"],
-      description: "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
+      options: [
+        "default",
+        "hover",
+        "focus",
+        "selected",
+        "Default",
+        "Hover",
+        "Focus",
+        "Selected",
+      ],
+      description:
+        "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
     },
     disabled: {
       control: "boolean",
@@ -188,7 +199,9 @@ export const StandardAllStates = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Standard Mode - Unselected</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Standard Mode - Unselected
+        </h3>
         <div className="space-y-4">
           <RadioButton
             label="Unselected (default, hover, focus)"
@@ -200,7 +213,9 @@ export const StandardAllStates = () => {
       </div>
 
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Standard Mode - Selected</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Standard Mode - Selected
+        </h3>
         <div className="space-y-4">
           <RadioButton
             label="Selected (default, hover, focus)"
@@ -222,7 +237,9 @@ export const InverseAllStates = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Inverse Mode - Unselected</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Inverse Mode - Unselected
+        </h3>
         <div className="space-y-4">
           <RadioButton
             label="Unselected (default, hover, focus)"
@@ -234,7 +251,9 @@ export const InverseAllStates = () => {
       </div>
 
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Inverse Mode - Selected</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Inverse Mode - Selected
+        </h3>
         <div className="space-y-4">
           <RadioButton
             label="Selected (default, hover, focus)"
@@ -256,9 +275,12 @@ export const FigmaPascalCase = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Figma PascalCase Props (Standard/Inverse)</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Figma PascalCase Props (Standard/Inverse)
+        </h3>
         <p className="text-sm text-gray-400 mb-4">
-          These components accept both PascalCase (from Figma) and lowercase (from codebase) prop values.
+          These components accept both PascalCase (from Figma) and lowercase
+          (from codebase) prop values.
         </p>
         <div className="space-y-4">
           <RadioButton
@@ -278,7 +300,9 @@ export const FigmaPascalCase = () => {
         </div>
       </div>
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Mixed Case (backward compatibility)</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Mixed Case (backward compatibility)
+        </h3>
         <div className="space-y-4">
           <RadioButton
             label="Standard mode (lowercase) - still works"

stories/controls/Switch.stories.js

@@ -10,7 +10,8 @@ export default {
   argTypes: {
     propSwitch: {
       control: "boolean",
-      description: "Whether the switch is checked (on) or not (off) (Figma prop)",
+      description:
+        "Whether the switch is checked (on) or not (off) (Figma prop)",
     },
     state: {
       control: "select",

stories/controls/TextArea.stories.js

@@ -74,7 +74,8 @@ export const Embedded = Template.bind({});
 Embedded.args = {
   label: "Section content",
   placeholder: "Enter text...",
-  value: "Embedded appearance used in create-flow modals: borderless, darker grey block.",
+  value:
+    "Embedded appearance used in create-flow modals: borderless, darker grey block.",
   appearance: "embedded",
   size: "large",
   rows: 4,

stories/controls/Upload.stories.js

@@ -51,7 +51,8 @@ Active.args = {
 Active.parameters = {
   docs: {
     description: {
-      story: "Upload component in active state with white button and black text.",
+      story:
+        "Upload component in active state with white button and black text.",
     },
   },
 };
@@ -66,7 +67,8 @@ Inactive.args = {
 Inactive.parameters = {
   docs: {
     description: {
-      story: "Upload component in inactive state with dark button and gray text.",
+      story:
+        "Upload component in inactive state with dark button and gray text.",
     },
   },
 };

stories/icons/Logo.stories.js

@@ -1,4 +1,4 @@
-import Logo from "../../app/components/icons/Logo";
+import Logo from "../../app/components/asset/logo";
 
 export default {
   title: "Components/Icons/Logo",
@@ -24,9 +24,15 @@ export default {
       ],
       description: "The size variant of the logo",
     },
-    showText: {
+    palette: {
+      control: { type: "select" },
+      options: ["default", "inverse"],
+      description:
+        "Visual style: default (dark on light) or inverse (e.g. on teal)",
+    },
+    wordmark: {
       control: { type: "boolean" },
-      description: "Whether to show the text portion of the logo",
+      description: "Whether to show the CommunityRule wordmark",
     },
   },
   tags: ["autodocs"],
@@ -35,13 +41,13 @@ export default {
 export const Default = {
   args: {
     size: "default",
-    showText: true,
+    wordmark: true,
   },
 };
 
 export const Sizes = {
   args: {
-    showText: true,
+    wordmark: true,
   },
   render: (args) => (
     <div className="space-y-6">
@@ -76,7 +82,7 @@ export const Sizes = {
 export const IconOnly = {
   args: {
     size: "default",
-    showText: false,
+    wordmark: false,
   },
   render: (args) => (
     <div className="space-y-6">
@@ -123,11 +129,11 @@ export const TopNavContext = {
         <div className="space-y-4">
           <div className="flex items-center space-x-4">
             <span className="text-white text-sm w-32">FolderTop:</span>
-            <Logo size="topNavFolderTop" showText={true} />
+            <Logo size="topNavFolderTop" wordmark palette="inverse" />
           </div>
           <div className="flex items-center space-x-4">
             <span className="text-white text-sm w-32">Header:</span>
-            <Logo size="topNavHeader" showText={true} />
+            <Logo size="topNavHeader" wordmark />
           </div>
         </div>
       </div>
@@ -148,13 +154,11 @@ export const CreateFlowContext = {
   render: () => (
     <div className="min-h-screen bg-black p-8">
       <div className="max-w-4xl mx-auto">
-        <h2 className="text-white font-semibold mb-6">
-          Create Flow Context
-        </h2>
+        <h2 className="text-white font-semibold mb-6">Create Flow Context</h2>
         <div className="space-y-4">
           <div className="flex items-center space-x-4">
             <span className="text-white text-sm w-32">CreateFlow:</span>
-            <Logo size="createFlow" showText={true} />
+            <Logo size="createFlow" wordmark />
           </div>
         </div>
       </div>
@@ -169,3 +173,30 @@ export const CreateFlowContext = {
     },
   },
 };
+
+export const CreateFlowCompletedInverse = {
+  args: {},
+  render: () => (
+    <div
+      className="min-h-screen p-8"
+      style={{ background: "var(--color-teal-teal50, #c9fef9)" }}
+    >
+      <div className="max-w-4xl mx-auto">
+        <h2 className="font-semibold mb-6 text-[var(--color-content-invert-primary)]">
+          Completed page (inverse on teal)
+        </h2>
+        <div className="space-y-4">
+          <Logo size="createFlow" wordmark palette="inverse" />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Same size as CreateFlowTopNav with inverse palette, as used on the completed page.",
+      },
+    },
+  },
+};

stories/modals/Create.stories.js

@@ -139,7 +139,8 @@ WithCustomHeader.args = {
   children: (
     <div className="space-y-4">
       <p className="text-[var(--color-content-default-primary)]">
-        When headerContent is provided, the default title and description are not shown.
+        When headerContent is provided, the default title and description are
+        not shown.
       </p>
     </div>
   ),

stories/navigation/MenuBarItem.stories.js

@@ -136,9 +136,15 @@ export const AllModes = {
       <div>
         <h3 className="text-white font-semibold mb-3">Default Mode</h3>
         <div className="space-x-4">
-          <MenuBarItem size="X Small" mode="default">X Small</MenuBarItem>
-          <MenuBarItem size="Large" mode="default">Large</MenuBarItem>
-          <MenuBarItem size="X Large" mode="default">X Large</MenuBarItem>
+          <MenuBarItem size="X Small" mode="default">
+            X Small
+          </MenuBarItem>
+          <MenuBarItem size="Large" mode="default">
+            Large
+          </MenuBarItem>
+          <MenuBarItem size="X Large" mode="default">
+            X Large
+          </MenuBarItem>
         </div>
       </div>
 
@@ -173,8 +179,7 @@ export const AllModes = {
   parameters: {
     docs: {
       description: {
-        story:
-          "Complete overview of all menu item modes, sizes, and states.",
+        story: "Complete overview of all menu item modes, sizes, and states.",
       },
     },
   },

stories/navigation/TopNav.stories.js

@@ -15,11 +15,13 @@ export default {
   argTypes: {
     folderTop: {
       control: "boolean",
-      description: "When true, renders the home page variant with yellow tab container. When false, renders the standard header variant.",
+      description:
+        "When true, renders the home page variant with yellow tab container. When false, renders the standard header variant.",
     },
     loggedIn: {
       control: "boolean",
-      description: "Whether the user is logged in (affects displayed elements).",
+      description:
+        "Whether the user is logged in (affects displayed elements).",
     },
     profile: {
       control: "boolean",
@@ -123,8 +125,8 @@ export const StandardInPageContext = {
           </h1>
           <p className="text-white mb-4">
             This demonstrates how the standard header looks in a realistic page
-            context. The header maintains its responsive behavior while providing
-            navigation for the page content.
+            context. The header maintains its responsive behavior while
+            providing navigation for the page content.
           </p>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {[1, 2, 3, 4, 5, 6].map((i) => (

stories/type/HeaderLockup.stories.js

@@ -44,8 +44,7 @@ export const SizeM = {
 export const CenterJustified = {
   args: {
     title: "How should conflicts be resolved?",
-    description:
-      "You can also combine or add new approaches to the list",
+    description: "You can also combine or add new approaches to the list",
     justification: "center",
     size: "L",
   },

stories/utility/CreateFlowFooter.stories.js

@@ -20,7 +20,8 @@ export default {
     },
     secondButton: {
       control: false,
-      description: "The second button (typically Next) to display on the right side",
+      description:
+        "The second button (typically Next) to display on the right side",
     },
   },
   tags: ["autodocs"],