@snack-uikit/notification 0.6.17-preview-e40879b4.0 → 0.6.17-preview-bd8ccc1f.0

package/README.md

@@ -91,6 +91,8 @@ const cards = [
 | link | `Omit<LinkProps, "data-test-id" \| "appearance" \| "size" \| "textMode">` | - | Ссылка |
 | onClick | `MouseEventHandler<HTMLDivElement>` | - | Колбэк клика по карточке |
 | onVisible | `(cardId: string) => void` | - | Колбэк при попадании карточки в область видимости на 80% |
+| primaryButton | `Omit<ButtonTonalProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка главного действия у карточки |
+| secondaryButton | `Omit<ButtonSimpleProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка второстепенного действия у карточки |
 | actions | `Action[]` | - | Дополнительные действия у карточки |
 | className | `string` | - | CSS-класс |
 ## NotificationPanel
@@ -113,10 +115,15 @@ const cards = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| title* | `ReactNode` | - | Заголовок |
-| description | `ReactNode` | - | Описание |
-| icon | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | Иконка |
-| iconAppearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Цвет обводки для иконки |
+| title | `string` | - | Заголовок |
+| className | `string` | - | CSS-класс |
+| icon | `Pick<IconPredefinedProps, "appearance" \| "icon" \| "decor">` | - | Иконка |
+| description | `string` | - | Подзаголовок |
+## NotificationPanel.Divider
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| text* | `string` | - | Текст разделителя |
 | className | `string` | - | CSS-класс |
 ## NotificationPanelPopover
 Компонент-обёртка для NotificationPanel для использования как выпадающий элемент

package/dist/components/NotificationCard/NotificationCard.d.ts

@@ -1,4 +1,5 @@
 import { MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
 import { LinkProps } from '@snack-uikit/link';
 import { BaseItemProps } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -28,11 +29,15 @@ export type NotificationCardProps = WithSupportProps<{
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** Колбэк при попадании карточки в область видимости на 80% */
     onVisible?(cardId: string): void;
+    /** Кнопка главного действия у карточки */
+    primaryButton?: Omit<ButtonTonalProps, 'size' | 'appearance' | 'data-test-id'>;
+    /** Кнопка второстепенного действия у карточки */
+    secondaryButton?: Omit<ButtonSimpleProps, 'size' | 'appearance' | 'data-test-id'>;
     /** Дополнительные действия у карточки */
     actions?: Action[];
     /** CSS-класс */
     className?: string;
 }>;
 /** Компонент карточки уведомления */
-export declare function NotificationCard({ id, appearance, label, unread, title, content, link, date, onClick, actions, onVisible, className, ...rest }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationCard({ id, appearance, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className, ...rest }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NotificationCard/NotificationCard.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { ButtonSimple, ButtonTonal } from '@snack-uikit/button';
 import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
@@ -22,10 +23,11 @@ import { getIcon } from './helpers';
 import styles from './styles.module.css';
 /** Компонент карточки уведомления */
 export function NotificationCard(_a) {
-    var { id, appearance = APPEARANCE.Neutral, label, unread, title, content, link, date, onClick, actions, onVisible, className } = _a, rest = __rest(_a, ["id", "appearance", "label", "unread", "title", "content", "link", "date", "onClick", "actions", "onVisible", "className"]);
-    const { icon, linkOnColor } = useMemo(() => ({
+    var { id, appearance = APPEARANCE.Neutral, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className } = _a, rest = __rest(_a, ["id", "appearance", "label", "unread", "title", "content", "link", "date", "onClick", "primaryButton", "secondaryButton", "actions", "onVisible", "className"]);
+    const { icon, linkOnColor, buttonAppearance } = useMemo(() => ({
         icon: getIcon(appearance),
         linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
+        buttonAppearance: appearance === APPEARANCE.ErrorCritical ? 'destructive' : 'primary',
     }), [appearance]);
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const cardRef = useRef(null);
@@ -55,5 +57,5 @@ export function NotificationCard(_a) {
         e.stopPropagation();
         (_a = link === null || link === void 0 ? void 0 : link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, e);
     };
-    return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(NotificationCardFunction, { actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: linkOnColor, textMode: 'default', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
+    return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(NotificationCardFunction, { actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), (primaryButton || secondaryButton) && (_jsxs("div", { className: styles.notificationCardButtons, children: [secondaryButton && (_jsx(ButtonSimple, Object.assign({}, secondaryButton, { appearance: buttonAppearance, size: 's', "data-test-id": TEST_IDS.primaryButton }))), primaryButton && (_jsx(ButtonTonal, Object.assign({}, primaryButton, { appearance: buttonAppearance, size: 's', "data-test-id": TEST_IDS.secondaryButton })))] })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: linkOnColor, textMode: 'default', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
 }

package/dist/components/NotificationCard/constants.d.ts

@@ -17,4 +17,6 @@ export declare const TEST_IDS: {
         droplistTrigger: string;
         droplistAction: string;
     };
+    primaryButton: string;
+    secondaryButton: string;
 };

package/dist/components/NotificationCard/constants.js

@@ -17,4 +17,6 @@ export const TEST_IDS = {
         droplistTrigger: 'notification-card__droplist-trigger',
         droplistAction: 'notification-card__droplist-action',
     },
+    primaryButton: 'notification-card__primary-button',
+    secondaryButton: 'notification-card__secondary-button',
 };

package/dist/components/NotificationCard/styles.module.css

@@ -11,7 +11,7 @@
 
 .notificationCardTitleText{
   box-sizing:border-box;
-  color:var(--sys-neutral-text-main, #333333);
+  color:var(--sys-neutral-text-main, #33333b);
 }
 
 .notificationCardTitleIcon{
@@ -34,7 +34,7 @@
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
-  border-bottom-color:var(--sys-neutral-decor-default, #dedede);
+  border-bottom-color:var(--sys-neutral-decor-default, #dfe2ec);
   border-bottom-style:solid;
 }
 .notificationCard::before{
@@ -53,10 +53,10 @@
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
   border-bottom-color:transparent;
-  outline-color:var(--sys-available-complementary, #131313);
+  outline-color:var(--sys-available-complementary, #141415);
 }
 .notificationCard[data-droplist-open]::before, .notificationCard:hover::before, .notificationCard:focus-visible::before, .notificationCard:focus-within:not(:focus)::before{
-  background-color:var(--sys-neutral-accent-default, #757575);
+  background-color:var(--sys-neutral-accent-default, #6f717c);
 }
 .notificationCard[data-droplist-open] .notificationCardFunction, .notificationCard:hover .notificationCardFunction, .notificationCard:focus-visible .notificationCardFunction, .notificationCard:focus-within:not(:focus) .notificationCardFunction{
   pointer-events:auto;
@@ -67,28 +67,28 @@
 }
 .notificationCard[data-unread]::before{
   opacity:var(--opacity-a008, 0.08);
-  background-color:var(--sys-neutral-accent-default, #757575);
+  background-color:var(--sys-neutral-accent-default, #6f717c);
 }
 .notificationCard[data-unread][data-droplist-open]::before, .notificationCard[data-unread]:hover::before, .notificationCard[data-unread]:focus-visible::before, .notificationCard[data-unread]:focus-within:not(:focus)::before{
   opacity:var(--opacity-a004, 0.04);
 }
 .notificationCard[data-appearance=neutral] .notificationCardTitleIcon{
-  color:var(--sys-neutral-accent-default, #757575);
+  color:var(--sys-neutral-accent-default, #6f717c);
 }
 .notificationCard[data-appearance=error] .notificationCardTitleIcon, .notificationCard[data-appearance=errorCritical] .notificationCardTitleIcon{
-  color:var(--sys-red-accent-default, #d93f2f);
+  color:var(--sys-red-accent-default, #cd3c3c);
 }
 .notificationCard[data-appearance=errorCritical][data-unread]::before, .notificationCard[data-appearance=errorCritical][data-droplist-open]::before, .notificationCard[data-appearance=errorCritical]:hover::before, .notificationCard[data-appearance=errorCritical]:focus-visible::before, .notificationCard[data-appearance=errorCritical]:focus-within:not(:focus)::before{
-  background-color:var(--sys-red-accent-default, #d93f2f);
+  background-color:var(--sys-red-accent-default, #cd3c3c);
 }
 .notificationCard[data-appearance=errorCritical] .notificationCardTitleText{
-  color:var(--sys-red-accent-default, #d93f2f);
+  color:var(--sys-red-accent-default, #cd3c3c);
 }
 .notificationCard[data-appearance=warning] .notificationCardTitleIcon{
-  color:var(--sys-yellow-accent-default, #feb528);
+  color:var(--sys-yellow-accent-default, #fdca46);
 }
 .notificationCard[data-appearance=success] .notificationCardTitleIcon{
-  color:var(--sys-green-accent-default, #0bbe8f);
+  color:var(--sys-green-accent-default, #57b762);
 }
 .notificationCard[data-skeleton]::before{
   display:none;
@@ -96,7 +96,7 @@
 
 .notificationCardLabel{
   display:grid;
-  color:var(--sys-neutral-text-support, #565656);
+  color:var(--sys-neutral-text-support, #656771);
 }
 
 .notificationCardTitle{
@@ -109,7 +109,7 @@
 
 .notificationCardContent{
   box-sizing:border-box;
-  color:var(--sys-neutral-text-support, #565656);
+  color:var(--sys-neutral-text-support, #656771);
   white-space:pre-line;
 }
 
@@ -123,6 +123,12 @@
 .notificationCardDate{
   flex:1 0 auto;
   box-sizing:border-box;
-  color:var(--sys-neutral-text-light, #898989);
+  color:var(--sys-neutral-text-light, #868892);
   text-align:right;
+}
+
+.notificationCardButtons{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
 }

package/dist/components/NotificationPanel/NotificationPanel.d.ts

@@ -3,6 +3,7 @@ import { ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggleProps } from '@snack-uikit/chips';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
+import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 export type { NotificationPanelBlankProps };
 export type NotificationPanelProps = WithSupportProps<{
     /** Заголовок панели */
@@ -37,4 +38,6 @@ export declare function NotificationPanel({ title, settings, chips, readAllButto
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;
+    const Divider: typeof NotificationPanelDivider;
+    type DividerProps = NotificationPanelDividerProps;
 }

package/dist/components/NotificationPanel/NotificationPanel.js

@@ -22,16 +22,16 @@ import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { NotificationCardSkeleton } from '../NotificationCard/components';
 import { NotificationPanelBlank, NotificationPanelSettings, } from './components';
+import { NotificationPanelDivider } from './components/NotificationPanelDivider';
 import { TEST_IDS } from './constants';
 import styles from './styles.module.css';
 /** Компонент панели для уведомлений */
 export function NotificationPanel(_a) {
     var { title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [_jsx("div", { className: styles.notificationPanelChips, children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: 'xs', disabled: chip.disabled || loading })))) }), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), 
-            // !loading &&
-            footerButton && (_jsx("button", { className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [_jsx("div", { className: styles.notificationPanelChips, children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: 'xs', disabled: chip.disabled || loading })))) }), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), footerButton && (_jsx("button", { className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
 }
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;
+    NotificationPanel.Divider = NotificationPanelDivider;
 })(NotificationPanel || (NotificationPanel = {}));

package/dist/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.d.ts

@@ -1,17 +1,4 @@
-import { ReactNode } from 'react';
-import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
-import { WithSupportProps } from '@snack-uikit/utils';
-export type NotificationPanelBlankProps = WithSupportProps<{
-    /** Заголовок */
-    title: ReactNode;
-    /** Описание */
-    description?: ReactNode;
-    /** Иконка */
-    icon?: IconPredefinedProps['icon'];
-    /** Цвет обводки для иконки */
-    iconAppearance?: IconPredefinedProps['appearance'];
-    /** CSS-класс */
-    className?: string;
-}>;
+import { InfoBlockProps } from '@snack-uikit/info-block';
+export type NotificationPanelBlankProps = Omit<InfoBlockProps, 'footer' | 'align' | 'size'>;
 /** Компонента для "заглушки" вместо карточек в панели */
-export declare function NotificationPanelBlank({ icon, iconAppearance, title, description, className, ...rest }: NotificationPanelBlankProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanelBlank({ icon, className, ...props }: NotificationPanelBlankProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.js

@@ -9,15 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
-import { IconPredefined } from '@snack-uikit/icon-predefined';
-import { Typography } from '@snack-uikit/typography';
-import { extractSupportProps } from '@snack-uikit/utils';
-import { TEST_IDS } from '../../constants';
+import { InfoBlock } from '@snack-uikit/info-block';
 import styles from './styles.module.css';
 /** Компонента для "заглушки" вместо карточек в панели */
 export function NotificationPanelBlank(_a) {
-    var { icon, iconAppearance = 'neutral', title, description, className } = _a, rest = __rest(_a, ["icon", "iconAppearance", "title", "description", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.notificationPanelBlank, className) }, extractSupportProps(rest), { children: [icon && _jsx(IconPredefined, { icon: icon, appearance: iconAppearance, size: 'l', "data-test-id": TEST_IDS.blank.icon }), _jsxs("div", { className: styles.notificationPanelBlankContent, children: [_jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationPanelBlankTitle, "data-test-id": TEST_IDS.blank.title, children: title }), _jsx(Typography.SansBodyM, { tag: 'div', className: styles.notificationPanelBlankDescription, "data-test-id": TEST_IDS.blank.description, children: description })] })] })));
+    var _b;
+    var { icon, className } = _a, props = __rest(_a, ["icon", "className"]);
+    return (_jsx(_Fragment, { children: _jsx(InfoBlock, Object.assign({}, props, { icon: icon ? Object.assign(Object.assign({}, icon), { appearance: (_b = icon.appearance) !== null && _b !== void 0 ? _b : 'neutral' }) : undefined, size: 'l', align: 'vertical', className: cn(styles.notificationPanelBlank, className) })) }));
 }

package/dist/components/NotificationPanel/components/NotificationPanelBlank/styles.module.css

@@ -1,27 +1,3 @@
 .notificationPanelBlank{
-  gap:var(--space-notification-panel-blank-gap, 16px);
-  padding-top:var(--space-notification-panel-blank-vertical-padding, 24px);
-  padding-bottom:var(--space-notification-panel-blank-vertical-padding, 24px);
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  box-sizing:border-box;
-}
-
-.notificationPanelBlankContent{
-  gap:var(--space-notification-panel-blank-text-gap, 4px);
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  box-sizing:border-box;
-  text-align:center;
-}
-
-.notificationPanelBlankTitle{
-  color:var(--sys-neutral-text-main, #333333);
-}
-
-.notificationPanelBlankDescription{
-  color:var(--sys-neutral-text-support, #565656);
-  white-space:pre-line;
+  padding:var(--space-notification-panel-body-info-padding, 24px);
 }

package/dist/components/NotificationPanel/components/NotificationPanelDivider/NotificationPanelDivider.d.ts

@@ -0,0 +1,8 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+export type NotificationPanelDividerProps = WithSupportProps<{
+    /** Текст разделителя */
+    text: string;
+    className?: string;
+}>;
+/** Разделитель для группировки или разделения карточек в списке */
+export declare function NotificationPanelDivider({ text, className, ...rest }: NotificationPanelDividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NotificationPanel/components/NotificationPanelDivider/NotificationPanelDivider.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+/** Разделитель для группировки или разделения карточек в списке */
+export function NotificationPanelDivider(_a) {
+    var { text, className } = _a, rest = __rest(_a, ["text", "className"]);
+    return (_jsx(Typography.LightLabelS, Object.assign({ className: cn(styles.notificationPanelDivider, className) }, extractSupportProps(rest), { children: text })));
+}

package/dist/components/NotificationPanel/components/NotificationPanelDivider/index.d.ts

@@ -0,0 +1 @@
+export * from './NotificationPanelDivider';

package/dist/components/NotificationPanel/components/NotificationPanelDivider/index.js

@@ -0,0 +1 @@
+export * from './NotificationPanelDivider';

package/dist/components/NotificationPanel/components/NotificationPanelDivider/styles.module.css

@@ -0,0 +1,10 @@
+.notificationPanelDivider{
+  height:var(--size-notification-panel-readed-divider, 32px);
+  border-bottom-width:var(--border-width-notification-panel-container, 1px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-light, #868892);
+  border-bottom-color:var(--sys-neutral-decor-default, #dfe2ec);
+  border-bottom-style:solid;
+}

package/dist/components/NotificationPanel/constants.d.ts

@@ -8,10 +8,5 @@ export declare const TEST_IDS: {
     };
     readAll: string;
     footerButton: string;
-    blank: {
-        icon: string;
-        title: string;
-        description: string;
-    };
     skeleton: string;
 };

package/dist/components/NotificationPanel/constants.js

@@ -8,10 +8,5 @@ export const TEST_IDS = {
     },
     readAll: 'notification-panel__readAll',
     footerButton: 'notification-panel__footerButton',
-    blank: {
-        icon: 'notification-panel__blank__icon',
-        title: 'notification-panel__blank__title',
-        description: 'notification-panel__blank__description',
-    },
     skeleton: 'notification-panel__skeleton',
 };

package/dist/components/NotificationPanel/styles.module.css

@@ -8,7 +8,7 @@
   position:relative;
   display:flex;
   flex-direction:column;
-  border-bottom-color:var(--sys-neutral-decor-default, #dedede);
+  border-bottom-color:var(--sys-neutral-decor-default, #dfe2ec);
   border-bottom-style:solid;
 }
 .notificationPanelHeader::before{
@@ -21,7 +21,7 @@
   width:100%;
   height:calc(100% + var(--border-width-notification-panel-container, 1px));
   opacity:var(--opacity-a004, 0.04);
-  background-color:var(--sys-neutral-accent-default, #757575);
+  background-color:var(--sys-neutral-accent-default, #6f717c);
   border-radius:inherit;
 }
 
@@ -41,7 +41,7 @@
   gap:var(--space-notification-panel-header-headline-gap, 16px);
   display:flex;
   align-items:center;
-  color:var(--sys-neutral-text-main, #333333);
+  color:var(--sys-neutral-text-main, #33333b);
 }
 
 .notificationPanelTitle{
@@ -69,9 +69,9 @@
   width:100%;
   margin:0;
   padding:0;
-  color:var(--sys-neutral-text-light, #898989);
+  color:var(--sys-neutral-text-light, #868892);
   background:none;
-  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-color:var(--sys-neutral-decor-default, #dfe2ec);
   border-top-style:solid;
   border-right:none;
   border-bottom:none;
@@ -80,26 +80,28 @@
   outline-offset:0;
 }
 .notificationPanelFooterButton:hover{
-  color:var(--sys-neutral-text-support, #565656);
+  color:var(--sys-neutral-text-support, #656771);
 }
 .notificationPanelFooterButton:focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
   outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
-  color:var(--sys-neutral-text-support, #565656);
+  color:var(--sys-neutral-text-support, #656771);
   border-color:transparent;
-  outline-color:var(--sys-available-complementary, #131313);
+  outline-color:var(--sys-available-complementary, #141415);
 }
 .notificationPanelFooterButton:active{
-  color:var(--sys-neutral-text-main, #333333);
-  border-color:var(--sys-neutral-decor-default, #dedede);
+  color:var(--sys-neutral-text-main, #33333b);
+  border-color:var(--sys-neutral-decor-default, #dfe2ec);
 }
 
 .wrapper{
   box-sizing:border-box;
   width:100%;
   height:100%;
+  display:flex;
+  flex-direction:column;
 }
 
 .scrollStub{

package/dist/components/NotificationPanelPopover/styles.module.css

@@ -15,6 +15,6 @@
   display:flex;
   flex-direction:column;
   height:100%;
-  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
   box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.6.17-preview-e40879b4.0",
+  "version": "0.6.17-preview-bd8ccc1f.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@snack-uikit/button": "0.16.0",
     "@snack-uikit/chips": "0.11.6",
-    "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.1",
+    "@snack-uikit/info-block": "0.1.2",
     "@snack-uikit/link": "0.11.1",
     "@snack-uikit/list": "0.3.3",
     "@snack-uikit/popover-private": "0.13.0",
@@ -47,5 +47,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "83c6596d673690b97e619f2ff4745be264bf6b50"
+  "gitHead": "2506f16d0e158f04845ab76647e92582bd556cb2"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { MouseEventHandler, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 
+import { ButtonSimple, ButtonSimpleProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
 import { Link, LinkProps } from '@snack-uikit/link';
 import { BaseItemProps } from '@snack-uikit/list';
 import { TruncateString } from '@snack-uikit/truncate-string';
@@ -39,6 +40,10 @@ export type NotificationCardProps = WithSupportProps<{
   onClick?: MouseEventHandler<HTMLDivElement>;
   /** Колбэк при попадании карточки в область видимости на 80% */
   onVisible?(cardId: string): void;
+  /** Кнопка главного действия у карточки */
+  primaryButton?: Omit<ButtonTonalProps, 'size' | 'appearance' | 'data-test-id'>;
+  /** Кнопка второстепенного действия у карточки */
+  secondaryButton?: Omit<ButtonSimpleProps, 'size' | 'appearance' | 'data-test-id'>;
   /** Дополнительные действия у карточки */
   actions?: Action[];
   /** CSS-класс */
@@ -56,15 +61,22 @@ export function NotificationCard({
   link,
   date,
   onClick,
+  primaryButton,
+  secondaryButton,
   actions,
   onVisible,
   className,
   ...rest
 }: NotificationCardProps) {
-  const { icon, linkOnColor } = useMemo<{ icon: ReturnType<typeof getIcon>; linkOnColor: LinkProps['appearance'] }>(
+  const { icon, linkOnColor, buttonAppearance } = useMemo<{
+    icon: ReturnType<typeof getIcon>;
+    linkOnColor: LinkProps['appearance'];
+    buttonAppearance: ButtonTonalProps['appearance'];
+  }>(
     () => ({
       icon: getIcon(appearance),
       linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
+      buttonAppearance: appearance === APPEARANCE.ErrorCritical ? 'destructive' : 'primary',
     }),
     [appearance],
   );
@@ -144,6 +156,28 @@ export function NotificationCard({
         </Typography.SansBodyS>
       )}
 
+      {(primaryButton || secondaryButton) && (
+        <div className={styles.notificationCardButtons}>
+          {secondaryButton && (
+            <ButtonSimple
+              {...secondaryButton}
+              appearance={buttonAppearance}
+              size='s'
+              data-test-id={TEST_IDS.primaryButton}
+            />
+          )}
+
+          {primaryButton && (
+            <ButtonTonal
+              {...primaryButton}
+              appearance={buttonAppearance}
+              size='s'
+              data-test-id={TEST_IDS.secondaryButton}
+            />
+          )}
+        </div>
+      )}
+
       {showFooter && (
         <div className={styles.notificationCardFooter}>
           {link && (

package/src/components/NotificationCard/constants.ts

@@ -18,4 +18,6 @@ export const TEST_IDS = {
     droplistTrigger: 'notification-card__droplist-trigger',
     droplistAction: 'notification-card__droplist-action',
   },
+  primaryButton: 'notification-card__primary-button',
+  secondaryButton: 'notification-card__secondary-button',
 };

package/src/components/NotificationCard/styles.module.scss

@@ -170,3 +170,9 @@
   color: $sys-neutral-text-light;
   text-align: right;
 }
+
+.notificationCardButtons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -16,6 +16,7 @@ import {
   NotificationPanelSettings,
   NotificationPanelSettingsProps,
 } from './components';
+import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 import { TEST_IDS } from './constants';
 import styles from './styles.module.scss';
 
@@ -114,14 +115,11 @@ export function NotificationPanel({
         <div className={styles.scrollStub} ref={scrollEndRef} />
       </Scroll>
 
-      {
-        // !loading &&
-        footerButton && (
-          <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
-            <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
-          </button>
-        )
-      }
+      {footerButton && (
+        <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
+          <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
+        </button>
+      )}
     </div>
   );
 }
@@ -129,4 +127,6 @@ export function NotificationPanel({
 export namespace NotificationPanel {
   export const Blank: typeof NotificationPanelBlank = NotificationPanelBlank;
   export type BlankProps = NotificationPanelBlankProps;
+  export const Divider: typeof NotificationPanelDivider = NotificationPanelDivider;
+  export type DividerProps = NotificationPanelDividerProps;
 }

package/src/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.tsx

@@ -1,56 +1,22 @@
 import cn from 'classnames';
-import { ReactNode } from 'react';
 
-import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
-import { Typography } from '@snack-uikit/typography';
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { InfoBlock, InfoBlockProps } from '@snack-uikit/info-block';
 
-import { TEST_IDS } from '../../constants';
 import styles from './styles.module.scss';
 
-export type NotificationPanelBlankProps = WithSupportProps<{
-  /** Заголовок */
-  title: ReactNode;
-  /** Описание */
-  description?: ReactNode;
-  /** Иконка */
-  icon?: IconPredefinedProps['icon'];
-  /** Цвет обводки для иконки */
-  iconAppearance?: IconPredefinedProps['appearance'];
-  /** CSS-класс */
-  className?: string;
-}>;
+export type NotificationPanelBlankProps = Omit<InfoBlockProps, 'footer' | 'align' | 'size'>;
 
 /** Компонента для "заглушки" вместо карточек в панели */
-export function NotificationPanelBlank({
-  icon,
-  iconAppearance = 'neutral',
-  title,
-  description,
-  className,
-  ...rest
-}: NotificationPanelBlankProps) {
+export function NotificationPanelBlank({ icon, className, ...props }: NotificationPanelBlankProps) {
   return (
-    <div className={cn(styles.notificationPanelBlank, className)} {...extractSupportProps(rest)}>
-      {icon && <IconPredefined icon={icon} appearance={iconAppearance} size='l' data-test-id={TEST_IDS.blank.icon} />}
-
-      <div className={styles.notificationPanelBlankContent}>
-        <Typography.SansTitleS
-          tag='div'
-          className={styles.notificationPanelBlankTitle}
-          data-test-id={TEST_IDS.blank.title}
-        >
-          {title}
-        </Typography.SansTitleS>
-
-        <Typography.SansBodyM
-          tag='div'
-          className={styles.notificationPanelBlankDescription}
-          data-test-id={TEST_IDS.blank.description}
-        >
-          {description}
-        </Typography.SansBodyM>
-      </div>
-    </div>
+    <>
+      <InfoBlock
+        {...props}
+        icon={icon ? { ...icon, appearance: icon.appearance ?? 'neutral' } : undefined}
+        size='l'
+        align='vertical'
+        className={cn(styles.notificationPanelBlank, className)}
+      />
+    </>
   );
 }

package/src/components/NotificationPanel/components/NotificationPanelBlank/styles.module.scss

@@ -2,31 +2,5 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .notificationPanelBlank {
-  @include composite-var($notification-panel-blank-container);
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.notificationPanelBlankContent {
-  @include composite-var($notification-panel-blank-text);
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  box-sizing: border-box;
-
-  text-align: center;
-}
-
-.notificationPanelBlankTitle {
-  color: $sys-neutral-text-main;
-}
-
-.notificationPanelBlankDescription {
-  color: $sys-neutral-text-support;
-  white-space: pre-line;
+  @include composite-var($notification-panel-body-info-container);
 }

package/src/components/NotificationPanel/components/NotificationPanelDivider/NotificationPanelDivider.tsx

@@ -0,0 +1,21 @@
+import cn from 'classnames';
+
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type NotificationPanelDividerProps = WithSupportProps<{
+  /** Текст разделителя */
+  text: string;
+  className?: string;
+}>;
+
+/** Разделитель для группировки или разделения карточек в списке */
+export function NotificationPanelDivider({ text, className, ...rest }: NotificationPanelDividerProps) {
+  return (
+    <Typography.LightLabelS className={cn(styles.notificationPanelDivider, className)} {...extractSupportProps(rest)}>
+      {text}
+    </Typography.LightLabelS>
+  );
+}

package/src/components/NotificationPanel/components/NotificationPanelDivider/index.ts

@@ -0,0 +1 @@
+export * from './NotificationPanelDivider';

package/src/components/NotificationPanel/components/NotificationPanelDivider/styles.module.scss

@@ -0,0 +1,14 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationPanel';
+
+.notificationPanelDivider {
+  @include composite-var($notification-panel-readed-divider);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: $sys-neutral-text-light;
+
+  border-bottom-color: $sys-neutral-decor-default;
+  border-bottom-style: solid;
+}

package/src/components/NotificationPanel/constants.ts

@@ -8,10 +8,5 @@ export const TEST_IDS = {
   },
   readAll: 'notification-panel__readAll',
   footerButton: 'notification-panel__footerButton',
-  blank: {
-    icon: 'notification-panel__blank__icon',
-    title: 'notification-panel__blank__title',
-    description: 'notification-panel__blank__description',
-  },
   skeleton: 'notification-panel__skeleton',
 };

package/src/components/NotificationPanel/styles.module.scss

@@ -112,6 +112,8 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .scrollStub {