112 lines
2.7 KiB
TypeScript
112 lines
2.7 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { CTASection } from '@/components/ui/cta-section'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const meta = {
|
|
title: 'Composition/CTASection',
|
|
component: CTASection,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'fullscreen' },
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['centered', 'left-aligned'],
|
|
},
|
|
background: {
|
|
control: 'select',
|
|
options: ['default', 'muted', 'accent', 'subtle'],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof CTASection>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const defaultActions = (
|
|
<>
|
|
<Button size="lg">Get Started</Button>
|
|
<Button size="lg" variant="outline">Contact Sales</Button>
|
|
</>
|
|
)
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
heading: 'Ready to get started?',
|
|
description: 'Join thousands of teams building better products with our design system.',
|
|
actions: defaultActions,
|
|
},
|
|
}
|
|
|
|
export const Centered: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
background: 'muted',
|
|
heading: 'Start building today',
|
|
description: 'Free for open source. Affordable for teams.',
|
|
actions: defaultActions,
|
|
},
|
|
}
|
|
|
|
export const LeftAligned: Story = {
|
|
args: {
|
|
variant: 'left-aligned',
|
|
background: 'muted',
|
|
heading: 'Need help getting started?',
|
|
description: 'Our team is ready to help you integrate the design system into your project.',
|
|
actions: (
|
|
<>
|
|
<Button size="lg">Talk to us</Button>
|
|
</>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const AccentBackground: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
background: 'accent',
|
|
heading: 'Upgrade your workflow',
|
|
description: 'Take your team to the next level with our premium plan.',
|
|
actions: (
|
|
<>
|
|
<Button size="lg" variant="secondary">Start Free Trial</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-primary-foreground/20 text-primary-foreground hover:bg-primary-foreground/10"
|
|
>
|
|
Learn More
|
|
</Button>
|
|
</>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const SubtleBackground: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
background: 'subtle',
|
|
heading: 'Stay in the loop',
|
|
description: 'Subscribe to our newsletter for the latest updates and releases.',
|
|
actions: (
|
|
<Button size="lg">Subscribe</Button>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const DefaultBackground: Story = {
|
|
args: {
|
|
variant: 'centered',
|
|
background: 'default',
|
|
heading: 'Questions? We have answers.',
|
|
description: 'Check out our documentation or reach out to our support team.',
|
|
actions: (
|
|
<>
|
|
<Button size="lg">View Docs</Button>
|
|
<Button size="lg" variant="ghost">Contact Support</Button>
|
|
</>
|
|
),
|
|
},
|
|
}
|