ADS Artemy Design System
VIT / statuses / states

Статусы и состояния

Цвет означает действие: зеленый - норма, желтый - скоро нужно действие, красный - проблема сейчас, оранжевый - рекомендация ВИТ, серый/синий - сервис и информация.

Как делать

  • Держи одну карту статусов для экрана, LED и документации.
  • Используй полосу как быстрый периферийный сигнал, а не как декор.

Смотреть

  • Рядом со статусом всегда должен быть текст или title.
  • Желтый означает скоро, красный означает проблема сейчас.

Не делать

  • Не добавлять новые цвета без системного смысла.
  • Не делать статус только тонкой иконкой.
HTML snippet 
<div class="lt-status-strip lt-status-strip--ok"></div>
<div class="lt-status-strip lt-status-strip--soon"></div>
<div class="lt-status-strip lt-status-strip--problem"></div>
<div class="lt-status-strip lt-status-strip--action"></div>
<div class="lt-status-strip"></div>
CSS classes / tokens 
.lt-status-strip
.lt-status-strip--ok      → --ds-success
.lt-status-strip--soon    → --ds-warning
.lt-status-strip--problem → --ds-error
.lt-status-strip--action  → --ds-vit-action
default                   → --ds-vit-service
loading

Считаю остатки

Показывать до появления свежего состояния шкафа.

empty

Данных по шкафу нет

Проверь подключение камеры или выбери другой шкаф.

warning

Через 8 минут будет риск

Добавь 6 стрипсов сейчас.

error

Не вижу лоток

Проверь окно камеры и положение лотка.

Как делать

  • Для каждого состояния дай причину и следующий шаг.
  • Формулируй состояние как фразу, которую поймет сотрудник кухни.

Смотреть

  • Loading и empty не должны выглядеть как ошибка.
  • Error должен быть редким и конкретным.

Не делать

  • Не писать "что-то пошло не так" без действия.
  • Не прятать offline в мелкую подпись.
HTML snippet 
<div class="ae-state-card ae-state-card--warning">
  <span class="ae-id">warning</span>
  <h3 class="ae-state-card__title">Через 8 минут будет риск</h3>
  <p class="ae-state-card__text">Добавь 6 стрипсов сейчас.</p>
</div>
CSS classes / tokens 
.ad-state-card
.ae-state-card--info
.ae-state-card--warning
.ae-state-card--error

--ad-soft-blue
--ad-soft-yellow
--ad-soft-red
--ds-warning
--ds-error
маслоок

Масло ок

последний тест: 12:10

камерасервис

Очисти окно

сигнал мутный 4 минуты

шкафпроблема

Шкаф не на связи

нет сигнала 2 минуты

Как делать

  • Собирай overview из одинаковых карточек, чтобы менеджер быстро сканировал панель.
  • Показывай критичные карточки первыми или визуально сильнее.

Смотреть

  • Карточка должна выдерживать короткие и длинные названия модулей.
  • Сервисные статусы отделяй от рабочих рисков.

Не делать

  • Не перегружать overview графиками внутри карточек.
  • Не показывать одинаково норму и аварию.
HTML snippet 
<div class="lt-field-card">
  <div class="lt-field-card__head"><span>масло</span><span>ок</span></div>
  <p class="lt-field-card__state">Масло ок</p>
  <p class="lt-field-card__meta">последний тест: 12:10</p>
  <div class="lt-status-strip lt-status-strip--ok"></div>
</div>
CSS classes / tokens 
.lt-field-card
.lt-field-card__head
.lt-field-card__state
.lt-field-card__meta
.lt-status-strip

--ds-success
--ds-error
--ds-vit-service

Все спокойно

Шкаф обновился, запас в норме, действие не требуется.

Есть рекомендация

Через 7 минут может просесть стрипс. Подготовь 6 штук, если поток не спадет.

Не вижу камеру шкафа 02

Проверь питание, окно камеры и последнее подключение. Не скрывай это состояние в мелкой подписи.

Как делать

  • Цвет только в линии, текст делает основную работу.
  • Заголовок сообщает состояние, текст дает следующий шаг.

Смотреть

  • Длинные заголовки должны переноситься без обрезки.
  • Отступ слева от линии не меньше 14 px.

Не делать

  • Не заливать весь блок красным или зеленым.
  • Не писать статус без действия.
HTML snippet
<div class="ae-notice ae-notice--error">
  <div>
    <h3 class="ae-notice__title">Не вижу камеру</h3>
    <p class="ae-notice__text">Проверь питание и окно камеры.</p>
  </div>
</div>
CSS classes / tokens
.ae-notice
.ae-notice--ok
.ae-notice--error
.ae-notice__title
.ae-notice__text
Камера на связи, последнее обновление 12:48.
Видимость лотков снижена: возможно, окно камеры загрязнено.
Нет подтверждения по второй полке, нельзя считать прогноз надежным.

Как делать

  • Каждая строка одна проверка.
  • Пиши причину человеческим языком.

Смотреть

  • Список должен сканироваться сверху вниз.
  • Ошибки не должны теряться среди ok-строк.

Не делать

  • Не показывать JSON/код ошибки сотруднику.
  • Не смешивать системную диагностику с инструкцией кухни.
HTML snippet
<div class="ae-validation-list">
  <div class="ae-validation-item">Камера на связи.</div>
  <div class="ae-validation-item ae-validation-item--warning">Видимость снижена.</div>
  <div class="ae-validation-item ae-validation-item--error">Нет подтверждения.</div>
</div>
CSS classes / tokens
.ae-validation-list
.ae-validation-item
.ae-validation-item--warning
.ae-validation-item--error