import { Badge } from 'terra-toggle-section-header/package.json?dev-site-package';

import DefaultToggleSectionHeader from './example/DefaultToggleSectionHeader?dev-site-example';
import AnimatedToggleSectionHeader from './example/AnimatedToggleSectionHeader?dev-site-example';
import TransparentToggleSectionHeader from './example/TransparentToggleSectionHeader?dev-site-example';

import ToggleSectionHeaderPropsTable from 'terra-toggle-section-header/lib/ToggleSectionHeader?dev-site-props-table';

<Badge />

# Terra Toggle Section Header

Toggle section header component that transitions content in and out with a click. 

## Getting Started

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

<!-- 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 ToggleSectionHeader from 'terra-toggle-section-header';
```
## Accessibility

For accessibility best practices, it is recommended that consumers should always use only one h1 tag per page or view. The one h1 tag should be the page title. A section header should never be a heading level 1. 

## Component Features

 * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
 * [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

## Examples
<DefaultToggleSectionHeader title="Default" />
<AnimatedToggleSectionHeader title="Animated" />
<TransparentToggleSectionHeader title="Transparent" />

## Toggle Section Header Props
<ToggleSectionHeaderPropsTable />