@finam/web-ui-kit-core

v4.0.0

Published

8 days ago

Core library for web-ui-kit

0High
0Medium
0Low

ekazim-finam

`@finam/web-ui-kit-core`

Наборы css-переменных и общеиспользуемых css-классов web-ui-kit

Пакет собран с помощью библиотеки vanilla-extract/css.

Темы

Темы вынесены в отдельные npm-пакеты. Подробнее в общей документации проекта.

Утилиты для стилизации

В модуле @finam/web-ui-kit-core/styles определены вспомогательные утилиты для составления готового набора css-классов реализующих определенную стилизацию (реализовано при помощи vanilla-extract/recipes):

sprinkles - содержит частоиспользуемые атомарные классы. Например display: flex
customScroll - стилизованный скроллбар. Применяется к элементу имеющему скроллбар
noScroll - константа с css-классом для скрытия полосы скроллбара
transition* - набор различных анимаций: grow, fade, slide. Примеряется к модальным окнам, снекбару
typography - стилизованный текст. Как и остальные функции возвращает строку из набора классов. Используется в одноименном компоненте Typography
button - стилизованная кнопка. Также дполнительно экспортируется константа buttonIconWrapper с набором классов для стилизации иконок внутри кнопки.
iconButton - стилизованная кнопка-иконка. В элемент кнопки в качестве содержимого передается иконка (svg).
toggleButton - стилизованная кнопка-переключатель. В элемент кнопки в качестве содержимого передается иконка (svg) и/или текст.
tag - стилизованный элемент в виде тега (обычно применяется к span)
tab - стилизованная кнопка для переключения вкладки. Также дополнительно экспортируются константы tabContentWrapper, с набором классов для добавления отступа вокруг текста, и tabCounterSpacing с набором классов для добавления отступа для Counter
counter - стилизованный счетчик. В элемент в качестве содержимого передается текст
avatar - стилизованная иконка. В элемент в качестве содержимого передается текст или иконка (svg).
input - набор классов для стилизации поля ввода

Ниже приведены параметры вышеуказанных функций.

`typography` ^

Варианты шрифта определяются макетами компонента Typography в figma

color - цвет текста. Возможные значения определяются семантическими токенами (из фигмы). По умолчанию default
weight - жирность шрифта. Возможные значения: normal, medium, semiBold, bold, extraBold, black. По умолчанию normal
variant - вариант шрифта. По умолчанию body16
tabularNumbers - флаг для включения моноширинности у чисел. По умолчанию false

Пример использования на обычном js:

import { typography } from '@finam/web-ui-kit-core/styles/typography';

// Вспомогательный текст
document.write(`
  <p class="${typography({
    variant: 'caption12',
    color: 'secondary',
  })}">
    Secondary text
  </button>
`);

При необходимости задания кастомного цвета, не поддерживаемого компонентом(что не рекомендуется делать), нужно использовать пропс color="custom", а сам цвет переопределять с помощью стилей в классах или обертках styled. Указание color="custom" позволит избежать проблем с переопределением стилей в css-каскаде.

`button` ^

Основные свойства и их значения определяются макетами компонента Button в figma

size - размер. Возможные значения по убыванию размера: l, m, s, xs. По умолчанию medium.
variant - вариант (основной стиль) отображения. Возможные значения: primary, secondary, outline, text, ghost. По умолчанию primary.
color - цвет. Применяется для определения основного цвета кнопки. Возможные значения: default, positive, negative, warning, alternative. По умолчанию default.
alternativeType - тип для альтернативного цвета. Влияет только на вариант outline c цветом alternative. Возможные значения: inverse, ondark, onlight. По умолчанию inverse.
state - состояние. Задает временное состояние для кнопки (блокировку, загрузку). Возможные значения: default, disabled, loadingText (для отображения текста загрузки), loadingOverlay (для отображения иконки загрузки поверх скрытого содержимого кнопки). По умолчанию default.
fullWidth - флаг, применяет ширину в 100% относительно контейнера. По умолчанию false.
iconOnly - флаг, обозначающий что у элемента внутри есть только иконка (без текста).

buttonIconWrapper - объект с набором готовых классов, которые нужно применить к иконке (svg-элементу) внутри кнопки. Значением объекта является строка содержащая набор классов разделенных пробелами. Ключом является расположение относительно кнопки:

center - для показа по центру кнопки вместо её текстового содержимого;
left - для расположения слева от текста;
right - для расположения справа от текста;
overlay - для расположения над содержимым кнопки (используется для иконки загрузки в сочетании с флагом loadingOverlay утилиты button).

Пример использования на обычном js:

import { button, buttonIconWrapper } from '@finam/web-ui-kit-core/styles/button';

// Обычная большая кнопка с иконкой
document.write(`
  <button class="${button({
    size: 'l',
  })}">
    <span class="${buttonIconWrapper.left}">
      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" /></svg>
    </span>
    Large button
  </button>
`);

const loaderIcon = `
  <svg viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="9.2" strokeWidth="1.6" fill="none">
      <animateTransform
        attribute-type="xml"
        attribute-name="transform"
        type="rotate"
        from="0 12 12"
        to="360 12 12"
        dur="1.4s"
        repeat-count="indefinite"
      />
    </circle>
  </svg>
`;

// Кнопка с лоадером поверх кнопки
document.write(`
  <button class="${button({
    size: 'l',
    state: 'loadingOverlay'
  })}">
    Loading button
    <span class="${buttonIconWrapper.overlay}">
      ${loaderIcon}
    </span>
  </button>
`);

// Кнопка с лоадером рядом с текстом
document.write(`
  <button class="${button({
    size: 'l',
    state: 'loadingText'
  })}">
    <span class="${buttonIconWrapper.left}">
      ${loaderIcon}
    </span>
    Loading
  </button>
`);

`iconButton` ^

Макеты компонента IconButton в figma

size - размер. Возможные значения по убыванию размера: l, m, s. По умолчанию m.
color - цвет. Возможные значения: primary, secondary, static. По умолчанию secondary.

Пример использования на обычном js:

import { iconButton } from '@finam/web-ui-kit-core/styles/iconButton';

// Большая кнопка с акцентным выделением при наведении
document.write(`
  <button class="${iconButton({
    size: 'l',
    color: 'primary'
  })}">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" /></svg>
  </button>
`);

`toggleButton` ^

Макеты компонента ToggleButton в figma

size - размер. Возможные значения по убыванию размера: l, m, s, xs. По умолчанию m.
variant - вариант (основной стиль) отображения. Возможные значения: fill, outline, ghost. По умолчанию fill.
color - цвет. Возможные значения: primary, positive, negative, warning, secondary. По умолчанию primary.
state - состояние. Задает временное состояние для кнопки (блокировку, активность). Возможные значения: default, disabled, activated. По умолчанию default.
iconOnly - флаг, обозначающий что у элемента внутри есть только иконка (без текста).

toggleButtonLabel - css-класс для внутреннего текстового элемента (span).

Пример использования на обычном js:

import { toggleButton, toggleButtonLabel } from '@finam/web-ui-kit-core/styles/toggleButton';

// Большая кнопка с иконкой и текстом
document.write(`
  <button class="${toggleButton({
    size: 'l',
  })}">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" /></svg>
    <span class="${toggleButtonLabel}">
      Large button
    </span>
  </button>
`);

`filterButton` ^

Макеты компонента FilterButton в figma

size - размер. Возможные значения по убыванию размера: l, m, s, xs. По умолчанию m.
color - цвет. Возможные значения: primary, secondary. По умолчанию primary.
state - состояние. Задает временное состояние для кнопки (блокировку, активность). Возможные значения: default, disabled, activated. По умолчанию default.
iconOnly - флаг, обозначающий что у элемента внутри есть только иконка (без текста).

filterButtonLabel - css-класс для внутреннего текстового элемента (span).

Пример использования на обычном js:

import { filterButton, filterButtonLabel } from '@finam/web-ui-kit-core/styles/filterButton';

// Большая кнопка с иконкой и текстом
document.write(`
  <button class="${filterButton({
    size: 'l',
  })}">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" /></svg>
    <span class="${filterButtonLabel}">
      Large button
    </span>
  </button>
`);

`link` ^

Макеты компонента Link в figma

color - цвет. Возможные значения: primary, secondary, ondark, inverse. По умолчанию primary.
hasUnderline - подчеркивание. По умолчанию false

Пример использования на обычном js:

import { link, typography } from '@finam/web-ui-kit-core/styles';

document.write(`
  <a class="${link({
    color: 'primary',
    hasUnderline: true,
  })}">
    <span class="${typography({
      color: 'inherit',
      variant: 'body16',
    })}">
      Текст ссылки
    </span>
  </a>
`);

`customScroll` ^

size - размер скроллбара. Возможные значения: small, medium. По умолчанию medium

`transitionFade`, `transitionGrow` ^

inner - флаг, определяющий применять ли стили к вложенному элементу относительно текущего. По умолчанию false

`transitionSlide`

inner - флаг, определяющий применять ли стили к вложенному элементу относительно текущего. По умолчанию false
direction - направление движения элемента. Возможные значения: left, right, up, down
marginThreshold - отступ от края окна. Возможные значения: none, medium. По умолчанию none

`tag` ^

Макеты компонента Tag в figma

size - размер. Возможные значения по убыванию размера: l, m, s, xs. По умолчанию m.
variant - вариант (основной стиль) отображения. Возможные значения: fill, outline. По умолчанию fill.
color - цвет. Возможные значения: info, brand, success, danger, warning. По умолчанию info.
colorType - тип цветовой схемы. Задается при специфичном фоне под компонентом. Возможные значения: default, onlight. По умолчанию default.
priority - тип цветовой схемы. Задает насыщенность цвета. Возможные значения: high, low. По умолчанию high.
iconOnly - флаг, обозначающий что у элемента внутри есть только иконка (без текста).

tagIconWrapper - объект с css-классами для внутренней обертки иконки (span).

Пример использования на обычном js:

import { tag, tagIconWrapper } from '@finam/web-ui-kit-core/styles/tag';

// Большой тег с текстом и иконкой справа
document.write(`
  <span class="${tag({
    size: 'l',
  })}">
    Tag text
    <span class="${tagIconWrapper.right}">
      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" /></svg>
    </span>
  </span>
`);

`tab` ^

Макеты компонента Tab в figma

size - размер. Возможные значения: xl, l, m, s, xs. По умолчанию m
tabType - линейный или кнопочный вид. Возможные значения: line, buttons. По умолчанию line
fullWidth - флаг, применяет ширину в 100% относительно контейнера. По умолчанию false
vertical - флаг, меняет направление вкладок на вертикальное. По умолчанию false
buttonVariant - цвет кнопочной вкладки. Возможные значения primary, secondary, ghost, outline, alternative. По умолчанию primary
lineVariants - цвет линейной вкладки. Возможные значения primary, alternative, ondark, ondarkSecondary. По умолчанию primary
iconOnly - флаг, меняет отступы для случая если во вкладке только иконка без текста. По умолчанию false
selected - флаг, определяет состояние кнопки. По умолчанию false

Пример использования на обычном js:

import { tab, tabContentWrapper } from '@finam/web-ui-kit-core/styles/tab';

// Большой Tab с иконкой и текстом
document.write(`
  <button class="${tab({
    size: 'large',
  })}">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" /></svg>
    <span class="${tabContentWrapper.large}">
      Large tab
    </span>
  </button>
`);

`counter` ^

Макеты компонента Counter в figma

size - размер. Возможные значения: xl, l, m, s. По умолчанию m
color - цвет. Возможные значения: default, secondary, onbrand,positive, negative , warning, brand. По умолчанию используется brand. default оставлен для обратной совместимости

Пример использования на обычном js:

import { counter } from '@finam/web-ui-kit-core/styles/counter';

// Большой Counter
document.write(`
  <span class="${counter({
    size: 'large',
  })}">
    5
  </span>
`);

`avatar` ^

Макеты для компонента Avatar в figma Варианты:

shadow - добавляет box-shadow
loading - скелет для состояния загрузки
default - обычное состояния

Пример использования на обычном js:

import { avatar } from '@finam/web-ui-kit-core/styles/avatar';

// Default Avatar
document.write(`
  <div class="${avatar.default}">
    Р
  </div>
`);

`input` ^

Макеты компонента Input в figma

inputRoot - утилита для стилизации родительсткого контейнера (div) компонента поля ввода. Параметры:

variant - вариант отображения. Возможные значения: primary, outline, ghost. По умолчанию primary
size - размер. Возможные значения: l, m, s, xs. По умолчанию l
hasFocus - флаг, определяющий есть ли фокус в поле ввода. Не определяется стилями самого элемента input, потому что нужно менять стили родительского элемента. По умолчанию false
state - состояние поля. Возможные значения: default, error (выделяет красным, например, при ошибке валидации), disabled (заблокированное поле, недоступное для редактирования). По умолчанию default
alignRight - флаг, применяющий выравнивание текста по правому краю в поле ввода и подписи. По умолчанию false
withLabel - флаг, определяющий есть ли у поля текстовая подпись его имени (label). Нужен чтобы менялись отступы в элементе input. По умолчанию false

Для дочерних элементов верстки необходимы следующие css-классы и утилиты:

inputContainer - css-класс для внутренней обертки (div) над элементами input и label.

inputElement - css-класс для элемента input.

inputLabel - утилита для стилизации элемента label. Имеет параметры:

size - размер. Возможные значения: l, m. Других размеров нет, потому что для них label не показывается. По умолчанию l
hasValue - флаг, определяющий введено ли в поле ввода какое-то значение. Нужно чтобы изменить позицинирование элемента и расположить его над введенным значением. По умолчанию false
state - состояние поля. Возможные значения: default, active (при активном фокусе в поле меняет цвет на акцентный, применяется вместе с параметром hasFocus из inputRoot), error (красный текст), disabled (серый текст для заблокированного поля). По умолчанию default

inputHighlight - css-класс для выделения введенного значения в поле ввода при фокусе. Применяется к элементу span, распологаемому рядом с элементом input, внутрь которого передается введенное значение (value).

inputAdornment - css-класс для обертки (div) над вспомогательными иконками или текстом, распологаемыми в правой части контейнера поля ввода.

inputLeftAdornment - css-класс для обертки (div) над вспомогательными иконкой или компонентом, распологаемыми в левой части контейнера поля ввода.

inputIconWrapper - объект с css-классами для внутренней обертки иконки (div). Делится по цвету обрачиваемой иконки:

default - цвет в состоянии по умолчанию
secondary - вторичный цвет для иконки замка (режима поля только для чтения)

Пример использования на обычном js (в статичном виде, без определениия состояния фокуса):

import {
  inputRoot,
  inputContainer,
  inputElement,
  inputLabel,
  inputAdornment,
  inputLeftAdornment,
  inputIconWrapper,
} from '@finam/web-ui-kit-core/styles/input';

// Поле ввода с иконкой и подписью
document.write(`
  <div class="${inputRoot({
    size: 'l',
    withLabel: true,
  })}">
    <div class="${inputLeftAdornment}">
      <div class="${inputIconWrapper.default}">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" /></svg>
      </div>
      `${/* Вместо иконки здесь можно отобразить что-то другое, например иконку-переключатель */}`
    </div>
    <div class="${inputContainer}">
      <input
        class="${inputElement}"
        type="text"
        value="qwerty"
      />
      <label class="${inputLabel({
        size: 'l',
        hasValue: true,
      })}">
        Input label
      </label>
    </div>
    <div class="${inputAdornment}">
      <div class="${inputIconWrapper.default}">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" /></svg>
      </div>
      `${/* Вместо иконки здесь можно отобразить что-то другое, например вспомогательный текст или
      иконку-переключтель*/}`
    </div>
  </div>
`);

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@finam/web-ui-kit-core

Темы

Утилиты для стилизации

typography ^

button ^

iconButton ^

toggleButton ^

filterButton ^

link ^

customScroll ^

transitionFade, transitionGrow ^

transitionSlide

tag ^

tab ^

counter ^

avatar ^

input ^

`@finam/web-ui-kit-core`

`typography` ^

`button` ^

`iconButton` ^

`toggleButton` ^

`filterButton` ^

`link` ^

`customScroll` ^

`transitionFade`, `transitionGrow` ^

`transitionSlide`

`tag` ^

`tab` ^

`counter` ^

`avatar` ^

`input` ^