@sima-land/moleculas 13.2.2 → 13.4.0

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

@@ -3,13 +3,11 @@ export interface BadgeField {
     type: 'text' | 'timer' | 'svg-url';
     value: string;
 }
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
     /** Основной цвет, используется как цвет обводки, иконок и текста. */
     color?: string;
     /** Содержимое шильдика. */
     fields: Array<BadgeField>;
-    /** Ссылка, переход по которой будет произведён по нажатию на шильдик. */
-    href?: string;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/common/components/badge/index.js

@@ -30,9 +30,8 @@ const cx = bind_1.default.bind(badge_module_scss_1.default);
  */
 const Badge = (_a) => {
     var { className, color, fields, href, style, 'data-testid': testId = 'badge' } = _a, restProps = __rest(_a, ["className", "color", "fields", "href", "style", 'data-testid']);
-    const Element = href ? 'a' : 'span';
     const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
-    return (react_1.default.createElement(Element, 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({}, 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;

package/common/components/intractive-image/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface InteractiveImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    'data-testid'?: string;
+}
+export interface InteractiveImageImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    'data-testid'?: string;
+}
+export interface InteractiveImagePointProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    x: number;
+    y: number;
+    'data-testid'?: string;
+}
+export declare const InteractiveImage: ({ children, "data-testid": testId, className, ...rest }: InteractiveImageProps) => JSX.Element;
+export declare const Parts: {
+    readonly Image: React.ForwardRefExoticComponent<InteractiveImageImageProps & React.RefAttributes<HTMLImageElement>>;
+    readonly Point: React.ForwardRefExoticComponent<InteractiveImagePointProps & React.RefAttributes<HTMLAnchorElement>>;
+};

package/common/components/intractive-image/index.js

@@ -0,0 +1,53 @@
+"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)
+        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.Parts = exports.InteractiveImage = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const interactive_image_module_scss_1 = __importDefault(require("./interactive-image.module.scss"));
+const InteractiveImage = (_a) => {
+    var { children, 'data-testid': testId, className } = _a, rest = __rest(_a, ["children", 'data-testid', "className"]);
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(interactive_image_module_scss_1.default.root, className) }, rest, { "data-testid": testId }), react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && (child.type === Image || child.type === Point))));
+};
+exports.InteractiveImage = InteractiveImage;
+const Image = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, 'data-testid': testId = 'interactive-image:image' } = _a, rest = __rest(_a, ["className", 'data-testid']);
+    return (react_1.default.createElement("img", Object.assign({ ref: ref, className: (0, classnames_1.default)(interactive_image_module_scss_1.default.image, className), "data-testid": testId }, rest)));
+});
+const Point = (0, react_1.forwardRef)((_a, ref) => {
+    var { x, y, className, style, 'data-testid': testId = 'interactive-image:point' } = _a, rest = __rest(_a, ["x", "y", "className", "style", 'data-testid']);
+    return (react_1.default.createElement("a", Object.assign({ ref: ref, "aria-label": '\u0422\u043E\u0447\u043A\u0430 \u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0438', "data-testid": testId, className: (0, classnames_1.default)(interactive_image_module_scss_1.default.point, className), style: Object.assign(Object.assign({}, style), { top: `${y}%`, left: `${x}%` }) }, rest)));
+});
+exports.Parts = { Image, Point };

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

@@ -0,0 +1,50 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+
+.root {
+  display: inline-block;
+  font-size: 0;
+  position: relative;
+  overflow: hidden;
+  background: colors.$basic-gray4;
+}
+
+.image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.point {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+  background: rgba(colors.$basic-gray87, 0.4);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  &:hover {
+    cursor: pointer;
+    background: rgba(colors.$basic-gray87, 0.64);
+  }
+  &::after {
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    border-radius: 50%;
+  }
+  @include breakpoints.down('xs') {
+    width: 40px;
+    height: 40px;
+    &::after {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}

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

@@ -21,6 +21,7 @@
   top: 0;
   left: 0;
   display: block;
+  width: 100%;
   height: 100%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "13.2.2",
+  "version": "13.4.0",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error"
   },
   "dependencies": {
-    "@sima-land/ui-nucleons": "^43.0.1",
+    "@sima-land/ui-nucleons": "^43.1.0",
     "@sima-land/ui-quarks": "^2.2.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.26.0",