@mekari/mekari-ui-vue/src/components/Button/stories/config/index.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import { colorList, iconList } from '@/.storybook/story-config';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-card.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-alert.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-button.css';

export const buttonColors = [...colorList, 'ghost'];

export const argTypes = {
  // Props
  variant: {
    control: {
      type: 'select',
      options: ['default', 'icon-left', 'icon-center', 'icon-right', 'icon-only', 'loading'],
    },
    table: {
      type: {
        summary: 'string',
        detail: '"default" | "icon-left" | "icon-center" | "icon-right" | "icon-only" | "loading"',
      },
    },
    description: 'Set the variant of the button. On `icon-only` variant, the props `size` will not have effect, and props `theme` can only use `secondary`. Outside `secondary`, the theme will be set to `ghost`.',
  },
  size: {
    control: {
      type: 'select',
      options: ['sm', 'default', 'lg'],
    },
    defaultValue: 'default',
    description: 'Set the size of the button. Variant `icon-only` does not use `size` props.',
  },
  theme: {
    control: {
      type: 'select',
      options: [...buttonColors],
    },
    description: 'Set the theme color of the button. Variant `icon-only` just accept `secondary`. The other theme will be set to `ghost`.',
  },
  iconVariant: {
    control: {
      type: 'select',
      options: [...iconList],
    },
    defaultValue: 'activity',
    description: 'Set the variant of the icon.',
  },
  buttonType: {
    control: {
      type: 'select',
      options: ['button', 'submit', 'reset'],
    },
    table: {
      type: {
        summary: 'string',
        detail: '"button" | "submit" | "reset"',
      },
    },
    defaultValue: 'button',
    description: 'Set the type of the button.',
  },
  label: {
    control: { type: 'text' },
    defaultValue: 'Button',
    description: 'Button can have text from props label. Can also use default slot.',
  },
  disabled: {
    description: 'Set the `disabled` attribute on button.',
    table: {
      type: {
        summary: 'boolean',
        detail: 'true | false',
      },
    },
    defaultValue: false,
  },
  // Slots
  default: {
    control: { type: null },
    table: {
      type: {
        summary: 'String',
      },
      defaultValue: { summary: '' },
    },
    description: 'Button can have text from default slot. Can also use props label.',
  },
};

const codeTemplate = `
<template>
  // Below is the example of button with tooltip
  <m-tooltip
    v-if="variant === 'icon-only'"
    trigger="hover"
    content="Content"
    target="button-id"
  />
  <m-button
    :size="size"
    :variant="variant"
    :theme="theme"
    :iconVariant="iconVariant"
    :buttonType="buttonType"
    :label="label"
    :disabled="disabled"
    id="button-id"
  >
    Button
  </m-button>
</template>
`;

export const parameters = {
  docs: { source: { code: codeTemplate } },
};