@qlean/york-web

Здесь лежат компоненты и утилиты, предназначенные для работы в веб-окружении.

Установка

$ npm i @qlean/york-web

Для нормальной работы компонентов в CSS должен быть доступен шрифт Museo Sans.

Респонсивность

В любом компоненте ряд пропсов может быть респонсивными, т.е. поддерживать разные значения для разных разрешений. Это не обязательно должно быть реализовано для каждого пропса. Респонсивные пропсы передаются в компонент через наборы со специальными именами — mobileProps, baseProps и wideProps. Пример:

<Button
  rank={1}
  mobileProps={{
    rank: 2,
  }}
/>

Эта кнопка будет использовать ранг 1 по умолчанию, но в мобильной версии это будет перекрыто рангом 2. Это должно работать для всех компонетов и пропсов, где это вообще осмыслено.

Расширение и композиция

Лучший способ расширить стили компонента, которые не поддерживаются пропсами — создать на его основе другой компонент с помощью styled:

const StyledText = styled(Text)`
  color: tomato;
  text-decoration: underline;
`

В некоторых случаях это неудобно. Например, мы хотим чтобы <Text> наследовал цвет родителя, тогда спасет color="inherit". Другой кейс — нужно расширить <Button/>, но не хочется возиться с переписыванием всех стилей, которые генерируются по умолчанию. Для этого в компоненте предусмотрен rank={0} который сбрасывает стили, но не устанавливает свои.

Если нужно переопределить стандартный html-тег компонента, то можно воспользоваться пропом as https://www.styled-components.com/docs/api#as-polymorphic-prop

<Text preset="header1" as="h1">
  Заголовок
</Text>