import { useState } from "react"; import { Meta, Canvas, ArgsTable, Story, SourceState, } from "@storybook/blocks"; import { ComponentHeading, Accessibility } from "../../storybook-components"; import { Checkbox, Text, IntegrationLogo, Icon, ICON_TYPE, Box, Flex, Banner, STATUS_VARIANT, } from "../.."; import { Accordion } from "./Accordion"; An accordion is a vertically stacked set of interactive headings that each contain a title and content snippet. The headings function as controls that enable users to show or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page. ## Installation ```jsx import { Accordion } from "@conveyorhq/arrow-ds"; ``` ## Basic usage {() => { const [checked, setChecked] = useState(true); return ( This is the content setChecked(!checked)} /> 👀 ); }} ## API ### Accordion Usage of Accordion as a standalone component has been deprecated. It was initially built for a specific use-case, provides no composability and should be avoided if possible. An implementation of `Accordion.Item` with opinionated styles and specific props. Provides the least amount of flexibility and no composability; don’t use this if you need an accordion with custom styles (see “custom implementation” below). ### Accordion.Group Use to wrap each child of `Accordion` or `Accordion.Item`. Optional `spacing` can be provided to add space between each child. ### Accordion.Item Declares a single accordion item by wrapping each `Accordion.Button` and `Accordion.Content`. Extends `BoxProps`. ### Accordion.Button Label representing a section of content that also serves as a control for showing and hiding the corresponding section of content. Extends `React.ButtonHTMLAttributes`. ### Accordion.Icon A chevron icon that rotates based on the expanded/collapsed state. ### Accordion.Content Section of content associated with an `Accordion.Header`. Adheres to the{" "} accordion requirements .

To improve the usability of the component, a roving tabindex pattern will be implemented. This will allow up and down arrow keys to cycle through the items. } keyboardInteractions={[ { key: "Enter", description: "When focus is on the accordion header for a collapsed panel, expands the associated panel. Conversely, it collapses the panel if expanded.", }, { key: "Space", description: "When focus is on the accordion header for a collapsed panel, expands the associated panel. Conversely, it collapses the panel if expanded.", }, { key: "Tab", description: "Moves focus to the next focusable element; all focusable elements in the accordion are included in the page tab sequence.", }, { key: "Shift + Tab", description: "Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page Tab sequence.", }, ]} /> ## Component tree Each piece of the `Accordion` component can be used individually to create a component with a custom layout. The component tree is as follows: ```jsx ``` ## Demos ### Building a custom implementation This example shows how you can create a custom accordion. This is the recommended way to implement an accordion. A few notes: - `Accordion.Button` children can be rendered as a `React.ReactNode` or a function with render props that returns a `React.ReactNode`. The render props give you access to the `isOpen` prop; use it if you need to adjust the button style based on the visibility of the content. - `Accordion.Content` accepts both `className` and `style` props, but if you need padding on the content, you should put it on the children. This will allow the transition to run more smoothly. - To expand a single item on initial render, give each `Accordion.Item` a unique value, wrap all `Accordion.Item` components with `Accordion.Group` and give the group a `defaultValue` which matches the value of the item you want to expand. {[ { color: "#ffd883", icon: ICON_TYPE.CALCULATOR, }, { color: "#c8b3e8", icon: ICON_TYPE.ENVELOPE, }, { color: "#a1d8f1", icon: ICON_TYPE.PAPERCLIP, disabled: true, }, { color: "#ffc3a1", icon: ICON_TYPE.KEY, }, ].map((item) => { return ( <> {item.icon} icon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet dapibus risus. Mauris blandit arcu quis malesuada sagittis. Maecenas at enim quis urna gravida aliquet. Maecenas lectus nibh, mollis ut egestas vel, tempor nec tortor. Nunc interdum non purus in congue. Duis tortor neque, cursus non molestie ac, aliquam non velit. Nunc non iaculis nunc. Donec purus mauris, accumsan ut enim vitae, consectetur varius eros. Nullam sagittis justo a nibh lobortis imperdiet. Sed tristique mauris quis posuere fermentum. Cras maximus mattis tempus. ); })} ### Allow expanding only one item at time in a custom implementation By default, more than one accordion item can be opened at once, but sometimes this might not be desired. Set `allowMultiple` to `false` to allow only one accordion item to be opened at a time. {["First item", "Second item", "Third item", "Fourth item"].map( (item) => { return ( {item} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet dapibus risus. Mauris blandit arcu quis malesuada sagittis. ); }, )} ### Setting a maximum height Providing a CSS value to the `maxHeight` prop will keep the Accordion content from exceeding that height and will scroll if there is more content than will fit. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. ### Expanding an item on initial render Allow an accordion to be opened by default. This is the content. This is the content. This is the content. ### Rendering headers with icons Add an icon or logo in the header. } > This is the content. } > This is the content. } > This is the content. } > This is the content. } > This is the content.