fbredius/storybook

View on GitHub
docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx

Summary

Maintainability
Test Coverage
```md
<!-- Button.stories.mdx -->

import { Meta, Story } from '@storybook/addon-docs';

import Button from './Button.vue';

<!-- 👇 Creates specific argTypes -->
<Meta
  title="Button"
  component={Button}
  argTypes={{
    backgroundColor: {
      control: 'color',
    },
  }}
/>

<!-- 👇 Some function to demonstrate the behavior -->
export const someFunction = (someValue) => {
  return `i am a ${someValue}`;
};


<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
<Story
  name="ExampleStory"
  args={{
    primary: true,
    size: 'small',
    label: 'button',
  }} >
  {(args) => {
    const functionResult = someFunction(args.label);
    return {
      components: { Button },
      setup() {
        return {
          args: {
            ...args,
            label: functionResult,
          },
        };
      },
      template: '<Button v-bind="args" />',
    };
  }}
</Story>
```