Update stories to match new component organization
This commit is contained in:
adilallo
@@ -0,0 +1,80 @@
|
||||
import IconCard from "../../app/components/cards/IconCard";
|
||||
import { getAssetPath } from "../../lib/assetUtils";
|
||||
|
||||
export default {
|
||||
title: "Components/Cards/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!");
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,77 @@
|
||||
import MiniCard from "../../app/components/cards/MiniCard";
|
||||
|
||||
export default {
|
||||
title: "Components/Cards/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",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,221 @@
|
||||
import NumberCard from "../../app/components/cards/NumberCard";
|
||||
|
||||
export default {
|
||||
title: "Components/Cards/NumberCard",
|
||||
component: NumberCard,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Individual number card component that displays a step in a process with a numbered icon and descriptive text. Supports explicit size variants (Small, Medium, Large, XLarge) matching Figma designs, or responsive layouts when size is not specified.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
number: {
|
||||
control: { type: "number", min: 1, max: 9 },
|
||||
description: "The number to display on the card",
|
||||
},
|
||||
text: {
|
||||
control: { type: "text" },
|
||||
description: "The descriptive text for this step",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["Small", "Medium", "Large", "XLarge", undefined],
|
||||
description:
|
||||
"Explicit size variant matching Figma designs. If not specified, uses responsive breakpoints for backward compatibility.",
|
||||
},
|
||||
iconShape: {
|
||||
control: { type: "select" },
|
||||
options: ["blob", "gear", "star"],
|
||||
description:
|
||||
"The shape of the icon background (currently not used, uses PNG images)",
|
||||
},
|
||||
iconColor: {
|
||||
control: { type: "select" },
|
||||
options: ["green", "purple", "orange", "blue"],
|
||||
description:
|
||||
"The color theme for the icon (currently not used, uses PNG images)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
size: "Small",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Small size variant: flex-col layout with items-end, 16px gap, 20px padding, 24px text with 32px line height. Section number positioned top-right.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Medium = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
size: "Medium",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Medium size variant: flex-row layout with items-center, 32px gap, 32px padding, 24px text with 24px line height. Section number on left side.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Large = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
size: "Large",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Large size variant: flex-col layout with items-start justify-end, 22px gap, 238px height, 32px padding, 24px text with 24px line height. Section number absolute top-right.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const XLarge = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
size: "XLarge",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"XLarge size variant: flex-col layout with items-start justify-end, 22px gap, 238px height, 32px padding, 32px text with 32px line height. Section number absolute top-right.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const AllSizes = {
|
||||
render: () => (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="mb-4 text-lg font-semibold">Small</h3>
|
||||
<NumberCard
|
||||
number={1}
|
||||
text="Document how your community makes decisions"
|
||||
size="Small"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-4 text-lg font-semibold">Medium</h3>
|
||||
<NumberCard
|
||||
number={2}
|
||||
text="Document how your community makes decisions"
|
||||
size="Medium"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-4 text-lg font-semibold">Large</h3>
|
||||
<NumberCard
|
||||
number={3}
|
||||
text="Document how your community makes decisions"
|
||||
size="Large"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-4 text-lg font-semibold">XLarge</h3>
|
||||
<NumberCard
|
||||
number={1}
|
||||
text="Document how your community makes decisions"
|
||||
size="XLarge"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows all four size variants side by side to compare the different layouts and typography.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const AllNumbers = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Example card text",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<NumberCard {...args} number={1} text="First step in the process" />
|
||||
<NumberCard
|
||||
{...args}
|
||||
number={2}
|
||||
text="Second step with different content"
|
||||
/>
|
||||
<NumberCard
|
||||
{...args}
|
||||
number={3}
|
||||
text="Third and final step of the workflow"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows all three numbered cards with different content to demonstrate the visual hierarchy.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LongText = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Demonstrates how the card handles longer text content across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,438 @@
|
||||
import RuleCard from "../../app/components/cards/RuleCard";
|
||||
import Image from "next/image";
|
||||
|
||||
export default {
|
||||
title: "Components/Cards/RuleCard",
|
||||
component: RuleCard,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"An interactive card component that displays governance templates and decision-making patterns. Features collapsed/expanded states, size variants (L/M), category sections with pills and + buttons, hover states, keyboard navigation, analytics tracking, and accessibility support. Use Tab key to test focus indicators and Enter/Space to activate.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
description: "The title of the governance template",
|
||||
},
|
||||
description: {
|
||||
control: { type: "text" },
|
||||
description: "The description of the governance pattern",
|
||||
},
|
||||
backgroundColor: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"bg-[var(--color-surface-default-brand-lime)]",
|
||||
"bg-[var(--color-surface-default-brand-rust)]",
|
||||
"bg-[var(--color-surface-default-brand-red)]",
|
||||
"bg-[var(--color-surface-default-brand-teal)]",
|
||||
"bg-[var(--color-community-teal-100)]",
|
||||
],
|
||||
description: "The background color variant for the card",
|
||||
},
|
||||
expanded: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the card is in expanded state",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["XS", "S", "M", "L", "xs", "s", "m", "l"],
|
||||
description: "Size variant of the card",
|
||||
},
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
title: "Consensus clusters",
|
||||
description:
|
||||
"Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council.",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-lime)]",
|
||||
expanded: false,
|
||||
size: "L",
|
||||
icon: (
|
||||
<Image
|
||||
src="assets/Icon_Sociocracy.svg"
|
||||
alt="Sociocracy"
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const Expanded = {
|
||||
args: {
|
||||
title: "Mutual Aid Mondays",
|
||||
description:
|
||||
"Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness.",
|
||||
backgroundColor: "bg-[#b7d9d5]",
|
||||
expanded: true,
|
||||
size: "L",
|
||||
logoUrl: "http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png",
|
||||
logoAlt: "Mutual Aid Mondays",
|
||||
categories: [
|
||||
{
|
||||
name: "Values",
|
||||
chipOptions: [
|
||||
{ id: "values-1", label: "Consciousness", state: "Unselected" },
|
||||
{ id: "values-2", label: "Ecology", state: "Unselected" },
|
||||
{ id: "values-3", label: "Abundance", state: "Unselected" },
|
||||
{ id: "values-4", label: "Art", state: "Unselected" },
|
||||
{ id: "values-5", label: "Decisiveness", state: "Unselected" },
|
||||
],
|
||||
onChipClick: (categoryName, chipId) => {
|
||||
console.log(`Chip clicked: ${categoryName} - ${chipId}`);
|
||||
},
|
||||
onAddClick: (categoryName) => {
|
||||
console.log(`Add clicked: ${categoryName}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Communication",
|
||||
chipOptions: [
|
||||
{ id: "comm-1", label: "Signal", state: "Unselected" },
|
||||
],
|
||||
onChipClick: (categoryName, chipId) => {
|
||||
console.log(`Chip clicked: ${categoryName} - ${chipId}`);
|
||||
},
|
||||
onAddClick: (categoryName) => {
|
||||
console.log(`Add clicked: ${categoryName}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Membership",
|
||||
chipOptions: [
|
||||
{ id: "membership-1", label: "Open Admission", state: "Unselected" },
|
||||
],
|
||||
onChipClick: (categoryName, chipId) => {
|
||||
console.log(`Chip clicked: ${categoryName} - ${chipId}`);
|
||||
},
|
||||
onAddClick: (categoryName) => {
|
||||
console.log(`Add clicked: ${categoryName}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Decision-making",
|
||||
chipOptions: [
|
||||
{ id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
|
||||
{ id: "decision-2", label: "Modified Consensus", state: "Unselected" },
|
||||
],
|
||||
onChipClick: (categoryName, chipId) => {
|
||||
console.log(`Chip clicked: ${categoryName} - ${chipId}`);
|
||||
},
|
||||
onAddClick: (categoryName) => {
|
||||
console.log(`Add clicked: ${categoryName}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Conflict management",
|
||||
chipOptions: [
|
||||
{ id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
|
||||
{ id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
|
||||
],
|
||||
onChipClick: (categoryName, chipId) => {
|
||||
console.log(`Chip clicked: ${categoryName} - ${chipId}`);
|
||||
},
|
||||
onAddClick: (categoryName) => {
|
||||
console.log(`Add clicked: ${categoryName}`);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeLarge = {
|
||||
args: {
|
||||
title: "Consensus clusters",
|
||||
description:
|
||||
"Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council.",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-lime)]",
|
||||
expanded: false,
|
||||
size: "L",
|
||||
icon: (
|
||||
<Image
|
||||
src="assets/Icon_Sociocracy.svg"
|
||||
alt="Sociocracy"
|
||||
width={103}
|
||||
height={103}
|
||||
/>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeMedium = {
|
||||
args: {
|
||||
title: "Consensus clusters",
|
||||
description:
|
||||
"Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council.",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-lime)]",
|
||||
expanded: false,
|
||||
size: "M",
|
||||
icon: (
|
||||
<Image
|
||||
src="assets/Icon_Sociocracy.svg"
|
||||
alt="Sociocracy"
|
||||
width={56}
|
||||
height={56}
|
||||
/>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeSmall = {
|
||||
args: {
|
||||
title: "Consensus clusters",
|
||||
description:
|
||||
"Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council.",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-lime)]",
|
||||
expanded: false,
|
||||
size: "S",
|
||||
icon: (
|
||||
<Image
|
||||
src="assets/Icon_Sociocracy.svg"
|
||||
alt="Sociocracy"
|
||||
width={56}
|
||||
height={56}
|
||||
/>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeExtraSmall = {
|
||||
args: {
|
||||
title: "Consensus clusters",
|
||||
description:
|
||||
"Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council.",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-lime)]",
|
||||
expanded: false,
|
||||
size: "XS",
|
||||
icon: (
|
||||
<Image
|
||||
src="assets/Icon_Sociocracy.svg"
|
||||
alt="Sociocracy"
|
||||
width={8}
|
||||
height={8}
|
||||
/>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const ExpandedMedium = {
|
||||
args: {
|
||||
title: "Mutual Aid Mondays",
|
||||
description:
|
||||
"Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness.",
|
||||
backgroundColor: "bg-[#b7d9d5]",
|
||||
expanded: true,
|
||||
size: "M",
|
||||
logoUrl: "http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png",
|
||||
logoAlt: "Mutual Aid Mondays",
|
||||
categories: [
|
||||
{
|
||||
name: "Values",
|
||||
chipOptions: [
|
||||
{ id: "values-1", label: "Consciousness", state: "Unselected" },
|
||||
{ id: "values-2", label: "Ecology", state: "Unselected" },
|
||||
{ id: "values-3", label: "Abundance", state: "Unselected" },
|
||||
{ id: "values-4", label: "Art", state: "Unselected" },
|
||||
{ id: "values-5", label: "Decisiveness", state: "Unselected" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Communication",
|
||||
chipOptions: [
|
||||
{ id: "comm-1", label: "Signal", state: "Unselected" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Membership",
|
||||
chipOptions: [
|
||||
{ id: "membership-1", label: "Open Admission", state: "Unselected" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Decision-making",
|
||||
chipOptions: [
|
||||
{ id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
|
||||
{ id: "decision-2", label: "Modified Consensus", state: "Unselected" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Conflict management",
|
||||
chipOptions: [
|
||||
{ id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
|
||||
{ id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithLogoFallback = {
|
||||
args: {
|
||||
title: "Community Example",
|
||||
description:
|
||||
"This card shows the logo fallback with community initials when no logo is provided.",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-teal)]",
|
||||
expanded: false,
|
||||
size: "L",
|
||||
communityInitials: "CE",
|
||||
},
|
||||
};
|
||||
|
||||
export const AllVariants = {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
render: (_args) => (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
|
||||
<RuleCard
|
||||
title="Consensus clusters"
|
||||
description="Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council."
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
|
||||
icon={
|
||||
<Image
|
||||
src="assets/Icon_Sociocracy.svg"
|
||||
alt="Sociocracy"
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
}
|
||||
onClick={() => console.log("Consensus clusters selected")}
|
||||
/>
|
||||
<RuleCard
|
||||
title="Consensus"
|
||||
description="Decisions that affect the group collectively should involve participation of all participants."
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
|
||||
icon={
|
||||
<Image
|
||||
src="assets/Icon_Consensus.svg"
|
||||
alt="Consensus"
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
}
|
||||
onClick={() => console.log("Consensus selected")}
|
||||
/>
|
||||
<RuleCard
|
||||
title="Elected Board"
|
||||
description="An elected board determines policies and organizes their implementation."
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-red)]"
|
||||
icon={
|
||||
<Image
|
||||
src="assets/Icon_ElectedBoard.svg"
|
||||
alt="Elected Board"
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
}
|
||||
onClick={() => console.log("Elected Board selected")}
|
||||
/>
|
||||
<RuleCard
|
||||
title="Petition"
|
||||
description="All participants can propose and vote on proposals for the group."
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
|
||||
icon={
|
||||
<Image
|
||||
src="assets/Icon_Petition.svg"
|
||||
alt="Petition"
|
||||
width={40}
|
||||
height={40}
|
||||
className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
|
||||
/>
|
||||
}
|
||||
onClick={() => console.log("Petition selected")}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"All four governance template variants with their respective colors and icons. Test hover states, focus indicators, and click interactions.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const InteractiveStates = {
|
||||
args: {
|
||||
title: "Interactive Demo",
|
||||
description:
|
||||
"Hover over this card to see the scale and shadow effects. Use Tab to focus and Enter/Space to activate. Click pills and + buttons to see event handlers.",
|
||||
backgroundColor: "bg-[var(--color-community-teal-100)]",
|
||||
expanded: true,
|
||||
size: "L",
|
||||
icon: (
|
||||
<div className="w-[103px] h-[103px] bg-white rounded-full flex items-center justify-center">
|
||||
<span className="text-[36px] font-bold text-gray-800">?</span>
|
||||
</div>
|
||||
),
|
||||
categories: [
|
||||
{
|
||||
name: "Values",
|
||||
chipOptions: [
|
||||
{ id: "values-1", label: "Consciousness", state: "Unselected" },
|
||||
{ id: "values-2", label: "Ecology", state: "Unselected" },
|
||||
{ id: "values-3", label: "Abundance", state: "Unselected" },
|
||||
],
|
||||
onChipClick: (categoryName, chipId) => {
|
||||
console.log(`Chip clicked: ${categoryName} - ${chipId}`);
|
||||
},
|
||||
onAddClick: (categoryName) => {
|
||||
console.log(`Add clicked: ${categoryName}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Communication",
|
||||
chipOptions: [
|
||||
{ id: "comm-1", label: "Signal", state: "Unselected" },
|
||||
],
|
||||
onChipClick: (categoryName, chipId) => {
|
||||
console.log(`Chip clicked: ${categoryName} - ${chipId}`);
|
||||
},
|
||||
onAddClick: (categoryName) => {
|
||||
console.log(`Add clicked: ${categoryName}`);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Demonstrates interactive states including hover effects, focus indicators, keyboard navigation, and pill/+ button interactions. Test with mouse hover, keyboard Tab/Enter/Space, and click pills/+ buttons.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const AccessibilityTest = {
|
||||
args: {
|
||||
title: "Accessibility Demo",
|
||||
description:
|
||||
"This card is designed for accessibility testing. Use Tab to focus, Enter/Space to activate, and screen readers to test ARIA labels.",
|
||||
backgroundColor: "bg-[var(--color-surface-default-brand-teal)]",
|
||||
icon: (
|
||||
<div className="w-10 h-10 md:w-14 md:h-14 lg:w-[90px] lg:h-[90px] bg-white rounded-full flex items-center justify-center">
|
||||
<span className="text-lg font-bold text-gray-800">♿</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Specifically designed for testing accessibility features including keyboard navigation, screen reader support, and focus management.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user