@mekari/mekari-ui-vue/src/components/Link/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-tooltip.css';

export const argTypesDefault = {
  // Props
  link: {
    control: {
      type: 'text',
    },
    defaultValue: 'Link',
    description: 'Set the text of the link.',
  },
  href: {
    table: {
      type: {
        summary: 'string',
      },
    },
    defaultValue: null,
    description: 'Denotes the target URL of the link for standard a links',
  },
  rel: {
    table: {
      type: {
        summary: 'string',
      },
    },
    defaultValue: null,
    description: 'Sets the `rel` attribute on the rendered link',
  },
  target: {
    table: {
      type: {
        summary: 'string',
      },
    },
    defaultValue: '_self',
    description: 'Sets the `target` attribute on the rendered link',
  },
  active: {
    table: {
      type: {
        summary: 'boolean',
      },
    },
    defaultValue: false,
    description: 'When set to `true`, places the component in the active state with active styling',
  },
  disabled: {
    table: {
      type: {
        summary: 'boolean',
      },
    },
    defaultValue: false,
    description: 'When set to `true`, disables the component\'s functionality and places it in a disabled state',
  },
  to: {
    table: {
      type: {
        summary: 'string | object',
      },
    },
    defaultValue: null,
    description: '<router-link> prop: Denotes the target route of the link. When clicked, the value of the to prop will be passed to `router.push()` internally, so the value can be either a string or a Location descriptor object',
  },
  append: {
    table: {
      type: {
        summary: 'boolean',
      },
    },
    defaultValue: false,
    description: '<router-link> prop: Setting append prop always appends the relative path to the current path',
  },
  replace: {
    table: {
      type: {
        summary: 'boolean',
      },
    },
    defaultValue: false,
    description: '<router-link> prop: Setting the replace prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record',
  },
  event: {
    table: {
      type: {
        summary: 'string | array',
      },
    },
    defaultValue: 'click',
    description: '<router-link> prop: Specify the event that triggers the link. In most cases you should leave this as the default',
  },
  activeClass: {
    table: {
      type: {
        summary: 'string',
      },
    },
    description: '<router-link> prop: Configure the active CSS class applied when the link is active. Typically you will want to set this to class name `active`',
  },
  exact: {
    table: {
      type: {
        summary: 'boolean',
      },
    },
    defaultValue: false,
    description: '<router-link> prop: The default active class matching behavior is inclusive match. Setting this prop forces the mode to exactly match the route',
  },
  exactActiveClass: {
    table: {
      type: {
        summary: 'string',
      },
    },
    description: '<router-link> prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name `active`',
  },
  routerTag: {
    table: {
      type: {
        summary: 'string',
      },
    },
    defaultValue: 'a',
    description: '<router-link> prop: Specify which tag to render, and it will still listen to click events for navigation. `router-tag` translates to the tag prop on the final rendered `<router-link>`. Typically you should use the default value',
  },
  prefetch: {
    table: {
      type: {
        summary: 'boolean',
      },
    },
    defaultValue: null,
    description: '<nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`',
  },
  noPrefetch: {
    table: {
      type: {
        summary: 'boolean',
      },
    },
    defaultValue: false,
    description: '<nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `no-prefetch` will disabled this feature for the specific link',
  },
  routerComponentName: {
    table: {
      type: {
        summary: 'string',
      },
    },
    description: '<b-link> prop: BootstrapVue auto detects between `<router-link>` and `<nuxt-link>`. In cases where you want to use a 3rd party link component based on `<router-link>`, set this prop to the component name. e.g. set it to `g-link` if you are using Gridsome (note only `<router-link>` specific props are passed to the component)',
  },
  // Event
  click: {
    table: {
      type: {
        summary: null,
      },
    },
    description: 'After clicked, button will trigger `$emit(\'click\', $event)`.',
  },
  // Slot
  default: {
    table: {
      type: {
        summary: 'string',
      },
      defaultValue: {
        summary: '',
      },
    },
    description: 'Set the text of the link.',
  },
};

const codeDefault = `
<m-link>
  Link
</m-link>
`;

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