@mozaic-ds/vue/src/components/tabs/MTabs.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';

import Mtabs from './MTabs.vue';
import { ChevronRight20, ChevronRight24 } from '@mozaic-ds/icons-vue';

const meta: Meta<typeof Mtabs> = {
  title: 'Navigation/Tabs',
  component: Mtabs,
  parameters: {
    docs: {
      description: {
        component:
          'Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.',
      },
    },
  },
  args: {
    modelValue: 'label1',
    size: 'm',
    tabs: [
      {
        id: 'label1',
        label: 'Label',
      },
      {
        id: 'label2',
        label: 'Label',
      },
      {
        id: 'label3',
        label: 'Label',
      },
      {
        id: 'label4',
        label: 'Label',
      },
    ],
  },
  render: (args) => ({
    components: { Mtabs, ChevronRight24 },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <Mtabs
        v-bind="args"
        v-model="args.modelValue"
        @update:modelValue="handleUpdate"
      ></Mtabs>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof Mtabs>;

export const Default: Story = {};

export const Small: Story = {
  args: {
    size: 's',
    tabs: [
      {
        id: 'label1',
        label: 'Label',
        icon: ChevronRight20,
      },
      {
        id: 'label2',
        label: 'Label',
        icon: ChevronRight20,
      },
      {
        id: 'label3',
        label: 'Label',
        icon: ChevronRight20,
      },
      {
        id: 'label4',
        label: 'Label',
        icon: ChevronRight20,
      },
    ],
  },
};

export const Icons: Story = {
  args: {
    tabs: [
      {
        id: 'label1',
        label: 'Label',
        icon: ChevronRight24,
      },
      {
        id: 'label2',
        label: 'Label',
        icon: ChevronRight24,
      },
      {
        id: 'label3',
        label: 'Label',
        icon: ChevronRight24,
      },
      {
        id: 'label4',
        label: 'Label',
        icon: ChevronRight24,
      },
    ],
  },
};

export const Centered: Story = {
  args: { centered: true },
};

export const NoDivider: Story = {
  args: { divider: false },
};

export const Disabled: Story = {
  args: {
    tabs: [
      {
        id: 'label1',
        label: 'Label',
      },
      {
        id: 'label2',
        label: 'Label',
      },
      {
        id: 'label3',
        label: 'Label',
        disabled: true,
      },
      {
        id: 'label4',
        label: 'Label',
        disabled: true,
      },
    ],
  },
};

export const WithBadges: Story = {
  args: {
    tabs: [
      {
        id: 'label1',
        label: 'Label',
        badge: 3,
      },
      {
        id: 'label2',
        label: 'Label',
      },
      {
        id: 'label3',
        label: 'Label',
        badge: 99,
      },
      {
        id: 'label4',
        label: 'Label',
        badge: 100,
      },
    ],
  },
};