@bigbinary/neeto-site-blocks 1.10.12 → 1.10.14

package/dist/index.cjs.js

@@ -11,8 +11,8 @@ var _defineProperty$1 = require('@babel/runtime/helpers/defineProperty');
 var neetoCist = require('@bigbinary/neeto-cist');
 var ramda = require('ramda');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var reactFrameComponent = require('react-frame-component');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
@@ -13952,6 +13952,8 @@ var useElementClick = function useElementClick(_ref) {
     index = _ref$index === void 0 ? undefined : _ref$index,
     _ref$isTitle = _ref.isTitle,
     isTitle = _ref$isTitle === void 0 ? false : _ref$isTitle;
+  var _useFrame = reactFrameComponent.useFrame(),
+    iframeDocument = _useFrame.document;
   var getScrollableParent = function getScrollableParent(element) {
     if (!element) return null;
     var isScrollable = function isScrollable(el) {
@@ -13981,11 +13983,24 @@ var useElementClick = function useElementClick(_ref) {
     };
     scrollableParent.scrollTo(scrollOptions);
   };
+  var addHighlightClass = function addHighlightClass(id) {
+    var previousHighlightedElement = iframeDocument === null || iframeDocument === void 0 ? void 0 : iframeDocument.querySelector(".persist-highlight");
+    if (previousHighlightedElement) {
+      previousHighlightedElement.classList.remove("persist-highlight");
+    }
+
+    // Add the 'persist-highlight' class to the target element
+    var targetElement = iframeDocument === null || iframeDocument === void 0 ? void 0 : iframeDocument.getElementById(id);
+    if (targetElement) {
+      targetElement.classList.add("persist-highlight");
+    }
+  };
 
   // This function is used as the click handler for "Link" and "Button" elements in the to highlight the element
   var handleClick = function handleClick(event) {
     event.preventDefault();
     if (!id) return;
+    addHighlightClass(id);
     setTimeout(function () {
       var accordion = document.querySelector("[data-accordion-id=".concat(id === null || id === void 0 ? void 0 : id.replace(/-[^-]+$/, ""), "]"));
       var element = document.querySelector("[data-element-id=".concat(id, "]"));
@@ -14026,6 +14041,8 @@ var useElementClick = function useElementClick(_ref) {
 
   // This function is used as the click handler for "Typography" to highlight the element
   var handleTitleClick = function handleTitleClick() {
+    if (!id) return;
+    addHighlightClass(id);
     setTimeout(function () {
       if (!document) return;
       var accordion = document.querySelector("[data-accordion-id=".concat(id === null || id === void 0 ? void 0 : id.replace(/-[^-]+$/, ""), "]"));
@@ -14075,7 +14092,9 @@ var useElementClick = function useElementClick(_ref) {
 
   // This function is used as the click handler for "Image" elements to highlight the element`
   var handleImageClick = function handleImageClick(event) {
+    if (!id) return;
     event.preventDefault();
+    addHighlightClass(id);
     setTimeout(function () {
       if (neetoCist.isPresent(index)) {
         var accordion = document.querySelector("[data-accordion-id=".concat(id === null || id === void 0 ? void 0 : id.replace(/-[^-]+$/, ""), "]"));
@@ -14161,6 +14180,7 @@ var StyledImageWithWrapper = function StyledImageWithWrapper(_ref2) {
     }),
     handleImageClick = _useElementClick.handleImageClick;
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+    id: id,
     className: classnames__default["default"]("flex justify-center", _defineProperty__default["default"]({
       "neeto-site-highlight__element": disableButtonAndLinks && !isAddNewPane
     }, wrapperClassName, wrapperClassName)),
@@ -15394,7 +15414,8 @@ var Button = function Button(_ref) {
     href: to !== null && to !== void 0 ? to : "",
     rel: "noreferrer",
     isButton: true,
-    onClick: disableButtonAndLinks && handleClick
+    onClick: disableButtonAndLinks && handleClick,
+    id: id
   };
   if (action === "external") {
     return /*#__PURE__*/React__default["default"].createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
@@ -15510,7 +15531,8 @@ var LinkElement = function LinkElement(_ref) {
     percentage: 0.1,
     isHighlighted: isHighlighted,
     disableHovering: disableHovering,
-    onClick: handleLinkClick
+    onClick: handleLinkClick,
+    id: id
   }, otherProps);
   if (action === "external") {
     return /*#__PURE__*/React__default["default"].createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
@@ -15849,7 +15871,7 @@ var Typography = function Typography(_ref) {
     id: id,
     as: isTitle ? component : COMPONENTS.div,
     design: style,
-    className: classnames__default["default"]("neeto-site-typography break-words", className, {
+    className: classnames__default["default"]("neeto-site-typography text-wrap", className, {
       "neeto-site-highlight__element": disableButtonAndLinks && !isAddNewPane
     }),
     onClick: !isAddNewPane && handleTitleClick
@@ -21358,7 +21380,7 @@ var CardsWithImage = function CardsWithImage(_ref) {
     isAddMoreRequired = properties.isAddMoreRequired,
     src = properties.backgroundImage.src;
   var baseClasses = "grid grid-cols-12 gap-y-6 items-center ns-card";
-  var gridBaseClasses = "relative sm:col-span-6 lg:col-span-4 col-span-12  h-40 justify-center items-center ns-card-animation cursor-pointer";
+  var gridBaseClasses = "relative sm:col-span-6 lg:col-span-4 col-span-12  justify-center items-center ns-card-animation cursor-pointer";
   return /*#__PURE__*/React__default["default"].createElement(BlockWrapper, {
     className: className,
     enableAnimation: enableAnimation,
@@ -21375,7 +21397,7 @@ var CardsWithImage = function CardsWithImage(_ref) {
     id: "cards-with-image-title",
     style: design.title
   }, otherProps), title), /*#__PURE__*/React__default["default"].createElement(Typography$1, _extends__default["default"]({
-    className: "col-span-12 sm:col-span-8 sm:col-start-3",
+    className: "col-span-12",
     id: "cards-with-image-description",
     style: design.description
   }, otherProps), description), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21415,7 +21437,7 @@ var CardsWithImage = function CardsWithImage(_ref) {
       id: "cards-with-image-".concat(index, "-title"),
       style: design.cardTitle
     }, otherProps), title)), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "absolute bottom-0 right-0 flex items-end justify-end"
+      className: "col-span-2 flex h-full flex-col justify-end"
     }, /*#__PURE__*/React__default["default"].createElement(StyledImage$1, {
       disableButtonAndLinks: disableButtonAndLinks,
       image: image,
@@ -21425,18 +21447,18 @@ var CardsWithImage = function CardsWithImage(_ref) {
       id: "cards-with-image-".concat(index, "-image"),
       isAddNewPane: otherProps.isAddNewPane,
       src: imageUrl,
-      wrapperClassName: "grid h-full w-full"
+      wrapperClassName: "flex flex-col items-end"
     }))));
   }), isAddMoreRequired && /*#__PURE__*/React__default["default"].createElement(MotionWrapper, {
     enableAnimation: enableAnimation,
-    className: "ns-card-animation col-span-12 flex h-40 items-center justify-center transition-all duration-300 ease-in-out sm:col-span-6 lg:col-span-4",
+    className: "ns-card-animation col-span-12 flex items-center justify-center transition-all duration-300 ease-in-out sm:col-span-6 lg:col-span-4",
     design: _objectSpread$g(_objectSpread$g({}, design.card), {}, {
       paddingHorizontal: 0,
       paddingVertical: 0
     })
   }, /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
     disableHovering: true,
-    className: "col-span-12 flex items-center justify-center gap-x-2",
+    className: "col-span-12 flex items-center justify-center gap-x-2 p-9",
     style: design.cardLink
   }, _objectSpread$g(_objectSpread$g({}, addMore), {}, {
     disableButtonAndLinks: disableButtonAndLinks