@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
49 lines (37 loc) • 5.23 kB
Markdown
# Accordion
To implement Accordion component into your project you'll need to the import the Accordion and the [AccordionSection](#Accordionsection):
```jsx
import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";
```
After adding import into your project you can use it simply like:
```jsx
<Accordion>
<AccordionSection>Hello World!</AccordionSection>
</Accordion>
```
## Props
| Name | Type | Required | Default | Description |
| --------------- | --------------------------------------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | `React.ReactNode` | | | The content of the Accordion. You can use only AccordionSection |
| expandedSection | `string \| number` | | | Optional prop to control which AccordionSection (by id) is expanded |
| loading | `boolean` | | `false` | If true it will render the Loading component. When `true`, either `loadingTitle` or `loadingHidden` must be provided. |
| loadingTitle | `string` | | | The title announced by screen readers when the accordion is in loading state. Required when `loading` is `true` and `loadingHidden` is not `true`. |
| loadingHidden | `boolean` | | | If `true`, the loading state will be hidden from screen readers. Required when `loading` is `true` and `loadingTitle` is not provided. |
| onExpand | `(sectionId: string \| number) => void \| Promise<any>` | | | Callback (along with sectionId) that is triggered when section is expanding |
| dataTest | `string` | | | Optional prop for testing purposes |
| id | `string` | | | Set `id` for `Accordion` |
| spaceAfter | `"none" \| "smallest" \| "small" \| "normal" \| "medium" \| "large" \| "largest"` | | | Additional space after the component |
## AccordionSection
## Props
| Name | Type | Required | Default | Description |
| ----------------- | ----------------- | -------- | ------- | --------------------------------------------------------------------------------------------- |
| id | `string` | | | Unique identifier for the section, used by `expandedSection` |
| children | `React.ReactNode` | | | The content of the AccordionSection |
| actions | `React.ReactNode` | | | Additional actions to be displayed in the header |
| expandable | `boolean` | | `true` | Whether the section can be expanded |
| expandOnTileClick | `boolean` | | `false` | Enables mobile-first interaction where the entire header area becomes clickable for expansion |
| header | `React.ReactNode` | | | The content of the section header |
| footer | `React.ReactNode` | | | Additional content to display at the bottom of an expanded section |
| dataTest | `string` | | | Optional prop for testing purposes |
## Functional specs
- By default, the Accordion component operates in an uncontrolled mode. For programmatic control, use the `expandedSection` and `onExpand` props together.