65 lines
1.8 KiB
Plaintext
65 lines
1.8 KiB
Plaintext
|
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>
|