adilallo
118 lines
3.0 KiB
JavaScript
118 lines
3.0 KiB
JavaScript
import ContentLockup from "../app/components/ContentLockup";
|
|
|
|
export default {
|
|
title: "Components/ContentLockup",
|
|
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. Used within the HeroBanner component.",
|
|
},
|
|
},
|
|
},
|
|
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)",
|
|
},
|
|
},
|
|
tags: ["autodocs"],
|
|
};
|
|
|
|
export const Default = {
|
|
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: "#",
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Default content lockup with standard Community Rule messaging.",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export const LongDescription = {
|
|
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: "#",
|
|
},
|
|
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: "#",
|
|
},
|
|
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]",
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story:
|
|
"Content lockup with custom button styling applied to the large button (md/lg breakpoints).",
|
|
},
|
|
},
|
|
},
|
|
};
|