@mekari/mekari-ui-vue/src/components/Toast/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 argTypes = {
  title: {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'string',
      },
    },
    defaultValue: '',
    description: 'Set the props',
  },
  size: {
    control: {
      type: 'select',
      options: [null, 'small'],
    },
  },
  description: {
    control: {
      type: 'text',
    },
    defaultValue: 'Explanation messages to inform users what they should do goes here.',
    description: 'Specify the message of the alert',
  },
  type: {
    control: {
      type: 'select',
      options: ['success', 'info', 'warning', 'error'],
    },
    table: {
      type: {
        summary: 'string',
      },
    },
    defaultValue: 'success',
  },
  icon: {
    control: {
      type: 'select',
      options: [null, 'default', 'success', 'info', 'warning', 'error', 'success-fill', 'info-fill', 'warning-fill', 'error-fill'],
    },
    table: {
      type: {
        summary: 'string',
      },
    },
    defaultValue: 'default',
    description: 'Specify the icon for the alert. Set to `default` to make it follow its type.',
  },
  position: {
    control: {
      type: 'select',
      options: ['top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left'],
    },
    table: {
      type: {
        summary: 'string',
      },
      defaultValue: {
        summary: 'top',
      },
    },
    defaultValue: 'top',
    description: 'Set the position of toast.',
  },
  linksText: {
    type: 'arrayOfShape',
    control: { type: 'object' },
    description: 'Set the text toast link. The toast 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 toast link (`<a>`). The toast 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 toast link (`<a>`). The toast link can be added up to two links.',
    table: {
      type: {
        summary: 'Array',
        detail: '[] => ()',
      },
    },
  },
  duration: {
    control: {
      type: 'number',
    },
    table: {
      type: {
        summary: 'number',
      },
    },
    defaultValue: 3000,
    description: 'Set the duration of toast',
  },
  singleToast: {
    control: {
      type: 'boolean',
    },
    defaultValue: true,
    description: 'When set to `true`, it will clear the older toast and replace it with new one, so the toast that is shown will be the newest one only. When set to `false`, there can be a multiple toast shown at once.',
  },
  prefixClass: {
    description: 'Prefix class for alert component',
  },
  wrapperClass: {
    description: 'Add class for wrapper of toast component',
  },
};

export default argTypes;