import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as HeadingStories from "./Heading.stories";

<Meta of={HeadingStories} />

# Heading

The Heading component is used to display titles and section headings in the UI. It provides consistent typography and semantic HTML structure through six different heading levels (h1-h6).

## Usage

<Canvas of={HeadingStories.Documentation} source={ { code: `
import React from "react";
import { Heading } from "@webiny/admin-ui";

const HeadingExample = () => {
return <Heading level={1}>This is a heading</Heading>;
};

export default HeadingExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Heading/Heading.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={HeadingStories.Documentation} />

```tsx
import React from "react";
import { Heading } from "@webiny/admin-ui";

const HeadingExample = () => {
  return <Heading level={1}>This is a heading</Heading>;
};

export default HeadingExample;
```

## Examples

### Heading Level 1

The largest heading, typically used for page titles.

<Canvas of={HeadingStories.Heading1} source={ { code: `
import React from "react";
import { Heading } from "@webiny/admin-ui";

const Heading1Example = () => {
return (

<Heading level={1}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
  rhoncus.
</Heading>
); };

export default Heading1Example;
` } } />

### Heading Level 2

Used for major section headings.

<Canvas of={HeadingStories.Heading2} source={ { code: `
import React from "react";
import { Heading } from "@webiny/admin-ui";

const Heading2Example = () => {
return (

<Heading level={2}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
  rhoncus.
</Heading>
); };

export default Heading2Example;
` } } />

### Heading Level 3

Used for subsection headings.

<Canvas of={HeadingStories.Heading3} source={ { code: `
import React from "react";
import { Heading } from "@webiny/admin-ui";

const Heading3Example = () => {
return (

<Heading level={3}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
  rhoncus.
</Heading>
); };

export default Heading3Example;
` } } />

### Heading Level 4

Used for minor subsection headings.

<Canvas of={HeadingStories.Heading4} source={ { code: `
import React from "react";
import { Heading } from "@webiny/admin-ui";

const Heading4Example = () => {
return (

<Heading level={4}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
  rhoncus.
</Heading>
); };

export default Heading4Example;
` } } />

### Heading Level 5

Used for small headings within sections.

<Canvas of={HeadingStories.Heading5} source={ { code: `
import React from "react";
import { Heading } from "@webiny/admin-ui";

const Heading5Example = () => {
return (

<Heading level={5}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
  rhoncus.
</Heading>
); };

export default Heading5Example;
` } } />

### Heading Level 6

The smallest heading, used for the least significant section headings.

<Canvas of={HeadingStories.Heading6} source={ { code: `
import React from "react";
import { Heading } from "@webiny/admin-ui";

const Heading6Example = () => {
return (

<Heading level={6}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
  rhoncus.
</Heading>
); };

export default Heading6Example;
` } } />

### as Example

`as` prop is used to change the HTML tag of the heading. This is useful when you want to maintain semantic structure but want different visual styling.

<Canvas of={HeadingStories.As} source={ { code: `
import React from "react";
import { Heading } from "@webiny/admin-ui";

const AsExample = () => {
return (

<Heading level={2} as="h1">
  This is visually a Heading level 2, but semantically an h1
</Heading>
); };

export default AsExample;
` } } />