import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'

import BaseButton from '@/elements/button/BaseButton.vue'
import BaseContent from '@/elements/content/BaseContent.vue'
import BaseHeading from '@/elements/content/BaseHeading.vue'
import BaseOverlay from '@/elements/overlay/BaseOverlay.vue'
import LinearLayout from '@/layouts/LinearLayout.vue'
import ContainerLayout from '@/layouts/ContainerLayout.vue'

<Meta title="Extra: Patterns|Empty State" />

# Empty State

<Preview>
  <Story name="Collection empty state">
    {{
        components: { BaseButton, BaseContent, BaseHeading, LinearLayout, ContainerLayout },
        template: 
          `<container-layout style="border: 2px dashed black; border-radius: 4px;">
            <linear-layout orientation="vertical">
              <base-heading>
                  Title
              </base-heading>
              <base-content>
                  <p class="is-family-sans-serif"> Some text with <strong>formatting</strong> of <em>different types</em> </p>
              </base-content>
              <linear-layout>
                <base-button type="primary">
                  <span>Primary action</span>
                </base-button>
                <base-button type="secondary">
                  <span>Secondary action</span>
                </base-button>
              </linear-layout>
            </linear-layout>
          </container-layout>`
    }}
  </Story>
</Preview>