Accordion

Purpose

An accordion is an area that can be collapsed and opened. The component consists of a title bar and children that will be revealed when the accordion is open.

Terms for understanding accordions include:

Accordion Header: Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content.

Accordion Panel: Section of content associated with an accordion header.

More on the Accordion here.

Usage

import styled from 'styled-components';

import Accordion from '@wedgekit/accordion';
import Card from '@wedgekit/card';
import { Text } from '@wedgekit/core';

const StyledCard = styled(Card)`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px;
  margin: 8px 32px;
`;

const Example = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <Accordion
      open={open}
      header={<Text style={{ margin: 'auto 0px' }}>This is the Accordion Header</Text>}
      onToggle={() => setOpen(!open)}
    >
      <>
        <StyledCard>
          <Text>Task Title</Text>
          <Text>01/02/21</Text>
          <Text>01/02/21</Text>
        </StyledCard>
        <StyledCard>
          <Text>Task Title</Text>
          <Text>01/02/21</Text>
          <Text>01/02/21</Text>
        </StyledCard>
      </>
    </Accordion>
  );
};

render(<Example />);

Props

children

Type: JSX.Element

Required: ✅

Children is the panel content of the Accordion. Panel content will be shown if open is true and hidden if open is false.

className

Type: string

required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

header

Type: JSX.Element

Required: ✅

JSX that renders as the header of the Accordion. Header will be displayed if Accordion is open or collapsed.

open

Type: boolean

Required: ✅

Determines whether or not the accordion children are displayed or not.

onToggle

Type: (e: React.SyntheticEvent) => void

Required: ✅

Event notifying the intent of the Accordion to toggle between open and closed.

Further Reading

• Custom Styling of the Accordion