@sima-land/moleculas 12.3.3 → 13.1.2

package/common/components/product-info/product-info.module.scss

@@ -1,37 +1,55 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+
 .image-overlay {
   position: relative;
   max-width: 100%;
   margin-bottom: 8px;
-}
-
-.favorite-btn {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-}
+  overflow: hidden;
 
-.image-link {
-  display: block;
-  // фиксируем соотношение сторон чтобы размер не скакал при загрузке изображения
+  // формируем соотношение сторон 1 / 1
   &::before {
-    display: block;
     content: '';
+    display: block;
     padding-top: 100%;
     pointer-events: none;
   }
 }
 
-.image {
-  display: block;
+.image-link {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  display: block;
   height: 100%;
+}
+
+.image {
+  display: block;
   object-fit: contain;
+  width: 100%;
+  height: 100%;
+  &.adult {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.2;
+    filter: blur(24px);
+    pointer-events: none;
+  }
+}
+
+.adult-icon {
+  position: absolute;
+  width: 40%;
+  height: 40%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  fill: colors.$gray38;
 }
 
-.on-image {
+.image-buttons {
   position: absolute;
   top: 0;
   left: 0;
@@ -43,6 +61,32 @@
   }
 }
 
+.image-button {
+  display: block;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  position: absolute;
+  --gutter: 8px;
+  right: var(--gutter);
+  cursor: pointer;
+  &:nth-child(1) {
+    top: var(--gutter);
+  }
+  &:nth-child(2) {
+    bottom: var(--gutter);
+  }
+  &:nth-child(n + 3) {
+    display: none;
+  }
+  &:hover {
+    fill: colors.$gray54;
+  }
+  @include breakpoints.down('ml') {
+    --gutter: 4px;
+  }
+}
+
 .badges {
   margin-bottom: 8px;
 }
@@ -52,34 +96,50 @@
   display: flex;
   align-items: center;
 
-  // чтобы старая цена скрывалась если не влазит, согласовано с дизайнерами
-  height: 24px;
-  overflow: hidden;
-  flex-wrap: wrap;
-}
-
-.price {
   font-size: 16px;
   font-weight: 700;
   line-height: 24px;
+
+  // чтобы старая цена скрывалась если не влазит
+  &.height-limit {
+    height: 24px;
+    overflow: hidden;
+    flex-wrap: wrap;
+  }
+}
+
+.price {
+  font-size: inherit;
+  line-height: inherit;
   margin-right: 8px;
 }
 
 .old-price {
   font-size: 12px;
   line-height: 16px;
+  font-weight: 400;
 }
 
 .link {
-  overflow: hidden;
-  word-break: break-word;
-  max-height: 40px;
   max-width: 100%;
   font-size: 14px;
   line-height: 20px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  &.line-clamp {
+    overflow: hidden;
+    word-break: break-word;
+    max-height: 40px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.adult-info {
+  display: block;
+  max-width: 100%;
+  font-size: 14px;
+  line-height: 20px;
+  color: colors.$gray87;
 }
 
 .trademark-link {
@@ -91,3 +151,74 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+// футер
+.footer {
+  margin-top: 16px;
+}
+
+.text-button {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  &:hover,
+  &:active {
+    font-weight: 600;
+  }
+  @include breakpoints.down('ml') {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.wait-list-added-text {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  color: colors.$gray24;
+  @include breakpoints.down('ml') {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+// блок корзины
+.control-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 16px;
+  &.loading {
+    .control {
+      background: colors.$gray4;
+      border-radius: 4px;
+    }
+    .unit-text::before {
+      content: '';
+      display: block;
+      background: colors.$gray4;
+      border-radius: 4px;
+      width: 48px;
+      height: 16px;
+    }
+  }
+}
+
+.control {
+  width: 122px;
+  height: 40px;
+  margin-right: 16px;
+}
+
+.unit-text {
+  padding-top: 12px; // чтобы при переносе на следующую строку правильно отступил от кнопки
+  font-size: 12px;
+  line-height: 16px;
+  color: colors.$gray38;
+}
+
+.bottom-text {
+  margin-top: 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: colors.$gray38;
+}

package/common/components/product-info/types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface ProductInfoProps {
+    restriction?: 'adult' | 'unavailable';
+    children?: React.ReactNode;
+}

package/common/components/product-info/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/common/components/product-info/utils.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ProductInfoProps } from './types';
+export declare const ProductInfoContext: import("react").Context<Pick<ProductInfoProps, "restriction">>;

package/{mobile/components/product-slider → common/components/product-info}/utils.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SliderContext = void 0;
+exports.ProductInfoContext = void 0;
 const react_1 = require("react");
-exports.SliderContext = (0, react_1.createContext)({ needLoadImages: false });
+exports.ProductInfoContext = (0, react_1.createContext)({});

package/common/icons/eighteen-plus.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.3" fill-rule="evenodd" d="M106.163 37.2641H101.212V23.2372H87.1854V18.2862H101.212V4.2587H106.163V18.2862H120.191V23.2372H106.163V37.2641ZM70.2788 52.7828C71.5464 54.2213 73.8876 55.6569 77.3059 57.0961C80.3783 55.7891 82.5529 54.3858 83.831 52.8827C85.1099 51.3788 85.7497 49.6254 85.7497 47.6209C85.7497 45.4231 84.9714 43.6746 83.4134 42.3782C81.8561 41.0824 79.7118 40.4356 76.9846 40.4356C74.2968 40.4356 72.1918 41.088 70.6662 42.3943C69.1412 43.7006 68.3777 45.4442 68.3777 47.6209C68.3777 49.6254 69.0104 51.3472 70.2788 52.7828ZM69.0217 66.3583C67.5832 68.0449 66.8633 70.0648 66.8633 72.4166C66.8633 75.0306 67.759 77.0667 69.5532 78.5269C71.3467 79.9872 73.8658 80.7142 77.1119 80.7142C80.315 80.7142 82.8053 79.9549 84.5883 78.4299C86.3719 76.905 87.2655 74.8148 87.2655 72.1558C87.2655 70.0438 86.4282 68.1652 84.7507 66.5221C83.0739 64.8762 80.1526 63.2817 75.9848 61.7349C72.7824 63.1277 70.4616 64.6688 69.0217 66.3583ZM65.0585 54.0083C63.7698 52.039 63.1237 49.8328 63.1237 47.3917C63.1237 43.9298 64.3857 41.1689 66.9111 39.1103C69.4358 37.0524 72.814 36.0225 77.0479 36.0225C81.3464 36.0225 84.7507 37.0356 87.2655 39.0618C89.7797 41.088 91.0368 43.8869 91.0368 47.4592C91.0368 49.8117 90.3168 51.9553 88.8762 53.8951C87.4378 55.8327 85.1388 57.5967 81.9792 59.1863C85.8031 61.0368 88.5226 62.9822 90.1333 65.019C91.7469 67.0557 92.5519 69.4131 92.5519 72.0911C92.5519 76.0564 91.1858 79.2188 88.4586 81.5825C85.7286 83.9448 81.989 85.1273 77.2426 85.1273C72.2136 85.1273 68.3461 84.0094 65.6378 81.7786C62.9296 79.545 61.5762 76.3826 61.5762 72.2872C61.5762 66.8216 64.8645 62.5617 71.4395 59.5126C68.474 57.8154 66.3472 55.9804 65.0585 54.0083ZM62.0185 123.903C27.8404 123.903 0.133301 96.1964 0.133301 62.0183C0.133301 27.8402 27.8404 0.133118 62.0185 0.133118C69.2333 0.133118 76.1606 1.3677 82.5986 3.63789C82.6471 4.73608 82.6471 8.81386 82.6471 8.79698C76.2274 6.28845 69.3261 5.0841 62.0185 5.0841C30.5746 5.0841 5.08428 30.5744 5.08428 62.0183C5.08428 93.4621 30.5746 118.952 62.0185 118.952C93.4623 118.952 118.953 93.4621 118.953 62.0183C118.953 54.7296 117.583 47.7608 115.087 41.3552C117.817 41.3897 119.9 41.3897 120.38 41.3833C122.662 47.8368 123.904 54.7823 123.904 62.0183C123.904 96.1964 96.1966 123.903 62.0185 123.903ZM32.6789 50.2019L29.8434 46.4791L42.3165 36.7101H46.8273V84.4728H41.6071V50.4311C41.6071 47.5991 41.6922 44.9212 41.8651 42.3943C41.413 42.852 40.9082 43.3322 40.35 43.8335C39.7918 44.3341 37.2347 46.4573 32.6789 50.2019Z" transform="matrix(0.2903226,0,0,0.2903226,0,0)"/>
+  <path fill-rule="evenodd"
+    d="M106.163 37.2641H101.212V23.2372H87.1854V18.2862H101.212V4.2587H106.163V18.2862H120.191V23.2372H106.163V37.2641ZM70.2788 52.7828C71.5464 54.2213 73.8876 55.6569 77.3059 57.0961C80.3783 55.7891 82.5529 54.3858 83.831 52.8827C85.1099 51.3788 85.7497 49.6254 85.7497 47.6209C85.7497 45.4231 84.9714 43.6746 83.4134 42.3782C81.8561 41.0824 79.7118 40.4356 76.9846 40.4356C74.2968 40.4356 72.1918 41.088 70.6662 42.3943C69.1412 43.7006 68.3777 45.4442 68.3777 47.6209C68.3777 49.6254 69.0104 51.3472 70.2788 52.7828ZM69.0217 66.3583C67.5832 68.0449 66.8633 70.0648 66.8633 72.4166C66.8633 75.0306 67.759 77.0667 69.5532 78.5269C71.3467 79.9872 73.8658 80.7142 77.1119 80.7142C80.315 80.7142 82.8053 79.9549 84.5883 78.4299C86.3719 76.905 87.2655 74.8148 87.2655 72.1558C87.2655 70.0438 86.4282 68.1652 84.7507 66.5221C83.0739 64.8762 80.1526 63.2817 75.9848 61.7349C72.7824 63.1277 70.4616 64.6688 69.0217 66.3583ZM65.0585 54.0083C63.7698 52.039 63.1237 49.8328 63.1237 47.3917C63.1237 43.9298 64.3857 41.1689 66.9111 39.1103C69.4358 37.0524 72.814 36.0225 77.0479 36.0225C81.3464 36.0225 84.7507 37.0356 87.2655 39.0618C89.7797 41.088 91.0368 43.8869 91.0368 47.4592C91.0368 49.8117 90.3168 51.9553 88.8762 53.8951C87.4378 55.8327 85.1388 57.5967 81.9792 59.1863C85.8031 61.0368 88.5226 62.9822 90.1333 65.019C91.7469 67.0557 92.5519 69.4131 92.5519 72.0911C92.5519 76.0564 91.1858 79.2188 88.4586 81.5825C85.7286 83.9448 81.989 85.1273 77.2426 85.1273C72.2136 85.1273 68.3461 84.0094 65.6378 81.7786C62.9296 79.545 61.5762 76.3826 61.5762 72.2872C61.5762 66.8216 64.8645 62.5617 71.4395 59.5126C68.474 57.8154 66.3472 55.9804 65.0585 54.0083ZM62.0185 123.903C27.8404 123.903 0.133301 96.1964 0.133301 62.0183C0.133301 27.8402 27.8404 0.133118 62.0185 0.133118C69.2333 0.133118 76.1606 1.3677 82.5986 3.63789C82.6471 4.73608 82.6471 8.81386 82.6471 8.79698C76.2274 6.28845 69.3261 5.0841 62.0185 5.0841C30.5746 5.0841 5.08428 30.5744 5.08428 62.0183C5.08428 93.4621 30.5746 118.952 62.0185 118.952C93.4623 118.952 118.953 93.4621 118.953 62.0183C118.953 54.7296 117.583 47.7608 115.087 41.3552C117.817 41.3897 119.9 41.3897 120.38 41.3833C122.662 47.8368 123.904 54.7823 123.904 62.0183C123.904 96.1964 96.1966 123.903 62.0185 123.903ZM32.6789 50.2019L29.8434 46.4791L42.3165 36.7101H46.8273V84.4728H41.6071V50.4311C41.6071 47.5991 41.6922 44.9212 41.8651 42.3943C41.413 42.852 40.9082 43.3322 40.35 43.8335C39.7918 44.3341 37.2347 46.4573 32.6789 50.2019Z"
+    transform="matrix(0.2903226,0,0,0.2903226,0,0)" />
 </svg>

package/desktop/components/item-image/index.d.ts

@@ -60,7 +60,7 @@ export interface ItemImageProps {
  * @param {boolean} props.hasSelectionButton Признак наличия кнопки выделения товара.
  * @return {ReactElement} Компонент изображения.
  */
-export default class ItemImage extends Component<ItemImageProps, any> {
+export declare class ItemImage extends Component<ItemImageProps, any> {
     bootStartTime: any;
     image: any;
     imageWrapper: any;

package/desktop/components/item-image/index.js

@@ -22,12 +22,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemImage = void 0;
 const react_1 = __importStar(require("react"));
 const link_1 = require("@sima-land/ui-nucleons/link");
 const bind_1 = __importDefault(require("classnames/bind"));
 const lodash_1 = require("lodash");
 const item_image_module_scss_1 = __importDefault(require("./item-image.module.scss"));
 const badge_list_1 = require("../../../common/components/badge-list");
+const badge_1 = require("../../../common/components/badge");
 const eighteen_plus_svg_1 = __importDefault(require("../../../common/icons/eighteen-plus.svg"));
 const selected_svg_1 = __importDefault(require("../../../common/icons/selected.svg"));
 const wish_button_1 = require("../../../common/components/wish-button");
@@ -111,7 +113,7 @@ class ItemImage extends react_1.Component {
         const currentPhoto = currentPhotoIndex === null ? src : photos[currentPhotoIndex];
         return (react_1.default.createElement("div", { className: cx('wrapper', className), ref: this.imageWrapper, onMouseLeave: () => this.setState({ currentPhotoIndex: null }) },
             withBlur && (react_1.default.createElement("div", { className: cx('with-blur') },
-                react_1.default.createElement(eighteen_plus_svg_1.default, { width: 124, height: 124 }))),
+                react_1.default.createElement(eighteen_plus_svg_1.default, { width: 124, height: 124, opacity: '0.3' }))),
             react_1.default.createElement("div", { className: cx('image-wrapper') },
                 react_1.default.createElement(link_1.Link, { href: itemUrl },
                     Array.isArray(photos) && photos.length > 1 && !withBlur && this.imageWrapper.current && (react_1.default.createElement("div", { className: cx('fake-hover-wrapper', fakeDivClassName) }, photos.map((value, index) => (react_1.default.createElement("div", { className: cx('fake-hover', { selected: index === currentPhotoIndex }), style: {
@@ -123,11 +125,11 @@ class ItemImage extends react_1.Component {
                     withBlur ? (react_1.default.createElement("div", { className: cx('with-filter-blur'), children: this.getImage({ src: currentPhoto, alt }, onClick) })) : (this.getImage({ src: currentPhoto, alt }, onClick))),
                 hasTrashButton && (react_1.default.createElement(trash_cart_svg_1.default, { width: 24, height: 24, color: 'gray87', className: cx('icon', buttonsPos, trashButtonProps.className), onClick: trashButtonProps.onClick, "data-testid": 'item-image:remove-button' }))),
             Array.isArray(badges) && Boolean(badges.length) && (react_1.default.createElement("div", { className: cx('badges') },
-                react_1.default.createElement(badge_list_1.BadgeList, { items: badges }))),
+                react_1.default.createElement(badge_list_1.BadgeList, null, badges.map((badge, index) => (react_1.default.createElement(badge_1.Badge, Object.assign({ key: index }, badge))))))),
             hasWishButton && (react_1.default.createElement(wish_button_1.WishButton, { checked: wishProps.isWished, className: cx('icon', buttonsPos, hasTrashButton && 'as-second', wishProps.className), onClick: wishProps.onClick, disabled: isFetchingWishItems })),
             hasQuickPreview && (react_1.default.createElement(quick_view_button_1.QuickViewButton, { onClick: quickViewBtnProps.onClick, className: cx('icon', buttonsPos, (hasTrashButton || hasWishButton) && 'as-second', hasTrashButton && hasWishButton && 'as-third', quickViewBtnProps.className) })),
             hasSelectionButton && selectionProps && (react_1.default.createElement("div", { onClick: selectionProps.onSelect, className: cx('selection-container') },
                 react_1.default.createElement("div", { className: cx('selection-circle') }, selectionProps.isSelected && react_1.default.createElement(selected_svg_1.default, { width: 56, height: 56 }))))));
     }
 }
-exports.default = ItemImage;
+exports.ItemImage = ItemImage;

package/desktop/components/person-modal/index.d.ts

@@ -36,4 +36,3 @@ export interface PersonModalProps {
  * @return Элемент.
  */
 export declare const PersonModal: ({ name, appointment, photoUrl, email, skype, social, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, onClose, withScrollDisable, scrollDisableOptions, }: PersonModalProps) => JSX.Element;
-export default PersonModal;

package/desktop/components/person-modal/index.js

@@ -53,4 +53,3 @@ const PersonModal = ({ name, appointment, photoUrl, email, skype, social, phoneH
                 react_1.default.createElement(clean_buttons_1.Clean.Button, { onClick: onClose }, "\u0417\u0430\u043A\u0440\u044B\u0442\u044C")))));
 };
 exports.PersonModal = PersonModal;
-exports.default = exports.PersonModal;

package/desktop/components/product-card/index.d.ts

@@ -1,29 +1,16 @@
 import React from 'react';
-import { ProductInfoProps } from '../../../common/components/product-info';
-export interface ProductCardProps extends ProductInfoProps, React.HTMLAttributes<HTMLDivElement> {
-    /** Будет вызвана при уходе курсора с элемента. */
-    onMouseLeave?: () => void;
-    /** Будет вызвана при нажатии на кнопку-иконку быстрого просмотра. */
-    onQuickViewClick?: () => void;
+import { ProductInfo, ProductInfoProps } from '../../../common/components/product-info';
+import { PlateProps } from '@sima-land/ui-nucleons/plate';
+export declare type ProductCardChildren = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
+export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ProductCardChildren;
 }
+export declare const HoverCard: React.ForwardRefExoticComponent<PlateProps & React.RefAttributes<HTMLDivElement | null>>;
+export declare const ProductCard: ({ children, className, ...props }: ProductCardProps) => JSX.Element;
 /**
- * Компонент-слот для вывода контрола товара в корзине.
- * @param props Свойства.
+ * Фильтрует содержимое карточки для вывода состояния без наведения.
+ * @param el Элемент.
  * @return Элемент.
  */
-declare const CartControlSlot: ({ children, stepText, markupText, loading, }: {
-    children?: React.ReactNode;
-    stepText?: string | undefined;
-    markupText?: string | undefined;
-    loading?: boolean | undefined;
-}) => JSX.Element;
-export interface ProductCardComponent extends React.ForwardRefExoticComponent<React.PropsWithoutRef<ProductCardProps> & React.RefAttributes<HTMLDivElement>> {
-    CartControl: typeof CartControlSlot;
-}
-/**
- * Карточка товара, появляющаяся над элементом карусели.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-export declare const ProductCard: ProductCardComponent;
-export {};
+export declare const reduceBaseInfo: (el: ProductCardChildren) => React.FunctionComponentElement<ProductInfoProps>;
+export declare const reduceHoverInfo: (el: ProductCardChildren) => React.FunctionComponentElement<ProductInfoProps>;

package/desktop/components/product-card/index.js

@@ -33,41 +33,57 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCard = void 0;
+exports.reduceHoverInfo = exports.reduceBaseInfo = exports.ProductCard = exports.HoverCard = void 0;
 const react_1 = __importStar(require("react"));
 const product_info_1 = require("../../../common/components/product-info");
-const with_hint_1 = require("@sima-land/ui-nucleons/with-hint");
-const quick_view_button_1 = require("../../../common/components/quick-view-button");
-const shapes_1 = require("@sima-land/ui-nucleons/styling/shapes");
-const shadows_1 = require("@sima-land/ui-nucleons/styling/shadows");
-const define_slots_1 = require("@sima-land/ui-nucleons/helpers/define-slots");
-const with_prevent_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/with-prevent"));
-const bind_1 = __importDefault(require("classnames/bind"));
+const plate_1 = require("@sima-land/ui-nucleons/plate");
+const layer_1 = require("@sima-land/ui-nucleons/helpers/layer");
+const classnames_1 = __importDefault(require("classnames"));
 const product_card_module_scss_1 = __importDefault(require("./product-card.module.scss"));
-const cx = bind_1.default.bind(product_card_module_scss_1.default);
-/**
- * Компонент-слот для вывода контрола товара в корзине.
- * @param props Свойства.
- * @return Элемент.
- */
-const CartControlSlot = ({ children, stepText, markupText, loading, }) => (react_1.default.createElement("div", { className: cx('control-wrapper', { loading }) },
-    react_1.default.createElement("div", { className: cx('control') }, !loading && children),
-    (loading || stepText) && react_1.default.createElement("div", { className: cx('unit-text') }, !loading && stepText),
-    !loading && markupText && react_1.default.createElement("div", { className: cx('bottom-text') }, markupText)));
+exports.HoverCard = (0, react_1.forwardRef)((props, ref) => {
+    const layer = (0, layer_1.useLayer)() + 1;
+    return (react_1.default.createElement(plate_1.Plate, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { zIndex: layer }), ref: ref, rounds: 'm', shadow: 'z4', className: (0, classnames_1.default)(product_card_module_scss_1.default.card, props.className), "data-testid": 'product-card:hover-card' })));
+});
+const ProductCard = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    const [hovered, toggle] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", Object.assign({}, props, { "data-testid": 'product-card', className: (0, classnames_1.default)(product_card_module_scss_1.default.root, className) }),
+        react_1.default.createElement("div", { "data-testid": 'product-card:info', onMouseEnter: () => toggle(true) }, (0, exports.reduceBaseInfo)(children)),
+        hovered && (react_1.default.createElement(exports.HoverCard, { onMouseLeave: () => toggle(false) }, (0, exports.reduceHoverInfo)(children)))));
+};
+exports.ProductCard = ProductCard;
 /**
- * Карточка товара, появляющаяся над элементом карусели.
- * @param props Свойства компонента.
+ * Фильтрует содержимое карточки для вывода состояния без наведения.
+ * @param el Элемент.
  * @return Элемент.
  */
-exports.ProductCard = (0, react_1.forwardRef)((_a, rootRef) => {
-    var { data, onLinkClick, onQuickViewClick, children, 
-    // div props
-    className } = _a, rootProps = __rest(_a, ["data", "onLinkClick", "onQuickViewClick", "children", "className"]);
-    const { cartControl } = (0, define_slots_1.defineSlots)(children, { cartControl: CartControlSlot });
-    return (react_1.default.createElement("div", Object.assign({ ref: rootRef, className: cx('root', shapes_1.SmallRounds.all, shadows_1.BoxShadow.z4, className) }, rootProps),
-        react_1.default.createElement(product_info_1.ProductInfo, { data: data, onLinkClick: onLinkClick },
-            react_1.default.createElement(product_info_1.ProductInfo.OnImage, null,
-                react_1.default.createElement(with_hint_1.WithHint, { hint: '\u0411\u044B\u0441\u0442\u0440\u044B\u0439 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440', direction: 'left' }, (ref, toggle) => (react_1.default.createElement(quick_view_button_1.QuickViewButton, { ref: ref, onMouseEnter: () => toggle(true), onMouseLeave: () => toggle(false), className: cx('quick-view-button'), onClick: (0, with_prevent_1.default)(onQuickViewClick) }))))),
-        cartControl));
+const reduceBaseInfo = (el) => (0, react_1.cloneElement)(el, {
+    children: react_1.Children.map(el.props.children, child => {
+        let result;
+        if ((0, react_1.isValidElement)(child)) {
+            switch (child.type) {
+                // игнорируем кнопки-иконки на изображении
+                case product_info_1.Parts.Image:
+                    result = (0, react_1.cloneElement)(child, { children: undefined });
+                    break;
+                // игнорируем футер
+                case product_info_1.Parts.Footer:
+                    result = null;
+                    break;
+                // остальное оставляем без изменений
+                default:
+                    result = child;
+                    break;
+            }
+        }
+        return result;
+    }),
+});
+exports.reduceBaseInfo = reduceBaseInfo;
+const reduceHoverInfo = (el) => (0, react_1.cloneElement)(el, {
+    // при наведении у изображения строго непрозрачность = 1
+    children: react_1.Children.map(el.props.children, child => (0, react_1.isValidElement)(child) && child.type === product_info_1.Parts.Image
+        ? (0, react_1.cloneElement)(child, { opacity: 1 })
+        : child),
 });
-exports.ProductCard.CartControl = CartControlSlot;
+exports.reduceHoverInfo = reduceHoverInfo;

package/desktop/components/product-card/product-card.module.scss

@@ -1,53 +1,12 @@
-@use 'node_modules/@sima-land/ui-nucleons/colors';
-
 .root {
-  padding: 16px 16px 24px;
-  background: #fff;
+  position: relative;
+  max-width: 400px;
 }
 
-.quick-view-button {
+.card {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  cursor: pointer;
-}
-
-.control-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 16px;
-  &.loading {
-    .control {
-      background: colors.$gray4;
-      border-radius: 4px;
-    }
-    .unit-text::before {
-      content: '';
-      display: block;
-      background: colors.$gray4;
-      border-radius: 4px;
-      width: 48px;
-      height: 16px;
-    }
-  }
-}
-
-.control {
-  width: 122px;
-  height: 40px;
-  margin-right: 16px;
-}
-
-.unit-text {
-  padding-top: 12px; // чтобы при переносе на следующую строку правильно отступил от кнопки
-  font-size: 12px;
-  line-height: 16px;
-  color: colors.$gray38;
-}
-
-.bottom-text {
-  margin-top: 12px;
-  font-size: 12px;
-  line-height: 16px;
-  color: colors.$gray38;
+  top: -16px;
+  left: -16px;
+  padding: 16px 16px 24px;
+  width: calc(100% + 32px);
 }

package/desktop/components/product-carousel/hover-card.d.ts

@@ -1,15 +1,12 @@
 import React from 'react';
 import { ProductInfoProps } from '../../../common/components/product-info';
-import { ProductCard } from '../product-card';
 export interface HoverCardProps extends ProductInfoProps {
     targetRef: React.RefObject<HTMLElement | null>;
     onMouseLeave?: () => void;
-    onQuickViewClick?: () => void;
-    renderCartControl?: (Slot: typeof ProductCard.CartControl) => React.ReactNode;
 }
 /**
  * Карточка товара, появляющаяся над элементом карусели.
  * @param props Свойства компонента.
  * @return Элемент.
  */
-export declare const HoverCard: ({ data, targetRef, onMouseLeave, onQuickViewClick, onLinkClick, renderCartControl, }: HoverCardProps) => JSX.Element;
+export declare const HoverCard: ({ targetRef, onMouseLeave, ...productInfoProps }: HoverCardProps) => JSX.Element;

package/desktop/components/product-carousel/hover-card.js

@@ -18,6 +18,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -25,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HoverCard = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("@sima-land/ui-nucleons/with-tooltip/utils");
+const product_info_1 = require("../../../common/components/product-info");
 const bind_1 = __importDefault(require("classnames/bind"));
 const hover_card_module_scss_1 = __importDefault(require("./hover-card.module.scss"));
 const shapes_1 = require("@sima-land/ui-nucleons/styling/shapes");
@@ -36,7 +48,8 @@ const cx = bind_1.default.bind(hover_card_module_scss_1.default);
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const HoverCard = ({ data, targetRef, onMouseLeave, onQuickViewClick, onLinkClick, renderCartControl, }) => {
+const HoverCard = (_a) => {
+    var { targetRef, onMouseLeave } = _a, productInfoProps = __rest(_a, ["targetRef", "onMouseLeave"]);
     const rootRef = (0, react_1.useRef)(null);
     const [ready, setReady] = (0, react_1.useState)(false);
     (0, react_1.useLayoutEffect)(() => {
@@ -49,12 +62,11 @@ const HoverCard = ({ data, targetRef, onMouseLeave, onQuickViewClick, onLinkClic
             element.style.width = `${rect.width + 32}px`;
             setReady(true);
         }
-    }, [data]);
-    return (react_1.default.createElement(product_card_1.ProductCard, { data: data, onLinkClick: onLinkClick, onQuickViewClick: onQuickViewClick, 
-        // div props
-        ref: rootRef, "data-testid": 'product-carousel:hover-card', className: cx('root', !ready && 'hidden', shapes_1.SmallRounds.all, shadows_1.BoxShadow.z4), onMouseLeave: () => {
+    });
+    return (react_1.default.createElement(product_card_1.HoverCard, { ref: rootRef, style: { padding: '16px 16px 24px 16px' }, className: cx('root', !ready && 'hidden', shapes_1.SmallRounds.all, shadows_1.BoxShadow.z4), onMouseLeave: () => {
             setReady(false);
             onMouseLeave && onMouseLeave();
-        } }, renderCartControl === null || renderCartControl === void 0 ? void 0 : renderCartControl(product_card_1.ProductCard.CartControl)));
+        } },
+        react_1.default.createElement(product_info_1.ProductInfo, Object.assign({}, productInfoProps))));
 };
 exports.HoverCard = HoverCard;

package/desktop/components/product-carousel/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { HoverCardProps } from './hover-card';
-import { ProductInfoProps } from '../../../common/components/product-info';
+import { ProductInfo, ProductInfoProps } from '../../../common/components/product-info';
 interface ItemSize {
     xs?: 2 | 3 | 4;
     s?: 2 | 3 | 4;
@@ -8,12 +7,13 @@ interface ItemSize {
     l?: 2 | 3 | 4;
     xl?: 2 | 3 | 4;
 }
+export declare type ItemElement = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
 export interface ProductCarouselProps {
     /** CSS-класс для корневого элемента. */
     className?: string;
     /** Элементы карусели. */
-    children?: React.ReactNode;
-    /** Найстройки размера элемента карусели. */
+    children?: ItemElement | ItemElement[];
+    /** Настройки размера элемента карусели. */
     itemSize?: ItemSize;
     /** Сработает при попадании карусели во viewport. */
     onInViewport?: () => void;
@@ -22,14 +22,10 @@ export interface ProductCarouselProps {
     /** Нужно ли показывать всплывающую карточку при наведении на элемент карусели. */
     withHoverCard?: boolean;
 }
-declare type CarouselItemProps = ProductInfoProps & Pick<HoverCardProps, 'renderCartControl' | 'onQuickViewClick'>;
 /**
  * Карусель рекомендованных товаров.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ProductCarousel: {
-    ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps): JSX.Element;
-    Item: (props: CarouselItemProps) => null;
-};
+export declare const ProductCarousel: ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps) => JSX.Element;
 export {};