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

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

<Meta title="Extra: Patterns|Overlays" />

## Panic overlay

Panic overlays are used for panic errors. They fully cover the content behind and inform the user of what happened by prompting them to refresh the page or to execute another action.

<Preview>
  <Story name="Panic Overlay">
    {{
        components: { BaseOverlay, BaseHeading, BaseContent, LinearLayout, BaseButton },
        template: 
          `<div>
            <base-overlay>
              <linear-layout orientation="vertical">
                <base-heading>There is a problem, but we are on it!</base-heading>
                <base-content>
                  <p class="is-family-sans-serif">Try to refresh the page or contact support Try to refresh the page or contact support Try to refresh the page or contact support Try to refresh the page or contact support Try to refresh the page or contact support</p>
                </base-content>
                <base-button type="link">Contact support</base-button>
              </linear-layout>
            </base-overlay>
          </div>`,
    }}
  </Story>
</Preview>

## Loading overlay

The loading overlay is full-screen layer that covers the content behind with low opacity that is used while loading new views and pages.

<Preview>
  <Story name="Loading Overlay">
    {{
        components: { BaseOverlay },
        template: 
          `<div>
            <base-overlay opacity="0.8" />
          </div>`,
    }}
  </Story>
</Preview>