@bigbinary/neeto-site-blocks 1.2.8 → 1.2.10

package/dist/index.js

@@ -92,7 +92,9 @@ var ArrowButton = function ArrowButton(_ref) {
     isStart = _ref.isStart,
     onClick = _ref.onClick,
     isActive = _ref.isActive,
-    design = _ref.design;
+    design = _ref.design,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
   var borderColor = isActive ? (design === null || design === void 0 ? void 0 : design.navigationActiveColor) || "#1F2433" : (design === null || design === void 0 ? void 0 : design.navigationInactiveColor) || "#ccc";
   var StyledIcon = styled(Icon)(function () {
     return {
@@ -100,12 +102,12 @@ var ArrowButton = function ArrowButton(_ref) {
     };
   });
   return /*#__PURE__*/React__default.createElement("button", {
+    onClick: onClick,
     className: classnames("col-span-1", {
       "col-start-1": isStart,
       "col-start-12 flex justify-end": !isStart,
       "cursor-default": !isActive
-    }),
-    onClick: onClick
+    }, className)
   }, /*#__PURE__*/React__default.createElement(StyledIcon, {
     className: "rounded-full border p-1",
     size: 27,
@@ -20500,7 +20502,8 @@ var CardsInGridView = function CardsInGridView(_ref) {
     var title = _ref2.title,
       description = _ref2.description,
       imageUrl = _ref2.imageUrl,
-      href = _ref2.href;
+      href = _ref2.href,
+      style = _ref2.style;
     return /*#__PURE__*/React__default.createElement(MotionWrapper, {
       enableAnimation: enableAnimation,
       design: design.card,
@@ -20513,7 +20516,7 @@ var CardsInGridView = function CardsInGridView(_ref) {
         return href && window.open(href, "_blank");
       }
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
-      design: design.cardImage,
+      design: mergeRight(design.cardImage, style),
       src: imageUrl,
       className: classnames("mx-auto", {
         "max-h-40": mode === "landscape",
@@ -40350,13 +40353,13 @@ var GalleryClassic = function GalleryClassic(_ref) {
     src = properties.backgroundImage.src;
   var baseClasses = "grid grid-cols-12 items-center gap-y-8";
   return /*#__PURE__*/React__default.createElement(BlockWrapper, {
+    className: className,
+    enableAnimation: enableAnimation,
+    id: id,
     backgroundImage: mergeLeft({
       src: src
     }, design.backgroundImage),
-    className: className,
     design: design.body,
-    enableAnimation: enableAnimation,
-    id: id,
     nestedClassName: baseClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-12 col-start-1 sm:col-span-6 sm:col-start-4"
@@ -40370,6 +40373,7 @@ var GalleryClassic = function GalleryClassic(_ref) {
   }, description)), /*#__PURE__*/React__default.createElement(ArrowButton, {
     isStart: true,
     Icon: ArrowLeft$1,
+    className: "hidden sm:flex",
     design: design.navigationButtons,
     isActive: activeIndex > 0,
     onClick: function onClick() {
@@ -40379,8 +40383,13 @@ var GalleryClassic = function GalleryClassic(_ref) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "ns-gallery-with-multiple-images col-span-10 col-start-2"
   }, /*#__PURE__*/React__default.createElement(Swiper, {
+    freeMode: true,
+    grabCursor: true,
     breakpointsBase: "container",
-    modules: [Pagination],
+    modules: [Pagination, Mousewheel, freeMode],
+    mousewheel: {
+      sensitivity: 0.5
+    },
     pagination: {
       clickable: true
     },
@@ -40400,17 +40409,21 @@ var GalleryClassic = function GalleryClassic(_ref) {
   }, images.map(function (_ref2, index) {
     var src = _ref2.src,
       alt = _ref2.alt,
-      title = _ref2.title;
+      title = _ref2.title,
+      style = _ref2.style;
     return /*#__PURE__*/React__default.createElement(SwiperSlide, {
+      className: "swiper__wrapper",
       key: getUniqueKey(src, title, index)
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
       alt: alt,
-      className: "sliding-image",
       src: src,
-      title: title
+      title: title,
+      className: "sliding-image",
+      design: style
     }));
   }))), /*#__PURE__*/React__default.createElement(ArrowButton, {
     Icon: ArrowRight$1,
+    className: "hidden sm:flex",
     design: design.navigationButtons,
     isActive: activeIndex < images.length - 2,
     onClick: function onClick() {
@@ -40480,7 +40493,8 @@ var GalleryWithAutoplay = function GalleryWithAutoplay(_ref) {
   }, images.map(function (_ref2, index) {
     var src = _ref2.src,
       alt = _ref2.alt,
-      title = _ref2.title;
+      title = _ref2.title,
+      style = _ref2.style;
     return /*#__PURE__*/React__default.createElement(SwiperSlide, {
       className: "swiper__wrapper",
       key: getUniqueKey(src, title, index)
@@ -40488,7 +40502,8 @@ var GalleryWithAutoplay = function GalleryWithAutoplay(_ref) {
       alt: alt,
       src: src,
       title: title,
-      className: "sliding-image"
+      className: "sliding-image",
+      design: style
     }));
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "ns-gallery-with-sliding-images sm:col-span-6 sm:col-start-4"
@@ -40922,24 +40937,28 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
   var baseClasses = "grid grid-cols-12 items-center gap-y-4 sm:gap-x-4 grid-flow-row-dense";
   var contentBaseClasses = function contentBaseClasses(_ref2) {
     var src = _ref2.src,
-      position = _ref2.position;
+      position = _ref2.position,
+      isEmptyContent = _ref2.isEmptyContent;
     return classnames("sm:col-span-6 col-span-12", {
       "sm:col-start-1": src && position === POSITIONS.RIGHT.label,
       "sm:col-span-8 sm:col-start-3": src && position === POSITIONS.BOTTOM.label,
       "sm:col-span-12 sm:col-start-1 flex flex-col justify-center order-2": src && position === POSITIONS.TOP.label,
       "sm:col-start-7": src && position === POSITIONS.LEFT.label,
-      "flex flex-col justify-center sm:col-span-12": !src
+      "flex flex-col justify-center sm:col-span-12": !src,
+      hidden: isEmptyContent
     });
   };
   var mediaBaseClasses = function mediaBaseClasses(_ref3) {
     var src = _ref3.src,
-      position = _ref3.position;
-    return classnames("sm:col-span-5 col-span-12 flex justify-center", {
-      "sm:col-start-1": src && position === POSITIONS.LEFT.label,
-      "sm:col-start-8": src && position === POSITIONS.RIGHT.label,
-      "sm:col-span-8 sm:col-start-3": src && position === POSITIONS.BOTTOM.label,
-      "sm:col-span-8 sm:col-start-3 flex justify-center order-1": src && position === POSITIONS.TOP.label,
-      hidden: !src
+      position = _ref3.position,
+      isEmptyContent = _ref3.isEmptyContent;
+    return classnames("col-span-12 flex justify-center", {
+      "sm:col-span-5 sm:col-start-1": src && position === POSITIONS.LEFT.label && !isEmptyContent,
+      "sm:col-span-5 sm:col-start-8": src && position === POSITIONS.RIGHT.label && !isEmptyContent,
+      "sm:col-span-5 sm:col-span-8 sm:col-start-3": src && position === POSITIONS.BOTTOM.label && !isEmptyContent,
+      "sm:col-span-5 sm:col-span-8 sm:col-start-3 flex justify-center order-1": src && position === POSITIONS.TOP.label && !isEmptyContent,
+      hidden: !src,
+      "flex justify-center": isEmptyContent
     });
   };
   var buttonBaseClasses = function buttonBaseClasses(_ref4) {
@@ -40956,50 +40975,21 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
       "text-center": !src || position === POSITIONS.BOTTOM.label || position === POSITIONS.TOP.label
     });
   };
-  return /*#__PURE__*/React__default.createElement(MotionWrapper, {
-    enableAnimation: enableAnimation,
-    id: id,
-    backgroundImage: mergeLeft({
-      src: src
-    }, design.backgroundImage),
-    className: "flex items-center justify-between gap-x-2",
-    design: mergeDesign(design.body, 24)
-  }, /*#__PURE__*/React__default.createElement(ArrowButton, {
-    isStart: true,
-    Icon: ArrowLeftS$1,
-    design: design.navigationButtons,
-    isActive: activeIndex > 0,
-    onClick: function onClick() {
-      var _swiperRef$current;
-      return (_swiperRef$current = swiperRef.current) === null || _swiperRef$current === void 0 ? void 0 : _swiperRef$current.slidePrev();
-    }
-  }), /*#__PURE__*/React__default.createElement(Swiper, {
-    className: "ns-hero-with-slider",
-    modules: [Pagination],
-    pagination: {
-      clickable: true
-    },
-    onSlideChange: function onSlideChange(swiper) {
-      return setActiveIndex(swiper.activeIndex);
-    },
-    onSwiper: function onSwiper(swiper) {
-      swiperRef.current = swiper;
-    }
-  }, slides.map(function (_ref6, index) {
+  var renderHeroWithMedia = function renderHeroWithMedia(_ref6) {
     var content = _ref6.content,
       buttons = _ref6.buttons,
       media = _ref6.media;
-    return /*#__PURE__*/React__default.createElement(SwiperSlide, {
-      className: classnames("my-auto", className),
-      key: getUniqueKey(content.title, index)
-    }, /*#__PURE__*/React__default.createElement(StyledWrapper, {
+    var isEmptyContent = !content.prefixTitle && !content.title && !content.description;
+    return /*#__PURE__*/React__default.createElement(StyledWrapper, {
       isRootWrapper: true,
       className: classnames("neeto-site-block-wrapper", baseClasses),
       design: {
         paddingHorizontal: design.body.paddingHorizontal
       }
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: contentBaseClasses(_objectSpread({}, media))
+      className: contentBaseClasses(_objectSpread({
+        isEmptyContent: isEmptyContent
+      }, media))
     }, /*#__PURE__*/React__default.createElement(Typography$1, {
       isTitle: true,
       component: "h3",
@@ -41022,7 +41012,9 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
         style: button.type === "primary" ? design.primaryButtons : design.secondaryButtons
       }, button, otherProps));
     }))), /*#__PURE__*/React__default.createElement("div", {
-      className: mediaBaseClasses(_objectSpread({}, media))
+      className: mediaBaseClasses(_objectSpread(_objectSpread({}, media), {}, {
+        isEmptyContent: isEmptyContent
+      }))
     }, /*#__PURE__*/React__default.createElement(Media, {
       design: design.media,
       isEmbedded: media.isEmbedded,
@@ -41031,7 +41023,49 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
       className: classnames({
         "slider-image": media.position !== POSITIONS.BOTTOM.label || media.position !== POSITIONS.TOP.label
       })
-    }))));
+    })));
+  };
+  return /*#__PURE__*/React__default.createElement(MotionWrapper, {
+    enableAnimation: enableAnimation,
+    id: id,
+    backgroundImage: mergeLeft({
+      src: src
+    }, design.backgroundImage),
+    className: "flex items-center justify-between gap-x-2",
+    design: mergeDesign(design.body, 24)
+  }, slides.length > 1 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ArrowButton, {
+    isStart: true,
+    Icon: ArrowLeftS$1,
+    design: design.navigationButtons,
+    isActive: activeIndex > 0,
+    onClick: function onClick() {
+      var _swiperRef$current;
+      return (_swiperRef$current = swiperRef.current) === null || _swiperRef$current === void 0 ? void 0 : _swiperRef$current.slidePrev();
+    }
+  }), /*#__PURE__*/React__default.createElement(Swiper, {
+    className: "ns-hero-with-slider",
+    modules: [Pagination],
+    pagination: {
+      clickable: true
+    },
+    onSlideChange: function onSlideChange(swiper) {
+      return setActiveIndex(swiper.activeIndex);
+    },
+    onSwiper: function onSwiper(swiper) {
+      swiperRef.current = swiper;
+    }
+  }, slides.map(function (_ref7, index) {
+    var content = _ref7.content,
+      buttons = _ref7.buttons,
+      media = _ref7.media;
+    return /*#__PURE__*/React__default.createElement(SwiperSlide, {
+      className: classnames("my-auto", className),
+      key: getUniqueKey(content.title, index)
+    }, renderHeroWithMedia({
+      content: content,
+      buttons: buttons,
+      media: media
+    }));
   })), /*#__PURE__*/React__default.createElement(ArrowButton, {
     Icon: ArrowRightS$1,
     design: design.navigationButtons,
@@ -41040,6 +41074,10 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
       var _swiperRef$current2;
       return (_swiperRef$current2 = swiperRef.current) === null || _swiperRef$current2 === void 0 ? void 0 : _swiperRef$current2.slideNext();
     }
+  })) : renderHeroWithMedia(slides[0] || {
+    content: {},
+    buttons: [],
+    media: {}
   }));
 };