@meduza/ui-kit-2 0.1.24 → 0.1.25

package/dist/RelatedBlock/RelatedBlock.types.d.ts

@@ -13,5 +13,6 @@ export interface RelatedBlockProps {
         };
         only_on?: string;
     };
+    trackClick?: boolean;
     styleContext?: string[] | string;
 }

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

@@ -303,9 +303,10 @@ var viewportSize = (function () {
 
 var POST_MESSAGE_PREFIX = 'mdzKitMsg';
 
-var postMessage = function postMessage(element, action) {
+var postMessage = function postMessage(category, element, action) {
   var target = window.top;
   var msg = POST_MESSAGE_PREFIX + "=" + JSON.stringify({
+    category: category,
     element: element,
     action: action
   });
@@ -457,7 +458,7 @@ var Image = function Image(_ref) {
       return;
     }
 
-    postMessage('fullscreen_click', 'click');
+    postMessage('', 'fullscreen_click', 'click');
     lightBox.show(optimized, width, height, alt);
   };
 
@@ -1601,6 +1602,7 @@ var RelatedBlock = function RelatedBlock(_ref) {
       title = _ref$block$data.title,
       related = _ref$block$data.related,
       onlyOn = _ref$block.only_on,
+      trackClick = _ref.trackClick,
       styleContext = _ref.styleContext;
   var classNames = [[styles$q.root, true], [styles$q[onlyOn], true]];
 
@@ -1608,6 +1610,12 @@ var RelatedBlock = function RelatedBlock(_ref) {
     classNames = makeStyleContext(classNames, styleContext, styles$q);
   }
 
+  var handleClick = function handleClick(url) {
+    if (trackClick) {
+      postMessage('simpleRelated', 'click', url);
+    }
+  };
+
   return React__default.createElement("div", {
     "data-testid": "related-block",
     className: makeClassName(classNames)
@@ -1622,7 +1630,10 @@ var RelatedBlock = function RelatedBlock(_ref) {
     }, React__default.createElement("a", {
       href: item.full_url || "/" + item.url,
       target: "_blank",
-      rel: "noopener noreferrer"
+      rel: "noopener noreferrer",
+      onClick: function onClick() {
+        return handleClick(item.full_url || item.url);
+      }
     }, React__default.createElement("span", {
       className: styles$q.first
     }, item.title), item.second_title && ' ', item.second_title && React__default.createElement("span", null, item.second_title)));
@@ -1666,7 +1677,7 @@ var SourceBlock = function SourceBlock(_ref) {
   }, origin))));
 };
 
-var styles$s = {"root":"RelatedRichBlock-module_root__3NYmj","overlay":"RelatedRichBlock-module_overlay__3XSg_","overlayHeader":"RelatedRichBlock-module_overlayHeader__2Nmbv","isRich":"RelatedRichBlock-module_isRich__1LnA4","body":"RelatedRichBlock-module_body__1ZHZS","isCard":"RelatedRichBlock-module_isCard__2naDz","hasGradient":"RelatedRichBlock-module_hasGradient__27LOk","cover":"RelatedRichBlock-module_cover__3yygp","tag":"RelatedRichBlock-module_tag__3OLyG","dark":"RelatedRichBlock-module_dark__3Y1fE","light":"RelatedRichBlock-module_light__2mUxL","mobile":"RelatedRichBlock-module_mobile__JpCS4","desktop":"RelatedRichBlock-module_desktop__trL0D"};
+var styles$s = {"root":"RelatedRichBlock-module_root__3NYmj","wrapper":"RelatedRichBlock-module_wrapper__1eLIQ","overlay":"RelatedRichBlock-module_overlay__3XSg_","overlayHeader":"RelatedRichBlock-module_overlayHeader__2Nmbv","isRich":"RelatedRichBlock-module_isRich__1LnA4","body":"RelatedRichBlock-module_body__1ZHZS","isCard":"RelatedRichBlock-module_isCard__2naDz","hasGradient":"RelatedRichBlock-module_hasGradient__27LOk","cover":"RelatedRichBlock-module_cover__3yygp","tag":"RelatedRichBlock-module_tag__3OLyG","dark":"RelatedRichBlock-module_dark__3Y1fE","light":"RelatedRichBlock-module_light__2mUxL","mobile":"RelatedRichBlock-module_mobile__JpCS4","desktop":"RelatedRichBlock-module_desktop__trL0D"};
 
 /* eslint-disable react/jsx-no-target-blank */
 var RelatedRichBlock = function RelatedRichBlock(_ref) {
@@ -1686,15 +1697,34 @@ var RelatedRichBlock = function RelatedRichBlock(_ref) {
   var style = {};
   var styleHeader = {};
 
-  var _useState = React.useState(false),
-      isRich = _useState[0],
-      setIsRich = _useState[1];
+  var _useState = React.useState('unset'),
+      type = _useState[0],
+      setType = _useState[1];
 
   var cardType = "is" + toCapitalize(layout);
   React.useEffect(function () {
-    // setIsRich(Math.random() >= 0.5)
-    setIsRich(true);
+    setType(Math.random() >= 0.5 ? 'simpleRelated' : 'richRelated');
   }, []);
+
+  var _useInView = reactIntersectionObserver.useInView({
+    threshold: 0,
+    triggerOnce: true
+  }),
+      ref = _useInView[0],
+      inView = _useInView[1];
+
+  React.useEffect(function () {
+    if (inView) {
+      if (onlyOn === 'mobile' && window.innerWidth <= 511 || onlyOn === 'desktop' && window.innerWidth >= 512 || !onlyOn) {
+        postMessage(type, url, 'view');
+      }
+    }
+  }, [inView]);
+
+  var handleClick = function handleClick() {
+    postMessage(type, url, 'click');
+  };
+
   var classNames = [[styles$s.root, true], [styles$s[cardType], !!layout && !!styles$s[cardType]], [styles$s.hasGradient, !!gradients], [styles$s[onlyOn], !!onlyOn && !!styles$s[onlyOn]]];
   var context = ['isInMediaBlock'];
 
@@ -1710,17 +1740,31 @@ var RelatedRichBlock = function RelatedRichBlock(_ref) {
     style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
   }
 
-  if (!isRich) {
-    return React__default.createElement(RelatedBlock, {
-      block: fallback
+  if (type === 'unset') {
+    return React__default.createElement("div", {
+      className: styles$s.wrapper
     });
   }
 
+  if (type === 'simpleRelated') {
+    return React__default.createElement("div", {
+      ref: ref,
+      className: styles$s.wrapper
+    }, React__default.createElement(RelatedBlock, {
+      block: fallback,
+      trackClick: true
+    }));
+  }
+
   return React__default.createElement("a", {
     "data-testid": "related-rich-block",
     className: makeClassName(classNames),
     href: url,
-    target: "_blank"
+    target: "_blank",
+    onClick: function onClick() {
+      return handleClick();
+    },
+    ref: ref
   }, layout === 'rich' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles$s.overlay,
     style: style
@@ -2330,7 +2374,7 @@ var Spoiler = function Spoiler(_ref) {
     setSpoiled(!spoiled);
 
     if (spoiled) {
-      postMessage('closeSpoiler', 'click');
+      postMessage('', 'closeSpoiler', 'click');
       var rect = ref.current.getBoundingClientRect();
 
       if (rect.top < 0) {
@@ -2339,7 +2383,7 @@ var Spoiler = function Spoiler(_ref) {
         });
       }
     } else {
-      postMessage('openSpoiler', 'click');
+      postMessage('', 'openSpoiler', 'click');
     }
   };