[FRNT-501] add spec for button (#132)

* add spec for button

* fix lint

* fix spec description

* update branch

* fix grammar

* Rename button-spec.mdx to specification.mdx

Co-authored-by: Sergey Sova <5620073+sergeysova@users.noreply.github.com>

src/ui/atoms/button/specification.mdx

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