@meduza/ui-kit-2 0.1.15 → 0.1.17

package/dist/ui-kit-2.cjs.development.js

@@ -611,7 +611,7 @@ var Footnote = function Footnote(_ref) {
   }, children));
 };
 
-var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","isVisible":"DotsOnImage-module_isVisible__Wqqqt","dot":"DotsOnImage-module_dot__H1wua","show":"DotsOnImage-module_show__2TMBv","isActive":"DotsOnImage-module_isActive__3hh31","popover":"DotsOnImage-module_popover__35Cpj","isRight":"DotsOnImage-module_isRight__2RsJe","isTop":"DotsOnImage-module_isTop__3zmSK","isLeft":"DotsOnImage-module_isLeft__3quc9","isBottom":"DotsOnImage-module_isBottom__3Nk1T"};
+var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","isVisible":"DotsOnImage-module_isVisible__Wqqqt","marker":"DotsOnImage-module_marker__lH5cP","show":"DotsOnImage-module_show__2TMBv","dot":"DotsOnImage-module_dot__H1wua","isActive":"DotsOnImage-module_isActive__3hh31","popover":"DotsOnImage-module_popover__35Cpj","isRight":"DotsOnImage-module_isRight__2RsJe","isTop":"DotsOnImage-module_isTop__3zmSK","isLeft":"DotsOnImage-module_isLeft__3quc9","isBottom":"DotsOnImage-module_isBottom__3Nk1T"};
 
 var DotsOnImage = function DotsOnImage(_ref) {
   var _ref$block = _ref.block,
@@ -622,6 +622,10 @@ var DotsOnImage = function DotsOnImage(_ref) {
       display = _ref$block.display,
       dots = _ref$block.dots;
 
+  var _useState = React.useState(1),
+      ratio = _useState[0],
+      setRatio = _useState[1];
+
   var _useInView = reactIntersectionObserver.useInView({
     threshold: 0.5
   }),
@@ -631,19 +635,20 @@ var DotsOnImage = function DotsOnImage(_ref) {
 
   var container = React.useRef(null);
 
-  var _useState = React.useState({
+  var _useState2 = React.useState({
     title: null,
     body: null,
     show: false,
     id: null
   }),
-      popover = _useState[0],
-      setPopover = _useState[1];
+      popover = _useState2[0],
+      setPopover = _useState2[1];
 
-  var _useState2 = React.useState(false),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
+  var _useState3 = React.useState(false),
+      visible = _useState3[0],
+      setVisible = _useState3[1];
 
+  var defaultWidth = 375;
   React.useEffect(function () {
     if (entry && entry.boundingClientRect && entry.boundingClientRect.y < 0) {
       setVisible(true);
@@ -665,6 +670,25 @@ var DotsOnImage = function DotsOnImage(_ref) {
       return document.removeEventListener('click', handleClickOutside);
     };
   }, [popover]);
+  React.useEffect(function () {
+    setDotSize();
+    window.addEventListener('resize', setDotSize);
+    return function () {
+      return document.removeEventListener('resize', setDotSize);
+    };
+  }, [visible]);
+
+  var setDotSize = function setDotSize() {
+    var width = window.innerWidth;
+
+    if (width < defaultWidth) {
+      var _ratio = width / defaultWidth;
+
+      setRatio(_ratio);
+    } else {
+      setRatio(1);
+    }
+  };
 
   var handleClickOutside = function handleClickOutside(event) {
     var path = event.composedPath();
@@ -712,13 +736,18 @@ var DotsOnImage = function DotsOnImage(_ref) {
   }), React__default.createElement("div", {
     ref: container
   }, dots.map(function (dot) {
-    return React__default.createElement("button", {
-      className: makeClassName([[styles$7.dot, true], [styles$7.isActive, dot.id === popover.id]]),
-      type: "button",
+    return React__default.createElement("div", {
+      className: styles$7.dot,
       key: dot.id,
       style: {
         top: dot.position.y + "%",
         left: dot.position.x + "%",
+        transform: "scale(" + ratio + ") translate(-" + 50 / ratio + "%, -" + 50 / ratio + "%)"
+      }
+    }, React__default.createElement("button", {
+      className: makeClassName([[styles$7.marker, true], [styles$7.isActive, dot.id === popover.id]]),
+      type: "button",
+      style: {
         backgroundColor: dot.icon.color
       },
       onClick: function onClick() {
@@ -728,7 +757,7 @@ var DotsOnImage = function DotsOnImage(_ref) {
       dangerouslySetInnerHTML: {
         __html: dot.icon.svg_string
       }
-    }), dot.icon.type === 'number' && dot.icon.number);
+    }), dot.icon.type === 'number' && dot.icon.number));
   }), popover.show && React__default.createElement(React__default.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? React__default.createElement("div", {
     className: makeClassName([[styles$7.popover, true], [styles$7[popover.side], !!popover.side], [styles$7[popover.align], !!popover.align]]),
     style: popover.style