95 lines
2.1 KiB
Markdown
95 lines
2.1 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"
|
|
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>
|