@mozaic-ds/vue/src/components/popover/MPopover.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 MPopover from './MPopover.vue';
import MButton from '../button/MButton.vue';
import MLink from '../link/MLink.vue';
import { ExternalLink24 } from '@mozaic-ds/icons-vue';

const meta: Meta<typeof MPopover> = {
  title: 'Overlay/Popover',
  component: MPopover,
  tags: ['v2'],
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'A popover is a small overlay that appears above other content, typically triggered by a user interaction such as clicking or hovering over an element. It is used to display contextual information, additional actions, or interactive content without navigating away from the main interface. Popovers often include a title, description, and action buttons, and they automatically close when clicking outside or selecting an action.',
      },
    },
  },
  args: {
    title: 'Title',
    description: 'Description',
    footer: `
      <MButton
        size="s"
        aria-label="Popover action button"
      >
        Button label
      </MButton>
    `,
    activator: `
      <MButton :popovertarget="id">
        Activator
      </MButton>
    `,
  },
  render: (args) => ({
    components: { MPopover, MButton, MLink, ExternalLink24 },
    setup() {
      const handleAction = action('action');

      return { args, handleAction };
    },
    template: `
      <MPopover
        v-bind="args"
        @action="handleAction"
      >
        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
        <template #activator="{ id }" v-slot:activator>${args.activator}</template>
      </MPopover>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MPopover>;

export const Default: Story = {};

export const Inverse = {
  args: {
    appearance: 'inverse',
    footer: `
      <MLink appearance="inverse" href="#" size="s" icon-position="right">
        Stand-alone link
        <template #icon><ExternalLink24 /></template>
      </MLink>
      <MButton appearance="inverse" size="s" aria-label="Popover action button">
        Button label
      </MButton>
    `,
  },
};

export const ValidationOnly = {
  args: {
    footer: `
      <MButton size="s" aria-label="Popover action button">
        Button label
      </MButton>
    `,
  },
};

export const TwoOptions = {
  args: {
    footer: `
      <MButton size="s" outlined aria-label="Popover action button">
        Button label
      </MButton>
      <MButton size="s" aria-label="Popover action button">
        Button label
      </MButton>
    `,
  },
};

export const Link = {
  args: {
    footer: `
      <MLink href="#" size="s" icon-position="right">
        Stand-alone link
        <template #icon><ExternalLink24 /></template>
      </MLink>
      <MButton
        size="s"
        aria-label="Popover action button"
      >
        Button label
      </MButton>
    `,
  },
};

export const Navigation = {
  args: {
    footer: `
      <MLink href="#" size="s" icon-position="right">
        Stand-alone link
        <template #icon><ExternalLink24 /></template>
      </MLink>
    `,
  },
};