@bigbinary/neeto-site-blocks 1.10.11 → 1.10.13

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');
@@ -73,7 +73,7 @@ var ArrowButton = function ArrowButton(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
     className: "rounded-full border p-1",
     fill: (design === null || design === void 0 ? void 0 : design.navigationActiveColor) || "#1F2433",
-    size: 27
+    size: 25
   }));
 };
 
@@ -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, {
@@ -21153,13 +21175,14 @@ var CardsInGridView = function CardsInGridView(_ref) {
     }, title), /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
       isStart: true,
       Icon: ArrowLeft$1,
+      className: "flex-shrink-0",
       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("div", {
-      className: "col-span-8 col-start-3 sm:col-span-10 sm:col-start-2"
+      className: "col-span-10 col-start-2"
     }, /*#__PURE__*/React__default["default"].createElement(Swiper, {
       loop: true,
       breakpointsBase: "container",
@@ -21188,6 +21211,7 @@ var CardsInGridView = function CardsInGridView(_ref) {
       })));
     }))), /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
       Icon: ArrowRight$1,
+      className: "flex-shrink-0",
       isActive: activeIndex < cards.length - 2,
       onClick: function onClick() {
         var _swiperRef$current2;