@mozaic-ds/vue/src/components/divider/MDivider.stories.ts

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

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

const meta: Meta<typeof MDivider> = {
  title: 'Structure/Divider',
  component: MDivider,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.',
      },
    },
  },
  render: (args) => ({
    components: { MDivider },
    setup() {
      return { args };
    },
    template: `
      <div>
        <MDivider v-bind="args"></MDivider>
        <p style="padding: 1rem">Horizontal Divider</p>
      </div>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MDivider>;

export const Standard: Story = {};

export const Vertical: Story = {
  args: {
    orientation: 'vertical',
  },
  render: (args) => ({
    components: { MDivider },
    setup() {
      return { args };
    },
    template: `
      <div>
        <MDivider v-bind="args">
          <p style="padding: 1rem">Vertical Divider</p>
        </MDivider>
      </div>
    `,
  }),
};

export const Size: Story = {
  args: { size: 'm' },
};

export const Secondary: Story = {
  args: { appearance: 'secondary' },
};