# @lightspeed/cirrus-text

> Cirrus Text Component

Latest version **5.0.0-beta.1** (published 2018-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lightspeed/cirrus-text
pnpm add @lightspeed/cirrus-text
yarn add @lightspeed/cirrus-text
bun add @lightspeed/cirrus-text
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0-beta.1 |
| Published | 2018-12-03 |
| First published | 2017-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 35.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lightspeed |
| Maintainers | ahmedelgabri, inooid, kurt.bergeron, lightspeedhq, ls-frederic-bouchard, ls-guillaume-lambert, tombertrand |

## Links

- npm: https://www.npmjs.com/package/@lightspeed/cirrus-text
- npm.io page: https://npm.io/package/@lightspeed/cirrus-text

## Recent versions

- 5.0.0-beta.1 (latest) — 2018-12-03
- 5.0.0-beta.0 — 2018-12-03
- 5.0.0-alpha.0 — 2018-11-29
- 4.0.0 — 2018-07-17
- 3.0.0 — 2018-05-14
- 2.0.0 — 2018-04-30
- 1.0.1 — 2018-03-16
- 1.0.0 — 2018-01-18
- 0.1.3 — 2018-01-15
- 0.1.2 — 2018-01-08
- 0.1.1 — 2018-01-08
- 0.1.0 — 2017-12-20

## README

# 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;
```

---
_Source: https://npm.io/package/@lightspeed/cirrus-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._