@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.
73 lines (56 loc) • 4.67 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
Table below contains all types of the props available in the Accordion component.
| Name | Type | Default | Description |
| :--------- | :------------------------------------------------------------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onExpand | `() => void \| Promise` | | Callback (along with sectionId) that is triggered when section is expanding |
| expanded | `boolean` | `false` | Optional prop to control expanded state for AccordionSections |
| children | `React.ChildrenArray<React.Element<typeof AccordionSection>>` | | The content of the Accordion. You can use only [AccordionSection](#accordionsection) |
| dataTest | `string` | | Optional prop for testing purposes |
| loading | `boolean` | | If `true` it will render the Loading component |
| spaceAfter | `enum` | | Additional `margin-bottom` after component. [See this docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) |
### AccordionSection
```jsx
import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";
```
#### Usage:
```jsx
<Accordion onExpand={onExpand} expanded={expanded}>
<AccordionSection id="0X1">Hello World!</AccordionSection>
</Accordion>
```
```jsx
<Accordion loading>
<AccordionSection id="0X1">Loading...</AccordionSection>
</Accordion>
```
#### Props
| Name | Type | Default | Description |
| :--------- | :----------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
| id | `string \| number` | | Identificator used to determine active section when using with controlled state |
| actions | `React.Node` | | Actions which will be rendered on the right side |
| children | `React.Node` | | The content of the AccordionSection. |
| dataTest | `string` | | Optional prop for testing purposes. |
| expandable | `boolean` | | If set to `false` `actions` will not be displayed |
| header | `React.Node` | | The header of the AccordionSection. Useful when you need different layout than combination of e.g. `title` and `description` properties. |
| footer | `React.Node` | | The sticky footer of the AccordionSection. Useful for navigation buttons |
### enum
| titleAs |
| :------ |
| `"h1"` |
| `"h2"` |
| `"h3"` |
| `"h4"` |
| `"h5"` |
| `"h6"` |
| `"div"` |