@sberbusiness/triplex-next-mcp-server 0.24.0-beta2 → 1.40.0-beta

package/bundle/components/Notification.md

@@ -1,10 +1,12 @@
 ---
 component: Notification
 category: Feedback
-figma-node: ""
-figma-file: ""
-related: [SideOverlay, Alert, UnorderedList, ButtonIcon, Typography]
-tokens: []
+related: [NotificationGrouped, Button, AlertContext, UnorderedList]
+tokens:
+  - --triplex-next-Notification-Background
+  - --triplex-next-Notification-Color
+  - --triplex-next-Notification-Shadow
+  - --triplex-next-Notification-TimeColor
 stories: stories/Notification/Notification.stories.tsx
 version: "1.0"
 ---
@@ -13,221 +15,689 @@ version: "1.0"
 
 ## Назначение
 
-Карточка уведомления — `<div role="alertdialog">` с фиксированной
-compound-структурой: `Icon` (опц.), `Body` (Header / Content / List /
-Footer), `Close` (опц.), `Time` (опц.). Содержательная часть собирается
-потребителем; компонент задаёт лэйаут, типографику и поведение close-by-
-hover для side-overlay.
+Составной компонент уведомления для отображения сообщений об успехе, ошибке, предупреждении,
+а также бизнес-уведомлений (mail-нотификации, формы обратной связи). Состоит из иконки,
+тела (заголовок, текст, список, футер), кнопки закрытия и времени.
 
-`NotificationGrouped` — визуальная группировка (стопка) — оборачивает
-одну Notification и подкладывает два декоративных `<div>` снизу как
-эффект «стопки карточек» (без логики управления списком).
-
-Используй когда: показываешь информационное / системное сообщение
-(в SideOverlay, Alert, отдельной странице, history-list).
+Используй когда: нужно показать уведомление в списке нотификаций, в side-overlay или как алерт.
+Не используй когда: нужно инлайновое сообщение об ошибке формы (используй `Alert`) или
+пустое состояние (используй `EmptyView`).
 
 ---
 
-## Файловая структура
-
-```text
-src/components/Notification/
-├── Notification.tsx                       # FC (как INotificationSFC) + slots
-├── NotificationGrouped.tsx                # FC, обёртка + декоративный footer
-├── components/
-│   ├── NotificationIcon.tsx               # <div> wrapper для иконки
-│   ├── NotificationBody.tsx               # FC (как INotificationBodySFC) + slots
-│   ├── NotificationHeader.tsx             # <h3>
-│   ├── NotificationBodyContent.tsx        # <Text size=B3 type=PRIMARY tag=div>
-│   ├── NotificationBodyList.tsx           # <UnorderedList> + map по values[]
-│   ├── NotificationFooter.tsx             # <div>
-│   ├── NotificationClose.tsx              # <ButtonIcon> с CrossStrokeSrvIcon16
-│   ├── NotificationTime.tsx               # <span> с временем
-│   └── NotificationGroupedFooter.tsx      # 2 декоративных <div>
-├── index.ts                               # Barrel: Notification + NotificationGrouped
-├── styles/Notification.module.less
-└── __tests__/Notification.test.tsx
-```
-
----
+## Структура (compound API)
 
-## Compound-структура
+Компонент собирается из статических подкомпонентов. Порядок дочерних элементов определяет вёрстку.
 
-```tsx
-<Notification onClick={...} isShowCloseOnHover>
-    <Notification.Icon><MailIcon /></Notification.Icon>
-    <Notification.Body>
-        <Notification.Body.Header>Заголовок</Notification.Body.Header>
-        <Notification.Body.Content>Текст сообщения</Notification.Body.Content>
-        <Notification.Body.List values={["Один", "Два"]} />
-        <Notification.Body.Footer>
-            <Button>Действие</Button>
-        </Notification.Body.Footer>
-    </Notification.Body>
-    <Notification.Close onClick={handleClose} />
-    <Notification.Time time="12:34" />
-</Notification>
-
-<NotificationGrouped>
-    <Notification>...</Notification>
-</NotificationGrouped>
+```
+Notification
+├── Notification.Icon                 — кастомная иконка (слева)
+├── Notification.Body                 — тело уведомления
+│   ├── Notification.Body.Header      — заголовок (<h3>)
+│   ├── Notification.Body.Content     — основной текст (Typography Text)
+│   ├── Notification.Body.List        — маркированный список (UnorderedList)
+│   └── Notification.Body.Footer      — футер (кнопки, Alert и т.д.)
+├── Notification.Close                — кнопка закрытия (ButtonIcon)
+└── Notification.Time                 — время уведомления
 ```
 
-Контракт компонента: «Может содержать только Icon, Body, Close, Time» — на
-уровне типов не ограничено (`children: ReactElement | ReactElement[]`),
-но стилизация рассчитана только на эти 4 слота.
+`NotificationGrouped` — обёртка для отображения уведомления как «стопки» (визуальный эффект
+нескольких карточек снизу). Принимает одно `Notification` в `children`.
 
 ---
 
 ## Варианты и props
 
-### Notification — `INotificationProps extends React.ButtonHTMLAttributes<HTMLElement>`
+### Notification
 
-| Prop | Тип | Default | Описание |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `children` | `ReactElement \| ReactElement[]` | — | Только Icon/Body/Close/Time. |
-| `withExtraBottomPadding` | `boolean` | `false` | Дополнительный нижний padding (mail-варианты). |
-| `isShowCloseOnHover` | `boolean` | `false` | Close видим только при hover'е (для SideOverlay/Alert). |
-| `onClick` | `() => void` | — | Клик по карточке. |
-| `...HTMLAttributes` | `ButtonHTMLAttributes<HTMLElement>` | — | Прокидываются на корневой `<div>` (имя `Button*` — историческое). |
-
-- Корневой тег — **`<div role="alertdialog">`**, не `<button>` (несмотря на `ButtonHTMLAttributes`).
-- `data-tx={process.env.npm_package_version}` — версия пакета.
+| `children` | `ReactElement \| ReactElement[]` | — | Только `Icon`, `Body`, `Close`, `Time` |
+| `withExtraBottomPadding` | `boolean` | `false` | Увеличенный отступ снизу (тип mail) |
+| `isShowCloseOnHover` | `boolean` | `false` | Кнопка закрытия появляется по ховеру (для side-overlay/алерта) |
+| `onClick` | `() => void` | — | Обработчик клика по уведомлению |
 
-### Notification.Body — `INotificationBodySFC` (slots: Header, Content, List, Footer)
+Наследует `React.ButtonHTMLAttributes<HTMLElement>` (остальные атрибуты прокидываются на корневой `div`).
 
-- `children: ReactNode` — последовательность заголовка / контента / списка / футера.
-- Каждый слот — `React.FC` (без forwardRef).
+### Notification.Close
 
-### Notification.Body.Header
+| Prop | Тип | Описание |
+|---|---|---|
+| `onClick` | `() => void` | Обработчик закрытия (обязателен) |
 
-- `<h3>` с фиксированными стилями. `children: ReactNode`.
+Наследует `IButtonIconProps` без `children` (`children?: never`).
 
-### Notification.Body.Content
+### Notification.Time
 
-- `<Text tag="div" size=B3 type=PRIMARY>{children}</Text>` — типографика жёстко зашита.
+| Prop | Тип | Описание |
+|---|---|---|
+| `time` | `ReactNode` | Значение времени уведомления |
 
-### Notification.Body.List — `INotificationBodyListProps extends IUnorderedListProps`
+### Notification.Body.List
 
-- **`values: string[]`** — массив строк, рендерятся как `UnorderedList.Item`.
-- `...IUnorderedListProps` — пробрасывается. `className` мержится с локальным.
+| Prop | Тип | Описание |
+|---|---|---|
+| `values` | `string[]` | Элементы списка |
 
-### Notification.Body.Footer
+Наследует `IUnorderedListProps`.
 
-- `<div>` с локальной стилизацией. `children: ReactNode`.
+### NotificationGrouped
 
-### Notification.Close — `INotificationCloseProps extends Omit<IButtonIconProps, "children">`
+| Prop | Тип | Описание |
+|---|---|---|
+| `children` | `ReactNode` | Вложенное уведомление |
 
-- **Иконка фиксирована**: `CrossStrokeSrvIcon16 paletteIndex={5}`.
-- `onClick: () => void` (обязателен).
-- `children?: never` — нельзя кастомизировать иконку.
-- Обёрнут в `<span>` для позиционирования.
-
-### Notification.Icon — `INotificationIconProps`
+---
 
-- `children: ReactElement` — потребительская иконка. Обёрнута в `<div>` с фикс.размером (см. styles).
+## Дизайн-токены
 
-### Notification.Time — `INotificationTimeProps`
+```
+--triplex-next-Notification-Background   (фон уведомления)
+--triplex-next-Notification-Color        (цвет текста)
+--triplex-next-Notification-Shadow       (тень карточки)
+--triplex-next-Notification-TimeColor    (цвет времени)
+```
 
-- `time: ReactText` (string|number) — рендерится в `<span>` без форматирования.
+---
 
-### NotificationGrouped — `INotificationGroupedProps`
+## Инварианты
 
-- `children: ReactNode` — обычно одна `<Notification>`.
-- Добавляет **2 декоративных `<div>`** снизу (`NotificationGroupedFooter`) — визуальный эффект «стопки».
+- `forwardRef` на `Notification`, `NotificationGrouped`, `NotificationBody` — не убирать. Ref ведёт на корневой `div`.
+- Компонент собран паттерном `Object.assign(forwardRef(...), { ...статики })` — статики (`Icon`, `Body`, `Close`, `Time`; у `Body` — `Header`, `Content`, `List`, `Footer`) часть публичного API, переименовывать нельзя.
+- Корневой элемент имеет `role="alertdialog"` — не менять.
+- `children` корневого `Notification` ограничены типом `ReactElement` — допускаются только `Icon`/`Body`/`Close`/`Time`.
+- CSS-классы `notification`, `notificationBody`, `notificationIcon`, `notificationClose`, `notificationGroupedWrapper`, `extraBottomPadding`, `showCloseOnHover` используются в тестах — не переименовывать.
 
 ---
 
-## Ключевые особенности реализации
+## Accessibility
 
-### `INotificationSFC` — slots через property assignment, не Object.assign
+- Корневой элемент — `role="alertdialog"`.
+- `Notification.Close` рендерит `ButtonIcon` с иконкой-крестиком; потребителю стоит передать `aria-label` для кнопки закрытия (библиотека мультиязычная, текст не хардкодится).
+- Прочие aria-атрибуты прокидываются на корневой `div` через spread.
 
-```tsx
-export const Notification: INotificationSFC = ((props) => {...}) as INotificationSFC;
-Notification.displayName = "Notification";
-Notification.Icon = NotificationIcon;
-// ...
-```
+---
 
-То же — `INotificationBodySFC`. **Нет `forwardRef`** на корне.
+## Связанные компоненты
 
-### `role="alertdialog"` на корневом `<div>`
+- `NotificationGrouped` — обёртка для отображения уведомления стопкой.
+- `Button` — типичное содержимое `Notification.Body.Footer`.
+- `AlertContext` — может вкладываться в `Notification.Body.Footer`.
+- `UnorderedList` — основа `Notification.Body.List`.
 
-- Семантика модального уведомления, требующего внимания. Несмотря на `ButtonHTMLAttributes` в типах — корень всегда `<div>`, поэтому атрибуты `<button>`-only (например `disabled`, `type="submit"`) не применятся.
+---
 
-### `isShowCloseOnHover` — для SideOverlay/Alert
+## Stories
 
-- Класс `styles.showCloseOnHover` — включает CSS-правило, которое делает `Notification.Close` видимым только при hover'е на родителе. Используется в `Alert` и `SideOverlay` (по комментарию в коде).
+Основные истории: `stories/Notification/Notification.stories.tsx`
+Файлы примеров: `stories/Notification/examples/`
 
-### `withExtraBottomPadding` — mail-вариант
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль наполнения уведомления |
+| `Default` | `Default.tsx` | Минимальное уведомление: иконка, заголовок, текст, закрытие |
+| `Status` | `Status.tsx` | Success / Warning / Error со списком |
+| `Business` | `Business.tsx` | Бизнес-уведомления: текст, кнопка, вложенный Alert |
+| `Business Stack` | `BusinessStack.tsx` | Уведомления в `NotificationGrouped` (стопка) |
+| `Feedback Without Stars` | `FeedbackWithoutStars.tsx` | Форма обратной связи без оценки звёздами |
+| `Feedback With Stars` | `FeedbackWithStars.tsx` | Форма обратной связи с оценкой звёздами |
 
-- Дополнительный нижний padding для случая mail-нотификации (где Footer часто содержит CTA-кнопки).
+---
 
-### `Body.List` — только строки
+## История изменений
 
-- `values: string[]` — невозможно использовать ReactNode-элементы (ссылки, форматирование) внутри списка без рефакторинга. Известное ограничение API.
+| Дата | Изменение |
+|---|---|
+| 2026-06-16 | Создан AI-документ. `Notification`, `NotificationGrouped`, `NotificationBody` переведены на `forwardRef` (паттерн `Object.assign`); удалены типы `INotificationSFC`/`INotificationBodySFC`; тип `Notification.Time.time` расширен с `React.ReactText` до `React.ReactNode`. Stories мигрированы на modern pattern. |
 
-### `Close` — фиксированная иконка
+---
 
-- `CrossStrokeSrvIcon16 paletteIndex={5}` — нельзя заменить (`children: never`). Если нужно другое — потребитель кладёт собственный `ButtonIcon` мимо слота.
+## Примеры использования
 
-### `Grouped` — только декорация
+### Default
 
-- `NotificationGrouped` не управляет stack'ом нескольких уведомлений; это чистый CSS-эффект «карточка из 3-х слоёв» вокруг одного `Notification`.
+`stories/Notification/examples/Default.tsx`
 
----
+```tsx
+import React from "react";
+import { Notification } from "@sberbusiness/triplex-next";
+import { SuccessStrokeStsIcon20 } from "@sberbusiness/icons-next";
+
+export const Default = () => (
+    <div style={{ maxWidth: "600px" }}>
+        <Notification>
+            <Notification.Icon>
+                <SuccessStrokeStsIcon20 paletteIndex={0} />
+            </Notification.Icon>
+            <Notification.Body>
+                <Notification.Body.Header>Title text</Notification.Body.Header>
+                <Notification.Body.Content>
+                    This message provides context or highlights important information to note.
+                </Notification.Body.Content>
+            </Notification.Body>
+            <Notification.Close onClick={() => {}} />
+        </Notification>
+    </div>
+);
+```
 
-## Инварианты
+### Status
 
-- **Корень — `<div role="alertdialog">`**, не интерактивный элемент. `ButtonHTMLAttributes` — историческое API (имя), не означает `<button>` рендера.
-- **`children` — только Icon / Body / Close / Time** (контракт документации; типы шире, но стили рассчитаны только на эти 4 слота).
-- **`Body` — Header / Content / List / Footer** в этом смысловом порядке (CSS закладывает spacing).
-- **`Close` иконка фиксирована**; `children: never`.
-- **`Body.List.values: string[]`** — не `ReactNode[]`. При расширении API — breaking.
-- **`Body.Content` типография зашита** (`B3 / PRIMARY`).
-- **`Body.Header` — `<h3>`**. Heading-уровень не настраивается — может конфликтовать с outline страницы (a11y).
-- **`isShowCloseOnHover` ↔ родитель** — работает только когда `Notification` — внутри SideOverlay/Alert (CSS `:hover` на родителе/самом элементе).
-- **FC, не forwardRef** на всех уровнях (legacy).
-- **`NotificationGrouped` — декорация**, не контейнер для списка.
-- **`data-tx`** — версия пакета на корне.
+`stories/Notification/examples/Status.tsx`
 
----
-
-## Accessibility
+```tsx
+import React from "react";
+import { Notification } from "@sberbusiness/triplex-next";
+import { ErrorStrokeStsIcon20, SuccessStrokeStsIcon20, WarningStrokeStsIcon20 } from "@sberbusiness/icons-next";
+
+export const Status = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Success</h3>
+            <Notification>
+                <Notification.Icon>
+                    <SuccessStrokeStsIcon20 paletteIndex={0} />
+                </Notification.Icon>
+                <Notification.Body>
+                    <Notification.Body.Content>
+                        This message provides context or highlights important information to note.
+                    </Notification.Body.Content>
+                    <Notification.Body.List values={Array.from({ length: 3 }, () => "List item text;")} />
+                </Notification.Body>
+                <Notification.Close onClick={() => {}} />
+            </Notification>
+        </div>
+
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Warning</h3>
+            <Notification>
+                <Notification.Icon>
+                    <WarningStrokeStsIcon20 paletteIndex={2} />
+                </Notification.Icon>
+                <Notification.Body>
+                    <Notification.Body.Content>
+                        This message provides context or highlights important information to note.
+                    </Notification.Body.Content>
+                    <Notification.Body.List values={Array.from({ length: 3 }, () => "List item text;")} />
+                </Notification.Body>
+                <Notification.Close onClick={() => {}} />
+            </Notification>
+        </div>
+
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Error</h3>
+            <Notification>
+                <Notification.Icon>
+                    <ErrorStrokeStsIcon20 paletteIndex={1} />
+                </Notification.Icon>
+                <Notification.Body>
+                    <Notification.Body.Content>
+                        This message provides context or highlights important information to note.
+                    </Notification.Body.Content>
+                    <Notification.Body.List values={Array.from({ length: 3 }, () => "List item text;")} />
+                </Notification.Body>
+                <Notification.Close onClick={() => {}} />
+            </Notification>
+        </div>
+    </div>
+);
+```
 
-- `role="alertdialog"` — корректный для модального уведомления, но контейнер не сам управляет `aria-labelledby` / `aria-describedby` — потребитель должен передать их через `...HTMLAttributes`.
-- `<h3>` в `Body.Header` — фиксированный heading-уровень. Для контекстов, где это нарушает outline (например, top-level Alert на странице без h1/h2), — возможен a11y-гэп.
-- `Close` — `<ButtonIcon>` с иконкой crossbar; **нет `aria-label`** в коде (передаётся через `...buttonProps`). Потребитель должен установить `aria-label="Закрыть уведомление"` при создании `<Notification.Close>`.
-- `isShowCloseOnHover` — close-кнопка не видна без hover'а ⇒ для keyboard-only пользователей может быть недоступна, если фокус-стили не показывают её. Проверить!
-- Корень — `<div>`, но `onClick` есть — без `keydown` Enter/Space обработчика. Если `onClick` критичен — клавиатура не работает.
+### Business
 
----
+`stories/Notification/examples/Business.tsx`
 
-## Дизайн-токены
+```tsx
+import React from "react";
+import {
+    AlertContext,
+    Button,
+    EAlertType,
+    EButtonTheme,
+    EComponentSize,
+    Notification,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+export const Business = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Normal</h3>
+            <Notification withExtraBottomPadding>
+                <Notification.Icon>
+                    <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                </Notification.Icon>
+                <Notification.Body>
+                    <Notification.Body.Header>Title text</Notification.Body.Header>
+                    <Notification.Body.Content>
+                        This message provides context or highlights important information to note.
+                    </Notification.Body.Content>
+                </Notification.Body>
+                <Notification.Close onClick={() => {}} />
+                <Notification.Time time="22:45" />
+            </Notification>
+        </div>
+
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Button</h3>
+            <Notification withExtraBottomPadding>
+                <Notification.Icon>
+                    <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                </Notification.Icon>
+                <Notification.Body>
+                    <Notification.Body.Header>Title text</Notification.Body.Header>
+                    <Notification.Body.Content>
+                        This message provides context or highlights important information to note.
+                    </Notification.Body.Content>
+                    <Notification.Body.Footer>
+                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM}>
+                            Button text
+                        </Button>
+                    </Notification.Body.Footer>
+                </Notification.Body>
+                <Notification.Close onClick={() => {}} />
+                <Notification.Time time="22:45" />
+            </Notification>
+        </div>
+
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Alert</h3>
+            <Notification withExtraBottomPadding>
+                <Notification.Icon>
+                    <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                </Notification.Icon>
+                <Notification.Body>
+                    <Notification.Body.Header>Title text</Notification.Body.Header>
+                    <Notification.Body.Content>
+                        This message provides context or highlights important information to note.
+                    </Notification.Body.Content>
+                    <Notification.Body.Footer>
+                        <AlertContext type={EAlertType.INFO}>
+                            This message provides context or highlights important information to note.
+                        </AlertContext>
+                    </Notification.Body.Footer>
+                </Notification.Body>
+                <Notification.Close onClick={() => {}} />
+                <Notification.Time time="22:45" />
+            </Notification>
+        </div>
+    </div>
+);
+```
 
-Нет собственных. Цвета/spacing — из глобальных токенов (см. `styles/Notification.module.less`). Иконка `CrossStrokeSrvIcon16` использует `paletteIndex={5}`.
+### Business Stack
 
----
+`stories/Notification/examples/BusinessStack.tsx`
 
-## Связанные компоненты
+```tsx
+import React from "react";
+import {
+    AlertContext,
+    Button,
+    EAlertType,
+    EButtonTheme,
+    EComponentSize,
+    Notification,
+    NotificationGrouped,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+export const BusinessStack = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Normal</h3>
+            <NotificationGrouped>
+                <Notification withExtraBottomPadding>
+                    <Notification.Icon>
+                        <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                    </Notification.Icon>
+                    <Notification.Body>
+                        <Notification.Body.Header>Title text</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            This message provides context or highlights important information to note.
+                        </Notification.Body.Content>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                    <Notification.Time time="22:45" />
+                </Notification>
+            </NotificationGrouped>
+        </div>
+
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Button</h3>
+            <NotificationGrouped>
+                <Notification withExtraBottomPadding>
+                    <Notification.Icon>
+                        <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                    </Notification.Icon>
+                    <Notification.Body>
+                        <Notification.Body.Header>Title text</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            This message provides context or highlights important information to note.
+                        </Notification.Body.Content>
+                        <Notification.Body.Footer>
+                            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM}>
+                                Button text
+                            </Button>
+                        </Notification.Body.Footer>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                    <Notification.Time time="22:45" />
+                </Notification>
+            </NotificationGrouped>
+        </div>
+
+        <div>
+            <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Alert</h3>
+            <NotificationGrouped>
+                <Notification withExtraBottomPadding>
+                    <Notification.Icon>
+                        <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                    </Notification.Icon>
+                    <Notification.Body>
+                        <Notification.Body.Header>Title text</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            This message provides context or highlights important information to note.
+                        </Notification.Body.Content>
+                        <Notification.Body.Footer>
+                            <AlertContext type={EAlertType.INFO}>
+                                This message provides context or highlights important information to note.
+                            </AlertContext>
+                        </Notification.Body.Footer>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                    <Notification.Time time="22:45" />
+                </Notification>
+            </NotificationGrouped>
+        </div>
+    </div>
+);
+```
 
-- `SideOverlay` / `Alert` — типичные контейнеры (закрытие по hover).
-- `UnorderedList` — основа `Body.List`.
-- `Text` (Typography) — `Body.Content`.
-- `ButtonIcon` — `Close`.
-- `CrossStrokeSrvIcon16` — иконка close.
+### Feedback Without Stars
 
----
+`stories/Notification/examples/FeedbackWithoutStars.tsx`
 
-## Stories
+```tsx
+import React, { useState } from "react";
+import {
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    EFormFieldStatus,
+    ETextSize,
+    Notification,
+    Text,
+    TextareaField,
+} from "@sberbusiness/triplex-next";
+import { SuccessgradientStsIcon96 } from "@sberbusiness/icons-next";
+
+export const FeedbackWithoutStars = () => {
+    const [defaultValue, setDefaultValue] = useState("");
+    const [filledValue, setFilledValue] = useState("Нет возможности экспортировать данные из заказов");
+    const [errorValue, setErrorValue] = useState("");
+
+    const handleDefaultChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+        setDefaultValue(event.target.value);
+    };
+
+    const handleFilledChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+        setFilledValue(event.target.value);
+    };
+
+    const handleErrorChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+        setErrorValue(event.target.value);
+    };
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
+            <div>
+                <h3 style={{ marginBottom: 16, fontSize: 18, fontWeight: 600 }}>Default</h3>
+                <Notification withExtraBottomPadding>
+                    <Notification.Body>
+                        <Notification.Body.Header>Предложите идею</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            <div>Чего не хватает вам и что оценят другие пользователи?</div>
+                            <TextareaField
+                                className="notificationBodyTextArea"
+                                status={EFormFieldStatus.DEFAULT}
+                                textareaProps={{
+                                    value: defaultValue,
+                                    onChange: handleDefaultChange,
+                                }}
+                                label="Как мы можем улучшить сервис?"
+                            />
+                        </Notification.Body.Content>
+                        <Notification.Body.Footer>
+                            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM}>
+                                Отправить
+                            </Button>
+                        </Notification.Body.Footer>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                </Notification>
+            </div>
+
+            <div>
+                <h3 style={{ marginBottom: 16, fontSize: 18, fontWeight: 600 }}>Filled</h3>
+                <Notification withExtraBottomPadding>
+                    <Notification.Body>
+                        <Notification.Body.Header>Предложите идею</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            <div>Чего не хватает вам и что оценят другие пользователи?</div>
+                            <TextareaField
+                                className="notificationBodyTextArea"
+                                status={EFormFieldStatus.DEFAULT}
+                                textareaProps={{
+                                    value: filledValue,
+                                    onChange: handleFilledChange,
+                                }}
+                                label="Как мы можем улучшить сервис?"
+                            />
+                        </Notification.Body.Content>
+                        <Notification.Body.Footer>
+                            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM}>
+                                Отправить
+                            </Button>
+                        </Notification.Body.Footer>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                </Notification>
+            </div>
+
+            <div>
+                <h3 style={{ marginBottom: 16, fontSize: 18, fontWeight: 600 }}>Error</h3>
+                <Notification withExtraBottomPadding>
+                    <Notification.Body>
+                        <Notification.Body.Header>Предложите идею</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            <div>Чего не хватает вам и что оценят другие пользователи?</div>
+                            <TextareaField
+                                className="notificationBodyTextArea"
+                                status={EFormFieldStatus.ERROR}
+                                description={
+                                    <Text tag="div" size={ETextSize.B4} type={EFontType.ERROR}>
+                                        Введите текст сообщения.
+                                    </Text>
+                                }
+                                textareaProps={{
+                                    value: errorValue,
+                                    onChange: handleErrorChange,
+                                }}
+                                label="Как мы можем улучшить сервис?"
+                            />
+                        </Notification.Body.Content>
+                        <Notification.Body.Footer>
+                            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM}>
+                                Отправить
+                            </Button>
+                        </Notification.Body.Footer>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                </Notification>
+            </div>
+
+            <div>
+                <h3 style={{ marginBottom: 16, fontSize: 18, fontWeight: 600 }}>Success</h3>
+                <Notification withExtraBottomPadding>
+                    <Notification.Body>
+                        <div className="finalStatus">
+                            <SuccessgradientStsIcon96 />
+                            <Notification.Body.Header>Спасибо за оценку!</Notification.Body.Header>
+                            <Notification.Body.Content>Ваши отзывы помогают нам стать лучше.</Notification.Body.Content>
+                        </div>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                </Notification>
+            </div>
+        </div>
+    );
+};
+```
 
-`stories/Notification/Notification.stories.tsx`
-Примеры: `stories/Notification/examples/`
+### Feedback With Stars
 
----
+`stories/Notification/examples/FeedbackWithStars.tsx`
 
-## История изменений
+```tsx
+import React, { useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    EButtonTheme,
+    EComponentSize,
+    EFormFieldStatus,
+    Notification,
+    TextField,
+} from "@sberbusiness/triplex-next";
+import { StarStrokeSrvIcon32, SuccessgradientStsIcon96 } from "@sberbusiness/icons-next";
+
+export const FeedbackWithStars = () => {
+    const [value, setValue] = useState("");
+    const checkboxes = [
+        "Встречается неточная информация",
+        "Уведомления приходят ночью",
+        "Не хватает данных в сообщении",
+    ];
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+    };
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+            <div>
+                <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Default</h3>
+                <Notification withExtraBottomPadding>
+                    <Notification.Body>
+                        <Notification.Body.Header>Оцените оформление кредита</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            <div>Оцените, насколько удобным был процесс оформления недавно полученого кредита.</div>
+                            <div style={{ display: "flex", justifyContent: "center", marginTop: "16px" }}>
+                                {Array.from({ length: 5 }).map((_, index) => (
+                                    <StarStrokeSrvIcon32
+                                        key={index}
+                                        paletteIndex={0}
+                                        style={{ marginLeft: index !== 0 ? "24px" : "0px" }}
+                                    />
+                                ))}
+                            </div>
+                        </Notification.Body.Content>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                </Notification>
+            </div>
+
+            <div>
+                <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Filled</h3>
+                <Notification withExtraBottomPadding>
+                    <Notification.Body>
+                        <Notification.Body.Header>Оцените оформление кредита</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            <div>Оцените, насколько удобным был процесс оформления недавно полученого кредита.</div>
+                            <div style={{ display: "flex", justifyContent: "center", marginTop: "16px" }}>
+                                {Array.from({ length: 5 }).map((_, index) => (
+                                    <StarStrokeSrvIcon32
+                                        key={index}
+                                        paletteIndex={0}
+                                        style={{ marginLeft: index !== 0 ? "24px" : "0px" }}
+                                    />
+                                ))}
+                            </div>
+                            <TextField
+                                className="notificationBodyTextArea"
+                                status={EFormFieldStatus.DEFAULT}
+                                inputProps={{
+                                    value: value,
+                                    onChange: handleChange,
+                                }}
+                                label={"Как мы можем улучшить сервис?"}
+                            />
+                        </Notification.Body.Content>
+                        <Notification.Body.Footer>
+                            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM}>
+                                Отправить
+                            </Button>
+                        </Notification.Body.Footer>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                </Notification>
+            </div>
+
+            <div>
+                <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Error</h3>
+                <Notification withExtraBottomPadding>
+                    <Notification.Body>
+                        <Notification.Body.Header>Оцените оформление кредита</Notification.Body.Header>
+                        <Notification.Body.Content>
+                            <div>Оцените, насколько удобным был процесс оформления недавно полученого кредита.</div>
+                            <div style={{ display: "flex", justifyContent: "center", marginTop: "16px" }}>
+                                {Array.from({ length: 5 }).map((_, index) => (
+                                    <StarStrokeSrvIcon32
+                                        key={index}
+                                        paletteIndex={0}
+                                        style={{ marginLeft: index !== 0 ? "24px" : "0px" }}
+                                    />
+                                ))}
+                            </div>
+                            <CheckboxYGroup
+                                aria-label="Причины неудовлетворенности"
+                                className="notificationBodyCheckbox"
+                            >
+                                {checkboxes.map((checkboxValue, index) => (
+                                    <Checkbox key={index} name="checkbox-y-group">
+                                        {checkboxValue}
+                                    </Checkbox>
+                                ))}
+                            </CheckboxYGroup>
+                        </Notification.Body.Content>
+                        <Notification.Body.Footer>
+                            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM}>
+                                Отправить
+                            </Button>
+                        </Notification.Body.Footer>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                </Notification>
+            </div>
+
+            <div>
+                <h3 style={{ marginBottom: "16px", fontSize: "18px", fontWeight: "600" }}>Success</h3>
+                <Notification withExtraBottomPadding>
+                    <Notification.Body>
+                        <div className="finalStatus">
+                            <SuccessgradientStsIcon96 />
+                            <Notification.Body.Header>Спасибо за оценку!</Notification.Body.Header>
+                            <Notification.Body.Content>Ваши отзывы помогают нам стать лучше.</Notification.Body.Content>
+                        </div>
+                    </Notification.Body>
+                    <Notification.Close onClick={() => {}} />
+                </Notification>
+            </div>
+        </div>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |