[FRNT-503] add chip specification

src/ui/atoms/chip/specification.mdx

@@ -0,0 +1,102 @@
+---
+name: chip
+category: atoms
+package: 'woly'
+---
+
+Компонент `chip` используются для представления информации в небольших блоках, например, такой как контактные данные пользователя.
+
+Чипы позволяют пользователям делать выбор, выполнять действия, вводить информацию и атрибуты, фильтровать контент и выполнять задачи.
+Чипы могут использоваться как самостоятельно, так и внутри сложных компонентов.
+Наиболее распространенным примером использования чипа внутри сложного компонента является мультиселект.
+
+## Структура чипа
+
+Чип может быть как простым компонентом, так и составным.
+Простой компонент чип, как правило, состоит из текста и иконки.
+При этом сам компонент чип может быть как статичным, так и интерактивным (кликабельным).
+
+Статичный простой компонент чип выполняет только 1 действие - визуальное отображение контента.
+
+Работа простого кликабельного чипа очень схожа с действиями, которые выполняет кнопка:
+
+— реагирует на наведение курсора — становится темнее/светлее.
+— при нажатии на чип текст и иконка может опускаться на 1 px или менять цвет с добавлением рамки. Действие происходит после того, как чип отпущен, и только в том случае, если курсор остался над чипом.
+— фокус на чипе визуально отображается после клика на нему, после нажатия курсором, но отпускании уже за границами чипа, а также при работе с клавиатурой: если табом перенести фокус на чип появляется рамка или тень (в браузерах по умолчанию используется рамка синего цвета).
+Если чип в фокусе, то при нажатии клавиши Enter он нажимается и выполняет указанное действие.
+При клике мышью или табом на тачскрине чип получает фокус, но визуально не отображает его.
+
+Составной компонент чип обычно состоит из двух частей: лейбл чипа - часть, в которой расположен только текст или текст с иконкой, а также экшен блок - часть, в которой отображается кнопка-иконка.
+Чаще всего такие чипы используют при отображении выбранных значений в мультиселекте. При этом, правая часть чипа, в которой расположен экшен блок, обычно отвечает за удаление чипа.
+
+В составном чипе может быть кликабельной не только правая часть чипа с экшен блоком, но и одновременно с ней весь чип.
+Чаще всего такой подход используют при оформлении писем, когда пользователь добавил в поле для отправки письма несколько адресатов и может не только редактировать количество адресатов, т.е. удалять некоторых из них, но и переходить на профиль адресатов, кликнув на лейбл чипа.
+
+Чип, как любой интерактивный компонент, обладает рядом состояний, которые подсказывают пользователю как именно с ним взаимодействовать.
+При этом, каждое состояние чипа должно иметь особенности, которые отличают его от других состояний и окружающего макета.
+При переходе чипа в разные состояния не рекомендуется кардинально изменять его внешний вид, поскольку это может создать нежелательный визуальный шум.
+
+Существует 6 основных состояний чипа:
+
+— нормальное состояние — этот компонент интерфейса интерактивен и готов к использованию.
+— в фокусе — «ответ» элемента на действие: пользователь выделил чип с помощью клавиатуры или другого инструмента ввода. Без состояния фокуса навигация через клавиатуру или другие устройства с прямым вводом практически невозможна.
+— наведение мыши — состояние интерактивного элемента, когда пользователь наводит на него курсор.
+— активное состояние (или нажатый чип) — состояние, когда пользователь нажимает на чип.
+— неактивное состояние — этот компонент интерфейса не интерактивен сейчас, но может быть включён в будущем.
+Стоит отметить также, что если чип используется как составной компонент, неактивное состояние рекомендуется передавать полностью всему компоненту, не отключая его части по отдельности.
+В целом, лучше при возможности избегать неактивных компонентов – пусть они всегда будут активны, поскольку когда компонент отключен, он не может получить фокус с клавиатуры и удаляется из дерева доступности элементов страницы.
+Если пользователи не ввели нужную информацию или не совершили нужное действие, просто подсветите пустые строки или покажите предупреждение.
+
+Также существует ряд нюансов при работе с чипами.
+Так, например, неинтерактивные, статические чипы не обладают всеми перечисленными состояниями. Поскольку чип не интерактивен, у него отсутствуют активное, неактивное состояние и состояние наведения мыши, а в состоянии фокуса на чип нельзя перейти с помощью клавиатуры.
+Не рекомендуется наделять статичные чипы эти состояниями, поскольку это может ввести пользователя в заблуждение о том, что с чипом можно взаимодействовать и вызвать у пользователя неоправданные ожидания.
+
+При оформлении чипов в проекте рекомендуется учитывать не стиль макета в целом, но также стиль, приоритет и вес компонента, если чип используется как его часть.
+Единство стиля улучшает скорость и точность взаимодействия, помогает избежать ошибок.
+
+## Tень
+
+Тень на чипе создает ощущение, будто чип находится за пределами страницы, и это действительно привлекает внимание.
+Используйте тень, чтобы придать чипу "объем". При таком оформлении чипы более «кликабельны», поскольку затенение дает понять, что на чип можно нажать.
+Такие компоненты пользователи заметят быстрее, нежели плоские.
+Тени также могут быть использованы для обозначения различных состояний, например, фокусировке на кнопку.
+
+В случае, когда чип является составным компонентом, не рекомендуется использовать тень одновременно и на экшен блоке, и на всем чипе, поскольку в таком случае чип может выглядеть перегруженным.
+
+## Оформление текста
+
+Стиль надписи зависит от шрифта и от того, насколько легко его читать.
+
+При оформлении текста в чипах рекомендуется придерживаться определенных правил:
+
+— при выборе шрифта убедитесь, что он разборчивый.
+— не рекомендуется использовать слишком большой или маленький размер шрифта, т.к. такие чипы могут отвлекать пользователя, создавать ненужный шум или вовсе сделать текст трудно читаемым.
+— не рекомендуется использовать шрифты с засечками или наклоном. Такие шрифты трудно сочетать с другими.
+— не рекомендуется использовать слишком тонкий стиль шрифта, поскольку текст становится трудно читаемым для пользователей.
+— название чипов рекомендуется начинать с заглавной буквы, однако, не стоит капитализировать все буквы или использовать только строчные буквы в названии, поскольку при таком оформлении текст становится не удобным для прочтения.
+— шрифт должен быть средней плотности.
+— если чип используется как часть сложного компонента, например, мультиселекта, рекомендуется учитывать стилистику, в которой оформлен компонент-родитель.
+
+## Название чипов
+
+Если чип используется как самостоятельный компонент, то его название должно однозначно говорить о том, что произойдет если на него нажать.
+Плохо, если нужно прочитать все содержимое лайтбокса или тултипа, чтобы понять, что делает чип.
+
+Название чипа не должно занимать несколько строк, увеличивайте ширину чипа либо меняйте название.
+Также, нельзя сокращать название чипов или добавлять многоточие, если название не вмещается.
+
+## Размеры кнопок
+
+В основном выделяют 2 часто используемых размера для чипа:
+
+— маленькие — чаще всего используются как составные части сложных компонентов.
+
+— средние — используются в основном как самостоятельные компоненты, для отображения информации.
+
+## Иконки
+
+Чип может быть дополнен иконкой. Иконка располагается слева от текста чипа.
+В основном, иконка используется рядом с текстом для того, чтобы лучше проинформировать пользователя о роли чипа, о том, какая информация находится внутри чипа или какое действие выполнено над чипом.
+Так, к примеру, аватар, расположенный слева от текста чипа, подскажет, что внутри лежат данные пользователя, а иконка-галочка справа от текста чипа обозначит, что информация из чипа добавлен пользователем.
+Иконка должна соответствовать смыслу текста на чипе или действию, которое выполняется над чипом, иногда это позволяет пользователю понять назначение компонента до того, как он прочитал его название.
+Размеры компонентов — иконки и текста внутри чипа должны быть одинаковыми. Рекомендуется использовать один цвет для стилизации заливки иконки и текста чипа, при этом, это правило соблюдается и при изменении состояния чипа.