Update Rule Card component
This commit is contained in:
adilallo
+175
-226
@@ -1,20 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import TextInput from "../components/TextInput";
|
||||
import Checkbox from "../components/Checkbox";
|
||||
import CheckboxGroup from "../components/CheckboxGroup";
|
||||
import RadioGroup from "../components/RadioGroup";
|
||||
import RuleCard from "../components/RuleCard";
|
||||
import Image from "next/image";
|
||||
import { getAssetPath } from "../../lib/assetUtils";
|
||||
|
||||
export default function ComponentsPreview() {
|
||||
const [defaultInputValue, setDefaultInputValue] = useState("");
|
||||
const [activeInputValue, setActiveInputValue] = useState("");
|
||||
const [errorInputValue, setErrorInputValue] = useState("");
|
||||
const [standardCheckbox, setStandardCheckbox] = useState(false);
|
||||
const [inverseCheckbox, setInverseCheckbox] = useState(false);
|
||||
const [checkboxGroupValues, setCheckboxGroupValues] = useState<string[]>([]);
|
||||
const [radioValue, setRadioValue] = useState("");
|
||||
const [inverseRadioValue, setInverseRadioValue] = useState("");
|
||||
const [expandedCard, setExpandedCard] = useState<string | null>(null);
|
||||
|
||||
const sampleCategories = [
|
||||
{
|
||||
name: "Values",
|
||||
items: ["Consciousness", "Ecology", "Abundance", "Art", "Decisiveness"],
|
||||
createUrl: "/create/value",
|
||||
},
|
||||
{
|
||||
name: "Communication",
|
||||
items: ["Signal"],
|
||||
createUrl: "/create/communication",
|
||||
},
|
||||
{
|
||||
name: "Membership",
|
||||
items: ["Open Admission"],
|
||||
createUrl: "/create/membership",
|
||||
},
|
||||
{
|
||||
name: "Decision-making",
|
||||
items: ["Lazy Consensus", "Modified Consensus"],
|
||||
createUrl: "/create/decision-making",
|
||||
},
|
||||
{
|
||||
name: "Conflict management",
|
||||
items: ["Code of Conduct", "Restorative Justice"],
|
||||
createUrl: "/create/conflict-management",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]">
|
||||
@@ -24,236 +44,165 @@ export default function ComponentsPreview() {
|
||||
Component Preview
|
||||
</h1>
|
||||
<p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
|
||||
Temporary page for viewing and testing new components
|
||||
RuleCard component examples - collapsed/expanded states, size variants, and interactions
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Text Input Section */}
|
||||
{/* Collapsed State - Large */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Text Input Component
|
||||
Collapsed State - Large (L)
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
States
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<TextInput
|
||||
label="Default Text Input"
|
||||
placeholder="Enter text"
|
||||
value={defaultInputValue}
|
||||
onChange={(e) => setDefaultInputValue(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
label="Interactive Text Input (click = active, tab = focus)"
|
||||
placeholder="Enter text"
|
||||
value={activeInputValue}
|
||||
onChange={(e) => setActiveInputValue(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
label="Disabled Text Input"
|
||||
placeholder="Enter text"
|
||||
value=""
|
||||
disabled
|
||||
/>
|
||||
<TextInput
|
||||
label="Error Text Input"
|
||||
placeholder="Enter text"
|
||||
value={errorInputValue}
|
||||
onChange={(e) => setErrorInputValue(e.target.value)}
|
||||
error
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<RuleCard
|
||||
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={false}
|
||||
size="L"
|
||||
className="w-[525px]"
|
||||
logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
|
||||
logoAlt="Mutual Aid Mondays"
|
||||
onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Collapsed State - Medium */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Collapsed State - Medium (M)
|
||||
</h2>
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
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={false}
|
||||
size="M"
|
||||
className="w-[289px]"
|
||||
logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
|
||||
logoAlt="Mutual Aid Mondays"
|
||||
onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Expanded State - Large */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Expanded State - Large (L)
|
||||
</h2>
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
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"
|
||||
className="w-[568px]"
|
||||
logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
|
||||
logoAlt="Mutual Aid Mondays"
|
||||
categories={sampleCategories}
|
||||
onPillClick={(category, item) => {
|
||||
console.log(`Pill clicked: ${category} - ${item}`);
|
||||
}}
|
||||
onCreateClick={(category) => {
|
||||
console.log(`Create clicked: ${category}`);
|
||||
}}
|
||||
onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Expanded State - Medium */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Expanded State - Medium (M)
|
||||
</h2>
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
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"
|
||||
className="w-[398px]"
|
||||
logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
|
||||
logoAlt="Mutual Aid Mondays"
|
||||
categories={sampleCategories}
|
||||
onPillClick={(category, item) => {
|
||||
console.log(`Pill clicked: ${category} - ${item}`);
|
||||
}}
|
||||
onCreateClick={(category) => {
|
||||
console.log(`Create clicked: ${category}`);
|
||||
}}
|
||||
onClick={() => console.log("Card clicked: Mutual Aid Mondays")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Different Background Colors */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Different Background Colors
|
||||
</h2>
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-scale-024)]">
|
||||
<RuleCard
|
||||
title="Consensus clusters"
|
||||
description="Units called Circles have the ability to decide and act on matters in their domains."
|
||||
backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
|
||||
expanded={false}
|
||||
size="L"
|
||||
className="w-[525px]"
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath("assets/Icon_Sociocracy.svg")}
|
||||
alt="Sociocracy"
|
||||
width={103}
|
||||
height={103}
|
||||
/>
|
||||
}
|
||||
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)]"
|
||||
expanded={false}
|
||||
size="L"
|
||||
className="w-[525px]"
|
||||
icon={
|
||||
<Image
|
||||
src={getAssetPath("assets/Icon_Consensus.svg")}
|
||||
alt="Consensus"
|
||||
width={103}
|
||||
height={103}
|
||||
/>
|
||||
}
|
||||
onClick={() => console.log("Consensus selected")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Checkbox Section */}
|
||||
{/* Logo Fallback */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Checkbox Component
|
||||
Logo Fallback (Community Initials)
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Standard Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<Checkbox
|
||||
label="Standard Checkbox"
|
||||
checked={standardCheckbox}
|
||||
mode="standard"
|
||||
onChange={({ checked }) => setStandardCheckbox(checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Inverse Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<Checkbox
|
||||
label="Inverse Checkbox"
|
||||
checked={inverseCheckbox}
|
||||
mode="inverse"
|
||||
onChange={({ checked }) => setInverseCheckbox(checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Checkbox Group Section */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Checkbox Group Component
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Standard Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<CheckboxGroup
|
||||
name="standard-checkbox-group"
|
||||
value={checkboxGroupValues}
|
||||
onChange={({ value }) => setCheckboxGroupValues(value)}
|
||||
mode="standard"
|
||||
options={[
|
||||
{ value: "option1", label: "Checkbox label" },
|
||||
{
|
||||
value: "option2",
|
||||
label: "Checkbox label",
|
||||
subtext: "Nunc sed hendrerit consequat.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Inverse Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<CheckboxGroup
|
||||
name="inverse-checkbox-group"
|
||||
value={checkboxGroupValues}
|
||||
onChange={({ value }) => setCheckboxGroupValues(value)}
|
||||
mode="inverse"
|
||||
options={[
|
||||
{ value: "option3", label: "Checkbox label" },
|
||||
{
|
||||
value: "option4",
|
||||
label: "Checkbox label",
|
||||
subtext: "Nunc sed hendrerit consequat.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Radio Group Section */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Radio Group Component
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Standard Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<RadioGroup
|
||||
name="default-radio"
|
||||
value={radioValue}
|
||||
onChange={({ value }) => setRadioValue(value)}
|
||||
mode="standard"
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
name="interactive-radio"
|
||||
value={radioValue}
|
||||
onChange={({ value }) => setRadioValue(value)}
|
||||
mode="standard"
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
name="disabled-radio"
|
||||
value=""
|
||||
mode="standard"
|
||||
disabled
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
Inverse Mode
|
||||
</h3>
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<RadioGroup
|
||||
name="inverse-default-radio"
|
||||
value={inverseRadioValue}
|
||||
onChange={({ value }) => setInverseRadioValue(value)}
|
||||
mode="inverse"
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
name="inverse-interactive-radio"
|
||||
value={inverseRadioValue}
|
||||
onChange={({ value }) => setInverseRadioValue(value)}
|
||||
mode="inverse"
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
name="inverse-disabled-radio"
|
||||
value=""
|
||||
mode="inverse"
|
||||
disabled
|
||||
options={[
|
||||
{ value: "option1", label: "Option 1" },
|
||||
{ value: "option2", label: "Option 2" },
|
||||
{ value: "option3", label: "Option 3" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RuleCard
|
||||
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"
|
||||
className="w-[525px]"
|
||||
communityInitials="CE"
|
||||
onClick={() => console.log("Community Example selected")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { memo } from "react";
|
||||
import { RuleCardView } from "./RuleCard.view";
|
||||
import type { RuleCardProps } from "./RuleCard.types";
|
||||
import { normalizeRuleCardSize } from "../../../lib/propNormalization";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
@@ -25,7 +26,18 @@ const RuleCardContainer = memo<RuleCardProps>(
|
||||
backgroundColor = "bg-[var(--color-community-teal-100)]",
|
||||
className = "",
|
||||
onClick,
|
||||
expanded = false,
|
||||
size: sizeProp,
|
||||
categories,
|
||||
onPillClick,
|
||||
onCreateClick,
|
||||
logoUrl,
|
||||
logoAlt,
|
||||
communityInitials,
|
||||
}) => {
|
||||
// Normalize size prop
|
||||
const size = normalizeRuleCardSize(sizeProp, "L");
|
||||
|
||||
const handleClick = () => {
|
||||
// Basic analytics event tracking
|
||||
if (typeof window !== "undefined" && window.gtag) {
|
||||
@@ -62,6 +74,14 @@ const RuleCardContainer = memo<RuleCardProps>(
|
||||
className={className}
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
expanded={expanded}
|
||||
size={size}
|
||||
categories={categories}
|
||||
onPillClick={onPillClick}
|
||||
onCreateClick={onCreateClick}
|
||||
logoUrl={logoUrl}
|
||||
logoAlt={logoAlt}
|
||||
communityInitials={communityInitials}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
export interface Category {
|
||||
name: string;
|
||||
items: string[];
|
||||
createUrl?: string;
|
||||
}
|
||||
|
||||
export interface RuleCardProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
@@ -5,6 +11,14 @@ export interface RuleCardProps {
|
||||
backgroundColor?: string;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
expanded?: boolean;
|
||||
size?: "L" | "M" | "l" | "m";
|
||||
categories?: Category[];
|
||||
onPillClick?: (category: string, item: string) => void;
|
||||
onCreateClick?: (category: string) => void;
|
||||
logoUrl?: string;
|
||||
logoAlt?: string;
|
||||
communityInitials?: string;
|
||||
}
|
||||
|
||||
export interface RuleCardViewProps {
|
||||
@@ -15,4 +29,12 @@ export interface RuleCardViewProps {
|
||||
className: string;
|
||||
onClick: () => void;
|
||||
onKeyDown: (_event: React.KeyboardEvent<HTMLDivElement>) => void;
|
||||
expanded: boolean;
|
||||
size: "L" | "M";
|
||||
categories?: Category[];
|
||||
onPillClick?: (category: string, item: string) => void;
|
||||
onCreateClick?: (category: string) => void;
|
||||
logoUrl?: string;
|
||||
logoAlt?: string;
|
||||
communityInitials?: string;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useTranslation } from "../../contexts/MessagesContext";
|
||||
import type { RuleCardViewProps } from "./RuleCard.types";
|
||||
|
||||
@@ -11,40 +12,210 @@ export function RuleCardView({
|
||||
className,
|
||||
onClick,
|
||||
onKeyDown,
|
||||
expanded,
|
||||
size,
|
||||
categories,
|
||||
onPillClick,
|
||||
onCreateClick,
|
||||
logoUrl,
|
||||
logoAlt,
|
||||
communityInitials,
|
||||
}: RuleCardViewProps) {
|
||||
const t = useTranslation("ruleCard");
|
||||
const ariaLabel = t("ariaLabel").replace("{title}", title);
|
||||
|
||||
// Size-based styling
|
||||
const isLarge = size === "L";
|
||||
|
||||
// Card dimensions - make width flexible for grid layouts, but can be overridden via className
|
||||
// For standalone/preview use, add fixed width via className
|
||||
const cardPadding = isLarge ? "p-[24px]" : "p-[16px]";
|
||||
const cardGap = expanded
|
||||
? "gap-[16px]"
|
||||
: isLarge ? "gap-[10px]" : "gap-[12px]";
|
||||
|
||||
// Logo/Icon dimensions
|
||||
const logoSize = isLarge ? 103 : 56;
|
||||
const logoContainerClass = isLarge
|
||||
? "size-[103px]"
|
||||
: "size-[56px]";
|
||||
|
||||
// Title typography
|
||||
const titleClass = isLarge
|
||||
? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
|
||||
: "font-bricolage-grotesque font-bold text-[24px] leading-[32px]";
|
||||
|
||||
// Description typography
|
||||
const descriptionClass = isLarge
|
||||
? "font-inter font-medium text-[18px] leading-[24px]"
|
||||
: "font-inter font-medium text-[14px] leading-[16px]";
|
||||
|
||||
// Category label typography
|
||||
const categoryLabelClass = "font-inter font-normal text-[14px] leading-[20px]";
|
||||
|
||||
// Pill typography
|
||||
const pillTextClass = "font-inter font-medium text-[12px] leading-[14px]";
|
||||
|
||||
// Render logo/icon
|
||||
const renderLogo = () => {
|
||||
if (logoUrl) {
|
||||
// Check if it's a localhost URL or external URL that needs regular img tag
|
||||
const isLocalhost = logoUrl.startsWith("http://localhost") || logoUrl.startsWith("https://localhost");
|
||||
|
||||
if (isLocalhost) {
|
||||
return (
|
||||
<div className={`${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity`}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={logoUrl}
|
||||
alt={logoAlt || title}
|
||||
width={logoSize}
|
||||
height={logoSize}
|
||||
className="absolute inset-0 w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity`}>
|
||||
<Image
|
||||
src={logoUrl}
|
||||
alt={logoAlt || title}
|
||||
width={logoSize}
|
||||
height={logoSize}
|
||||
className="absolute inset-0 w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (icon) {
|
||||
return (
|
||||
<div className={`${logoContainerClass} flex items-center justify-center`}>
|
||||
{icon}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (communityInitials) {
|
||||
return (
|
||||
<div className={`${logoContainerClass} rounded-full bg-[var(--color-surface-default-primary)] flex items-center justify-center`}>
|
||||
<span className={`${isLarge ? "text-[36px]" : "text-[24px]"} font-bricolage-grotesque font-bold text-[var(--color-content-inverse-primary)]`}>
|
||||
{communityInitials}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// Handle pill click with stopPropagation
|
||||
const handlePillClick = (e: React.MouseEvent<HTMLButtonElement>, categoryName: string, item: string) => {
|
||||
e.stopPropagation();
|
||||
if (onPillClick) {
|
||||
onPillClick(categoryName, item);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle create button click with stopPropagation
|
||||
const handleCreateClick = (e: React.MouseEvent<HTMLButtonElement>, categoryName: string) => {
|
||||
e.stopPropagation();
|
||||
if (onCreateClick) {
|
||||
onCreateClick(categoryName);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${backgroundColor} rounded-[var(--radius-measures-radius-small)] pt-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] pl-[var(--spacing-scale-012)] pb-[var(--spacing-scale-024)] md:p-[var(--spacing-scale-024)] md:h-[210px] lg:h-[277px] flex flex-col gap-[18px] shadow-lg backdrop-blur-sm transition-all duration-500 ease-in-out hover:shadow-xl hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-[var(--color-community-teal-500)] focus:ring-offset-2 cursor-pointer min-h-[44px] min-w-[44px] ${className}`}
|
||||
className={`${backgroundColor} ${cardPadding} ${cardGap} rounded-[var(--radius-measures-radius-small)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] flex flex-col items-start justify-center relative w-full ${className}`}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={ariaLabel}
|
||||
aria-expanded={expanded}
|
||||
onClick={onClick}
|
||||
onKeyDown={onKeyDown}
|
||||
>
|
||||
{/* Header Container */}
|
||||
<div className="grid grid-cols-[auto_1fr] h-[72px] md:h-[80px] lg:h-[138px] border-b border-[var(--color-surface-default-primary)]">
|
||||
{/* Icon Container */}
|
||||
{icon && (
|
||||
<div className="p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-012)] lg:p-[var(--spacing-scale-024)] border-r border-[var(--color-surface-default-primary)] w-fit flex items-center justify-center">
|
||||
{icon}
|
||||
<div className={`border-b border-[var(--color-content-inverse-primary)] flex gap-[16px] items-center relative shrink-0 w-full ${isLarge ? "min-h-[103px]" : "min-h-[56px]"}`}>
|
||||
{/* Logo/Icon Container */}
|
||||
{renderLogo() && (
|
||||
<div className="flex items-center justify-center shrink-0">
|
||||
{renderLogo()}
|
||||
</div>
|
||||
)}
|
||||
{/* Title Container */}
|
||||
{title && (
|
||||
<div className="pl-[var(--spacing-scale-008)] md:pl-[var(--spacing-scale-012)] lg:pl-[var(--spacing-scale-024)] flex items-center gap-[var(--spacing-scale-004)]">
|
||||
<h3 className="font-space-grotesk font-bold text-[20px] md:text-[28px] lg:text-[36px] leading-[28px] md:leading-[36px] lg:leading-[44px] text-[--color-content-inverse-primary]">
|
||||
<div className={`border-l border-[var(--color-content-inverse-primary)] flex ${isLarge ? "px-[16px] py-[24px]" : "px-[16px] py-[12px]"} items-center justify-center flex-1 min-w-0`}>
|
||||
<h3 className={`${titleClass} text-[var(--color-content-inverse-primary)] overflow-hidden text-ellipsis w-full`}>
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{description && (
|
||||
<p className="font-inter font-medium text-[12px] md:text-[14px] lg:text-[18px] leading-[14px] md:leading-[16px] lg:leading-[24px] text-[var(--color-content-inverse-primary)]">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
{expanded ? (
|
||||
<>
|
||||
{/* Categories Section */}
|
||||
{categories && categories.length > 0 && (
|
||||
<div className="flex flex-col gap-[16px] items-start px-[12px] relative shrink-0 w-full">
|
||||
{categories.map((category, categoryIndex) => (
|
||||
<div key={categoryIndex} className="flex flex-col gap-[var(--spacing-scale-008)] items-start relative shrink-0 w-full">
|
||||
{/* Category Label */}
|
||||
<div className="flex items-baseline gap-[var(--spacing-scale-008)] pr-[var(--spacing-scale-004)] relative shrink-0 w-full">
|
||||
<h4 className={`${categoryLabelClass} text-[var(--color-content-inverse-primary)]`}>
|
||||
{category.name}
|
||||
</h4>
|
||||
</div>
|
||||
{/* Pills Container */}
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-008)] items-center relative shrink-0 w-full">
|
||||
{/* Pills */}
|
||||
{category.items && category.items.map((item, itemIndex) => (
|
||||
<button
|
||||
key={itemIndex}
|
||||
type="button"
|
||||
className="bg-transparent border-[1.25px] border-[var(--color-content-inverse-primary)] h-[30px] px-[var(--spacing-scale-008)] rounded-[var(--radius-measures-radius-full)] flex items-center justify-center shrink-0 cursor-pointer"
|
||||
onClick={(e) => handlePillClick(e, category.name, item)}
|
||||
aria-label={`Edit ${item}`}
|
||||
>
|
||||
<span className={`${pillTextClass} text-[var(--color-content-inverse-primary)]`}>
|
||||
{item}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{/* Add Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="bg-transparent border-[1.25px] border-[var(--color-content-inverse-primary)] size-[30px] rounded-[var(--radius-measures-radius-full)] flex items-center justify-center shrink-0 cursor-pointer"
|
||||
onClick={(e) => handleCreateClick(e, category.name)}
|
||||
aria-label={`Add new ${category.name}`}
|
||||
>
|
||||
<span className="text-[var(--color-content-inverse-primary)] text-[14px] leading-[14px]">+</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Footer: Description */}
|
||||
{description && (
|
||||
<div className="border-t border-[var(--color-content-inverse-primary)] pt-[16px] relative shrink-0 w-full">
|
||||
<p className={`${descriptionClass} text-[var(--color-content-inverse-primary)]`}>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
/* Collapsed State: Description */
|
||||
description && (
|
||||
<div className="flex items-center justify-center relative shrink-0 w-full">
|
||||
<p className={`${descriptionClass} text-[var(--color-content-inverse-primary)] flex-1`}>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -512,3 +512,18 @@ export function normalizeSmallMediumLargeSize(
|
||||
}
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize RuleCard size prop values (L/M -> l/m -> L/M)
|
||||
*/
|
||||
export function normalizeRuleCardSize(
|
||||
value: string | undefined,
|
||||
defaultValue: "L" = "L"
|
||||
): "L" | "M" {
|
||||
if (!value) return defaultValue;
|
||||
const normalized = value.toUpperCase();
|
||||
if (normalized === "L" || normalized === "M") {
|
||||
return normalized;
|
||||
}
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
@@ -16,6 +16,14 @@ const nextConfig = {
|
||||
minimumCacheTTL: 60,
|
||||
dangerouslyAllowSVG: true,
|
||||
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "http",
|
||||
hostname: "localhost",
|
||||
port: "",
|
||||
pathname: "/**",
|
||||
},
|
||||
],
|
||||
},
|
||||
// Headers for caching
|
||||
async headers() {
|
||||
|
||||
+161
-5
@@ -9,7 +9,7 @@ export default {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"An interactive card component that displays governance templates and decision-making patterns. Features hover states, keyboard navigation, analytics tracking, and accessibility support. Use Tab key to test focus indicators and Enter/Space to activate.",
|
||||
"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.",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -33,7 +33,18 @@ export default {
|
||||
],
|
||||
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: ["L", "M", "l", "m"],
|
||||
description: "Size variant of the card",
|
||||
},
|
||||
onClick: { action: "clicked" },
|
||||
onPillClick: { action: "pillClicked" },
|
||||
onCreateClick: { action: "createClicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
@@ -44,6 +55,8 @@ export const Default = {
|
||||
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"
|
||||
@@ -56,6 +69,131 @@ export const Default = {
|
||||
},
|
||||
};
|
||||
|
||||
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",
|
||||
items: ["Consciousness", "Ecology", "Abundance", "Art", "Decisiveness"],
|
||||
createUrl: "/create/value",
|
||||
},
|
||||
{
|
||||
name: "Communication",
|
||||
items: ["Signal"],
|
||||
createUrl: "/create/communication",
|
||||
},
|
||||
{
|
||||
name: "Membership",
|
||||
items: ["Open Admission"],
|
||||
createUrl: "/create/membership",
|
||||
},
|
||||
{
|
||||
name: "Decision-making",
|
||||
items: ["Lazy Consensus", "Modified Consensus"],
|
||||
createUrl: "/create/decision-making",
|
||||
},
|
||||
{
|
||||
name: "Conflict management",
|
||||
items: ["Code of Conduct", "Restorative Justice"],
|
||||
createUrl: "/create/conflict-management",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
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 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",
|
||||
items: ["Consciousness", "Ecology", "Abundance", "Art", "Decisiveness"],
|
||||
},
|
||||
{
|
||||
name: "Communication",
|
||||
items: ["Signal"],
|
||||
},
|
||||
{
|
||||
name: "Membership",
|
||||
items: ["Open Admission"],
|
||||
},
|
||||
{
|
||||
name: "Decision-making",
|
||||
items: ["Lazy Consensus", "Modified Consensus"],
|
||||
},
|
||||
{
|
||||
name: "Conflict management",
|
||||
items: ["Code of Conduct", "Restorative Justice"],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
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) => (
|
||||
@@ -136,19 +274,37 @@ 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.",
|
||||
"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-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 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",
|
||||
items: ["Consciousness", "Ecology", "Abundance"],
|
||||
},
|
||||
{
|
||||
name: "Communication",
|
||||
items: ["Signal"],
|
||||
},
|
||||
],
|
||||
onPillClick: (category, item) => {
|
||||
console.log(`Pill clicked: ${category} - ${item}`);
|
||||
},
|
||||
onCreateClick: (category) => {
|
||||
console.log(`Create clicked: ${category}`);
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Demonstrates interactive states including hover effects, focus indicators, and keyboard navigation. Test with mouse hover and keyboard Tab/Enter/Space.",
|
||||
"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.",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user