@sberbusiness/triplex-next-mcp-server 1.45.0-beta → 1.48.0-beta

package/bundle/components/StatusTracker.md

@@ -1,19 +1,19 @@
 ---
 component: StatusTracker
-category: Data Display
-figma-node: ""
-figma-file: ""
-related: [MarkerStatus, Alert, Card]
+category: Feedback
+related: [MarkerStatus, AlertProcess, Amount, Button]
 tokens:
-  - --triplex-next-StatusTracker-Approved_Background
-  - --triplex-next-StatusTracker-Approved_Color
-  - --triplex-next-StatusTracker-Rejected_Background
-  - --triplex-next-StatusTracker-Rejected_Color
-  - --triplex-next-StatusTracker-Waiting_Background
-  - --triplex-next-StatusTracker-Waiting_Color
-  - --triplex-next-StatusTracker-Warning_Background
-  - --triplex-next-StatusTracker-Draft_Background
-  - --triplex-next-StatusTracker-Border_Color
+  - StatusTracker.Background
+  - StatusTracker.Border_Color
+  - StatusTracker.Draft_Background
+  - StatusTracker.Draft_Color
+  - StatusTracker.Waiting_Background
+  - StatusTracker.Waiting_Color
+  - StatusTracker.Warning_Background
+  - StatusTracker.Rejected_Background
+  - StatusTracker.Rejected_Color
+  - StatusTracker.Approved_Background
+  - StatusTracker.Approved_Color
 stories: stories/StatusTracker/StatusTracker.stories.tsx
 version: "1.0"
 ---
@@ -22,125 +22,209 @@ version: "1.0"
 
 ## Назначение
 
-Карточка статуса документа с цветной отметкой (бекграунд слева) соответствующей
-типу. Композитный компонент: `Media` (иконка/превью) + `Header` (заголовок/
-сумма/описание) + `Body` (статус/алерт) + `Footer` (кнопки/описание).
+Карточка статуса документа: на фоне — декоративное цветное пятно, кодирующее `type`,
+поверх него — композиция из блоков `Media`, `Header`, `Body` и `Footer`. Типичное место —
+экран одного документа (платёжное поручение, заявка) после отправки в банк: иконка статуса,
+сумма, текущее состояние обработки и действия над документом.
 
-Используй когда: нужно показать state документа/заявки с акцентированной
-цветовой меткой (типовой виджет списка документов).
-Не используй когда: нужна просто инлайн-отметка статуса — возьми `MarkerStatus`.
+Используй когда: нужен крупный итоговый экран состояния одного объекта — «документ в обработке»,
+«отклонён банком», «исполнен» — с суммой, пояснением и действиями.
+
+Не используй когда:
+
+- Статус показывается в строке списка или таблицы — там нужен компактный `MarkerStatus`,
+  `Marker` или `TagColor`, а не карточка на всю высоту контейнера.
+- Нужно сообщение внутри формы или страницы — возьми `AlertProcess` / `AlertContext`.
+  `StatusTracker` — самостоятельный экран, а не врезка.
+- Нужен контейнер общего назначения с заголовком и контентом — это `Island` или `CardStatic`.
+- Нужно показать прогресс из нескольких шагов — это `Stepper` / `Step`.
 
 ---
 
-## Файловая структура
+## Варианты и props
 
-```text
-src/components/StatusTracker/
-├── StatusTracker.tsx                      # корневой + композиция (Media/Header/Body/Footer)
-├── enums.ts                               # EStatusTrackerType, EStatusTrackerVerticalAlign
-├── components/
-│   ├── StatusTrackerMedia.tsx
-│   ├── StatusTrackerHeader.tsx            # + Title, Sum, Description
-│   ├── StatusTrackerBody.tsx              # + Alert, Status
-│   ├── StatusTrackerFooter.tsx            # + Button, Description
-│   ├── StatusTrackerTitle.tsx
-│   ├── StatusTrackerSum.tsx
-│   ├── StatusTrackerDescription.tsx
-│   ├── StatusTrackerStatus.tsx
-│   ├── StatusTrackerAlert.tsx
-│   └── StatusTrackerButton.tsx
-├── styles/
-└── index.ts
-```
+### Обязательные props
 
----
+| Prop | Тип | Описание |
+|---|---|---|
+| `type` | `EStatusTrackerType` | Тип статуса документа: `DRAFT` / `WAITING` / `WARNING` / `REJECTED` / `APPROVED`. Влияет **только** на цвет декоративного фона — ни иконку, ни текст, ни набор блоков компонент по нему не подставляет |
 
-## Slot-композиция
+### Опциональные props
 
-```
-<StatusTracker type verticalAlign?>
-  <StatusTracker.Media>...</StatusTracker.Media>
-  <StatusTracker.Header>
-    <StatusTracker.Header.Title>...</Title>
-    <StatusTracker.Header.Sum>...</Sum>
-    <StatusTracker.Header.Description>...</Description>
-  </StatusTracker.Header>
-  <StatusTracker.Body>
-    <StatusTracker.Body.Status>...</Status>
-    <StatusTracker.Body.Alert>...</Alert>
-  </StatusTracker.Body>
-  <StatusTracker.Footer>
-    <StatusTracker.Footer.Button>...</Button>
-    <StatusTracker.Footer.Description>...</Description>
-  </StatusTracker.Footer>
-</StatusTracker>
-```
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `verticalAlign` | `EStatusTrackerVerticalAlign` | `EStatusTrackerVerticalAlign.TOP` | Выравнивание контента внутри карточки: `TOP` / `MIDDLE` / `BOTTOM`. Заметно, только когда контейнер выше содержимого |
+| `children` | `React.ReactNode` | — | Блоки `StatusTracker.Media`, `.Header`, `.Body`, `.Footer` в любом сочетании и порядке |
 
-Все slot'ы — `forwardRef<HTMLDivElement>` и прокидывают `HTMLAttributes<HTMLDivElement>`.
+Остальные props — стандартные атрибуты `div`
+(`IStatusTrackerProps extends React.HTMLAttributes<HTMLDivElement>`), уходят на корневой
+элемент через `...rest`.
 
----
+### Состав компонента
 
-## Варианты и props
+Публичный API — составной: субкомпоненты доступны и статическими свойствами, и отдельными
+экспортами — кроме `StatusTrackerAlert`, `StatusTrackerStatus` и `StatusTrackerStatusGroup`:
+они доступны только статическими свойствами, из barrel `index.ts` их нет.
 
-### `IStatusTrackerProps`
+**Известное ограничение, не замысел.** Интерфейс `IStatusTrackerStatusGroup` не экспортируется
+ниоткуда, поэтому типизировать обёртку над `StatusTracker.Body.StatusGroup` потребителю нечем.
+Добавление трёх экспортов аддитивно и не ломающее — уместно отдельной задачей, как это уже
+сделали в 1.48.0 для `IUploadZoneProps`.
 
-| Prop | Тип | Default | Описание |
+| Составной путь | Компонент | Корневой DOM | Своё, сверх `className` + `...rest` |
 |---|---|---|---|
-| `type` | `EStatusTrackerType` | — | Цветовой тип метки (DRAFT, WAITING, WARNING, REJECTED, APPROVED). |
-| `verticalAlign?` | `EStatusTrackerVerticalAlign` | `TOP` | Вертикальное выравнивание children: TOP/MIDDLE/BOTTOM. |
-| `...HTMLAttributes<HTMLDivElement>` | — | — | Стандартные атрибуты корня. |
+| `StatusTracker.Media` | `StatusTrackerMedia` | `div` | — контейнер под статусную иконку размера 84 |
+| `StatusTracker.Header` | `StatusTrackerHeader` | `div` | — |
+| `StatusTracker.Header.Title` | `StatusTrackerTitle` | `h3` (`Title` size H3, BOLD) | — |
+| `StatusTracker.Header.Sum` | `StatusTrackerSum` | `h1` (`Title` size H1, SEMIBOLD) | `amountProps: IAmountProps` — обязательный, уходит в `Amount` как есть |
+| `StatusTracker.Header.Description` | `StatusTrackerDescription` | `span` (`Text` B3, SECONDARY) | — |
+| `StatusTracker.Body` | `StatusTrackerBody` | `div` | — |
+| `StatusTracker.Body.Status` | `StatusTrackerStatus` | `div` (`MarkerStatus`) | принимает `IMarkerStatusProps` целиком (`status` обязателен) |
+| `StatusTracker.Body.StatusGroup` | `StatusTrackerStatusGroup` | `div` | — колонка из нескольких `Status`, центрируется целиком |
+| `StatusTracker.Body.Alert` | `StatusTrackerAlert` | `div` (`AlertProcess`) | принимает `IAlertProcessProps` целиком (`type` обязателен); оборачивает `children` в `Text` B3 |
+| `StatusTracker.Footer` | `StatusTrackerFooter` | `div` | — |
+| `StatusTracker.Footer.Button` | `StatusTrackerButton` | `button` (`Button`) | `Exclude<TButtonProps, IButtonLinkProps>`; `block` проставляется принудительно |
+| `StatusTracker.Footer.Description` | `StatusTrackerDescription` | `span` | тот же компонент, что и в `Header` |
+
+Блоки необязательны: карточка валидна и с одним `Media`. Порядок блоков в DOM = порядок
+в JSX — компонент не сортирует `children` и не проверяет их тип.
+
+### Что компонент не делает сам
+
+- Не выбирает иконку по `type` — `Media` заполняет потребитель (`WaitStsIcon84`,
+  `WarningStsIcon84`, `ErrorStsIcon84`, `SuccessStsIcon84` из `@sberbusiness/icons-next`).
+- Не связывает `type` со `status` у `Body.Status` и с `type` у `Body.Alert` — это три
+  независимых значения, согласованность на стороне потребителя.
+- Не задаёт себе размеры: `width: 100%`, `height: 100%`, `min-height` 318px (258px на `≤ sm`).
+  Ширину и высоту определяет контейнер.
 
-### `EStatusTrackerType`
+---
 
-| Value | Поведение |
-|---|---|
-| `DRAFT` | Нейтральный draft-фон (`--StatusTracker-Draft_Background`). В `typeToClassNameMap` **не маппится** — цветная метка не рендерится (background остаётся базовым). |
-| `WAITING` | Жёлто-серый. |
-| `WARNING` | Оранжевый (только background). |
-| `REJECTED` | Красный. |
-| `APPROVED` | Зелёный. |
+## Дизайн-токены
 
-### `EStatusTrackerVerticalAlign`
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/StatusTracker.ts`.
 
-| Value | Поведение |
-|---|---|
-| `TOP` | Default — выравнивание сверху (класс не применяется). |
-| `MIDDLE` | `styles.verticalAlignMiddle`. |
-| `BOTTOM` | `styles.verticalAlignBottom`. |
+```text
+StatusTracker.Background
+StatusTracker.Border_Color
+StatusTracker.Draft_Background
+StatusTracker.Draft_Color
+StatusTracker.Waiting_Background
+StatusTracker.Waiting_Color
+StatusTracker.Warning_Background
+StatusTracker.Rejected_Background
+StatusTracker.Rejected_Color
+StatusTracker.Approved_Background
+StatusTracker.Approved_Color
+```
+
+Декоративный фон собран из двух слоёв-эллипсов: `statusTrackerBackground` (размытие
+`blur(50px)`) берёт токен `*_Background`, `statusTrackerColor` поверх него — токен `*_Color`.
+
+Набор токенов асимметричен: у `WARNING` собственного `Warning_Color` нет — оба слоя
+используют `Warning_Background`. Это не опечатка в стилях, а текущее состояние палитры;
+если понадобится развести слои, токен придётся добавить и в
+`DesignTokens/components/StatusTracker.ts`, и в LESS.
+
+Токены `Draft_*` и `Waiting_*` по умолчанию ссылаются на одну и ту же палитру, поэтому
+`DRAFT` и `WAITING` выглядят одинаково. Токены при этом раздельные — потребитель может
+развести их темой, и схлопывать их в один нельзя.
 
 ---
 
 ## Инварианты
 
-- **`forwardRef<HTMLDivElement>`** на корне и каждом slot'е — не убирать.
-- **Все slot'ы используют один CSS-класс `statusTrackerChild`** — они взаимозаменяемы на уровне layout, порядок в DOM определяет порядок рендера.
-- **Двухслойный background (`statusTrackerBackground` + `statusTrackerColor`)** — нужен для анимации перехода между типами (ключ `key={type}` на background-div ре-монтирует слой при смене type → анимация). При изменении анимации учти `key`.
-- **`DRAFT` не имеет цветовой модификации** в `typeToClassNameMap` — draft = базовый стиль wrapper'а, без цветной полосы.
-- **Композиция через `Object.assign`** — slot'ы выставляются на корневом forwardRef. Не менять форму `StatusTracker.Header.Title` и пр.
-- **Публичные enum'ы** (`EStatusTrackerType`, `EStatusTrackerVerticalAlign`) — изменение имён значений = breaking change.
+- `forwardRef<HTMLDivElement>` на `StatusTracker` — не убирать. Ref указывает на корневой
+  `statusTrackerWrapper`, а не на внутренний контейнер контента.
+- Трёхслойная разметка обязательна: `statusTrackerWrapper` (рамка, фон, `overflow: hidden`)
+  → `statusTrackerBackground` + вложенный `statusTrackerColor` (декоративные эллипсы,
+  `position: absolute`) → `statusTracker` (контент, `z-index: 1`). Схлопывание слоёв ломает
+  и градиент, и обрезку эллипсов по скруглению карточки.
+- Класс типа (`draft` / `waiting` / …) ставится **на оба** декоративных слоя. Если поставить
+  только на один, половина фона останется без цвета.
+- `key={type}` на `statusTrackerBackground` заставляет React пересоздавать узел при смене
+  типа. Поведение наблюдаемое (сброс состояния DOM-узла), поэтому снимать его без
+  обсуждения не нужно.
+- Значения `EStatusTrackerType` (`"draft"` / `"waiting"` / `"warning"` / `"rejected"` /
+  `"approved"`) совпадают с именами CSS-классов в `StatusTracker.module.less` и с префиксами
+  токенов `StatusTracker.*`. Переименование значения enum ломает три места сразу.
+- `EStatusTrackerVerticalAlign.TOP` намеренно отсутствует в `VERTICAL_ALIGN_TO_CLASS_NAME_MAP`:
+  это выравнивание по умолчанию и своего класса не имеет. Мапа объявлена как `Partial<Record<…>>`
+  именно поэтому.
+- `StatusTracker.Footer.Button` получает `block` по умолчанию — кнопки футера занимают всю
+  ширину карточки. Это не жёсткий инвариант: `block` проставлен до `...rest`, поэтому
+  `<StatusTracker.Footer.Button block={false}>` отключает блочный режим. Тема `LINK` исключена
+  из типа props (`Exclude<TButtonProps, IButtonLinkProps>`), потому что блочный режим для неё
+  недоступен.
+- `StatusTrackerAlert` оборачивает `children` в `Text` размера B3. Передавать внутрь
+  собственный `Text`/`Title` не нужно — получится вложенная типографика.
+- Селектор `.statusTrackerChild:empty { padding: 0 }` схлопывает отступы у пустых блоков —
+  пустой `Header` не оставляет дыру в макете.
+- Barrel `src/components/StatusTracker/index.ts` экспортирует `StatusTracker`, оба enum'а и
+  субкомпоненты `Header`, `Footer`, `Title`, `Description`, `Media`, `Sum`, `Body`, `Button` —
+  сохранять.
+- Имена интерфейсов `StatusTrackerMediaProps` (без префикса `I`) и `IStatusTrackerStatusGroup`
+  (без суффикса `Props`) расходятся с конвенцией `codestyle.md`. Это публичные имена —
+  переименование возможно только как согласованный breaking change.
+- `displayName` проставлены у всех субкомпонентов и совпадают с именами компонентов —
+  проверяются unit-тестом.
+- У `Title`, `Sum` и `Description` дженерик ref-а — `HTMLElement`, хотя фактический тег
+  всегда `h3`, `h1` и `span` соответственно. Шире он намеренно: сужение до
+  `HTMLHeadingElement` / `HTMLSpanElement` — изменение публичного типа, требующее
+  согласования. Если сужать, то до выхода 1.48.0.
 
 ---
 
 ## Accessibility
 
-- Без собственных ARIA-атрибутов — это визуальный layout.
-- Рекомендуется: передать `role="article"` или `role="region"` с `aria-label` на корневой `<div>`, если компонент используется как самостоятельная карточка; либо обернуть в `<li>` внутри списка документов.
-- Цвет статуса — не единственный канал передачи информации; `StatusTracker.Body.Status` обычно содержит текст с названием статуса.
+- Собственной ARIA-роли и обработчиков клавиатуры у компонента нет: `StatusTracker` и все
+  блоки-контейнеры — неинтерактивные `div`, в порядок фокуса не попадают.
+- Интерактивен только `StatusTracker.Footer.Button` — это обычный `Button` со своей
+  семантикой и фокусом.
+- Цвет фона — декоративный и **не должен быть единственным носителем смысла**: статус
+  обязан читаться текстом (`Body.Status`, `Header.Title`). Скринридер градиент не озвучит.
+- Иконка в `Media` — тоже декоративная. Если она несёт смысл, потребитель сам задаёт
+  `aria-label` / `role="img"` на иконке.
+- Заголовки рендерятся как `h3` (`Header.Title`) и `h1` (`Header.Sum`) — порядок уровней
+  в разметке страницы обратный. Изменить уровень заголовка через публичный API нельзя:
+  `IStatusTrackerTitleProps` и `IStatusTrackerSumProps` — это `React.HTMLAttributes`,
+  prop'а `tag` в них нет, хотя внутренняя типографика (`Title`) его поддерживает.
+- Компонент не хардкодит текстовые строки: содержимое и любые `aria-*` задаёт потребитель,
+  библиотека мультиязычная. Любые `aria-*` проходят через `...rest` на корневой `div`.
 
 ---
 
 ## Связанные компоненты
 
-- `MarkerStatus` — инлайн-маркер статуса.
-- `Alert` — слот `StatusTrackerAlert` внутри.
-- `Card` — схожая layout-обёртка для произвольного контента.
+- `MarkerStatus` — рендерится внутри `StatusTracker.Body.Status`, принимает его props целиком.
+  Он же — замена всему `StatusTracker`, когда статус нужен компактной строкой в списке.
+- `AlertProcess` — рендерится внутри `StatusTracker.Body.Alert`, принимает его props целиком
+  (включая `closable` / `onClose`).
+- `Amount` — рендерится внутри `StatusTracker.Header.Sum`, настраивается через `amountProps`.
+- `Button` — рендерится внутри `StatusTracker.Footer.Button` с принудительным `block`.
+- `Title` и `Text` (`Typography`) — типографика `Title`, `Sum` и `Description`; размеры
+  и начертания зашиты в субкомпонентах и через props не настраиваются.
 
 ---
 
 ## Stories
 
 Основные истории: `stories/StatusTracker/StatusTracker.stories.tsx`
-Примеры: `stories/StatusTracker/examples/`
+Файлы примеров: `stories/StatusTracker/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `type` и `verticalAlign` на полной композиции |
+| `Default` | `Default.tsx` | Минимальная карточка: `type` + `Media` + `Header` |
+| `Types` | `Types.tsx` | Все пять значений `EStatusTrackerType` |
+| `VerticalAlign` | `VerticalAlign.tsx` | `TOP` / `MIDDLE` / `BOTTOM` в контейнере выше содержимого |
+| `WithMediaOnly` | `WithMediaOnly.tsx` | Краевой случай: карточка из одного блока `Media` |
+| `Example` | `Example.tsx` | Production-like композиция: медиа, сумма, группа статусов, предупреждение, футер |
+| `VisualTests` | `VisualTests.tsx` | Широкий родитель, выравнивание `BOTTOM` и `StatusGroup` с закрываемым `Alert` — для скриншот-тестов |
+
+Story ID участвуют в именах baseline-скриншотов (`statustracker--types--xs.png` и т. п.),
+поэтому переименование story требует перегенерации baseline и удаления осиротевших файлов.
 
 ---
 
@@ -148,4 +232,212 @@ src/components/StatusTracker/
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-09-25 | Создан документ. AI-рефакторинг: JSDoc на всех публичных props, `forwardRef` у субкомпонентов `Media`, `Title`, `Description`, `Sum`, `Alert`, `Status`, `Button` и `displayName` у них же, кроме `Button` (у него он уже был), исправлен JSDoc `StatusTrackerTitle`. Unit-тесты расширены (`StatusTrackerStatusGroup`, проброс ref, `displayName`). Stories переведены на modern pattern с `examples/` и дополнены `Types`, `Example`, `VisualTests`. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/StatusTracker/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { StatusTracker, EStatusTrackerType } from "@sberbusiness/triplex-next";
+import { WaitStsIcon84 } from "@sberbusiness/icons-next";
+
+export const Default = () => (
+    // StatusTracker занимает всю ширину и высоту родителя — задайте их на контейнере.
+    <div style={{ maxWidth: 372, padding: 24, background: "#E9EDF1" }}>
+        <StatusTracker type={EStatusTrackerType.WAITING}>
+            <StatusTracker.Media>
+                <WaitStsIcon84 />
+            </StatusTracker.Media>
+            <StatusTracker.Header>
+                <StatusTracker.Header.Title>Документ в обработке</StatusTracker.Header.Title>
+                <StatusTracker.Header.Description>
+                    Документ ожидает ответ от банка. Обычно обработка занимает несколько минут.
+                </StatusTracker.Header.Description>
+            </StatusTracker.Header>
+        </StatusTracker>
+    </div>
+);
+```
+
+### Types
+
+`stories/StatusTracker/examples/Types.tsx`
+
+```tsx
+import React from "react";
+import { StatusTracker, EStatusTrackerType, EMarkerStatus, EComponentSize } from "@sberbusiness/triplex-next";
+import { WaitStsIcon84, WarningStsIcon84, ErrorStsIcon84, SuccessStsIcon84 } from "@sberbusiness/icons-next";
+
+/** Иконка и подпись статуса для каждого типа статус-трекера. */
+const TYPE_TO_CONTENT_MAP: Record<EStatusTrackerType, { icon: React.ReactNode; status: EMarkerStatus; text: string }> =
+    {
+        [EStatusTrackerType.DRAFT]: {
+            icon: <WaitStsIcon84 />,
+            status: EMarkerStatus.WAITING,
+            text: "Черновик",
+        },
+        [EStatusTrackerType.WAITING]: {
+            icon: <WaitStsIcon84 />,
+            status: EMarkerStatus.WAITING,
+            text: "В обработке",
+        },
+        [EStatusTrackerType.WARNING]: {
+            icon: <WarningStsIcon84 />,
+            status: EMarkerStatus.WARNING,
+            text: "Требуется исправление",
+        },
+        [EStatusTrackerType.REJECTED]: {
+            icon: <ErrorStsIcon84 />,
+            status: EMarkerStatus.ERROR,
+            text: "Отклонён банком",
+        },
+        [EStatusTrackerType.APPROVED]: {
+            icon: <SuccessStsIcon84 />,
+            status: EMarkerStatus.SUCCESS,
+            text: "Исполнен",
+        },
+    };
+
+const TYPES = Object.values(EStatusTrackerType);
+
+export const Types = () => (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
+        {TYPES.map((type) => (
+            <div key={type} style={{ width: 320 }}>
+                <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{type.toUpperCase()}</div>
+                <div style={{ padding: 24, background: "#E9EDF1" }}>
+                    <StatusTracker type={type}>
+                        <StatusTracker.Media>{TYPE_TO_CONTENT_MAP[type].icon}</StatusTracker.Media>
+                        <StatusTracker.Body>
+                            <StatusTracker.Body.Status
+                                status={TYPE_TO_CONTENT_MAP[type].status}
+                                size={EComponentSize.LG}
+                            >
+                                {TYPE_TO_CONTENT_MAP[type].text}
+                            </StatusTracker.Body.Status>
+                        </StatusTracker.Body>
+                    </StatusTracker>
+                </div>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### VerticalAlign
+
+`stories/StatusTracker/examples/VerticalAlign.tsx`
+
+```tsx
+import React from "react";
+import { StatusTracker, EStatusTrackerType, EStatusTrackerVerticalAlign } from "@sberbusiness/triplex-next";
+
+const VERTICAL_ALIGNS = Object.values(EStatusTrackerVerticalAlign);
+
+export const VerticalAlign = () => (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
+        {VERTICAL_ALIGNS.map((verticalAlign) => (
+            <div key={verticalAlign} style={{ width: 320 }}>
+                <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{verticalAlign.toUpperCase()}</div>
+                {/* Контейнер выше содержимого карточки — только так видно разницу выравниваний. */}
+                <div style={{ height: 420, padding: 24, background: "#E9EDF1" }}>
+                    <StatusTracker type={EStatusTrackerType.DRAFT} verticalAlign={verticalAlign}>
+                        <StatusTracker.Header>
+                            <StatusTracker.Header.Title>Черновик документа</StatusTracker.Header.Title>
+                            <StatusTracker.Header.Description>
+                                Документ создан без ошибок и ещё не отправлен в банк.
+                            </StatusTracker.Header.Description>
+                        </StatusTracker.Header>
+                    </StatusTracker>
+                </div>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### WithMediaOnly
+
+`stories/StatusTracker/examples/WithMediaOnly.tsx`
+
+```tsx
+import React from "react";
+import { StatusTracker, EStatusTrackerType, EStatusTrackerVerticalAlign } from "@sberbusiness/triplex-next";
+import { WaitStsIcon84 } from "@sberbusiness/icons-next";
+
+export const WithMediaOnly = () => (
+    <div style={{ maxWidth: 372, padding: 24, background: "#E9EDF1" }}>
+        <StatusTracker type={EStatusTrackerType.WARNING} verticalAlign={EStatusTrackerVerticalAlign.MIDDLE}>
+            <StatusTracker.Media>
+                <WaitStsIcon84 />
+            </StatusTracker.Media>
+        </StatusTracker>
+    </div>
+);
+```
+
+### Example
+
+`stories/StatusTracker/examples/Example.tsx`
+
+```tsx
+import React from "react";
+import {
+    StatusTracker,
+    EStatusTrackerType,
+    EStatusTrackerVerticalAlign,
+    EMarkerStatus,
+    EComponentSize,
+    EAlertType,
+    EButtonTheme,
+} from "@sberbusiness/triplex-next";
+import { WarningStsIcon84 } from "@sberbusiness/icons-next";
+
+export const Example = () => (
+    <div style={{ maxWidth: 372, padding: 24, background: "#E9EDF1" }}>
+        <StatusTracker type={EStatusTrackerType.WARNING} verticalAlign={EStatusTrackerVerticalAlign.TOP}>
+            <StatusTracker.Media>
+                <WarningStsIcon84 />
+            </StatusTracker.Media>
+            <StatusTracker.Header>
+                <StatusTracker.Header.Title>Платёжное поручение № 122</StatusTracker.Header.Title>
+                <StatusTracker.Header.Sum amountProps={{ value: "123747.123", currency: "₽" }} />
+                <StatusTracker.Header.Description>
+                    ООО «Ромашка», счёт 40702810×××××××××123
+                </StatusTracker.Header.Description>
+            </StatusTracker.Header>
+            <StatusTracker.Body>
+                <StatusTracker.Body.StatusGroup>
+                    <StatusTracker.Body.Status status={EMarkerStatus.WARNING} size={EComponentSize.LG}>
+                        Требуется исправление
+                    </StatusTracker.Body.Status>
+                    <StatusTracker.Body.Status status={EMarkerStatus.WAITING} size={EComponentSize.LG}>
+                        Не отправлено в банк
+                    </StatusTracker.Body.Status>
+                </StatusTracker.Body.StatusGroup>
+                <StatusTracker.Body.Alert type={EAlertType.WARNING} closable onClose={() => {}}>
+                    Проверьте назначение платежа: банк вернул документ на доработку.
+                </StatusTracker.Body.Alert>
+            </StatusTracker.Body>
+            <StatusTracker.Footer>
+                <StatusTracker.Footer.Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD} onClick={() => {}}>
+                    Исправить
+                </StatusTracker.Footer.Button>
+                <StatusTracker.Footer.Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => {}}>
+                    Удалить документ
+                </StatusTracker.Footer.Button>
+                <StatusTracker.Footer.Description>
+                    После исправления документ нужно отправить в банк повторно.
+                </StatusTracker.Footer.Description>
+            </StatusTracker.Footer>
+        </StatusTracker>
+    </div>
+);
+```
+