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

import * as ModalDialogStories from './ModalDialog.stories';

<Meta of={ModalDialogStories}/>

# ModalDialog

> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.

The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.

<Source
  language='html'
  dark
  code={`
    <UnnnicModalDialog v-model="showModal">
    <p>Modal Content</p>
</UnnnicModalDialog>
  `}
/>

## Left Sidebar

You can use the `leftSidebar` slot to insert a fixed sidebar area on the left.

<Source
  language='html'
  dark
  code={`
<UnnnicModalDialog v-model="showModal">
  <template #leftSidebar>
    Hi from Left Sidebar
  </template>

  <p>Modal Content</p>
</UnnnicModalDialog>
  `}
/>

---

#### **Props Options:**

| Key                 | Description                                                                                                                                   | Values                                | Default |
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|---------|
| type                | Modal type predefinition                                                                                                                      | 'success' \| 'warning' \| 'attention' | ''      |
| persistent          | Clicking outside of the element will not deactive it                                                                                          | true \| false                         | false   |
| size                | Modal width size (sm = 400px; md = 600px; lg = 800px)                                                                                         | 'sm' \| 'md' \| 'lg'                  | 'md'    |
| title               | Modal card title (if not provided, the title section will not be displayed)                                                                   | string                                | ''      |
| icon                | Custom title section icon (if not provided, the preset icons will be considered according to the chosen modal type)                           | string                                | ''      |
| iconScheme          | Custom scheme color to icon in title section (if not provided, the preset scheme color will be considered according to the chosen modal type) | string                                | ''      |
| showCloseIcon       | Show close icon in title section                                                                                                              | boolean                               | false   |
| primaryButtonProps  | Props to apply to the primary button (check button props [here](?path=/story/form-button--primary))                                           | object                                | \{}     |
| secondaryButtonProps| Props to apply to the secondary button (check button props [here](?path=/story/form-button--primary))                                         | object                                | \{}     |
| hideSecondaryButton | Hide the secondary button and keep the spacing to the primary button                                                                          | true \| false                         | false   |
| showActionsDivider  | Show divider in between actions and dialog content                                                                                            | boolean                               | false   |

## Examples
Some examples of uses of the modal

### Default

<Story of={ModalDialogStories.Default} />

### With Left Sidebar

<Story of={ModalDialogStories.WithLeftSidebar} />

### Warning

<Story of={ModalDialogStories.Warning} />

### Attention

<Story of={ModalDialogStories.Attention} />

### Overflowed Content

<Story of={ModalDialogStories.Overflowed} />

### Form Content

<Story of={ModalDialogStories.Form} />

### Image Content

<Story of={ModalDialogStories.Image} />