@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,
  argTypes: {
    orientation: {
      control: 'radio',
      options: ['horizontal', 'vertical'],
    },
    style: {
      control: 'radio',
      options: ['primary', 'secondary', 'tertiary', 'inverse'],
    },
    size: {
      control: 'radio',
      options: ['s', 'm', 'l'],
    },
  },
  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: { style: 'secondary' },
};