@cloud-ru/uikit-product-site-csat 0.1.17 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.2.0 (2025-11-24)
+
+
+### Features
+
+* **SITE-10171:** update component Site-csat for a/b test ([8061656](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/8061656f79946d2987b7fe407aa98b6c6e033263))
+
+
+
+
+
+## 0.1.18 (2025-11-13)
+
+
+### Bug Fixes
+
+* **PD-3377:** removed contributors ([121640f](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/121640f7b88b20a728a6ad2c39de8841532bb308))
+
+
+
+
+
 ## 0.1.17 (2025-11-13)
 
 ### Only dependencies have been changed

package/dist/cjs/components/SiteCsat/SiteCsat.d.ts

@@ -1,17 +1,30 @@
-import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { onSubmitVariables } from '../../types';
 export type SiteCsatProps = WithLayoutType<{
+    /** Отображение Spinner */
     isLoading?: boolean;
+    /** Состояние отображение лайка: лайк, дизлайк или ничего не выбрано */
     like?: boolean;
+    /** Обработчик нажатия на лайк или дизлайк */
     onSetLike: (flag: boolean) => void;
+    /** Текст рядом с кнопками */
     label: string;
+    /** Выбор версии компонента, сделано для a/b тестирования, после тестирования этот prop удалится */
+    showNewAppearance?: boolean;
+    /** Данные для заполнения формы фидбэка */
     dislikeCommentForm?: {
+        /** Открыта или закрыт форма */
         open: boolean;
+        /** Доступно ли нажатие на дизлайк */
         dislikeEnabled?: boolean;
+        /** Состояние загрузки кнопки отправки */
         loadingButton?: boolean;
+        /** Обработчик нажатия на форму */
         onClickForm(): void;
+        /** Обработчик onSubmit формы */
         onSubmit({ textComment, selectedChips }: onSubmitVariables): void;
+        /** Обработчик нажатия на chips */
         onCheckChips?(titleChip: string): void;
     };
 }>;
-export declare function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm }: SiteCsatProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm, showNewAppearance, }: SiteCsatProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SiteCsat/SiteCsat.js

@@ -10,6 +10,6 @@ const loaders_1 = require("@snack-uikit/loaders");
 const typography_1 = require("@snack-uikit/typography");
 const helperComponents_1 = require("../../helperComponents");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.siteCsatBlock, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.csatFormBlock, children: [like === undefined || isLoading ? ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: label })) : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.reportSendBlock, children: [(0, jsx_runtime_1.jsx)(icons_1.CheckFilledSVG, { className: styles_module_scss_1.default.checkIcon }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: "\u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0442\u0437\u044B\u0432" })] })), isLoading ? ((0, jsx_runtime_1.jsx)(loaders_1.Spinner, {})) : ((0, jsx_runtime_1.jsx)(helperComponents_1.LikeDislikeBlock, { dislikeEnabled: dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled, like: like, onSetLike: onSetLike })), like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.textSupport, children: "\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u0435\u0441\u044C, \u0447\u0442\u043E \u0438\u043C\u0435\u043D\u043D\u043E \u043D\u0435 \u0442\u0430\u043A?" }))] }), like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && ((0, jsx_runtime_1.jsx)(helperComponents_1.ContentDislikeCsat, { classNameContentContainer: styles_module_scss_1.default.classNameContentContainer, classNameChipsContainer: styles_module_scss_1.default.classNameChipsContainer, onCheckChips: dislikeCommentForm.onCheckChips, onClickForm: dislikeCommentForm.onClickForm, loadingButton: dislikeCommentForm.loadingButton, onSubmit: dislikeCommentForm.onSubmit }))] }));
+function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm, showNewAppearance, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.siteCsatBlock, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.csatFormBlock, children: [like === undefined || isLoading ? ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: label })) : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.reportSendBlock, children: [(0, jsx_runtime_1.jsx)(icons_1.CheckFilledSVG, { className: styles_module_scss_1.default.checkIcon }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: "\u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0442\u0437\u044B\u0432" })] })), isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.spinnerContainer, children: (0, jsx_runtime_1.jsx)(loaders_1.Spinner, {}) })) : ((0, jsx_runtime_1.jsx)(helperComponents_1.LikeDislikeBlock, { showNewAppearance: showNewAppearance, dislikeEnabled: dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled, like: like, onSetLike: onSetLike })), like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.textSupport, children: "\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u0435\u0441\u044C, \u0447\u0442\u043E \u0438\u043C\u0435\u043D\u043D\u043E \u043D\u0435 \u0442\u0430\u043A?" }))] }), like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && ((0, jsx_runtime_1.jsx)(helperComponents_1.ContentDislikeCsat, { classNameContentContainer: styles_module_scss_1.default.classNameContentContainer, classNameChipsContainer: styles_module_scss_1.default.classNameChipsContainer, onCheckChips: dislikeCommentForm.onCheckChips, onClickForm: dislikeCommentForm.onClickForm, loadingButton: dislikeCommentForm.loadingButton, onSubmit: dislikeCommentForm.onSubmit }))] }));
 }

package/dist/cjs/components/SiteCsat/styles.module.css

@@ -38,4 +38,10 @@
 
 .classNameChipsContainer{
   justify-content:center;
+}
+
+.spinnerContainer{
+  height:32px;
+  display:flex;
+  align-items:center;
 }

package/dist/cjs/components/SiteCsatPopover/SiteCsatPopover.d.ts

@@ -1,20 +1,35 @@
-import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { onSubmitVariables } from '../../types';
 export type SiteCsatPopoverProps = WithLayoutType<{
+    /** Отображение Spinner */
     loading?: boolean;
+    /** Состояние отображение лайка: лайк, дизлайк или ничего не выбрано */
     like?: boolean;
+    /** Обработчик нажатия на лайк или дизлайк */
     onSetLike: (flag: boolean) => void;
+    /** Текст рядом с кнопками */
     label: string;
+    /** Данные поповера */
     negativeFeedbackForm: {
+        /** Флаг открытости поповера */
         open: boolean;
+        /** Обработчик открытия или закрытия поповера */
         onSetOpen: (flag: boolean) => void;
     };
+    /** Выбор версии компонента, сделано для a/b тестирования, после тестирования этот prop удалится */
+    showNewAppearance?: boolean;
+    /** Данные для заполнения формы фидбэка */
     dislikeCommentForm?: {
+        /** Доступно ли нажатие на дизлайк */
         dislikeEnabled: boolean;
+        /** Состояние загрузки кнопки отправки */
         loadingButton?: boolean;
+        /** Обработчик нажатия на форму */
         onClickForm(): void;
+        /** Обработчик нажатия на chips */
         onCheckChips?(titleChip: string): void;
+        /** Обработчик onSubmit формы */
         onSubmit({ textComment, selectedChips }: onSubmitVariables): void;
     };
 }>;
-export declare function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbackForm, label, dislikeCommentForm, }: SiteCsatPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbackForm, label, dislikeCommentForm, showNewAppearance, }: SiteCsatPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SiteCsatPopover/SiteCsatPopover.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SiteCsatPopover = SiteCsatPopover;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const uikit_product_mobile_modal_1 = require("@sbercloud/uikit-product-mobile-modal");
+const uikit_product_mobile_modal_1 = require("@cloud-ru/uikit-product-mobile-modal");
 const loaders_1 = require("@snack-uikit/loaders");
 const popover_1 = require("@snack-uikit/popover");
 const typography_1 = require("@snack-uikit/typography");
 const helperComponents_1 = require("../../helperComponents");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbackForm, label, dislikeCommentForm, }) {
+function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbackForm, label, dislikeCommentForm, showNewAppearance = false, }) {
     const isMobile = layoutType === 'mobile';
     const triggerRef = (0, react_1.useRef)(null);
     const handleOpenClosePopover = () => {
@@ -23,5 +23,7 @@ function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbac
                         size: 'm',
                         fullWidth: true,
                     } }) })] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.siteCsatPopoverBlock, children: [!isMobile && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.label, children: label }), loading ? ((0, jsx_runtime_1.jsx)(loaders_1.Spinner, { className: styles_module_scss_1.default.spinner })) : ((0, jsx_runtime_1.jsx)(helperComponents_1.LikeDislikeBlock, { dislikeEnabled: dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled, className: styles_module_scss_1.default.likeDislikeBlock, onOpenClosePopover: handleOpenClosePopover, triggerRef: triggerRef, like: like, onSetLike: onSetLike }))] }), isMobile ? mobileModal : popover] }));
+    const title = like === true || (like !== undefined && !(dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled)) ? 'Спасибо за отзыв!' : label;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.siteCsatPopoverBlock, children: [!isMobile &&
+                        (showNewAppearance ? ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { className: styles_module_scss_1.default.labelNewAppearance, children: title })) : ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.label, children: label }))), loading ? ((0, jsx_runtime_1.jsx)(loaders_1.Spinner, { className: styles_module_scss_1.default.spinner })) : ((0, jsx_runtime_1.jsx)(helperComponents_1.LikeDislikeBlock, { showNewAppearance: showNewAppearance, dislikeEnabled: dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled, className: styles_module_scss_1.default.likeDislikeBlock, onOpenClosePopover: handleOpenClosePopover, triggerRef: triggerRef, like: like, onSetLike: onSetLike, hideTextLabel: isMobile }))] }), isMobile ? mobileModal : popover] }));
 }

package/dist/cjs/components/SiteCsatPopover/styles.module.css

@@ -4,12 +4,17 @@
   flex-direction:row;
   align-items:center;
   gap:12px;
+  height:32px;
 }
 
 .label{
   color:var(--sys-neutral-text-support, #6d707f);
 }
 
+.labelNewAppearance{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
 .likeDislikeBlock{
   display:flex;
   flex-direction:row;

package/dist/cjs/helperComponents/LikeDislikeBlock/LikeDislikeBlock.d.ts

@@ -6,6 +6,8 @@ type LikeDislikeBlockProps = {
     triggerRef?: MutableRefObject<HTMLButtonElement | null>;
     onOpenClosePopover?: () => void;
     onSetLike: (flag: boolean) => void;
+    showNewAppearance?: boolean;
+    hideTextLabel?: boolean;
 };
-export declare function LikeDislikeBlock({ like, onSetLike, triggerRef, onOpenClosePopover, className, dislikeEnabled, }: LikeDislikeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeDislikeBlock({ like, onSetLike, triggerRef, onOpenClosePopover, className, dislikeEnabled, showNewAppearance, hideTextLabel, }: LikeDislikeBlockProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/LikeDislikeBlock/LikeDislikeBlock.js

@@ -6,15 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LikeDislikeBlock = LikeDislikeBlock;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
-const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
 const button_1 = require("@snack-uikit/button");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function LikeDislikeBlock({ like, onSetLike, triggerRef, onOpenClosePopover, className, dislikeEnabled, }) {
+function LikeDislikeBlock({ like, onSetLike, triggerRef, onOpenClosePopover, className, dislikeEnabled, showNewAppearance, hideTextLabel, }) {
     const handleLike = () => {
         onSetLike(true);
     };
     const handleDislike = () => {
         onSetLike(false);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: className || styles_module_scss_1.default.likeDislikeBlock, children: like === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { onClick: handleLike, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.LikeOutlineSVG, {}) }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { onClick: handleDislike, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.DislikeOutlineSVG, {}) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [like && (0, jsx_runtime_1.jsx)(uikit_product_icons_1.LikeFilledSVG, { className: (0, classnames_1.default)(styles_module_scss_1.default.icon, styles_module_scss_1.default.iconDisabled) }), !like && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { onClick: onOpenClosePopover, disabled: !dislikeEnabled, ref: triggerRef, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.DislikeFilledSVG, {}) }))] })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className || styles_module_scss_1.default.likeDislikeBlock, children: like === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showNewAppearance ? ((0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({ onClick: handleLike, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.LikeOutlineSVG, {}) }, (hideTextLabel ? {} : { label: 'Да' })))) : ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { onClick: handleLike, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.LikeOutlineSVG, {}) })), showNewAppearance ? ((0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({ onClick: handleDislike, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.DislikeOutlineSVG, {}) }, (hideTextLabel ? {} : { label: 'Нет' })))) : ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { onClick: handleDislike, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.DislikeOutlineSVG, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [like &&
+                    (showNewAppearance ? ((0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({ disabled: true, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.LikeFilledSVG, {}) }, (hideTextLabel ? {} : { label: 'Да' })))) : ((0, jsx_runtime_1.jsx)(uikit_product_icons_1.LikeFilledSVG, { className: (0, classnames_1.default)(styles_module_scss_1.default.icon, styles_module_scss_1.default.iconDisabled) }))), !like &&
+                    (showNewAppearance ? ((0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({ disabled: !dislikeEnabled, onClick: onOpenClosePopover, ref: triggerRef, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.DislikeFilledSVG, {}) }, (hideTextLabel ? {} : { label: 'Нет' })))) : ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { onClick: onOpenClosePopover, disabled: !dislikeEnabled, ref: triggerRef, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.DislikeFilledSVG, {}) })))] })) }));
 }

package/dist/cjs/helperComponents/PopoverReport/PopoverReportContent.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopoverReportContent = PopoverReportContent;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
 const typography_1 = require("@snack-uikit/typography");
 const ContentDislikeCsat_1 = require("../ContentDislikeCsat");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));

package/dist/esm/components/SiteCsat/SiteCsat.d.ts

@@ -1,17 +1,30 @@
-import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { onSubmitVariables } from '../../types';
 export type SiteCsatProps = WithLayoutType<{
+    /** Отображение Spinner */
     isLoading?: boolean;
+    /** Состояние отображение лайка: лайк, дизлайк или ничего не выбрано */
     like?: boolean;
+    /** Обработчик нажатия на лайк или дизлайк */
     onSetLike: (flag: boolean) => void;
+    /** Текст рядом с кнопками */
     label: string;
+    /** Выбор версии компонента, сделано для a/b тестирования, после тестирования этот prop удалится */
+    showNewAppearance?: boolean;
+    /** Данные для заполнения формы фидбэка */
     dislikeCommentForm?: {
+        /** Открыта или закрыт форма */
         open: boolean;
+        /** Доступно ли нажатие на дизлайк */
         dislikeEnabled?: boolean;
+        /** Состояние загрузки кнопки отправки */
         loadingButton?: boolean;
+        /** Обработчик нажатия на форму */
         onClickForm(): void;
+        /** Обработчик onSubmit формы */
         onSubmit({ textComment, selectedChips }: onSubmitVariables): void;
+        /** Обработчик нажатия на chips */
         onCheckChips?(titleChip: string): void;
     };
 }>;
-export declare function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm }: SiteCsatProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm, showNewAppearance, }: SiteCsatProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SiteCsat/SiteCsat.js

@@ -4,6 +4,6 @@ import { Spinner } from '@snack-uikit/loaders';
 import { Typography } from '@snack-uikit/typography';
 import { ContentDislikeCsat, LikeDislikeBlock } from '../../helperComponents';
 import styles from './styles.module.css';
-export function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm }) {
-    return (_jsxs("div", { className: styles.siteCsatBlock, "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.csatFormBlock, children: [like === undefined || isLoading ? (_jsx(Typography.SansTitleM, { children: label })) : (_jsxs("div", { className: styles.reportSendBlock, children: [_jsx(CheckFilledSVG, { className: styles.checkIcon }), _jsx(Typography.SansTitleM, { children: "\u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0442\u0437\u044B\u0432" })] })), isLoading ? (_jsx(Spinner, {})) : (_jsx(LikeDislikeBlock, { dislikeEnabled: dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled, like: like, onSetLike: onSetLike })), like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && (_jsx(Typography.SansBodyM, { className: styles.textSupport, children: "\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u0435\u0441\u044C, \u0447\u0442\u043E \u0438\u043C\u0435\u043D\u043D\u043E \u043D\u0435 \u0442\u0430\u043A?" }))] }), like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && (_jsx(ContentDislikeCsat, { classNameContentContainer: styles.classNameContentContainer, classNameChipsContainer: styles.classNameChipsContainer, onCheckChips: dislikeCommentForm.onCheckChips, onClickForm: dislikeCommentForm.onClickForm, loadingButton: dislikeCommentForm.loadingButton, onSubmit: dislikeCommentForm.onSubmit }))] }));
+export function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm, showNewAppearance, }) {
+    return (_jsxs("div", { className: styles.siteCsatBlock, "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.csatFormBlock, children: [like === undefined || isLoading ? (_jsx(Typography.SansTitleM, { children: label })) : (_jsxs("div", { className: styles.reportSendBlock, children: [_jsx(CheckFilledSVG, { className: styles.checkIcon }), _jsx(Typography.SansTitleM, { children: "\u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0442\u0437\u044B\u0432" })] })), isLoading ? (_jsx("div", { className: styles.spinnerContainer, children: _jsx(Spinner, {}) })) : (_jsx(LikeDislikeBlock, { showNewAppearance: showNewAppearance, dislikeEnabled: dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled, like: like, onSetLike: onSetLike })), like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && (_jsx(Typography.SansBodyM, { className: styles.textSupport, children: "\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u0435\u0441\u044C, \u0447\u0442\u043E \u0438\u043C\u0435\u043D\u043D\u043E \u043D\u0435 \u0442\u0430\u043A?" }))] }), like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && (_jsx(ContentDislikeCsat, { classNameContentContainer: styles.classNameContentContainer, classNameChipsContainer: styles.classNameChipsContainer, onCheckChips: dislikeCommentForm.onCheckChips, onClickForm: dislikeCommentForm.onClickForm, loadingButton: dislikeCommentForm.loadingButton, onSubmit: dislikeCommentForm.onSubmit }))] }));
 }

package/dist/esm/components/SiteCsat/styles.module.css

@@ -38,4 +38,10 @@
 
 .classNameChipsContainer{
   justify-content:center;
+}
+
+.spinnerContainer{
+  height:32px;
+  display:flex;
+  align-items:center;
 }

package/dist/esm/components/SiteCsatPopover/SiteCsatPopover.d.ts

@@ -1,20 +1,35 @@
-import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { onSubmitVariables } from '../../types';
 export type SiteCsatPopoverProps = WithLayoutType<{
+    /** Отображение Spinner */
     loading?: boolean;
+    /** Состояние отображение лайка: лайк, дизлайк или ничего не выбрано */
     like?: boolean;
+    /** Обработчик нажатия на лайк или дизлайк */
     onSetLike: (flag: boolean) => void;
+    /** Текст рядом с кнопками */
     label: string;
+    /** Данные поповера */
     negativeFeedbackForm: {
+        /** Флаг открытости поповера */
         open: boolean;
+        /** Обработчик открытия или закрытия поповера */
         onSetOpen: (flag: boolean) => void;
     };
+    /** Выбор версии компонента, сделано для a/b тестирования, после тестирования этот prop удалится */
+    showNewAppearance?: boolean;
+    /** Данные для заполнения формы фидбэка */
     dislikeCommentForm?: {
+        /** Доступно ли нажатие на дизлайк */
         dislikeEnabled: boolean;
+        /** Состояние загрузки кнопки отправки */
         loadingButton?: boolean;
+        /** Обработчик нажатия на форму */
         onClickForm(): void;
+        /** Обработчик нажатия на chips */
         onCheckChips?(titleChip: string): void;
+        /** Обработчик onSubmit формы */
         onSubmit({ textComment, selectedChips }: onSubmitVariables): void;
     };
 }>;
-export declare function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbackForm, label, dislikeCommentForm, }: SiteCsatPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbackForm, label, dislikeCommentForm, showNewAppearance, }: SiteCsatPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SiteCsatPopover/SiteCsatPopover.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { MobileModalCustom } from '@sbercloud/uikit-product-mobile-modal';
+import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
 import { Spinner } from '@snack-uikit/loaders';
 import { Popover } from '@snack-uikit/popover';
 import { Typography } from '@snack-uikit/typography';
 import { ContentDislikeCsat, LikeDislikeBlock, PopoverReportContent } from '../../helperComponents';
 import styles from './styles.module.css';
-export function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbackForm, label, dislikeCommentForm, }) {
+export function SiteCsatPopover({ loading, like, onSetLike, layoutType, negativeFeedbackForm, label, dislikeCommentForm, showNewAppearance = false, }) {
     const isMobile = layoutType === 'mobile';
     const triggerRef = useRef(null);
     const handleOpenClosePopover = () => {
@@ -17,5 +17,7 @@ export function SiteCsatPopover({ loading, like, onSetLike, layoutType, negative
                         size: 'm',
                         fullWidth: true,
                     } }) })] }));
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.siteCsatPopoverBlock, children: [!isMobile && _jsx(Typography.SansBodyM, { className: styles.label, children: label }), loading ? (_jsx(Spinner, { className: styles.spinner })) : (_jsx(LikeDislikeBlock, { dislikeEnabled: dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled, className: styles.likeDislikeBlock, onOpenClosePopover: handleOpenClosePopover, triggerRef: triggerRef, like: like, onSetLike: onSetLike }))] }), isMobile ? mobileModal : popover] }));
+    const title = like === true || (like !== undefined && !(dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled)) ? 'Спасибо за отзыв!' : label;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.siteCsatPopoverBlock, children: [!isMobile &&
+                        (showNewAppearance ? (_jsx(Typography.SansTitleM, { className: styles.labelNewAppearance, children: title })) : (_jsx(Typography.SansBodyM, { className: styles.label, children: label }))), loading ? (_jsx(Spinner, { className: styles.spinner })) : (_jsx(LikeDislikeBlock, { showNewAppearance: showNewAppearance, dislikeEnabled: dislikeCommentForm === null || dislikeCommentForm === void 0 ? void 0 : dislikeCommentForm.dislikeEnabled, className: styles.likeDislikeBlock, onOpenClosePopover: handleOpenClosePopover, triggerRef: triggerRef, like: like, onSetLike: onSetLike, hideTextLabel: isMobile }))] }), isMobile ? mobileModal : popover] }));
 }

package/dist/esm/components/SiteCsatPopover/styles.module.css

@@ -4,12 +4,17 @@
   flex-direction:row;
   align-items:center;
   gap:12px;
+  height:32px;
 }
 
 .label{
   color:var(--sys-neutral-text-support, #6d707f);
 }
 
+.labelNewAppearance{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
 .likeDislikeBlock{
   display:flex;
   flex-direction:row;

package/dist/esm/helperComponents/LikeDislikeBlock/LikeDislikeBlock.d.ts

@@ -6,6 +6,8 @@ type LikeDislikeBlockProps = {
     triggerRef?: MutableRefObject<HTMLButtonElement | null>;
     onOpenClosePopover?: () => void;
     onSetLike: (flag: boolean) => void;
+    showNewAppearance?: boolean;
+    hideTextLabel?: boolean;
 };
-export declare function LikeDislikeBlock({ like, onSetLike, triggerRef, onOpenClosePopover, className, dislikeEnabled, }: LikeDislikeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeDislikeBlock({ like, onSetLike, triggerRef, onOpenClosePopover, className, dislikeEnabled, showNewAppearance, hideTextLabel, }: LikeDislikeBlockProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/helperComponents/LikeDislikeBlock/LikeDislikeBlock.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { DislikeFilledSVG, DislikeOutlineSVG, LikeFilledSVG, LikeOutlineSVG } from '@sbercloud/uikit-product-icons';
-import { ButtonFunction } from '@snack-uikit/button';
+import { DislikeFilledSVG, DislikeOutlineSVG, LikeFilledSVG, LikeOutlineSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonFunction, ButtonTonal } from '@snack-uikit/button';
 import styles from './styles.module.css';
-export function LikeDislikeBlock({ like, onSetLike, triggerRef, onOpenClosePopover, className, dislikeEnabled, }) {
+export function LikeDislikeBlock({ like, onSetLike, triggerRef, onOpenClosePopover, className, dislikeEnabled, showNewAppearance, hideTextLabel, }) {
     const handleLike = () => {
         onSetLike(true);
     };
     const handleDislike = () => {
         onSetLike(false);
     };
-    return (_jsx("div", { className: className || styles.likeDislikeBlock, children: like === undefined ? (_jsxs(_Fragment, { children: [_jsx(ButtonFunction, { onClick: handleLike, icon: _jsx(LikeOutlineSVG, {}) }), _jsx(ButtonFunction, { onClick: handleDislike, icon: _jsx(DislikeOutlineSVG, {}) })] })) : (_jsxs(_Fragment, { children: [like && _jsx(LikeFilledSVG, { className: cn(styles.icon, styles.iconDisabled) }), !like && (_jsx(ButtonFunction, { onClick: onOpenClosePopover, disabled: !dislikeEnabled, ref: triggerRef, icon: _jsx(DislikeFilledSVG, {}) }))] })) }));
+    return (_jsx("div", { className: className || styles.likeDislikeBlock, children: like === undefined ? (_jsxs(_Fragment, { children: [showNewAppearance ? (_jsx(ButtonTonal, Object.assign({ onClick: handleLike, icon: _jsx(LikeOutlineSVG, {}) }, (hideTextLabel ? {} : { label: 'Да' })))) : (_jsx(ButtonFunction, { onClick: handleLike, icon: _jsx(LikeOutlineSVG, {}) })), showNewAppearance ? (_jsx(ButtonTonal, Object.assign({ onClick: handleDislike, icon: _jsx(DislikeOutlineSVG, {}) }, (hideTextLabel ? {} : { label: 'Нет' })))) : (_jsx(ButtonFunction, { onClick: handleDislike, icon: _jsx(DislikeOutlineSVG, {}) }))] })) : (_jsxs(_Fragment, { children: [like &&
+                    (showNewAppearance ? (_jsx(ButtonTonal, Object.assign({ disabled: true, icon: _jsx(LikeFilledSVG, {}) }, (hideTextLabel ? {} : { label: 'Да' })))) : (_jsx(LikeFilledSVG, { className: cn(styles.icon, styles.iconDisabled) }))), !like &&
+                    (showNewAppearance ? (_jsx(ButtonTonal, Object.assign({ disabled: !dislikeEnabled, onClick: onOpenClosePopover, ref: triggerRef, icon: _jsx(DislikeFilledSVG, {}) }, (hideTextLabel ? {} : { label: 'Нет' })))) : (_jsx(ButtonFunction, { onClick: onOpenClosePopover, disabled: !dislikeEnabled, ref: triggerRef, icon: _jsx(DislikeFilledSVG, {}) })))] })) }));
 }

package/dist/esm/helperComponents/PopoverReport/PopoverReportContent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseInterfaceSVG } from '@sbercloud/uikit-product-icons';
+import { CloseInterfaceSVG } from '@cloud-ru/uikit-product-icons';
 import { Typography } from '@snack-uikit/typography';
 import { ContentDislikeCsat } from '../ContentDislikeCsat';
 import styles from './styles.module.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-csat",
   "title": "Site Csat",
-  "version": "0.1.17",
+  "version": "0.2.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,16 +30,15 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
-  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "15.1.3",
-    "@cloud-ru/uikit-product-mobile-modal": "0.9.20",
-    "@cloud-ru/uikit-product-utils": "7.0.2",
+    "@cloud-ru/uikit-product-icons": "15.1.4",
+    "@cloud-ru/uikit-product-mobile-modal": "0.9.21",
+    "@cloud-ru/uikit-product-utils": "7.0.3",
     "@snack-uikit/button": "0.19.15",
     "@snack-uikit/chips": "0.28.4",
     "@snack-uikit/fields": "0.48.7",
@@ -53,5 +52,5 @@
   "devDependencies": {
     "@sbercloud/figma-tokens-cloud-platform": "17.7.6"
   },
-  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
+  "gitHead": "0f2e155399e1e9031939b4ebdff7c860d194a908"
 }

package/src/components/SiteCsat/SiteCsat.tsx

@@ -8,21 +8,42 @@ import { onSubmitVariables } from '../../types';
 import styles from './styles.module.scss';
 
 export type SiteCsatProps = WithLayoutType<{
+  /** Отображение Spinner */
   isLoading?: boolean;
+  /** Состояние отображение лайка: лайк, дизлайк или ничего не выбрано */
   like?: boolean;
+  /** Обработчик нажатия на лайк или дизлайк */
   onSetLike: (flag: boolean) => void;
+  /** Текст рядом с кнопками */
   label: string;
+  /** Выбор версии компонента, сделано для a/b тестирования, после тестирования этот prop удалится */
+  showNewAppearance?: boolean;
+  /** Данные для заполнения формы фидбэка */
   dislikeCommentForm?: {
+    /** Открыта или закрыт форма */
     open: boolean;
+    /** Доступно ли нажатие на дизлайк */
     dislikeEnabled?: boolean;
+    /** Состояние загрузки кнопки отправки */
     loadingButton?: boolean;
+    /** Обработчик нажатия на форму */
     onClickForm(): void;
+    /** Обработчик onSubmit формы */
     onSubmit({ textComment, selectedChips }: onSubmitVariables): void;
+    /** Обработчик нажатия на chips */
     onCheckChips?(titleChip: string): void;
   };
 }>;
 
-export function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislikeCommentForm }: SiteCsatProps) {
+export function SiteCsat({
+  isLoading,
+  like,
+  onSetLike,
+  layoutType,
+  label,
+  dislikeCommentForm,
+  showNewAppearance,
+}: SiteCsatProps) {
   return (
     <div className={styles.siteCsatBlock} data-layout-type={layoutType}>
       <div className={styles.csatFormBlock}>
@@ -35,9 +56,16 @@ export function SiteCsat({ isLoading, like, onSetLike, layoutType, label, dislik
           </div>
         )}
         {isLoading ? (
-          <Spinner />
+          <div className={styles.spinnerContainer}>
+            <Spinner />
+          </div>
         ) : (
-          <LikeDislikeBlock dislikeEnabled={dislikeCommentForm?.dislikeEnabled} like={like} onSetLike={onSetLike} />
+          <LikeDislikeBlock
+            showNewAppearance={showNewAppearance}
+            dislikeEnabled={dislikeCommentForm?.dislikeEnabled}
+            like={like}
+            onSetLike={onSetLike}
+          />
         )}
         {like === false && !isLoading && dislikeCommentForm && dislikeCommentForm.open && (
           <Typography.SansBodyM className={styles.textSupport}>Поделитесь, что именно не так?</Typography.SansBodyM>

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

@@ -43,3 +43,9 @@
 .classNameChipsContainer {
   justify-content: center;
 }
+
+.spinnerContainer {
+  height: 32px;
+  display: flex;
+  align-items: center;
+}

package/src/components/SiteCsatPopover/SiteCsatPopover.tsx

@@ -11,19 +11,34 @@ import { onSubmitVariables } from '../../types';
 import styles from './styles.module.scss';
 
 export type SiteCsatPopoverProps = WithLayoutType<{
+  /** Отображение Spinner */
   loading?: boolean;
+  /** Состояние отображение лайка: лайк, дизлайк или ничего не выбрано */
   like?: boolean;
+  /** Обработчик нажатия на лайк или дизлайк */
   onSetLike: (flag: boolean) => void;
+  /** Текст рядом с кнопками */
   label: string;
+  /** Данные поповера */
   negativeFeedbackForm: {
+    /** Флаг открытости поповера */
     open: boolean;
+    /** Обработчик открытия или закрытия поповера */
     onSetOpen: (flag: boolean) => void;
   };
+  /** Выбор версии компонента, сделано для a/b тестирования, после тестирования этот prop удалится */
+  showNewAppearance?: boolean;
+  /** Данные для заполнения формы фидбэка */
   dislikeCommentForm?: {
+    /** Доступно ли нажатие на дизлайк */
     dislikeEnabled: boolean;
+    /** Состояние загрузки кнопки отправки */
     loadingButton?: boolean;
+    /** Обработчик нажатия на форму */
     onClickForm(): void;
+    /** Обработчик нажатия на chips */
     onCheckChips?(titleChip: string): void;
+    /** Обработчик onSubmit формы */
     onSubmit({ textComment, selectedChips }: onSubmitVariables): void;
   };
 }>;
@@ -36,6 +51,7 @@ export function SiteCsatPopover({
   negativeFeedbackForm,
   label,
   dislikeCommentForm,
+  showNewAppearance = false,
 }: SiteCsatPopoverProps) {
   const isMobile = layoutType === 'mobile';
 
@@ -83,20 +99,30 @@ export function SiteCsatPopover({
     </MobileModalCustom>
   );
 
+  const title =
+    like === true || (like !== undefined && !dislikeCommentForm?.dislikeEnabled) ? 'Спасибо за отзыв!' : label;
+
   return (
     <>
       <div className={styles.siteCsatPopoverBlock}>
-        {!isMobile && <Typography.SansBodyM className={styles.label}>{label}</Typography.SansBodyM>}
+        {!isMobile &&
+          (showNewAppearance ? (
+            <Typography.SansTitleM className={styles.labelNewAppearance}>{title}</Typography.SansTitleM>
+          ) : (
+            <Typography.SansBodyM className={styles.label}>{label}</Typography.SansBodyM>
+          ))}
         {loading ? (
           <Spinner className={styles.spinner} />
         ) : (
           <LikeDislikeBlock
+            showNewAppearance={showNewAppearance}
             dislikeEnabled={dislikeCommentForm?.dislikeEnabled}
             className={styles.likeDislikeBlock}
             onOpenClosePopover={handleOpenClosePopover}
             triggerRef={triggerRef}
             like={like}
             onSetLike={onSetLike}
+            hideTextLabel={isMobile}
           />
         )}
       </div>

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

@@ -6,12 +6,17 @@
   flex-direction: row;
   align-items: center;
   gap: 12px;
+  height: 32px;
 }
 
 .label {
   color: ste.$sys-neutral-text-support;
 }
 
+.labelNewAppearance {
+  color: ste.$sys-neutral-text-main;
+}
+
 .likeDislikeBlock {
   display: flex;
   flex-direction: row;

package/src/helperComponents/LikeDislikeBlock/LikeDislikeBlock.tsx

@@ -2,7 +2,7 @@ import cn from 'classnames';
 import { MutableRefObject } from 'react';
 
 import { DislikeFilledSVG, DislikeOutlineSVG, LikeFilledSVG, LikeOutlineSVG } from '@cloud-ru/uikit-product-icons';
-import { ButtonFunction } from '@snack-uikit/button';
+import { ButtonFunction, ButtonTonal } from '@snack-uikit/button';
 
 import styles from './styles.module.scss';
 
@@ -13,6 +13,8 @@ type LikeDislikeBlockProps = {
   triggerRef?: MutableRefObject<HTMLButtonElement | null>;
   onOpenClosePopover?: () => void;
   onSetLike: (flag: boolean) => void;
+  showNewAppearance?: boolean;
+  hideTextLabel?: boolean;
 };
 
 export function LikeDislikeBlock({
@@ -22,6 +24,8 @@ export function LikeDislikeBlock({
   onOpenClosePopover,
   className,
   dislikeEnabled,
+  showNewAppearance,
+  hideTextLabel,
 }: LikeDislikeBlockProps) {
   const handleLike = () => {
     onSetLike(true);
@@ -35,20 +39,46 @@ export function LikeDislikeBlock({
     <div className={className || styles.likeDislikeBlock}>
       {like === undefined ? (
         <>
-          <ButtonFunction onClick={handleLike} icon={<LikeOutlineSVG />} />
-          <ButtonFunction onClick={handleDislike} icon={<DislikeOutlineSVG />} />
+          {showNewAppearance ? (
+            <ButtonTonal onClick={handleLike} icon={<LikeOutlineSVG />} {...(hideTextLabel ? {} : { label: 'Да' })} />
+          ) : (
+            <ButtonFunction onClick={handleLike} icon={<LikeOutlineSVG />} />
+          )}
+          {showNewAppearance ? (
+            <ButtonTonal
+              onClick={handleDislike}
+              icon={<DislikeOutlineSVG />}
+              {...(hideTextLabel ? {} : { label: 'Нет' })}
+            />
+          ) : (
+            <ButtonFunction onClick={handleDislike} icon={<DislikeOutlineSVG />} />
+          )}
         </>
       ) : (
         <>
-          {like && <LikeFilledSVG className={cn(styles.icon, styles.iconDisabled)} />}
-          {!like && (
-            <ButtonFunction
-              onClick={onOpenClosePopover}
-              disabled={!dislikeEnabled}
-              ref={triggerRef}
-              icon={<DislikeFilledSVG />}
-            />
-          )}
+          {like &&
+            (showNewAppearance ? (
+              <ButtonTonal disabled icon={<LikeFilledSVG />} {...(hideTextLabel ? {} : { label: 'Да' })} />
+            ) : (
+              <LikeFilledSVG className={cn(styles.icon, styles.iconDisabled)} />
+            ))}
+          {!like &&
+            (showNewAppearance ? (
+              <ButtonTonal
+                disabled={!dislikeEnabled}
+                onClick={onOpenClosePopover}
+                ref={triggerRef}
+                icon={<DislikeFilledSVG />}
+                {...(hideTextLabel ? {} : { label: 'Нет' })}
+              />
+            ) : (
+              <ButtonFunction
+                onClick={onOpenClosePopover}
+                disabled={!dislikeEnabled}
+                ref={triggerRef}
+                icon={<DislikeFilledSVG />}
+              />
+            ))}
         </>
       )}
     </div>