@bigbinary/neeto-site-blocks 1.2.8 → 1.2.9

package/dist/index.cjs.js

@@ -40968,24 +40968,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) {
@@ -41002,50 +41006,21 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
       "text-center": !src || position === POSITIONS.BOTTOM.label || position === POSITIONS.TOP.label
     });
   };
-  return /*#__PURE__*/React__default["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["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["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["default"].createElement(SwiperSlide, {
-      className: classnames("my-auto", className),
-      key: getUniqueKey(content.title, index)
-    }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+    var isEmptyContent = !content.prefixTitle && !content.title && !content.description;
+    return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
       isRootWrapper: true,
       className: classnames("neeto-site-block-wrapper", baseClasses),
       design: {
         paddingHorizontal: design.body.paddingHorizontal
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: contentBaseClasses(_objectSpread({}, media))
+      className: contentBaseClasses(_objectSpread({
+        isEmptyContent: isEmptyContent
+      }, media))
     }, /*#__PURE__*/React__default["default"].createElement(Typography$1, {
       isTitle: true,
       component: "h3",
@@ -41068,7 +41043,9 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
         style: button.type === "primary" ? design.primaryButtons : design.secondaryButtons
       }, button, otherProps));
     }))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: mediaBaseClasses(_objectSpread({}, media))
+      className: mediaBaseClasses(_objectSpread(_objectSpread({}, media), {}, {
+        isEmptyContent: isEmptyContent
+      }))
     }, /*#__PURE__*/React__default["default"].createElement(Media, {
       design: design.media,
       isEmbedded: media.isEmbedded,
@@ -41077,7 +41054,49 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
       className: classnames({
         "slider-image": media.position !== POSITIONS.BOTTOM.label || media.position !== POSITIONS.TOP.label
       })
-    }))));
+    })));
+  };
+  return /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["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["default"].createElement(SwiperSlide, {
+      className: classnames("my-auto", className),
+      key: getUniqueKey(content.title, index)
+    }, renderHeroWithMedia({
+      content: content,
+      buttons: buttons,
+      media: media
+    }));
   })), /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
     Icon: ArrowRightS$1,
     design: design.navigationButtons,
@@ -41086,6 +41105,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: {}
   }));
 };