2021-11-16 12:33:01 +00:00
|
|
|
import { Meta, Story } from '@storybook/react';
|
|
|
|
import { PropsWithChildren } from 'react';
|
2022-07-06 14:05:00 +00:00
|
|
|
import { Download } from 'react-feather';
|
2021-11-16 12:33:01 +00:00
|
|
|
|
|
|
|
import { Button, Props } from './Button';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
component: Button,
|
|
|
|
title: 'Components/Buttons/Button',
|
|
|
|
} as Meta;
|
|
|
|
|
2022-08-10 04:12:20 +00:00
|
|
|
export function DifferentTheme() {
|
|
|
|
const colors = [
|
|
|
|
'primary',
|
|
|
|
'secondary',
|
|
|
|
'danger',
|
|
|
|
'dangerlight',
|
|
|
|
'light',
|
|
|
|
'link',
|
|
|
|
] as const;
|
|
|
|
|
|
|
|
const themes = ['light', 'dark', 'highcontrast'] as const;
|
|
|
|
const states = ['', 'disabled'] as const;
|
|
|
|
return (
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Color/Theme</th>
|
|
|
|
{themes.map((theme) => (
|
|
|
|
<th key={theme} className="text-center">
|
|
|
|
{theme}
|
|
|
|
</th>
|
|
|
|
))}
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{colors.map((color) => (
|
|
|
|
<tr key={color}>
|
|
|
|
<td>{color}</td>
|
|
|
|
{themes.map((theme) => (
|
|
|
|
<td
|
|
|
|
key={theme}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
// @ts-ignore
|
|
|
|
theme={theme}
|
|
|
|
className="p-5"
|
|
|
|
style={{ background: 'var(--bg-body-color)' }}
|
|
|
|
>
|
|
|
|
{states.map((state) => (
|
|
|
|
<Button
|
|
|
|
color={color}
|
|
|
|
key={state}
|
|
|
|
disabled={state === 'disabled'}
|
|
|
|
>
|
|
|
|
{state} {color} button
|
|
|
|
</Button>
|
|
|
|
))}
|
|
|
|
</td>
|
|
|
|
))}
|
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-11-16 12:33:01 +00:00
|
|
|
function Template({
|
|
|
|
onClick,
|
|
|
|
color,
|
|
|
|
size,
|
|
|
|
disabled,
|
|
|
|
}: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
|
|
|
|
return (
|
|
|
|
<Button onClick={onClick} color={color} size={size} disabled={disabled}>
|
2022-07-06 14:05:00 +00:00
|
|
|
Primary Button
|
2021-11-16 12:33:01 +00:00
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
|
|
|
|
Primary.args = {
|
|
|
|
color: 'primary',
|
|
|
|
size: 'small',
|
|
|
|
disabled: false,
|
|
|
|
onClick: () => {
|
|
|
|
alert('Hello Button!');
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
export function Disabled() {
|
|
|
|
return (
|
|
|
|
<Button color="primary" onClick={() => {}} disabled>
|
|
|
|
Disabled Button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Danger() {
|
|
|
|
return (
|
|
|
|
<Button color="danger" onClick={() => {}}>
|
|
|
|
Danger Button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-07-06 14:05:00 +00:00
|
|
|
export function ButtonIcon() {
|
|
|
|
return (
|
|
|
|
<Button color="primary" onClick={() => {}} icon={Download}>
|
|
|
|
Button with an icon
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ButtonIconLarge() {
|
|
|
|
return (
|
|
|
|
<Button color="primary" onClick={() => {}} icon={Download} size="large">
|
|
|
|
Button with an icon
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ButtonIconMedium() {
|
|
|
|
return (
|
|
|
|
<Button color="primary" onClick={() => {}} icon={Download} size="medium">
|
|
|
|
Button with an icon
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ButtonIconXSmall() {
|
|
|
|
return (
|
|
|
|
<Button color="primary" onClick={() => {}} icon={Download} size="xsmall">
|
|
|
|
Button with an icon
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-11-16 12:33:01 +00:00
|
|
|
export function Default() {
|
|
|
|
return (
|
|
|
|
<Button color="default" onClick={() => {}}>
|
2022-07-06 14:05:00 +00:00
|
|
|
Default
|
2021-11-16 12:33:01 +00:00
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Link() {
|
|
|
|
return (
|
|
|
|
<Button color="link" onClick={() => {}}>
|
|
|
|
Link Button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function XSmall() {
|
|
|
|
return (
|
|
|
|
<Button color="primary" onClick={() => {}} size="xsmall">
|
|
|
|
XSmall Button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Small() {
|
|
|
|
return (
|
|
|
|
<Button color="primary" onClick={() => {}} size="small">
|
|
|
|
Small Button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Large() {
|
|
|
|
return (
|
|
|
|
<Button color="primary" onClick={() => {}} size="large">
|
|
|
|
Large Button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|