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

import DemographicsBanner from 'terra-demographics-banner?dev-site-example';
import DemographicsBannerAdditionalAges from './example/DemographicsBannerAdditionalAges?dev-site-example';
import DemographicsBannerAdditionalDetails from './example/DemographicsBannerAdditionalDetails?dev-site-example';
import DemographicsBannerBasic from './example/DemographicsBannerBasic?dev-site-example';
import DemographicsBannerDeceased from './example/DemographicsBannerDeceased?dev-site-example';
import DemographicsBannerSmallContainer from './example/DemographicsBannerSmallContainer?dev-site-example';


import DemographicsBannerPropsTable from 'terra-demographics-banner/lib/DemographicsBanner?dev-site-props-table';

<Badge />

# Terra Demographics Banner

The demographics component is used to display demographic information about a person in a condensed, easy to read format. Demographics Banner must be inside the Base component with locale. All related translations are required to be loaded before Demographics Banner renders.

## Getting Started

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

<!-- 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 Demographics-Banner component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.

[1]: https://github.com/cerner/terra-core/blob/main/packages/terra-base/src/terra-dev-site/doc/base/Base.1.doc.mdx

## Usage

```jsx
import DemographicsBanner from 'terra-demographics-banner';
```

The demographics banner will display differently depending on the resolution of the browser. If the resolution is less than that of the standard tablet width (767px), then the demographics banner will be stacked, and the profile image will not be displayed. If the resolution is greater than or equal to the tablet width, the banner will display horizontally, and the profile image will be displayed to the user.

## 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
<DemographicsBannerBasic title="Basic Demographics Banner" />
<DemographicsBanner title="Demographics Banner with Missing Data" />
<DemographicsBannerDeceased title="Deceased Demographics Banners" />
<DemographicsBannerAdditionalAges title="Demographics Banner with Gestational and Post Menstrual Ages" />
<DemographicsBannerAdditionalDetails title="Demographics Banner with Additional Details" />
<DemographicsBannerSmallContainer title="Demographics Banner in a Small Container" />

## Demographics Banner Props
<DemographicsBannerPropsTable />