import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { PageTitle } from './page-title.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Components/Typography/Page Title" component={PageTitle} />

# Page Title

- [Header Accessibility
  Tips](/?path=/story/components-typography-accessibility-tips--page)

A level-1 header component with an L5 vertical margin.

## Default

<Canvas>
  <Story id="components-typography-page-title--default" />
</Canvas>

## Supported Property Mixins

### Spacing

<Canvas>
  <Story id="components-typography-page-title--mixins-spacing" />
</Canvas>

### Stackee

<Canvas>
  <Story id="components-typography-page-title--mixins-stackee" />
</Canvas>

### Semantic Header

PageTitle also supports the "SemanticHeader" mixin, allowing you to control the header level independently of the component's visual presentation:

<Canvas>
  <Story id="components-typography-page-title--mixins-semantic-header-level" />
</Canvas>

## Props

<FlowPropsTable ofComponent={PageTitle} />

## External Reference

<ExternalReferenceLink src="" type="figma" />
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/typography/page-title"
  type="github"
/>