53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
import FeatureGrid from "../../app/components/sections/FeatureGrid";
|
||
|
||
export default {
|
||
title: "Components/Sections/FeatureGrid",
|
||
component: FeatureGrid,
|
||
parameters: {
|
||
layout: "fullscreen",
|
||
docs: {
|
||
description: {
|
||
component: `
|
||
Feature grid for the home marketing section (Figma 18632:10668).
|
||
|
||
- **Layout**: stacked cards on mobile, 2×2 from tablet, horizontal lockup + grid on desktop
|
||
- **Shell**: \`surface/default/secondary\` content block with responsive spacing tokens
|
||
- **ContentLockup**: Feature variant — 18/22 title & 14/20 subtitle (mobile), 24/32 title & 16/24 subtitle (640px+), 16/24 link
|
||
- **Cards**: Invert-brand surfaces (lavender, lime, rust, teal) with title, description, and 40px icons
|
||
`,
|
||
},
|
||
},
|
||
},
|
||
argTypes: {
|
||
title: {
|
||
control: { type: "text" },
|
||
description: "Main headline text for the ContentLockup",
|
||
},
|
||
subtitle: {
|
||
control: { type: "text" },
|
||
description: "Supporting subtitle text for the ContentLockup",
|
||
},
|
||
className: {
|
||
control: { type: "text" },
|
||
description: "Additional CSS classes for custom styling",
|
||
},
|
||
},
|
||
};
|
||
|
||
export const Default = {
|
||
args: {
|
||
title: "Tools for the parts that get hard",
|
||
subtitle:
|
||
"Every group runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
|
||
},
|
||
parameters: {
|
||
docs: {
|
||
description: {
|
||
story: `
|
||
Default FeatureGrid — responsive breakpoint layout with Figma styling (invert-brand cards, secondary surface, updated lockup copy).
|
||
`,
|
||
},
|
||
},
|
||
},
|
||
};
|