@mekari/mekari-ui-vue/src/components/Popover/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 '@/.storybook/story-config';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-icons.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-button.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-popover.css';

export const argTypesDefault = {
  // Props
  trigger: {
    control: {
      type: 'select',
      options: ['click', 'hover'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'click | hover',
      },
    },
    description: 'Set the trigger event that will toggle popover\'s visibiliity.',
  },
  placement: {
    control: {
      type: 'select',
      options: ['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'top-start | top | top-end | right-start | right | right-end | bottom-start | bottom | bottom-end | left-start | left | left-end',
      },
    },
    description: 'Set the placement of popover, relatively to the activator element of popover.',
  },
  content: {
    control: {
      type: 'text',
    },
    description: 'Set the content inside the popover. This props can be blank, and use slot `popover-content` instead. If slot `popover-content` is not blank, the props `content` will be ignored.',
  },
  title: {
    control: {
      type: 'text',
    },
    description: 'Set the content inside the popover. This props can be blank, and use slot `popover-content` instead. If slot `popover-content` is not blank, the props `content` will be ignored.',
  },
  target: {
    control: {
      type: 'text',
    },
    description: 'Set id of activator element of popover.',
  },
  // Slot
  default: {
    table: {
      type: {
        summary: 'string',
      },
      defaultValue: {
        summary: '',
      },
    },
    description: 'Set the content inside the popover body. This slot can be blank, and use props `content` instead. If this slot is not blank, the props `content` will be ignored.',
  },
};

const codeDefault = `
<m-popover
  :trigger="trigger"
  :placement="placement"
  :content="content"
  :popoverActivatorShadowId="popoverActivatorShadowId"
>
  <button class="btn btn-primary" :id="popoverActivatorShadowId">Popover Activator</button>
</m-popover>
`;

export const parametersDefault = {
  docs: { source: { code: codeDefault } },
};