@meduza/ui-kit-2 0.1.10 → 0.1.12

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

@@ -1,8 +1,12 @@
+/// <reference types="react" />
 import { OptimizedImageItem } from '../Image/Image.types';
 export interface PopoverData {
     title?: string;
     body?: string;
     id?: string;
+    align?: 'isTop' | 'isBottom';
+    side?: 'isLeft' | 'isRight';
+    style?: React.CSSProperties;
     show: boolean;
 }
 export interface SingleDot {

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

@@ -19,7 +19,10 @@ export interface ImageProps {
     height?: number;
     source?: string[];
     lazy?: boolean;
-    fullscreen?: boolean;
+    fullscreen?: {
+        mobile: boolean;
+        desktop: boolean;
+    };
     ratio?: number;
 }
 export interface PictureProps {

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

@@ -440,10 +440,17 @@ var Image = function Image(_ref) {
       lightBox = _useContext.lightBox;
 
   var handleClick = function handleClick() {
+    if (!fullscreen || !lightBox || optimized && !optimized.original) {
+      return;
+    }
+
     var _viewportSize = viewportSize(),
         viewportWidth = _viewportSize.width;
 
-    if (optimized && !optimized.original || !lightBox || viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen) {
+    var disableFullscreenDesktop = viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.desktop;
+    var disableFullscreenMobile = viewportWidth < MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.mobile;
+
+    if (disableFullscreenDesktop || disableFullscreenMobile) {
       return;
     }
 
@@ -461,7 +468,7 @@ var Image = function Image(_ref) {
 
   var fallbackSource = source && source[0] || optimized.w325 && optimized.w325['1x'] || optimized.original;
   return React__default.createElement("div", {
-    className: makeClassName([[styles$4.root, true], [styles$4.fullscreen, fullscreen]]),
+    className: makeClassName([[styles$4.root, true], [styles$4.fullscreen, fullscreen && fullscreen.desktop]]),
     style: blockStyles,
     "data-testid": "image"
   }, React__default.createElement("div", {
@@ -604,7 +611,7 @@ var Footnote = function Footnote(_ref) {
   }, children));
 };
 
-var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","dot":"DotsOnImage-module_dot__H1wua","popover":"DotsOnImage-module_popover__35Cpj","popoverTitle":"DotsOnImage-module_popoverTitle__343d8","popoverBody":"DotsOnImage-module_popoverBody__2MSn7","popoverText":"DotsOnImage-module_popoverText__3v02w","dismiss":"DotsOnImage-module_dismiss__1EWXd"};
+var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","dot":"DotsOnImage-module_dot__H1wua","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","popoverTitle":"DotsOnImage-module_popoverTitle__343d8","popoverBody":"DotsOnImage-module_popoverBody__2MSn7","popoverText":"DotsOnImage-module_popoverText__3v02w","dismiss":"DotsOnImage-module_dismiss__1EWXd"};
 
 var DotsOnImage = function DotsOnImage(_ref) {
   var _ref$block = _ref.block,
@@ -626,11 +633,20 @@ var DotsOnImage = function DotsOnImage(_ref) {
 
   var handleDotClick = function handleDotClick(dot) {
     var shouldShow = dot.id !== popover.id;
+    var side = dot.position.x > 50 ? 'isLeft' : 'isRight';
+    var align = dot.position.y > 50 ? 'isBottom' : 'isTop';
+    var style = {
+      top: dot.position.y + "%",
+      left: dot.position.x + "%"
+    };
     setPopover({
       title: dot.title,
       body: dot.body,
       show: shouldShow,
-      id: shouldShow ? dot.id : null
+      id: shouldShow ? dot.id : null,
+      style: style,
+      side: side,
+      align: align
     });
   };
 
@@ -653,7 +669,6 @@ var DotsOnImage = function DotsOnImage(_ref) {
         return handleDotClick(dot);
       }
     }, dot.icon.type === 'svg' && React__default.createElement("div", {
-      className: styles$7.icon,
       dangerouslySetInnerHTML: {
         __html: dot.icon.svg_string
       }
@@ -665,9 +680,14 @@ var DotsOnImage = function DotsOnImage(_ref) {
     width: width,
     height: height,
     alt: credit,
-    display: display
+    display: display,
+    fullscreen: {
+      mobile: false,
+      desktop: false
+    }
   })), popover.show && React__default.createElement(React__default.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? React__default.createElement("div", {
-    className: styles$7.popover
+    className: makeClassName([[styles$7.popover, true], [styles$7[popover.side], !!popover.side], [styles$7[popover.align], !!popover.align]]),
+    style: popover.style
   }, React__default.createElement(Footnote, {
     onClose: function onClose() {
       setPopover({
@@ -1163,7 +1183,10 @@ var EmbedBlock = function EmbedBlock(_ref) {
           return React__default.createElement("div", {
             className: styles$i.figure
           }, (small || optimized) && React__default.createElement(Image, {
-            fullscreen: block.data.fullscreen,
+            fullscreen: {
+              desktop: block.data.fullscreen,
+              mobile: true
+            },
             source: !optimized && [small, large],
             optimized: block.data.optimized,
             width: block.data.width,