1import { TopBanner } from '@proton/components';
2
3import { getTitle } from '../../helpers/title';
4import mdx from './TopBanner.mdx';
5
6export default {
7    component: TopBanner,
8    title: getTitle(__filename, false),
9    parameters: {
10        docs: {
11            page: mdx,
12        },
13    },
14};
15
16export const Basic = () => {
17    return <TopBanner className="bg-danger">Example of a top banner</TopBanner>;
18};
19
20export const Close = () => {
21    return (
22        <TopBanner className="bg-danger" onClose={() => alert('Close button pressed')}>
23            Example of a top banner with close button
24        </TopBanner>
25    );
26};
27
28export const Color = () => {
29    return (
30        <div className="flex flex-column gap-2">
31            <TopBanner className="bg-norm">Banner with norm background</TopBanner>
32            <TopBanner className="bg-weak">Banner with weak background</TopBanner>
33            <TopBanner className="bg-strong">Banner with strong background</TopBanner>
34            <TopBanner className="bg-primary">Banner with primary background</TopBanner>
35            <TopBanner className="bg-danger">Banner with danger background</TopBanner>
36            <TopBanner className="bg-warning">Banner with warning background</TopBanner>
37            <TopBanner className="bg-success">Banner with success background</TopBanner>
38            <TopBanner className="bg-info">Banner with info background</TopBanner>
39            <TopBanner>Banner with no background</TopBanner>
40        </div>
41    );
42};