in src/stories/ActionList2/fixtures.stories.tsx [649:765]
export function AllCombinations(): JSX.Element {
return (
<>
<h1>All Possible Combinations</h1>
<code>
dynamic features: L = Leading Visual, I = Inline Description, B = Block Description, T = Trailing Visual
</code>
<br />
<code>16 possible combinations</code>
<br />
<br />
<ErsatzOverlay maxWidth="300px">
<ActionList showDividers>
<ActionList.Item>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
The everything bagel
<ActionList.Description variant="inline">inline description</ActionList.Description>
<ActionList.Description variant="block">Block description</ActionList.Description>
<ActionList.TrailingVisual>
<StarIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>none of them, only text</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
only L
</ActionList.Item>
<ActionList.Item>
only I<ActionList.Description variant="inline">inline description</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
only B<ActionList.Description variant="block">Block description</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
only T
<ActionList.TrailingVisual>
<StarIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
L + I<ActionList.Description variant="inline">inline description</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
L + B<ActionList.Description variant="block">Block description</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
L + T
<ActionList.TrailingVisual>
<StarIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
I + B<ActionList.Description variant="inline">inline description</ActionList.Description>
<ActionList.Description variant="block">Block description</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
I + T<ActionList.Description variant="inline">inline description</ActionList.Description>
<ActionList.TrailingVisual>
<StarIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
B + T<ActionList.Description variant="block">Block description</ActionList.Description>
<ActionList.TrailingVisual>
<StarIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
L + I + B<ActionList.Description variant="inline">inline description</ActionList.Description>
<ActionList.Description variant="block">Block description</ActionList.Description>
</ActionList.Item>
<ActionList.Item disabled>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
L + I + T<ActionList.Description variant="inline">inline description</ActionList.Description>
<ActionList.TrailingVisual>
<StarIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item disabled>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
L + B + T<ActionList.Description variant="block">Block description</ActionList.Description>
<ActionList.TrailingVisual>
<StarIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item disabled>
I + B + T<ActionList.Description variant="inline">inline description</ActionList.Description>
<ActionList.Description variant="block">Block description</ActionList.Description>
<ActionList.TrailingVisual>
<StarIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
</ErsatzOverlay>
</>
)
}