Collapsible

A collapsible is a great way of to organize information on a page. With it you can temporary hide information to avoid overfilling the page with too much content that the user cannot pickup all at once.

A collapsible constists of two parts: the header and the content. The header is always visible and contains a headline or a basic summary of the information displayed in the content.

The content displays all of the information in detail. It is hidden per default and can be opened or closed by clicking on the header.

Usage

The collapsible can simply be imported from the design system like this:

import Collapsible from "@finanzchef24gmbh/design-system/dist/src/Collapsible";

The collapsible is implemented using the "compound component"-pattern. This means there are multiple sub-components attached as properties to the main component. We restrict the rendering of the main component and the subcomponent to enforce that the component produces a sensible and functional collapsible.

The main Collapsible component only allows two sub-components as children:

• Collapsible.Header contains everything that should go inside of the header
• Collapsible.Content contains everything that should go inside of the content

All other elements passed as child to a Collapsible are ignored. If you try to render multiple headers or contents you will receive a warning in the console. Only the first child of each type is rendered in this case, the following "duplicates" are ignored.

If either the Collapsible.Header or the Collapsible.Content is missing the component will throw an error.

The Collapsible.Header sub-component follows a similar pattern and also only allows two other sub-components as child:

• Collapsible.Headline contains the "real" content of the header
• Collapsible.Chevron renders the chevron icon that indicates the state of the collapsible

Props

State

The Collapsible component makes use of the CollapsibleStateContainer, that means it is functional by default. You can also pass it custom properties isOpen and onToggle. You can read in the mentioned wrapper component how those props will behave and affect the collapsible.

Example

<Spacings.Inset>
  <Collapsible>
    <Collapsible.Header>
      <Collapsible.Headline>
        <Text textStyle="headline4">This is a collapsible!</Text>
      </Collapsible.Headline>
      <Collapsible.Chevron />
    </Collapsible.Header>
    <Collapsible.Content>
      <Text>Hello, here is some content!</Text>
    </Collapsible.Content>
  </Collapsible>
</Spacings.Inset>