@mozaic-ds/vue/src/components/breadcrumb/MBreadcrumb.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MBreadcrumb from './MBreadcrumb.vue';

const meta: Meta<typeof MBreadcrumb> = {
  title: 'Navigation/Breadcrumb',
  component: MBreadcrumb,
  parameters: {
    docs: {
      description: {
        component:
          'A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.',
      },
    },
  },
  args: {
    links: [
      {
        label: 'Home',
        href: '#',
        router: true,
      },
      {
        label: 'level 01',
        href: '#',
        router: true,
      },
      {
        label: 'level 02',
        href: '#',
        router: true,
      },
      {
        label: 'Current Page',
        href: '#',
        router: true,
      },
    ],
  },
  render: (args) => ({
    components: { MBreadcrumb },
    setup() {
      return { args };
    },
    template: `
      <MBreadcrumb v-bind="args"></MBreadcrumb>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MBreadcrumb>;

export const Default: Story = {};

export const Inverse: Story = {
  globals: {
    backgrounds: { value: 'inverse' },
  },
  args: { appearance: 'inverse' },
};

export const WithoutRouter: Story = {
  args: {
    links: [
      {
        label: 'Home',
        href: '#',
      },
      {
        label: 'level 01',
        href: '#',
      },
      {
        label: 'level 02',
        href: '#',
      },
      {
        label: 'Current Page',
        href: '#',
      },
    ],
  },
};