{
  "$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-radix.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/radix/Accordion\",\n  component: Accordion,\n  tags: [\"autodocs\"],\n  argTypes: {\n    type: {\n      control: \"radio\",\n      description: \"Type of accordion behavior\",\n      options: [\"single\", \"multiple\"],\n    },\n    collapsible: {\n      control: \"boolean\",\n      description: \"Can an open accordion be collapsed using the trigger\",\n      if: { arg: \"type\", eq: \"single\" },\n    },\n    disabled: {\n      control: \"boolean\",\n    },\n  },\n  args: {\n    type: \"single\",\n    collapsible: true,\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    type: \"single\" as const,\n  },\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const accordions = await canvas.getAllByRole(\"button\");\n\n    // Open the tabs one at a time\n    for (const trigger of accordions) {\n      await userEvent.click(trigger);\n      await waitFor(async () => {\n        const content = await canvas.findAllByRole(\"region\");\n        return expect(content.length).toBe(1);\n      });\n    }\n\n    // Close the last opened tab\n    await userEvent.click(accordions[accordions.length - 1]);\n    await waitFor(async () => {\n      const content = await canvas.queryByRole(\"region\");\n      return expect(content).toBeFalsy();\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    type: \"multiple\",\n  },\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const accordions = await canvas.getAllByRole(\"button\");\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(async () => {\n        const content = await canvas.findAllByRole(\"region\");\n        return expect(content.length).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(async () => {\n        const content = await canvas.findAllByRole(\"region\");\n        return expect(content.length).toBe(i);\n      });\n    }\n\n    // Close the last opened tab\n    await userEvent.click(accordions[0]);\n    await waitFor(async () => {\n      const content = await canvas.queryByRole(\"region\");\n      return expect(content).toBeFalsy();\n    });\n  },\n};\n",
      "type": "registry:component",
      "target": "@ui/accordion.stories.tsx"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "accordion",
    "layout"
  ],
  "type": "registry:component"
}