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

<Meta title="Components/Typography/Section Header" component={SectionHeader} />

# Section Header

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

A section header component that accepts text for the children prop, and "sm" or "lg"
for size prop. If no size prop is set, default to "lg".

Large section headers will use an `h2` tag, while a small section header will use `h3`.

## Default

<Canvas>
  <Story id="components-typography-section-header--default" />
</Canvas>

## Supported Mixins

### Spacing

<Canvas>
  <Story id="components-typography-section-header--mixins-spacing" />
</Canvas>

### Stackee

<Canvas>
  <Story id="components-typography-section-header--mixins-stackee" />
</Canvas>

### SemanticHeader

This mixin allows you to control the header level independently of the component's visual presentation:

<Canvas>
  <Story id="components-typography-section-header--mixins-semantic-header-level-small" />
</Canvas>

## Props

<FlowPropsTable ofComponent={SectionHeader} />

## External Reference

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