import { H1, H2, H3, H4, H5, H6 } from './headers'
import Span from './Span'
import Br from '../Br'
import Div from '../Div'
import Row from '../Row'
import { Sandbox } from '@startupjs/docs'

# Typography components

Inherits [Text props](https://reactnative.dev/docs/next/text).

A set of components to make text clear and easy to read to the end user.

```jsx
import { Span, H1, H2, H3, H4, H5, H6 } from '@startupjs/ui'
```

## Span

The base component of typography is `Span`, which is used for plain text.

```jsx example
  <Span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</Span>
```

## Headers

`H*` components are used for headings or subheadings of a section or page, and they also paste semantic tags to DOM on the web.


```jsx example
return (
  <Div>
    <H1>H1 Heading</H1>
    <Br half />
    <H2>H2 Heading</H2>
    <Br half />
    <H3>H3 Heading</H3>
    <Br half />
    <H4>H4 Heading</H4>
    <Br half />
    <H5>H5 Heading</H5>
    <Br half />
    <H6>H6 Heading</H6>
  </Div>
)
```

## Bold text

To make text bold pass the property `bold` to component.

```jsx example
return (
  <Div>
    <Span bold>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Span>
    <H4 bold>H4 Heading</H4>
  </Div>
)
```

## Italic text

To make text italic pass the property `italic` to component.

```jsx example
return (
  <Div>
    <Span italic>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Span>
    <H4 italic>H4 Heading</H4>
  </Div>
)
```

## Full width (or height)

To make text element take all remaining space in the parent container (according to its `flex-direction`), pass the `full` property.

This property just sets `flex: 1` to it.

```jsx example
return (
  <Row vAlign='center'>
    <H4 full>Tesla Model S</H4>
    <Span description>1000 HP</Span>
  </Row>
)
```

## Sandbox

### Span

<Sandbox
  Component={Span}
  props={{
    children: 'Test text'
  }}
/>

### Header

<Sandbox
  Component={H1}
  props={{
    children: 'Test text'
  }}
/>