@mozaic-ds/vue/src/components/tag/MTag.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 { FeelingSatisfied20 } from '@mozaic-ds/icons-vue';
import MTag from './MTag.vue';

const meta: Meta<typeof MTag> = {
  title: 'Indicators/Tag',
  component: MTag,
  parameters: {
    docs: {
      description: {
        component:
          'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
      },
    },
  },
  args: {
    label: 'Tag label',
  },
  render: (args) => ({
    components: { MTag, FeelingSatisfied20 },
    setup() {
      const handleUpdate = action('update:modelValue');
      const handleRemoveTag = action('remove-tag');

      return { args, handleUpdate, handleRemoveTag };
    },
    template: `
      <MTag
        v-bind="args"
        @update:modelValue="handleUpdate"
        @remove-tag="handleRemoveTag"
        v-model="args.modelValue"
      >
        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
      </MTag>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MTag>;

export const Default: Story = {};

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

export const Icon: Story = {
  args: {
    icon: '<FeelingSatisfied20/>',
  },
};

export const Interactive: Story = {
  args: { type: 'interactive' },
};

export const Disabled: Story = {
  args: {
    type: 'interactive',
    disabled: true,
  },
};

export const Contextualised: Story = {
  args: {
    type: 'contextualised',
    contextualisedNumber: 99,
  },
};

export const Removable: Story = {
  args: {
    type: 'removable',
    id: 'tagId',
  },
};

export const Selectable: Story = {
  args: {
    type: 'selectable',
    modelValue: true,
  },
};