@sima-land/moleculas 13.3.0 → 13.4.0

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

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