@mozaic-ds/vue/src/components/container/MContainer.stories.ts

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

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

const meta: Meta<typeof MContainer> = {
  title: 'Foundations/Container',
  component: MContainer,
  parameters: {
    docs: {
      description: {
        component:
          'The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.',
      },
    },
  },
  args: {
    default: `<h1>Container</h1>`,
  },
  render: (args) => ({
    components: { MContainer },
    setup() {
      return { args };
    },
    template: `
      <MContainer v-bind="args">
        <template v-if="${'default' in args}" v-slot>${args.default}</template>
      </MContainer>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MContainer>;

export const Standard: Story = {};

export const Fluid: Story = {
  args: {
    fluid: true,
    default: `<h1>Fluid Container</h1>`,
  },
};