To help you get started, we've collected the most common ways that bpk-component-accordion is being used within popular public projects.

Skyscanner / backpack / packages / bpk-docs / src / pages / AccordionsPage / AccordionsPage.js View on Github

import accordionsReadme from 'bpk-component-accordion/README.md';
import {
  BpkAccordion,
  BpkAccordionItem,
  withSingleItemAccordionState,
  withAccordionItemState,
} from 'bpk-component-accordion';
import { spacingSm } from 'bpk-tokens/tokens/base.es6';

import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Paragraph from '../../components/Paragraph';
import IntroBlurb from '../../components/IntroBlurb';

const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);
const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);

const CheckboxWrapper = props => (
  <div style="{{">
);

const StopsContent = () =&gt; (
  <form>
    
       null} checked /&gt;
    
    
       null} checked /&gt;
    
    
      </form></div>

View more ways to use bpk-component-accordion

bpk-component-accordion

> Backpack accordion component.

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 () => (
  
    
      My stops content.
    
    
      My departure times content.
    
    
      My journey duration content.
    
  
)

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 () => (
  
    
      My stops content.
    
    
      My departure times content.
    
    
      My journey duration content.
    
  
)

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 '@skyscanner/bpk-foundations-web/tokens/base.es6';

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


  }>
    My stops content.
  

Props

BpkAccordion

BpkAccordionItem

withSingleItemAccordionState(BpkAccordion)

withState(BpkAccordionItem)

Prop Details

Theme Props

• accordionColor,
• accordionHoverColor,
• accordionActiveColor,