@meduza/ui-kit-2 0.1.41 → 0.1.44

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

@@ -19,6 +19,7 @@ export interface ImageProps {
         desktop: boolean;
     };
     ratio?: number;
+    styleContext?: string[] | string;
 }
 export interface PictureProps {
     source?: string[];

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

@@ -289,18 +289,20 @@ var Switcher = function Switcher(_ref) {
   }, children));
 };
 
+var makeStyleContext = function makeStyleContext(classNames, styleContext, styles) {
+  var context = Array.isArray(styleContext) ? styleContext.filter(function (ctx) {
+    return styles[ctx];
+  }).map(function (ctx) {
+    return [[styles[ctx]], true];
+  }) : [[styles[styleContext], !!styleContext && !!styles[styleContext]]];
+  return classNames.concat(context);
+};
+
 var BlockContext = /*#__PURE__*/React__default.createContext({
   lightBox: null
 });
 var BlockProvider = BlockContext.Provider;
 
-var viewportSize = (function () {
-  return {
-    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
-    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
-  };
-});
-
 var POST_MESSAGE_PREFIX = 'mdzKitMsg';
 
 var postMessage = function postMessage(category, element, action) {
@@ -316,29 +318,6 @@ var postMessage = function postMessage(category, element, action) {
   }
 };
 
-var MediaQuerySizes = {
-  MOBILE: 512,
-  PORTRAIT_TABLET: 768,
-  LANDSCAPE_TABLET: 1024,
-  DESKTOP: 1010,
-  WIDE_DESKTOP: 1200
-};
-var imageBreakpoints = {
-  325: '(min-width: 0)',
-  520: '(min-width: 325px)',
-  600: '(min-width: 600px)',
-  650: '(min-width: 650px)',
-  980: '(min-width: 1000px)',
-  1335: '(min-width: 1000px)'
-};
-var imageConditionalKeys = {
-  xs: [325],
-  superFull: [1335, 650, 520, 325],
-  full: [980, 650, 520, 325],
-  "default": [650, 520, 325],
-  narrow: [600, 325]
-};
-
 var styles$3 = {"root":"Lazy-module_root__2Z72l"};
 
 var Lazy = function Lazy(_ref) {
@@ -373,6 +352,29 @@ var Lazy = function Lazy(_ref) {
   }, visible && children);
 };
 
+var MediaQuerySizes = {
+  MOBILE: 512,
+  PORTRAIT_TABLET: 768,
+  LANDSCAPE_TABLET: 1024,
+  DESKTOP: 1010,
+  WIDE_DESKTOP: 1200
+};
+var imageBreakpoints = {
+  325: '(min-width: 0)',
+  520: '(min-width: 325px)',
+  600: '(min-width: 600px)',
+  650: '(min-width: 650px)',
+  980: '(min-width: 1000px)',
+  1335: '(min-width: 1000px)'
+};
+var imageConditionalKeys = {
+  xs: [325],
+  superFull: [1335, 650, 520, 325],
+  full: [980, 650, 520, 325],
+  "default": [650, 520, 325],
+  narrow: [600, 325]
+};
+
 var toCamel = function toCamel(s) {
   return s.replace(/([_][a-z])/gi, function (str) {
     return str.toUpperCase().replace('_', '');
@@ -431,7 +433,7 @@ var RenderPicture = function RenderPicture(_ref) {
   }));
 };
 
-var styles$4 = {"root":"Image-module_root__1vsA_","isLoaded":"Image-module_isLoaded__3XhU5","wrapper":"Image-module_wrapper__3fLjs","fullscreen":"Image-module_fullscreen__29apx"};
+var styles$4 = {"root":"Image-module_root__1vsA_","isLoaded":"Image-module_isLoaded__3XhU5","wrapper":"Image-module_wrapper__3fLjs","fullscreen":"Image-module_fullscreen__29apx","dark":"Image-module_dark__3o0nU"};
 
 var Image = function Image(_ref) {
   var alt = _ref.alt,
@@ -442,7 +444,8 @@ var Image = function Image(_ref) {
       source = _ref.source,
       lazy = _ref.lazy,
       fullscreen = _ref.fullscreen,
-      ratio = _ref.ratio;
+      ratio = _ref.ratio,
+      styleContext = _ref.styleContext;
 
   var _useContext = React.useContext(BlockContext),
       lightBox = _useContext.lightBox;
@@ -452,17 +455,7 @@ var Image = function Image(_ref) {
       setIsLoaded = _useState[1];
 
   var handleClick = function handleClick() {
-    if (!fullscreen || !lightBox || optimized && !optimized.original) {
-      return;
-    }
-
-    var _viewportSize = viewportSize(),
-        viewportWidth = _viewportSize.width;
-
-    var disableFullscreenDesktop = viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.desktop;
-    var disableFullscreenMobile = viewportWidth < MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.mobile;
-
-    if (disableFullscreenDesktop || disableFullscreenMobile) {
+    if (!lightBox || optimized && !optimized.original) {
       return;
     }
 
@@ -479,8 +472,14 @@ var Image = function Image(_ref) {
   /* fallback w325 url until w6 was released */
 
   var fallbackSource = source && source[0] || optimized.w325 && optimized.w325['1x'] || optimized.original;
+  var classNames = [[styles$4.root, true], [styles$4.isLoaded, isLoaded], [styles$4.fullscreen, fullscreen && fullscreen.desktop]];
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles$4);
+  }
+
   return React__default.createElement("div", {
-    className: makeClassName([[styles$4.root, true], [styles$4.isLoaded, isLoaded], [styles$4.fullscreen, fullscreen && fullscreen.desktop]]),
+    className: makeClassName(classNames),
     style: blockStyles,
     "data-testid": "image"
   }, React__default.createElement("div", {
@@ -627,6 +626,13 @@ var Footnote = function Footnote(_ref) {
   }, children));
 };
 
+var viewportSize = (function () {
+  return {
+    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+  };
+});
+
 var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","isVisible":"DotsOnImage-module_isVisible__Wqqqt","marker":"DotsOnImage-module_marker__lH5cP","show":"DotsOnImage-module_show__2TMBv","dot":"DotsOnImage-module_dot__H1wua","isActive":"DotsOnImage-module_isActive__3hh31","popover":"DotsOnImage-module_popover__35Cpj","isRight":"DotsOnImage-module_isRight__2RsJe","isTop":"DotsOnImage-module_isTop__3zmSK","isLeft":"DotsOnImage-module_isLeft__3quc9","isBottom":"DotsOnImage-module_isBottom__3Nk1T"};
 
 var DotsOnImage = function DotsOnImage(_ref) {
@@ -800,15 +806,6 @@ var DotsOnImage = function DotsOnImage(_ref) {
   })))));
 };
 
-var makeStyleContext = function makeStyleContext(classNames, styleContext, styles) {
-  var context = Array.isArray(styleContext) ? styleContext.filter(function (ctx) {
-    return styles[ctx];
-  }).map(function (ctx) {
-    return [[styles[ctx]], true];
-  }) : [[styles[styleContext], !!styleContext && !!styles[styleContext]]];
-  return classNames.concat(context);
-};
-
 var styles$8 = {"root":"Tag-module_root__3IqWC","small":"Tag-module_small__2IAb7","large":"Tag-module_large__22z_o","dark":"Tag-module_dark__sgnt1","light":"Tag-module_light__1zUhp","gold":"Tag-module_gold__2ksA7","gray":"Tag-module_gray__mGAO_","inherit":"Tag-module_inherit__2QB5U","is1to1":"Tag-module_is1to1__3EDbC","is1to2":"Tag-module_is1to2__3xbC6","isInSuperBlock":"Tag-module_isInSuperBlock__38JE0","is1to3":"Tag-module_is1to3__3j5K-","is1to4":"Tag-module_is1to4__2vq4r","slide":"Tag-module_slide__2nMDw","game":"Tag-module_game__3j5yG","richRelated":"Tag-module_richRelated__2vbQQ","card":"Tag-module_card__1EAeF","live":"Tag-module_live__rwXuR","episode":"Tag-module_episode__3o6gg","podcast":"Tag-module_podcast__VPoll","rich":"Tag-module_rich__2URd9","isInDynamicBlock":"Tag-module_isInDynamicBlock__1YM9I","mobile":"Tag-module_mobile__QQxuv","desktop":"Tag-module_desktop__1Bjsy"};
 
 var Tag = function Tag(_ref) {
@@ -1282,7 +1279,8 @@ var EmbedBlock = function EmbedBlock(_ref) {
             height: block.data.height,
             alt: block.data.caption,
             display: block.data.display,
-            lazy: block.data.lazy
+            lazy: block.data.lazy,
+            styleContext: styleContext
           }));
         }