@sima-land/moleculas 15.2.1 → 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,6 +37,7 @@ 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;
@@ -42,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)));
 };
 /**
  * Слот - изображение товара.
@@ -165,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,
@@ -173,6 +176,7 @@ exports.Parts = {
     Prices,
     Title,
     TrademarkLink,
+    SecondaryInfo,
     // компоненты-слоты и компоненты-запчасти, предназначенные для вывода футера (dcе что ниже ссылки на торговую марку)
     Footer,
     FooterContext,

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/package.json

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