@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-vite';
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',
  component: MLink,
  parameters: {
    docs: {
      description: {
        component:
          'A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.',
      },
    },
  },
  args: {
    default: 'Stand-alone link',
    href: '#',
  },
  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 = {
  globals: {
    backgrounds: { value: '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/>',
  },
};