luna-one 3.1.437 → 3.1.440

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

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
 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 = _interopRequireWildcard(require("react"));
 
 require("./Carousel.scss");
@@ -29,7 +31,18 @@ var Carousel = function Carousel(_ref) {
       motion = _ref.motion;
   var GatsbyImage = content === null || content === void 0 ? void 0 : content.GatsbyImage;
   var Link = content === null || content === void 0 ? void 0 : content.Link;
-  var carouselWrapper = (0, _react.useRef)(); // split all cards into grouped cells
+  var carouselWrapper = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      cardsLoaded = _useState2[0],
+      setCardsLoaded = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      slideCountMessage = _useState4[0],
+      setSlideCountMessage = _useState4[1]; // split all cards into grouped cells
+
 
   var largeCards = _lodash["default"].chunk(content === null || content === void 0 ? void 0 : content.cards, 4);
 
@@ -44,14 +57,19 @@ var Carousel = function Carousel(_ref) {
       cellAlign: "center",
       wrapAround: true,
       adaptiveHeight: false,
-      imagesLoaded: true
+      imagesLoaded: false,
+      setGallerySize: false
     };
 
-    if (carouselWrapper) {
+    if (cardsLoaded) {
       var carouselElemSelector = ".ter-carousel--xsmall";
       var carousel = new _flickity["default"](carouselElemSelector, carouselParams);
       var carouselElemSelectorSmall = ".ter-carousel--small";
       var carouselSmall = new _flickity["default"](carouselElemSelectorSmall, carouselParams);
+      var activeCarousel = window.innerWidth >= 580 ? carouselSmall : carousel;
+      activeCarousel.on("change", function () {
+        updateSlideCounter(activeCarousel.selectedIndex + 1, activeCarousel);
+      });
       var carouselElemSelectorMedium = ".ter-carousel--medium";
       var carouselMedium = new _flickity["default"](carouselElemSelectorMedium, carouselParams);
       var carouselElemSelectorLarge = ".ter-carousel--large";
@@ -59,27 +77,23 @@ var Carousel = function Carousel(_ref) {
 
       if (document !== null) {
         addPaginationLabels();
-        updateSlideCountMessage(carousel.selectedIndex + 1);
-        carousel.on("change", function () {
-          updateSlideCountMessage(carousel.selectedIndex + 1);
-        });
+        updateSlideCounter(activeCarousel.selectedIndex + 1, activeCarousel);
       }
-    }
-  }, [carouselWrapper]);
 
-  var updateSlideCountMessage = function updateSlideCountMessage(slideIndex) {
-    if (document !== null) {
-      document.querySelector(".ter-carousel__counter").innerText = updateSlideCounter(document.querySelector(".ter-carousel--xsmall .flickity-page-dots"), slideIndex);
+      document.querySelectorAll(".carousel-cell").forEach(function (elem) {
+        elem.setAttribute('height', elem.clientHeight);
+      });
     }
-  };
-
-  var updateSlideCounter = function updateSlideCounter(selector, currentIndex) {
-    var _selector$childNodes;
-
-    if (selector && selector !== null && selector !== void 0 && selector.childNodes && (selector === null || selector === void 0 ? void 0 : (_selector$childNodes = selector.childNodes) === null || _selector$childNodes === void 0 ? void 0 : _selector$childNodes.length) > 0) {
-      var _selector$childNodes2;
+  }, [cardsLoaded]);
+  (0, _react.useEffect)(function () {
+    if (document) {
+      setCardsLoaded(true);
+    }
+  });
 
-      return "Slide ".concat(currentIndex, " of ").concat(selector === null || selector === void 0 ? void 0 : (_selector$childNodes2 = selector.childNodes) === null || _selector$childNodes2 === void 0 ? void 0 : _selector$childNodes2.length);
+  var updateSlideCounter = function updateSlideCounter(currentIndex, carousel) {
+    if (currentIndex && carousel) {
+      setSlideCountMessage("Slide ".concat(currentIndex, " of ").concat(carousel.getCellElements().length));
     }
   };
 
@@ -108,13 +122,13 @@ var Carousel = function Carousel(_ref) {
     }
   };
 
-  var imageSizes = {
+  var carouselImageSizes = {
     desktop: {
       width: 275,
-      height: 180,
+      height: 206,
       ratio: {
-        width: 55,
-        height: 36
+        width: 4,
+        height: 3
       }
     },
     tablet: {
@@ -127,10 +141,10 @@ var Carousel = function Carousel(_ref) {
     },
     mobile: {
       width: 240,
-      height: 200,
+      height: 180,
       ratio: {
-        width: 6,
-        height: 5
+        width: 4,
+        height: 3
       }
     }
   };
@@ -146,7 +160,7 @@ var Carousel = function Carousel(_ref) {
             eyebrow: card === null || card === void 0 ? void 0 : card.eyebrow,
             header: card === null || card === void 0 ? void 0 : card.header,
             image: card === null || card === void 0 ? void 0 : card.image,
-            imageSizes: imageSizes,
+            imageSizes: carouselImageSizes,
             displayButton: content === null || content === void 0 ? void 0 : content.displayButton,
             cardLink: card === null || card === void 0 ? void 0 : card.cardLink,
             bgColor: !(card !== null && card !== void 0 && card.image) ? "grey" : "",
@@ -175,16 +189,20 @@ var Carousel = function Carousel(_ref) {
     onClick: function onClick(e) {
       return skipCarousel(e);
     }
-  }, "Skip carousel of ", content === null || content === void 0 ? void 0 : (_content$cards2 = content.cards) === null || _content$cards2 === void 0 ? void 0 : _content$cards2.length, " items"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Skip carousel of ", content === null || content === void 0 ? void 0 : (_content$cards2 = content.cards) === null || _content$cards2 === void 0 ? void 0 : _content$cards2.length, " items"), slideCountMessage && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-carousel__counter"
-  }))), /*#__PURE__*/_react["default"].createElement("section", {
-    className: "ter-carousel ter-carousel--large ".concat(paddingClass)
+  }, slideCountMessage))), /*#__PURE__*/_react["default"].createElement("section", {
+    className: "ter-carousel ter-carousel--large ".concat(paddingClass),
+    height: "100%"
   }, renderCards(largeCards)), /*#__PURE__*/_react["default"].createElement("section", {
-    className: "ter-carousel ter-carousel--medium ".concat(paddingClass)
+    className: "ter-carousel ter-carousel--medium ".concat(paddingClass),
+    height: "100%"
   }, renderCards(mediumCards)), /*#__PURE__*/_react["default"].createElement("section", {
-    className: "ter-carousel ter-carousel--small ".concat(paddingClass)
+    className: "ter-carousel ter-carousel--small ".concat(paddingClass),
+    height: "100%"
   }, renderCards(smallCards)), /*#__PURE__*/_react["default"].createElement("section", {
-    className: "ter-carousel ter-carousel--xsmall ".concat(paddingClass)
+    className: "ter-carousel ter-carousel--xsmall ".concat(paddingClass),
+    height: "100%"
   }, renderCards(xSmallCards)), /*#__PURE__*/_react["default"].createElement("span", {
     id: "skip-link"
   })));

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

@@ -2,6 +2,7 @@
 
 .ter-carousel {
   overflow: hidden;
+  height: 100%;
   padding-top: 72px;
   padding-bottom: 72px;
   &:focus-visible {
@@ -34,6 +35,7 @@
   }
   &-outer {
     position: relative;
+    display: grid;
   }
   &__skip {
     display: inline-block;
@@ -60,6 +62,8 @@
     }
   }
   .ter-bounded-card {
+    display: flex;
+    text-align: left;
     width: 23%;
     margin-left: 1%;
     margin-right: 1%;
@@ -105,7 +109,7 @@
     @media screen and (max-width: $breakpoint-xs) {
       display: none;
     }
-    .dot {
+    .flickity-page-dot {
       color: $trimble-blue;
       display: inline-block;
       text-align: center;
@@ -125,10 +129,17 @@
       }
     }
   }
+  .flickity-slider {
+    width: 100%;
+    display: block;
+  }
   .carousel-cell {
     display: flex;
     width: 100%;
     justify-content: center;
-    margin: 0 auto;
+    &:not(.is-selected){
+      height: 0;
+      visibility: hidden;
+    }
   }
 }

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

@@ -352,56 +352,64 @@ var NavBar = function NavBar(props) {
   };
 
   var generateNavOptions = function generateNavOptions() {
-    return navOptions === null || navOptions === void 0 ? void 0 : navOptions.map(function (option) {
+    return navOptions === null || navOptions === void 0 ? void 0 : navOptions.map(function (option, i) {
+      var _getUrl;
+
+      if (!option) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
+      }
+
       var isCollapsed = !isExpanded;
-      var url = getUrl(option).split("/")[2];
+      var url = getUrl(option) ? (_getUrl = getUrl(option)) === null || _getUrl === void 0 ? void 0 : _getUrl.split("/")[2] : null;
       var path = pathname && pathname.split("/")[2]; // to determine if active, check if nav url is in the first breadcrumb after the local of the pathname
 
       var active = path && (path === null || path === void 0 ? void 0 : path.includes(url));
-      return /*#__PURE__*/_react["default"].createElement(NavOption, {
-        key: option.text,
-        displayIcons: displayIcons,
-        option: option,
-        menuBarTheme: menuBarTheme,
-        navigate: navigate
-      }, option.type === "category" ? /*#__PURE__*/_react["default"].createElement(MegaMenu, {
-        key: option.text,
-        isOpen: currentOpenMenu === option.text,
-        content: option,
-        Link: Link,
-        collapsed: isCollapsed,
-        currentOpenMenu: currentOpenMenu,
-        displayIcons: displayIcons,
-        icon: option.icon,
-        theme: menuBarTheme,
-        active: active
-      }) : option.type === "links" ? /*#__PURE__*/_react["default"].createElement(NavMiniMenu, {
-        navText: option.text,
-        links: option.links,
-        key: option.text,
-        isOpen: currentOpenMenu === option.text,
-        Link: Link,
-        displayIcons: displayIcons,
-        icon: option.icon,
-        theme: menuBarTheme,
-        currentOpenMenu: currentOpenMenu,
-        active: active
-      }) : /*#__PURE__*/_react["default"].createElement(LunaLink, {
-        to: option.url,
-        depth: 1,
-        tabIndex: mouse ? "" : "0",
-        href: option.url,
-        key: option.text,
-        className: "".concat(mouse ? "ter-navbar__nav-link" : "ter-navbar__nav-link tabFocus", " \n                ").concat(active ? "active" : "", "\n                ").concat(menuBarTheme ? "ter-navbar__nav-link--".concat(menuBarTheme) : "", "\n                ").concat(displayIcons ? "ter-navbar__nav-link--with-icon" : "", "\n                ").concat(displayIcons && menuBarTheme ? "ter-navbar__nav-link--with-icon--".concat(menuBarTheme) : ""),
-        id: (0, _formatID["default"])("".concat(option.text, "-navbar-nav-link")),
-        Link: Link,
-        onClick: closeAllDropDowns,
-        displayIcons: displayIcons,
-        icon: option.icon,
-        navigate: navigate,
-        internalLink: option === null || option === void 0 ? void 0 : option.internalLink,
-        target: typeof (option === null || option === void 0 ? void 0 : option.external) === 'boolean' ? option !== null && option !== void 0 && option.external ? "_blank" : "_self" : null
-      }, /*#__PURE__*/_react["default"].createElement("p", null, option.text)));
+
+      if (option.text) {
+        return /*#__PURE__*/_react["default"].createElement(NavOption, {
+          key: "".concat(option === null || option === void 0 ? void 0 : option.text, "-").concat(i),
+          displayIcons: displayIcons,
+          option: option,
+          menuBarTheme: menuBarTheme,
+          navigate: navigate
+        }, option.type === "category" ? /*#__PURE__*/_react["default"].createElement(MegaMenu, {
+          isOpen: currentOpenMenu === (option === null || option === void 0 ? void 0 : option.text),
+          content: option,
+          Link: Link,
+          collapsed: isCollapsed,
+          currentOpenMenu: currentOpenMenu,
+          displayIcons: displayIcons,
+          icon: option.icon,
+          theme: menuBarTheme,
+          active: active
+        }) : option.type === "links" ? /*#__PURE__*/_react["default"].createElement(NavMiniMenu, {
+          navText: option === null || option === void 0 ? void 0 : option.text,
+          links: option === null || option === void 0 ? void 0 : option.links,
+          isOpen: currentOpenMenu === (option === null || option === void 0 ? void 0 : option.text),
+          Link: Link,
+          displayIcons: displayIcons,
+          icon: option.icon,
+          theme: menuBarTheme,
+          currentOpenMenu: currentOpenMenu,
+          active: active
+        }) : /*#__PURE__*/_react["default"].createElement(LunaLink, {
+          to: option.url,
+          depth: 1,
+          tabIndex: mouse ? "" : "0",
+          href: option === null || option === void 0 ? void 0 : option.url,
+          className: "".concat(mouse ? "ter-navbar__nav-link" : "ter-navbar__nav-link tabFocus", " \n                ").concat(active ? "active" : "", "\n                ").concat(menuBarTheme ? "ter-navbar__nav-link--".concat(menuBarTheme) : "", "\n                ").concat(displayIcons ? "ter-navbar__nav-link--with-icon" : "", "\n                ").concat(displayIcons && menuBarTheme ? "ter-navbar__nav-link--with-icon--".concat(menuBarTheme) : ""),
+          id: (0, _formatID["default"])("".concat(option.text, "-navbar-nav-link")),
+          Link: Link,
+          onClick: closeAllDropDowns,
+          displayIcons: displayIcons,
+          icon: option === null || option === void 0 ? void 0 : option.icon,
+          navigate: navigate,
+          internalLink: option === null || option === void 0 ? void 0 : option.internalLink,
+          target: typeof (option === null || option === void 0 ? void 0 : option.external) === "boolean" ? option !== null && option !== void 0 && option.external ? "_blank" : "_self" : null
+        }, /*#__PURE__*/_react["default"].createElement("p", null, option.text)));
+      } else {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
+      }
     });
   };
 
@@ -502,7 +510,6 @@ var NavBar = function NavBar(props) {
   }, !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          ")
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    id: _lodash["default"].uniqueId("id-"),
     className: "ter-navbar__menus-wrapper ".concat(displayIcons ? "ter-navbar__menus-wrapper--with-icons" : "")
   }, generateNavOptions(), featuredLink && generateFeaturedLink()))), /*#__PURE__*/_react["default"].createElement(MobileNav, {
     rightLinks: rightLinks,
@@ -545,7 +552,6 @@ var NavBar = function NavBar(props) {
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-navbar__flyout-logo"
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    id: _lodash["default"].uniqueId("id-"),
     src: _logoIcon["default"],
     alt: "open flyout"
   }))))), sectorFlyoutData && sectorFlyoutDeployed && /*#__PURE__*/_react["default"].createElement(Flyout, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.437",
+  "version": "3.1.440",
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",