storybook/docs/snippets/vue/button-story-default-docs-code.3.js.mdx
2021-11-09 01:41:54 +00:00

47 lines
1.1 KiB
Plaintext

```js
// Button.stories.js
import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
};
//👇 Some function to demonstrate the behavior
const someFunction = (someValue) => {
return `i am a ${someValue}`;
};
export const ExampleStory = (args) => {
//👇 Assigns the function result to a variable
const functionResult = someFunction(args.label);
return {
components: { Button },
setup() {
//👇 The args will now be passed down to the template
return {
args: {
...args,
//👇 Replaces arg variable with the override (without the need of mutation)
label: functionResult,
},
};
},
template: '<Button v-bind="args" />',
};
};
ExampleStory.args = {
primary: true,
size: 'small',
label: 'button',
};
```