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

import HeadingColors from './example/HeadingColors?dev-site-example';
import HeadingLevels from './example/HeadingLevels?dev-site-example';
import HeadingSizes from './example/HeadingSizes?dev-site-example';
import HeadingVisuallyHidden from './example/HeadingVisuallyHidden?dev-site-example';
import HeadingWeights from './example/HeadingWeights?dev-site-example';
import HeadingVariations from './example/HeadingVariations?dev-site-example';

import HeadingPropsTable from 'terra-heading/lib/Heading?dev-site-props-table';

<Badge />

# Terra Heading

Terra includes styling for all standard headings `h1` through `h6`, as well as styles that match the size of their respective heading.

## Getting Started

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

<!-- 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 Heading from 'terra-heading';
```

## 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
Terra includes styling for all standard headings `h1` through `h6`, as well as styles that match the size of their respective heading. Headings should be
marked up according to the document hierarchy, not appearance. To facilitate navigation and understanding of overall document structure, authors should use
headings that are properly nested (e.g., `h1` followed by `h2`, `h2` followed by `h2` or `h3`, `h3` followed by `h3` or `h4`, etc.). The `level` prop accepts
one of the following numbers:

`1`, `2`, `3`, `4`, `5`, `6`
<HeadingLevels />

The `size` prop can be used to alter the default size of any `Heading` component whenever necessary. The `size` prop accepts one of the following strings:

`huge`, `large`, `medium`, `small`, `tiny`, `mini`
<HeadingSizes />
<HeadingColors description="By passing in a className, authors can manually set the text color of any '<Heading />' component."/>

The `weight` prop can be used to specify the weight or boldness of the `Heading` component. Heading components default to a `font-weight` of `700`. The `weight` prop accepts one of the following numbers:

`200`, `400`, `700`
<HeadingWeights />

The `isVisuallyHidden` prop can be used to hide the content visually, yet provide the content to screen readers.
More info on this approach can be found here: <Link to="http://a11yproject.com/posts/how-to-hide-content/">http://a11yproject.com/posts/how-to-hide-content/</Link>
<HeadingVisuallyHidden />
<HeadingVariations description="You can mix and match props on the '<Heading />' component to create various heading styles."/>

## Heading Props
<HeadingPropsTable />