Cleanup, add tests and storybook

2026-04-04 10:57:01 -06:00
parent 5d6530e914
commit 427dc44476
26 changed files with 700 additions and 7 deletions
@@ -0,0 +1,52 @@
+import DecisionMakingSidebar from "../../app/components/utility/DecisionMakingSidebar";
+
+export default {
+  title: "Components/Utility/DecisionMakingSidebar",
+  component: DecisionMakingSidebar,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        component:
+          "HeaderLockup + InfoMessageBox for decision-making step sidebars.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-black p-8 max-w-lg w-full">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+const messageItems = [
+  { id: "c1", label: "Consensus" },
+  { id: "c2", label: "Majority vote" },
+];
+
+export const Default = {
+  args: {
+    title: "How does your group make decisions?",
+    description:
+      "Choose the approaches that best match how your community operates.",
+    messageBoxTitle: "Common approaches",
+    messageBoxItems: messageItems,
+    size: "L",
+    justification: "left",
+  },
+};
+
+export const Medium = {
+  args: {
+    title: "Decision-making",
+    description: "Short description.",
+    messageBoxTitle: "Pick any",
+    messageBoxItems: [{ id: "x", label: "Single method" }],
+    size: "M",
+    justification: "left",
+  },
+};
@@ -0,0 +1,43 @@
+import InfoMessageBox from "../../app/components/utility/InfoMessageBox";
+
+export default {
+  title: "Components/Utility/InfoMessageBox",
+  component: InfoMessageBox,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        component:
+          "Message region with optional exclamation icon and CheckboxGroup items.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-black p-8 max-w-md w-full">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+const sampleItems = [
+  { id: "1", label: "First option" },
+  { id: "2", label: "Second option" },
+];
+
+export const Default = {
+  args: {
+    title: "Before you continue",
+    items: sampleItems,
+  },
+};
+
+export const SingleItem = {
+  args: {
+    title: "Select one",
+    items: [{ id: "a", label: "Only choice" }],
+  },
+};