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

import OverlayExample from './example/OverlayExample?dev-site-example';
import LoadingOverlayExample from './example/LoadingOverlayExample?dev-site-example';

import OverlayPropsTable from 'terra-overlay/lib/Overlay?dev-site-props-table';
import OverlayContainerPropsTable from 'terra-overlay/lib/OverlayContainer?dev-site-props-table';
import LoadingOverlayPropsTable from 'terra-overlay/lib/LoadingOverlay?dev-site-props-table';

<Badge />

# Terra Overlay
The Overlay component is a component that creates an semi-transparent overlay screen that blocks interactions with the elements underneath the display. There are two types of overlays: fullscreen and relative to its container.

When creating as an overlay relative to its container, place the overlay component within the overlay wrapper and the element(s) which should be hidden by overlay within the content(children) wrapper of Overlay Container subcomponent.

A Loading Overlay is a specialized Overlay subcomponent that displays an overlay with a spinner icon and loading message.

## Getting Started

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

<!-- 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.8.0 |

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

## Implementation Notes:

The Overlay component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.

[1]: https://engineering.cerner.com/terra-core/components/terra-base/base/base

## Usage

# Overlay
```jsx
import Overlay from 'terra-overlay';
import OverlayContainer from 'terra-overlay/lib/OverlayContainer';
```

# LoadingOverlay
```jsx
import LoadingOverlay from 'terra-overlay/lib/LoadingOverlay';
import OverlayContainer from 'terra-overlay/lib/OverlayContainer';
```

## Examples
<OverlayExample title="Overlay" />
<LoadingOverlayExample title="Loading Overlay" />

## Overlay Props
<OverlayPropsTable />

## Overlay Container Props
<OverlayContainerPropsTable />

## Loading Overlay Props
<LoadingOverlayPropsTable />