Accordion
Accordions display an expandable/collapsible list of items. The final Accordion component is a compound of the following:
Accordion: wraps a series ofAccordionItems in a single component.AccordionItem: wraps anAccordionButtonand anAccordionPanel.AccordionButton: contains the top-level items of the Accordion list. It is a clickable button that shows or hides the child items of a givenAccordionItem.AccordionPanel: contains the child items of a givenAccordionItem.
Import
Import the component from @faststore/ui
import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
} from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/atoms/Button/styles.scss';
@import '@faststore/ui/src/components/molecules/Accordion/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Props
All accordion-related components support all attributes also supported by the <div> tag, except for the AccordionButton, which renders the <button> tag and inherits Button props.
Besides those attributes, the following props are also supported:
Accordion
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-accordion |
| indices* | Iterable<number> | Indices that indicate which accordion items are opened. | |
| onChange* | (index: number) => void | Function that is triggered when an accordion item is opened/closed. |
Accordion Item
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-accordion-item |
| index | number | Index of the current accordion item within the accordion. | |
| prefixId | string | Namespace ID prefix for the current Accordion item's panel and button to avoid ID duplication when multiple instances are on the same page. |
Accordion Button
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-accordion-button |
| expandedIcon | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component is rendered as an icon when the accordion is expanded. | <Icon name="MinusCircle" data-icon="expanded" /> |
| collapsedIcon | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component is rendered as an icon when the accordion is collapsed. | <Icon name="PlusCircle" data-icon="collapsed" /> |
| variant | "primary" | "secondary" | "tertiary" | Specifies the component color variant. | |
| size | "small" | "regular" | Specifies the size variant. | |
| inverse | false | true | Defines the use of inverted colors. | |
| disabled | false | true | Specifies that this button should be disabled. | |
| icon | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component that will be rendered as an icon. | |
| loading | false | true | Boolean that represents a loading state. | |
| loadingLabel | string | Specifies a label for loading state. | |
| iconPosition | "left" | "right" | Specifies where the icon should be positioned |
Accordion Panel
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-accordion-panel |
Design Tokens
Nested Elements
Item
| Local token | Default value/Global token linked |
|---|---|
--fs-accordion-item-border-bottom-width | var(--fs-border-width) |
--fs-accordion-item-border-bottom-color | var(--fs-border-color-light) |
Button
| Local token | Default value/Global token linked |
|---|---|
--fs-accordion-button-padding | var(--fs-spacing-3) 0 |
--fs-accordion-button-font-size | var(--fs-text-size-3) |
--fs-accordion-button-font-weight | var(--fs-text-weight-bold) |
--fs-accordion-button-line-height | 1.2 |
--fs-accordion-button-color | var(--fs-color-text) |
--fs-accordion-button-bkg-color | transparent |
Panel
| Local token | Default value/Global token linked |
|---|---|
--fs-accordion-panel-padding-bottom | var(--fs-spacing-4) |
Customization
data-fs-accordion
data-fs-accordion-item
data-fs-accordion-button
data-fs-accordion-panel
The AccordionButton component inherits Button CSS selectors.