import { Badge } from 'terra-alert/package.json?dev-site-package';
import { Notice } from "@cerner/terra-docs";

import AlertExample from './example/AlertExample?dev-site-example';
import ErrorExample from './example/ErrorExample?dev-site-example';
import WarningExample from './example/WarningExample?dev-site-example';
import AdvisoryExample from './example/AdvisoryExample?dev-site-example';
import UnsatisfiedExample from './example/UnsatisfiedExample?dev-site-example';
import UnverifiedExample from './example/UnverifiedExample?dev-site-example';
import InfoExample from './example/InfoExample?dev-site-example';
import SuccessExample from './example/SuccessExample?dev-site-example';
import CustomExample from './example/CustomExample?dev-site-example';
import LongTextExample from './example/LongTextExample?dev-site-example';
import ActionExample from './example/ActionExample?dev-site-example';
import DismissibleExample from './example/DismissibleExample?dev-site-example';
import LiveRegionsExampleCode from './example/LiveRegionsExampleCode';

import AlertPropsTable from 'terra-alert/lib/Alert?dev-site-props-table';

<Badge />

# Terra Alert (Notification Banner)

The Terra Alert component is a notification banner that can be rendered in your application when there is information that you want to bring to the user's attention.

The Alert component supports a number of built-in notification types that render with pre-defined colors and icons that help the user understand the severity and meaning of the notification. The supported notification types and recommended uses are:

- `alert` - displays a critical notification for current emergencies or situations of high severity that need to be addressed promptly
- `error` - recommended to provide feedback of a negative system status such as failures, inabilities, or limitations
- `warning` - recommended to show moderately urgent notifications that are cautionary in nature and forecast potential risk
- `unsatisfied` - recommended to show the user that an unsatisfied or incomplete action needs to be addressed
- `unverified` - recommended to provide feedback that information from outside systems has been included but has yet to be verified by the user
- `advisory` - recommended to provide the user with guidance and/or advice for completing an action
- `information` - recommended to provide general awareness and information that can possibly lead to an action for something that has no associated severity.
- `success` - recommended to provide feedback of a successful system status

A custom notification type is also supported that allows your application to customize a notification that may not fit into the pre-defined types.

## Getting Started

- Install with [npmjs][3]:
  - `npm install terra-alert`

<!-- 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 Alert 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
[3]: https://www.npmjs.com

## Usage

```jsx
import Alert from 'terra-alert';
```

## Accessibility

For further guidance, please view the full [Accessibility Guide](./accessibility-guide).

<Notice variant="important" ariaLevel="3">

- The `alert` notification type will seize keyboard focus by default when an action element is present. This behavior should only be used when absolutely necessary to interrupt the user's workflow.

</Notice>

#### Accessibility Guidance: Titles
- Notification banners of type `custom` should always have a title provided to the `title` prop.
- All other notification types will provide a default title. The `title` prop will override the default title and should be avoided.

#### Accessibility Guidance: Live regions
- For less critical notifications (non-alerts), the notification banner should be in an `aria-live="polite"` region. See example code below.
- Avoid mixing critical alert notifications and less critical notifications in the same region.

<LiveRegionsExampleCode />

## 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)
* [Internationalization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
* [Localization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)

## Examples
<AlertExample title="Alert Notification Banner" />
<ErrorExample title="Error Notification Banner" />
<WarningExample title="Warning Notification Banner" />
<UnsatisfiedExample title="Unsatisfied Notification Banner" />
<UnverifiedExample title="Unverified Notification Banner" />
<AdvisoryExample title="Advisory Notification Banner" />
<InfoExample title="Information Notification Banner" />
<SuccessExample title="Success Notification Banner" />
<CustomExample title="Custom Notification Banner" />
<ActionExample title="Notification Banner with Action" />
<DismissibleExample title="Dismissible Notification Banner" />
<LongTextExample title="Long Text Notification Banner" />

## Alert Props
<AlertPropsTable />

## Testing

Terra Alert uses `uuid` which changes the component's description id dynamically. To mock the return value with the Jest testing library, `jest.spyOn` can be used.

If Enzyme `shallow` is being used for the tests then the mock may not be required depending on the depth of the returned wrapper. However, if `mount` is used then `uuid` should be mocked as shown below:

```js
import { v4 as uuidv4 } from 'uuid';

let mockSpyUuid;

// using a variable may result in failures. For best results, mock return value.
beforeAll(() => {
  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
});

// restore the mock
afterAll(() => {
  mockSpyUuid.mockRestore();
});

```