import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from "@storybook/addon-actions"
import ContainerLayout from '@/layouts/ContainerLayout.vue'
import BaseContent from '@/elements/content/BaseContent.vue'

<Meta title="Layouts|Container" component={ContainerLayout} />

# Container Layout

<Props of={ContainerLayout} />

The `ContainerLayout` is a wrapper component that adds padding to

<Preview>
  <Story name="Default">
    {{
        components: { ContainerLayout, BaseContent },
        template: 
          `<div style="border: 1px dashed black;">
            <container-layout>
                <base-content>
                    <p class="is-family-sans-serif"> Some content here </p> 
                </base-content>
            </container-layout>
          </div>`
    }}
  </Story>
</Preview>