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

import ToggleVariants from './example/ToggleVariants?dev-site-example';
import ToggleAlignmentAndGlyph from './example/ToggleAlignmentAndGlyph?dev-site-example';
import Custom from './example/Custom?dev-site-example';
import ToggleStatusView from './example/ToggleStatusView?dev-site-example'

import StatusViewPropsTable from 'terra-status-view/lib/StatusView?dev-site-props-table';

<Badge />

# Terra Status View
Presents an icon, title, message, and/or buttons based on a status type scenario. Scenarios include `no-data`, `no-matching-results`, `not-authorized`, `error`, or a custom scenario.

## Getting Started

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

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

## Usage
```jsx
import StatusView from 'terra-status-view';
```

## Implementation Notes:

The Status-View component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.
Set `focusable=false` for svg element used for `customGlyph` prop, to prevent focusing of the svg in IE10.

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

## 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
<ToggleVariants title="Variants" />
<Custom title="Custom: Icon + message + buttons" />
<ToggleAlignmentAndGlyph />
<ToggleStatusView title="Toggle Status View" />

## Status View Props
<StatusViewPropsTable />