romanjaros
cda0d4569f
Some checks failed
forgejo/Procyon/procyon/pipeline/head There was a failure building this commit
121 lines
2.2 KiB
TypeScript
121 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { DeleteIcon, LogOutIcon } from 'lucide-react-native';
|
|
|
|
import { Button } from '@procyon/components/Button';
|
|
import { T } from '@procyon/localization/tolgee';
|
|
|
|
type Story = StoryObj<typeof Button>;
|
|
|
|
export default {
|
|
component: Button,
|
|
argTypes: {
|
|
label: {
|
|
control: {
|
|
type: 'text',
|
|
},
|
|
},
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: "`import { Button } from '@procyon/components/Button';`",
|
|
},
|
|
},
|
|
},
|
|
tags: ['autodocs'],
|
|
} as Meta;
|
|
|
|
const label = <T transKey="procyon.button.label_click_on_me" />;
|
|
|
|
export const Primary: Story = {
|
|
args: {},
|
|
render: (args) => <Button {...args}>{label}</Button>,
|
|
};
|
|
|
|
export const Secondary: Story = {
|
|
args: {
|
|
color: 'secondary',
|
|
},
|
|
render: (args) => <Button {...args}>{label}</Button>,
|
|
};
|
|
|
|
export const Positive: Story = {
|
|
args: {
|
|
color: 'positive',
|
|
},
|
|
render: (args) => <Button {...args}>{label}</Button>,
|
|
};
|
|
|
|
export const Negative: Story = {
|
|
args: {
|
|
color: 'negative',
|
|
},
|
|
render: (args) => <Button {...args}>{label}</Button>,
|
|
};
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
disabled: true,
|
|
},
|
|
render: (args) => <Button {...args}>{label}</Button>,
|
|
};
|
|
|
|
export const Outlined: Story = {
|
|
args: {
|
|
color: 'primary',
|
|
variant: 'outlined',
|
|
},
|
|
render: (args) => <Button {...args}>{label}</Button>,
|
|
};
|
|
|
|
export const Text: Story = {
|
|
args: {
|
|
variant: 'text',
|
|
},
|
|
render: (args) => <Button {...args}>{label}</Button>,
|
|
};
|
|
|
|
export const LabelAsIcon: Story = {
|
|
args: {},
|
|
render: (args) => (
|
|
<Button {...args}>
|
|
<DeleteIcon />
|
|
</Button>
|
|
),
|
|
};
|
|
|
|
export const LabelWithIcon: Story = {
|
|
args: {
|
|
LeftIcon: (props) => <LogOutIcon />,
|
|
},
|
|
render: (args) => <Button {...args}>Logout</Button>,
|
|
};
|
|
|
|
export const ExtraLargeSize: Story = {
|
|
args: {
|
|
size: 'xl',
|
|
},
|
|
render: (args) => <Button {...args}>ExtraLarge</Button>,
|
|
};
|
|
|
|
export const LargeSize: Story = {
|
|
args: {
|
|
size: 'lg',
|
|
},
|
|
render: (args) => <Button {...args}>Large</Button>,
|
|
};
|
|
|
|
export const MediumSize: Story = {
|
|
args: {
|
|
size: 'md',
|
|
},
|
|
render: (args) => <Button {...args}>Medium</Button>,
|
|
};
|
|
|
|
export const SmallSize: Story = {
|
|
args: {
|
|
size: 'sm',
|
|
},
|
|
render: (args) => <Button {...args}>Small</Button>,
|
|
};
|