@meduza/ui-kit-2 0.1.37 → 0.1.38

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

@@ -1135,7 +1135,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","proportional":"EmbedBlock-module_proportional__3lAv4","attachment":"EmbedBlock-module_attachment__2pE0t","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-","gameEmbed":"EmbedBlock-module_gameEmbed__AZQSo","mobile":"EmbedBlock-module_mobile__1P-eo","desktop":"EmbedBlock-module_desktop__SF5a_","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"};
+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 EmbedGif = function EmbedGif(_ref) {
   var gif = _ref.gif,
@@ -1252,7 +1252,7 @@ var EmbedBlock = function EmbedBlock(_ref) {
         {
           return React.createElement("div", {
             className: styles$i.figure
-          }, (small || optimized) && React.createElement(Image, {
+          }, React.createElement(Image, {
             fullscreen: {
               desktop: block.data.fullscreen,
               mobile: true
@@ -1672,126 +1672,60 @@ var SourceBlock = function SourceBlock(_ref) {
   }, origin))));
 };
 
-var styles$s = {"root":"RelatedRichBlock-module_root__3NYmj","wrapper":"RelatedRichBlock-module_wrapper__1eLIQ","overlay":"RelatedRichBlock-module_overlay__3XSg_","overlayHeader":"RelatedRichBlock-module_overlayHeader__2Nmbv","body":"RelatedRichBlock-module_body__1ZHZS","isRich":"RelatedRichBlock-module_isRich__1LnA4","hasGradient":"RelatedRichBlock-module_hasGradient__27LOk","picture":"RelatedRichBlock-module_picture__128HJ","isCard":"RelatedRichBlock-module_isCard__2naDz","cover":"RelatedRichBlock-module_cover__3yygp","tag":"RelatedRichBlock-module_tag__3OLyG","center":"RelatedRichBlock-module_center__197sx","dark":"RelatedRichBlock-module_dark__3Y1fE","light":"RelatedRichBlock-module_light__2mUxL","mobile":"RelatedRichBlock-module_mobile__JpCS4","desktop":"RelatedRichBlock-module_desktop__trL0D"};
+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"};
 
-/* eslint-disable react/jsx-no-target-blank */
-var RelatedRichBlock = function RelatedRichBlock(_ref) {
-  var _ref$block = _ref.block,
-      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,
-      gradients = _ref$block$data$cover.gradients,
-      tag = _ref$block$data$cover.tag,
-      layout = _ref$block$data$cover.layout,
-      ratio = _ref$block$data$cover.ratio,
+var SensitiveBlock = function SensitiveBlock(_ref) {
+  var block = _ref.block,
+      _ref$block = _ref.block,
+      cc = _ref$block.cc,
+      caption = _ref$block.caption,
+      credit = _ref$block.credit,
+      blurredImage = _ref$block.blurred_image,
+      display = _ref.block.item.data.display,
       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,
-    triggerOnce: true
-  }),
-      ref = _useInView[0],
-      inView = _useInView[1];
-
-  useEffect(function () {
-    if (inView) {
-      if (onlyOn === 'mobile' && window.innerWidth <= 511 || onlyOn === 'desktop' && window.innerWidth >= 512 || !onlyOn) {
-        postMessage(type, url, 'view');
-      }
-    }
-  }, [inView]);
+  var _useState = useState(false),
+      visible = _useState[0],
+      isVisible = _useState[1];
 
   var handleClick = function handleClick() {
-    postMessage(type, url, 'click');
+    isVisible(true);
   };
 
-  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'];
-
-  if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$s);
-    context = [].concat(styleContext, ['isInMediaBlock']);
-  }
-
-  if (gradients) {
-    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
-    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
-    classNames = makeStyleContext(classNames, theme, styles$s);
-
-    if (onlyOn === 'desktop') {
-      style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
+  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]]])
+  }, React.createElement("div", {
+    className: styles$s.container
+  }, React.createElement("div", {
+    className: styles$s.overlay,
+    style: {
+      backgroundImage: "url(" + blurredImage + ")"
     }
-  }
-
-  if (type === 'unset') {
-    return React.createElement("div", {
-      className: styles$s.wrapper
-    });
-  }
-
-  if (type === 'simpleRelated') {
-    return React.createElement("div", {
-      ref: ref,
-      className: styles$s.wrapper
-    }, React.createElement(RelatedBlock, {
-      block: fallback,
-      trackClick: true,
-      styleContext: styleContext
-    }));
-  }
-
-  return React.createElement("a", {
-    "data-testid": "related-rich-block",
-    className: makeClassName(classNames),
-    href: "/" + url,
-    target: "_blank",
+  }, React.createElement("div", {
+    className: styles$s.content
+  }, React.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: block.title
+    }
+  }), React.createElement("div", {
+    className: styles$s.button
+  }, React.createElement(Button, {
     onClick: function onClick() {
       return handleClick();
     },
-    ref: ref
-  }, layout === 'rich' && React.createElement(React.Fragment, null, React.createElement("div", {
-    className: styles$s.overlay,
-    style: style
-  }), React.createElement("div", {
-    className: styles$s.overlayHeader,
-    style: styleHeader
-  })), React.createElement("div", {
-    className: styles$s.tag
-  }, React.createElement(Tag, {
-    size: "small",
-    theme: "inherit",
-    styleContext: "richRelated"
-  }, tag)), React.createElement("div", {
-    className: styles$s.cover
-  }, React.createElement("div", {
-    className: styles$s.picture
-  }, React.createElement(Image, {
-    optimized: urls,
-    ratio: ratio,
-    display: "narrow"
-  }))), React.createElement("div", {
-    className: styles$s.body
-  }, blocks.map(function (item) {
-    return React.createElement(RenderBlocks, {
-      key: item.id,
-      block: item,
-      styleContext: context
-    });
+    theme: "light"
+  }, block.button.text)))), React.createElement("div", {
+    className: styles$s.media
+  }, React.createElement(EmbedBlockContainer, {
+    block: block.item,
+    styleContext: ['isInSensitiveBlock']
+  }))), cc && React.createElement("figcaption", {
+    className: styles$s.figcaption
+  }, React.createElement(MediaCaption, {
+    credit: credit,
+    caption: caption,
+    styleContext: styleContext
   })));
 };
 
@@ -1802,10 +1736,12 @@ var GroupedBlock = function GroupedBlock(_ref) {
       onlyOn = _ref.block.only_on,
       styleContext = _ref.styleContext;
   var maxHeight = Math.min.apply(Math, block.data.map(function (item) {
-    return item.data.height;
+    return item.data && item.data.height || item.item.data.height;
   }));
   var normalizedBoxesWidth = block.data.map(function (item) {
-    return item.data.width / (item.data.height / maxHeight);
+    var width = item.data && item.data.width || item.item.data.heigh;
+    var height = item.data && item.data.height || item.item.data.heigh;
+    return width / (height / maxHeight);
   });
   var sumWidth = normalizedBoxesWidth.reduce(function (sum, x) {
     return sum + x;
@@ -1829,7 +1765,10 @@ var GroupedBlock = function GroupedBlock(_ref) {
       style: {
         width: percentWidth + "%"
       }
-    }, React.createElement(EmbedBlockContainer, {
+    }, item.type === 'sensitive' ? React.createElement(SensitiveBlock, {
+      block: item,
+      styleContext: ['isInGroupedBlock']
+    }) : React.createElement(EmbedBlockContainer, {
       block: item,
       styleContext: ['isInGroupedBlock']
     }));
@@ -2143,14 +2082,6 @@ var RenderBlocks = function RenderBlocks(_ref) {
         });
       }
 
-    case 'related_rich':
-      {
-        return React.createElement(RelatedRichBlock, {
-          block: block,
-          styleContext: styleContext
-        });
-      }
-
     case 'chapter-subtitle':
       {
         return React.createElement(ChapterBlock, {
@@ -2187,6 +2118,12 @@ var RenderBlocks = function RenderBlocks(_ref) {
         styleContext: styleContext
       });
 
+    case 'sensitive':
+      return React.createElement(SensitiveBlock, {
+        block: block,
+        styleContext: styleContext
+      });
+
     case 'embed':
     case 'embed_code':
     case 'game_embed':
@@ -2398,7 +2335,7 @@ var Spoiler = function Spoiler(_ref) {
   };
 
   var classNames = [[styles$A.root, true], [styles$A[onlyOn], !!onlyOn], [styles$A[display], !!display && styles$A[display]], [[styles$A.spoiled], !!spoiled]];
-  var context = ['center'].concat(styleContext);
+  var context = ['center'];
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles$A);
@@ -2434,6 +2371,129 @@ var Spoiler = function Spoiler(_ref) {
   }))));
 };
 
+var styles$B = {"root":"RelatedRichBlock-module_root__3NYmj","wrapper":"RelatedRichBlock-module_wrapper__1eLIQ","overlay":"RelatedRichBlock-module_overlay__3XSg_","overlayHeader":"RelatedRichBlock-module_overlayHeader__2Nmbv","body":"RelatedRichBlock-module_body__1ZHZS","isRich":"RelatedRichBlock-module_isRich__1LnA4","hasGradient":"RelatedRichBlock-module_hasGradient__27LOk","picture":"RelatedRichBlock-module_picture__128HJ","isCard":"RelatedRichBlock-module_isCard__2naDz","cover":"RelatedRichBlock-module_cover__3yygp","tag":"RelatedRichBlock-module_tag__3OLyG","center":"RelatedRichBlock-module_center__197sx","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) {
+  var _ref$block = _ref.block,
+      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,
+      gradients = _ref$block$data$cover.gradients,
+      tag = _ref$block$data$cover.tag,
+      layout = _ref$block$data$cover.layout,
+      ratio = _ref$block$data$cover.ratio,
+      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,
+    triggerOnce: true
+  }),
+      ref = _useInView[0],
+      inView = _useInView[1];
+
+  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$B.root, true], [styles$B[cardType], !!layout && !!styles$B[cardType]], [styles$B.hasGradient, !!gradients], [styles$B[onlyOn], !!onlyOn && !!styles$B[onlyOn]]];
+  var context = ['isInMediaBlock'];
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles$B);
+    context = [].concat(styleContext, ['isInMediaBlock']);
+  }
+
+  if (gradients) {
+    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
+    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
+    classNames = makeStyleContext(classNames, theme, styles$B);
+
+    if (onlyOn === 'desktop') {
+      style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
+    }
+  }
+
+  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),
+    href: "/" + url,
+    target: "_blank",
+    onClick: function onClick() {
+      return handleClick();
+    },
+    ref: ref
+  }, layout === 'rich' && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: styles$B.overlay,
+    style: style
+  }), React.createElement("div", {
+    className: styles$B.overlayHeader,
+    style: styleHeader
+  })), React.createElement("div", {
+    className: styles$B.tag
+  }, React.createElement(Tag, {
+    size: "small",
+    theme: "inherit",
+    styleContext: "richRelated"
+  }, tag)), React.createElement("div", {
+    className: styles$B.cover
+  }, React.createElement("div", {
+    className: styles$B.picture
+  }, React.createElement(Image, {
+    optimized: urls,
+    ratio: ratio,
+    display: "narrow"
+  }))), React.createElement("div", {
+    className: styles$B.body
+  }, blocks.map(function (item) {
+    return React.createElement(RenderBlocks, {
+      key: item.id,
+      block: item,
+      styleContext: context
+    });
+  })));
+};
+
 var RawHtmlBlock = function RawHtmlBlock(_ref) {
   var block = _ref.block,
       styleContext = _ref.styleContext,
@@ -2481,6 +2541,14 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
         });
       }
 
+    case 'related_rich':
+      {
+        return React.createElement(RelatedRichBlock, {
+          block: block,
+          styleContext: styleContext
+        });
+      }
+
     default:
       {
         return React.createElement(BlockProvider, {
@@ -2497,7 +2565,7 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
   }
 };
 
-var styles$B = {"root":"ToolbarButton-module_root__xN-fq","dark":"ToolbarButton-module_dark__GrIOr","bookmark":"ToolbarButton-module_bookmark__3369b","isActive":"ToolbarButton-module_isActive__3NLAE","text":"ToolbarButton-module_text__32m6s"};
+var styles$C = {"root":"ToolbarButton-module_root__xN-fq","dark":"ToolbarButton-module_dark__GrIOr","bookmark":"ToolbarButton-module_bookmark__3369b","isActive":"ToolbarButton-module_isActive__3NLAE","text":"ToolbarButton-module_text__32m6s"};
 
 var ToolbarButton = function ToolbarButton(_ref) {
   var children = _ref.children,
@@ -2505,7 +2573,7 @@ var ToolbarButton = function ToolbarButton(_ref) {
       theme = _ref.theme,
       isActive = _ref.isActive,
       _onClick = _ref.onClick;
-  var classNames = [[styles$B.root, true], [styles$B[type], !!styles$B[type]], [styles$B[theme], !!styles$B[theme] && !!theme], [styles$B.isActive, !!isActive]];
+  var classNames = [[styles$C.root, true], [styles$C[type], !!styles$C[type]], [styles$C[theme], !!styles$C[theme] && !!theme], [styles$C.isActive, !!isActive]];
   return React.createElement("button", {
     "data-testid": "toolbar-button",
     className: makeClassName(classNames),
@@ -2518,9 +2586,9 @@ var ToolbarButton = function ToolbarButton(_ref) {
     icon: type,
     styleContext: "isInToolbar"
   }), children && React.createElement("span", {
-    className: styles$B.text
+    className: styles$C.text
   }, children));
 };
 
-export { BookmarkButton, Button, CardTitle, ChapterBlock, Cover, DocumentItemsCount, DotsOnImage, Dropdown, EmbedBlockContainer, Footnote, GroupedBlock, HalfBlock, Image, ImportantLead, Lazy, ListBlock, MaterialNote, MaterialTitle, MediaCaption, Menu, Meta, MetaItem, MetaItemLive, Popover, Primary, QuoteBlock, RawHtmlBlock, RelatedBlock, RelatedRichBlock, RenderBlocks, RichTitle, Secondary, SimpleBlock, SimpleTitle, SourceBlock, Spoiler, SvgSymbol, Switcher, Table, Tag, Timestamp, Toolbar, ToolbarButton };
+export { BookmarkButton, Button, CardTitle, ChapterBlock, Cover, DocumentItemsCount, DotsOnImage, Dropdown, EmbedBlockContainer, Footnote, GroupedBlock, HalfBlock, Image, ImportantLead, Lazy, ListBlock, MaterialNote, MaterialTitle, MediaCaption, Menu, Meta, MetaItem, MetaItemLive, Popover, Primary, QuoteBlock, RawHtmlBlock, RelatedBlock, RelatedRichBlock, RenderBlocks, RichTitle, Secondary, SensitiveBlock, SimpleBlock, SimpleTitle, SourceBlock, Spoiler, SvgSymbol, Switcher, Table, Tag, Timestamp, Toolbar, ToolbarButton };
 //# sourceMappingURL=ui-kit-2.esm.js.map