terra-clinical-item-display
Version:
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.
91 lines (64 loc) • 3.58 kB
text/mdx
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 />
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.
- Install with [npmjs](https://www.npmjs.com):
- `npm install terra-clinical-item-display`
<!-- AUTO-GENERATED-CONTENT:START 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 -->
``` jsx
import ItemDisplay from 'terra-clinical-item-display';
```
<Notice variant="important" ariaLevel="3">
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" />
<ItemDisplayPropsTable />
<CommentPropsTable />