adilallo
82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
import Icon from "../../app/components/cards/Icon";
|
||
import { getAssetPath, vectorMarkPath } from "../../lib/assetUtils";
|
||
|
||
export default {
|
||
title: "Components/Cards/Icon",
|
||
component: Icon,
|
||
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:
|
||
"Body: 12px/16px (X Small); 14px/20px on md–<lg only (Card/Icon, Section 22084-859062)",
|
||
},
|
||
onClick: { action: "clicked" },
|
||
},
|
||
tags: ["autodocs"],
|
||
};
|
||
|
||
// Worker's Coop icon
|
||
const WorkerCoopIcon = () => (
|
||
<img
|
||
src={getAssetPath(vectorMarkPath("worker-coop"))}
|
||
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!");
|
||
},
|
||
},
|
||
};
|