114 lines
2.4 KiB
Markdown
114 lines
2.4 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>
|
||
|
||
<Canvas>
|
||
<Story
|
||
name="TopBanner"
|
||
args={{
|
||
text: "Something big is happening we want you to know about.",
|
||
variant: "default",
|
||
}}
|
||
argTypes={{
|
||
variant: {
|
||
control: {
|
||
type: "select",
|
||
options: ["default", "warning", "error"],
|
||
},
|
||
},
|
||
text: {
|
||
control: {
|
||
type: "text",
|
||
},
|
||
},
|
||
}}>
|
||
{({ text, variant, ...args }) => (
|
||
<TopBanner
|
||
{...args}
|
||
actions={
|
||
<button
|
||
className="border-b border-black text-sm"
|
||
onClick={() => {
|
||
alert("test");
|
||
}}>
|
||
Action
|
||
</button>
|
||
}
|
||
variant={variant}
|
||
text={text}
|
||
/>
|
||
)}
|
||
</Story>
|
||
</Canvas>
|