adilallo
94 lines
2.4 KiB
JavaScript
94 lines
2.4 KiB
JavaScript
import CardSteps from "../../app/components/sections/CardSteps";
|
|
|
|
export default {
|
|
title: "Components/Sections/CardSteps",
|
|
component: CardSteps,
|
|
parameters: {
|
|
layout: "fullscreen",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"Marketing section (Figma SectionCardSteps) that composes **cards/Step** tiles with a section header and CTA. Use for sequential explainers on the home page and similar surfaces.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
title: {
|
|
control: { type: "text" },
|
|
description: "The main title for the section (mobile single line)",
|
|
},
|
|
subtitle: {
|
|
control: { type: "text" },
|
|
description: "Supporting text beside / below the title on large screens",
|
|
},
|
|
steps: {
|
|
control: { type: "object" },
|
|
description:
|
|
"Items rendered as **Step** cards (text, optional iconShape, iconColor)",
|
|
},
|
|
},
|
|
tags: ["autodocs"],
|
|
};
|
|
|
|
export const Default = {
|
|
args: {
|
|
title: "How CommunityRule works",
|
|
subtitle: "Here's a quick overview of the process, from start to finish.",
|
|
headingDesktopLines: ["How", "CommunityRule", "helps"],
|
|
steps: [
|
|
{
|
|
text: "Document how your community makes decisions",
|
|
iconShape: "blob",
|
|
iconColor: "green",
|
|
},
|
|
{
|
|
text: "Build an operating manual for a successful community",
|
|
iconShape: "gear",
|
|
iconColor: "purple",
|
|
},
|
|
{
|
|
text: "Get a link to your manual for your group to review and evolve",
|
|
iconShape: "star",
|
|
iconColor: "orange",
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
export const CustomContent = {
|
|
args: {
|
|
title: "Our Process",
|
|
subtitle: "Follow these simple steps to get started with your project.",
|
|
steps: [
|
|
{
|
|
text: "Define your project requirements and goals",
|
|
iconShape: "blob",
|
|
iconColor: "green",
|
|
},
|
|
{
|
|
text: "Collaborate with our team to create the perfect solution",
|
|
iconShape: "gear",
|
|
iconColor: "purple",
|
|
},
|
|
{
|
|
text: "Launch and iterate based on user feedback",
|
|
iconShape: "star",
|
|
iconColor: "orange",
|
|
},
|
|
{
|
|
text: "Scale and optimize for continued success",
|
|
iconShape: "blob",
|
|
iconColor: "blue",
|
|
},
|
|
],
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story:
|
|
"Example with custom content and four **Step** tiles to show flexibility.",
|
|
},
|
|
},
|
|
},
|
|
};
|