@bigbinary/neeto-site-blocks 1.10.26 → 1.10.28

package/dist/index.cjs.js

@@ -8,10 +8,10 @@ var React = require('react');
 var classnames = require('classnames');
 var styled = require('styled-components');
 var _defineProperty$1 = require('@babel/runtime/helpers/defineProperty');
-var neetoCist = require('@bigbinary/neeto-cist');
-var ramda = require('ramda');
 var framerMotion = require('framer-motion');
+var ramda = require('ramda');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var neetoCist = require('@bigbinary/neeto-cist');
 var reactFrameComponent = require('react-frame-component');
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -4159,14 +4159,9 @@ var renderIcon = function renderIcon(_ref) {
     type = _ref.type,
     color = _ref.color,
     otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$C);
-  if (type === "filled") {
-    var FilledIcon = FilledIcons[name];
-    return /*#__PURE__*/React__default["default"].createElement(FilledIcon, _extends__default["default"]({
-      fill: color
-    }, otherProps));
-  }
-  var OutlineIcon = OutlineIcons[name];
-  return /*#__PURE__*/React__default["default"].createElement(OutlineIcon, _extends__default["default"]({
+  var IconComponent = type === "filled" ? FilledIcons[name] : OutlineIcons[name];
+  var StyledIcon = createStyledIcon(IconComponent);
+  return /*#__PURE__*/React__default["default"].createElement(StyledIcon, _extends__default["default"]({
     fill: color
   }, otherProps));
 };
@@ -4403,9 +4398,10 @@ var StyledAnchor = styled__default["default"].a.attrs(function (props) {
   };
   var borderColorStyles = ramda.pickBy(ramda.identity, borderColors);
   var anchorStyles = disableHovering ? {} : {
-    color: design.color,
+    color: isHighlighted && design.activeColor ? design.activeColor : design.color,
     "&:hover": {
       transitionDuration: "0.3s",
+      color: design.hoverColor,
       borderColor: isButton && blendColors({
         color0: design.borderColor,
         percentage: percentage
@@ -4418,6 +4414,7 @@ var StyledAnchor = styled__default["default"].a.attrs(function (props) {
         width: "100%",
         display: isButton && "none",
         transitionProperty: "all",
+        backgroundColor: design.hoverColor,
         transitionTimingFunction: "cubic-bezier(.4,0,.2,1)",
         transitionDuration: ".2s"
       }
@@ -4429,7 +4426,7 @@ var StyledAnchor = styled__default["default"].a.attrs(function (props) {
       left: 0,
       width: isHighlighted ? "100%" : 0,
       height: "1px",
-      backgroundColor: blendColors({
+      backgroundColor: isHighlighted && design.activeColor ? design.activeColor : blendColors({
         color0: design.color,
         percentage: percentage
       }),
@@ -5965,6 +5962,20 @@ var Button = function Button(_ref) {
 };
 var Button$1 = withConditionalRender(Button, ramda.prop("label"));
 
+var createStyledIcon = function createStyledIcon(IconComponent) {
+  return styled__default["default"](IconComponent)(function (_ref) {
+    var fill = _ref.fill,
+      hoverColor = _ref.hoverColor;
+    return {
+      fill: fill,
+      transition: "fill 0.3s ease",
+      "&:hover": {
+        fill: hoverColor
+      }
+    };
+  });
+};
+
 var _excluded$y = ["to", "label", "Icon", "Link", "baseUrl", "draftMode", "children", "router", "disableButtonAndLinks", "handleLinkClick"];
 var PageAndScroll = function PageAndScroll(_ref) {
   var to = _ref.to,
@@ -13095,7 +13106,7 @@ var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
   })));
 };
 
-var _excluded$d = ["configurations", "className", "id", "image"];
+var _excluded$d = ["configurations", "className", "id", "image", "currentPath"];
 function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterClassic = function FooterClassic(_ref) {
@@ -13104,6 +13115,7 @@ var FooterClassic = function FooterClassic(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
     image = _ref.image,
+    currentPath = _ref.currentPath,
     otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$d);
   var properties = configurations.properties,
     design = configurations.design;
@@ -13164,11 +13176,12 @@ var FooterClassic = function FooterClassic(_ref) {
         id: "footer-classic-social-icons-".concat(index, "-link"),
         key: getUniqueKey(_icon.name, index),
         icon: function icon() {
-          return renderIcon(_objectSpread$a({
+          return renderIcon(_objectSpread$a(_objectSpread$a({
             name: _icon.name,
-            type: _icon.type,
-            className: "hover:text-gray-600"
-          }, design.socialIcon));
+            type: _icon.type
+          }, design.socialIcon), {}, {
+            color: isLinkHighlighted(_icon.to, currentPath) ? design.socialIcon.activeColor : design.socialIcon.color
+          }));
         }
       }, _objectSpread$a(_objectSpread$a({
         index: index
@@ -13244,7 +13257,7 @@ var FooterClassic = function FooterClassic(_ref) {
   }))));
 };
 
-var _excluded$c = ["configurations", "className", "id", "image"];
+var _excluded$c = ["configurations", "className", "id", "image", "currentPath"];
 function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterWithIcons = function FooterWithIcons(_ref) {
@@ -13253,6 +13266,7 @@ var FooterWithIcons = function FooterWithIcons(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
     image = _ref.image,
+    currentPath = _ref.currentPath,
     otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$c);
   var properties = configurations.properties,
     design = configurations.design;
@@ -13305,11 +13319,12 @@ var FooterWithIcons = function FooterWithIcons(_ref) {
       id: "footer-with-icons-social-icon-".concat(index, "-link"),
       key: getUniqueKey(_icon.name, index),
       icon: function icon() {
-        return renderIcon(_objectSpread$9({
+        return renderIcon(_objectSpread$9(_objectSpread$9({
           name: _icon.name,
-          type: _icon.type,
-          className: "text-red-60 hover:text-gray-600"
-        }, design.socialIcon));
+          type: _icon.type
+        }, design.socialIcon), {}, {
+          color: isLinkHighlighted(_icon.to, currentPath) ? design.socialIcon.activeColor : design.socialIcon.color
+        }));
       }
     }, _objectSpread$9(_objectSpread$9({
       index: index
@@ -13322,7 +13337,7 @@ var FooterWithIcons = function FooterWithIcons(_ref) {
   }, otherProps), copyrightText));
 };
 
-var _excluded$b = ["configurations", "className", "id", "image"];
+var _excluded$b = ["configurations", "className", "id", "image", "currentPath"];
 function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterWithLinks = function FooterWithLinks(_ref) {
@@ -13331,6 +13346,7 @@ var FooterWithLinks = function FooterWithLinks(_ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
     image = _ref.image,
+    currentPath = _ref.currentPath,
     otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$b);
   var properties = configurations.properties,
     design = configurations.design;
@@ -13400,7 +13416,6 @@ var FooterWithLinks = function FooterWithLinks(_ref) {
       }, /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
         action: action,
         linkIndex: linkIndex,
-        disableHovering: true,
         id: "footer-with-links-columns-".concat(index, "-links-").concat(linkIndex),
         label: name,
         style: design.columnLinks,
@@ -13441,14 +13456,15 @@ var FooterWithLinks = function FooterWithLinks(_ref) {
     isVisible: neetoCist.isNotEmpty(contact.socialLinks)
   }, contact.socialLinks.map(function (_icon, index) {
     return /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
-      disableHovering: true,
       id: "footer-with-links-social-links-".concat(index, "-icon"),
       key: getUniqueKey(_icon.name, index),
       icon: function icon() {
-        return renderIcon(_objectSpread$8({
+        return renderIcon(_objectSpread$8(_objectSpread$8({
           name: _icon.name,
           type: _icon.type
-        }, design.socialIcon));
+        }, design.socialIcon), {}, {
+          color: isLinkHighlighted(_icon.to, currentPath) ? design.socialIcon.activeColor : design.socialIcon.color
+        }));
       }
     }, _objectSpread$8(_objectSpread$8({
       index: index
@@ -14726,10 +14742,12 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
       key: getUniqueKey(_icon.to, index),
       style: design.icons,
       icon: function icon() {
-        return renderIcon(_objectSpread$5({
+        return renderIcon(_objectSpread$5(_objectSpread$5({
           name: _icon.name,
           type: _icon.type
-        }, design.icons));
+        }, design.icons), {}, {
+          color: isLinkHighlighted(_icon.to, currentPath) ? design.icons.activeColor : design.icons.color
+        }));
       }
     }, _objectSpread$5(_objectSpread$5({
       index: index
@@ -15018,17 +15036,16 @@ var HeroWithGallery = function HeroWithGallery(_ref) {
   var slides = properties.slides,
     src = properties.backgroundImage.src,
     enableAnimation = properties.enableAnimation;
-  var baseClasses = "grid grid-cols-12 items-center gap-y-4 sm:gap-x-4 grid-flow-row-dense";
+  var baseClasses = "grid gap-y-6 lg:gap-6 grid-cols-12 grid-flow-row-dense px-0 sm:px-4";
   var contentBaseClasses = function contentBaseClasses(_ref2) {
     var src = _ref2.src,
       position = _ref2.position,
       isEmptyContent = _ref2.isEmptyContent;
-    return classnames__default["default"]("col-span-12", {
-      "sm:col-start-1 sm:col-span-6 ": 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 flex-col justify-center order-2": src && position === POSITIONS.TOP.label,
-      "sm:col-start-7 sm:col-span-6 ": src && position === POSITIONS.LEFT.label,
-      "flex flex-col justify-center sm:col-span-12": !src,
+    return classnames__default["default"]("col-span-12 flex flex-col justify-center", {
+      "order-1 lg:col-span-6 ": src && position === POSITIONS.LEFT.label,
+      "order-2 lg:col-span-6": src && position === POSITIONS.RIGHT.label,
+      "order-1": src && position === POSITIONS.BOTTOM.label,
+      "order-2": src && position === POSITIONS.TOP.label,
       hidden: isEmptyContent
     });
   };
@@ -15036,19 +15053,18 @@ var HeroWithGallery = function HeroWithGallery(_ref) {
     var src = _ref3.src,
       position = _ref3.position,
       isEmptyContent = _ref3.isEmptyContent;
-    return classnames__default["default"]("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
+    return classnames__default["default"]("col-span-12 flex flex-col justify-center items-center", {
+      "order-2 lg:col-span-6": src && position === POSITIONS.LEFT.label && !isEmptyContent,
+      "order-1 lg:col-span-6": src && position === POSITIONS.RIGHT.label && !isEmptyContent,
+      "order-2": src && position === POSITIONS.BOTTOM.label && !isEmptyContent,
+      "order-1": src && position === POSITIONS.TOP.label && !isEmptyContent,
+      hidden: !src
     });
   };
   var buttonBaseClasses = function buttonBaseClasses(_ref4) {
     var src = _ref4.src,
       position = _ref4.position;
-    return classnames__default["default"]("flex w-full gap-x-4", {
+    return classnames__default["default"]("flex flex-wrap w-full items-center gap-2", {
       "justify-center": !src || position === POSITIONS.BOTTOM.label || position === POSITIONS.TOP.label
     });
   };
@@ -15067,10 +15083,7 @@ var HeroWithGallery = function HeroWithGallery(_ref) {
     var isEmptyContent = !content.prefixTitle && !content.title && !content.description;
     return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
       isRootWrapper: true,
-      className: classnames__default["default"]("neeto-site-block-wrapper", baseClasses),
-      design: {
-        paddingHorizontal: design.body.paddingHorizontal
-      }
+      className: classnames__default["default"]("neeto-site-block-wrapper", baseClasses)
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: contentBaseClasses(_objectSpread$2({
         isEmptyContent: isEmptyContent
@@ -15079,6 +15092,7 @@ var HeroWithGallery = function HeroWithGallery(_ref) {
       disableButtonAndLinks: disableButtonAndLinks,
       index: index,
       isTitle: true,
+      className: textClasses(_objectSpread$2({}, media)),
       component: "h3",
       id: "hero-with-gallery-slide-".concat(index, "-prefixTitle"),
       isAddNewPane: otherProps.isAddNewPane,
@@ -15104,7 +15118,6 @@ var HeroWithGallery = function HeroWithGallery(_ref) {
       className: buttonBaseClasses(_objectSpread$2({}, media))
     }, buttons.map(function (button, buttonIndex) {
       return /*#__PURE__*/React__default["default"].createElement(Button$1, _extends__default["default"]({
-        className: "flex w-full justify-center sm:w-auto",
         id: "hero-with-gallery-slide-".concat(index, "-buttons-").concat(buttonIndex, "-button"),
         key: getUniqueKey(button.label, button.url, index),
         style: button.type === "primary" ? design.primaryButtons : design.secondaryButtons
@@ -15141,7 +15154,7 @@ var HeroWithGallery = function HeroWithGallery(_ref) {
       src: src
     }, design.backgroundImage),
     design: design.body,
-    nestedClassName: "flex items-center justify-between gap-x-2"
+    nestedClassName: "flex items-center justify-between gap-x-2 ns-hero-with-gallery "
   }, slides.length > 1 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
     isStart: true,
     Icon: ArrowLeftS$1,