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

feat: Added controls to alert storybook

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

50
packages/ui/components/alert/alert.stories.mdx
View File

@ -35,23 +35,37 @@ Each alert has a state to represent neutral, positive or negative responses.
<Canvas>
<Story
name="Alert">
<VariantsTable titles={['Default']} columnMinWidth={150}>
<VariantRow variant="Success">
<Alert severity="success" title="Summarise what happened" message="Describe what can be done about it here." />
</VariantRow>
<VariantRow variant="Warning">
<Alert severity="warning" title="Summarise what happened" message="Describe what can be done about it here." />
</VariantRow>
<VariantRow variant="Error">
<Alert severity="error" title="Summarise what happened" message="Describe what can be done about it here." />
</VariantRow>
<VariantRow variant="Neutral">
<Alert severity="neutral" title="Summarise what happened" message="Describe what can be done about it here." />
</VariantRow>
<VariantRow variant="Info">
<Alert severity="info" title="Summarise what happened" message="Describe what can be done about it here." />
</VariantRow>
</VariantsTable>
name="Alert"
args={{
severity: 'success',
title: 'Summarise what happened',
message: 'Describe what can be done about it here.',
}}
argTypes={{
severity: {
control: {
type: 'inline-radio',
options: ['success', 'warning', 'error', 'neutral', 'info'],
},
},
title: {
control: {
type: 'text'
}
},
message: {
control: {
type: 'text'
}
},
}}
>
{({ severity, title, message }) => (
<VariantsTable titles={['Default']} columnMinWidth={150}>
<VariantRow variant={severity}>
<Alert severity={severity} title={title} message={message} />
</VariantRow>
</VariantsTable>
)}
</Story>
</Canvas>