@sima-land/moleculas 15.3.0 → 15.4.0

package/common/components/badge/index.js

@@ -47,7 +47,7 @@ const cx = bind_1.default.bind(badge_module_scss_1.default);
 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({ 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 })) : (
+    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, alt: '' })) : (
         // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
         react_1.default.createElement("span", { className: cx('content') }, fields.reduce((acc, item, i) => {
             let result = null;

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

@@ -33,10 +33,10 @@ 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).map(child => {
+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, index) => {
     switch (true) {
         case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
-            return react_1.default.createElement(BadgeListSlot, null, child);
+            return react_1.default.createElement(BadgeListSlot, { key: index }, child);
         case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
             return child;
         default:

package/common/components/intractive-image/interactive-image.module.scss

@@ -22,8 +22,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 64px;
-  height: 64px;
+  width: 52px;
+  height: 52px;
   background: rgba(colors.$basic-gray87, 0.4);
   border-radius: 50%;
   transform: translate(-50%, -50%);
@@ -34,8 +34,8 @@
   &::after {
     content: '';
     display: block;
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
     background: #fff;
     border-radius: 50%;
   }

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

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

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

@@ -3,6 +3,7 @@ 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';
+import { RatingCounterProps } from '../rating-counter';
 export interface ImageProps {
     src?: string;
     alt?: string;
@@ -14,6 +15,7 @@ export interface ImageProps {
 declare function SecondaryInfo({ children }: {
     children: ReactNode;
 }): JSX.Element;
+declare function CustomRatingCounter({ className, ...rest }: RatingCounterProps): JSX.Element;
 export declare const Parts: {
     readonly Image: ({ src, alt, href, onClick, children, opacity }: ImageProps) => JSX.Element;
     readonly ImageButton: ({ icon, fill, onClick, hint, hintDirection, "data-testid": testId, position, }: {
@@ -38,6 +40,7 @@ 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 SecondaryInfo: typeof SecondaryInfo;
+    readonly RatingCounter: typeof CustomRatingCounter;
     readonly Footer: React.FC<{}>;
     readonly FooterContext: React.Context<{
         className?: string | undefined;

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

@@ -42,6 +42,7 @@ const with_hint_1 = require("@sima-land/ui-nucleons/with-hint");
 const image_overlay_1 = require("../../../desktop/components/gallery-modal/components/image-overlay");
 const badge_list_1 = require("../badge-list");
 const utils_1 = require("./utils");
+const rating_counter_1 = require("../rating-counter");
 const eighteen_plus_svg_1 = __importDefault(require("../../icons/eighteen-plus.svg"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const product_info_module_scss_1 = __importDefault(require("./product-info.module.scss"));
@@ -168,6 +169,10 @@ const WaitListAddedLink = (_a) => {
 function SecondaryInfo({ children }) {
     return react_1.default.createElement("div", { className: cx('secondary-info') }, children);
 }
+function CustomRatingCounter(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return react_1.default.createElement(rating_counter_1.RatingCounter, Object.assign({ size: 'unset', className: cx('rating', className), hoverDisabled: true }, rest));
+}
 exports.Parts = {
     // основные компоненты-слоты и компоненты-запчасти
     Image,
@@ -177,6 +182,7 @@ exports.Parts = {
     Title,
     TrademarkLink,
     SecondaryInfo,
+    RatingCounter: CustomRatingCounter,
     // компоненты-слоты и компоненты-запчасти, предназначенные для вывода футера (dcе что ниже ссылки на торговую марку)
     Footer,
     FooterContext,

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

@@ -1,5 +1,6 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 @use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use '../rating-counter/rating-counter-util';
 
 .image-overlay {
   position: relative;
@@ -188,6 +189,16 @@
   text-overflow: ellipsis;
 }
 
+.rating {
+  margin-top: 8px;
+  @include breakpoints.down('mm') {
+    @include rating-counter-util.size-s;
+  }
+  @include breakpoints.up('mm') {
+    @include rating-counter-util.size-m;
+  }
+}
+
 // футер
 .footer {
   margin-top: 16px;

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export interface ProductInfoProps {
+    /** Ограничение товара. Влияет на отображение информации. */
     restriction?: 'adult' | 'unavailable';
+    /** Содержимое. */
     children?: React.ReactNode;
 }

package/common/components/rating-counter/index.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+export declare type RatingCounterSize = 's' | 'm' | 'unset';
+interface CustomProps {
+    /**
+     * Размер.
+     * При указании "unset" необходимо определить стили самостоятельно с помощью миксина из rating-counter-util.scss.
+     */
+    size?: RatingCounterSize;
+    /** Значение рейтинга. */
+    value: number;
+    /** Количество отзывов. */
+    reviewCount: number;
+    /** Нужно ли отключить эффект при наведении. */
+    hoverDisabled?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export declare type RatingCounterProps = CustomProps & Omit<HTMLAttributes<HTMLDivElement>, keyof CustomProps>;
+/**
+ * Счетчик рейтинга.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function RatingCounter({ size, value, reviewCount, className, hoverDisabled, 'data-testid': testId, ...restProps }: RatingCounterProps): JSX.Element;
+export {};

package/common/components/rating-counter/index.js

@@ -0,0 +1,38 @@
+"use strict";
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RatingCounter = void 0;
+const react_1 = __importDefault(require("react"));
+const star_svg_1 = __importDefault(require("./star.svg"));
+const get_declination_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/get-declination"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const rating_counter_module_scss_1 = __importDefault(require("./rating-counter.module.scss"));
+const cx = bind_1.default.bind(rating_counter_module_scss_1.default);
+/**
+ * Счетчик рейтинга.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function RatingCounter(_a) {
+    var { size = 's', value, reviewCount, className, hoverDisabled, 'data-testid': testId = 'rating-counter' } = _a, restProps = __rest(_a, ["size", "value", "reviewCount", "className", "hoverDisabled", 'data-testid']);
+    return (react_1.default.createElement("div", Object.assign({ className: cx('root', `size-${size}`, !(value > 0) && 'empty', hoverDisabled && 'hover-disabled', className), "data-testid": testId }, restProps),
+        react_1.default.createElement(star_svg_1.default, { className: cx('star') }),
+        value > 0 && react_1.default.createElement("span", { className: cx('value') }, String(value).replace('.', ',')),
+        react_1.default.createElement("span", { className: cx('count') }, reviewCount > 0
+            ? `${reviewCount} ${(0, get_declination_1.default)(reviewCount, ['отзыв', 'отзыва', 'отзывов'])}`
+            : 'Нет отзывов')));
+}
+exports.RatingCounter = RatingCounter;

package/common/components/rating-counter/rating-counter-util.scss

@@ -0,0 +1,17 @@
+@mixin size-s {
+  --rating-icon-size: 16px;
+  --rating-value-size: 12px;
+  --rating-value-height: 16px;
+  --rating-count-gutter: 8px;
+  --rating-count-size: 12px;
+  --rating-count-height: 16px;
+}
+
+@mixin size-m {
+  --rating-icon-size: 24px;
+  --rating-value-size: 16px;
+  --rating-value-height: 24px;
+  --rating-count-gutter: 8px;
+  --rating-count-size: 14px;
+  --rating-count-height: 20px;
+}

package/common/components/rating-counter/rating-counter.module.scss

@@ -0,0 +1,66 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use './rating-counter-util';
+
+.root {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  white-space: nowrap;
+  --rating-icon-color: #{colors.$additional-amber};
+  --rating-count-color: #{colors.$basic-gray38};
+  &:hover:not(.hover-disabled) {
+    cursor: pointer;
+    --rating-count-color: #{colors.$basic-gray54};
+  }
+}
+
+// модификаторы
+.empty {
+  --rating-icon-color: #{colors.$basic-gray12};
+}
+
+.size-s {
+  @include rating-counter-util.size-s;
+}
+
+.size-m {
+  @include rating-counter-util.size-m;
+}
+
+// составляющие
+.star {
+  flex-shrink: 0;
+  display: block;
+  width: var(--rating-icon-size);
+  height: var(--rating-icon-size);
+  fill: var(--rating-icon-color);
+}
+
+.value {
+  font-weight: 700;
+  color: #{colors.$additional-amber};
+  font-size: var(--rating-value-size);
+  line-height: var(--rating-value-height);
+}
+
+.count {
+  overflow: hidden;
+  color: var(--rating-count-color);
+  font-size: var(--rating-count-size);
+  line-height: var(--rating-count-height);
+  text-overflow: ellipsis;
+}
+
+// отступы
+.star + .value {
+  margin-left: 4px;
+}
+
+.star + .count {
+  margin-left: var(--rating-count-gutter);
+}
+
+.value + .count {
+  margin-left: var(--rating-count-gutter);
+}

package/common/components/rating-counter/star.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.53601 1.54543C7.70396 1.12719 8.29603 1.12719 8.46398 1.54543L10.1755 5.80741L14.7577 6.11811C15.2074 6.1486 15.3904 6.71169 15.0445 7.00066L11.52 9.94542L12.6405 14.3994C12.7505 14.8365 12.2715 15.1845 11.8897 14.9449L7.99999 12.5028L4.11024 14.9449C3.72853 15.1845 3.24953 14.8365 3.35949 14.3994L4.47999 9.94542L0.955488 7.00067C0.609623 6.71169 0.792582 6.1486 1.24225 6.11811L5.82451 5.80741L7.53601 1.54543Z"
+    fill="#000" />
+</svg>

package/desktop/components/breadcrumbs/index.js

@@ -55,7 +55,7 @@ const Breadcrumb = ({ data, onSiblingsPopupOpen, isSiblingActive, }) => {
             return (0, on_1.default)(window, 'mousedown', togglePopup.bind(null, false));
         }
     }, [withPopup]);
-    const selfName = (react_1.default.createElement(link_1.Link, { color: 'basic-gray87', href: data.url }, data.name));
+    const selfName = (react_1.default.createElement(link_1.Link, { color: 'basic-gray87', href: data.url, pseudo: !data.url }, data.name));
     return (react_1.default.createElement("div", { "data-testid": 'breadcrumb', className: cx('breadcrumb') },
         selfName,
         data.siblings && (react_1.default.createElement(react_1.default.Fragment, null,

package/mobile/components/breadcrumbs/index.d.ts

@@ -2,7 +2,7 @@
 export interface BreadcrumbsProps {
     items: {
         name: string;
-        url: string;
+        url?: string;
     }[];
 }
 export declare const Breadcrumbs: ({ items }: BreadcrumbsProps) => JSX.Element;

package/mobile/components/breadcrumbs/index.js

@@ -7,5 +7,5 @@ exports.Breadcrumbs = void 0;
 const link_1 = require("@sima-land/ui-nucleons/link");
 const react_1 = __importDefault(require("react"));
 const breadcrumbs_module_scss_1 = __importDefault(require("./breadcrumbs.module.scss"));
-const Breadcrumbs = ({ items }) => (react_1.default.createElement("nav", { className: breadcrumbs_module_scss_1.default.root }, items.map((item, index) => (react_1.default.createElement(link_1.Link, { key: index, href: item.url, color: 'basic-gray87', className: breadcrumbs_module_scss_1.default.item }, item.name)))));
+const Breadcrumbs = ({ items }) => (react_1.default.createElement("nav", { className: breadcrumbs_module_scss_1.default.root }, items.map((item, index) => (react_1.default.createElement(link_1.Link, { key: index, href: item.url, pseudo: !item.url, color: 'basic-gray87', className: breadcrumbs_module_scss_1.default.item, "data-testid": 'breadcrumb' }, item.name)))));
 exports.Breadcrumbs = Breadcrumbs;

package/package.json

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