@mekari/mekari-ui-vue/src/components/Alert/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 '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-button.css';

const argTypesDefault = {
  // Props
  type: {
    control: {
      type: 'select',
      options: ['success', 'info', 'warning', 'error'],
    },
    defaultValue: 'success',
  },
  icon: {
    control: {
      type: 'select',
      options: [null, 'default', 'success', 'info', 'warning', 'error', 'success-fill', 'info-fill', 'warning-fill', 'error-fill'],
    },
    defaultValue: 'default',
    description: 'Specify the icon for the alert. Set to `default` to make it follow its type.',
  },
  size: {
    control: {
      type: 'select',
      options: [null, 'small'],
    },
  },
  title: {
    control: { type: 'text' },
    defaultValue: 'Success message',
    description: 'Specify the title of the alert',
  },
  description: {
    control: { type: 'text' },
    defaultValue: 'Explanation messages to inform users what they should do goes here.',
    description: 'Specify the message of the alert',
  },
  toast: {
    table: {
      type: {
        summary: 'boolean',
        detail: 'true | false',
      },
    },
    defaultValue: false,
    description: 'Should only be set to `false`',
  },
  dismissible: {
    table: {
      type: {
        summary: 'boolean',
        detail: 'true | false',
      },
    },
    defaultValue: false,
    description: 'Set the alert component as dismissible',
  },
  prefixClass: {
    description: 'Prefix class for alert component',
  },
  linksText: {
    type: 'arrayOfShape',
    control: { type: 'object' },
    description: 'Set the text alert link. The alert link can be added up to two links.',
    table: {
      type: {
        summary: 'Array',
        detail: '[] => ()',
      },
    },
  },
  linksHref: {
    type: 'arrayOfShape',
    control: { type: 'object' },
    description: 'Set the href attribute of alert link (`<a>`). The alert link can be added up to two links.',
    table: {
      type: {
        summary: 'Array',
        detail: '[] => ()',
      },
    },
  },
  linksTarget: {
    type: 'arrayOfShape',
    control: { type: 'object' },
    description: 'Set the target attribute of alert link (`<a>`). The alert link can be added up to two links.',
    table: {
      type: {
        summary: 'Array',
        detail: '[] => ()',
      },
    },
  },
  // Events
  close: {
    table: {
      type: {
        summary: null,
      },
    },
    description: 'Will be triggered if the alert is dismissible and the close icon is clicked',
  },
  // Slots
  link: {
    control: { type: null },
    table: {
      type: {
        summary: 'String',
      },
      defaultValue: { summary: '<a class="alert-link" href="#">Link</a>' },
    },
    description: 'Add your own button/anchor link if necessary. It should has `alert-link` class attached to it.',
  },
};

export default argTypesDefault;