# Typography

## Installation
`npm i @snack-uikit/typography`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/typography` предоставляет компонент `Typography` для единообразного отображения текстового контента с поддержкой различных шрифтов, размеров и ролей.
- Компонент позволяет задавать типографику через комбинацию трёх обязательных пропсов: `family` (шрифт), `purpose` (роль текста) и `size` (размер), что обеспечивает гибкость и консистентность оформления текста во всём приложении.
- Поддерживает пять типов шрифтов: `sans` (основной), `light` (лёгкий), `link` (для ссылок), `mono` (моноширинный) и `crossed-out` (зачёркнутый).
- Предоставляет пять ролей текста: `display` (крупные заголовки), `headline` (заголовки), `title` (подзаголовки), `label` (метки) и `body` (основной текст).
- Поддерживает три размера: `s` (малый), `m` (средний) и `l` (большой).
- Позволяет выбирать HTML-тег для рендеринга (`span`, `h1`-`h6`, `div`, `label`, `p`), что обеспечивает правильную семантику и доступность.
- Автоматически генерирует предустановленные варианты компонента вида `Typography.{Family}{Purpose}{Size}` (например, `Typography.SansDisplayS`), которые можно использовать без указания пропсов `family`, `purpose` и `size`.
- Figma: [`Typography`](https://www.figma.com/file/evs7EwrZF4NikYiHp4Fydr/On-boarding-Typography?node-id=35-1948&t=bBnwJl7MOre5YUHS-0).

## Example

```tsx
import { Typography } from '@snack-uikit/typography';

function Example() {
  return (
    <Typography 
      family='sans'
      purpose='display'
      size='s'
      tag='h1'
      className='some-element'
    >
      Some text
    </Typography>
  );
}
```

Также чтобы не указывать пропсы `family`, `purpose` и `size`, воспользуйтесь нужным предустановленным вариантом:

```tsx
import { Typography } from '@snack-uikit/typography';

function Example() {
  return (
    <Typography.SansDisplayS tag='h1' className='some-element'>
      Some text
    </Typography.SansDisplayS>
  );
}
```

Все компоненты вида `<Typography.{Family}{Purpose}{Size} />` генерируются автоматически при выполнении команды `npm run build:packages`.

## Как добавить новый компонент такого вида?
1. Добавить новое свойство в один или несколько объектов FAMILY, PURPOSE, SIZE в файле `constants.ts`, который лежит в  `typography/src/components/constants.ts`
2. Запустить скрипт compile в package.json пакета `@typography`
    ```json
    "npm run build:typography-components && npm run build:constants && npm run build:index"
    ```
3. Готово! Можете использовать `Typography` с новым свойством

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Typography
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| size* | enum Size: `"s"`, `"l"`, `"m"` | - | Размер |
| purpose* | enum Purpose: `"label"`, `"body"`, `"title"`, `"display"`, `"headline"` | - | Роль |
| family* | enum Family: `"link"`, `"sans"`, `"light"`, `"mono"`, `"crossed-out"` | - | Шрифт |
| tag | enum Tag: `"span"`, `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`, `"h6"`, `"div"`, `"label"`, `"p"` | span | HTML-тег |
| className | `string` | - | CSS-класс |
| children | `ReactNode` | - | Контент |


[//]: DOCUMENTATION_SECTION_END