luna-one 3.1.594 → 3.1.596

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

@@ -1,289 +1,289 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-mobile-mega-menu {
-  padding: 0;
-  background: $white;
-  height: auto;
-  visibility: visible;
-  transition: 0.3s;
-  transform: translateX(0%);
-
-  &--inactive {
-    transform: translateX(-100%);
-    visibility: hidden;
-  }
-
-  &--reveal {
-    visibility: visible;
-    transform: translateX(0%);
-    position: absolute;
-    top: 0px;
-    width: 100vw;
-    z-index: 1;
-
-    &--from-left {
-      visibility: hidden;
-      transform: translateX(-100%);
-      position: absolute;
-      top: 0px;
-      width: 100vw;
-    }
-
-    &--from-right {
-      visibility: hidden;
-      transform: translateX(100%);
-      position: absolute;
-      width: 100vw;
-      top: 0px;
-      transition: 0.3s;
-
-      &--visible {
-        visibility: visible;
-      }
-
-      &--reverse {
-        transform: translateX(0%);
-      }
-    }
-  }
-
-  &__name {
-    font-size: $body-font-size;
-    margin: 0;
-    height: 60px;
-    line-height: 60px;
-    background: $trimble-blue;
-    color: $white;
-    padding: 0 16px;
-    @include benton-medium();
-    position: relative;
-    overflow: hidden;
-    transition: 0.3s;
-    border-bottom: 1px solid $white;
-    visibility: hidden;
-
-    &--open {
-      padding: 0 32px;
-      visibility: visible;
-      &:focus {
-        outline: 2px solid $trimble-gold;
-        outline-offset: -2px;
-        transition: outline 0s;
-        transition: outline-offset 0s;
-      }
-    }
-
-    &--open-parent {
-      padding: 0 16px;
-      visibility: visible;
-
-      &:focus {
-        outline: 2px solid $trimble-gold;
-        outline-offset: -2px;
-        transition: outline 0s;
-        transition: outline-offset 0s;
-      }
-    }
-
-    &: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 {
-    width: 10px;
-    position: absolute;
-    top: 24px;
-    right: 16px;
-    transition: 0.3s;
-
-    @media screen and (max-width: $breakpoint-xs) {
-      right: 24px;
-    }
-
-    &--up {
-      left: 16px;
-      transform: rotate(180deg);
-    }
-  }
-
-  &__category-container {
-    height: auto;
-    transition: 0.3s;
-    margin: 0;
-    &--is-open {
-      overflow: scroll;
-    }
-  }
-
-  &__bottom-link {
-    background: $glass-blue;
-    font-size: $body-font-size;
-    color: $white;
-    margin: 8px auto;
-    display: block;
-    width: min-content;
-    height: 32px;
-    line-height: 32px;
-    padding: 0 24px;
-  }
-  &-featured {
-    background-color: #DCEDF9;
-    padding-bottom: 10px;
-    .ter-mega-menu__category-title {
-      padding: 20px 16px 10px 16px;
-    }
-    .ter-feature-section__link {
-      padding: 4px 16px 16px 16px;
-      margin: 0;
-      display: block;
-      text-decoration: none;
-      &--underline {
-        font-size: 14px;
-        margin: 0;
-      }
-    }
-  }
-}
-
-.ter-mobile-mega-menu-category {
-  transition: 0.3s;
-  transform: translateX(0%);
-  visibility: visible;
-
-  &--active {
-    background: $trimble-blue;
-    color: $white;
-    transform: translateX(-100%);
-    visibility: hidden;
-  }
-
-  &--hidden {
-    visibility: hidden;
-  }
-
-  &__name,
-  &__single-link {
-    font-size: $body-font-size;
-    margin: 0;
-    height: 60px;
-    line-height: 60px;
-    background: $white;
-    color: $trimble-blue !important;
-    padding: 0 16px;
-    @include benton-medium();
-    position: relative;
-    display: block;
-    border-bottom: 1px solid $mep-gray-2;
-    //transition: 0.3s;
-    visibility: inherit;
-
-    &--active {
-      background: $trimble-blue;
-      color: $white;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:visited {
-      color: $trimble-dark-gray;
-    }
-
-    &:focus {
-      outline: 2px solid $sky-blue;
-      outline-offset: -2px;
-      transition: outline 0s;
-      transition: outline-offset 0s;
-    }
-
-    &--hidden {
-      visibility: hidden;
-      transition: 0.3s;
-    }
-
-    &--single {
-      font-size: $body-font-size;
-      margin: 0;
-      height: 60px;
-      line-height: 60px;
-      background: $white;
-      color: $trimble-blue;
-      @include benton-medium();
-      position: relative;
-
-      a {
-        :visited {
-          color: $trimble-blue;
-        }
-      }
-    }
-    &> *:not(a) {
-      pointer-events: none;
-    }
-  }
-
-  &__single-link {
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:visited {
-      color: $trimble-blue;
-    }
-  }
-
-  &__caret {
-    width: 10px;
-    position: absolute;
-    top: 24px;
-    right: 32px;
-    transition: 0.3s;
-
-    @media screen and (max-width: $breakpoint-xs) {
-      right: 24px;
-    }
-
-    &--up {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__submenu {
-    background: $white;
-    margin: 0;
-    overflow: hidden;
-    height: auto;
-    transition: 0.3s;
-    padding: 0;
-
-    &-link {
-      display: block;
-      padding: 0;
-      a {
-        padding: 0 16px 0 52px;
-
-        width: 100%;
-        height: 60px;
-        line-height: 60px;
-        color: $trimble-dark-gray !important;
-        font-size: $body-font-size;
-      }
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.ter-mobile-mega-menu {
+  padding: 0;
+  background: $white;
+  height: auto;
+  visibility: visible;
+  transition: 0.3s;
+  transform: translateX(0%);
+
+  &--inactive {
+    transform: translateX(-100%);
+    visibility: hidden;
+  }
+
+  &--reveal {
+    visibility: visible;
+    transform: translateX(0%);
+    position: absolute;
+    top: 0px;
+    width: 100vw;
+    z-index: 1;
+
+    &--from-left {
+      visibility: hidden;
+      transform: translateX(-100%);
+      position: absolute;
+      top: 0px;
+      width: 100vw;
+    }
+
+    &--from-right {
+      visibility: hidden;
+      transform: translateX(100%);
+      position: absolute;
+      width: 100vw;
+      top: 0px;
+      transition: 0.3s;
+
+      &--visible {
+        visibility: visible;
+      }
+
+      &--reverse {
+        transform: translateX(0%);
+      }
+    }
+  }
+
+  &__name {
+    font-size: $body-font-size;
+    margin: 0;
+    height: 60px;
+    line-height: 60px;
+    background: $trimble-blue;
+    color: $white;
+    padding: 0 16px;
+    @include benton-medium();
+    position: relative;
+    overflow: hidden;
+    transition: 0.3s;
+    border-bottom: 1px solid $white;
+    visibility: hidden;
+
+    &--open {
+      padding: 0 32px;
+      visibility: visible;
+      &:focus {
+        outline: 2px solid $trimble-gold;
+        outline-offset: -2px;
+        transition: outline 0s;
+        transition: outline-offset 0s;
+      }
+    }
+
+    &--open-parent {
+      padding: 0 16px;
+      visibility: visible;
+
+      &:focus {
+        outline: 2px solid $trimble-gold;
+        outline-offset: -2px;
+        transition: outline 0s;
+        transition: outline-offset 0s;
+      }
+    }
+
+    &: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 {
+    width: 10px;
+    position: absolute;
+    top: 24px;
+    right: 16px;
+    transition: 0.3s;
+
+    @media screen and (max-width: $breakpoint-xs) {
+      right: 24px;
+    }
+
+    &--up {
+      left: 16px;
+      transform: rotate(180deg);
+    }
+  }
+
+  &__category-container {
+    height: auto;
+    transition: 0.3s;
+    margin: 0;
+    &--is-open {
+      overflow: scroll;
+    }
+  }
+
+  &__bottom-link {
+    background: $glass-blue;
+    font-size: $body-font-size;
+    color: $white;
+    margin: 8px auto;
+    display: block;
+    width: min-content;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 24px;
+  }
+  &-featured {
+    background-color: #DCEDF9;
+    padding-bottom: 10px;
+    .ter-mega-menu__category-title {
+      padding: 20px 16px 10px 16px;
+    }
+    .ter-feature-section__link {
+      padding: 4px 16px 16px 16px;
+      margin: 0;
+      display: block;
+      text-decoration: none;
+      &--underline {
+        font-size: 14px;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.ter-mobile-mega-menu-category {
+  transition: 0.3s;
+  transform: translateX(0%);
+  visibility: visible;
+
+  &--active {
+    background: $trimble-blue;
+    color: $white;
+    transform: translateX(-100%);
+    visibility: hidden;
+  }
+
+  &--hidden {
+    visibility: hidden;
+  }
+
+  &__name,
+  &__single-link {
+    font-size: $body-font-size;
+    margin: 0;
+    height: 60px;
+    line-height: 60px;
+    background: $white;
+    color: $trimble-blue !important;
+    padding: 0 16px;
+    @include benton-medium();
+    position: relative;
+    display: block;
+    border-bottom: 1px solid $mep-gray-2;
+    //transition: 0.3s;
+    visibility: inherit;
+
+    &--active {
+      background: $trimble-blue;
+      color: $white;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:visited {
+      color: $trimble-dark-gray;
+    }
+
+    &:focus {
+      outline: 2px solid $sky-blue;
+      outline-offset: -2px;
+      transition: outline 0s;
+      transition: outline-offset 0s;
+    }
+
+    &--hidden {
+      visibility: hidden;
+      transition: 0.3s;
+    }
+
+    &--single {
+      font-size: $body-font-size;
+      margin: 0;
+      height: 60px;
+      line-height: 60px;
+      background: $white;
+      color: $trimble-blue;
+      @include benton-medium();
+      position: relative;
+
+      a {
+        :visited {
+          color: $trimble-blue;
+        }
+      }
+    }
+    &> *:not(a) {
+      pointer-events: none;
+    }
+  }
+
+  &__single-link {
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:visited {
+      color: $trimble-blue;
+    }
+  }
+
+  &__caret {
+    width: 10px;
+    position: absolute;
+    top: 24px;
+    right: 32px;
+    transition: 0.3s;
+
+    @media screen and (max-width: $breakpoint-xs) {
+      right: 24px;
+    }
+
+    &--up {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__submenu {
+    background: $white;
+    margin: 0;
+    overflow: hidden;
+    height: auto;
+    transition: 0.3s;
+    padding: 0;
+
+    &-link {
+      display: block;
+      padding: 0;
+      a {
+        padding: 0 16px 0 52px;
+
+        width: 100%;
+        height: 60px;
+        line-height: 60px;
+        color: $trimble-dark-gray !important;
+        font-size: $body-font-size;
+      }
+    }
+  }
+}

package/dist/luna/components/MobileMegaMenu/MobileMegaMenuCategory.js

@@ -1,15 +1,15 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
 var _generateLinks = require("../../utils/generateLinks");
-var _lodash = require("lodash");
 var _formatID = _interopRequireDefault(require("../../utils/formatID"));
 var _downCaretDarkBlue = _interopRequireDefault(require("../../images/down-caret-dark-blue.svg"));
 var _rightCaretLightGray = _interopRequireDefault(require("../../images/right-caret-light-gray.svg"));
@@ -58,7 +58,7 @@ var MobileMegaMenuCategory = function MobileMegaMenuCategory(_ref) {
         });
       } else {
         return /*#__PURE__*/_react["default"].createElement("li", {
-          id: (0, _formatID["default"])("".concat(link === null || link === void 0 ? void 0 : link.contentfulId, "-navbar-link-parent")),
+          id: (0, _formatID["default"])("".concat(link === null || link === void 0 ? void 0 : link.contentfulId, "-navbar-link-parent-").concat((0, _react.useId)())),
           className: "ter-mobile-mega-menu-category__name",
           key: "".concat(link === null || link === void 0 ? void 0 : link.contentfulId, "-").concat(categoryId, "-").concat(index),
           onClick: closeDropDown
@@ -96,10 +96,10 @@ var MobileMegaMenuCategory = function MobileMegaMenuCategory(_ref) {
   };
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("section", {
     className: getParentStyle(),
-    id: (0, _lodash.uniqueId)("id-")
+    id: (0, _react.useId)()
   }, /*#__PURE__*/_react["default"].createElement("p", {
     tabIndex: mouse ? "" : "0",
-    id: (0, _formatID["default"])("".concat(name, "-mobile-mega-menu-category-name")),
+    id: (0, _formatID["default"])("".concat(name, "-mobile-mega-menu-category-name-").concat((0, _react.useId)())),
     onClick: function onClick() {
       return toggleCategory(categoryId);
     },
@@ -112,7 +112,7 @@ var MobileMegaMenuCategory = function MobileMegaMenuCategory(_ref) {
     ref: uncollapsedMenu,
     "data-depth": 2
   }, name, /*#__PURE__*/_react["default"].createElement("img", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-mobile-mega-menu__caret ".concat(isOpen && !openSubCategory ? "ter-mobile-mega-menu__caret--up" : "ter-mobile-mega-menu__caret--down"),
     src: _rightCaretLightGray["default"],
     alt: "caret icon"
@@ -120,10 +120,10 @@ var MobileMegaMenuCategory = function MobileMegaMenuCategory(_ref) {
     className: "ter-mobile-mega-menu-category__submenu ".concat(isOpen && !openSubCategory ? "ter-mobile-mega-menu-category__submenu--is-open" : "")
   }, generateSubMenu())), /*#__PURE__*/_react["default"].createElement("section", {
     className: "ter-mobile-mega-menu-category ".concat(parentOpen ? "" : "ter-mobile-mega-menu-category--hidden"),
-    id: (0, _lodash.uniqueId)("id-")
+    id: (0, _react.useId)()
   }, /*#__PURE__*/_react["default"].createElement("p", {
     tabIndex: mouse ? "" : "0",
-    id: (0, _formatID["default"])("".concat(name, "-mobile-mega-menu-category-name")),
+    id: (0, _formatID["default"])("".concat(name, "-mobile-mega-menu-category-name-").concat((0, _react.useId)())),
     onClick: function onClick() {
       return handleClick(categoryId);
     },
@@ -136,7 +136,7 @@ var MobileMegaMenuCategory = function MobileMegaMenuCategory(_ref) {
     "aria-expanded": !(isOpen && !openSubCategory),
     ref: collapsedMenu
   }, name, /*#__PURE__*/_react["default"].createElement("img", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-mobile-mega-menu-category__caret",
     src: _downCaretDarkBlue["default"],
     alt: "caret icon"

package/dist/luna/components/MobileMegaMenu/MobileMegaMenuPartialCategory.js

@@ -1,14 +1,14 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
 var _generateLinks = require("../../utils/generateLinks");
-var _lodash = require("lodash");
 var MobileMegaMenuPartialCategory = function MobileMegaMenuPartialCategory(_ref) {
   var name = _ref.name,
     link = _ref.link,
@@ -24,7 +24,7 @@ var MobileMegaMenuPartialCategory = function MobileMegaMenuPartialCategory(_ref)
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "ter-mobile-mega-menu-category ".concat(isOpen ? "" : "ter-mobile-mega-menu-category--hidden")
   }, /*#__PURE__*/_react["default"].createElement("p", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-mobile-mega-menu-category__name--single"
   }, (0, _generateLinks.generateMobileLink)(linkObj, "ter-mobile-mega-menu-category__single-link", closeDropDown, mouse, Link, 2)));
 };