@meduza/ui-kit-2 0.1.4 → 0.1.6

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 {

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

@@ -481,7 +481,7 @@ 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 _ref$block = _ref.block,
@@ -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,7 +1006,7 @@ 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 EmbedGif = function EmbedGif(_ref) {
   var gif = _ref.gif,
@@ -1084,6 +1095,11 @@ var EmbedBlock = function EmbedBlock(_ref) {
       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, {
       credit: data.credit,
@@ -1132,9 +1148,11 @@ var EmbedBlock = function EmbedBlock(_ref) {
 
       case 'dots_on_image':
         {
-          return React__default.createElement(DotsOnImage, {
+          return React__default.createElement("div", {
+            className: styles$h.figure
+          }, React__default.createElement(DotsOnImage, {
             block: data
-          });
+          }));
         }
 
       default:
@@ -1152,25 +1170,23 @@ var EmbedBlock = function EmbedBlock(_ref) {
     }
   };
 
-  var style = {}; // @TODO: Разобраться зачем это было нужно
-  // const className = Object.keys(styleContext)
-  //   .filter(key => key.startsWith('isIn') && styles[key])
-  //   .reduce((acc, key) => {
-  //     acc.push([styles[key], true])
-  //     return acc
-  //   }, [])
-
-  var isProportional = block.data.height && block.data.width;
-
   if (isProportional) {
     style.paddingBottom = block.data.height / block.data.width * 100 + "%";
     style.height = 0;
   }
 
-  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, isProportional && !!styles$h.proportional]];
+  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]]; // Убираем из контекста все, что не начинается с приставки isIn,
+  // чтобы не применились лишние модификаторы
+  // TODO: в w6 модификаторы должны передаваться явно
 
   if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$h);
+    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;
+    }, []);
+    classNames = makeStyleContext(classNames, filteredContext, styles$h);
   }
 
   return React__default.createElement("figure", {
@@ -2159,10 +2175,12 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
 
     case 'spoiler':
       {
-        return React__default.createElement(Spoiler, {
+        return React__default.createElement(BlockProvider, {
+          value: context
+        }, React__default.createElement(Spoiler, {
           block: block,
           styleContext: styleContext
-        });
+        }));
       }
 
     case 'cover':