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'

# Компоненты типографии

Наследует [Text props](https://reactnative.dev/docs/next/text).

Набор компонентов, чтобы сделать текст понятным и легко читаемым для конечного пользователя.

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

## Span (спан)

Базовый компонент типографики - это `Span`, он используется для обычного текста.

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

## Заголовки

`H*` комопненты используются для заголовков или подзаголовков раздела или страницы, а также вставляют семантические теги в DOM на вебе.

```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`.

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

## Курсив

Чтобы сделать текст курсивом, передайте компоненту свойство `italic`.

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

## Полная ширина (или высота)

Вы можете сказать текстовому элементу занять всё доступное место в родительстком контейнере (в зависимости от его `flex-direction`). Для этого передайте свойство `full`.

Это свойство просто поставит элементу `flex: 1`.

```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'
  }}
/>