# @eisgs/typography

> В зависимости от типа меняется размер и начертание текста.

Latest version **1.3.1** (published 2023-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @eisgs/typography
pnpm add @eisgs/typography
yarn add @eisgs/typography
bun add @eisgs/typography
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2023-03-02 |
| First published | 2021-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | traidersu, krll_mdntsv, lzdyd |

## Links

- npm: https://www.npmjs.com/package/@eisgs/typography
- npm.io page: https://npm.io/package/@eisgs/typography

## Recent versions

- 1.3.1 (latest) — 2023-03-02
- 1.3.0 — 2022-06-02
- 1.1.2 — 2022-01-26
- 1.1.0 — 2021-12-29
- 1.0.7 — 2021-09-17
- 1.0.6 — 2021-07-16
- 1.0.5 — 2021-06-07
- 1.0.4 — 2021-06-04
- 1.0.3 — 2021-06-01
- 1.0.2 — 2021-05-31
- 1.0.1 — 2021-04-30

## README

### Типы

В зависимости от типа меняется размер и начертание текста.

```jsx
  const sampleText = 'Съешь же ещё этих мягких французских булок, да выпей чаю';

  <>
    <Typography type="h1">{sampleText}</Typography>
    <Typography type="h2">{sampleText}</Typography>
    <Typography type="h3">{sampleText}</Typography>
    <Typography type="h4">{sampleText}</Typography>
    <Typography type="p1">{sampleText}</Typography>
    <Typography type="p2">{sampleText}</Typography>
    <Typography type="p3">{sampleText}</Typography>
    <Typography type="p2compact">{sampleText}</Typography>
    <Typography type="caption">{sampleText}</Typography>
    <Typography type="button">{sampleText}</Typography>
    <Typography type="link">{sampleText}</Typography>
    <Typography type="plink">{sampleText}</Typography>
  </>
```
### Вес шрифта

`weight` явно задает вес шрифта независимо от типа.
```jsx
  const sampleText = 'Съешь же ещё этих мягких французских булок, да выпей чаю';

  <>
    <Typography type="p1" weight='bold'>{sampleText}</Typography>
    <Typography type="p1" weight='bolder'>{sampleText}</Typography>
    <Typography type="p1" weight='lighter'>{sampleText}</Typography>
    <Typography type="p1" weight='normal'>{sampleText}</Typography>
    <Typography type="p1" weight={500}>{sampleText}</Typography>
    <Typography type="p1" weight={700}>{sampleText}</Typography>
    <Typography type="p2">{sampleText}</Typography>
    <Typography type="p2" weight='bold'>{sampleText}</Typography>
    <Typography type="p3">{sampleText}</Typography>
    <Typography type="p3" weight='bold'>{sampleText}</Typography>
  </>
```
## Расстояние между символами

`spacing` явно задает расстояние между буквами независимо от типа.
```jsx
  const sampleText = 'Съешь же ещё этих мягких французских булок, да выпей чаю';

  <>
    <Typography type="p1" spacing={1}>{sampleText}</Typography>
    <Typography type="p1" spacing={2}>{sampleText}</Typography>
    <Typography type="p1" spacing={3}>{sampleText}</Typography>
    <Typography type="p1" spacing={4}>{sampleText}</Typography>
    <Typography type="p1" spacing={5}>{sampleText}</Typography>
    <Typography type="p1" spacing={6}>{sampleText}</Typography>
  </>
```
### Высота строки

`lineHeight` явно задает высоту строки в пикселях независимо от типа.
```jsx
  const sampleText = 'Съешь же ещё этих мягких французских булок, да выпей чаю';

  <>
    <Typography type="p1" lineHeight={10}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={20}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={30}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={40}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={50}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={60}>{sampleText}</Typography>
  </>
```
### Обрезка текста

`ellipsisMaxLines` обрезает текст при превышении указанного количества строк
```jsx
  const sampleText = (count) => 'Съешь же ещё этих мягких французских булок, да выпей чаю. '.repeat(count);

  <div style={{maxWidth: 800}}>
    <Typography type="h1" ellipsisMaxLines={1}>{sampleText(3)}</Typography>
    <Typography type="h2" ellipsisMaxLines={2}>{sampleText(3)}</Typography>
    <Typography type="h3" ellipsisMaxLines={1}>{sampleText(4)}</Typography>
    <Typography type="h4" ellipsisMaxLines={3}>{sampleText(10)}</Typography>
    <Typography type="p1" ellipsisMaxLines={1}>{sampleText(10)}</Typography>
    <Typography type="p2" ellipsisMaxLines={2}>{sampleText(10)}</Typography>
    <Typography type="p3" ellipsisMaxLines={2}>{sampleText(10)}</Typography>
    <Typography type="p2compact" ellipsisMaxLines={2}>{sampleText(10)}</Typography>
    <Typography type="caption" ellipsisMaxLines={1}>{sampleText(10)}</Typography>
    <Typography type="button" ellipsisMaxLines={2}>{sampleText(10)}</Typography>
    <Typography type="link" ellipsisMaxLines={3}>{sampleText(10)}</Typography>
    <Typography type="link" ellipsisMaxLines={1}>{sampleText(10)}</Typography>
    <Typography type="plink" ellipsisMaxLines={3}>{sampleText(10)}</Typography>
    <Typography type="plink" ellipsisMaxLines={1}>{sampleText(10)}</Typography>
  </div>
```

### Текст ссылка
```jsx
  const text = 'Тестовый компонент';

  <Typography type="link">{text}</Typography>
```

### Тип устройства для отображения (ИЖС)

Доступно три значения `desktop`, `tablet`, `mobile`. Отображение для `desktop` и `tablet` идентично.

```jsx
  import { Radio } from '@eisgs/radio';

  const text = 'Тестовый компонент';
  const options = ['desktop', 'tablet', 'mobile'].map(item => ({id: item, description: item, code: item}));
  const types = ['h1', 'h2', 'h3', 'h4', 'h5', 'p1', 'p2', 'p3', 'caption', 'button', 'buttonSmall', 'link', 'plink'];
  
  const [view, setView] = React.useState(options[0].code);

  <>
    <Radio options={options} onChange={setView} value={view} />
    {types.map(type => <Typography type={type} view={view} key={type}>{text}</Typography>)}
  </>
```

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