@mozaic-ds/vue/src/components/carousel/MCarousel.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MCarousel from './MCarousel.vue';
import MLink from '../link/MLink.vue';
import ArrowNext24 from '@mozaic-ds/icons-vue/src/components/ArrowNext24/ArrowNext24.vue';

const meta: Meta<typeof MCarousel> = {
  title: 'Content/Carousel',
  component: MCarousel,
  parameters: {
    docs: {
      description: {
        component:
          'A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.',
      },
    },
  },
  argTypes: {
    'aria-labelledby': {
      table: {
        disable: true,
      },
    },
  },
  args: {
    'aria-labelledby': 'defaultCarousel',
    header:
      '<h2 class="mc-carousel__title mt-title--m" id="defaultCarousel">Title of the carousel</h2>',
    default: `
        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__1">
          <img class="free-content__image"
                src="https://picsum.photos/id/1/600/300" alt="card 1">
          <div id="free-content__1" class="free-content__title">my card1</div>
        </div>
        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__2">
          <img class="free-content__image"
                src="https://picsum.photos/id/12/600/300" alt="card 2">
          <div id="free-content__2" class="free-content__title">my card2</div>
        </div>
        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__3">
          <img class="free-content__image"
                src="https://picsum.photos/id/23/600/300" alt="card 3">
          <div id="free-content__3" class="free-content__title">my card3</div>
        </div>
        <div class="free-content" style="padding: 16px;" aria-labelledby="free-content__4">
          <img class="free-content__image"
                src="https://picsum.photos/id/34/600/300" alt="card 4">
          <div id="free-content__4" class="free-content__title">my card4</div>
        </div>
    `,
  },
  render: (args) => ({
    components: {
      MCarousel,
      MLink,
      ArrowNext24,
    },
    setup() {
      return { args };
    },
    template: `
      <MCarousel v-bind="args">
        <template v-if="${'header' in args}" v-slot:header>${args.header}</template>
        <template v-if="${'default' in args}" v-slot>${args.default}</template>
      </MCarousel>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MCarousel>;

export const Default: Story = {};

export const Subtitle: Story = {
  args: {
    'aria-labelledby': 'subtitleCarousel',
    header: `
      <h2 class="mc-carousel__title mt-title--m" id="subtitleCarousel">Title of the carousel</h2>
      <p class="mc-carousel__sub-title mt-body-m">Longer description of the carousel</p>
    `,
  },
};

export const Link: Story = {
  'aria-labelledby': 'linkCarousel',
  args: {
    header: `
      <h2 class="mc-carousel__title mt-title--m" id="linkCarousel">Title of the carousel</h2>
      <MLink href="#" iconPosition="right">
        Stand-alone link
        <template #icon><ArrowNext24/></template>
      </MLink>
    `,
  },
};