@mozaic-ds/vue/src/components/button/MButton.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';

import MButton from './MButton.vue';
import Download24 from '@mozaic-ds/icons-vue/src/components/Download24/Download24.vue';
import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';

const meta: Meta<typeof MButton> = {
  title: 'Action/Button',
  component: MButton,
  parameters: {
    docs: {
      description: {
        component:
          'Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.',
      },
    },
  },
  args: { default: 'Button Label' },
  render: (args) => ({
    components: { MButton, Download24, ChevronRight24 },
    setup() {
      return { args };
    },
    template: `
      <MButton 
        v-bind="args"
      >
        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
        <template v-if="${'default' in args}" v-slot>${args.default}</template>
      </MButton>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MButton>;

export const Filled: Story = {};

export const Outline: Story = {
  args: { outlined: true },
};

export const Ghost: Story = {
  args: { ghost: true },
};

export const Icon: Story = {
  args: {
    iconPosition: 'left',
    icon: '<ChevronRight24/>',
  },
};

export const Loading: Story = {
  args: {
    isLoading: true,
    ariaLabel: 'Loading button',
  },
};