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

<Meta title="Components/Typography/Text" component={Text} />

# Text

This component provides block typography wrapped in a P tag.

Our brand font depends on the selected theme.

## Variations

### Scale

The font scale contains 5 options. Values can vary by theme. Values for the Invest theme are shown below:

| Size | Pixel Value |
| ---- | ----------- |
| f1   | 16px        |
| f2   | 18px        |
| f3   | 20px        |
| f4   | 27px        |
| f5   | 34px        |

The default value is **f2**

<Canvas>
  <Story id="components-typography-text--scale" />
</Canvas>

### Color

Change the text colour by providing a theme color to the `colorName` prop

<Canvas>
  <Story id="components-typography-text--color" />
</Canvas>

### Formatting

<Canvas>
  <Story id="components-typography-text--formatting" />
</Canvas>

### Numerical

<Canvas>
  <Story id="components-typography-text--numerical" />
</Canvas>

### Tabular

<Canvas>
  <Story id="components-typography-text--tabular" />
</Canvas>

## Supported Property Mixins

### Spacing

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

### Stackee

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

### Semantic Header

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

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

## Props

<FlowPropsTable ofComponent={Text} />

## External Reference

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