in src/stories/Token.stories.tsx [86:117]
gap: get('space.2')
}}
>
<Token as="a" href="http://google.com/" text="Link" {...args} />
<Token as="button" onClick={action('clicked')} text="Button" {...args} />
<Token as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" {...args} />
</Box>
</ExampleCollectionContainer>
)
}
Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}
export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
return (
<ExampleCollectionContainer>
<Token {...args} leadingVisual={() => <GitBranchIcon />} />
</ExampleCollectionContainer>
)
}
WithLeadingVisual.storyName = 'with leadingVisual'
WithLeadingVisual.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
export const WithOnRemoveFn = (args: Omit<TokenProps, 'ref'>) => {
return (
<ExampleCollectionContainer>
<SingleExampleContainer label="w/ onRemove passed">
<Token onRemove={action('remove me')} {...args} />
</SingleExampleContainer>
<SingleExampleContainer label="w/ onRemove passed and the token is interactive">
<Box
display="flex"
sx={{