@mozaic-ds/vue/src/components/link/MLink.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3';
import MLink from './MLink.vue';
import ChevronLeft24 from '@mozaic-ds/icons-vue/src/components/ChevronLeft24/ChevronLeft24.vue';
import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';

const meta: Meta<typeof MLink> = {
  title: 'Navigation/Link (stand alone)',
  component: MLink,
  parameters: {
    docs: {
      description: {
        component:
          'A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.',
      },
    },
  },
  args: {
    default: 'Stand-alone link',
    href: '#',
  },
  argTypes: {
    $slots: {
      table: {
        disable: true,
      },
    },
  },
  render: (args) => ({
    components: { MLink, ChevronRight24, ChevronLeft24 },
    setup() {
      return { args };
    },
    template: `
      <MLink v-bind="args">
        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
        ${args.default}
      </MLink>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MLink>;

export const Standard: Story = {};

export const ExternalLink: Story = {
  name: 'For External Link',
  args: {
    href: 'https://example.com',
  },
};

export const InternalLink: Story = {
  name: 'For Internal Link with Vue Router',
  args: {
    href: '/about',
    router: true,
  },
};

export const Secondary: Story = {
  args: { appearance: 'secondary' },
};

export const Accent: Story = {
  args: { appearance: 'accent' },
};

export const Inverse: Story = {
  parameters: {
    backgrounds: {
      default: 'Inverse',
    },
  },
  args: { appearance: 'inverse' },
};

export const Size: Story = {
  args: { size: 'm' },
};

export const Inline: Story = {
  args: { inline: true },
};

export const IconLeft: Story = {
  args: {
    iconPosition: 'left',
    icon: '<ChevronLeft24/>',
  },
};

export const IconRight: Story = {
  args: {
    iconPosition: 'right',
    icon: '<ChevronRight24/>',
  },
};