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

<Meta title="Components/Inputs/FieldLabel" component={FieldLabel} />

# Field Label

The FieldLabel component renders a string with styles that can be used for labeling form elements.

It mimicks the Section Header but is functionally a `<label>`

## Default

<Canvas>
  <Story id="components-inputs-fieldlabel--default" />
</Canvas>

## Supported Property Mixins

### Spacing

<Canvas>
  <Story id="components-inputs-fieldlabel--mixins-spacing" />
</Canvas>

### Stackee

<Canvas>
  <Story id="components-inputs-fieldlabel--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={FieldLabel} />

## External Reference

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