@mozaic-ds/vue/src/components/accordionlist/MAccordionList.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 MAccordionList from './MAccordionList.vue';
import MAccordionListItem from '../accordionlistitem/MAccordionListItem.vue';
import { Wrench32, Project32, Sharpening32 } from '@mozaic-ds/icons-vue';

const meta: Meta<typeof MAccordionList> = {
  title: 'Content/Accordion list',
  component: MAccordionList,
  parameters: {
    docs: {
      description: {
        component:
          'An Accordion List is a component that organizes content into collapsible sections, allowing users to show or hide related information within a vertically stacked layout. This structure helps optimize space and improve readability by displaying only relevant content when needed. Accordion Lists are commonly used in FAQs, settings menus, and structured content navigation to enhance user experience and reduce visual clutter.',
      },
    },
  },
  args: {
    modelValue: ['1'],
    default: `
      <MAccordionListItem id="1" title="How does the delivery work?">
        <p>
          Delivery is completed within 2 to 5 business days. You will receive a confirmation email with a tracking number as soon as your order is shipped.
        </p>
      </MAccordionListItem>

      <MAccordionListItem id="2" title="What payment methods are accepted?">
        <p>
          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
        </p>
      </MAccordionListItem>

      <MAccordionListItem id="3" title="Can I return an item?">
        <p>
          Yes, you have 30 days to return an item in its original condition. Return shipping costs are at your expense unless the product is defective.
        </p>
      </MAccordionListItem>
    `,
  },
  render: (args) => ({
    components: {
      MAccordionList,
      MAccordionListItem,
      Wrench32,
      Project32,
      Sharpening32,
    },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const Default: Story = {};

export const Ghost: Story = {
  args: {
    appearance: 'ghost',
  },
};

export const WithIcons: Story = {
  args: {
    default: `
      <MAccordionListItem id="1" title="How does the delivery work?" :icon="Wrench32">
        <p>
          Delivery is completed within 2 to 5 business days. You will receive a confirmation email with a tracking number as soon as your order is shipped.
        </p>
      </MAccordionListItem>

      <MAccordionListItem id="2" title="What payment methods are accepted?" :icon="Project32">
        <p>
          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
        </p>
      </MAccordionListItem>

      <MAccordionListItem id="3" title="Can I return an item?" :icon="Sharpening32">
        <p>
          Yes, you have 30 days to return an item in its original condition. Return shipping costs are at your expense unless the product is defective.
        </p>
      </MAccordionListItem>
    `,
  },
};

export const WithSubtitle: Story = {
  args: {
    default: `
      <MAccordionListItem id="1" title="How does the delivery work?" subtitle="Shipping & tracking information">
        <p>
          Delivery is completed within 2 to 5 business days. You will receive a confirmation email with a tracking number as soon as your order is shipped.
        </p>
      </MAccordionListItem>

      <MAccordionListItem id="2" title="What payment methods are accepted?" subtitle="Payments & billing options">
        <p>
          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
        </p>
      </MAccordionListItem>

      <MAccordionListItem id="3" title="Can I return an item?" subtitle="Returns & refund policy">
        <p>
          Yes, you have 30 days to return an item in its original condition. Return shipping costs are at your expense unless the product is defective.
        </p>
      </MAccordionListItem>
    `,
  },
};

export const WithSingleBehavior: Story = {
  args: {
    behavior: 'single',
  },
};