storybook/docs/snippets/vue/button-story-default-docs-code.3.js.mdx
2021-08-28 01:52:57 +01:00

48 lines
1.1 KiB
Plaintext

```js
// Button.stories.js
import Button from './Button.vue';
export default {
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: {
primary: true,
size: 'small',
label: 'button',
},
render: (args) => {
//👇 Destructure the label from the args object
const { label } = args;
//👇 Assigns the function result to a variable and pass it as a prop into the component
const functionResult = someFunction(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" />',
};
},
};
```