maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Added controls to avatar and badge storybook

This commit is contained in:
Jaideep 2023-06-20 22:05:15 +05:30
parent 3cb6eeb139
commit 0d8f684331
No known key found for this signature in database
GPG Key ID: 3E5EBE94B429CDE7
2 changed files with 49 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/ui/components/avatar/avatar.stories.mdx
View File

@ -125,14 +125,29 @@ Avatar group can be composed differently based on the number of user profile.
<Canvas>
<Story
name="Avatar">
<VariantsTable titles={['Default']} columnMinWidth={150}>
<VariantRow variant="Sm">
<Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
name="Avatar"
args={{
size: 'sm',
alt: 'Avatar Story',
gravatarFallbackMd5: 'Ui@CAL.com',
}}
argTypes={{
size: {
control: {
type: 'inline-radio',
options: ['sm', 'lg'],
},
},
alt: { control: 'text' },
gravatarFallbackMd5: { control: 'text' },
}}
>
{({ size, alt, gravatarFallbackMd5 }) => (
<VariantsTable titles={['Default']} columnMinWidth={150}>
<VariantRow variant={size}>
<Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
</VariantRow>
<VariantRow variant="Lg">
<Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
</VariantRow>
</VariantsTable>
</VariantsTable>
)}
</Story>
</Canvas>

48
packages/ui/components/badge/badge.stories.mdx
View File

@ -56,28 +56,32 @@ Alet badge is used in conjunction with an item, profile or label to indicate num
<Title offset title="Badge" suffix="Variants" />
<Canvas>
<Story name="All Variants">
<VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
<VariantRow variant="Default">
<Badge variant="default" >Badge text</Badge>
<Badge variant="default" withDot>Badge text</Badge>
<Badge variant="default" startIcon={Plus}>Badge text</Badge>
<Story name="All Variants"
args={{
severity: 'default',
label: 'Badge text',
}}
argTypes={{
severity: {
control: {
type: 'inline-radio',
options: ['default', 'success', 'gray', 'error'],
},
},
label: {
control: {
type: 'text',
},
},
}}>
{({ severity, label }) => (
<VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
<VariantRow variant={severity}>
<Badge variant={severity}>{label}</Badge>
<Badge variant={severity} withDot>{label}</Badge>
<Badge variant={severity} startIcon={Plus}>{label}</Badge>
</VariantRow>
<VariantRow variant="Success">
<Badge variant="success" >Badge text</Badge>
<Badge variant="success" withDot>Badge text</Badge>
<Badge variant="success" startIcon={Plus}>Badge text</Badge>
</VariantRow>
<VariantRow variant="gray">
<Badge variant="gray" >Badge text</Badge>
<Badge variant="gray" withDot>Badge text</Badge>
<Badge variant="gray" startIcon={Plus}>Badge text</Badge>
</VariantRow>
<VariantRow variant="error">
<Badge variant="error" >Badge text</Badge>
<Badge variant="error" withDot>Badge text</Badge>
<Badge variant="error" startIcon={Plus}>Badge text</Badge>
</VariantRow>
</VariantsTable>
</VariantsTable>
)}
</Story>
</Canvas>