WL-32 - Install Storybook
This commit is contained in:
39
stories/Button.stories.js
Normal file
39
stories/Button.stories.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: MyButton,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { MyButton },
|
||||
template: '<my-button @onClick="onClick" v-bind="$props" />',
|
||||
});
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = {
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Large = Template.bind({});
|
||||
Large.args = {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Small = Template.bind({});
|
||||
Small.args = {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
};
|
||||
Reference in New Issue
Block a user