136 lines
3.3 KiB
TypeScript
136 lines
3.3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { Section } from '@/components/ui/section'
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
CardContent,
|
|
} from '@/components/ui/card'
|
|
|
|
const meta = {
|
|
title: 'Composition/Section',
|
|
component: Section,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'fullscreen' },
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['default', 'highlighted', 'accent'],
|
|
},
|
|
width: {
|
|
control: 'select',
|
|
options: ['narrow', 'default', 'wide', 'full'],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Section>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const sampleCards = (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{['Design', 'Develop', 'Deploy'].map((title) => (
|
|
<Card key={title}>
|
|
<CardHeader>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>Description for the {title.toLowerCase()} phase.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">
|
|
Content explaining the {title.toLowerCase()} process in detail.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
title: 'Our Process',
|
|
description: 'How we build great products from concept to delivery.',
|
|
children: sampleCards,
|
|
},
|
|
}
|
|
|
|
export const Highlighted: Story = {
|
|
args: {
|
|
variant: 'highlighted',
|
|
title: 'Featured Section',
|
|
description: 'This section uses a highlighted background to stand out.',
|
|
children: sampleCards,
|
|
},
|
|
}
|
|
|
|
export const Accent: Story = {
|
|
args: {
|
|
variant: 'accent',
|
|
title: 'Accent Section',
|
|
description: 'A subtle accent background to differentiate this area.',
|
|
children: sampleCards,
|
|
},
|
|
}
|
|
|
|
export const Narrow: Story = {
|
|
args: {
|
|
width: 'narrow',
|
|
title: 'Narrow Section',
|
|
description: 'Constrained width for focused reading.',
|
|
children: (
|
|
<p className="text-muted-foreground">
|
|
This is a narrow section with max-w-3xl. Useful for text-heavy content that
|
|
benefits from shorter line lengths for readability.
|
|
</p>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const Wide: Story = {
|
|
args: {
|
|
width: 'wide',
|
|
title: 'Wide Section',
|
|
description: 'Extended width for content-rich layouts.',
|
|
children: sampleCards,
|
|
},
|
|
}
|
|
|
|
export const Full: Story = {
|
|
args: {
|
|
width: 'full',
|
|
variant: 'highlighted',
|
|
title: 'Full Width Section',
|
|
description: 'Spans the full width of the viewport.',
|
|
children: sampleCards,
|
|
},
|
|
}
|
|
|
|
export const NoHeader: Story = {
|
|
args: {
|
|
children: sampleCards,
|
|
},
|
|
}
|
|
|
|
export const AllCombinations: Story = {
|
|
render: () => (
|
|
<div>
|
|
{(['default', 'highlighted', 'accent'] as const).map((variant) =>
|
|
(['narrow', 'default', 'wide'] as const).map((width) => (
|
|
<Section
|
|
key={`${variant}-${width}`}
|
|
variant={variant}
|
|
width={width}
|
|
title={`${variant} / ${width}`}
|
|
description={`Section with variant="${variant}" and width="${width}".`}
|
|
>
|
|
<div className="h-20 rounded-lg border-2 border-dashed border-muted-foreground/25 flex items-center justify-center text-sm text-muted-foreground">
|
|
Content area
|
|
</div>
|
|
</Section>
|
|
)),
|
|
)}
|
|
</div>
|
|
),
|
|
}
|