Card compact and expanded template

stories/cards/Card.stories.js

@@ -0,0 +1,165 @@
+import Card from "../../app/components/cards/Card";
+
+export default {
+  title: "Components/Cards/Card",
+  component: Card,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Create flow selection card with support text, recommended/selected states, and horizontal or vertical orientation. Use for communication approaches and similar choices.",
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Primary label text",
+    },
+    supportText: {
+      control: { type: "text" },
+      description: "Supporting description below the label",
+    },
+    recommended: {
+      control: { type: "boolean" },
+      description: "Show yellow RECOMMENDED pill",
+    },
+    selected: {
+      control: { type: "boolean" },
+      description: "Show black SELECTED pill and dotted border",
+    },
+    orientation: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      description: "Layout orientation",
+    },
+    showInfoIcon: {
+      control: { type: "boolean" },
+      description: "Show info icon next to label (typically in vertical)",
+    },
+    onClick: { action: "clicked" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    label: "Label",
+    supportText:
+      "Members vote to resolve a dispute democratically.",
+    recommended: true,
+    selected: false,
+    orientation: "horizontal",
+    showInfoIcon: false,
+  },
+};
+
+export const HorizontalRecommended = {
+  args: {
+    label: "Label",
+    supportText:
+      "Collaborative work to reach a resolution that all parties can agree upon.",
+    recommended: true,
+    selected: false,
+    orientation: "horizontal",
+  },
+};
+
+export const HorizontalSelected = {
+  args: {
+    label: "Label",
+    supportText:
+      "Members vote to resolve a dispute democratically.",
+    recommended: false,
+    selected: true,
+    orientation: "horizontal",
+  },
+};
+
+export const VerticalRecommended = {
+  args: {
+    label: "Label",
+    supportText: "Invite-only",
+    recommended: true,
+    selected: false,
+    orientation: "vertical",
+    showInfoIcon: true,
+  },
+};
+
+export const VerticalSelected = {
+  args: {
+    label: "Label",
+    supportText: "Invite-only",
+    recommended: false,
+    selected: true,
+    orientation: "vertical",
+    showInfoIcon: true,
+  },
+};
+
+export const AllVariants = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
+      <div className="space-y-2">
+        <p className="font-inter text-sm font-medium text-gray-600">
+          Horizontal + Recommended
+        </p>
+        <Card
+          label="Label"
+          supportText="Members vote to resolve a dispute democratically."
+          recommended={true}
+          selected={false}
+          orientation="horizontal"
+        />
+      </div>
+      <div className="space-y-2">
+        <p className="font-inter text-sm font-medium text-gray-600">
+          Horizontal + Selected
+        </p>
+        <Card
+          label="Label"
+          supportText="Members vote to resolve a dispute democratically."
+          recommended={false}
+          selected={true}
+          orientation="horizontal"
+        />
+      </div>
+      <div className="space-y-2">
+        <p className="font-inter text-sm font-medium text-gray-600">
+          Vertical + Recommended
+        </p>
+        <Card
+          label="Label"
+          supportText="Invite-only"
+          recommended={true}
+          selected={false}
+          orientation="vertical"
+          showInfoIcon={true}
+        />
+      </div>
+      <div className="space-y-2">
+        <p className="font-inter text-sm font-medium text-gray-600">
+          Vertical + Selected
+        </p>
+        <Card
+          label="Label"
+          supportText="Invite-only"
+          recommended={false}
+          selected={true}
+          orientation="vertical"
+          showInfoIcon={true}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "All four variants: horizontal/vertical × recommended/selected.",
+      },
+    },
+  },
+};

stories/controls/TextArea.stories.js

@@ -70,6 +70,16 @@ Large.args = {
   value: "",
 };
 
+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.",
+  appearance: "embedded",
+  size: "large",
+  rows: 4,
+};
+
 export const HorizontalLabel = Template.bind({});
 HorizontalLabel.args = {
   labelVariant: "horizontal",

stories/create-flow/CardStack.stories.js

@@ -0,0 +1,139 @@
+import CardStack from "../../app/components/utility/CardStack";
+
+const SAMPLE_CARDS = [
+  {
+    id: "1",
+    label: "Label",
+    supportText:
+      "Collaborative work to reach a resolution that all parties can agree upon.",
+    recommended: true,
+  },
+  {
+    id: "2",
+    label: "Label",
+    supportText:
+      "Structured sessions where parties collaboratively resolve disputes.",
+    recommended: true,
+  },
+  {
+    id: "3",
+    label: "Label",
+    supportText: "Members vote to resolve a dispute democratically.",
+    recommended: true,
+  },
+  {
+    id: "4",
+    label: "Label",
+    supportText: "Arbitrators are chosen specifically for a particular case.",
+    recommended: true,
+  },
+  {
+    id: "5",
+    label: "Label",
+    supportText:
+      "Encouraging direct, respectful dialogue between those involved.",
+    recommended: true,
+  },
+  {
+    id: "6",
+    label: "Label",
+    supportText: "Invite-only",
+    recommended: true,
+  },
+];
+
+export default {
+  title: "Create Flow/CardStack",
+  component: CardStack,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Card stack for the create flow: compact grid or expanded list with toggle. Uses Card components; toggle visible only when hasMore is true.",
+      },
+    },
+  },
+  argTypes: {
+    expanded: {
+      control: { type: "boolean" },
+      description: "Expanded (list) vs compact (grid) mode",
+    },
+    hasMore: {
+      control: { type: "boolean" },
+      description: "Whether to show the See all / Show less toggle",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    cards: SAMPLE_CARDS,
+    hasMore: true,
+    title: "How should this community communicate with each-other?",
+    description:
+      "You can select multiple methods for different needs or add your own",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Compact grid with sample cards and See all toggle.",
+      },
+    },
+  },
+};
+
+export const Expanded = {
+  args: {
+    cards: SAMPLE_CARDS,
+    expanded: true,
+    hasMore: true,
+    title:
+      "What method should this community use to communicate with eachother?",
+    description:
+      "You can select multiple methods for different needs or add your own",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Expanded list layout with vertical cards and Show less toggle.",
+      },
+    },
+  },
+};
+
+export const WithSelection = {
+  args: {
+    cards: SAMPLE_CARDS,
+    selectedId: "2",
+    hasMore: true,
+    title: "How should this community communicate with each-other?",
+    description:
+      "You can select multiple methods for different needs or add your own",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Second card is selected; click cards to change selection.",
+      },
+    },
+  },
+};
+
+export const NoToggle = {
+  args: {
+    cards: SAMPLE_CARDS.slice(0, 3),
+    hasMore: false,
+    title: "How should this community communicate with each-other?",
+    description:
+      "You can select multiple methods for different needs or add your own",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "When hasMore is false, the See all toggle is hidden.",
+      },
+    },
+  },
+};

stories/modals/Create.stories.js

@@ -132,6 +132,22 @@ Step3.args = {
   totalSteps: 3,
 };
 
+export const WithCustomHeader = Template.bind({});
+WithCustomHeader.args = {
+  isOpen: true,
+  headerContent: <div className="text-lg font-semibold">Custom header</div>,
+  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.
+      </p>
+    </div>
+  ),
+  showBackButton: false,
+  showNextButton: true,
+  nextButtonText: "Continue",
+};
+
 export const WithoutFooter = Template.bind({});
 WithoutFooter.args = {
   isOpen: true,

stories/utility/Scrollbar.stories.js

@@ -0,0 +1,95 @@
+import Scrollbar from "../../app/components/utility/Scrollbar";
+
+const tallContent = (
+  <div style={{ height: 400 }}>
+    <p>Line 1</p>
+    <p>Line 2</p>
+    <p>Line 3</p>
+    <p>Line 4</p>
+    <p>Line 5</p>
+    <p>Line 6</p>
+    <p>Line 7</p>
+    <p>Line 8</p>
+    <p>Line 9</p>
+    <p>Line 10</p>
+  </div>
+);
+
+const wideContent = (
+  <div style={{ display: "flex", width: 800, gap: 16 }}>
+    <span>Item A</span>
+    <span>Item B</span>
+    <span>Item C</span>
+    <span>Item D</span>
+    <span>Item E</span>
+  </div>
+);
+
+export default {
+  title: "Components/Utility/Scrollbar",
+  component: Scrollbar,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A scrollable container that applies the design system scrollbar styling. Supports vertical, horizontal, or both overflow.",
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["vertical", "horizontal", "both"],
+      description: "Scroll direction",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    children: tallContent,
+    orientation: "vertical",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 300, maxHeight: 200, border: "1px solid #ccc" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Horizontal = {
+  args: {
+    children: wideContent,
+    orientation: "horizontal",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 300, overflow: "hidden" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Both = {
+  args: {
+    children: (
+      <div style={{ width: 400, height: 400 }}>
+        <div style={{ width: 500, height: 500, padding: 8 }}>
+          Scroll both directions. Content is larger than the container.
+        </div>
+      </div>
+    ),
+    orientation: "both",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 300, height: 200, border: "1px solid #ccc" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

stories/utility/Tag.stories.js

@@ -0,0 +1,45 @@
+import Tag from "../../app/components/utility/Tag";
+
+export default {
+  title: "Components/Utility/Tag",
+  component: Tag,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Small status tag with recommended (yellow) or selected (dark) variant. Default labels are RECOMMENDED and SELECTED; pass children for custom text.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["recommended", "selected"],
+      description: "Visual variant",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Custom label (omit to use default RECOMMENDED/SELECTED)",
+    },
+  },
+};
+
+export const Recommended = {
+  args: {
+    variant: "recommended",
+  },
+};
+
+export const Selected = {
+  args: {
+    variant: "selected",
+  },
+};
+
+export const CustomLabel = {
+  args: {
+    variant: "recommended",
+    children: "Custom label",
+  },
+};