Storybook: improve Button stories

This commit is contained in:
Alex Gleason 2023-02-02 21:53:26 -06:00
parent deb1920c03
commit dd7b6af97d
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7

View file

@ -5,10 +5,11 @@ import Button from 'soapbox/components/ui/button/button';
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default { export default {
title: 'Example/Button', title: 'UI/Button',
component: Button, component: Button,
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
argTypes: { argTypes: {
text: { type: 'string', defaultValue: 'Button' },
theme: { theme: {
control: 'select', control: 'select',
options: [ options: [
@ -21,7 +22,20 @@ export default {
'outline', 'outline',
'muted', 'muted',
], ],
defaultValue: 'primary',
}, },
size: {
control: 'select',
options: [
'xs',
'sm',
'md',
'lg',
],
defaultValue: 'md',
},
disabled: { type: 'boolean', defaultValue: false },
onClick: { action: 'onClick' },
}, },
} as ComponentMeta<typeof Button>; } as ComponentMeta<typeof Button>;
@ -32,22 +46,19 @@ export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args // More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = { Primary.args = {
theme: 'primary', theme: 'primary',
text: 'Button',
}; };
export const Secondary = Template.bind({}); export const Secondary = Template.bind({});
Secondary.args = { Secondary.args = {
text: 'Button', theme: 'secondary',
}; };
export const Large = Template.bind({}); export const Large = Template.bind({});
Large.args = { Large.args = {
size: 'lg', size: 'lg',
text: 'Button',
}; };
export const Small = Template.bind({}); export const Small = Template.bind({});
Small.args = { Small.args = {
size: 'sm', size: 'sm',
text: 'Button',
}; };