Accordion is a component that allows for the expansion and collapsing of content

Importing

The component can be imported via:

import { 
  Accordion, 
  AccordionTitle, 
  AccordionContent 
} from '@customerio/pluma-components/react';

Usage

The component can be used like so:

Test Title
Content goes here
<Accordion>
  <AccordionTitle>Test Title</AccordionTitle>
  <AccordionContent>Content goes here</AccordionContent>
</Accordion>

Default Open State

The component can be opened by default. Note that this only affects initial state, and the user can open and close the component as they please.

The Black Gate Opens

The wind blew, and the trumpets sang, and arrows whined; but the sun now climbing towards the South was veiled in the reeks of Mordor, and through a threatening haze it gleamed, remote, a sullen red, as if it were the ending of the day, or the end maybe of all the world of light. And out of the gathering mirk the Nazgûl came with their cold voices crying words of death; and then all hope was quenched.

Would your hope be quenched?
<Accordion defaultOpen={true}>
  <AccordionTitle>The Black Gate Opens</AccordionTitle>
  <AccordionContent>
    <Paragraph>
      The wind blew, and the trumpets sang, and arrows whined; but the sun now climbing towards the South was veiled in the reeks of Mordor, and through a threatening haze it gleamed, remote, a sullen red, as if it were the ending of the day, or the end maybe of all the world of light. And out of the gathering mirk the Nazgûl came with their cold voices crying words of death; and then all hope was quenched.
    </Paragraph>
    <Strong>
      Would your hope be quenched? 
    </Strong>
    <ButtonGroup mt={200}>
      <Button variant="primary">Yes</Button>
      <Button>No</Button>
    </ButtonGroup>
  </AccordionContent>
</Accordion>

Disabled Accordion

You can prevent an accordion from being opened by disabling it with the isDisabled property.

The Black Gate Doesn't Open
Closed today
<Accordion isDisabled={true}>
  <AccordionTitle>The Black Gate Doesn't Open</AccordionTitle>
  <AccordionContent>Closed today</AccordionContent>
</Accordion>

Custom Title Content

You can include custom content in the title area:

Custom Title with Paragraph

Custom Content with Paragraph

<Accordion>
  <AccordionTitle>
    <Paragraph weight="medium">Custom Title with Paragraph</Paragraph>
  </AccordionTitle>
  <AccordionContent>
    <Paragraph>Custom Content with Paragraph</Paragraph>
  </AccordionContent>
</Accordion>

API

Default:false

Whether the accordion is open or closed by default

Default:false

Whether the accordion is disabled

Called whenever the accordion is opened/closed

Default:borderless

The visual style variant of the accordion.