@mozaic-ds/vue/src/components/loadingoverlay/MLoadingOverlay.stories.ts

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

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

const meta: Meta<typeof MLoadingOverlay> = {
  title: 'Overlay/Loading Overlay',
  component: MLoadingOverlay,
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: { height: '400px' },
      description: {
        component:
          'A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.',
      },
    },
  },
  args: {
    isVisible: true,
    ariaLabel: 'Page loading',
  },
  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: { MLoadingOverlay },
    setup() {
      return { args };
    },
    template: `
      <MLoadingOverlay v-bind="args"/>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MLoadingOverlay>;

export const Default: Story = {};

export const Text: Story = {
  args: {
    text: 'Insert your text here',
  },
};