Files
community-rule/stories/sections/Groups.stories.js
T
2026-05-21 23:25:56 -06:00

95 lines
2.5 KiB
JavaScript

import Groups from "../../app/components/sections/Groups";
import { getAssetPath, vectorMarkPath } from "../../lib/assetUtils";
const vectorIconSrc = [
getAssetPath(vectorMarkPath("worker-coop")),
getAssetPath(vectorMarkPath("mutual-aid")),
getAssetPath(vectorMarkPath("open-source")),
getAssetPath(vectorMarkPath("dao")),
];
const sampleItems = [
{
icon: (
<img
alt=""
aria-hidden
className="inline-block size-9 object-contain"
height={36}
src={vectorIconSrc[0]}
width={36}
/>
),
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.",
},
{
icon: (
<img
alt=""
aria-hidden
className="inline-block size-9 object-contain"
height={36}
src={vectorIconSrc[1]}
width={36}
/>
),
title: "Mutual aid groups",
description:
"Mutual aid groups must define how resources are shared, decisions are made, and volunteer coordination operates within their organizations.",
},
{
icon: (
<img
alt=""
aria-hidden
className="inline-block size-9 object-contain"
height={36}
src={vectorIconSrc[2]}
width={36}
/>
),
title: "Open source projects",
description:
"Agree to how contributions are managed, technical decisions are made, and community participation operates within their development communities.",
},
{
icon: (
<img
alt=""
aria-hidden
className="inline-block size-9 object-contain"
height={36}
src={vectorIconSrc[3]}
width={36}
/>
),
title: "DAOs",
description:
"Document token-based voting process, proposal patterns, and how community governance operates within their blockchain ecosystems.",
},
];
export default {
title: "Components/Sections/Groups",
component: Groups,
parameters: {
layout: "fullscreen",
docs: {
description: {
component:
"Figma **Section** (**[22084-859062](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859062&m=dev)**) — baseline stacked cards; **md+** `22084-859470` hairline grid. **`cards/Icon`** tiles (body **12px/16px** from **`lg`**).",
},
},
},
tags: ["autodocs"],
};
export const Default = {
args: {
title: "Who is this for?",
items: sampleItems,
},
};