luna-one 3.1.508 → 3.1.510

package/dist/application/components/NavBarHandler/NavBarHandler.js

@@ -122,7 +122,8 @@ var NavBarHandler = function NavBarHandler(_ref) {
     navigate: navigate,
     authLabels: data === null || data === void 0 ? void 0 : data.authLabels,
     setGlobalSearch: setGlobalSearch,
-    globalSearch: globalSearch
+    globalSearch: globalSearch,
+    waffleMenu: data === null || data === void 0 ? void 0 : data.waffleMenu
   });
 };
 

package/dist/luna/components/MobileDashboardMenu/MobileDashboardMenu.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _downCaretDarkBlue = _interopRequireDefault(require("../../images/down-caret-dark-blue.svg"));
+
+var _rightCaretLightGray = _interopRequireDefault(require("../../images/right-caret-light-gray.svg"));
+
+var _formatID = _interopRequireDefault(require("../../utils/formatID"));
+
+var _useMouse = _interopRequireDefault(require("../../utils/hooks/useMouse"));
+
+var _useFocus5 = require("../../utils/hooks/useFocus");
+
+var _waffle = _interopRequireDefault(require("../../images/waffle.svg"));
+
+var MobileDashboardMenu = function MobileDashboardMenu(_ref) {
+  var links = _ref.links,
+      cta = _ref.cta,
+      text = _ref.text,
+      toggleDropDown = _ref.toggleDropDown,
+      isOpen = _ref.isOpen,
+      closeDropDown = _ref.closeDropDown,
+      Link = _ref.Link,
+      currentOpenMenu = _ref.currentOpenMenu,
+      hamburgerIsOpen = _ref.hamburgerIsOpen;
+  var mouse = _useMouse["default"].mouse;
+
+  var _useFocus = (0, _useFocus5.useFocus)(),
+      _useFocus2 = (0, _slicedToArray2["default"])(_useFocus, 2),
+      collapsedMenu = _useFocus2[0],
+      setCollapsedMenu = _useFocus2[1];
+
+  var _useFocus3 = (0, _useFocus5.useFocus)(),
+      _useFocus4 = (0, _slicedToArray2["default"])(_useFocus3, 2),
+      uncollapsedMenu = _useFocus4[0],
+      setUncollapsedMenu = _useFocus4[1];
+
+  var generateMenuLinks = function generateMenuLinks() {
+    return links.map(function (_ref2, i) {
+      var title = _ref2.title,
+          description = _ref2.description,
+          linkText = _ref2.linkText,
+          externalUrl = _ref2.externalUrl;
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        key: i,
+        className: "luna-waffle-menu__drop-down__menu-item"
+      }, /*#__PURE__*/_react["default"].createElement("h4", {
+        className: "luna-waffle-menu__drop-down__menu-item__product-name"
+      }, title), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "luna-waffle-menu__drop-down__menu-item__description"
+      }, description), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "luna-waffle-menu__drop-down__menu-item__cta"
+      }, /*#__PURE__*/_react["default"].createElement("a", {
+        href: externalUrl,
+        className: "luna-waffle-menu__drop-down__menu-item__cta__link",
+        target: "_blank"
+      }, linkText)));
+    });
+  };
+
+  var toggleWithEnter = function toggleWithEnter(e, name, direction) {
+    if (e.keyCode === 13) {
+      toggleDropDown(name);
+
+      if (direction === "open") {
+        setCollapsedMenu();
+      } else {
+        setUncollapsedMenu();
+      }
+    }
+  };
+
+  var invisible = currentOpenMenu !== null;
+
+  if (Array.isArray(links) && links.length > 0) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("section", {
+      className: "ter-mobile-mega-menu ".concat(isOpen ? "ter-mobile-mega-menu--reveal" : "ter-mobile-mega-menu--reveal--from-right")
+    }, /*#__PURE__*/_react["default"].createElement("p", {
+      id: (0, _formatID["default"])("".concat(text, "-mini-menu-name")),
+      className: "ter-mobile-mega-menu__name ".concat(isOpen ? "ter-mobile-mega-menu__name--open" : "", " ").concat(mouse ? "" : "tabFocus"),
+      tabIndex: mouse ? "" : "0",
+      onClick: function onClick() {
+        return toggleDropDown(text);
+      },
+      onKeyDown: function onKeyDown(e) {
+        return toggleWithEnter(e, text, "open");
+      },
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      ref: uncollapsedMenu,
+      "data-depth": 1
+    }, text, /*#__PURE__*/_react["default"].createElement("img", {
+      className: "ter-mobile-menu__caret ".concat(isOpen ? "ter-mobile-menu__caret--up" : "ter-mobile-menu__caret--down"),
+      src: _rightCaretLightGray["default"],
+      alt: "caret icon"
+    })), /*#__PURE__*/_react["default"].createElement("ul", {
+      className: "ter-mobile-menu__link-container ter-mobile-menu__link-container--is-open"
+    }, generateMenuLinks()), (cta === null || cta === void 0 ? void 0 : cta.reference) && /*#__PURE__*/_react["default"].createElement("footer", {
+      className: "luna-waffle-menu__drop-down__footer"
+    }, /*#__PURE__*/_react["default"].createElement(Link, {
+      to: cta.reference.slug,
+      className: "luna-waffle-menu__drop-down__footer__link"
+    }, cta.title))), /*#__PURE__*/_react["default"].createElement("section", {
+      className: "ter-mobile-mega-menu ".concat(invisible ? "ter-mobile-mega-menu--inactive" : "")
+    }, /*#__PURE__*/_react["default"].createElement("p", {
+      id: (0, _formatID["default"])("".concat(text, "-mini-menu-name")),
+      className: "ter-mobile-mega-menu__name ter-mobile-mega-menu__name__flex ter-mobile-mega-menu__name__utility-link ter-mobile-mega-menu__name__utility-link__last ".concat(currentOpenMenu || !hamburgerIsOpen ? "" : "ter-mobile-mega-menu__name--open-parent", " ").concat(mouse ? "" : "tabFocus"),
+      onClick: function onClick() {
+        return toggleDropDown(text);
+      },
+      onKeyDown: function onKeyDown(e) {
+        return toggleWithEnter(e, text, "close");
+      },
+      tabIndex: mouse ? "" : "0",
+      "aria-haspopup": "menu",
+      "aria-expanded": !isOpen,
+      ref: collapsedMenu,
+      "data-depth": 1
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _waffle["default"],
+      className: "ter-mobile-mega-menu__name__flex__icon",
+      width: "16",
+      height: "16",
+      alt: ""
+    }), text, /*#__PURE__*/_react["default"].createElement("img", {
+      className: "ter-mobile-menu__caret ".concat(isOpen ? "ter-mobile-menu__caret--up" : "ter-mobile-menu__caret--down"),
+      src: _downCaretDarkBlue["default"],
+      alt: "caret icon"
+    }))));
+  }
+
+  return null;
+};
+
+var _default = MobileDashboardMenu;
+exports["default"] = _default;

package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.scss

@@ -88,6 +88,20 @@
     &:hover {
       cursor: pointer;
     }
+
+    &__flex {
+      display: flex;
+      align-items: center;
+      &__icon {
+        margin-right: 10px;
+      }
+    }
+    
+    &__utility-link {
+      background: white;
+      color: $trimble-blue;
+      border-bottom: 1px solid rgba(0, 99, 163);
+    }
   }
 
   &__caret {

package/dist/luna/components/MobileNav/MobileNav.js

@@ -23,6 +23,10 @@ require("./MobileNav.scss");
 
 var _logoIcon = _interopRequireDefault(require("../../images/logo-icon.svg"));
 
+var _user = _interopRequireDefault(require("../../images/user.svg"));
+
+var _downCaretDarkBlue = _interopRequireDefault(require("../../images/down-caret-dark-blue.svg"));
+
 var _lodash = _interopRequireDefault(require("lodash"));
 
 var _useNavigator2 = _interopRequireDefault(require("../../utils/hooks/useNavigator"));
@@ -57,6 +61,11 @@ var MobileMenu = (0, _component["default"])(function () {
     return (0, _interopRequireWildcard2["default"])(require("../MobileMenu/MobileMenu"));
   });
 });
+var MobileDashboardMenu = (0, _component["default"])(function () {
+  return Promise.resolve().then(function () {
+    return (0, _interopRequireWildcard2["default"])(require("../MobileDashboardMenu/MobileDashboardMenu"));
+  });
+});
 var TopMobileNav = (0, _component["default"])(function () {
   return Promise.resolve().then(function () {
     return (0, _interopRequireWildcard2["default"])(require("./TopMobileNav"));
@@ -88,7 +97,8 @@ var MobileNav = function MobileNav(props) {
       logout = props.logout,
       login = props.login,
       Link = props.Link,
-      authLabels = props.authLabels;
+      authLabels = props.authLabels,
+      waffleMenu = props.waffleMenu;
 
   var _useContext = (0, _react.useContext)(_NavBar.NavBarContext),
       mouse = _useContext.mouse,
@@ -193,6 +203,7 @@ var MobileNav = function MobileNav(props) {
     saveLanguage(region);
   };
 
+  var myDashboardLabel = (authLabels === null || authLabels === void 0 ? void 0 : authLabels.myDashboard) || 'My Dashboard';
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "ter-mobile-nav ".concat(hamburgerIsOpen ? "ter-mobile-nav--is-open" : "ter-mobile-nav--is-hidden", " ").concat(!disableSectorFlyOut && hamburgerIsOpen ? "ter-mobile-nav__flyout--active ".concat(flyoutPaddingClass) : ""),
     tabIndex: "-1"
@@ -225,7 +236,35 @@ var MobileNav = function MobileNav(props) {
     userProfile: userProfile,
     logout: logout,
     authLabels: authLabels
-  })), !disableSectorFlyOut && /*#__PURE__*/_react["default"].createElement("section", {
+  })), !disableLogin && /*#__PURE__*/_react["default"].createElement("section", {
+    className: "ter-mobile-mega-menu ".concat(isOpen !== null ? "ter-mobile-mega-menu--inactive" : ""),
+    onClick: function onClick() {
+      return handleSectorFlyoutDeployed();
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ter-mobile-mega-menu__name ter-mobile-mega-menu__name__flex ter-mobile-mega-menu__name__utility-link ter-mobile-mega-menu__name--open-parent tabFocus"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _user["default"],
+    width: "16",
+    alt: "User",
+    className: "ter-mobile-mega-menu__name__flex__icon"
+  }), authLabels.myAccount || 'My Account', /*#__PURE__*/_react["default"].createElement("img", {
+    className: "ter-mobile-menu__caret ter-mobile-menu__caret--down",
+    src: _downCaretDarkBlue["default"],
+    alt: "caret icon"
+  }))), /*#__PURE__*/_react["default"].createElement(MobileDashboardMenu, {
+    text: myDashboardLabel,
+    links: waffleMenu === null || waffleMenu === void 0 ? void 0 : waffleMenu.links,
+    cta: waffleMenu === null || waffleMenu === void 0 ? void 0 : waffleMenu.cta,
+    key: myDashboardLabel,
+    isOpen: isOpen === myDashboardLabel,
+    currentOpenMenu: isOpen,
+    openDropDown: openDropDown,
+    closeDropDown: closeAll,
+    toggleDropDown: toggleDropDown,
+    Link: Link,
+    hamburgerIsOpen: hamburgerIsOpen
+  }), !disableSectorFlyOut && /*#__PURE__*/_react["default"].createElement("section", {
     className: "ter-mobile-nav__flyout-wrapper ".concat(isOpen !== null ? "ter-mobile-nav__flyout-wrapper--inactive" : ""),
     onClick: function onClick() {
       return handleSectorFlyoutDeployed();

package/dist/luna/components/MobileNav/MobileNav.scss

@@ -95,7 +95,6 @@
     &--active {
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
     }
 
     &--regular-padding {
@@ -214,7 +213,7 @@
   }
 
   &__globe-icon {
-    width: 14px;
+    width: 16px;
     transform: translateY(-2px);
   }
 

package/dist/luna/components/MobileNav/TopMobileNav.js

@@ -124,6 +124,7 @@ var TopMobileNav = function TopMobileNav(props) {
     "aria-expanded": languageSelectorDeployed
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: _iconGlobe["default"],
+    width: "16",
     alt: "globe wireframe icon",
     className: "ter-top-mobile-nav__globe-icon"
   }), /*#__PURE__*/_react["default"].createElement("p", {
@@ -135,17 +136,6 @@ var TopMobileNav = function TopMobileNav(props) {
     className: "ter-mobile-mega-menu__caret ter-mobile-menu__caret--down",
     src: _downCaretDarkBlue["default"],
     alt: "caret icon"
-  })), !disableLogin && /*#__PURE__*/_react["default"].createElement("section", {
-    className: "ter-top-mobile-nav__login-wrapper  ".concat(currentOpenMenu !== null ? "ter-top-mobile-nav__login-wrapper--inactive" : "", " ").concat(!hamburgerIsOpen ? "ter-top-mobile-nav__login-wrapper--hidden" : "")
-  }, /*#__PURE__*/_react["default"].createElement(MobileLogin, {
-    loginPage: loginPage,
-    login: login,
-    isHidden: isHidden,
-    Link: Link,
-    isAuthenticated: isAuthenticated,
-    userProfile: userProfile,
-    logout: logout,
-    authLabels: authLabels
   })));
 };
 

package/dist/luna/components/NavBarTop/NavBarTop.js

@@ -78,13 +78,16 @@ var NavBarTop = function NavBarTop(props) {
       setDesktopSearchDeployed = props.setDesktopSearchDeployed,
       desktopSearchDeployed = props.desktopSearchDeployed,
       globalSearch = props.globalSearch,
-      setGlobalSearch = props.setGlobalSearch;
+      setGlobalSearch = props.setGlobalSearch,
+      waffleMenu = props.waffleMenu;
   var inputFocus = (0, _utilizeFocus.utilizeFocus)();
 
   var _useContext = (0, _react.useContext)(_NavBar.NavBarContext),
       mouse = _useContext.mouse,
       handleSearchSubmit = _useContext.handleSearchSubmit,
-      hamburgerClick = _useContext.hamburgerClick;
+      hamburgerClick = _useContext.hamburgerClick,
+      closeAllDropDowns = _useContext.closeAllDropDowns,
+      handleSectorFlyoutDeployed = _useContext.handleSectorFlyoutDeployed;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -93,6 +96,9 @@ var NavBarTop = function NavBarTop(props) {
 
   var toggleDesktopSearch = function toggleDesktopSearch(isDesktop) {
     if (!desktopSearchDeployed) {
+      handleSectorFlyoutDeployed(false);
+      handleLanguageSelectorDeployed(false);
+      closeAllDropDowns();
       setSearchDeployed(true);
       setGlobalSearch && setGlobalSearch(false);
       setDesktopSearchDeployed(true);

package/dist/luna/components/WaffleMenu/WaffleMenu.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NavBar = require("../../other-organisms/NavBar/NavBar");
+
+var _waffle = _interopRequireDefault(require("../../images/waffle.svg"));
+
+require("./WaffleMenu.scss");
+
+var _default = function _default(_ref) {
+  var links = _ref.links,
+      cta = _ref.cta,
+      Link = _ref.Link;
+
+  var _useContext = (0, _react.useContext)(_NavBar.NavBarContext),
+      closeAllDropDowns = _useContext.closeAllDropDowns,
+      currentOpenMenu = _useContext.currentOpenMenu,
+      sectorFlyoutDeployed = _useContext.sectorFlyoutDeployed,
+      handleSectorFlyoutDeployed = _useContext.handleSectorFlyoutDeployed,
+      languageSelectorDeployed = _useContext.languageSelectorDeployed,
+      handleLanguageSelectorDeployed = _useContext.handleLanguageSelectorDeployed,
+      desktopSearchDeployed = _useContext.desktopSearchDeployed,
+      setDesktopSearchDeployed = _useContext.setDesktopSearchDeployed,
+      isWaffleMenuDeployed = _useContext.isWaffleMenuDeployed,
+      setWaffleMenuDeployed = _useContext.setWaffleMenuDeployed;
+
+  (0, _react.useEffect)(function () {
+    if (currentOpenMenu) {
+      setWaffleMenuDeployed(false);
+    }
+  }, [currentOpenMenu]);
+  (0, _react.useEffect)(function () {
+    if (sectorFlyoutDeployed) {
+      setWaffleMenuDeployed(false);
+    }
+  }, [sectorFlyoutDeployed]);
+  (0, _react.useEffect)(function () {
+    if (languageSelectorDeployed) {
+      setWaffleMenuDeployed(false);
+    }
+  }, [languageSelectorDeployed]);
+  (0, _react.useEffect)(function () {
+    if (desktopSearchDeployed) {
+      setWaffleMenuDeployed(false);
+    }
+  }, [desktopSearchDeployed]);
+
+  var handleClick = function handleClick() {
+    closeAllDropDowns();
+    handleSectorFlyoutDeployed(false);
+    handleLanguageSelectorDeployed(false);
+    setDesktopSearchDeployed(false);
+    setWaffleMenuDeployed(!isWaffleMenuDeployed);
+  };
+
+  if (Array.isArray(links) && links.length > 0) {
+    var _cta$reference;
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "luna-waffle-menu"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "luna-waffle-menu__selector"
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      type: "button",
+      className: "luna-waffle-menu__selector__button ".concat(isWaffleMenuDeployed ? 'luna-waffle-menu__selector__button--active' : ''),
+      onClick: handleClick
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _waffle["default"],
+      width: "20",
+      height: "20",
+      alt: ""
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "luna-waffle-menu__drop-down ".concat(isWaffleMenuDeployed ? 'luna-waffle-menu__drop-down--active' : '')
+    }, /*#__PURE__*/_react["default"].createElement("ul", {
+      className: "luna-waffle-menu__drop-down__options"
+    }, links.map(function (_ref2, i) {
+      var title = _ref2.title,
+          description = _ref2.description,
+          linkText = _ref2.linkText,
+          externalUrl = _ref2.externalUrl;
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        key: i,
+        className: "luna-waffle-menu__drop-down__menu-item"
+      }, /*#__PURE__*/_react["default"].createElement("h4", {
+        className: "luna-waffle-menu__drop-down__menu-item__product-name"
+      }, title), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "luna-waffle-menu__drop-down__menu-item__description"
+      }, description), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "luna-waffle-menu__drop-down__menu-item__cta"
+      }, /*#__PURE__*/_react["default"].createElement("a", {
+        href: externalUrl,
+        className: "luna-waffle-menu__drop-down__menu-item__cta__link",
+        target: "_blank"
+      }, linkText)));
+    })), (cta === null || cta === void 0 ? void 0 : cta.reference) && /*#__PURE__*/_react["default"].createElement("footer", {
+      className: "luna-waffle-menu__drop-down__footer"
+    }, /*#__PURE__*/_react["default"].createElement(Link, {
+      to: cta === null || cta === void 0 ? void 0 : (_cta$reference = cta.reference) === null || _cta$reference === void 0 ? void 0 : _cta$reference.slug,
+      className: "luna-waffle-menu__drop-down__footer__link"
+    }, cta === null || cta === void 0 ? void 0 : cta.title))));
+  }
+
+  return null;
+};
+
+exports["default"] = _default;

package/dist/luna/components/WaffleMenu/WaffleMenu.scss

@@ -0,0 +1,73 @@
+@import "../../../global-styles/terra.scss";
+
+.ter-navbar-top__pipe + .luna-waffle-menu {
+    margin-left: 28px;
+}
+
+.luna-waffle-menu {
+    position: relative;
+    @media screen and (max-width: $breakpoint-sm) {
+        display: none;
+    }    
+    &__selector {
+        &__button {
+            padding: 10px 4px 4px 4px;
+            border-bottom: 3px solid transparent;
+            &--active, &:hover {
+                border-bottom: 3px solid $trimble-gold;
+            }
+        }
+    } 
+    &__drop-down {
+        display: none;
+        position: absolute;
+        background: $white;
+        box-shadow: 0 4px 8px 0 rgba(54,53,69,.1),0 4px 8px 0 rgba(54,53,69,.1);
+        border-radius: 0px 0px 3px 3px;
+        width: 360px;
+        left: calc(50% - 180px);
+        &--active {
+            display: block;
+        }
+        &__options {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        &__menu-item {
+            padding: 20px;
+            margin: 0;
+            border-bottom: 1px solid #F1F2F7;
+            &__product-name {
+                font-size: 20px;
+                line-height: 26px;
+                margin: 0;
+            }
+            &__description {
+                font-size: 12px;
+                line-height: 18px;
+            }
+            &__cta {
+                &__link {
+                    font-size: 14px !important;
+                    line-height: 24px !important;
+                    font-weight: 500 !important;
+                    color: #252A2E !important;
+                    margin: 0 !important;
+                    text-decoration: none;
+                    border-bottom: 3px solid $trimble-gold;
+                }
+            }
+        }
+        &__footer {
+            background-color: #F8F8FB;
+            padding: 20px;
+            font-size: 14px;
+            line-height: 14px;
+            &__link {
+                margin: 0 !important;
+                text-decoration: none;
+            }
+        }
+    }
+}

package/dist/luna/images/icon-globe.svg

@@ -1 +1 @@
-<svg fill="#005f9e" xmlns="http://www.w3.org/2000/svg"><path d="M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18c-.61-.24-2-2.63-2.23-7h4.46c-.23 4.36-1.62 6.75-2.23 7Zm0-16c.61.24 2 2.63 2.23 7H7.77C8 4.64 9.39 2.25 10 2Zm7.93 7h-3.7a17.17 17.17 0 0 0-1.42-6.48A8 8 0 0 1 17.93 9ZM7.19 2.52A17.17 17.17 0 0 0 5.77 9h-3.7a8 8 0 0 1 5.12-6.48ZM2.07 11h3.7a17.17 17.17 0 0 0 1.42 6.48A8 8 0 0 1 2.07 11Zm10.74 6.48A17.17 17.17 0 0 0 14.23 11h3.7a8 8 0 0 1-5.12 6.48Z" fill="#005f9e"/></svg>
+<svg viewBox="0 0 20 20" fill="#005f9e" xmlns="http://www.w3.org/2000/svg"><path d="M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18c-.61-.24-2-2.63-2.23-7h4.46c-.23 4.36-1.62 6.75-2.23 7Zm0-16c.61.24 2 2.63 2.23 7H7.77C8 4.64 9.39 2.25 10 2Zm7.93 7h-3.7a17.17 17.17 0 0 0-1.42-6.48A8 8 0 0 1 17.93 9ZM7.19 2.52A17.17 17.17 0 0 0 5.77 9h-3.7a8 8 0 0 1 5.12-6.48ZM2.07 11h3.7a17.17 17.17 0 0 0 1.42 6.48A8 8 0 0 1 2.07 11Zm10.74 6.48A17.17 17.17 0 0 0 14.23 11h3.7a8 8 0 0 1-5.12 6.48Z" fill="#005f9e"/></svg>

package/dist/luna/images/user.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.523438C4.48 0.523438 0 5.00344 0 10.5234C0 16.0434 4.48 20.5234 10 20.5234C15.52 20.5234 20 16.0434 20 10.5234C20 5.00344 15.52 0.523438 10 0.523438ZM10 18.5234C8.55 18.5234 7.18 18.1234 6.01 17.4434C6.05 16.3734 6.93 15.5234 8 15.5234H12C13.08 15.5234 13.95 16.3834 13.99 17.4434C12.81 18.1234 11.45 18.5234 10 18.5234ZM15.72 16.1034C15.15 14.6034 13.7 13.5234 12 13.5234H8C6.29 13.5234 4.86 14.6034 4.29 16.1134C2.88 14.6734 2 12.6934 2 10.5234C2 6.11344 5.59 2.52344 10 2.52344C14.41 2.52344 18 6.11344 18 10.5234C18 12.6934 17.13 14.6634 15.72 16.1034Z" fill="#0063A3"/>
+<path d="M10 4.52344C7.79 4.52344 6 6.31344 6 8.52344C6 10.7334 7.79 12.5234 10 12.5234C12.21 12.5234 14 10.7334 14 8.52344C14 6.31344 12.21 4.52344 10 4.52344ZM10 10.5234C8.9 10.5234 8 9.62344 8 8.52344C8 7.42344 8.9 6.52344 10 6.52344C11.1 6.52344 12 7.42344 12 8.52344C12 9.62344 11.1 10.5234 10 10.5234Z" fill="#0063A3"/>
+</svg>

package/dist/luna/images/waffle.svg

@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0H0V4H4V0Z" fill="#0063A3"/>
+<path d="M12 0H8V4H12V0Z" fill="#0063A3"/>
+<path d="M20 0H16V4H20V0Z" fill="#0063A3"/>
+<path d="M4 8H0V12H4V8Z" fill="#0063A3"/>
+<path d="M12 8H8V12H12V8Z" fill="#0063A3"/>
+<path d="M20 8H16V12H20V8Z" fill="#0063A3"/>
+<path d="M4 16H0V20H4V16Z" fill="#0063A3"/>
+<path d="M12 16H8V20H12V16Z" fill="#0063A3"/>
+<path d="M20 16H16V20H20V16Z" fill="#0063A3"/>
+</svg>

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

@@ -31,6 +31,8 @@ var _rightCaretLightGray = _interopRequireDefault(require("../../images/right-ca
 
 var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
 
+var _NavBar = require("..//NavBar/NavBar");
+
 var Button = (0, _component["default"])(function () {
   return Promise.resolve().then(function () {
     return (0, _interopRequireWildcard2["default"])(require("terra-one"));
@@ -53,6 +55,11 @@ var LanguageSelector = function LanguageSelector(_ref) {
       handleLanguageSelectorDeployed = _ref$handleLanguageSe === void 0 ? function () {} : _ref$handleLanguageSe,
       languageSelectorDeployed = _ref.languageSelectorDeployed;
 
+  var _useContext = (0, _react.useContext)(_NavBar.NavBarContext),
+      setDesktopSearchDeployed = _useContext.setDesktopSearchDeployed,
+      handleSectorFlyoutDeployed = _useContext.handleSectorFlyoutDeployed,
+      closeAllDropDowns = _useContext.closeAllDropDowns;
+
   var _useState = (0, _react.useState)(settings),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       currentSettings = _useState2[0],
@@ -112,6 +119,9 @@ var LanguageSelector = function LanguageSelector(_ref) {
   };
 
   var handleClick = function handleClick() {
+    closeAllDropDowns();
+    handleSectorFlyoutDeployed(false);
+    setDesktopSearchDeployed(false);
     handleLanguageSelectorDeployed();
     checkComponent = true;
   };

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

@@ -31,6 +31,10 @@ require("./NavBar.scss");
 
 var _logoIcon = _interopRequireDefault(require("../../images/logo-icon.svg"));
 
+var _user = _interopRequireDefault(require("../../images/user.svg"));
+
+var _WaffleMenu = _interopRequireDefault(require("../../components/WaffleMenu/WaffleMenu"));
+
 var Login = (0, _component["default"])(function () {
   return Promise.resolve().then(function () {
     return (0, _interopRequireWildcard2["default"])(require("../../components/Login/Login"));
@@ -158,7 +162,8 @@ var NavBar = function NavBar(props) {
       navigate = props.navigate,
       authLabels = props.authLabels,
       setGlobalSearch = props.setGlobalSearch,
-      globalSearch = props.globalSearch;
+      globalSearch = props.globalSearch,
+      waffleMenu = props.waffleMenu;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -288,6 +293,12 @@ var NavBar = function NavBar(props) {
       }
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    if (currentOpenMenu) {
+      handleSectorFlyoutDeployed(false);
+      handleLanguageSelectorDeployed(false);
+    }
+  }, [currentOpenMenu]);
 
   var closeAllDropDowns = function closeAllDropDowns() {
     setCurrentOpenMenu(null);
@@ -450,6 +461,12 @@ var NavBar = function NavBar(props) {
   };
 
   var regionLanguageID = "language-selector";
+
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
+      isWaffleMenuDeployed = _useState22[0],
+      setWaffleMenuDeployed = _useState22[1];
+
   return /*#__PURE__*/_react["default"].createElement(NavBarContext.Provider, {
     value: {
       mouse: mouse,
@@ -469,7 +486,15 @@ var NavBar = function NavBar(props) {
       closeAllDropDowns: closeAllDropDowns,
       checkScroll: checkScroll,
       preventImmediateMouseOver: preventImmediateMouseOver,
-      closeHamburger: closeHamburger
+      closeHamburger: closeHamburger,
+      sectorFlyoutDeployed: sectorFlyoutDeployed,
+      handleSectorFlyoutDeployed: handleSectorFlyoutDeployed,
+      languageSelectorDeployed: languageSelectorDeployed,
+      handleLanguageSelectorDeployed: handleLanguageSelectorDeployed,
+      desktopSearchDeployed: desktopSearchDeployed,
+      setDesktopSearchDeployed: setDesktopSearchDeployed,
+      isWaffleMenuDeployed: isWaffleMenuDeployed,
+      setWaffleMenuDeployed: setWaffleMenuDeployed
     }
   }, /*#__PURE__*/_react["default"].createElement("nav", {
     className: "ter-navbar ter-navbar".concat(isHidden && ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.scrollY) > 100 && !desktopSearchDeployed ? "--is-hidden" : "--is-showing"),
@@ -501,17 +526,24 @@ var NavBar = function NavBar(props) {
     desktopSearchDeployed: desktopSearchDeployed,
     setDesktopSearchDeployed: setDesktopSearchDeployed,
     globalSearch: globalSearch,
-    setGlobalSearch: setGlobalSearch
-  }, !disableLogin && /*#__PURE__*/_react["default"].createElement(Login, {
-    loginPage: loginPage,
-    login: login,
-    isHidden: disableLogin,
-    Link: Link,
-    isAuthenticated: isAuthenticated,
-    userProfile: userProfile,
-    logout: logout,
-    authLabels: authLabels
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+    setGlobalSearch: setGlobalSearch,
+    waffleMenu: true
+  }, /*#__PURE__*/_react["default"].createElement(_WaffleMenu["default"], {
+    links: waffleMenu === null || waffleMenu === void 0 ? void 0 : waffleMenu.links,
+    cta: waffleMenu === null || waffleMenu === void 0 ? void 0 : waffleMenu.cta,
+    Link: Link
+  }), !disableLogin && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: "ter-utility-nav__my-account",
+    onClick: function onClick() {
+      return handleSectorFlyoutDeployed();
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _user["default"],
+    width: "20",
+    height: "20",
+    alt: ""
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "luna-layout__navigation-padding ".concat(menuBarTheme ? "luna-layout__navigation-padding--".concat(menuBarTheme) : "")
   }, !disableMenus && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-navbar__wrapper \n            ".concat(menuBarTheme ? "ter-navbar__wrapper--".concat(menuBarTheme) : "", "\n            ").concat(displayIcons ? "ter-navbar__wrapper--with-icons" : "", "\n            ").concat(displayIcons && menuBarTheme ? "ter-navbar__wrapper--with-icons--".concat(menuBarTheme) : "", "\n          ")
@@ -535,7 +567,8 @@ var NavBar = function NavBar(props) {
     isAuthenticated: isAuthenticated,
     userProfile: userProfile,
     logout: logout,
-    authLabels: authLabels
+    authLabels: authLabels,
+    waffleMenu: waffleMenu
   }), subNavDisplay ? /*#__PURE__*/_react["default"].createElement(SubNav, {
     Link: Link,
     breadcrumbs: subNavData === null || subNavData === void 0 ? void 0 : subNavData.breadcrumbs,
@@ -546,7 +579,10 @@ var NavBar = function NavBar(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-navbar__flyout-btn",
     onClick: function onClick() {
-      return handleSectorFlyoutDeployed();
+      closeAllDropDowns();
+      handleLanguageSelectorDeployed(false);
+      setDesktopSearchDeployed(false);
+      handleSectorFlyoutDeployed();
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-navbar__flyout-caret"

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

@@ -570,6 +570,20 @@
       right: 16px;
     }
   }
+
+  &__my-account {
+    display: flex;
+    @media screen and (max-width: $breakpoint-sm) {
+      display: none;
+    }
+    align-items: center;
+    margin: 0 25px;
+    padding: 7px 4px 7px 4px;
+    border-bottom: 3px solid transparent;    
+    &:hover {
+      border-bottom: 3px solid $trimble-gold;
+    }
+  }
 }
 
 @media screen and (-ms-high-contrast: active),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.508",
+  "version": "3.1.510",
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -51,7 +51,7 @@
     "react-scroll": "^1.8.7",
     "react-slidedown": "^2.4.7",
     "smoothscroll-polyfill": "^0.4.4",
-    "terra-one": "^3.0.170"
+    "terra-one": "^3.0.171"
   },
   "scripts": {
     "start": "start-storybook -p 9009 -s public",