npm package: @lightspeed/cirrus-text
Description: Cirrus Text Component
Author: Lightspeed
Latest version: 5.0.0-beta.1

# Text

Base component for every Text styles.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-text
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-text
```

### React Component

#### `<Text>`

_Note:_ This components supports multiple properties from styled-system.

- TextColor
- FontSize
- FontWeight
- Space
- LineHeight
- LetterSpacing
- TextTransform

[Styled System API](https://github.com/jxnblk/styled-system/blob/master/docs/api.md)

| Prop | Type | Description | Default |
| ---- | ---- | ----------- | ------- |
| `element` | string | HTML element for text | 'p'|
| `children` | React.ReactNode | The content to display inside the text | - |
| `className` | string | Extra CSS classes appended to end of text element | - |
| `fontWeight` | string | Set the font-weight for the text| - |
| `color` | string | Any Cirrus color token, ex `green-100` or CSS value. | - |
| `size` | enum('small', 'normal', 'large', 'xlarge') | Automatically apply font size and line-height. This property will take precedence over styled-system props | - |

#### `<Heading1>` `<Heading2>` `<Heading3>` `<Heading4>`

_Note:_ This components supports multiple properties from styled-system.

- TextColor
- FontSize
- FontWeight
- Space
- LineHeight
- LetterSpacing
- TextTransform

[Styled System API](https://github.com/jxnblk/styled-system/blob/master/docs/api.md)

| Prop | Type | Description | Default |
| ---- | ---- | ----------- | ------- |
| `children` | React.ReactNode | The content to display inside the text | - |
| `fontWeight` | string | Set the font-weight for the text| - |
| `color` | string | Any Cirrus color token, ex `green-100` or CSS value. | - |

#### `<TextLink>`

| Prop         | Type            | Description                                       | Default |
| ------------ | --------------- | ------------------------------------------------- | ------- |
| `children`   | React.ReactNode | The content to display inside the link            | -       |
| `className`  | string          | Extra CSS classes appended to end of link element | -       |
| `fontWeight` | string          | Set the font-weight for the text                  | -       |

#### `<TextContent>`

| Prop       | Type            | Description                                                                                             | Default |
| ---------- | --------------- | ------------------------------------------------------------------------------------------------------- | ------- |
| `children` | React.ReactNode | The content to display. An extra class will be applied to each children of type `<Text>` to add spacing | -       |

#### Example

```js
import React from 'react';
import { Text, Heading1, TextLink, TextContent } from '@lightspeed/cirrus-text';

const MyComponent = () => (
  <div>
    <Heading1>Heading</Heading1>
    <Text>Body text</Text>
    <TextLink href="https://www.lightspeedhq.com">Link</TextLink>
    <TextContent>
      <Heading1>Heading content</Heading1>
      <Text>Body text content</Text>
      <TextLink href="https://www.lightspeedhq.com">Link</TextLink>
    </TextContent>
  </div>
);

export default MyComponent;
```