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

import StatusDefault from './example/StatusDefault?dev-site-example';
import StatusImage from './example/StatusImage?dev-site-example';
import StatusIcon from './example/StatusIcon?dev-site-example';
import StatusArrange from './example/StatusArrange?dev-site-example';

import StatusPropsTable from 'terra-status/lib/Status?dev-site-props-table';

<Badge />

[![Deprecated](https://badgen.net/badge/status/Deprecated/grey)](https://github.com/cerner/terra-core/tree/main/packages/terra-status#readme)

# Terra Status

<Notice variant="deprecation">

`terra-status` does not comply with accessibility guidelines and is no longer supported. If you are using `terra-status`, consider replacing it with descriptive text or an icon.

</Notice>

The status component provides a customizable color indictor to signify a specific condition.

## Getting Started

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

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

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

## Usage

```jsx
import Status from 'terra-status';
```

## Adding custom className

This component allows user to pass custom className. The variable must start with `--my-app` for proper re-themeability.

```css
:root {
  --my-app-status-attention-color: red;
  --my-app-status-success-color: #00ff00;
  --my-app-status-info-color: rgb(0,0,255);
}

.attention {
  border-left-color: var(--my-app-status-attention-color, red);
}

.success {
  border-left-color: var(--my-app-status-success-color, #00ff00);
}

.info {
  border-left-color: var(--my-app-status-info-color, rgb(0,0,255));
}
```

## 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
<StatusDefault title="Status with text" />
<StatusImage title="Status with Image" />
<StatusIcon title="Status with Icon" />
<StatusArrange title="Status with Arrange" />

## Status Props
<StatusPropsTable />