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

<Meta
  title="2 - System/Typography/Headings/Section Header"
  component={SectionHeader}
/>

# Section Header

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 withToolbar>
  <Story id="2-system-typography-headings-section-header--default" />
</Canvas>

## Supported Mixins

### Spacing

<Canvas withToolbar>
  <Story id="2-system-typography-headings-section-header--mixins-spacing" />
</Canvas>

### Stackee

<Canvas withToolbar>
  <Story id="2-system-typography-headings-section-header--mixins-stackee" />
</Canvas>

### SemanticHeader

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

<Canvas withToolbar>
  <Story id="2-system-typography-headings-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"
/>
