@mozaic-ds/vue/src/components/tile/MTile.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MTile from './MTile.vue';
import MIconButton from '../iconbutton/MIconButton.vue';
import {
  OptionsVertical24,
  Copy20,
  ArrowTopRight20,
  Download20,
  Trash20,
} from '@mozaic-ds/icons-vue';
import MActionListbox from '../actionlistbox/MActionListbox.vue';

const meta: Meta<typeof MTile> = {
  title: 'Content/Tile/Base',
  component: MTile,
  parameters: {
    docs: {
      description: {
        component:
          'A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.',
      },
    },
  },
  args: {
    appearance: 'primary',
    bordered: true,
    default: `
      <div class="placeholder-slot">
        Insert a form element here to replace this slot.
      </div>
    `,
  },
  render: (args) => ({
    components: {
      MTile,
      MIconButton,
      OptionsVertical24,
      MActionListbox,
      Copy20,
      ArrowTopRight20,
      Download20,
      Trash20,
    },
    setup() {
      const items = [
        {
          label: 'Duplicate',
          icon: Copy20,
          disabled: true,
        },
        {
          label: 'Move to...',
          icon: ArrowTopRight20,
        },
        {
          label: 'Download',
          icon: Download20,
        },
        {
          label: 'Delete',
          icon: Trash20,
          appearance: 'danger',
          divider: true,
        },
      ];
      return { args, items };
    },
    template: `
      <MTile v-bind="args">
        ${args.default}
        <template v-if="args.action" #action>
          ${args.action}
        </template>
      </MTile>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MTile>;

export const Default: Story = {};

export const WithAction: Story = {
  args: {
    action: `
      <MActionListbox position="left" :items="items">
        <template #activator="{id}">
          <MIconButton
            :popovertarget="id"
            ghost
            class="mc-tile__action-button"
            aria-label="Action button"
          >
            <template #icon>
              <OptionsVertical24 />
            </template>
          </MIconButton>
        </template>
      </MActionListbox>
    `,
  },
};