@sima-land/moleculas 15.0.1 → 15.2.1

package/common/components/badge/index.d.ts

@@ -14,9 +14,6 @@ export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEl
 /**
  * Шильдик.
  * @param props Свойства.
- * @param props.color Цвет.
- * @param props.fields Содержимое.
- * @param props.href Ссылка.
  * @return Элемент.
  */
-export declare const Badge: ({ className, color, fields, href, style, "data-testid": testId, ...restProps }: BadgeProps) => JSX.Element;
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLAnchorElement>>;

package/common/components/badge/index.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)
@@ -15,23 +34,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
+const react_1 = __importStar(require("react"));
 const timer_1 = require("@sima-land/ui-nucleons/timer");
+const bind_1 = __importDefault(require("classnames/bind"));
 const badge_module_scss_1 = __importDefault(require("./badge.module.scss"));
 const cx = bind_1.default.bind(badge_module_scss_1.default);
 /**
  * Шильдик.
  * @param props Свойства.
- * @param props.color Цвет.
- * @param props.fields Содержимое.
- * @param props.href Ссылка.
  * @return Элемент.
  */
-const Badge = (_a) => {
+exports.Badge = (0, react_1.forwardRef)(function Badge(_a, ref) {
     var { className, color, fields, href, style, 'data-testid': testId = 'badge' } = _a, restProps = __rest(_a, ["className", "color", "fields", "href", "style", 'data-testid']);
     const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
-    return (react_1.default.createElement("a", Object.assign({}, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value })) : (
+    return (react_1.default.createElement("a", Object.assign({ ref: ref }, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value })) : (
         // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
         react_1.default.createElement("span", { className: cx('content') }, fields.reduce((acc, item, i) => {
             let result = null;
@@ -48,8 +64,7 @@ const Badge = (_a) => {
             i < fields.length - 1 && acc.push(' ');
             return acc;
         }, []))) })));
-};
-exports.Badge = Badge;
+});
 /**
  * Форматирует оставшееся время.
  * @param distance Оставшееся время.

package/common/components/badge-list/badge-list.module.scss

@@ -11,6 +11,7 @@
 }
 
 .item {
+  max-width: 100%;
   margin-bottom: 4px;
   &:not(:last-child) {
     margin-right: 4px;

package/common/components/badge-list/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export interface BadgeListProps {
     /** Список данных для шильдиков. */
     children?: React.ReactNode;
@@ -14,4 +14,11 @@ export interface BadgeListProps {
  * @param props Свойства компонента.
  * @return Элемент.
  */
-export declare const BadgeList: ({ children, className, lineLimit, style }: BadgeListProps) => JSX.Element;
+export declare const BadgeList: {
+    ({ children, className, lineLimit, style }: BadgeListProps): JSX.Element;
+    Slot: typeof BadgeListSlot;
+};
+declare function BadgeListSlot({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+export {};

package/common/components/badge-list/index.js

@@ -33,10 +33,18 @@ const cx = bind_1.default.bind(badge_list_module_scss_1.default);
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const BadgeList = ({ children, className, lineLimit, style }) => (react_1.default.createElement("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? Object.assign(Object.assign({}, style), { '--line-limit': lineLimit }) : style }, react_1.Children.toArray(children).reduce((list, item) => {
-    (0, react_1.isValidElement)(item) &&
-        item.type === badge_1.Badge &&
-        list.push((0, react_1.cloneElement)(item, { className: cx('item', item.props.className) }));
-    return list;
-}, [])));
+const BadgeList = ({ children, className, lineLimit, style }) => (react_1.default.createElement("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? Object.assign(Object.assign({}, style), { '--line-limit': lineLimit }) : style }, react_1.Children.toArray(children).map(child => {
+    switch (true) {
+        case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
+            return react_1.default.createElement(BadgeListSlot, null, child);
+        case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
+            return child;
+        default:
+            return null;
+    }
+})));
 exports.BadgeList = BadgeList;
+function BadgeListSlot({ children }) {
+    return react_1.default.createElement("div", { className: cx('item') }, children);
+}
+exports.BadgeList.Slot = BadgeListSlot;

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

@@ -29,6 +29,9 @@ export declare const Parts: {
     readonly Title: ({ children, href, onClick }: Pick<LinkProps, 'children' | 'href' | 'onClick'>) => JSX.Element;
     readonly TrademarkLink: ({ href, children, onClick, }: Pick<LinkProps, 'href' | 'children' | 'onClick'>) => JSX.Element;
     readonly Footer: React.FC<{}>;
+    readonly FooterContext: React.Context<{
+        className?: string | undefined;
+    }>;
     readonly CartControl: ({ children, stepText, markupText, loading, }: {
         children?: React.ReactNode;
         stepText?: string | undefined;

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

@@ -111,12 +111,18 @@ const Title = ({ children, href, onClick }) => {
  * @return Элемент.
  */
 const TrademarkLink = ({ href, children, onClick, }) => (react_1.default.createElement(link_1.Link, { className: cx('trademark-link'), href: href, children: children, onClick: onClick, color: 'basic-blue', "data-testid": 'product-info:trademark-link' }));
+const FooterContext = (0, react_1.createContext)({
+    className: undefined,
+});
 /**
  * Слот - футер.
  * @param props Свойства.
  * @return Элемент.
  */
-const Footer = ({ children }) => (react_1.default.createElement("div", { className: cx('footer'), "data-testid": 'product-info:footer' }, children));
+const Footer = ({ children }) => {
+    const { className = cx('footer') } = (0, react_1.useContext)(FooterContext);
+    return (react_1.default.createElement("div", { className: className, "data-testid": 'product-info:footer' }, children));
+};
 /**
  * Блок управления корзиной.
  * @param props Свойства.
@@ -169,6 +175,7 @@ exports.Parts = {
     TrademarkLink,
     // компоненты-слоты и компоненты-запчасти, предназначенные для вывода футера (dcе что ниже ссылки на торговую марку)
     Footer,
+    FooterContext,
     CartControl,
     AdultConfirmButton,
     WaitListAddButton,

package/desktop/components/gallery-modal/components/gallery-modal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { MediaData } from '../types';
 import { ModalProps } from '@sima-land/ui-nucleons/modal';
+import { ReviewInfoProps } from './review-info';
 export interface GalleryModalProps extends Pick<ModalProps, 'withScrollDisable' | 'scrollDisableOptions'> {
     /** Список медиа. */
     media: MediaData[];
@@ -9,10 +10,7 @@ export interface GalleryModalProps extends Pick<ModalProps, 'withScrollDisable'
     /** Будет вызвана при переключении элемента из списка медиа. */
     onMediaChange?: (data: MediaData, index: number) => void;
     /** Данные отзыва, выводятся внизу окна. */
-    review?: {
-        rating: number;
-        author: string;
-    };
+    review?: Pick<ReviewInfoProps, 'rating' | 'author' | 'content' | 'loading' | 'notAffectRating'>;
     /** Будет вызвана при попытке перейти к отзыву. */
     onGoToReview?: () => void;
     /** Будет вызвана при закрытии. */

package/desktop/components/gallery-modal/components/gallery-modal.js

@@ -50,38 +50,37 @@ const gallery_modal_module_scss_1 = __importDefault(require("./gallery-modal.mod
 const cx = bind_1.default.bind(gallery_modal_module_scss_1.default);
 const GalleryModal = ({ media, defaultMediaIndex = 0, review, onClose, onGoToReview, onMediaChange, withScrollDisable, scrollDisableOptions, onVideoEvent, }) => {
     const [currentIndex, setCurrent] = (0, react_1.useState)(defaultMediaIndex);
-    const thumbnailsRef = (0, react_1.useRef)(null);
-    const areaRef = (0, react_1.useRef)(null);
-    const footerGutter = 40;
-    const footerHeight = 20;
-    const correction = review ? footerGutter + footerHeight : 0;
-    const size = (0, utils_1.useRectFit)(areaRef, { correction });
-    const innerStyles = Object.assign({}, (size !== null && {
-        '--area-height': `${size + correction}px`,
-        '--all-round-view-size': `${size}px`,
-    }));
+    const rootRef = (0, react_1.useRef)(null);
     const handlerRef = (0, identity_1.useIdentityRef)(onMediaChange);
+    const thumbnailsRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         var _a;
         (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.call(handlerRef, media[currentIndex], currentIndex);
         thumbnailsRef.current &&
             (0, scroll_to_child_1.scrollToChild)(thumbnailsRef.current, thumbnailsRef.current.children[currentIndex]);
     }, [currentIndex]);
+    const size = (0, utils_1.useSquareFit)(rootRef, { hasReview: Boolean(review) });
+    const style = size
+        ? {
+            '--square-size': `${size}px`,
+            '--all-round-view-size': `${size}px`,
+        }
+        : {};
     return (react_1.default.createElement(modal_1.Modal, Object.assign({ size: 'fullscreen', onClose: onClose }, { withScrollDisable, scrollDisableOptions }),
         react_1.default.createElement(modal_1.Modal.Header, { onClose: onClose }),
         react_1.default.createElement(modal_1.Modal.Body, null,
-            react_1.default.createElement(layout_1.DesktopLayout, { className: cx('root'), style: innerStyles },
-                size !== null && media.length > 1 && (react_1.default.createElement("div", { className: cx('thumbnails'), ref: thumbnailsRef }, media.map((item, index) => (react_1.default.createElement(thumbnail_1.Thumbnail, Object.assign({ key: index, className: cx('thumbnail'), type: item.type, checked: index === currentIndex, onClick: () => setCurrent(index) }, (item.type === 'image' && {
-                    src: item.data.thumbnailSrc,
-                    alt: item.data.alt || '',
-                }))))))),
-                react_1.default.createElement("div", { ref: areaRef, className: cx('area') }, size !== null && (react_1.default.createElement("div", { className: cx('inner'), style: { width: `${size}px` } },
+            react_1.default.createElement(layout_1.DesktopLayout, { className: cx('root'), ref: rootRef, style: style },
+                react_1.default.createElement("div", { className: cx('main') },
+                    react_1.default.createElement("div", { className: cx('thumbnails'), ref: thumbnailsRef }, media.map((item, index) => (react_1.default.createElement(thumbnail_1.Thumbnail, Object.assign({ key: index, className: cx('thumbnail'), type: item.type, checked: index === currentIndex, onClick: () => setCurrent(index) }, (item.type === 'image' && {
+                        src: item.data.thumbnailSrc,
+                        alt: item.data.alt || '',
+                    })))))),
                     react_1.default.createElement("div", { className: cx('square') },
                         react_1.default.createElement(Media, Object.assign({}, media[currentIndex], { onVideoEvent: onVideoEvent })),
                         media.length > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
                             react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'left', className: cx('button', 'left'), onClick: () => setCurrent((media.length + currentIndex - 1) % media.length), "data-testid": 'gallery-modal:prev-media-button' }),
-                            react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'right', className: cx('button', 'right'), onClick: () => setCurrent((currentIndex + 1) % media.length), "data-testid": 'gallery-modal:next-media-button' })))),
-                    review && (react_1.default.createElement(review_info_1.ReviewInfo, { rating: review.rating, author: review.author, onGoToReview: onGoToReview, className: cx('footer') })))))))));
+                            react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'right', className: cx('button', 'right'), onClick: () => setCurrent((currentIndex + 1) % media.length), "data-testid": 'gallery-modal:next-media-button' })))))),
+            size !== null && (react_1.default.createElement("div", { className: cx('footer'), style: style }, review && react_1.default.createElement(review_info_1.ReviewInfo, Object.assign({}, review, { onGoToReview: onGoToReview })))))));
 };
 exports.GalleryModal = GalleryModal;
 const Media = (_a) => {

package/desktop/components/gallery-modal/components/gallery-modal.module.scss

@@ -1,47 +1,52 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .root {
-  height: calc(100vh - var(--header-height) - 40px);
   position: relative;
+  height: calc(100vh - var(--header-height));
+  display: flex;
+  flex-direction: column;
+  // box-shadow: inset 0 0 0 6px #f00;
 }
 
-.thumbnails {
+.main {
+  position: relative;
+  // box-shadow: inset 0 0 0 6px #0f0;
+  width: 100%;
   height: var(--area-height);
+}
+
+.thumbnails {
+  width: 104px;
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
-  width: 104px;
   .thumbnail + .thumbnail {
     margin-top: 8px;
   }
 }
 
-.area {
-  height: 100%;
-  margin: 0 auto;
-  width: calc(100% - (2 * (120px + 56px + 24px)));
-  .inner {
-    height: 100%;
-    margin: 0 auto;
+.square {
+  width: var(--square-size);
+  height: var(--square-size);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  &::after {
+    content: '';
+    display: block;
+    padding-top: 100%;
+    width: 100%;
   }
-  .square {
-    position: relative;
-    &::after {
-      content: '';
-      display: block;
-      padding-top: 100%;
-      width: 100%;
+  .button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    &.left {
+      right: calc(100% + 24px);
     }
-    .button {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      &.left {
-        right: calc(100% + 24px);
-      }
-      &.right {
-        left: calc(100% + 24px);
-      }
+    &.right {
+      left: calc(100% + 24px);
     }
   }
 }
@@ -71,5 +76,10 @@
 }
 
 .footer {
-  margin-top: 40px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin-top: auto;
+  // background-color: #ff000024;
 }

package/desktop/components/gallery-modal/components/review-info.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export interface ReviewInfoProps {
     rating: number;
     author: string;
+    content?: ReactNode;
     onGoToReview?: () => void;
+    notAffectRating?: boolean;
     className?: string;
+    loading?: boolean;
 }
-export declare const ReviewInfo: ({ rating, author, onGoToReview, className }: ReviewInfoProps) => JSX.Element;
+export declare const ReviewInfo: ({ rating, author, onGoToReview, content, className, notAffectRating, loading, }: ReviewInfoProps) => JSX.Element;

package/desktop/components/gallery-modal/components/review-info.js

@@ -1,16 +1,80 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReviewInfo = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const link_1 = require("@sima-land/ui-nucleons/link");
 const rating_1 = require("@sima-land/ui-nucleons/rating");
-const classnames_1 = __importDefault(require("classnames"));
+const bind_1 = __importDefault(require("classnames/bind"));
 const review_info_module_scss_1 = __importDefault(require("./review-info.module.scss"));
-const ReviewInfo = ({ rating, author, onGoToReview, className }) => (react_1.default.createElement("div", { className: (0, classnames_1.default)(review_info_module_scss_1.default.root, className) },
-    react_1.default.createElement(rating_1.Rating, { value: rating }),
-    react_1.default.createElement("div", { className: review_info_module_scss_1.default.author }, author),
-    onGoToReview && (react_1.default.createElement(link_1.Link, { className: review_info_module_scss_1.default.link, pseudo: true, onClick: onGoToReview, "data-testid": 'gallery-modal:go-to-review-link' }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u043E\u0442\u0437\u044B\u0432\u0443"))));
+const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
+const shadows_1 = require("@sima-land/ui-nucleons/styling/shadows");
+const custom_scrollbar_1 = require("@sima-land/ui-nucleons/_internal/custom-scrollbar");
+const cx = bind_1.default.bind(review_info_module_scss_1.default);
+const ReviewInfo = ({ rating, author, onGoToReview, content, className, notAffectRating, loading, }) => {
+    const [clamped, setClamped] = (0, react_1.useState)(false);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const contentRef = (0, react_1.useRef)(null);
+    const checkClamp = (0, react_1.useCallback)(() => {
+        const contentEl = contentRef.current;
+        if (!opened && contentEl) {
+            setClamped(contentEl.scrollHeight > contentEl.clientHeight);
+        }
+    }, [opened]);
+    (0, react_1.useEffect)(() => {
+        setClamped(false);
+        setOpened(false);
+    }, [content, author]);
+    (0, react_1.useEffect)(checkClamp, [content, opened]);
+    // @todo что делать если при изменении размеров изменилось состояние обрезания?
+    (0, react_1.useEffect)(() => (0, on_1.default)(window, 'resize', checkClamp), [content, checkClamp]);
+    return (react_1.default.createElement("div", { className: cx('root', className, opened && shadows_1.BoxShadow.z2straight) },
+        loading && (react_1.default.createElement(Layout, null,
+            react_1.default.createElement(LoadingView, null))),
+        !loading && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Layout, { className: cx('header') },
+                react_1.default.createElement("div", { className: cx('rating') }, notAffectRating ? 'Не влияет на рейтинг' : react_1.default.createElement(rating_1.Rating, { value: rating })),
+                react_1.default.createElement("div", { className: cx('author') }, author),
+                onGoToReview && (react_1.default.createElement(link_1.Link, { className: cx('link'), pseudo: true, onClick: onGoToReview, "data-testid": 'gallery-modal:go-to-review-link' }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u043E\u0442\u0437\u044B\u0432\u0443"))),
+            content && !opened && (react_1.default.createElement(Layout, null,
+                react_1.default.createElement("div", { ref: contentRef, className: cx('content'), "data-testid": 'review-info:collapsed-content' }, content))),
+            content && opened && (react_1.default.createElement(custom_scrollbar_1.CustomScrollbar, { className: cx('content', 'opened') },
+                react_1.default.createElement(Layout, null,
+                    react_1.default.createElement("div", { "data-testid": 'review-info:expanded-content' }, content),
+                    react_1.default.createElement(link_1.Link, { pseudo: true, onClick: () => setOpened(false), "data-testid": 'review-info:collapse' }, "\u0421\u043A\u0440\u044B\u0442\u044C \u043E\u0442\u0437\u044B\u0432")))),
+            content && !opened && clamped && (react_1.default.createElement(Layout, null,
+                react_1.default.createElement(link_1.Link, { pseudo: true, onClick: () => setOpened(true), "data-testid": 'review-info:expand' }, "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E\u043B\u043D\u043E\u0441\u0442\u044C\u044E")))))));
+};
 exports.ReviewInfo = ReviewInfo;
+function Layout({ className, children }) {
+    return react_1.default.createElement("div", { className: cx(className, 'layout') }, children);
+}
+function LoadingView() {
+    return (react_1.default.createElement("div", { className: cx('loading') },
+        react_1.default.createElement("div", { className: cx('head') },
+            react_1.default.createElement("div", { className: cx('text', 'name') }),
+            react_1.default.createElement(link_1.Link, { pseudo: true, disabled: true, className: cx('button') }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u043E\u0442\u0437\u044B\u0432\u0443")),
+        react_1.default.createElement("div", { className: cx('text') }),
+        react_1.default.createElement("div", { className: cx('text') })));
+}

package/desktop/components/gallery-modal/components/review-info.module.scss

@@ -1,15 +1,35 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .root {
-  height: 20px;
-  display: flex;
+  min-height: 140px;
+  max-height: 314px;
   font-size: 14px;
   line-height: 20px;
+  padding-bottom: 24px;
+  background: #fff;
+}
+
+.layout {
+  width: var(--square-size);
+  margin: 0 auto;
+}
+
+.header {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  padding: 26px 0 14px;
   white-space: nowrap;
 }
 
+.rating {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: colors.$basic-gray38;
+}
+
 .author {
-  flex: 1;
+  flex-grow: 1;
   margin-left: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -18,5 +38,50 @@
 
 .link {
   margin-left: 16px;
-  font-weight: 500;
+  font-weight: 600;
+  &:hover {
+    font-weight: 600;
+  }
+}
+
+.content {
+  &.opened {
+    max-height: calc(314px - 56px - 24px);
+  }
+  &:not(.opened) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+
+.loading {
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 26px;
+  .head {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  .text {
+    width: 100%;
+    border-radius: 4px;
+    background: colors.$basic-gray4;
+    height: 16px;
+    line-height: 20px;
+    vertical-align: middle;
+    margin: 2px 0;
+  }
+  .name {
+    max-width: 240px;
+    margin-right: 16px;
+  }
+  .button {
+    margin-left: auto;
+    white-space: nowrap;
+    font-weight: 600;
+  }
 }

package/desktop/components/gallery-modal/utils.d.ts

@@ -6,11 +6,11 @@ import React from 'react';
  */
 export declare const useImagesLoad: (srcList: string[]) => boolean;
 /**
- * Хук, вернет размер квадрата вписанного в прямоугольную область, определенную заданным элементом.
+ * Хук, вернет размер квадрата вписанного в область окна галереи фото по макетам.
  * @param areaRef Реф с элементом.
  * @param options Опции.
  * @return Размер или null.
  */
-export declare const useRectFit: (areaRef: React.RefObject<HTMLDivElement | null>, { correction }: {
-    correction: number;
+export declare const useSquareFit: (areaRef: React.RefObject<HTMLDivElement | null>, { hasReview }: {
+    hasReview: boolean;
 }) => number | null;

package/desktop/components/gallery-modal/utils.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRectFit = exports.useImagesLoad = void 0;
+exports.useSquareFit = exports.useImagesLoad = void 0;
 const react_1 = require("react");
 const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
 /**
@@ -25,29 +25,26 @@ const useImagesLoad = (srcList) => {
 };
 exports.useImagesLoad = useImagesLoad;
 /**
- * Хук, вернет размер квадрата вписанного в прямоугольную область, определенную заданным элементом.
+ * Хук, вернет размер квадрата вписанного в область окна галереи фото по макетам.
  * @param areaRef Реф с элементом.
  * @param options Опции.
  * @return Размер или null.
  */
-const useRectFit = (areaRef, { correction }) => {
+const useSquareFit = (areaRef, { hasReview }) => {
     const [size, setSize] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        const calcSquareSize = () => {
+        function calc() {
             if (areaRef.current) {
-                const availWidth = areaRef.current.clientWidth;
-                const availHeight = areaRef.current.clientHeight;
-                if (availWidth + correction <= availHeight) {
-                    setSize(availWidth);
-                }
-                else {
-                    setSize(availHeight - correction);
-                }
+                const correction = 2 * (104 + 16 + 56 + 24); // ширина превью + отступ + ширина кнопки + отступ
+                // доступная область в которую можно вписать **квадрат**
+                const availWidth = areaRef.current.clientWidth - correction;
+                const availHeight = areaRef.current.clientHeight - (hasReview ? 140 : 40); // вычитаем высоту футера
+                setSize(Math.min(availWidth, availHeight));
             }
-        };
-        calcSquareSize();
-        return (0, on_1.default)(window, 'resize', () => window.requestAnimationFrame(calcSquareSize));
-    }, [areaRef]);
+        }
+        calc();
+        return (0, on_1.default)(window, 'resize', () => window.requestAnimationFrame(calc));
+    }, [areaRef, hasReview]);
     return size;
 };
-exports.useRectFit = useRectFit;
+exports.useSquareFit = useSquareFit;

package/mobile/components/product-slider/index.js

@@ -45,11 +45,12 @@ const ProductSlider = ({ children, onInViewport, onNeedRequest }) => {
         entry.isIntersecting && (onInViewport === null || onInViewport === void 0 ? void 0 : onInViewport());
     });
     return (react_1.default.createElement("div", { ref: rootRef, "data-testid": 'product-slider:root' },
-        react_1.default.createElement(touch_slider_1.TouchSlider, null, react_1.Children.toArray(children).reduce((list, item) => {
-            (0, react_1.isValidElement)(item) &&
-                item.type === product_info_1.ProductInfo &&
-                list.push(react_1.default.createElement("div", { key: item.key, className: product_slider_module_scss_1.default.item }, item));
-            return list;
-        }, []))));
+        react_1.default.createElement(touch_slider_1.TouchSlider, null,
+            react_1.default.createElement(product_info_1.Parts.FooterContext.Provider, { value: { className: product_slider_module_scss_1.default.footer } }, react_1.Children.toArray(children).reduce((list, item) => {
+                (0, react_1.isValidElement)(item) &&
+                    item.type === product_info_1.ProductInfo &&
+                    list.push(react_1.default.createElement("div", { key: item.key, className: product_slider_module_scss_1.default.item, "data-testid": 'product-slider:item' }, item));
+                return list;
+            }, [])))));
 };
 exports.ProductSlider = ProductSlider;

package/mobile/components/product-slider/product-slider.module.scss

@@ -1,6 +1,8 @@
 @use 'node_modules/@sima-land/ui-nucleons/breakpoints';
 
 .item {
+  display: flex;
+  flex-direction: column;
   position: relative;
   flex-shrink: 0;
   width: 160px;
@@ -11,3 +13,8 @@
     margin-right: 16px;
   }
 }
+
+.footer {
+  margin-top: auto;
+  padding-top: 16px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "15.0.1",
+  "version": "15.2.1",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",