@meduza/ui-kit-2 0.1.3 → 0.1.5

package/dist/DotsOnImage/DotsOnImage.types.d.ts

@@ -1,8 +1,8 @@
 import { OptimizedImageItem } from '../Image/Image.types';
 export interface PopoverData {
-    title: string;
-    body: string;
-    id: string;
+    title?: string;
+    body?: string;
+    id?: string;
     show: boolean;
 }
 export interface SingleDot {
@@ -27,12 +27,12 @@ export interface DotsOnImageProps {
         cc?: string;
         display?: string;
         optimized?: {
-            original: string;
+            original?: string;
             w325: OptimizedImageItem;
-            w520: OptimizedImageItem;
-            w650: OptimizedImageItem;
-            w980: OptimizedImageItem;
-            w1335: OptimizedImageItem;
+            w520?: OptimizedImageItem;
+            w650?: OptimizedImageItem;
+            w980?: OptimizedImageItem;
+            w1335?: OptimizedImageItem;
         };
         width?: number;
         height?: number;

package/dist/EmbedBlock/EmbedBlock.types.d.ts

@@ -1,3 +1,9 @@
+import React from 'react';
+export interface EmbedGifProps {
+    gif: string;
+    mp4Url: string;
+    style: React.CSSProperties;
+}
 export interface EmbedBlockProps {
     block: any;
     styleContext?: string[] | string;

package/dist/EmbedBlock/EmbedGif.d.ts

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

package/dist/Image/Image.types.d.ts

@@ -25,12 +25,12 @@ export interface ImageProps {
 export interface PictureProps {
     source?: object;
     optimized?: {
-        original: string;
+        original?: string;
         w325: OptimizedImageItem;
-        w520: OptimizedImageItem;
-        w650: OptimizedImageItem;
-        w980: OptimizedImageItem;
-        w1335: OptimizedImageItem;
+        w520?: OptimizedImageItem;
+        w650?: OptimizedImageItem;
+        w980?: OptimizedImageItem;
+        w1335?: OptimizedImageItem;
     };
     alt?: string;
     fallbackSource: string;

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

@@ -6,7 +6,7 @@ export declare type lightBox = {
 };
 export interface RawHtmlBlockProps {
     block: any;
-    styleContext: string[] | string;
+    styleContext?: string[] | string;
     isRead?: boolean | undefined;
     isListened?: boolean | undefined;
     isInBookmarks?: boolean | undefined;

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

@@ -481,16 +481,16 @@ var Image = function Image(_ref) {
   })));
 };
 
-var styles$5 = {"root":"DotsOnImage-module_root__2XP3Q","dot":"DotsOnImage-module_dot__H1wua","popover":"DotsOnImage-module_popover__35Cpj","popoverTitle":"DotsOnImage-module_popoverTitle__343d8"};
+var styles$5 = {"root":"DotsOnImage-module_root__2XP3Q","dot":"DotsOnImage-module_dot__H1wua","popover":"DotsOnImage-module_popover__35Cpj","popoverTitle":"DotsOnImage-module_popoverTitle__343d8","dismiss":"DotsOnImage-module_dismiss__1EWXd"};
 
 var DotsOnImage = function DotsOnImage(_ref) {
-  var block = _ref.block;
-  var optimized = block.optimized,
-      width = block.width,
-      height = block.height,
-      credit = block.credit,
-      display = block.display,
-      dots = block.dots;
+  var _ref$block = _ref.block,
+      optimized = _ref$block.optimized,
+      width = _ref$block.width,
+      height = _ref$block.height,
+      credit = _ref$block.credit,
+      display = _ref$block.display,
+      dots = _ref$block.dots;
 
   var _useState = React.useState({
     title: null,
@@ -513,7 +513,7 @@ var DotsOnImage = function DotsOnImage(_ref) {
 
   return React__default.createElement("div", {
     "data-testid": "dots-on-image",
-    className: makeClassName([[styles$5.root, true]])
+    className: styles$5.root
   }, React__default.createElement("div", {
     className: styles$5.dots
   }, dots.map(function (dot) {
@@ -545,7 +545,18 @@ var DotsOnImage = function DotsOnImage(_ref) {
     display: display
   })), popover.show && React__default.createElement("div", {
     className: styles$5.popover
-  }, React__default.createElement("div", {
+  }, React__default.createElement("button", {
+    className: styles$5.dismiss,
+    type: "button",
+    onClick: function onClick() {
+      return setPopover({
+        show: false
+      });
+    }
+  }, React__default.createElement(SvgSymbol, {
+    icon: "cross",
+    size: "unset"
+  })), React__default.createElement("div", {
     className: styles$5.popoverTitle
   }, popover.title), React__default.createElement("div", {
     className: styles$5.popoverBody,
@@ -995,33 +1006,18 @@ var DangerousHTML = function DangerousHTML(_ref) {
   });
 };
 
-var styles$h = {"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","youtube":"EmbedBlock-module_youtube__3gGQ5","vimeo":"EmbedBlock-module_vimeo__kpH1s","onetv":"EmbedBlock-module_onetv__3o33d","coub":"EmbedBlock-module_coub__38Mva","facebook_video":"EmbedBlock-module_facebook_video__1_M05","card":"EmbedBlock-module_card__KTbvp","slide":"EmbedBlock-module_slide__3cL3M","cc":"EmbedBlock-module_cc__1BQ5g","isInAnswer":"EmbedBlock-module_isInAnswer__tLlgs","picture":"EmbedBlock-module_picture__186q0","wrapper":"EmbedBlock-module_wrapper__33XvX"};
+var styles$h = {"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","card":"EmbedBlock-module_card__KTbvp","slide":"EmbedBlock-module_slide__3cL3M","cc":"EmbedBlock-module_cc__1BQ5g","isInAnswer":"EmbedBlock-module_isInAnswer__tLlgs","picture":"EmbedBlock-module_picture__186q0","wrapper":"EmbedBlock-module_wrapper__33XvX"};
 
-var EmbedBlock = function EmbedBlock(_ref) {
-  var block = _ref.block,
-      _ref$block = _ref.block,
-      data = _ref$block.data,
-      _ref$block$data = _ref$block.data,
-      display = _ref$block$data.display,
-      onlyOn = _ref$block$data.only_on,
-      provider = _ref$block$data.provider,
-      cc = _ref$block$data.cc,
-      optimized = _ref$block$data.optimized,
-      small = _ref$block$data.small_url,
-      large = _ref$block$data.large_url,
-      styleContext = _ref.styleContext,
-      children = _ref.children;
+var EmbedGif = function EmbedGif(_ref) {
+  var gif = _ref.gif,
+      mp4Url = _ref.mp4Url,
+      style = _ref.style;
 
   var _useState = React.useState(false),
-      isPopoverShown = _useState[0],
-      setIsPopoverShown = _useState[1];
-
-  var _useState2 = React.useState(false),
-      videoFrozen = _useState2[0],
-      setVideoFrozen = _useState2[1];
+      videoFrozen = _useState[0],
+      setVideoFrozen = _useState[1];
 
   var videoElem = React.useRef(null);
-  var wrapperElem = React.useRef(null);
 
   var handleVideoTouch = function handleVideoTouch() {
     videoElem.current.play();
@@ -1037,31 +1033,72 @@ var EmbedBlock = function EmbedBlock(_ref) {
   React.useEffect(function () {
     var video = videoElem.current;
 
-    if (block.type === 'gif' && video) {
-      var _viewportSize = viewportSize(),
-          viewportWidth = _viewportSize.width;
+    var _viewportSize = viewportSize(),
+        viewportWidth = _viewportSize.width;
 
-      enableInlineVideo(video);
+    enableInlineVideo(video);
 
-      if (viewportWidth >= MediaQuerySizes.MOBILE) {
-        video.setAttribute('autoplay', true);
-        video.play();
-      } else {
-        setVideoFrozen(true);
-        video.pause();
-        video.addEventListener('touchstart', handleVideoTouch);
-      }
-
-      video.addEventListener('error', handleVideoError);
+    if (viewportWidth >= MediaQuerySizes.MOBILE) {
+      video.setAttribute('autoplay', true);
+      video.play();
+    } else {
+      setVideoFrozen(true);
+      video.pause();
+      video.addEventListener('touchstart', handleVideoTouch);
     }
 
+    video.addEventListener('error', handleVideoError);
     return function () {
-      if (video) {
-        video.removeEventListener('touchstart', handleVideoTouch);
-        video.removeEventListener('error', handleVideoError);
-      }
+      video.removeEventListener('touchstart', handleVideoTouch);
+      video.removeEventListener('error', handleVideoError);
     };
   }, []);
+  return React__default.createElement("div", {
+    className: styles$h.figure
+  }, React__default.createElement("div", {
+    className: styles$h.objectWrap,
+    style: style,
+    "data-frozen": videoFrozen
+  }, React__default.createElement("video", {
+    playsInline: true,
+    muted: true,
+    loop: true,
+    autoPlay: true,
+    preload: "metadata",
+    "data-gif": gif,
+    ref: videoElem
+  }, React__default.createElement("source", {
+    src: "https://meduza.io" + mp4Url,
+    type: "video/mp4"
+  }))));
+};
+
+var EmbedBlock = function EmbedBlock(_ref) {
+  var block = _ref.block,
+      _ref$block = _ref.block,
+      data = _ref$block.data,
+      _ref$block$data = _ref$block.data,
+      html = _ref$block$data.html,
+      display = _ref$block$data.display,
+      onlyOn = _ref$block$data.only_on,
+      provider = _ref$block$data.provider,
+      cc = _ref$block$data.cc,
+      optimized = _ref$block$data.optimized,
+      small = _ref$block$data.small_url,
+      large = _ref$block$data.large_url,
+      gifUrl = _ref$block$data.gif_url,
+      mp4Url = _ref$block$data.mp4_url,
+      styleContext = _ref.styleContext,
+      children = _ref.children;
+
+  var _useState = React.useState(false),
+      isPopoverShown = _useState[0],
+      setIsPopoverShown = _useState[1];
+
+  var style = {};
+  var isProportional = block.data.height && block.data.width;
+  var fullWidthProviders = ['youtube', 'vimeo', 'onetv', 'coub', 'facebook_video'];
+  var mobileFullwidth = fullWidthProviders.indexOf(provider) || block.type === 'dots_on_image';
 
   var renderCC = function renderCC(context) {
     return React__default.createElement(MediaCaption, {
@@ -1072,30 +1109,14 @@ var EmbedBlock = function EmbedBlock(_ref) {
   };
 
   var renderEmbed = function renderEmbed(style) {
-    var html = block.data.html;
-
     switch (block.type) {
       case 'gif':
         {
-          return React__default.createElement("div", {
-            className: styles$h.figure
-          }, React__default.createElement("div", {
-            className: styles$h.objectWrap,
-            style: style,
-            ref: wrapperElem,
-            "data-frozen": videoFrozen
-          }, React__default.createElement("video", {
-            playsInline: true,
-            muted: true,
-            loop: true,
-            autoPlay: true,
-            preload: "metadata",
-            "data-gif": block.data.gif_url,
-            ref: videoElem
-          }, React__default.createElement("source", {
-            src: "https://meduza.io" + block.data.mp4_url,
-            type: "video/mp4"
-          }))));
+          return React__default.createElement(EmbedGif, {
+            gif: gifUrl,
+            mp4Url: mp4Url,
+            style: style
+          });
         }
 
       case 'image':
@@ -1125,6 +1146,15 @@ var EmbedBlock = function EmbedBlock(_ref) {
           }));
         }
 
+      case 'dots_on_image':
+        {
+          return React__default.createElement("div", {
+            className: styles$h.figure
+          }, React__default.createElement(DotsOnImage, {
+            block: data
+          }));
+        }
+
       default:
         {
           return React__default.createElement("div", {
@@ -1138,29 +1168,27 @@ var EmbedBlock = function EmbedBlock(_ref) {
           })));
         }
     }
-  };
+  }; // Убираем из контекста все, что не начинается с приставки isIn,
+  // чтобы не применились лишние модификаторы
+  // TODO: в w6 модификаторы должны передаваться явно
 
-  var style = {};
-  var isProportional; // @TODO: Разобраться зачем это было нужно
-  // const className = Object.keys(styleContext)
-  //   .filter(key => key.startsWith('isIn') && styles[key])
-  //   .reduce((acc, key) => {
-  //     acc.push([styles[key], true])
-  //     return acc
-  //   }, [])
 
-  /* eslint-disable react/no-array-index-key, no-mixed-operators */
+  var filteredContext = Object.keys(styleContext).filter(function (key) {
+    return key.startsWith('isIn') && styles$h[key];
+  }).reduce(function (acc, key) {
+    acc.push([styles$h[key], true]);
+    return acc;
+  }, []);
 
-  if (block.data.height && block.data.width) {
+  if (isProportional) {
     style.paddingBottom = block.data.height / block.data.width * 100 + "%";
     style.height = 0;
-    isProportional = true;
   }
 
-  var classNames = [[styles$h.root, true], [styles$h.cc, cc], [styles$h[display], !!display && styles$h[display]], [styles$h[provider], !!provider && !!styles$h[provider]], [styles$h[onlyOn], !!onlyOn && styles$h[onlyOn]], [styles$h.proportional, !!styles$h.proportional && isProportional]];
+  var classNames = [[styles$h.root, true], [styles$h.cc, cc], [styles$h[display], !!display && styles$h[display]], [styles$h[provider], !!provider && !!styles$h[provider]], [styles$h[onlyOn], !!onlyOn && styles$h[onlyOn]], [styles$h.mobileFullwidth, mobileFullwidth], [styles$h.proportional, isProportional]];
 
   if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$h);
+    classNames = makeStyleContext(classNames, filteredContext, styles$h);
   }
 
   return React__default.createElement("figure", {
@@ -1872,6 +1900,7 @@ var RenderBlocks = function RenderBlocks(_ref) {
     case 'embed_code':
     case 'game_embed':
     case 'image':
+    case 'dots_on_image':
     case 'gif':
       return React__default.createElement(EmbedBlockContainer, {
         block: block,