65 lines
1.8 KiB
Markdown
65 lines
1.8 KiB
Markdown
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
|
||
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 what’s wrong or what’s 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>
|