{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-story",
  "title": "Accordion Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating accordion component usage and variants",
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "registry/ui/accordion-story/accordion-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { expect, userEvent, waitFor, within } from \"storybook/test\";\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section\n * of content.\n */\nconst meta = {\n  title: \"ui/base/Accordion\",\n  component: Accordion,\n  tags: [\"autodocs\"],\n  argTypes: {\n    multiple: {\n      control: \"boolean\",\n      description: \"Allow multiple accordion items to be open\",\n    },\n    disabled: {\n      control: \"boolean\",\n    },\n  },\n  args: {\n    multiple: false,\n    disabled: false,\n  },\n  render: (args) => (\n    <Accordion {...args}>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other components'\n          aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  ),\n} satisfies Meta<typeof Accordion>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default behavior of the accordion allows only one item to be open.\n */\nexport const Default: Story = {};\n\nexport const ShouldOnlyOpenOneWhenSingleType: Story = {\n  name: \"when accordions are clicked, should open only one item at a time\",\n  args: {\n    multiple: false,\n  },\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const accordions = await canvas.getAllByRole(\"button\");\n    const expandedCount = () =>\n      accordions.filter(\n        (trigger) => trigger.getAttribute(\"aria-expanded\") === \"true\",\n      ).length;\n\n    // Open the tabs one at a time\n    for (const trigger of accordions) {\n      await userEvent.click(trigger);\n      await waitFor(() => {\n        expect(expandedCount()).toBe(1);\n      });\n    }\n\n    // Close the last opened tab\n    await userEvent.click(accordions[accordions.length - 1]);\n    await waitFor(() => {\n      expect(expandedCount()).toBe(0);\n    });\n  },\n};\n\nexport const ShouldOpenAllWhenMultipleType: Story = {\n  name: \"when accordions are clicked, should open all items one at a time\",\n  args: {\n    multiple: true,\n  },\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const accordions = await canvas.getAllByRole(\"button\");\n    const expandedCount = () =>\n      accordions.filter(\n        (trigger) => trigger.getAttribute(\"aria-expanded\") === \"true\",\n      ).length;\n\n    // Open all tabs one at a time\n    for (let i = 0; i < accordions.length; i++) {\n      await userEvent.click(accordions[i]);\n      await waitFor(() => {\n        expect(expandedCount()).toBe(i + 1);\n      });\n    }\n\n    // Close all tabs one at a time\n    for (let i = accordions.length - 1; i > 0; i--) {\n      await userEvent.click(accordions[i]);\n      await waitFor(() => {\n        expect(expandedCount()).toBe(i);\n      });\n    }\n\n    // Close the last opened tab\n    await userEvent.click(accordions[0]);\n    await waitFor(() => {\n      expect(expandedCount()).toBe(0);\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "accordion",
    "layout"
  ],
  "type": "registry:component"
}