@meduza/ui-kit-2 0.1.94 → 0.1.97

package/dist/RawHtmlBlock/RawHtmlBlock.types.d.ts

@@ -13,4 +13,5 @@ export interface RawHtmlBlockProps {
     isInBookmarks?: boolean | undefined;
     bookmarkAction?: (service: CallToActions, place: string) => void;
     lightBox?: LightboxContext | null | undefined;
+    lang: 'ru' | 'en';
 }

package/dist/ShopRelatedBlock/ShopRelatedBlock.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import("./ShopRelatedBlock.types").ShopRelatedBlockProps>;
+    parameters: {
+        themeWrapperSideBySide: boolean;
+    };
+};
+export default _default;
+export declare const Default: React.FC;

package/dist/ShopRelatedBlock/ShopRelatedBlock.types.d.ts

@@ -0,0 +1,4 @@
+export interface ShopRelatedBlockProps {
+    block?: any;
+    styleContext?: any;
+}

package/dist/ShopRelatedBlock/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ShopRelatedBlockProps } from './ShopRelatedBlock.types';
+export declare const ShopRelatedBlock: React.FC<ShopRelatedBlockProps>;

package/dist/index.d.ts

@@ -40,3 +40,4 @@ export * from './Footnote';
 export * from './RelatedRichBlock';
 export * from './SensitiveBlock';
 export * from './DonatesTeaser';
+export * from './ShopRelatedBlock';

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

@@ -2186,7 +2186,7 @@ var RenderBlocks = function RenderBlocks(_ref) {
         styleContext: styleContext
       });
 
-    case 'dotanes':
+    case 'donation':
       return React__default.createElement(DonatesTeaser, {
         styleContext: styleContext,
         lang: lang
@@ -2524,7 +2524,8 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
       isListened = _ref.isListened,
       isInBookmarks = _ref.isInBookmarks,
       bookmarkAction = _ref.bookmarkAction,
-      lightBox = _ref.lightBox;
+      lightBox = _ref.lightBox,
+      lang = _ref.lang;
   var context = {
     lightBox: lightBox || null
   };
@@ -2582,7 +2583,8 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
           isRead: isRead,
           isListened: isListened,
           isInBookmarks: isInBookmarks,
-          bookmarkAction: bookmarkAction
+          bookmarkAction: bookmarkAction,
+          lang: lang
         }));
       }
   }
@@ -2615,6 +2617,99 @@ var ToolbarButton = function ToolbarButton(_ref) {
   }, 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;
@@ -2649,6 +2744,7 @@ exports.RenderBlocks = RenderBlocks;
 exports.RichTitle = RichTitle;
 exports.Secondary = Secondary;
 exports.SensitiveBlock = SensitiveBlock;
+exports.ShopRelatedBlock = ShopRelatedBlock;
 exports.SimpleBlock = SimpleBlock;
 exports.SimpleTitle = SimpleTitle;
 exports.SourceBlock = SourceBlock;