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

import ContentContainerStandard from './example/ContentContainerStandard?dev-site-example';
import ContentContainerFill from './example/ContentContainerFill?dev-site-example';
import ContentContainerScrollRef from './example/ContentContainerScrollRef?dev-site-example';
import ContentContainerWithoutInteractiveElements from './example/ContentContainerWithoutInteractiveElements?dev-site-example';
import ContentContainerWithoutInteractiveElementsDark from './example/ContentContainerWithoutInteractiveElementsDark?dev-site-example';

import ContentContainerPropsTable from 'terra-content-container/lib/ContentContainer?dev-site-props-table';

<Badge />

# Terra Content Container

The Terra ContentContainer is a structural component for the purpose of arranging content with an optional header and/or footer.

The footer is not responsive to mobile keyboard positioning.

## Getting Started

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

<!-- 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 ContentContainer from 'terra-content-container';
```

<Notice variant="ux-recommendation" ariaLevel="3">

As a best practice to ensure proper page structure, Ensure that the content container header uses valid header component which has a prop that allows to specify the proper heading level based on where the heading occurs on the page.
It is not recommended to use content container footer with heading elements, instead use `<p>` tag or text.

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

## Examples
<ContentContainerStandard title="Standard Container" />
<ContentContainerWithoutInteractiveElements title="Standard Container without Interactive elements"/>
<ContentContainerWithoutInteractiveElementsDark title="Standard Container without Interactive elements(Different parent background)"/>
<ContentContainerFill title="Fill Container" />
<ContentContainerScrollRef title="Scroll Ref Container" />

## Content Container Props
<ContentContainerPropsTable />