@bigbinary/neeto-site-blocks 1.2.6 → 1.2.7

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),
@@ -40573,6 +40585,7 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
     })
   }, 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 +40609,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,6 +40655,7 @@ 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));
@@ -40683,6 +40699,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 +40720,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),
@@ -40752,7 +40770,8 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
   }, 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 +40792,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));
   }))));
 };