@mozaic-ds/vue/src/components/overlay/MOverlay.stories.ts

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

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

const meta: Meta<typeof MOverlay> = {
  title: 'Overlay/Overlay',
  component: MOverlay,
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: { height: '400px' },
      description: {
        component:
          'An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.',
      },
    },
  },
  args: {
    isVisible: true,
  },
  argTypes: {
    '--overlay-z-index': {
      description: 'Customise the z-index of the overlay',
      control: false,
      table: {
        category: 'Custom Properties',
        type: { summary: 'number' },
        defaultValue: { summary: '2' },
      },
    },
  },
  render: (args) => ({
    components: { MOverlay },
    setup() {
      return { args };
    },
    template: `
      <MOverlay v-bind="args">
        <template v-if="${'default' in args}" v-slot>${args.default}</template>
      </MOverlay>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MOverlay>;

export const Default: Story = {};