luna-one 3.1.354 → 3.1.358

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

@@ -102,7 +102,19 @@ var NavBarHandler = function NavBarHandler(_ref) {
     saveLanguage: saveLanguage,
     searchComponent: searchComponent,
     searchDeployed: searchDeployed,
-    setSearchDeployed: setSearchDeployed
+    setSearchDeployed: setSearchDeployed,
+    loginPage: function loginPage() {
+      return data === null || data === void 0 ? void 0 : data.loginPage();
+    },
+    logout: function logout() {
+      return data === null || data === void 0 ? void 0 : data.logout();
+    },
+    isAuthenticated: data === null || data === void 0 ? void 0 : data.isAuthenticated,
+    userProfile: data === null || data === void 0 ? void 0 : data.userProfile,
+    disableMenus: data === null || data === void 0 ? void 0 : data.disableMenus,
+    displayIcons: data === null || data === void 0 ? void 0 : data.displayIcons,
+    displaySectorName: data === null || data === void 0 ? void 0 : data.displaySectorName,
+    theme: data === null || data === void 0 ? void 0 : data.theme
   });
 };
 

package/dist/luna/components/ComparisonTable/ComparisonTable.scss

@@ -108,23 +108,17 @@
       top: 0;
       right: 0;
       bottom: 0;
-      left: 0;
       position: absolute;
       background-color: $white;
       border-bottom: 1px solid $trimble-blue;
       border-right: 1px solid $trimble-blue;
-      width: 145px;
+      width: 161px;
       border-left: 1px solid $white;
-      @media screen and (min-width: $breakpoint-sm) {
-        width: 160px;
-      }
     }
   }
   &__row {
     &--header {
       font-weight: 600;
-      position: -webkit-sticky;
-      position: sticky;
       top: 60px;
       left: 0;
       right: 0;
@@ -135,8 +129,6 @@
     height: 60px; // to allow for two lines of text
     left: 0;
     right: 0;
-    position: -webkit-sticky;
-    position: sticky;
     z-index: 5;
     top: 0;
   }
@@ -159,6 +151,7 @@
   &__group-title .ter-comparison-table__blank > span {
     background-color: $white;
     border-bottom: none;
+
   }
   &__comparison-cell {
     display: flex;

package/dist/luna/components/InPageJumpNav/InPageJumpNav.js

@@ -45,7 +45,7 @@ var InPageJumpNav = function InPageJumpNav(_ref) {
   var observerOptions = {
     root: null,
     rootMargin: "0px",
-    threshold: [0, 0.25, 0.5, 0.75, 1]
+    threshold: [0.25, 0.5, 0.75, 1]
   };
   var observer = (0, _react.useMemo)(function () {
     return new IntersectionObserver(function (pageSections, observer) {

package/dist/luna/components/InPageJumpNav/InPageJumpNavMethods.js

@@ -49,12 +49,13 @@ var scrollToActiveItem = function scrollToActiveItem(activeItem) {
       _smoothscrollPolyfill.default.polyfill();
 
       activeItem.scrollIntoView({
-        behavior: "smooth"
+        behavior: "smooth",
+        block: "start"
       });
     } else {
       // if user is on any other browser, we can use the scrollTo with behavior "smooth"
       window.scrollTo({
-        top: activeItem.offsetTop,
+        top: activeItem.offsetTop > 153 ? activeItem.offsetTop - 153 : activeItem.offsetTop,
         left: 0,
         behavior: "smooth"
       });

package/dist/luna/components/Login/Login.js

@@ -29,17 +29,27 @@ var Login = function Login(_ref) {
   var _login$userInformatio, _login$userInformatio2, _login$userInformatio3, _login$userInformatio4;
 
   var login = _ref.login,
-      isHidden = _ref.isHidden;
+      isHidden = _ref.isHidden,
+      loginPage = _ref.loginPage,
+      Link = _ref.Link,
+      isAuthenticated = _ref.isAuthenticated,
+      userProfile = _ref.userProfile,
+      logout = _ref.logout;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       toggle = _useState2[0],
       setToggle = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(_downArrow.default),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      image = _useState4[0],
-      setImage = _useState4[1];
+      showSignout = _useState4[0],
+      setShowSignout = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(_downArrow.default),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      image = _useState6[0],
+      setImage = _useState6[1];
 
   var ref = (0, _react.useRef)(null);
 
@@ -110,12 +120,50 @@ var Login = function Login(_ref) {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement("article", {
-    className: mouse ? "sketchup-login" : "sketchup-login tagFocus",
+  var toggleSignout = function toggleSignout() {
+    setShowSignout(!showSignout);
+  };
+
+  var handleClickLogout = function handleClickLogout() {
+    setShowSignout(false);
+    logout();
+  };
+
+  var handleClickLogin = function handleClickLogin() {
+    loginPage();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loginPage && !isAuthenticated ? /*#__PURE__*/_react.default.createElement("a", {
+    onClick: handleClickLogin,
+    className: "login-button",
     style: {
       display: isHidden ? "none" : ""
+    }
+  }, "Login") : loginPage && isAuthenticated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
+    className: "login"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    onClick: function onClick() {
+      return toggleSignout();
+    },
+    className: "login__text"
+  }, "Welcome,", /*#__PURE__*/_react.default.createElement("span", {
+    className: "login__user"
+  }, " ".concat(userProfile.firstName))), /*#__PURE__*/_react.default.createElement("section", {
+    className: "logout",
+    style: {
+      display: showSignout ? "" : "none"
+    }
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    onClick: function onClick() {
+      return handleClickLogout();
     },
-    id: _lodash.default.uniqueId("id-")
+    className: "logout__button"
+  }, "Log Out")))) : /*#__PURE__*/_react.default.createElement("article", {
+    className: mouse ? "sketchup-login" : "sketchup-login tagFocus",
+    id: _lodash.default.uniqueId("id-"),
+    style: {
+      display: isHidden ? "none" : ""
+    }
   }, login && login.content && login.content.text && !login.loggedIn && /*#__PURE__*/_react.default.createElement("a", {
     onClick: function onClick() {
       return login.handleLogin();
@@ -133,7 +181,7 @@ var Login = function Login(_ref) {
   }, login.content.text), login && login.loggedIn && /*#__PURE__*/_react.default.createElement("img", {
     tagIndex: mouse ? "" : "0",
     className: mouse ? "sketchup-login__user" : "sketchup-login__user tagFocus",
-    src: _userProfile.default,
+    src: userProfile,
     onClick: hangleToggle
   }), login && login.loggedIn && /*#__PURE__*/_react.default.createElement("img", {
     className: "sketchup-login__down-arrow",
@@ -155,7 +203,7 @@ var Login = function Login(_ref) {
     className: "sketchup-login__user-name"
   }, login.userInformation.name), login && login.userInformation && login.userInformation.email && /*#__PURE__*/_react.default.createElement("p", {
     className: "sketchup-login__user-email"
-  }, login.userInformation.email))), renderListItems()));
+  }, login.userInformation.email))), renderListItems())));
 };
 
 var _default = Login;

package/dist/luna/components/Login/Login.scss

@@ -138,3 +138,25 @@
 .sketchup-login.tagFocus:focus {
   outline: 2px solid $sky-blue !important;
 }
+
+.login {
+  position:relative;
+  &__text {
+    @include benton-normal();
+    font-size: $body-font-size;
+    color: $mep-blue-2;
+    margin: 0 16px 0 16px;
+    cursor: pointer;
+  }
+  &__user {
+    @include benton-bold();
+  }
+  .logout {
+    @include benton-bold();
+    position: absolute;
+    width: 100%;
+    background-color: $white;
+    margin-top: 13px;
+    border-top: 4px solid $trimble-gold;
+  }
+}

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

@@ -19,6 +19,8 @@ require("./MegaMenu.scss");
 
 var _crossMediumBlue = _interopRequireDefault(require("../../images/cross-medium-blue.svg"));
 
+var _crossMediumWhite = _interopRequireDefault(require("../../images/cross-medium-white.svg"));
+
 var _formatID = _interopRequireDefault(require("../../utils/formatID"));
 
 var _FeatureSection = require("./menu-generators/FeatureSection");
@@ -44,7 +46,9 @@ var MegaMenu = function MegaMenu(props) {
       currentOpenMenu = props.currentOpenMenu,
       collapsed = props.collapsed,
       isOpen = props.isOpen,
-      Link = props.Link;
+      Link = props.Link,
+      displayIcons = props.displayIcons,
+      theme = props.theme;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -234,7 +238,7 @@ var MegaMenu = function MegaMenu(props) {
   return /*#__PURE__*/_react.default.createElement("div", {
     id: _lodash.default.uniqueId("mega-menu-"),
     tabIndex: mouse ? "" : "0",
-    className: "ter-mega-menu ".concat(isOpen ? "ter-mega-menu--is-open" : "", " ").concat(mouse ? "" : "tabFocus", " ").concat(returnDeployedChildClass()),
+    className: "ter-mega-menu ".concat(isOpen ? "ter-mega-menu--is-open" : "", " ").concat(mouse ? "" : "tabFocus", " ").concat(returnDeployedChildClass(), "\n      ").concat(displayIcons ? "ter-mega-menu--with-icon" : ""),
     onKeyDown: function onKeyDown(e) {
       return mouseOverWithKeys(e);
     },
@@ -246,13 +250,13 @@ var MegaMenu = function MegaMenu(props) {
     "aria-label": "".concat(content.text, " menu")
   }, /*#__PURE__*/_react.default.createElement("p", {
     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" : "")
+    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        ")
   }, content.text, /*#__PURE__*/_react.default.createElement("img", {
     id: _lodash.default.uniqueId("cross-icon-"),
-    src: _crossMediumBlue.default,
+    src: theme === "blue" ? _crossMediumWhite.default : _crossMediumBlue.default,
     alt: "cross icon",
     "aria-label": isOpen ? "Opened" : "Closed",
-    className: "ter-nav-icon-cross ".concat(isOpen ? "ter-nav-icon-cross--is-open" : "")
+    className: "ter-nav-icon-cross ".concat(isOpen ? "ter-nav-icon-cross--is-open" : "", "\n          ")
   })), /*#__PURE__*/_react.default.createElement("section", {
     //Section wrapper class is determined by the menu type
     className: "ter-mega-menu__".concat(menuType, " ").concat(isOpen ? "ter-mega-menu__".concat(menuType, "--is-open ") : "", "\n        "),

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

@@ -9,6 +9,11 @@
   &.tabFocus:focus {
     outline: 2px solid $sky-blue;
   }
+  &--with-icon {
+    height: 56px;
+    padding: 1px 0 20px 0;
+
+  }
 
   &__title-link {
     text-decoration: none;
@@ -67,9 +72,22 @@
     border-bottom: 3px solid transparent;
     white-space: nowrap;
     padding: 16px 8px;
+    &--blue {
+      color: white
+    }
+    &--with-icon {
+      height: 33px !important;
+      padding: 3px 8px 8px;
+      &--blue {
+        color: white
+      }
+    }
 
     @media screen and (min-width: $breakpoint-md) {
       padding: 16px 18px;
+      &--with-icon {
+        padding: 5px 8px 8px;
+      }
     }
 
     &--is-open,

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

@@ -54,7 +54,8 @@ var NavBarTop = function NavBarTop(props) {
       saveLanguage = props.saveLanguage,
       searchComponent = props.searchComponent,
       searchDeployed = props.searchDeployed,
-      setSearchDeployed = props.setSearchDeployed;
+      setSearchDeployed = props.setSearchDeployed,
+      displaySectorName = props.displaySectorName;
   var inputFocus = (0, _utilizeFocus.utilizeFocus)();
 
   var _useContext = (0, _react.useContext)(_NavBar.NavBarContext),
@@ -200,10 +201,10 @@ var NavBarTop = function NavBarTop(props) {
     },
     "aria-label": "Link to homepage"
   }, /*#__PURE__*/_react.default.createElement("img", {
-    className: mouse ? "ter-navbar-top__logo" : "ter-navbar-top__logo tabFocus",
+    className: "".concat(mouse ? "ter-navbar-top__logo" : "ter-navbar-top__logo tabFocus", "\n                  ").concat(!displaySectorName ? "ter-navbar-top__logo--no-sector-name" : "", "\n                "),
     src: logo === null || logo === void 0 ? void 0 : logo.url,
     alt: logo === null || logo === void 0 ? void 0 : logo.altText
-  }), divisionName !== "Global" && /*#__PURE__*/_react.default.createElement("p", {
+  }), (divisionName && divisionName) !== "Global" && /*#__PURE__*/_react.default.createElement("p", {
     className: "ter-navbar-top__division-name"
   }, divisionName))), /*#__PURE__*/_react.default.createElement("div", {
     className: "ter-navbar-top__right"

package/dist/luna/components/NavBarTop/NavBarTop.scss

@@ -75,6 +75,9 @@
     height: 25px;
     width: 112px;
     margin: 0 8px 0 0 !important;
+    &--no-sector-name {
+      width: 289px
+    }
 
     &-link {
       display: -webkit-box;
@@ -294,7 +297,7 @@
   &__link {
     font-size: $eyebrow-font-size;
     margin: 0 20px;
-    padding-right: 48px;
+    padding-right: 0px;
     @media screen and (max-width: $breakpoint-sm) {
       padding-right: 6px;
     }

package/dist/luna/images/cross-medium-white.svg

@@ -0,0 +1,5 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" width="1" height="9" fill="#ffffff"/>
+  <rect x="9" y="4" width="1" height="9" transform="rotate(90 9 4)" fill="#ffffff"/>
+</svg>

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

@@ -78,8 +78,10 @@ var NavBar = function NavBar(props) {
       featuredLink = props.featuredLink,
       searchPlaceholder = props.searchPlaceholder,
       disableLogin = props.disableLogin,
+      disableSearch = props.disableSearch,
       disableLanguageRegion = props.disableLanguageRegion,
       disableSectorFlyOut = props.disableSectorFlyOut,
+      disableMenus = props.disableMenus,
       login = props.login,
       navOptions = props.navOptions,
       isExpanded = props.isExpanded,
@@ -98,7 +100,14 @@ var NavBar = function NavBar(props) {
       saveLanguage = _props$saveLanguage === void 0 ? function (language) {} : _props$saveLanguage,
       searchComponent = props.searchComponent,
       searchDeployed = props.searchDeployed,
-      setSearchDeployed = props.setSearchDeployed;
+      setSearchDeployed = props.setSearchDeployed,
+      isAuthenticated = props.isAuthenticated,
+      userProfile = props.userProfile,
+      loginPage = props.loginPage,
+      logout = props.logout,
+      displayIcons = props.displayIcons,
+      displaySectorName = props.displaySectorName,
+      theme = props.theme;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -251,40 +260,60 @@ var NavBar = function NavBar(props) {
     e.stopPropagation();
   };
 
+  var NavOption = function NavOption(_ref) {
+    var displayIcons = _ref.displayIcons,
+        option = _ref.option,
+        children = _ref.children;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayIcons ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "ter-navbar__nav--with-icons"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "ter-navbar__nav--with-icons--icon"
+    }, /*#__PURE__*/_react.default.createElement(_terraOne.Icon, {
+      type: option === null || option === void 0 ? void 0 : option.icon,
+      size: "20px",
+      color: theme === "blue" ? "#ffffff" : "#0063a3",
+      className: "ter-navbar__nav--icon "
+    })), children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children));
+  };
+
   var generateNavOptions = function generateNavOptions() {
-    return navOptions.map(function (option) {
-      if (option.type === "category") {
-        var _option$links;
-
-        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;
-        return /*#__PURE__*/_react.default.createElement(_MegaMenu.default, {
-          key: option.text,
-          isOpen: currentOpenMenu === option.text,
-          content: option,
-          Link: Link,
-          collapsed: isCollapsed ? true : !isExpanded,
-          currentOpenMenu: currentOpenMenu
-        });
-      } else if (option.type === "links") {
-        return /*#__PURE__*/_react.default.createElement(_NavMiniMenu.default, {
-          navText: option.text,
-          links: option.links,
-          key: option.text,
-          isOpen: currentOpenMenu === option.text,
-          Link: Link
-        });
-      } else {
-        return /*#__PURE__*/_react.default.createElement(_terraOne.LunaLink, {
-          to: option.url,
-          tabIndex: mouse ? "" : "0",
-          href: option.url,
-          key: option.text,
-          className: mouse ? "ter-navbar__nav-link" : "ter-navbar__nav-link tabFocus",
-          id: (0, _formatID.default)("".concat(option.text, "-navbar-nav-link")),
-          Link: Link,
-          onClick: closeAllDropDowns
-        }, /*#__PURE__*/_react.default.createElement("p", null, option.text));
-      }
+    return navOptions === null || navOptions === void 0 ? void 0 : navOptions.map(function (option) {
+      var _option$links;
+
+      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;
+      return /*#__PURE__*/_react.default.createElement(NavOption, {
+        displayIcons: displayIcons,
+        option: option
+      }, option.type === "category" ? /*#__PURE__*/_react.default.createElement(_MegaMenu.default, {
+        key: option.text,
+        isOpen: currentOpenMenu === option.text,
+        content: option,
+        Link: Link,
+        collapsed: isCollapsed ? true : !isExpanded,
+        currentOpenMenu: currentOpenMenu,
+        displayIcons: displayIcons,
+        icon: option.icon,
+        theme: theme
+      }) : option.type === "links" ? /*#__PURE__*/_react.default.createElement(_NavMiniMenu.default, {
+        navText: option.text,
+        links: option.links,
+        key: option.text,
+        isOpen: currentOpenMenu === option.text,
+        Link: Link,
+        displayIcons: displayIcons,
+        icon: option.icon
+      }) : /*#__PURE__*/_react.default.createElement(_terraOne.LunaLink, {
+        to: option.url,
+        tabIndex: mouse ? "" : "0",
+        href: option.url,
+        key: option.text,
+        className: "".concat(mouse ? "ter-navbar__nav-link" : "ter-navbar__nav-link tabFocus", " \n                ").concat(theme ? "ter-navbar__nav-link--".concat(theme) : "", "\n                ").concat(displayIcons ? "ter-navbar__nav-link--with-icon" : "", "\n                ").concat(displayIcons && theme ? "ter-navbar__nav-link--with-icon--".concat(theme) : ""),
+        id: (0, _formatID.default)("".concat(option.text, "-navbar-nav-link")),
+        Link: Link,
+        onClick: closeAllDropDowns,
+        displayIcons: displayIcons,
+        icon: option.icon
+      }, /*#__PURE__*/_react.default.createElement("p", null, option.text)));
     });
   };
 
@@ -355,6 +384,7 @@ var NavBar = function NavBar(props) {
     regionLanguageID: regionLanguageID,
     Link: Link,
     disableLogin: disableLogin,
+    disableSearch: disableSearch,
     disableLanguageRegion: disableLanguageRegion,
     disableSectorFlyOut: disableSectorFlyOut,
     languageSelectorData: languageSelectorData,
@@ -363,25 +393,29 @@ var NavBar = function NavBar(props) {
     saveLanguage: saveLanguage,
     searchComponent: searchComponent,
     searchDeployed: searchDeployed,
-    setSearchDeployed: setSearchDeployed
-  }, /*#__PURE__*/_react.default.createElement(_Login.default, {
+    setSearchDeployed: setSearchDeployed,
+    displaySectorName: displaySectorName
+  }, !disableLogin && /*#__PURE__*/_react.default.createElement(_Login.default, {
+    loginPage: loginPage,
     login: login,
-    isHidden: disableLogin
+    isHidden: disableLogin,
+    Link: Link,
+    isAuthenticated: isAuthenticated,
+    userProfile: userProfile,
+    logout: logout
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "luna-layout__navigation-padding"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ter-navbar__wrapper"
+    className: "luna-layout__navigation-padding ".concat(theme ? "luna-layout__navigation-padding--".concat(theme) : "")
+  }, !disableMenus && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ter-navbar__wrapper \n            ".concat(theme ? "ter-navbar__wrapper--".concat(theme) : "", "\n            ").concat(displayIcons ? "ter-navbar__wrapper--with-icons" : "", "\n            ").concat(displayIcons && theme ? "ter-navbar__wrapper--with-icons--".concat(theme) : "", "\n          ")
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: _lodash.default.uniqueId("id-"),
-    className: "ter-navbar__menus-wrapper"
+    className: "ter-navbar__menus-wrapper ".concat(displayIcons ? "ter-navbar__menus-wrapper--with-icons" : "")
   }, generateNavOptions(), featuredLink && generateFeaturedLink()))), /*#__PURE__*/_react.default.createElement(_MobileNav.default, {
     rightLinks: rightLinks,
     navOptions: navOptions,
     disableLogin: disableLogin,
     disableLanguageRegion: disableLanguageRegion,
     disableSectorFlyOut: disableSectorFlyOut,
-    Link: Link,
-    login: login,
     handleSectorFlyoutDeployed: handleSectorFlyoutDeployed,
     sectorFlyoutLabel: sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.mobileLabel,
     languageSelectorData: languageSelectorData,

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

@@ -26,6 +26,15 @@
       height: 56px;
       opacity: 1;
       background: $white;
+      &--blue {
+        background: $trimble-blue;
+      }
+      &--with-icons {
+        height: 81px;
+        &--blue {
+          background: $trimble-blue;
+        }
+      }
     }
   }
 
@@ -96,9 +105,17 @@
     grid-column: 2;
     overflow: hidden;
     margin: 16px 0 0 -8px;
+    
+    &--with-icons {
+      overflow: unset;
+      margin: 16px 0 0;
+    }
 
     @media screen and (min-width: $breakpoint-md) {
       margin: 16px 0 0 -16px;
+      &--with-icons {
+        margin: 16px 0 0;
+      }
     }
 
     .ter-navbar-featured-link {
@@ -148,6 +165,10 @@
       height: 82px;
     }
 
+    &--with-icons {
+      height: unset
+    }
+
     &:hover {
       cursor: pointer;
     }
@@ -270,6 +291,10 @@
         display: block;
         margin: auto;
       }
+      &--with-icons {
+        height: unset;
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -312,6 +337,26 @@
         white-space: nowrap;
       }
     }
+    &--blue {
+      p {
+        color: white
+      }
+    }
+    &--with-icon {
+      -webkit-transform: translateY(4px);
+      -ms-transform: translateY(4px);
+      transform: translateY(4px);
+      height: 30px;
+      p {
+        padding: 0;
+        margin-bottom: 0;
+      }
+      &--blue {
+        p {
+          color: white
+        }
+      }
+    }
 
     &:hover {
       text-decoration: none;
@@ -379,6 +424,21 @@
       }
     }
   }
+  &__nav--with-icons {
+    display: flex;
+    flex-direction: column;
+    height: 56px;
+    padding: 0 5px;
+    &:not(:first-child) {
+      padding: 0 32.5px;
+    }
+    &:first-child {
+      padding-right: 32.5px;
+    }
+    &--icon {
+      margin: auto
+    }
+  }
 }
 
 .ter-utility-nav {

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

@@ -36,7 +36,8 @@ var NavMiniMenu = function NavMiniMenu(props) {
   var navText = props.navText,
       links = props.links,
       Link = props.Link,
-      isOpen = props.isOpen;
+      isOpen = props.isOpen,
+      displayIcons = props.displayIcons;
 
   var _useIsChrome = (0, _useIsChrome2.default)(),
       isChrome = _useIsChrome.isChrome;
@@ -92,7 +93,7 @@ var NavMiniMenu = function NavMiniMenu(props) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     id: _lodash.default.uniqueId("mini-menu-"),
-    className: "".concat(mouse ? "ter-nav-mini-menu" : "ter-nav-mini-menu tabFocus", " ").concat(isChrome ? "ter-nav-mini-menu--chrome-browser" : ""),
+    className: "".concat(mouse ? "ter-nav-mini-menu" : "ter-nav-mini-menu tabFocus", " ").concat(isChrome ? "ter-nav-mini-menu--chrome-browser" : "", " ").concat(displayIcons ? "ter-nav-mini-menu--with-icons" : ""),
     onKeyDown: function onKeyDown(e) {
       return mouseOverWithKeys(e, navText);
     },
@@ -105,7 +106,7 @@ var NavMiniMenu = function NavMiniMenu(props) {
     "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")
+    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" : "")
   }, navText, /*#__PURE__*/_react.default.createElement("img", {
     id: _lodash.default.uniqueId("cross-icon-"),
     src: _crossMediumBlue.default,

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

@@ -25,12 +25,10 @@ require("./SubNav.scss");
 
 var _ellipses = _interopRequireDefault(require("../../../application/assets/images/ellipses.svg"));
 
-var _caratDown = _interopRequireDefault(require("../../../application/assets/images/carat-down.svg"));
-
-var _caratUp = _interopRequireDefault(require("../../../application/assets/images/carat-up.svg"));
-
 var _close = _interopRequireDefault(require("../../../application/assets/images/close.svg"));
 
+var _SubNavSiblingsMenu = _interopRequireDefault(require("./SubNavSiblingsMenu"));
+
 var SubNav = function SubNav(_ref) {
   var _window, _window$location, _breadcrumbs, _breadcrumbs2;
 
@@ -56,6 +54,23 @@ var SubNav = function SubNav(_ref) {
       openSiblings = _useState4[0],
       setOpenSiblings = _useState4[1];
 
+  var handleScroll = function handleScroll() {
+    setOpenSiblings(false);
+    setOpenBreadcrumbs(false);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (typeof window !== "undefined") {
+      window.addEventListener("scroll", handleScroll);
+    }
+
+    return function () {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+
   var getWindowDimensions = function getWindowDimensions() {
     var height = 0;
     var width = 0;
@@ -141,8 +156,35 @@ var SubNav = function SubNav(_ref) {
   }, breadcrumbs && (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) <= 3 && width > 600 ? breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.map(function (breadcrumb, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: "breadcrumb-".concat(i)
+    }, (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) === i + 1 ? /*#__PURE__*/_react.default.createElement(_SubNavSiblingsMenu.default, {
+      title: breadcrumb.title,
+      siblings: siblings,
+      isOpen: openSiblings,
+      width: width,
+      closeSiblingsWithEnter: closeSiblingsWithEnter,
+      path: path,
+      Link: Link,
+      onClose: function onClose() {
+        setOpenSiblings(false);
+        setOpenBreadcrumbs(false);
+      },
+      onClick: function onClick() {
+        setOpenSiblings(!openSiblings);
+        setOpenBreadcrumbs(false);
+      }
+    }) : breadcrumb.slug ? /*#__PURE__*/_react.default.createElement(_terraOne.LunaLink, {
+      to: breadcrumb.slug,
+      tabIndex: mouse ? "" : "0",
+      key: "".concat(breadcrumb.title, "-").concat(i),
+      className: mouse ? "ter-sub-nav__breadcrumbs__link" : "ter-sub-nav__breadcrumbs__link tabFocus",
+      target: "_self",
+      id: (0, _formatID.default)("".concat(breadcrumb.title, "-subnav-breadcumb")),
+      Link: Link
     }, /*#__PURE__*/_react.default.createElement("p", {
-      className: "ter-sub-nav__breadcrumbs__text ".concat(i === breadcrumbs.length - 1 ? "ter-sub-nav__breadcrumbs__text--last" : "")
+      className: "ter-sub-nav__breadcrumbs--link__text ".concat(i + 1 === (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && "ter-sub-nav__breadcrumbs--link__text--last")
+    }, breadcrumb.title)) : /*#__PURE__*/_react.default.createElement("p", {
+      key: "".concat(breadcrumb.title, "-").concat(i),
+      className: "ter-sub-nav__breadcrumbs__text"
     }, breadcrumb.title), i + 1 < (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react.default.createElement("span", {
       key: "divider-".concat(i),
       style: {
@@ -185,31 +227,42 @@ var SubNav = function SubNav(_ref) {
       display: "flex"
     },
     tabIndex: mouse ? "" : "0",
-    onClick: function onClick() {// setOpenSiblings(!openSiblings);
-      // setOpenBreadcrumbs(false);
-    } // onKeyDown={(e) => openSiblingsWithEnter(e)}
-    ,
+    onClick: function onClick() {
+      setOpenSiblings(!openSiblings);
+      setOpenBreadcrumbs(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return openSiblingsWithEnter(e);
+    },
     "aria-expanded": openBreadcrumbs,
     "aria-controls": "sub-nav-siblings",
     role: "button",
     id: (0, _formatID.default)("".concat((_breadcrumbs = breadcrumbs[(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) - 1]) === null || _breadcrumbs === void 0 ? void 0 : _breadcrumbs.title, "-subnav-breadcumb"))
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    onClick: function onClick() {// setOpenSiblings(!openSiblings);
-      // setOpenBreadcrumbs(false);
+  }, /*#__PURE__*/_react.default.createElement(_SubNavSiblingsMenu.default, {
+    title: (_breadcrumbs2 = breadcrumbs[(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) - 1]) === null || _breadcrumbs2 === void 0 ? void 0 : _breadcrumbs2.title,
+    siblings: siblings,
+    isOpen: openSiblings,
+    width: width,
+    closeSiblingsWithEnter: closeSiblingsWithEnter,
+    path: path,
+    Link: Link,
+    onClose: function onClose() {
+      setOpenSiblings(false);
+      setOpenBreadcrumbs(false);
     },
-    className: "ter-sub-nav__breadcrumbs--link__text ter-sub-nav__breadcrumbs--link__text--last ter-sub-nav__breadcrumbs--link__text--no-link"
-  }, (_breadcrumbs2 = breadcrumbs[(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) - 1]) === null || _breadcrumbs2 === void 0 ? void 0 : _breadcrumbs2.title))), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: function onClick() {
+      setOpenSiblings(!openSiblings);
+      setOpenBreadcrumbs(false);
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     id: "sub-nav-breadcrumbs",
+    className: "sub-nav-breadcrumbs",
     style: {
       position: width > 600 ? "absolute" : "fixed",
-      top: width > 600 ? "48px" : "108px",
+      top: "auto",
       left: width < 600 && "0px",
-      backgroundColor: "#0e416c",
       width: width > 600 ? "316px" : "100vw",
-      display: openBreadcrumbs ? "flex" : "none",
-      flexWrap: "wrap",
-      boxShadow: "0px -1px #0063A3",
-      padding: "20px"
+      display: openBreadcrumbs ? "flex" : "none"
     }
   }, width < 600 && /*#__PURE__*/_react.default.createElement("div", {
     className: "ter-sub-nav__close-btn",
@@ -242,52 +295,31 @@ var SubNav = function SubNav(_ref) {
       display: openBreadcrumbs ? "block" : "none"
     }
   })), breadcrumbs && (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.map(function (breadcrumb, i) {
-    return i + 1 < (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: "breadcrumb-".concat(i)
+    }, breadcrumb.slug && i + 1 < breadcrumbs.length ? /*#__PURE__*/_react.default.createElement(_terraOne.LunaLink, {
+      to: breadcrumb.slug,
+      tabIndex: mouse ? "" : "0",
+      key: breadcrumb.title,
+      className: mouse ? "ter-sub-nav__breadcrumbs__link" : "ter-sub-nav__breadcrumbs__link tabFocus",
+      target: "_self",
+      id: (0, _formatID.default)("".concat(breadcrumb.title, "-subnav-breadcumb")),
+      Link: Link,
+      style: openBreadcrumbs ? {
+        display: "block"
+      } : {
+        display: "none"
+      }
     }, /*#__PURE__*/_react.default.createElement("p", {
-      className: "ter-sub-nav__breadcrumbs__text  ter-sub-nav__breadcrumbs--link__text--no-link"
-    }, breadcrumb.title), i + 1 < (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) - 1 && /*#__PURE__*/_react.default.createElement("span", {
+      className: "ter-sub-nav__breadcrumbs--link__text ter-sub-nav__breadcrumbs--link__text--dropdown ".concat(i + 1 === (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && "ter-sub-nav__breadcrumbs--link__text--last")
+    }, breadcrumb.title)) : /*#__PURE__*/_react.default.createElement("p", {
+      className: "ter-sub-nav__breadcrumbs__text "
+    }, breadcrumb.title), i < (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) - 1 && /*#__PURE__*/_react.default.createElement("span", {
       style: {
         margin: "auto 0"
       }
     }, "\xA0\xA0/\xA0\xA0"));
-  })))), siblings && (siblings === null || siblings === void 0 ? void 0 : siblings.length) <= 3 && width > 700 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "ter-sub-nav ter-sub-nav__siblings ter-sub-nav__siblings--expanded"
-  }, siblings === null || siblings === void 0 ? void 0 : siblings.map(function (sibling, i) {
-    var active = path.includes("".concat(sibling.slug, "/")); // Commenting out breadcrumbs temporarily to disable linking - 20th December 2021.
-    // return sibling.slug ? (
-    //   <LunaLink
-    //     to={sibling.slug}
-    //     tabIndex={mouse ? "" : "0"}
-    //     key={sibling.pageName}
-    //     className={
-    //       mouse
-    //         ? "ter-sub-nav__siblings__link"
-    //         : "ter-sub-nav__siblings__link tabFocus"
-    //     }
-    //     target={
-    //       sibling.typeName === "ContentfulExternalLink"
-    //         ? "_blank"
-    //         : "_self"
-    //     }
-    //     id={formatID(`${sibling.pageName}-sub-nav-link`)}
-    //     Link={Link}
-    //   >
-    //     <p
-    //       className={`${
-    //         active && "ter-sub-nav__siblings__text--active"
-    //       } ter-sub-nav__siblings__text`}
-    //     >
-    //       {sibling.pageName}
-    //     </p>
-    //   </LunaLink>
-    // ) : (
-
-    return /*#__PURE__*/_react.default.createElement("p", {
-      key: sibling.pageName,
-      className: "ter-sub-nav__siblings__text"
-    }, sibling.pageName); // );
-  }))));
+  }))))));
 };
 
 var _default = SubNav;

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

@@ -1,5 +1,16 @@
 @import '../../../global-styles/terra.scss';
 
+.sub-nav-breadcrumbs {
+  flex-wrap: wrap;
+  box-shadow: 0px -1px #0063A3;
+  padding: 20px;
+  background-color: #0e416c;
+  margin-top: 49px;
+  @media screen and (max-width: $breakpoint-xs) {
+    padding-right: 50px;
+  }
+}
+
 .ter-sub-nav {
   color: $white;
   font-size: $eyebrow-font-size;
@@ -34,13 +45,19 @@
       display: block;
     }
   }
+
+  &__breadcrumbs {
+    display: flex;
+    flex-direction: row;
+    margin: 0 16px;
+    span {
+      opacity: 80%;
+    }
+  }
   
   &__breadcrumbs,
   &__siblings {
-    display: flex;
-    flex-direction: row;
     font-size: $body-font-size;
-    margin: 0 16px;
     &--link {
       font-size: $body-font-size;
       margin: auto 0;
@@ -48,9 +65,8 @@
       &__text {
         font-size: $body-font-size;
         margin: auto 0;
-        opacity: 80%;
+        opacity: 100%;
         &--last {
-          line-height: 3em;
           opacity: 100%;
           @include benton-medium();
         }
@@ -67,16 +83,13 @@
     &__text {
       margin: auto 0;
       font-size: $body-font-size;
-      opacity: 80%;
+      opacity: 50%;
       &--last {
         line-height: 3em;
         opacity: 100%;
         @include benton-medium();
       }
     }
-    span {
-      opacity: 80%;
-    }
 
     a {
       font-size: $body-font-size;
@@ -97,15 +110,12 @@
         margin: auto 0px;
       }
     }
-
-    @media screen and (max-width: $breakpoint-sm) {
-      margin: 0 16px;
-    }
   }
 
   &__breadcrumbs {
     margin: 0;
     &--ellipses-icon {
+      max-width: 100%;
       &:hover {
         cursor: pointer;
       }
@@ -141,18 +151,43 @@
     @media screen and (max-width: $breakpoint-sm) {
       margin: 0 16px;
     }
-    &--current-page p:hover {
-      box-shadow: none;
-    }
   }
   &__siblings {
-    justify-content: flex-end;
-    margin: 0 10px;
+    padding: 24px 20px;
+    position: relative;
+    @media screen and (min-width: $breakpoint-xs) {
+      left: calc(100% - 30px);
+    }
+
+    span {
+      opacity: 100%;
+    }
+
+    &__list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      &__list-item {
+        padding: 0;
+        margin: 0;
+      }
+      &__list-item + &__list-item {
+        margin-top: 20px;
+      }      
+  }
+
     &__link {
-      padding: 0 10px;
+      display: block;
+      &:hover .ter-sub-nav__siblings__text--dropdown {
+        color: $white;
+        box-shadow: 0px 2px $trimble-gold;
+        line-height: 1em;
+        cursor: pointer;
+      }
     }
 
     &__text {
+      line-height: 1em;
       &--active {
         opacity: 100%;
         @include benton-medium();
@@ -163,25 +198,10 @@
         }
       }
 
-      &:hover {
-        color: $white;
-        opacity: 100%;
-        box-shadow: 0px 3px $trimble-gold;
-        line-height: 3em;
-        cursor: pointer;
-      }
       &--dropdown {
         font-size: $body-font-size;
         line-height: 1em;
         margin-bottom: 0;
-        &:hover {
-          color: $white;
-          opacity: 100%;
-          box-shadow: 0px 2px $trimble-gold;
-          line-height: 1em;
-          cursor: pointer;
-          width: max-content;
-        }
       }
     }
 
@@ -198,9 +218,6 @@
     }
   }
 }
-a.ter-sub-nav__siblings__link {
-  margin-bottom: 16px;
-}
 
 .ter-sub-nav__siblings--expanded a.ter-sub-nav__siblings__link {
   margin: auto 0;

package/dist/luna/other-organisms/SubNav/SubNavSiblingsMenu.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
+
+var _terraOne = require("terra-one");
+
+var _formatID = _interopRequireDefault(require("../../utils/formatID"));
+
+require("./SubNav.scss");
+
+var _caratDown = _interopRequireDefault(require("../../../application/assets/images/carat-down.svg"));
+
+var _caratUp = _interopRequireDefault(require("../../../application/assets/images/carat-up.svg"));
+
+var _close = _interopRequireDefault(require("../../../application/assets/images/close.svg"));
+
+var _lodash = _interopRequireDefault(require("lodash"));
+
+var SubNavSiblingsMenu = function SubNavSiblingsMenu(_ref) {
+  var _window;
+
+  var title = _ref.title,
+      _ref$siblings = _ref.siblings,
+      siblings = _ref$siblings === void 0 ? [] : _ref$siblings,
+      isOpen = _ref.isOpen,
+      width = _ref.width,
+      closeSiblingsWithEnter = _ref.closeSiblingsWithEnter,
+      path = _ref.path,
+      _onClick = _ref.onClick,
+      onClose = _ref.onClose,
+      Link = _ref.Link;
+
+  var _useMouse = (0, _useMouse2.default)(),
+      mouse = _useMouse.mouse;
+
+  if ((siblings === null || siblings === void 0 ? void 0 : siblings.length) <= 1) {
+    return /*#__PURE__*/_react.default.createElement("p", {
+      className: "ter-sub-nav__breadcrumbs__text ter-sub-nav__breadcrumbs__text--last"
+    }, title);
+  } // REORDER SIBLINGS MENU
+
+
+  var siblingsOverview = siblings === null || siblings === void 0 ? void 0 : siblings.filter(function (d) {
+    var _d$pageName, _d$pageName$toLowerCa;
+
+    return (d === null || d === void 0 ? void 0 : (_d$pageName = d.pageName) === null || _d$pageName === void 0 ? void 0 : (_d$pageName$toLowerCa = _d$pageName.toLowerCase()) === null || _d$pageName$toLowerCa === void 0 ? void 0 : _d$pageName$toLowerCa.indexOf('overview')) === 0;
+  });
+  var siblingsContact = siblings === null || siblings === void 0 ? void 0 : siblings.filter(function (d) {
+    var _d$pageName2, _d$pageName2$toLowerC;
+
+    return (d === null || d === void 0 ? void 0 : (_d$pageName2 = d.pageName) === null || _d$pageName2 === void 0 ? void 0 : (_d$pageName2$toLowerC = _d$pageName2.toLowerCase()) === null || _d$pageName2$toLowerC === void 0 ? void 0 : _d$pageName2$toLowerC.indexOf('contact')) === 0;
+  });
+  var siblingsSubset = siblings === null || siblings === void 0 ? void 0 : siblings.filter(function (d) {
+    var _d$pageName3, _d$pageName3$toLowerC, _d$pageName4, _d$pageName4$toLowerC;
+
+    return (d === null || d === void 0 ? void 0 : (_d$pageName3 = d.pageName) === null || _d$pageName3 === void 0 ? void 0 : (_d$pageName3$toLowerC = _d$pageName3.toLowerCase()) === null || _d$pageName3$toLowerC === void 0 ? void 0 : _d$pageName3$toLowerC.indexOf('overview')) !== 0 && (d === null || d === void 0 ? void 0 : (_d$pageName4 = d.pageName) === null || _d$pageName4 === void 0 ? void 0 : (_d$pageName4$toLowerC = _d$pageName4.toLowerCase()) === null || _d$pageName4$toLowerC === void 0 ? void 0 : _d$pageName4$toLowerC.indexOf('contact')) !== 0;
+  });
+
+  var siblingsSubsetOrdered = _lodash.default.orderBy(siblingsSubset, ['pageName']);
+
+  var siblingsOrdered = [].concat((0, _toConsumableArray2.default)(siblingsOverview), (0, _toConsumableArray2.default)(siblingsSubsetOrdered), (0, _toConsumableArray2.default)(siblingsContact));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "row",
+      margin: "auto 0",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "ter-sub-nav__breadcrumbs__text ter-sub-nav__breadcrumbs__text--last",
+    onClick: function onClick(e) {
+      return _onClick(e);
+    },
+    style: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer"
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, title), /*#__PURE__*/_react.default.createElement("img", {
+    src: isOpen ? _caratUp.default : _caratDown.default,
+    alt: "carat",
+    className: "ter-sub-nav__siblings--carat-icon",
+    style: {
+      height: "24px",
+      padding: "8px",
+      cursor: "pointer"
+    }
+  })), /*#__PURE__*/_react.default.createElement("section", {
+    id: "sub-nav-siblings",
+    className: "ter-sub-nav__siblings",
+    style: {
+      backgroundColor: "#0e416c",
+      display: isOpen ? "block" : "none",
+      flexDirection: "column",
+      flexWrap: "wrap",
+      boxShadow: "0px -1px #0063A3",
+      position: width > 600 ? "absolute" : "fixed",
+      top: width > 600 ? "46px" : ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollY) > 0 ? "48px" : "108px",
+      left: width < 600 && "0px",
+      width: width > 600 ? "280px" : "100vw"
+    }
+  }, width < 600 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ter-sub-nav__close-btn",
+    onClick: function onClick(e) {
+      return onClose(e);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return closeSiblingsWithEnter(e);
+    },
+    style: {
+      backgroundColor: "#0063A3",
+      height: "44px",
+      width: "44px",
+      position: "absolute",
+      right: "0",
+      top: "0",
+      display: isOpen ? "block" : "none"
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    tabIndex: "0",
+    src: _close.default,
+    alt: "close",
+    className: "ter-sub-nav__close-btn--icon",
+    style: {
+      height: "100%",
+      width: "100%",
+      padding: "15px",
+      cursor: "pointer",
+      margin: "auto",
+      display: isOpen ? "block" : "none"
+    }
+  })), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "ter-sub-nav__siblings__list"
+  }, siblingsOrdered && (siblingsOrdered === null || siblingsOrdered === void 0 ? void 0 : siblingsOrdered.map(function (sibling, i) {
+    var active = sibling.slug.includes(path);
+    console.log('>', path, sibling.slug, active);
+    return sibling.slug && !active ? /*#__PURE__*/_react.default.createElement("li", {
+      className: "ter-sub-nav__siblings__list__list-item"
+    }, /*#__PURE__*/_react.default.createElement(_terraOne.LunaLink, {
+      to: sibling.slug,
+      tabIndex: mouse ? "" : "0",
+      key: sibling.pageName,
+      className: mouse ? "ter-sub-nav__siblings__link" : "ter-sub-nav__siblings__link tabFocus",
+      target: sibling.typeName === "ContentfulExternalLink" ? "_blank" : "_self",
+      id: (0, _formatID.default)("".concat(sibling.pageName, "-sub-nav-link")),
+      Link: Link
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(active && "ter-sub-nav__siblings__text--active--dropdown", " ter-sub-nav__siblings__text--dropdown")
+    }, sibling.pageName))) : /*#__PURE__*/_react.default.createElement("li", {
+      className: "ter-sub-nav__siblings__list__list-item"
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "ter-sub-nav__siblings__text"
+    }, sibling.pageName));
+  })))));
+};
+
+var _default = SubNavSiblingsMenu;
+exports.default = _default;

package/package.json

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