cal.pub0.org/packages/ui/components/top-banner/topbanner.stories.mdx

66 lines
1.9 KiB
Plaintext
Raw Normal View History

import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
import { Icon } from "@calcom/ui";
import { TopBanner } from './TopBanner'
<Meta title="UI/TopBanner" component={TopBanner} />
<Title title="TopBanner" suffix="Brief" />
## Definition
Top banner will be position on the very top of the page to communicate on whats wrong or whats new.
## Structure
Each toast has a state to represent neutral, positive or negative responses.
<CustomArgsTable of={TopBanner} />
<Examples title="Top Banner Style">
<Example title="Default" isFullWidth={true} >
<TopBanner
actions={
<button
className="border-b border-black text-sm"
onClick={() => {
console.log("test");
}}>
Action
</button>
}
text="Something big is happening we want you to know about."
/>
</Example>
<Example title="Warning" isFullWidth={true} >
<TopBanner
actions={
<button
className="border-b border-black text-sm"
onClick={() => {
console.log("test");
}}>
Action
</button>
}
variant="warning"
text="An app wide warning is occuring that should be resolved."
/>
</Example>
<Example title="Error" isFullWidth={true} >
<TopBanner
actions={
<button
className="border-b border-black text-sm"
onClick={() => {
console.log("test");
}}>
Action
</button>
}
variant="error"
text="A major error is occuring that must be resolved."
/>
</Example>
</Examples>