@sima-land/moleculas 15.1.0 → 15.3.0

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

@@ -15,19 +15,21 @@ exports.UNAVAILABLE_REASON = {
     onlyForLegalEntities: 'Товар доступен только для юридических лиц',
 };
 const ProductInfo = ({ restriction, children }) => {
-    const { image, badges, prices, title, trademark, footer } = (0, define_slots_1.defineSlots)(children, {
+    const { image, badges, prices, title, trademark, footer, secondaryInfo } = (0, define_slots_1.defineSlots)(children, {
         image: parts_1.Parts.Image,
         badges: parts_1.Parts.Badges,
         prices: parts_1.Parts.Prices,
         title: parts_1.Parts.Title,
         trademark: parts_1.Parts.TrademarkLink,
         footer: parts_1.Parts.Footer,
+        secondaryInfo: parts_1.Parts.SecondaryInfo,
     });
     return (react_1.default.createElement(utils_1.ProductInfoContext.Provider, { value: { restriction } },
         image,
         restriction !== 'adult' && badges,
         prices,
         title,
+        restriction !== 'adult' && secondaryInfo,
         !restriction && trademark,
         footer));
 };

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

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { LinkProps } from '@sima-land/ui-nucleons/link';
+import { HintProps } from '@sima-land/ui-nucleons/hint';
 import { StrokedSVGProps } from '@sima-land/ui-nucleons/stroked-svg';
 import { BadgeListProps } from '../badge-list';
 export interface ImageProps {
@@ -10,14 +11,22 @@ export interface ImageProps {
     children?: React.ReactNode;
     opacity?: number;
 }
+declare function SecondaryInfo({ children }: {
+    children: ReactNode;
+}): JSX.Element;
 export declare const Parts: {
     readonly Image: ({ src, alt, href, onClick, children, opacity }: ImageProps) => JSX.Element;
-    readonly ImageButton: ({ icon, fill, onClick, hint, "data-testid": testId, }: {
+    readonly ImageButton: ({ icon, fill, onClick, hint, hintDirection, "data-testid": testId, position, }: {
         icon: StrokedSVGProps['component'];
         fill?: string | undefined;
         onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
         hint?: string | undefined;
+        hintDirection?: ("left" | "right" | "bottom" | "top") | undefined;
         'data-testid'?: string | undefined;
+        position?: {
+            x: 'left' | 'right';
+            y: 'top' | 'bottom';
+        } | undefined;
     }) => JSX.Element;
     readonly Badges: (props: BadgeListProps) => JSX.Element;
     readonly Prices: ({ price, oldPrice, currencyGrapheme, unavailableReason, }: {
@@ -28,7 +37,11 @@ export declare const Parts: {
     }) => JSX.Element;
     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 SecondaryInfo: typeof SecondaryInfo;
     readonly Footer: React.FC<{}>;
+    readonly FooterContext: React.Context<{
+        className?: string | undefined;
+    }>;
     readonly CartControl: ({ children, stepText, markupText, loading, }: {
         children?: React.ReactNode;
         stepText?: string | undefined;
@@ -39,3 +52,4 @@ export declare const Parts: {
     readonly WaitListAddButton: ({ className, ...props }: LinkProps) => JSX.Element;
     readonly WaitListAddedLink: ({ className, ...props }: LinkProps) => JSX.Element;
 };
+export {};

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

@@ -51,17 +51,17 @@ const cx = bind_1.default.bind(product_info_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const ImageButton = ({ icon, fill, onClick, hint, 'data-testid': testId, }) => {
+const ImageButton = ({ icon, fill, onClick, hint, hintDirection = 'left', 'data-testid': testId, position, }) => {
     const commonProps = {
         role: 'banner',
         component: icon,
         fill,
         strokeWidth: 1.5,
-        className: cx('image-button'),
+        className: cx('image-button', position && 'positioned', position && `${position.x}-${position.y}`),
         onClick,
         'data-testid': testId,
     };
-    return hint ? (react_1.default.createElement(with_hint_1.WithHint, { hint: hint, direction: 'left' }, (ref, toggle) => (react_1.default.createElement(stroked_svg_1.StrokedSVG, Object.assign({}, commonProps, { ref: ref, onMouseEnter: () => toggle(true), onMouseLeave: () => toggle(false) }))))) : (react_1.default.createElement(stroked_svg_1.StrokedSVG, Object.assign({}, commonProps)));
+    return hint ? (react_1.default.createElement(with_hint_1.WithHint, { hint: hint, direction: hintDirection }, (ref, toggle) => (react_1.default.createElement(stroked_svg_1.StrokedSVG, Object.assign({}, commonProps, { ref: ref, onMouseEnter: () => toggle(true), onMouseLeave: () => toggle(false) }))))) : (react_1.default.createElement(stroked_svg_1.StrokedSVG, Object.assign({}, commonProps)));
 };
 /**
  * Слот - изображение товара.
@@ -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 Свойства.
@@ -159,6 +165,9 @@ const WaitListAddedLink = (_a) => {
             '\u00A0',
             "\u043E\u0436\u0438\u0434\u0430\u043D\u0438\u044F")));
 };
+function SecondaryInfo({ children }) {
+    return react_1.default.createElement("div", { className: cx('secondary-info') }, children);
+}
 exports.Parts = {
     // основные компоненты-слоты и компоненты-запчасти
     Image,
@@ -167,8 +176,10 @@ exports.Parts = {
     Prices,
     Title,
     TrademarkLink,
+    SecondaryInfo,
     // компоненты-слоты и компоненты-запчасти, предназначенные для вывода футера (dcе что ниже ссылки на торговую марку)
     Footer,
+    FooterContext,
     CartControl,
     AdultConfirmButton,
     WaitListAddButton,

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

@@ -63,6 +63,8 @@
 }
 
 .image-button {
+  width: 24px;
+  height: 24px;
   display: block;
   border: 0;
   outline: 0;
@@ -71,13 +73,39 @@
   --gutter: 8px;
   right: var(--gutter);
   cursor: pointer;
-  &:nth-child(1) {
+  &:not(.positioned) {
+    &:nth-child(1) {
+      top: var(--gutter);
+    }
+    &:nth-child(2) {
+      bottom: var(--gutter);
+    }
+    &:nth-child(3) {
+      top: var(--gutter);
+      left: var(--gutter);
+    }
+    &:nth-child(3) {
+      top: var(--gutter);
+      left: var(--gutter);
+    }
+  }
+  &.left-top {
+    left: var(--gutter);
     top: var(--gutter);
   }
-  &:nth-child(2) {
+  &.left-bottom {
+    left: var(--gutter);
     bottom: var(--gutter);
   }
-  &:nth-child(n + 3) {
+  &.right-top {
+    right: var(--gutter);
+    top: var(--gutter);
+  }
+  &.right-bottom {
+    right: var(--gutter);
+    bottom: var(--gutter);
+  }
+  &:nth-child(n + 5) {
     display: none;
   }
   &:hover {
@@ -143,6 +171,13 @@
   color: colors.$basic-gray87;
 }
 
+.secondary-info {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 20px;
+  color: colors.$basic-gray38;
+}
+
 .trademark-link {
   display: block;
   margin-top: 8px;

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

@@ -42,7 +42,12 @@ const ReviewInfo = ({ rating, author, onGoToReview, content, className, notAffec
             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,

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, "data-testid": 'product-slider: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.1.0",
+  "version": "15.3.0",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",