design system token v0.1

stories/Layout/Accordion.stories.tsx

@@ -0,0 +1,87 @@
+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>
+  ),
+}