@meduza/ui-kit-2 0.1.18 → 0.1.20

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

@@ -370,6 +370,9 @@ var toCamel = function toCamel(s) {
     return str.toUpperCase().replace('_', '');
   });
 };
+var toCapitalize = function toCapitalize(s) {
+  return s[0].toUpperCase() + s.slice(1);
+};
 
 var RenderPicture = function RenderPicture(_ref) {
   var source = _ref.source,
@@ -1389,7 +1392,7 @@ var EmbedBlockContainer = function EmbedBlockContainer(_ref) {
       styleContext = _ref.styleContext,
       lang = _ref.lang;
 
-  if (block.data.wrap_with_iframe) {
+  if (block.data && block.data.wrap_with_iframe) {
     return React.createElement(IframeBlock, {
       block: block,
       styleContext: styleContext,
@@ -1460,9 +1463,12 @@ var ChapterBlock = function ChapterBlock(_ref) {
   }));
 };
 
-var generateGradient = function generateGradient(color) {
-  var gradientSteps = [[0, 7], [0.08, 12], [0.16, 17], [0.22, 21], [0.32, 26], [0.42, 32], [0.52, 38], [0.62, 47], [0.72, 57], [0.82, 65], [1, 82]];
-  var gradient = gradientSteps.map(function (i) {
+var generateGradient = function generateGradient(color, type) {
+  var steps = {
+    mediaBlockBottom: [[0, 7], [0.08, 12], [0.16, 17], [0.22, 21], [0.32, 26], [0.42, 32], [0.52, 38], [0.62, 47], [0.72, 57], [0.82, 65], [1, 82]],
+    mediaBlockTop: [[0.5, 0], [0, 97]]
+  };
+  var gradient = steps[type].map(function (i) {
     return "rgba(" + color + ", " + i[0] + ") " + i[1] + "%";
   });
   return "linear-gradient(-180deg, " + gradient + ")";
@@ -1487,7 +1493,7 @@ var SimpleTitle = function SimpleTitle(_ref) {
   }, first);
 };
 
-var styles$n = {"root":"RichTitle-module_root__BK_WT","slide":"RichTitle-module_slide__1A-gB","game":"RichTitle-module_game__1g8Bn","half":"RichTitle-module_half__10GRI","featured":"RichTitle-module_featured__wJfaQ","mobile":"RichTitle-module_mobile__1Cb6E","desktop":"RichTitle-module_desktop__2ixSQ"};
+var styles$n = {"root":"RichTitle-module_root__BK_WT","slide":"RichTitle-module_slide__1A-gB","game":"RichTitle-module_game__1g8Bn","half":"RichTitle-module_half__10GRI","featured":"RichTitle-module_featured__wJfaQ","isInMediaBlock":"RichTitle-module_isInMediaBlock__3RDw4","mobile":"RichTitle-module_mobile__1Cb6E","desktop":"RichTitle-module_desktop__2ixSQ"};
 
 var RichTitle = function RichTitle(_ref) {
   var _ref$block = _ref.block,
@@ -1568,7 +1574,8 @@ var ListBlock = function ListBlock(_ref) {
   }
 
   return React.createElement(TagName, {
-    className: makeClassName(classNames)
+    className: makeClassName(classNames),
+    "data-testid": "list-block"
   }, data.map(function (item, index) {
     return React.createElement("li", {
       key: index,
@@ -2088,7 +2095,7 @@ var Cover = function Cover(_ref) {
   if (gradients) {
     var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
     classNames = makeStyleContext(classNames, theme, styles$w);
-    style.backgroundImage = generateGradient(gradients.bg_rgb);
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
   }
 
   var renderCC = function renderCC(context) {
@@ -2361,5 +2368,87 @@ var ToolbarButton = function ToolbarButton(_ref) {
   }, 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, RenderBlocks, RichTitle, Secondary, SimpleBlock, SimpleTitle, SourceBlock, Spoiler, SvgSymbol, Switcher, Table, Tag, Timestamp, Toolbar, ToolbarButton };
+var styles$B = {"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"};
+
+/* 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(false),
+      isRich = _useState[0],
+      setIsRich = _useState[1];
+
+  var cardType = "is" + toCapitalize(layout);
+  useEffect(function () {
+    // setIsRich(Math.random() >= 0.5)
+    setIsRich(true);
+  }, []);
+  var classNames = [[styles$B.root, true], [styles$B[cardType], !!layout && !!styles$B[cardType]], [styles$B.hasGradient, !!gradients], [styles$B[onlyOn], !!onlyOn && !!styles$B[onlyOn]]];
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles$B);
+  }
+
+  if (gradients) {
+    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
+    classNames = makeStyleContext(classNames, theme, styles$B);
+    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
+  }
+
+  if (!isRich) {
+    return React.createElement(RelatedBlock, {
+      block: fallback
+    });
+  }
+
+  return React.createElement("a", {
+    "data-testid": "related-rich-block",
+    className: makeClassName(classNames),
+    href: url,
+    target: "_blank"
+  }, 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: "rich"
+  }, tag)), React.createElement("div", {
+    className: styles$B.cover
+  }, 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: [].concat(styleContext, ['isInMediaBlock'])
+    });
+  })));
+};
+
+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 };
 //# sourceMappingURL=ui-kit-2.esm.js.map