in src/stories/ActionList.stories.tsx [221:289]
export function ComplexListFullVariantStory(): JSX.Element {
const StyledDiv = styled.div`
${sx}
`
return (
<>
<h1>Complex List</h1>
<h2>Full Variant</h2>
<ErsatzOverlay>
<ActionList
variant="full"
groupMetadata={[
{groupId: '0'},
{groupId: '1', header: {title: 'Live query', variant: 'filled'}},
{groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
{groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
{
groupId: '4',
renderItem: ({leadingVisual: LeadingVisual, ...props}) => (
<ActionList.Item
{...props}
leadingVisual={() => (
<StyledDiv sx={{'&>svg': {fill: 'white'}}}>
{LeadingVisual && <LeadingVisual></LeadingVisual>}
</StyledDiv>
)}
/>
),
renderGroup: ({sx: sxProps, ...props}) => (
<ActionList.Group {...props} sx={{...sxProps, backgroundColor: 'cornflowerblue', color: 'white'}} />
)
}
]}
items={[
{leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
{leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
{
leadingVisual: SearchIcon,
text: 'repo:github/memex,github/github',
groupId: '1',
renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />
},
{
leadingVisual: NoteIcon,
text: 'Table',
description: 'Information-dense table optimized for operations across teams',
descriptionVariant: 'block',
groupId: '2'
},
{
leadingVisual: ProjectIcon,
text: 'Board',
description: 'Kanban-style board focused on visual states',
descriptionVariant: 'block',
groupId: '2'
},
{
leadingVisual: FilterIcon,
text: 'Save sort and filters to current view',
groupId: '3'
},
{leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
{leadingVisual: GearIcon, text: 'View settings', groupId: '4'}
]}
/>
</ErsatzOverlay>
</>
)
}