@mozaic-ds/vue/src/components/starrating/MStarRating.stories.ts

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

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

const meta: Meta<typeof MStarRating> = {
  title: 'Indicators/Star rating',
  component: MStarRating,
  parameters: {
    docs: {
      description: {
        component:
          'A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.',
      },
    },
  },
  args: {
    modelValue: 3.5,
    appearance: 'accent',
    readonly: true,
  },
  render: (args) => ({
    components: { MStarRating },
    setup() {
      return { args };
    },
    template: `
      <MStarRating v-model="args.modelValue" v-bind="args"></MStarRating>
    `,
  }),
};
export default meta;

type Story = StoryObj<typeof MStarRating>;

export const Default: Story = {};

export const AsInput: Story = {
  args: {
    readonly: false,
    modelValue: 0,
  },
};

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

export const SizeL: Story = {
  args: {
    size: 'l',
  },
};

export const StandardAppearance: Story = {
  args: {
    appearance: 'standard',
  },
};

export const WithText: Story = {
  args: {
    appearance: 'accent',
    text: 'Additional text',
  },
};

export const WithLink: Story = {
  args: {
    appearance: 'accent',
    text: 'Additional text',
    href: '#',
  },
};

export const CompactModeWithText: Story = {
  args: {
    compact: true,
    appearance: 'accent',
    text: '(35)',
  },
};