Feature Grid #13
@@ -5,46 +5,21 @@ export default {
|
||||
component: ContentLockup,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Supports hero and feature variants with different styling and typography scales.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
description: "The main title text",
|
||||
},
|
||||
subtitle: {
|
||||
control: { type: "text" },
|
||||
description: "The subtitle text",
|
||||
},
|
||||
description: {
|
||||
control: { type: "text" },
|
||||
description: "The description text",
|
||||
},
|
||||
ctaText: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button text",
|
||||
},
|
||||
ctaHref: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button link",
|
||||
},
|
||||
buttonClassName: {
|
||||
control: { type: "text" },
|
||||
description:
|
||||
"Additional CSS classes to apply to the large button (md/lg breakpoints)",
|
||||
},
|
||||
title: { control: { type: "text" } },
|
||||
subtitle: { control: { type: "text" } },
|
||||
description: { control: { type: "text" } },
|
||||
ctaText: { control: { type: "text" } },
|
||||
ctaHref: { control: { type: "text" } },
|
||||
buttonClassName: { control: { type: "text" } },
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: ["hero", "feature"],
|
||||
description: "The visual variant of the content lockup",
|
||||
},
|
||||
linkText: { control: { type: "text" } },
|
||||
linkHref: { control: { type: "text" } },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Hero = {
|
||||
@@ -57,14 +32,6 @@ export const Hero = {
|
||||
ctaHref: "#",
|
||||
variant: "hero",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Hero variant with large typography and inverse colors, designed for prominent display areas.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Feature = {
|
||||
@@ -77,71 +44,15 @@ export const Feature = {
|
||||
ctaHref: "#",
|
||||
variant: "feature",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Feature variant with smaller typography and primary colors, designed for content sections.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LongDescription = {
|
||||
export const FeatureWithLink = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
variant: "hero",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Content lockup with longer description text to test text wrapping.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ShortContent = {
|
||||
args: {
|
||||
title: "Simple",
|
||||
subtitle: "solution",
|
||||
description: "Easy community decision making.",
|
||||
ctaText: "Try it",
|
||||
ctaHref: "#",
|
||||
title: "We've got your back, every step of the way",
|
||||
subtitle:
|
||||
"Use our toolkit to improve, document, and evolve your organization.",
|
||||
variant: "feature",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with minimal content to test compact layouts.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomButtonStyling = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]",
|
||||
variant: "hero",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Content lockup with custom button styling applied to the large button (md/lg breakpoints).",
|
||||
},
|
||||
},
|
||||
linkText: "Learn more",
|
||||
linkHref: "#",
|
||||
},
|
||||
};
|
||||
|
||||
+44
-270
@@ -8,299 +8,73 @@ export default {
|
||||
docs: {
|
||||
description: {
|
||||
component: `
|
||||
A responsive component that displays a collection of organizational tools and services in a clean card-based grid layout with supportive messaging and categorized feature highlights.
|
||||
A responsive feature grid component that displays organizational tools and services in a clean card-based layout with supportive messaging and categorized feature highlights.
|
||||
|
||||
## Features
|
||||
- **Three grid variants**: 1x4, 2x2, and 2x4 configurations
|
||||
- **Responsive design**: Adapts from single column to multi-column grid
|
||||
- **Color coding**: Purple, green, pink, and blue brand colors for categorization
|
||||
- **Interactive elements**: Hover states and keyboard navigation
|
||||
- **Accessibility**: WCAG 2.1 AA compliant with proper ARIA labels
|
||||
- **Design system integration**: Uses design tokens for consistent styling
|
||||
|
||||
## Usage
|
||||
\`\`\`jsx
|
||||
<FeatureGrid
|
||||
variant="2x2"
|
||||
headline="Your headline here"
|
||||
description="Your description here"
|
||||
features={[
|
||||
{
|
||||
id: "feature-1",
|
||||
label: "Feature Name",
|
||||
description: "Feature description",
|
||||
icon: "path/to/icon.svg",
|
||||
color: "purple"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
\`\`\`
|
||||
- **Responsive Layout**: Adapts from 2x2 grid on mobile to 1x4 grid on tablet to horizontal layout on desktop
|
||||
- **ContentLockup Integration**: Uses the feature variant with "Learn more" link
|
||||
- **MiniCard Grid**: Four feature cards with color-coded backgrounds and icons
|
||||
- **Accessibility**: Full keyboard navigation, focus indicators, and ARIA labels
|
||||
- **Design System**: Uses design tokens for consistent spacing, colors, and typography
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
- **Mobile (< 768px)**: 2x2 grid layout with ContentLockup on top
|
||||
- **Tablet (768px - 1024px)**: 1x4 grid layout with ContentLockup on top
|
||||
- **Desktop (> 1024px)**: Horizontal layout with ContentLockup on left, 1x4 grid on right
|
||||
|
||||
## Interactive Elements
|
||||
|
||||
- **MiniCards**: Hover effects, focus indicators, and keyboard navigation
|
||||
- **Learn More Link**: Underlined link with focus states
|
||||
- **Color-coded Features**: Royal, green, pink, and blue backgrounds for categorization
|
||||
|
||||
## Accessibility
|
||||
|
||||
- WCAG 2.1 AA compliant
|
||||
- Keyboard navigation support
|
||||
- Screen reader friendly with proper ARIA labels
|
||||
- Focus management with visible indicators
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: ["1x4", "2x2", "2x4"],
|
||||
description: "Grid layout variant",
|
||||
},
|
||||
headline: {
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
description: "Main headline text",
|
||||
description: "Main headline text for the ContentLockup",
|
||||
},
|
||||
description: {
|
||||
subtitle: {
|
||||
control: { type: "text" },
|
||||
description: "Supporting description text",
|
||||
description: "Supporting subtitle text for the ContentLockup",
|
||||
},
|
||||
ctaText: {
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Call-to-action button text",
|
||||
},
|
||||
ctaHref: {
|
||||
control: { type: "text" },
|
||||
description: "Call-to-action link URL",
|
||||
},
|
||||
features: {
|
||||
control: { type: "object" },
|
||||
description: "Array of feature objects",
|
||||
},
|
||||
onFeatureClick: {
|
||||
action: "feature-click",
|
||||
description: "Callback when feature card is clicked",
|
||||
},
|
||||
onCtaClick: {
|
||||
action: "cta-click",
|
||||
description: "Callback when CTA is clicked",
|
||||
description: "Additional CSS classes for custom styling",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Sample feature data
|
||||
const sampleFeatures = [
|
||||
{
|
||||
id: "consensus",
|
||||
label: "Consensus Decision Making",
|
||||
description: "Build agreement through collaborative processes",
|
||||
icon: "assets/Icon_Consensus.svg",
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
id: "governance",
|
||||
label: "Governance Structures",
|
||||
description: "Create clear roles and responsibilities",
|
||||
icon: "assets/Icon_ElectedBoard.svg",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
id: "communication",
|
||||
label: "Communication Tools",
|
||||
description: "Facilitate transparent information sharing",
|
||||
icon: "assets/Icon_Sociocracy.svg",
|
||||
color: "pink",
|
||||
},
|
||||
{
|
||||
id: "resources",
|
||||
label: "Resource Management",
|
||||
description: "Efficiently allocate and track resources",
|
||||
icon: "assets/Icon_Petition.svg",
|
||||
color: "blue",
|
||||
},
|
||||
];
|
||||
|
||||
// Default story
|
||||
export const Default = {
|
||||
args: {
|
||||
variant: "2x2",
|
||||
headline: "Everything you need to build better communities",
|
||||
description: "Our comprehensive toolkit provides the tools, resources, and guidance to help your organization thrive.",
|
||||
ctaText: "Learn more",
|
||||
ctaHref: "#",
|
||||
features: sampleFeatures,
|
||||
},
|
||||
};
|
||||
|
||||
// 1x4 Grid Variant
|
||||
export const OneByFour = {
|
||||
args: {
|
||||
variant: "1x4",
|
||||
headline: "Core organizational tools",
|
||||
description: "Essential features for effective community governance and decision-making.",
|
||||
ctaText: "Explore tools",
|
||||
ctaHref: "#",
|
||||
features: sampleFeatures,
|
||||
title: "We've got your back, every step of the way",
|
||||
subtitle:
|
||||
"Use our toolkit to improve, document, and evolve your organization.",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "1x4 grid layout optimized for showcasing four key features in a single row on desktop.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 2x4 Grid Variant
|
||||
export const TwoByFour = {
|
||||
args: {
|
||||
variant: "2x4",
|
||||
headline: "Complete toolkit for organizations",
|
||||
description: "Eight essential tools and services to support your community's growth and success.",
|
||||
ctaText: "Get started",
|
||||
ctaHref: "#",
|
||||
features: [
|
||||
...sampleFeatures,
|
||||
{
|
||||
id: "analytics",
|
||||
label: "Analytics & Insights",
|
||||
description: "Track progress and measure impact",
|
||||
icon: "assets/Icon_Consensus.svg",
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
id: "training",
|
||||
label: "Training & Education",
|
||||
description: "Build skills and knowledge",
|
||||
icon: "assets/Icon_ElectedBoard.svg",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
id: "support",
|
||||
label: "Community Support",
|
||||
description: "Connect with peers and experts",
|
||||
icon: "assets/Icon_Sociocracy.svg",
|
||||
color: "pink",
|
||||
},
|
||||
{
|
||||
id: "integration",
|
||||
label: "System Integration",
|
||||
description: "Connect with existing tools",
|
||||
icon: "assets/Icon_Petition.svg",
|
||||
color: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "2x4 grid layout for comprehensive feature showcases with eight tools.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// All Variants Comparison
|
||||
export const AllVariants = {
|
||||
render: () => (
|
||||
<div className="space-y-16 p-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold mb-4">1x4 Grid Variant</h3>
|
||||
<FeatureGrid
|
||||
variant="1x4"
|
||||
headline="Core organizational tools"
|
||||
description="Essential features for effective community governance."
|
||||
ctaText="Explore tools"
|
||||
ctaHref="#"
|
||||
features={sampleFeatures}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-bold mb-4">2x2 Grid Variant</h3>
|
||||
<FeatureGrid
|
||||
variant="2x2"
|
||||
headline="Everything you need to build better communities"
|
||||
description="Our comprehensive toolkit provides the tools, resources, and guidance to help your organization thrive."
|
||||
ctaText="Learn more"
|
||||
ctaHref="#"
|
||||
features={sampleFeatures}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-bold mb-4">2x4 Grid Variant</h3>
|
||||
<FeatureGrid
|
||||
variant="2x4"
|
||||
headline="Complete toolkit for organizations"
|
||||
description="Eight essential tools and services to support your community's growth and success."
|
||||
ctaText="Get started"
|
||||
ctaHref="#"
|
||||
features={[
|
||||
...sampleFeatures,
|
||||
{
|
||||
id: "analytics",
|
||||
label: "Analytics & Insights",
|
||||
description: "Track progress and measure impact",
|
||||
icon: "assets/Icon_Consensus.svg",
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
id: "training",
|
||||
label: "Training & Education",
|
||||
description: "Build skills and knowledge",
|
||||
icon: "assets/Icon_ElectedBoard.svg",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
id: "support",
|
||||
label: "Community Support",
|
||||
description: "Connect with peers and experts",
|
||||
icon: "assets/Icon_Sociocracy.svg",
|
||||
color: "pink",
|
||||
},
|
||||
{
|
||||
id: "integration",
|
||||
label: "System Integration",
|
||||
description: "Connect with existing tools",
|
||||
icon: "assets/Icon_Petition.svg",
|
||||
color: "blue",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Side-by-side comparison of all three grid variants to show the differences in layout and content density.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Interactive States
|
||||
export const InteractiveStates = {
|
||||
args: {
|
||||
variant: "2x2",
|
||||
headline: "Interactive feature showcase",
|
||||
description: "Hover over cards and use keyboard navigation to test interactive states.",
|
||||
ctaText: "Try it out",
|
||||
ctaHref: "#",
|
||||
features: sampleFeatures,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Test hover states, focus indicators, and keyboard navigation for accessibility compliance.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Empty State
|
||||
export const EmptyState = {
|
||||
args: {
|
||||
variant: "2x2",
|
||||
headline: "No features available",
|
||||
description: "This is how the component looks when no features are provided.",
|
||||
ctaText: "Add features",
|
||||
ctaHref: "#",
|
||||
features: [],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Empty state when no features are provided, showing graceful fallback messaging.",
|
||||
story: `
|
||||
Default FeatureGrid with standard content. This component demonstrates:
|
||||
|
||||
- **ContentLockup**: Feature variant with title, subtitle, and "Learn more" link
|
||||
- **MiniCard Grid**: Four feature cards with different colors and icons
|
||||
- **Responsive Design**: Layout adapts across mobile, tablet, and desktop breakpoints
|
||||
- **Interactive States**: Hover effects and focus indicators on all interactive elements
|
||||
|
||||
The component uses a dark background (#171717) with rounded corners and proper spacing using design tokens.
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
import MiniCard from "../app/components/MiniCard";
|
||||
|
||||
export default {
|
||||
title: "Components/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",
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user