@snack-uikit/typography

Typography

Installation

npm i @snack-uikit/typography

Changelog

Example

import {Typography} from "@snack-uikit/typography";

<Typography 
  family={Typography.families.Sans}
  role={Typography.roles.Display}
  size={Typography.sizes.S}
  tag={Typography.tags.h1}
  className='some-element'
>
  Some text
</Typography>

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

<Typography.SansDisplayS tag={Typography.tags.h1} className='some-element'>
  Some text
</Typography.SansDisplayS>

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

Как добавить новый компонент такого вида?

1. Добавить новое свойство в один или несколько объектов Family, Role, Size в файле constants.ts, который лежит в typography/src/components/constants.ts
2. Запустить скрипт compile в package.json пакета @typography

   "npm run build:typography-components && npm run build:constants && npm run build:index"
   

3. Готово! Можете использовать Typography с новым свойством

Typography

Props

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