Card compact and expanded template

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",
+  },
+};