@bigbinary/neeto-site-blocks 1.2.6 → 1.2.8

package/dist/index.js

@@ -14122,7 +14122,7 @@ stepsOrder.reduce((acc, key) => {
 
 var StyledAnchor = styled.a.attrs(function (props) {
   return {
-    className: classnames(props.className, generateResponsiveStyles(props.design))
+    className: generateResponsiveStyles(props.design)
   };
 })(function (_ref) {
   var _design$border, _design$border2, _design$border3;
@@ -14130,14 +14130,20 @@ var StyledAnchor = styled.a.attrs(function (props) {
     _ref$percentage = _ref.percentage,
     percentage = _ref$percentage === void 0 ? 0.08 : _ref$percentage,
     _ref$isButton = _ref.isButton,
-    isButton = _ref$isButton === void 0 ? false : _ref$isButton;
+    isButton = _ref$isButton === void 0 ? false : _ref$isButton,
+    isHighlighted = _ref.isHighlighted;
   var borderColors = {
     borderColor: (_design$border = design.border) === null || _design$border === void 0 ? void 0 : _design$border.borderColor,
     borderStyle: (_design$border2 = design.border) === null || _design$border2 === void 0 ? void 0 : _design$border2.borderStyle,
     borderWidth: (_design$border3 = design.border) === null || _design$border3 === void 0 ? void 0 : _design$border3.borderWidth
   };
   var borderColorStyles = pickBy(identity, borderColors);
-  var hoverStyles = {
+  var anchorStyles = {
+    color: isHighlighted ? blendColors({
+      color0: design.color,
+      color1: "#0e19e8",
+      percentage: 0.4
+    }) : design.color,
     "&:hover": {
       transitionDuration: "0.3s",
       borderColor: isButton && blendColors({
@@ -14154,7 +14160,7 @@ var StyledAnchor = styled.a.attrs(function (props) {
       })
     }
   };
-  return mergeAll([design, borderColorStyles, hoverStyles]);
+  return mergeAll([design, borderColorStyles, anchorStyles]);
 });
 
 var withConditionalRender = function withConditionalRender(Component, condition) {
@@ -15423,6 +15429,8 @@ var LinkElement = function LinkElement(_ref) {
     _ref$draftMode = _ref.draftMode,
     draftMode = _ref$draftMode === void 0 ? false : _ref$draftMode,
     Link = _ref.link,
+    _ref$isHighlighted = _ref.isHighlighted,
+    isHighlighted = _ref$isHighlighted === void 0 ? false : _ref$isHighlighted,
     _ref$disableButtonAnd = _ref.disableButtonAndLinks,
     disableButtonAndLinks = _ref$disableButtonAnd === void 0 ? false : _ref$disableButtonAnd;
   var baseClass = classnames("inline-flex items-center transition-all duration-300 ease-in-out", {
@@ -15433,7 +15441,8 @@ var LinkElement = function LinkElement(_ref) {
     design: style,
     href: to !== null && to !== void 0 ? to : "",
     rel: "noreferrer",
-    percentage: 0.1
+    percentage: 0.1,
+    isHighlighted: isHighlighted
   };
   if (action === "external") {
     return /*#__PURE__*/React__default.createElement(StyledAnchor, _extends$2({}, commonProps, {
@@ -15447,7 +15456,9 @@ var LinkElement = function LinkElement(_ref) {
       to: draftMode ? "".concat(baseUrl).concat(to) : to
     }), label, Icon && /*#__PURE__*/React__default.createElement(Icon, null));
   }
-  return /*#__PURE__*/React__default.createElement(StyledAnchor, commonProps, label, Icon && /*#__PURE__*/React__default.createElement(Icon, null));
+  return /*#__PURE__*/React__default.createElement(StyledAnchor, _extends$2({
+    as: !draftMode && Link
+  }, commonProps), label, Icon && /*#__PURE__*/React__default.createElement(Icon, null));
 };
 var Link = withConditionalRender(LinkElement, function () {
   return !!(prop("label") || prop("icon"));
@@ -40531,11 +40542,12 @@ var useElementVisible = function useElementVisible(ref) {
   return isIntersecting;
 };
 
-var _excluded$7 = ["configurations", "className", "id"];
+var _excluded$7 = ["configurations", "className", "currentPath", "id"];
 var HeaderWithButtons = function HeaderWithButtons(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
+    currentPath = _ref.currentPath,
     id = _ref.id,
     otherProps = _objectWithoutProperties(_ref, _excluded$7);
   var _useState = useState(false),
@@ -40560,19 +40572,26 @@ 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)
     })
   }, properties.links.map(function (link, index) {
     return /*#__PURE__*/React__default.createElement(Link, _extends$2({
+      isHighlighted: currentPath === link.to,
       key: getUniqueKey(link.label, index),
       style: design.links
     }, link, otherProps));
@@ -40596,19 +40615,21 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
     className: "fadeIn col-span-2 col-start-1 ml-2 mt-3 block space-y-2 lg:hidden"
   }, properties.links.map(function (button, index) {
     return /*#__PURE__*/React__default.createElement(Link, _extends$2({
-      key: getUniqueKey(button.url, button.label, index),
+      isHighlighted: currentPath === button.to,
+      key: getUniqueKey(button.to, button.label, index),
       style: design.links
     }, button, otherProps));
   }))));
 };
 
-var _excluded$6 = ["configurations", "className", "id"];
+var _excluded$6 = ["configurations", "className", "currentPath", "id"];
 function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderWithIcons = function HeaderWithIcons(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
+    currentPath = _ref.currentPath,
     id = _ref.id,
     otherProps = _objectWithoutProperties(_ref, _excluded$6);
   var _useState = useState(false),
@@ -40640,14 +40661,21 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
     className: "col-span-4 col-start-1 hidden items-center gap-6 lg:flex"
   }, properties.links.map(function (link, index) {
     return /*#__PURE__*/React__default.createElement(Link, _extends$2({
+      isHighlighted: currentPath === link.to,
       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({
@@ -40683,6 +40711,7 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
   }, properties.links.map(function (icon, index) {
     return /*#__PURE__*/React__default.createElement(Link, _extends$2({
       className: "w-full",
+      isHighlighted: currentPath === icon.to,
       key: getUniqueKey(icon.url, icon.label, index),
       style: design.links
     }, icon));
@@ -40703,12 +40732,13 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
   }))));
 };
 
-var _excluded$5 = ["configurations", "className", "id"];
+var _excluded$5 = ["configurations", "className", "id", "currentPath"];
 var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    currentPath = _ref.currentPath,
     otherProps = _objectWithoutProperties(_ref, _excluded$5);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -40737,22 +40767,30 @@ 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({
       className: "hidden lg:inline",
-      key: getUniqueKey(link.label, link.url, index),
+      isHighlighted: currentPath === link.to,
+      key: getUniqueKey(link.label, link.to, index),
       style: design.links
     }, link, otherProps));
   }), buttons.map(function (button, index) {
@@ -40773,14 +40811,15 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
     className: "fadeIn col-span-2 col-start-1 space-y-2 lg:hidden"
   }, properties.links.map(function (_ref2, index) {
     var label = _ref2.label,
-      url = _ref2.url,
+      to = _ref2.to,
       action = _ref2.action;
     return /*#__PURE__*/React__default.createElement(Link, _extends$2({
       action: action,
       label: label,
-      key: getUniqueKey(url, label, index),
-      style: design.links,
-      to: url
+      to: to,
+      isHighlighted: currentPath === to,
+      key: getUniqueKey(to, label, index),
+      style: design.links
     }, otherProps));
   }))));
 };