- Welcome
- Getting started
- Latest updates
- Monthly updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Infinite scroll
- Info Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Content
- Accessibility
- Contributing
Accordion
An accordion allows users to expand and collapse sections of content.
Default
On Dark
Without divider
With icon support
With bold headings
bpk-component-accordion
Backpack accordion component.
Installation
Check the main Readme for a complete installation guide.
Usage
withSingleItemAccordionState(BpkAccordion)
The withSingleItemAccordionState higher-order component is used to limit one section to be expanded at any time.
import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from '@skyscanner/backpack-web/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 { BpkAccordion, BpkAccordionItem, withAccordionItemState } from '@skyscanner/backpack-web/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 { BpkAccordion, BpkAccordionItem } from '@skyscanner/backpack-web/bpk-component-accordion';
import { withAlignment } from '@skyscanner/backpack-web/bpk-component-icon';
import StopsIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/stops';
import { lineHeightBase, iconSizeSm, colorPanjin } from '@skyscanner/bpk-foundations-web/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
Check out the full list of props on Skyscanner's design system documentation website.
Props
Made with ❤️ by Skyscanner © 2023
© 2023 Skyscanner Backpack. Page last updated on Oct 2, 2023, 15:40