Accordion

To install, type the following into the command line at the root of your project:

npm i @brighthr/component-accordion

To implement the Accordion component into your project you’ll need to add the import:

import Accordion from '@brighthr/component-accordion';

After adding import into your project you can use it simply like:

<Accordion />

Props

| Name | Type | Default | Description | |------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | chevronPosition | 'left' 'right' | 'left' | Sets the chevron position. | | children | React.ReactNode | | The content of the Accordion. | | counter | {count: number, status: 'default' \| 'warning' \| 'information' \| 'success' \| 'error', background: 'default' \| 'dark' \| 'white' \| 'none'} | | Counter is an object made up of 3 keys. count displays a number badge for the accordian to show. status sets the color theme for the badge. background sets the background color for the badge. | | defaultOpenState | boolean | false | If true, the accordian will be open on load. | | open | boolean | | Open state of the accordion (controlled mode) | | setOpen | (open: boolean) => void | | Callback to update the open state (controlled mode) | | description | string | | Sets the description text. | | invertedBg | boolean | false | If true, sets the background of the children to be white. | | invertedHeader | boolean | false | If true, sets the background of the accordion to be white. | | onClick | () => void | | Function for handling onClick event. | | title | string | | Sets the title text. |