| 1 | import { fn } from '@storybook/test'; |
| 2 | import { Button } from './Button'; |
| 3 | |
| 4 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export |
| 5 | export default { |
| 6 | title: 'Example/Button', |
| 7 | component: Button, |
| 8 | parameters: { |
| 9 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout |
| 10 | layout: 'centered', |
| 11 | }, |
| 12 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs |
| 13 | tags: ['autodocs'], |
| 14 | // More on argTypes: https://storybook.js.org/docs/api/argtypes |
| 15 | argTypes: { |
| 16 | backgroundColor: { control: 'color' }, |
| 17 | }, |
| 18 | // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args |
| 19 | args: { onClick: fn() }, |
| 20 | }; |
| 21 | |
| 22 | // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args |
| 23 | export const Primary = { |
| 24 | args: { |
| 25 | primary: true, |
| 26 | label: 'Button', |
| 27 | }, |
| 28 | }; |
| 29 | |
| 30 | export const Secondary = { |
| 31 | args: { |
| 32 | label: 'Button', |
| 33 | }, |
| 34 | }; |
| 35 | |
| 36 | export const Large = { |
| 37 | args: { |
| 38 | size: 'large', |
| 39 | label: 'Button', |
| 40 | }, |
| 41 | }; |
| 42 | |
| 43 | export const Small = { |
| 44 | args: { |
| 45 | size: 'small', |
| 46 | label: 'Button', |
| 47 | }, |
| 48 | }; |