Storybook: improve Button stories
This commit is contained in:
parent
deb1920c03
commit
dd7b6af97d
1 changed files with 16 additions and 5 deletions
|
@ -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',
|
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue