import { Badge } from 'terra-abstract-modal/package.json?dev-site-package';

import AbstractModalIsOpened from '../example/AbstractModalIsOpened?dev-site-example';
import AbstractModalCloseOnOutsideClick from '../example/AbstractModalCloseOnOutsideClick?dev-site-example';
import AbstractModalIsFullscreen from '../example/AbstractModalIsFullscreen?dev-site-example';
import AbstractModalAlertDialog from '../example/AbstractModalAlertDialog?dev-site-example';

import ModalPropsTable from 'terra-abstract-modal/src/AbstractModal?dev-site-props-table';

<Badge />

# Terra Abstract Modal

The abstract modal is a structural component that provides the ability to display portal'd content in a layer above the app. It consists of an overlay and an unstyled absolute positioned div in which content can be placed. The abstract modal is not intended to be consumed directly, but rather wrapped in a higher order component. Higher order components can provide the abstract modal with sizing, visual styles, and content (e.g; header, body, and actionable buttons). The abstract modals maximum size is constrained by the viewport size, so the content placed inside the modal needs to be responsive.

Our recommendation for HOC is the [terra-modal-manager][1], as it provides sizing, responsive behavior, visual styles, and a disclosure stack.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-abstract-modal`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
| react-intl | ^2.9.0 |

<!-- AUTO-GENERATED-CONTENT:END -->

[1]: https://engineering.cerner.com/terra-framework/components/terra-modal-manager/modal-manager/about

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<AbstractModalIsOpened title='Default Modal'/>
<AbstractModalCloseOnOutsideClick title='
Disable closing the modal when clicking on the overlay' />
<AbstractModalIsFullscreen title='Fullscreen Modal' />
<AbstractModalAlertDialog title='Alert Dialog Modal' />

## Abstract Modal Props
<ModalPropsTable />