@meduza/ui-kit-2 0.1.38 → 0.1.39

package/dist/ui-kit-2.esm.js

@@ -332,7 +332,7 @@ var imageConditionalKeys = {
   narrow: [600, 325]
 };
 
-var styles$3 = {"root":"Lazy-module_root__2Z72l","visible":"Lazy-module_visible__3-SdX"};
+var styles$3 = {"root":"Lazy-module_root__2Z72l"};
 
 var Lazy = function Lazy(_ref) {
   var children = _ref.children,
@@ -380,7 +380,8 @@ var RenderPicture = function RenderPicture(_ref) {
       fallbackSource = _ref.fallbackSource,
       optimized = _ref.optimized,
       alt = _ref.alt,
-      display = _ref.display;
+      display = _ref.display,
+      _onLoad = _ref.onLoad;
 
   var _useState = useState(false),
       fallback = _useState[0],
@@ -416,11 +417,14 @@ var RenderPicture = function RenderPicture(_ref) {
     }));
   }), React.createElement("img", {
     src: fallback ? fallbackSource : 'data:image/gif;base64,R0lGODlhAQABAPAAAPLy8gAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==',
-    alt: alt
+    alt: alt,
+    onLoad: function onLoad() {
+      return _onLoad(true);
+    }
   }));
 };
 
-var styles$4 = {"root":"Image-module_root__1vsA_","placeholder":"Image-module_placeholder__1p4ob","wrapper":"Image-module_wrapper__3fLjs","loaded":"Image-module_loaded__w9FVT","fullscreen":"Image-module_fullscreen__29apx"};
+var styles$4 = {"root":"Image-module_root__1vsA_","isLoaded":"Image-module_isLoaded__3XhU5","wrapper":"Image-module_wrapper__3fLjs","fullscreen":"Image-module_fullscreen__29apx"};
 
 var Image = function Image(_ref) {
   var alt = _ref.alt,
@@ -436,6 +440,10 @@ var Image = function Image(_ref) {
   var _useContext = useContext(BlockContext),
       lightBox = _useContext.lightBox;
 
+  var _useState = useState(false),
+      isLoaded = _useState[0],
+      setIsLoaded = _useState[1];
+
   var handleClick = function handleClick() {
     if (!fullscreen || !lightBox || optimized && !optimized.original) {
       return;
@@ -455,17 +463,17 @@ var Image = function Image(_ref) {
     lightBox.show(optimized, width, height, alt);
   };
 
-  var pictureStyles = {
-    paddingBottom: 100 / (ratio || width / height) + "%"
-  };
   var blockStyles = {
     maxWidth: width <= 649 ? width : '100%'
   };
+  var pictureStyles = {
+    paddingBottom: 100 / (ratio || width / height) + "%"
+  };
   /* fallback w325 url until w6 was released */
 
   var fallbackSource = source && source[0] || optimized.w325 && optimized.w325['1x'] || optimized.original;
   return React.createElement("div", {
-    className: makeClassName([[styles$4.root, true], [styles$4.fullscreen, fullscreen && fullscreen.desktop]]),
+    className: makeClassName([[styles$4.root, true], [styles$4.isLoaded, !isLoaded], [styles$4.fullscreen, fullscreen && fullscreen.desktop]]),
     style: blockStyles,
     "data-testid": "image"
   }, React.createElement("div", {
@@ -486,7 +494,8 @@ var Image = function Image(_ref) {
     source: source,
     optimized: optimized,
     alt: alt,
-    display: display
+    display: display,
+    onLoad: setIsLoaded
   })), React.createElement("noscript", null, React.createElement("img", {
     src: fallbackSource,
     alt: alt
@@ -495,7 +504,8 @@ var Image = function Image(_ref) {
     source: source,
     optimized: optimized,
     alt: alt,
-    display: display
+    display: display,
+    onLoad: setIsLoaded
   })));
 };
 
@@ -1135,7 +1145,7 @@ var DangerousHTML = function DangerousHTML(_ref) {
   }));
 };
 
-var styles$i = {"root":"EmbedBlock-module_root__28k9U","object":"EmbedBlock-module_object__2_UZ7","objectWrap":"EmbedBlock-module_objectWrap__1aDVd","gameEmbed":"EmbedBlock-module_gameEmbed__AZQSo","proportional":"EmbedBlock-module_proportional__3lAv4","default":"EmbedBlock-module_default__LSDny","xs":"EmbedBlock-module_xs__1hFgW","full":"EmbedBlock-module_full__1TEjx","super_full":"EmbedBlock-module_super_full__1Fn9A","figure":"EmbedBlock-module_figure__vAvcN","dark":"EmbedBlock-module_dark__1be2G","isInGroupedBlock":"EmbedBlock-module_isInGroupedBlock__3r_i-","control":"EmbedBlock-module_control__xr8dZ","raw_html":"EmbedBlock-module_raw_html__MQoAA","mobileFullwidth":"EmbedBlock-module_mobileFullwidth__QFFLH","isInCard":"EmbedBlock-module_isInCard__37rtq","isInSlide":"EmbedBlock-module_isInSlide__2ea5q","cc":"EmbedBlock-module_cc__1BQ5g","isInAnswer":"EmbedBlock-module_isInAnswer__tLlgs","picture":"EmbedBlock-module_picture__186q0","wrapper":"EmbedBlock-module_wrapper__33XvX","mobile":"EmbedBlock-module_mobile__1P-eo","desktop":"EmbedBlock-module_desktop__SF5a_"};
+var styles$i = {"root":"EmbedBlock-module_root__28k9U","object":"EmbedBlock-module_object__2_UZ7","objectWrap":"EmbedBlock-module_objectWrap__1aDVd","gameEmbed":"EmbedBlock-module_gameEmbed__AZQSo","proportional":"EmbedBlock-module_proportional__3lAv4","default":"EmbedBlock-module_default__LSDny","xs":"EmbedBlock-module_xs__1hFgW","full":"EmbedBlock-module_full__1TEjx","super_full":"EmbedBlock-module_super_full__1Fn9A","figure":"EmbedBlock-module_figure__vAvcN","dark":"EmbedBlock-module_dark__1be2G","isInGroupedBlock":"EmbedBlock-module_isInGroupedBlock__3r_i-","control":"EmbedBlock-module_control__xr8dZ","raw_html":"EmbedBlock-module_raw_html__MQoAA","mobileFullwidth":"EmbedBlock-module_mobileFullwidth__QFFLH","isInCard":"EmbedBlock-module_isInCard__37rtq","isInSlide":"EmbedBlock-module_isInSlide__2ea5q","cc":"EmbedBlock-module_cc__1BQ5g","isInSensitiveBlock":"EmbedBlock-module_isInSensitiveBlock__3wWYF","isInAnswer":"EmbedBlock-module_isInAnswer__tLlgs","picture":"EmbedBlock-module_picture__186q0","wrapper":"EmbedBlock-module_wrapper__33XvX","mobile":"EmbedBlock-module_mobile__1P-eo","desktop":"EmbedBlock-module_desktop__SF5a_"};
 
 var EmbedGif = function EmbedGif(_ref) {
   var gif = _ref.gif,
@@ -1597,7 +1607,6 @@ 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]];
 
@@ -1605,12 +1614,6 @@ var RelatedBlock = function RelatedBlock(_ref) {
     classNames = makeStyleContext(classNames, styleContext, styles$q);
   }
 
-  var handleClick = function handleClick(url) {
-    if (trackClick) {
-      postMessage('simpleRelated', url, 'click');
-    }
-  };
-
   return React.createElement("div", {
     "data-testid": "related-block",
     className: makeClassName(classNames)
@@ -1625,10 +1628,7 @@ var RelatedBlock = function RelatedBlock(_ref) {
     }, React.createElement("a", {
       href: item.full_url || "/" + item.url,
       target: "_blank",
-      rel: "noopener noreferrer",
-      onClick: function onClick() {
-        return handleClick(item.full_url || item.url);
-      }
+      rel: "noopener noreferrer"
     }, React.createElement("span", {
       className: styles$q.first
     }, item.title), item.second_title && ' ', item.second_title && React.createElement("span", null, item.second_title)));
@@ -1672,7 +1672,7 @@ var SourceBlock = function SourceBlock(_ref) {
   }, origin))));
 };
 
-var styles$s = {"root":"SensitiveBlock-module_root__2iJbD","container":"SensitiveBlock-module_container__1Wtix","overlay":"SensitiveBlock-module_overlay__hfDVS","content":"SensitiveBlock-module_content__sNpxZ","button":"SensitiveBlock-module_button__3BGZK","default":"SensitiveBlock-module_default__2HgmZ","full":"SensitiveBlock-module_full__3Hph9","super_full":"SensitiveBlock-module_super_full__14UOv","visible":"SensitiveBlock-module_visible__1B-NV"};
+var styles$s = {"root":"SensitiveBlock-module_root__2iJbD","container":"SensitiveBlock-module_container__1Wtix","overlay":"SensitiveBlock-module_overlay__hfDVS","content":"SensitiveBlock-module_content__sNpxZ","button":"SensitiveBlock-module_button__3BGZK","default":"SensitiveBlock-module_default__2HgmZ","full":"SensitiveBlock-module_full__3Hph9","media":"SensitiveBlock-module_media__3wnlo","super_full":"SensitiveBlock-module_super_full__14UOv","visible":"SensitiveBlock-module_visible__1B-NV","isInCard":"SensitiveBlock-module_isInCard__1L-lu","isInSlide":"SensitiveBlock-module_isInSlide__f_Ql2"};
 
 var SensitiveBlock = function SensitiveBlock(_ref) {
   var block = _ref.block,
@@ -1692,9 +1692,17 @@ var SensitiveBlock = function SensitiveBlock(_ref) {
     isVisible(true);
   };
 
+  var classNames = [[styles$s.root, true], [styles$s.visible, visible], [styles$s[display], display && styles$s[display]]];
+  var context = ['isInSensitiveBlock'];
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles$s);
+    context = [].concat(styleContext, ['isInSensitiveBlock']);
+  }
+
   return React.createElement("div", {
     "data-testid": "sensitive-block",
-    className: makeClassName([[styles$s.root, true], [styles$s.visible, visible], [styles$s[display], display && styles$s[display]]])
+    className: makeClassName(classNames)
   }, React.createElement("div", {
     className: styles$s.container
   }, React.createElement("div", {
@@ -1719,7 +1727,7 @@ var SensitiveBlock = function SensitiveBlock(_ref) {
     className: styles$s.media
   }, React.createElement(EmbedBlockContainer, {
     block: block.item,
-    styleContext: ['isInSensitiveBlock']
+    styleContext: context
   }))), cc && React.createElement("figcaption", {
     className: styles$s.figcaption
   }, React.createElement(MediaCaption, {
@@ -2379,7 +2387,6 @@ var RelatedRichBlock = function RelatedRichBlock(_ref) {
       onlyOn = _ref$block.only_on,
       _ref$block$data = _ref$block.data,
       blocks = _ref$block$data.blocks,
-      fallback = _ref$block$data.fallback,
       url = _ref$block$data.url,
       _ref$block$data$cover = _ref$block$data.cover,
       urls = _ref$block$data$cover.urls,
@@ -2390,15 +2397,7 @@ var RelatedRichBlock = function RelatedRichBlock(_ref) {
       styleContext = _ref.styleContext;
   var style = {};
   var styleHeader = {};
-
-  var _useState = useState('unset'),
-      type = _useState[0],
-      setType = _useState[1];
-
   var cardType = "is" + toCapitalize(layout);
-  useEffect(function () {
-    setType(Math.random() >= 0.5 ? 'simpleRelated' : 'richRelated');
-  }, []);
 
   var _useInView = useInView({
     threshold: 0,
@@ -2410,13 +2409,13 @@ var RelatedRichBlock = function RelatedRichBlock(_ref) {
   useEffect(function () {
     if (inView) {
       if (onlyOn === 'mobile' && window.innerWidth <= 511 || onlyOn === 'desktop' && window.innerWidth >= 512 || !onlyOn) {
-        postMessage(type, url, 'view');
+        postMessage('richRelated', url, 'view');
       }
     }
   }, [inView]);
 
   var handleClick = function handleClick() {
-    postMessage(type, url, 'click');
+    postMessage('richRelated', url, 'click');
   };
 
   var classNames = [[styles$B.root, true], [styles$B[cardType], !!layout && !!styles$B[cardType]], [styles$B.hasGradient, !!gradients], [styles$B[onlyOn], !!onlyOn && !!styles$B[onlyOn]]];
@@ -2437,23 +2436,6 @@ var RelatedRichBlock = function RelatedRichBlock(_ref) {
     }
   }
 
-  if (type === 'unset') {
-    return React.createElement("div", {
-      className: styles$B.wrapper
-    });
-  }
-
-  if (type === 'simpleRelated') {
-    return React.createElement("div", {
-      ref: ref,
-      className: styles$B.wrapper
-    }, React.createElement(RelatedBlock, {
-      block: fallback,
-      trackClick: true,
-      styleContext: styleContext
-    }));
-  }
-
   return React.createElement("a", {
     "data-testid": "related-rich-block",
     className: makeClassName(classNames),