@meduza/ui-kit-2 0.1.98 → 0.2.0

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

@@ -2517,6 +2517,99 @@ var RelatedRichBlock = function RelatedRichBlock(_ref) {
   })));
 };
 
+var styles$C = {"root":"ShopRelatedBlock-module_root__x4vdk","wrapper":"ShopRelatedBlock-module_wrapper__3jQp9","overlay":"ShopRelatedBlock-module_overlay__15S5a","overlayHeader":"ShopRelatedBlock-module_overlayHeader__2IXK-","body":"ShopRelatedBlock-module_body__3ipYj","hasGradient":"ShopRelatedBlock-module_hasGradient__1pghj","picture":"ShopRelatedBlock-module_picture__1bu9H","tag":"ShopRelatedBlock-module_tag__2vTKm","center":"ShopRelatedBlock-module_center__2H85-","title":"ShopRelatedBlock-module_title__1ZIW0","price":"ShopRelatedBlock-module_price__2cVXM","dark":"ShopRelatedBlock-module_dark__3Gfbc","light":"ShopRelatedBlock-module_light__1y8Qy","mobile":"ShopRelatedBlock-module_mobile__AleU0","desktop":"ShopRelatedBlock-module_desktop__2--zA"};
+
+/* eslint-disable react/jsx-no-target-blank */
+var ShopRelatedBlock = function ShopRelatedBlock(_ref) {
+  var _ref$block = _ref.block,
+      onlyOn = _ref$block.only_on,
+      _ref$block$data = _ref$block.data,
+      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,
+      firstTitle = _ref$block$data$cover.first_title,
+      secondTitle = _ref$block$data$cover.second_title,
+      styleContext = _ref.styleContext;
+  var style = {};
+  var styleHeader = {};
+
+  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('productRelated', url, 'view');
+      }
+    }
+  }, [inView]);
+
+  var handleClick = function handleClick() {
+    postMessage('productRelated', url, 'click');
+  };
+
+  var classNames = [[styles$C.root, true], [styles$C.hasGradient, !!gradients], [styles$C[onlyOn], !!onlyOn && !!styles$C[onlyOn]]];
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles$C);
+  }
+
+  if (gradients) {
+    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
+    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
+    classNames = makeStyleContext(classNames, theme, styles$C);
+
+    if (onlyOn === 'desktop') {
+      style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
+    }
+  }
+
+  return React__default.createElement("a", {
+    "data-testid": "related-rich-block",
+    className: makeClassName(classNames),
+    href: url,
+    target: "_blank",
+    onClick: function onClick() {
+      return handleClick();
+    },
+    ref: ref
+  }, layout === 'rich' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$C.overlay,
+    style: style
+  }), React__default.createElement("div", {
+    className: styles$C.overlayHeader,
+    style: styleHeader
+  })), React__default.createElement("div", {
+    className: styles$C.tag
+  }, React__default.createElement(Tag, {
+    size: "small",
+    theme: "inherit",
+    styleContext: "richRelated"
+  }, tag)), React__default.createElement("div", {
+    className: styles$C.cover
+  }, React__default.createElement("div", {
+    className: styles$C.picture
+  }, React__default.createElement(Image, {
+    optimized: urls,
+    ratio: ratio,
+    display: "narrow"
+  }))), React__default.createElement("div", {
+    className: styles$C.body
+  }, React__default.createElement("h2", {
+    className: styles$C.title
+  }, firstTitle, React__default.createElement("span", {
+    className: styles$C.price
+  }, secondTitle))));
+};
+
 var RawHtmlBlock = function RawHtmlBlock(_ref) {
   var block = _ref.block,
       styleContext = _ref.styleContext,
@@ -2573,6 +2666,14 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
         });
       }
 
+    case 'related_shop':
+      {
+        return React__default.createElement(ShopRelatedBlock, {
+          block: block,
+          styleContext: styleContext
+        });
+      }
+
     default:
       {
         return React__default.createElement(BlockProvider, {
@@ -2590,7 +2691,7 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
   }
 };
 
-var styles$C = {"root":"ToolbarButton-module_root__xN-fq","isDark":"ToolbarButton-module_isDark__2q5U7","dark":"ToolbarButton-module_dark__GrIOr","bookmark":"ToolbarButton-module_bookmark__3369b","isActive":"ToolbarButton-module_isActive__3NLAE","text":"ToolbarButton-module_text__32m6s"};
+var styles$D = {"root":"ToolbarButton-module_root__xN-fq","isDark":"ToolbarButton-module_isDark__2q5U7","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,
@@ -2598,7 +2699,7 @@ var ToolbarButton = function ToolbarButton(_ref) {
       theme = _ref.theme,
       isActive = _ref.isActive,
       _onClick = _ref.onClick;
-  var classNames = [[styles$C.root, true], [styles$C[type], !!styles$C[type]], [styles$C[theme], !!styles$C[theme] && !!theme], [styles$C.isActive, !!isActive]];
+  var classNames = [[styles$D.root, true], [styles$D[type], !!styles$D[type]], [styles$D[theme], !!styles$D[theme] && !!theme], [styles$D.isActive, !!isActive]];
   return React__default.createElement("li", {
     className: toolbarStyles.item
   }, React__default.createElement("button", {
@@ -2613,103 +2714,10 @@ var ToolbarButton = function ToolbarButton(_ref) {
     icon: type,
     styleContext: "isInToolbar"
   }), children && React__default.createElement("span", {
-    className: styles$C.text
+    className: styles$D.text
   }, children)));
 };
 
-var styles$D = {"root":"ShopRelatedBlock-module_root__x4vdk","wrapper":"ShopRelatedBlock-module_wrapper__3jQp9","overlay":"ShopRelatedBlock-module_overlay__15S5a","overlayHeader":"ShopRelatedBlock-module_overlayHeader__2IXK-","body":"ShopRelatedBlock-module_body__3ipYj","hasGradient":"ShopRelatedBlock-module_hasGradient__1pghj","picture":"ShopRelatedBlock-module_picture__1bu9H","tag":"ShopRelatedBlock-module_tag__2vTKm","center":"ShopRelatedBlock-module_center__2H85-","title":"ShopRelatedBlock-module_title__1ZIW0","price":"ShopRelatedBlock-module_price__2cVXM","dark":"ShopRelatedBlock-module_dark__3Gfbc","light":"ShopRelatedBlock-module_light__1y8Qy","mobile":"ShopRelatedBlock-module_mobile__AleU0","desktop":"ShopRelatedBlock-module_desktop__2--zA"};
-
-/* eslint-disable react/jsx-no-target-blank */
-var ShopRelatedBlock = function ShopRelatedBlock(_ref) {
-  var _ref$block = _ref.block,
-      onlyOn = _ref$block.only_on,
-      _ref$block$data = _ref$block.data,
-      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,
-      firstTitle = _ref$block$data$cover.first_title,
-      secondTitle = _ref$block$data$cover.second_title,
-      styleContext = _ref.styleContext;
-  var style = {};
-  var styleHeader = {};
-
-  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('richRelated', url, 'view');
-      }
-    }
-  }, [inView]);
-
-  var handleClick = function handleClick() {
-    postMessage('richRelated', url, 'click');
-  };
-
-  var classNames = [[styles$D.root, true], [styles$D.hasGradient, !!gradients], [styles$D[onlyOn], !!onlyOn && !!styles$D[onlyOn]]];
-
-  if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$D);
-  }
-
-  if (gradients) {
-    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
-    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
-    classNames = makeStyleContext(classNames, theme, styles$D);
-
-    if (onlyOn === 'desktop') {
-      style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
-    }
-  }
-
-  return React__default.createElement("a", {
-    "data-testid": "related-rich-block",
-    className: makeClassName(classNames),
-    href: url,
-    target: "_blank",
-    onClick: function onClick() {
-      return handleClick();
-    },
-    ref: ref
-  }, layout === 'rich' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$D.overlay,
-    style: style
-  }), React__default.createElement("div", {
-    className: styles$D.overlayHeader,
-    style: styleHeader
-  })), React__default.createElement("div", {
-    className: styles$D.tag
-  }, React__default.createElement(Tag, {
-    size: "small",
-    theme: "inherit",
-    styleContext: "richRelated"
-  }, tag)), React__default.createElement("div", {
-    className: styles$D.cover
-  }, React__default.createElement("div", {
-    className: styles$D.picture
-  }, React__default.createElement(Image, {
-    optimized: urls,
-    ratio: ratio,
-    display: "narrow"
-  }))), React__default.createElement("div", {
-    className: styles$D.body
-  }, React__default.createElement("h2", {
-    className: styles$D.title
-  }, firstTitle, React__default.createElement("span", {
-    className: styles$D.price
-  }, secondTitle))));
-};
-
 exports.BookmarkButton = BookmarkButton;
 exports.Button = Button;
 exports.CardTitle = CardTitle;