cal.pub0.org/packages/ui/components/alert/alert.stories.mdx

58 lines
2.2 KiB
Markdown

import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title, CustomArgsTable, VariantsTable,VariantRow } from '@calcom/storybook/components'
import { Alert } from './Alert';
<Meta title="UI/Alert" component={Alert} />
<Title title="Alert" suffix="Brief" subtitle="Version 2.0 — Last Update: 04 jan 2023"/>
## Definition
Alerts provide time-based feedback to the user after taking an action.
## Structure
Each alert has a state to represent neutral, positive or negative responses.
<CustomArgsTable of={Alert} />
<Examples title="Alert style">
<Example title="Error">
<Alert severity="error" title="Summarise what happened" message="Describe what can be done about it here." />
</Example>
<Example title="Warning">
<Alert severity="warning" title="Summarise what happened" message="Describe what can be done about it here." />
</Example>
<Example title="With actions">
<Alert
severity="warning"
title="Summarise what happened"
message="Describe what can be done about it here."
actions={<><button>Cancel me</button></>}
/>
</Example>
</Examples>
<Title offset title="Alert" suffix="Variants" />
<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>
</Story>
</Canvas>