Implementation of icon card

2026-02-02 14:43:32 -07:00
parent 59d766cda2
commit e227e0c658
13 changed files with 396 additions and 0 deletions
@@ -0,0 +1,80 @@
+import IconCard from "../app/components/IconCard";
+import { getAssetPath } from "../lib/assetUtils";
+
+export default {
+  title: "Components/IconCard",
+  component: IconCard,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An interactive card component that displays an icon, title, and description. Features hover states, keyboard navigation, and accessibility support. Use Tab key to test focus indicators and Enter/Space to activate.",
+      },
+    },
+  },
+  argTypes: {
+    icon: {
+      control: false,
+      description: "The icon element to display at the top of the card",
+    },
+    title: {
+      control: { type: "text" },
+      description: "The main title of the card",
+    },
+    description: {
+      control: { type: "text" },
+      description: "The description text displayed in uppercase",
+    },
+    onClick: { action: "clicked" },
+  },
+  tags: ["autodocs"],
+};
+
+// Worker's Coop icon
+const WorkerCoopIcon = () => (
+  <img
+    src={getAssetPath("assets/Vector_WorkerCoop.svg")}
+    alt=""
+    className="w-[36px] h-[36px]"
+    width="36"
+    height="36"
+  />
+);
+
+export const Default = {
+  args: {
+    icon: <WorkerCoopIcon />,
+    title: "Worker's cooperatives",
+    description:
+      "Employee-owned businesses often need to clarify how power is shared, decisions are made, and how processes operate within their organizations.",
+  },
+};
+
+export const WithLongTitle = {
+  args: {
+    icon: <WorkerCoopIcon />,
+    title: "This is a very long title that might wrap to multiple lines",
+    description:
+      "Employee-owned businesses often need to clarify how power is shared.",
+  },
+};
+
+export const WithShortDescription = {
+  args: {
+    icon: <WorkerCoopIcon />,
+    title: "Worker's cooperatives",
+    description: "Short description",
+  },
+};
+
+export const Interactive = {
+  args: {
+    icon: <WorkerCoopIcon />,
+    title: "Clickable Card",
+    description: "This card has an onClick handler",
+    onClick: () => {
+      console.log("Card clicked!");
+    },
+  },
+};