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 Layout Props

### Spacing

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

### Stackee

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

## 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"
/>
