import { Meta, ArgTypes, Story, Canvas } from "@storybook/addon-docs/blocks";
import { Text } from "./Text";
import * as TextStories from "./Text.stories";

<Meta of={TextStories} />

# Text

Text is a typographic component that styles its content according to the theme. It can be used to render different HTML text tags.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Text } from "@simplybusiness/mobius";
```

## Use default HTML elements and their theme styles

### Heading 1

<Canvas of={TextStories.Heading1} />

### Heading 2

<Canvas of={TextStories.Heading2} />

### Heading 3

<Canvas of={TextStories.Heading3} />

### Heading 4

<Canvas of={TextStories.Heading4} />

### Paragraph

<Canvas of={TextStories.Paragraph} />

### Small

<Canvas of={TextStories.Small} />

### Legal

<Canvas of={TextStories.Legal} />

## Style HTML elements (defaults to `<p>` tag) with `variant` prop

Make `<p>` tag look like an `<h1>` tag.

### Variant H1

<Canvas of={TextStories.VariantHeading1} />

### Variant H2

<Canvas of={TextStories.VariantHeading2} />

### Variant H3

<Canvas of={TextStories.VariantHeading3} />

### Variant H4

<Canvas of={TextStories.VariantHeading4} />

### Variant Body

<Canvas of={TextStories.VariantBody} />

### Variant Small

<Canvas of={TextStories.VariantSmall} />

### Variant Legal

<Canvas of={TextStories.VariantLegal} />

### Themed

<Story of={TextStories.Themed} />

{/* prettier-ignore */}
```jsx
import { Text } from "@simplybusiness/mobius";
import styled from "@emotion/styled";

const StyledText = styled(Text)`
  color: green;
`;

<StyledText>Sample Text</StyledText>
```

### Spacing

Set the spacing to "loose" or "tight" to override the default line height for text. This applies to any element type or variant.

<TextStories.ExampleSpacing />

## Props

<ArgTypes of={Text} />

## Component HTML Structure and Class names

The following HTML is rendered for Text. The element type is added as a class.

```html
<h4 class="mobius-text --is-h4">{text}</h4>
```
