import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks"; import * as AccordionStories from "./Accordion.stories"; # Accordion The Accordion component is a vertically stacked set of interactive headings that each reveal an associated section of content. It allows users to show and hide sections of related content on a page, helping to reduce page length and organize complex content. ## Usage { return ( } label={"Warning icon"} />} actions={ <> } /> } /> } > This is the content for the first accordion item. It can contain any React elements. This is the content for the second accordion item. It's open by default. This content won't be visible because the item is disabled. ); }; export default AccordionExample; ` } } additionalActions={[ { title: 'Open in GitHub', onClick: () => { window.open( 'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Accordion/Accordion.tsx', '_blank' ); }, } ]} /> ```tsx import React from "react"; import { Accordion } from "@webiny/admin-ui"; import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg"; import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg"; import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg"; const AccordionExample = () => { return ( } label={"Warning icon"} />} actions={ <> } /> } /> } > This is the content for the first accordion item. It can contain any React elements. This is the content for the second accordion item. It's open by default. This content won't be visible because the item is disabled. ); }; export default AccordionExample; ``` ## Examples ### Default { return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor. ); }; export default DefaultAccordionExample; ` } } /> ### With Descriptions { return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. ); }; export default WithDescriptionsExample; ` } } /> ### With Icon { return ( } label={"Warning icon"} />} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. } label={"Warning icon"} />} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. ); }; export default WithIconExample; ` } } /> ### With Actions { return ( } label={"Warning icon"} />} actions={ <> } /> } /> } /> } /> } > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. } label={"Warning icon"} />} actions={ <> } /> } /> } /> } /> } > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. ); }; export default WithActionsExample; ` } } /> ### With Draggable Item { return ( } label={"Warning icon"} />} draggable={true} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. ); }; export default WithHandleExample; ` } } /> ### Non-Interactive Item { return ( This content won't be accessible because the item is not interactive. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. ); }; export default NonInteractiveExample; ` } } /> ### Default Open Item { return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. This item is open by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. ); }; export default DefaultOpenExample; ` } } /> ### Disabled Item { return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. This content won't be accessible because the item is disabled. This item is disabled but open by default. Users cannot toggle it. ); }; export default DisabledItemExample; ` } } /> ### Container Variant { return ( } label={"Warning icon"} />} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. } label={"Warning icon"} />} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. ); }; export default ContainerVariantExample; ` } } /> ### Light Background { return ( } label={"Warning icon"} />} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. } label={"Warning icon"} />} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. ); }; export default LightBackgroundExample; ` } } /> ### Container Variant with Light Background { return ( } label={"Warning icon"} />} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. } label={"Warning icon"} />} > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. ); }; export default ContainerLightExample; ` } } /> ### Nested Accordions { return ( } label={"Warning icon"} />} actions={ <> } /> } /> } /> } /> } > } label={"Warning icon"} />} actions={ <> } /> } /> } /> } /> } > } label={"Warning icon"} />} actions={ <> } /> } /> } /> } /> } > Content Content Content Content Content } label={"Warning icon"} />} actions={ <> } /> } /> } /> } /> } > Test Test Test Content Content ); }; export default NestedExample; ` } } />