Feature Grid storybook

2025-08-27 09:34:10 -06:00
parent 0d113488a7
commit 733be5f84c
3 changed files with 135 additions and 373 deletions
@@ -0,0 +1,77 @@
+import MiniCard from "../app/components/MiniCard";
+
+export default {
+  title: "Components/MiniCard",
+  component: MiniCard,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    backgroundColor: {
+      control: "select",
+      options: [
+        "bg-[var(--color-surface-default-brand-royal)]",
+        "bg-[#D1FFE2]",
+        "bg-[#F4CAFF]",
+        "bg-[#CBDDFF]",
+      ],
+    },
+    labelLine1: { control: "text" },
+    labelLine2: { control: "text" },
+    panelContent: { control: "text" },
+    href: { control: "text" },
+    onClick: { action: "clicked" },
+    ariaLabel: { control: "text" },
+  },
+};
+
+export const Default = {
+  args: {
+    backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
+    labelLine1: "Decision-making",
+    labelLine2: "support",
+    panelContent: "assets/Feature_Support.png",
+  },
+};
+
+export const ColorVariants = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4">
+      <MiniCard
+        backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
+        labelLine1="Decision-making"
+        labelLine2="support"
+        panelContent="assets/Feature_Support.png"
+      />
+      <MiniCard
+        backgroundColor="bg-[#D1FFE2]"
+        labelLine1="Values alignment"
+        labelLine2="exercises"
+        panelContent="assets/Feature_Exercises.png"
+      />
+      <MiniCard
+        backgroundColor="bg-[#F4CAFF]"
+        labelLine1="Membership"
+        labelLine2="guidance"
+        panelContent="assets/Feature_Guidance.png"
+      />
+      <MiniCard
+        backgroundColor="bg-[#CBDDFF]"
+        labelLine1="Conflict resolution"
+        labelLine2="tools"
+        panelContent="assets/Feature_Tools.png"
+      />
+    </div>
+  ),
+};
+
+export const AsLink = {
+  args: {
+    backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
+    labelLine1: "Decision-making",
+    labelLine2: "support",
+    panelContent: "assets/Feature_Support.png",
+    href: "#decision-making",
+    ariaLabel: "Navigate to decision-making support tools",
+  },
+};