Структура для описания элемента

При описании элемента следует придерживаться следующей структуры

1. Общее описание элемента
2. Изображение элемента
3. Описание функционала элемента
4. Описание особенностей состояний

Общее описание элемента

Содержит общую информацию о смысле, назначении или идее элемента. Этот смысл может быть изложен как в заголовке, так и подробнее описан в описании под названием.

Пример заголовка

"Раздвоенная плашка для открытия плашки авторизации - десктоп" - самодостаточное название элемента.

Пример описания

Элемент виден всегда/после авторизации/если пользователь xyz. В нем можно увидеть/изменить информацию о xyz.

Изображение элемента

1. Источником изображения может выступать макет или сам сайт. Главное чтобы оно иллюстрировало описываемый элемент.
2. Ключевые блоки, которые будут описаны следует выделить числами на самом изображении.
3. Если отображение на десктопе и на телефоне отличаются - нужно прикрепить оба отображения.
4. Не нужно добавлять отображения разных UI состояний элемента.

Пример

Описание функционала элемента

1. Описание функционала элемента кладется в блок details(если количество текста описания - большое) или в блок info (если количество текста описания - маленькое)
2. При описании элемента не нужно уточнять интерактив (иконка залилась цветом на ховере, плашка появилась из опасити).
3. Описать нужно точечно ответственность описываемого элемента. Если элемент триггерит какую-то цепочку событий - нужно добавить ссылку где описана эта механика, а не описывать её под элементом.
4. Если элемент меняет отображение описываемого элемента (включает режим редактирования например) - это описывается в особенностях.
5. Если механика элемента на десктопе отличается от той что на мобильном устройстве - нужно описать взаимодействие для двух вариантов.

Пример с - details

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Пример с -info

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

При описании элемента могут возникать следующие случаи:

• Необходимо указать связь элемента с каким либо другим элементом. В таких случаях следует прикрепить ссылку на документ описывающий поведение этого элемента или оставить следующую пометку - (?) (она будет сообщать о том что требуется ссылка).
  
  Например: Кнопка в элемент вызывает модальное окно у которого свое поведение
  
  

• Необходимо сделать описание для формул и описать принцип расчетов в элементе. В таких случай следует использовать выпадающий список с подписью - Описание расчетов и формул.
  
  Например:

  Описание расчетов и формул

  Для расчета текущей прибыли в процентах применяется следующая формула :

  Прибыль в процентах

  Прибыль в процентах = ((Стоимость монеты на рынке / Средняя стоимость монеты в портфолио) - 1) * 100

Описание особенностей состояний

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

1. Заголовок - Описание особенностей состояний
2. Описание особенностей, где каждая сформирована через блок details(если количество текста описания - большое) или блок info (если количество текста описания - маленькое)

Пример с использованием всех требований описанных ранее

Содержит информацию об активах в портфолио с возможностью просмотра, редактирования, добавления и удаления активов.

1. Порядковый номер актива в таблице - зависит от порядка в котором активы были указаны при обработке портфолио на этапе инициализации из localStorage.

2. Информация об Активе

Блок содержит короткую информацию об активе, его лого и тикер. Вся информация для блока берется на основании данных с бекенда.

3. Цена - текущая цена актива на рынке.

4. Текущая прибыль - значение текущей нереализованной прибыли.

5. Средняя цена - средняя цена одной монеты конкретного актива на балансе.

6. Холдинги - текущее количество монет на балансе.

7. Добавление транзакции - вызывает модальное окно добавления транзакции по активу (?).

Существуют следующее особенности состояний

1. Постраничная пагинация.

Отвечает за то, сколько активов можно видеть в таблице одновременно.

Доступные опции - 10, 20, 30, 40, 50.

Для каждой опции применяется проверка - если элементов меньше чем в опции, то она скрывается и недоступна в выпадающем списке.

Если ни одна из опций недоступна - пагинация не отображается в таблице.

2. Сортировка активов по значению в колонке

В таблице существует возможность отсортировать активы по убыванию или по возрастанию.

По умолчанию применяется сортировка по колонке Холдинги по убыванию.

Особенности сортировки по колонкам:

• Активы - в учет берется основное имя монеты (серое значение), а не ее короткое значение
• Цена - в учет берется значение в USD, а не проценты
• Текущая прибыль - в учет берется значение в USD, а не проценты
• Холдинги - в учет берется значение в USD, а не количество монет