1import { ButtonLike } from '@proton/atoms';
2import { PromotionButton } from '@proton/components/components/button/PromotionButton';
3
4import mdx from './PromotionButton.mdx';
5
6export default {
7    component: PromotionButton,
8    title: 'components/Promotion Button',
9    parameters: {
10        docs: {
11            page: mdx,
12        },
13    },
14};
15
16export const Example = () => <PromotionButton>Regular</PromotionButton>;
17
18export const ExampleWithIcon = () => (
19    <PromotionButton iconName="brand-proton-mail-filled-plus">With Icon</PromotionButton>
20);
21
22export const ExampleIconOnly = () => (
23    <PromotionButton iconName="upgrade" icon={true} shape="ghost">
24        Icon Ghost
25    </PromotionButton>
26);
27
28export const ExampleResponsive = () => (
29    <PromotionButton iconName="upgrade" icon={true} responsive>
30        Icon Ghost
31    </PromotionButton>
32);
33
34export const ExampleIconSmall = () => (
35    <PromotionButton iconName="brand-proton-mail-filled-plus" icon={true} upsell>
36        Upsell
37    </PromotionButton>
38);
39
40export const ExampleWithIconNoGradient = () => (
41    <PromotionButton iconName="brand-proton-mail-filled-plus" iconGradient={false}>
42        No icon gradient
43    </PromotionButton>
44);
45
46export const ExampleLike = () => <ButtonLike as={PromotionButton}>ButtonLike</ButtonLike>;
47
48export const Basic = ({ ...args }) => (
49    <PromotionButton icon={true} iconName="users-plus" {...args}>
50        Loremium
51    </PromotionButton>
52);
53
54Basic.args = {};