luna-one 3.1.404 → 3.1.407

package/dist/luna/components/MegaMenu/MegaMenu.js

@@ -48,7 +48,8 @@ var MegaMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isOpen = props.isOpen,
       Link = props.Link,
       displayIcons = props.displayIcons,
-      theme = props.theme;
+      theme = props.theme,
+      active = props.active;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -262,7 +263,7 @@ var MegaMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, /*#__PURE__*/_react.default.createElement("p", {
     "data-depth": 1,
     id: (0, _formatID.default)("".concat(content.text, "-mega-menu-nav-text")),
-    className: "ter-mega-menu__nav-text ".concat(isOpen ? "ter-mega-menu__nav-text--is-open" : "", "\n        ").concat(theme ? "ter-mega-menu__nav-text--".concat(theme) : "", "\n        ").concat(displayIcons ? "ter-mega-menu__nav-text--with-icon" : "", "\n        ").concat(displayIcons && theme ? "ter-mega-menu__nav-text--with-icon" : "", "\n        ")
+    className: "ter-mega-menu__nav-text ".concat(isOpen ? "ter-mega-menu__nav-text--is-open" : "", "\n        ").concat(active ? "active" : "", "\n        ").concat(theme ? "ter-mega-menu__nav-text--".concat(theme) : "", "\n        ").concat(displayIcons ? "ter-mega-menu__nav-text--with-icon" : "", "\n        ").concat(displayIcons && theme ? "ter-mega-menu__nav-text--with-icon" : "", "\n        ")
   }, content.text, /*#__PURE__*/_react.default.createElement("img", {
     id: _lodash.default.uniqueId("cross-icon-"),
     src: theme === "blue" ? _crossMediumWhite.default : _crossMediumBlue.default,

package/dist/luna/components/MegaMenu/MegaMenu.scss

@@ -102,7 +102,8 @@
     }
 
     &--is-open,
-    &:hover {
+    &:hover,
+    &.active {
       border-bottom: 3px solid $trimble-gold;
     }
 

package/dist/luna/other-organisms/NavBar/NavBar.js

@@ -151,16 +151,27 @@ var NavBar = function NavBar(props) {
 
   var lastPositionRef = (0, _react.useRef)(lastPosition);
 
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      pathname = _useState16[0],
+      setPathname = _useState16[1];
+
+  (0, _react.useEffect)(function () {
+    if (window) {
+      setPathname(window.location.pathname);
+    }
+  }, []);
+
   var setLastPosition = function setLastPosition(data) {
     lastPositionRef.current = data;
 
     _setLastPosition(data);
   };
 
-  var _useState15 = (0, _react.useState)(true),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      isBottomBarActive = _useState16[0],
-      setIsBottomBarActive = _useState16[1];
+  var _useState17 = (0, _react.useState)(true),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      isBottomBarActive = _useState18[0],
+      setIsBottomBarActive = _useState18[1];
 
   var subNavDisplay = (subNavData === null || subNavData === void 0 ? void 0 : (_subNavData$breadcrum = subNavData.breadcrumbs) === null || _subNavData$breadcrum === void 0 ? void 0 : _subNavData$breadcrum.length) || (subNavData === null || subNavData === void 0 ? void 0 : (_subNavData$siblingPa = subNavData.siblingPages) === null || _subNavData$siblingPa === void 0 ? void 0 : _subNavData$siblingPa.length);
 
@@ -267,11 +278,37 @@ var NavBar = function NavBar(props) {
     e.stopPropagation();
   };
 
+  var getUrl = function getUrl(option) {
+    var _option$links;
+
+    if (option && option.url) {
+      return option.url;
+    }
+
+    if (option && option !== null && option !== void 0 && (_option$links = option.links) !== null && _option$links !== void 0 && _option$links.length) {
+      if (option.links[0].url) {
+        return option.links[0].url;
+      }
+
+      if (option.links[0].links[0].url) {
+        return option.links[0].links[0].url;
+      }
+
+      if (option.links[0].links[0].links[0].url) {
+        return option.links[0].links[0].links[0].url;
+      }
+    }
+  };
+
   var generateNavOptions = function generateNavOptions() {
     return navOptions === null || navOptions === void 0 ? void 0 : navOptions.map(function (option) {
-      var _option$links;
+      var _option$links2;
+
+      var isCollapsed = (option === null || option === void 0 ? void 0 : (_option$links2 = option.links) === null || _option$links2 === void 0 ? void 0 : _option$links2.length) > 4 ? true : false;
+      var url = getUrl(option).split('/')[2];
+      var path = pathname && pathname.split('/')[2]; // to determine if active, check if nav url is in the first breadcrumb after the local of the pathname
 
-      var isCollapsed = (option === null || option === void 0 ? void 0 : (_option$links = option.links) === null || _option$links === void 0 ? void 0 : _option$links.length) > 4 ? true : false;
+      var active = path && (path === null || path === void 0 ? void 0 : path.includes(url));
       return /*#__PURE__*/_react.default.createElement(_NavOption.default, {
         key: option.text,
         displayIcons: displayIcons,
@@ -287,7 +324,8 @@ var NavBar = function NavBar(props) {
         currentOpenMenu: currentOpenMenu,
         displayIcons: displayIcons,
         icon: option.icon,
-        theme: menuBarTheme
+        theme: menuBarTheme,
+        active: active
       }) : option.type === "links" ? /*#__PURE__*/_react.default.createElement(_NavMiniMenu.default, {
         navText: option.text,
         links: option.links,
@@ -297,14 +335,15 @@ var NavBar = function NavBar(props) {
         displayIcons: displayIcons,
         icon: option.icon,
         theme: menuBarTheme,
-        currentOpenMenu: currentOpenMenu
+        currentOpenMenu: currentOpenMenu,
+        active: active
       }) : /*#__PURE__*/_react.default.createElement(_terraOne.LunaLink, {
         to: option.url,
         depth: 1,
         tabIndex: mouse ? "" : "0",
         href: option.url,
         key: option.text,
-        className: "".concat(mouse ? "ter-navbar__nav-link" : "ter-navbar__nav-link tabFocus", " \n                ").concat(menuBarTheme ? "ter-navbar__nav-link--".concat(menuBarTheme) : "", "\n                ").concat(displayIcons ? "ter-navbar__nav-link--with-icon" : "", "\n                ").concat(displayIcons && menuBarTheme ? "ter-navbar__nav-link--with-icon--".concat(menuBarTheme) : ""),
+        className: "".concat(mouse ? "ter-navbar__nav-link" : "ter-navbar__nav-link tabFocus", " \n                ").concat(active ? "active" : "", "\n                ").concat(menuBarTheme ? "ter-navbar__nav-link--".concat(menuBarTheme) : "", "\n                ").concat(displayIcons ? "ter-navbar__nav-link--with-icon" : "", "\n                ").concat(displayIcons && menuBarTheme ? "ter-navbar__nav-link--with-icon--".concat(menuBarTheme) : ""),
         id: (0, _formatID.default)("".concat(option.text, "-navbar-nav-link")),
         Link: Link,
         onClick: closeAllDropDowns,

package/dist/luna/other-organisms/NavBar/NavBar.scss

@@ -300,7 +300,8 @@
       }
 
       &--is-open,
-      &:hover {
+      &:hover,
+      &.active {
         border-bottom: 3px solid brand-color("brand-5");
         cursor: pointer;
       }
@@ -388,7 +389,8 @@
       }
     }
 
-    &:hover {
+    &:hover,
+    &.active {
       text-decoration: none;
       border-bottom: 3px solid brand-color("brand-5");
     }

package/dist/luna/other-organisms/NavBar/NavMiniMenu.js

@@ -41,7 +41,8 @@ var NavMiniMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       Link = props.Link,
       isOpen = props.isOpen,
       displayIcons = props.displayIcons,
-      theme = props.theme;
+      theme = props.theme,
+      active = props.active;
   (0, _react.useImperativeHandle)(ref, function (e) {
     return {
       handleClick: function handleClick() {
@@ -94,7 +95,7 @@ var NavMiniMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           return mouseLeave();
         }
       }, /*#__PURE__*/_react.default.createElement(_terraOne.LunaLink, {
-        className: "".concat(mouse ? "ter-nav-mini-menu__drop-down__link" : "ter-nav-mini-menu__drop-down__link tabFocus", " ").concat(link.text === open ? "ter-nav-mini-menu__drop-down__link--is-open" : "", " \n              "),
+        className: "".concat(mouse ? "ter-nav-mini-menu__drop-down__link" : "ter-nav-mini-menu__drop-down__link tabFocus", " ").concat(link.text === open ? "ter-nav-mini-menu__drop-down__link--is-open" : "", " ").concat(active ? "active" : "", "\n              "),
         to: link.url,
         onClick: closeAllDropDowns,
         target: link.external ? "_blank" : "_self",
@@ -122,7 +123,7 @@ var NavMiniMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-label": "".concat(navText, " menu")
   }, /*#__PURE__*/_react.default.createElement("p", {
     id: (0, _formatID.default)("".concat(navText, "-ter-nav-mini-menu-text")),
-    className: "ter-nav-mini-menu__text ".concat(isOpen && " ter-nav-mini-menu__text--is-open", "\n        ").concat(displayIcons ? "ter-nav-mini-menu__text--with-icons" : "", "\n        ").concat(theme ? "ter-nav-mini-menu__text--".concat(theme) : "", "\n        "),
+    className: "ter-nav-mini-menu__text ".concat(isOpen && " ter-nav-mini-menu__text--is-open", "\n        ").concat(active ? "active" : "", "\n        ").concat(displayIcons ? "ter-nav-mini-menu__text--with-icons" : "", "\n        ").concat(theme ? "ter-nav-mini-menu__text--".concat(theme) : "", "\n        "),
     "data-depth": 1
   }, navText, /*#__PURE__*/_react.default.createElement("img", {
     id: _lodash.default.uniqueId("cross-icon-"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.404",
+  "version": "3.1.407",
   "dependencies": {
     "@storybook/addon-knobs": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",
@@ -24,7 +24,7 @@
     "react-scroll": "^1.7.14",
     "react-slidedown": "^2.4.5",
     "smoothscroll-polyfill": "^0.4.4",
-    "terra-one": "^3.0.138"
+    "terra-one": "^3.0.139"
   },
   "peerDependencies": {
     "node-sass": "^4.12.0",