Accordion
The source accordion: SourceList, Source, Group and DetailRow. The person badge counts supporters, the Messenger badge counts subscribers; hide either when it does not apply.
Figma: 11 / Components / AccordionBirthday fundraisers420230
Usage
Source: src/components/ui/source-accordion.tsx
import { SourceList } from '@/components/ui/source-accordion'<SourceList
defaultOpen={['facebook']}
sources={[
{
id: 'facebook',
label: 'Facebook Direct',
accent: 'facebook',
icon: <SourceIcon source='facebook' />,
supporters: '1,240',
subscribers: { value: '640', detail: '52%' },
groups: [...]
}
]}
/>When to use
When to reach for it, and when to use something else.
Use it for
Complete: Breaking a total down by source, group and post inside a drawer or container.
Avoid
Not complete: General content sections; this accordion is for sources and counts.
SourceList
| Prop | Type | Default | Description |
|---|---|---|---|
| sources | SourceData[] | – | Sources with their groups and detail rows. |
| defaultOpen | string[] | [] | Source ids open on load. |
SourceData
| Prop | Type | Default | Description |
|---|---|---|---|
| accent | 'facebook' | 'messenger' | 'platform' | 'challenges' | 'instagram' | 'other' | 'birthdays' | 'misc' | – | The series color of the source bar. |
| supporters | string | { value, detail } | – | Shows the person count badge. |
| subscribers | { value, detail } | – | Shows the Messenger count badge. |
| groups | GroupData[] | – | Nested groups; a group with rows expands. |
