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

import LinearLayout from '@/layouts/LinearLayout.vue'

import BaseModal from '@/elements/modal/BaseModal.vue'
import BaseButton from '@/elements/button/BaseButton.vue'
import BaseHeading from '@/elements/content/BaseHeading.vue'
import BaseContent from '@/elements/content/BaseContent.vue'

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

# Modals Patterns

## Cancel operation Modal

Close click has the same value of cancel operation.

<Preview>
  <Story name="Cancel operation">
    {{
        components: { LinearLayout, BaseModal, BaseButton, BaseHeading, BaseContent },
        template:
          `<base-modal>
            <linear-layout orientation="vertical">
              <base-heading>Are you sure?</base-heading>
              <base-content>Returning to previous page mean you'll lost</base-content>
              <linear-layout gravity="repulsive">
                <base-button type="link">Yes, lost updated data</base-button>
                <base-button>No, I'm want to continue</base-button>
              </linear-layout>
            </linear-layout>
          </base-modal>`
    }}
  </Story>
</Preview>