Accordion

An accordion allows users to expand and collapse sections of content.

Default

By default, accordions allow only one section to be expanded at any time.

Multiple sections open

Accordions can also be configured to allow multiple sections to be expanded simultaneously.

With icon support

Accordions can support displaying icons in the title.

With bold headings

Accordions can support `bold` titles.

Implementation

Installation

npm install bpk-component-accordion --save-dev

Usage

withSingleItemAccordionState(BpkAccordion)

The withSingleItemAccordionState higher-order component is used to limit one section to be expanded at any time.

import React from 'react';
import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from 'bpk-component-accordion';

const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);

export default () => (
  <SingleItemAccordion>
    <BpkAccordionItem id="stops" title="Stops">
      My stops content.
    </BpkAccordionItem>
    <BpkAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
      My departure times content.
    </BpkAccordionItem>
    <BpkAccordionItem id="journey-duration" title="Journey duration">
      My journey duration content.
    </BpkAccordionItem>
  </SingleItemAccordion>
)

withAccordionItemState(BpkAccordionItem)

The withAccordionItemState higher-order component is used to allow multiple items to be expanded simultaneously.

import React from 'react';
import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from 'bpk-component-accordion';

const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);

export default () => (
  <BpkAccordion>
    <StatefulAccordionItem id="stops" title="Stops">
      My stops content.
    </StatefulAccordionItem>
    <StatefulAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
      My departure times content.
    </StatefulAccordionItem>
    <StatefulAccordionItem id="journey-duration" title="Journey duration" initiallyExpanded>
      My journey duration content.
    </StatefulAccordionItem>
  </BpkAccordion>
)

Displaying icons

BpkAccordionItem supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using withAlignment and pass through the matching sizes for the icon you wish to use. For more information see Alignment

import React from 'react';
import { BpkAccordion, BpkAccordionItem } from 'bpk-component-accordion';
import { withAlignment } from 'bpk-component-icon';
import StopsIcon from 'bpk-component-icon/sm/stops';
import { lineHeightBase, iconSizeSm, colorPanjin } from 'bpk-tokens/tokens/base.es6';

const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);

<BpkAccordion>
  <BpkAccordionItem id="stops" title="Stops" icon={<AlignedStopsIcon fill={colorPanjin}/>}>
    My stops content.
  </BpkAccordionItem>
</BpkAccordion>

Props

BpkAccordion

PropertyPropTypeRequiredDefault Value
childrennodetrue-
classNamestringfalsenull

BpkAccordionItem

PropertyPropTypeRequiredDefault Value
childrennodetrue-
idstringtrue-
titlestringtrue-
weightSee prop detailsfalseWEIGHT_STYLES.regular
expandedboolfalsefalse
iconnodefalsenull
onClickfuncfalse() => null
tagNamestringfalsespan
textStylestringfalse"base"

withSingleItemAccordionState(BpkAccordion)

PropertyPropTypeRequiredDefault Value
expanded initiallyExpandedboolfalsefalse

withState(BpkAccordionItem)

PropertyPropTypeRequiredDefault Value
expanded initiallyExpandedboolfalsefalse

Prop Details

weight

This prop takes WEIGHT_STYLES that has been re-exported from BpkText. For valid options please refer to the BpkText docs.

Theme Props

  • accordionColor,
  • accordionHoverColor,
  • accordionActiveColor,

npm package

View on npm View bpk-component-accordion on npm

Source code

View on GitHub