@mozaic-ds/vue/src/components/iconbutton/MIconButton.stories.ts

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

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

import MIconButton from './MIconButton.vue';
import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
import ChevronRight32 from '@mozaic-ds/icons-vue/src/components/ChevronRight32/ChevronRight32.vue';

const meta: Meta<typeof MIconButton> = {
  title: 'Action/Icon Button',
  component: MIconButton,
  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: {
    icon: '<ChevronRight24/>',
    ariaLabel: 'Go to next page',
  },
  argTypes: {
    ariaLabel: {
      table: {
        disable: true,
      },
    },
    $slots: {
      table: {
        disable: true,
      },
    },
  },
  render: (args) => ({
    components: { MIconButton, ChevronRight20, ChevronRight24, ChevronRight32 },
    setup() {
      return { args };
    },
    template: `
      <MIconButton 
        v-bind="args"
      >
        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
      </MIconButton>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MIconButton>;

export const Standard: Story = {};

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

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

export const SizeS: Story = {
  args: {
    size: 's',
    icon: '<ChevronRight20/>',
  },
};

export const SizeL: Story = {
  args: {
    size: 'l',
    icon: '<ChevronRight32/>',
  },
};