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

import ItemDisplayPropsTable from 'terra-clinical-item-display/src/ItemDisplay?dev-site-props-table';
import CommentPropsTable from 'terra-clinical-item-display/src/ItemComment?dev-site-props-table';

import TextStyles from '../example/TextStyles?dev-site-example';
import TextStylesDisabled from '../example/TextStylesDisabled?dev-site-example';
import Icon from '../example/Icon?dev-site-example';
import IconText from '../example/IconText?dev-site-example';
import DefaultComment from '../example/DefaultComment?dev-site-example';
import TextStyleMeaning from '../example/TextStyleMeaning?dev-site-example';
import TruncatedText from '../example/TruncatedText?dev-site-example';

<Badge />

# Terra Clinical Item Display

The Item Display component creates an display for text and an optional graphic. The Comment subcomponent creates a display for text with a comment icon.

## Getting Started

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

<!-- 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 ItemDisplay from 'terra-clinical-item-display';
```

## Accessibility

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

#### Accessibility Guidance: Truncated Text

Truncation of text can pose an accessibility concern if no method of disclosing the full text is available to the user.
When using `isTruncated`, consumers are responsible for providing a progressive disclosure pattern
to disclose the full Item Display text in order to ensure that it is accessible for keyboard navigation users.

**There should always be a method of accessing the truncated information. If there is no way to progressively
disclose the full content of the truncated information, then truncation should not be used.**

Some examples of progressive disclosure patterns that may be used to disclose truncated information include:
- Accordions
- Dialogs
- Popovers
- Split Views
- Toasts

The method of disclosure **must** be accessible via keyboard interactions.

Truncation should be avoided where it is not necessary.
Certain content should **never** be truncated (i.e. medication names and dosages in menus where the user is selecting from a list of choices).
Providing a shorter preview text with a method to disclose the full text provides a more equitable experience for all users.

</Notice>

## 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)

## Example
<TextStyles title="Item Display: Text styles"  />
<Icon title="Item Display: Icon" />
<IconText title="Item Display: Icon and Text" />
<DefaultComment title="Comment Item Display" />
<TextStyleMeaning title="Item Display: Text Style Meaning for Assistive Technology" />
<TruncatedText title="Item Display: Truncated Text" />

## Item Display Props Table
<ItemDisplayPropsTable />

## Item Comment Props Table
<CommentPropsTable />