@mozaic-ds/vue/src/components/drawer/MDrawer.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 MDrawer from './MDrawer.vue';
import MButton from '../button/MButton.vue';
import { ref, watch } from 'vue';

const meta: Meta<typeof MDrawer> = {
  title: 'Overlay/Drawer',
  component: MDrawer,
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: { height: '600px' },
      description: {
        component:
          'A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.',
      },
    },
  },
  args: {
    open: true,
    title: 'Drawer title (optionnal)',
    contentTitle: 'Content title',
    default: `
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
        odit, eligendi non, minus soluta dicta, excepturi harum tempora
        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
        temporibus repellendus sed.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
        odit, eligendi non, minus soluta dicta, excepturi harum tempora
        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
        temporibus repellendus sed.
      </p>
    `,
    footer: `
      <MButton>Button label</MButton>
      <MButton ghost>Button label</MButton>
    `,
  },
  render: (args) => ({
    components: { MDrawer, MButton },
    setup() {
      const handleUpdate = action('update:open');
      const openState = ref(args.open);

      watch(
        () => args.open,
        (val) => {
          openState.value = val;
        },
      );

      const onUpdateOpen = (val: boolean) => {
        openState.value = val;
        handleUpdate(val);
        args.open = val;
      };

      return { args, openState, onUpdateOpen };
    },
    template: `
      <MDrawer 
        v-bind="args"
        @update:open="onUpdateOpen"
        v-model:open="openState"
      >
        <template v-if="${'default' in args}" v-slot>${args.default}</template>
        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
      </MDrawer>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MDrawer>;

export const Default: Story = {
  args: {
    default: `
      <!-- All the code below must be replaced by a form element. -->
      <div class="content-slot content-slot-full">
        Insert a form element here to replace this slot.
      </div>
    `,
  },
};

export const Left = {
  args: {
    position: 'left',
  },
};

export const Back = {
  args: {
    back: true,
  },
};

export const ValidationOnly = {
  args: {
    footer: `
      <MButton>Button label</MButton>
    `,
  },
};

export const TwoOptions = {
  args: {
    footer: `
      <MButton>Button label</MButton>
      <MButton outlined>Button label</MButton>
    `,
  },
};

export const Cancel = {
  args: {
    extended: true,
    footer: `
      <MButton>Button label</MButton>
      <MButton outlined>Button label</MButton>
      <MButton ghost>Button label</MButton>
    `,
  },
};