[FRNT-504] add specification for link component

src/ui/atoms/link/specification.mdx

@@ -0,0 +1,102 @@
+---
+name: link
+category: atoms
+package: 'woly'
+---
+
+`Ссылка` (html тег `<a>`) — это элемент навигации, который отвечает за взаимосвязь разделов веб-ресурса (или разных ресурсов) между собой.
+
+### Описание работы ссылки
+
+Клик по ссылке открывает другую страницу или запускает действие, например, за переход на другую страницу отвечает гиперссылка.
+Не рекомендуется использовать ссылки, которые ведут на ту же страницу, где расположена ссылка.
+Такие ссылки бесполезны и только запутывают пользователя, поскольку после перезагрузки страницы пользователь остается на том же месте, где был до этого.
+Исключение — интерфейсы с обновляемым контентом.
+
+Как и любой компонент ссылки обладают разными состояниями и адаптируются при взаимодействии пользователя с ними.
+Однако, важно упомянуть, что в отличие от кнопки у ссылки нет штатного состояния disabled (заблокирована), отвечающего за блокировку кнопки до наступления каких-либо событий, которые переводят ссылку в активное состояние.
+
+В основном выделяют 5 основных состояний при взаимодействии со ссылкой:
+
+- нормальное состояние (не посещённая ссылка) - этот компонент интерфейса является интерактивным и готов к использованию.
+- наведение мыши(:hover) - курсор расположен над ссылкой без клика.
+- visited (:visited) - ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор.
+- активное состояние (:active) - ссылка в процессе нажатия. Состояние очень быстрое, происходит когда пользователь уже кликнул на ссылку, но клавишу ещё не отпустил.
+  Помогает пользователю понять, что его клик сработал, и ему не нужно кликать по ней несколько раз, чтобы точно перейти на нужную страницу.
+- фокус (:focus) - визуально отображается после клика по ссылке, после нажатия курсором, но отпускании уже за границами ссылки, а также при работе с клавиатурой: если табом перенести фокус на ссылку появляется подчеркивание (в браузерах по умолчанию используется рамка синего цвета).
+  При наведении курсора мыши и в фокусе ссылка выглядит одинаково. Если ссылка в фокусе, то при нажатии клавиши Enter происходит переход по ссылке.
+
+## Различия между кнопкой и ссылкой
+
+Хотя область использования кнопки и ссылки достаточно размыта, можно выделить ряд основных случаев, когда рекомендуется использовать ссылку, а когда кнопку:
+
+- навигация между страницами — ссылка.
+- навигация по якорям — ссылка.
+- при вызове всплывающего окна чаще рекомендуется использовать кнопку, в редких случаях ссылку, например, если необходимо продублировать всплывающее окно страницей.
+- функция управления, не имеющая своего URL-адреса, — кнопка.
+
+Не рекомендуется использовать в работе ссылку-кнопку, т.к. она не будет иметь корректного URL-адреса и при наведении курсора на ссылку-кнопку в окне браузера (внизу) выведется «javascript:;» или «ТекущийАдрес/#».
+Браузер обработает ссылку-кнопку как ссылку и при правом клике предложит сохранить ссылку или поделиться ею, что не имеет смысла, так как ссылка-кнопка не имеет корректного адреса.
+
+## Оформление ссылок
+
+Рекомендуется придерживаться единого стиля при оформлении ссылок, это позволит пользователю быстрее ориентироваться на сайте.
+
+При наведении и фокусе у ссылки появляется подчеркивание, это помогает пользователю убедиться, что ссылка нажимается. Также, при наведении на ссылку изменяется курсор мыши со "стрелки" на «руку».
+При клике цвет ссылки может становиться темнее. Не рекомендуется добавлять при клике на рамку вокруг ссылки, поскольку в таком случае ссылка становится более похожей на кнопку, что может сбить пользователя с толку.
+
+Не рекомендуется использовать подчеркивание для текста, который не является ссылкой, даже если ссылки в интерфейсе оформлены без подчеркивания.
+Оставьте подчеркивание для ссылок, поскольку подчеркивание обеспечивает сильную предполагаемую доступность кликабельности, пользователи будут сбиты с толку и разочарованы, если подчеркнутый текст не имеет фактической доступности,
+соответствующей этому восприятию.
+
+## Использование иконок при оформлении ссылок
+
+Ссылку можно дополнять иконкой, которая в большинстве случаев располагается слева от текста, в редких случаях справа.
+Поскольку назначение иконки подсказать пользователю, какое действие выполняет ссылка, рекомендуется подбирать иконку по смыслу действия выполняемого ссылкой.
+
+Размеры иконки и текста ссылки должны совпадать по размеру и по цветовой гамме, в том числе во всех состояниях.
+
+Ссылку с иконкой можно подсвечивать как кнопку, делая подложку темнее. Реагировать на наведение и клик должна вся область подложки.
+
+## Цвета
+
+По умолчанию браузеры используют следующие стили для оформления ссылок:
+
+- стандартная, не посещенная ссылка — синий.
+- посещенная ссылка — фиолетовый.
+- активная ссылка — красный.
+- ссылка в состоянии фокуса имеет нижнее подчеркивание.
+- при наведении курсора мыши на ссылку изменяется указатель мыши со стрелки на иконку маленькой руки.
+
+Синий — самый распространенный и работоспособный цвет для ссылки. Пользователи однозначно воспринимают синий текст, как ссылку.
+
+Также, возможно использование и фирменного цвета проекта.
+
+Допустимо использовать красный для необратимых или негативных по смыслу действий, а зеленый для действий с положительной окраской.
+
+Если нужно показать пользователю, что он уже посещал эту страницу, посещенную ссылку можно отметить более темным цветом.
+
+Серые и черные ссылки нужно дополнительно выделять в интерфейсе. Можно сопровождать их иконками, или выстраивать в регулярную структуру, когда само расположение говорит о функциональном предназначении ссылки.
+
+## Название ссылок
+
+Рекомендуется подбирать название ссылок, исходя из смысла действия, которое выполняет ссылка.
+
+Так, если ссылка используется для запуска действия, то название должно однозначно говорить о том, что произойдет если на нее нажать,
+а также быть инфинитивом в совершенной форме, т.е. отвечать на вопрос «Что сделать?».
+
+Если ссылка используется для перехода на другую страницу — то из ее названия должно быть понятно, куда она ведет, без прочтения всего предложения или абзаца.
+Не рекомендуется использовать слова «тут» «здесь» и т.п., такие слова не несут смысловой нагрузки.
+
+## Оформление текста ссылок
+
+- при выборе шрифта убедитесь, что он разборчивый.
+- не рекомендуется использовать слишком большой или маленький размер шрифта, т.к. такие ссылки могут отвлекать пользователя,
+  создавать ненужный шум или вовсе сделать текст трудно читаемым.
+- не рекомендуется использовать пунктирное подчеркивание ссылок, т.к. в современных интерфейсах большинство ссылок работает без перезагрузки,
+  и пользователи не замечают или не понимают разницы в подчеркивании.
+- не рекомендуется размещать ссылки слишком близко друг к другу, поскольку пользователи с ограниченными двигательными навыками будет трудно взаимодействовать с такими компонентами.
+- не рекомендуется использовать шрифты с засечками или наклоном. Такие шрифты трудно сочетать с другими.
+- именование ссылок рекомендуется начинать с заглавной буквы, однако, не стоит капитализировать все буквы или использовать только строчные буквы в названии,
+  поскольку при таком оформлении текст становится неудобным для прочтения.
+- рекомендуется делать название ссылки достаточно большим, чтобы было удобно нажимать: 2–3 слова.