Accordion / React

To implement Accordion component into your project you’ll need to the import the Accordion and the AccordionSection:

import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";

After adding import into your project you can use it simply like:

<Accordion>
  <AccordionSection>Hello World!</AccordionSection>
</Accordion>

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`	0	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
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

import Accordion, { AccordionSection } from "@kiwicom/orbit-components/lib/Accordion";

<Accordion onExpand={onExpand} expanded={expanded}>
  <AccordionSection id="0X1">Hello World!</AccordionSection>
</Accordion>

<Accordion loading>
  <AccordionSection id="0X1">Loading...</AccordionSection>
</Accordion>

Name	Type	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