@bigbinary/neeto-site-blocks 1.2.7 → 1.2.9

package/dist/index.js

@@ -40572,14 +40572,20 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
       "neeto-site-sticky-header": position === "sticky",
       "neeto-site-sticky-header--scroll": !isHeadingWrapperVisible
     }, className)
-  }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
-    design: design.logo,
-    src: properties.logo.src,
+  }, /*#__PURE__*/React__default.createElement(Link, _extends$2({
+    action: properties.logo.action,
+    to: properties.logo.to,
     className: classnames("col-start-2 ml-3 flex max-h-8 justify-start sm:ml-0 sm:max-h-10 lg:col-span-3 lg:col-start-1 lg:max-h-14", {
       "col-span-10": isEmpty(buttons),
       "col-span-3 sm:col-span-4 sm:col-start-2": isNotEmpty(buttons)
-    })
-  }), /*#__PURE__*/React__default.createElement("div", {
+    }),
+    icon: function icon() {
+      return /*#__PURE__*/React__default.createElement(StyledImage$1, {
+        design: design.logo,
+        src: properties.logo.src
+      });
+    }
+  }, otherProps)), /*#__PURE__*/React__default.createElement("div", {
     className: classnames("col-span-5 col-start-4 hidden items-center justify-center gap-x-6 lg:flex", {
       "col-span-9 sm:justify-end": isEmpty(buttons)
     })
@@ -40659,11 +40665,17 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
       key: getUniqueKey(link.label, index),
       style: design.links
     }, link, otherProps));
-  })), /*#__PURE__*/React__default.createElement(StyledImage$1, {
+  })), /*#__PURE__*/React__default.createElement(Link, _extends$2({
+    action: properties.logo.action,
     className: "col-span-6 col-start-4 m-auto flex max-h-8 justify-center sm:col-span-4 sm:col-start-5 sm:max-h-10 lg:col-span-3 lg:col-start-6 lg:max-h-14",
-    design: design.logo,
-    src: properties.logo.src
-  }), /*#__PURE__*/React__default.createElement("div", {
+    to: properties.logo.to,
+    icon: function icon() {
+      return /*#__PURE__*/React__default.createElement(StyledImage$1, {
+        design: design.logo,
+        src: properties.logo.src
+      });
+    }
+  }, otherProps)), /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-5 col-start-8 hidden justify-end sm:col-span-3 sm:col-start-10 sm:flex"
   }, properties.icons.map(function (_icon, index) {
     return /*#__PURE__*/React__default.createElement(Link, _extends$2({
@@ -40755,17 +40767,24 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
       "col-span-10": isEmpty(buttons),
       "col-span-4": isNotEmpty(buttons)
     })
-  }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
-    className: "max-h-8 sm:max-h-10 lg:max-h-14",
-    design: design.logo,
-    src: properties.logo.src
-  }), /*#__PURE__*/React__default.createElement(Typography$1, {
-    component: "p",
-    style: design.logoTitle,
-    className: classnames({
-      "hidden sm:flex": properties.logo.src
-    })
-  }, properties.logo.title)), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(Link, _extends$2({
+    action: properties.logo.action,
+    className: "flex w-full gap-x-2",
+    to: properties.logo.to,
+    icon: function icon() {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledImage$1, {
+        className: "max-h-8 sm:max-h-10 lg:max-h-14",
+        design: design.logo,
+        src: properties.logo.src
+      }), /*#__PURE__*/React__default.createElement(Typography$1, {
+        component: "p",
+        style: design.logoTitle,
+        className: classnames({
+          "hidden sm:flex": properties.logo.src
+        })
+      }, properties.logo.title));
+    }
+  }, otherProps))), /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-6 col-start-7 flex items-center justify-end gap-x-6 sm:col-span-5 sm:col-start-8 lg:col-span-7 lg:col-start-6"
   }, properties.links.map(function (link, index) {
     return /*#__PURE__*/React__default.createElement(Link, _extends$2({
@@ -40903,24 +40922,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) {
@@ -40937,50 +40960,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",
@@ -41003,7 +40997,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,
@@ -41012,7 +41008,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,
@@ -41021,6 +41059,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: {}
   }));
 };