88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
AccordionContent,
|
|
} from '@/components/ui/accordion'
|
|
|
|
const meta = {
|
|
title: 'Layout/Accordion',
|
|
component: Accordion,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
} satisfies Meta<typeof Accordion>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Single: Story = {
|
|
render: () => (
|
|
<Accordion type="single" collapsible className="w-100">
|
|
<AccordionItem value="item-1">
|
|
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
|
<AccordionContent>
|
|
Yes. It adheres to the WAI-ARIA design pattern.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="item-2">
|
|
<AccordionTrigger>Is it styled?</AccordionTrigger>
|
|
<AccordionContent>
|
|
Yes. It comes with default styles that match the other components.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="item-3">
|
|
<AccordionTrigger>Is it animated?</AccordionTrigger>
|
|
<AccordionContent>
|
|
Yes. It uses CSS animations for smooth open and close transitions.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
),
|
|
}
|
|
|
|
export const Multiple: Story = {
|
|
render: () => (
|
|
<Accordion type="multiple" className="w-100">
|
|
<AccordionItem value="item-1">
|
|
<AccordionTrigger>What is Greyhaven?</AccordionTrigger>
|
|
<AccordionContent>
|
|
Greyhaven is a design system built with Radix UI and Tailwind CSS.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="item-2">
|
|
<AccordionTrigger>How do I install it?</AccordionTrigger>
|
|
<AccordionContent>
|
|
You can install it via npm or pnpm. Check the documentation for details.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="item-3">
|
|
<AccordionTrigger>Can I customize themes?</AccordionTrigger>
|
|
<AccordionContent>
|
|
Absolutely. The design system uses CSS custom properties for full theme control.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
),
|
|
}
|
|
|
|
export const DefaultOpen: Story = {
|
|
render: () => (
|
|
<Accordion type="single" defaultValue="item-1" collapsible className="w-100">
|
|
<AccordionItem value="item-1">
|
|
<AccordionTrigger>Open by default</AccordionTrigger>
|
|
<AccordionContent>
|
|
This accordion item is open by default.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="item-2">
|
|
<AccordionTrigger>Click to open</AccordionTrigger>
|
|
<AccordionContent>
|
|
This accordion item starts closed.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
),
|
|
}
|