luna-one 3.1.310 → 3.1.314

package/dist/luna/components/CtaWithHeader/CtaWithHeader.js

@@ -86,7 +86,7 @@ var CtaWithHeader = function CtaWithHeader(_ref) {
       __html: content
     }
   }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) && /*#__PURE__*/_react.default.createElement("div", {
-    className: "cta-buttons ".concat(textLinks && "text-links ".concat(linksClass))
+    className: "cta-buttons ".concat(textLinks && "text-links ".concat(linksClass), " ").concat((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 1 ? "cta-buttons--multiple" : "")
   }, buttons.map(function (button, index) {
     var _buttonsVarians, _buttonsVarians2;
 

package/dist/luna/components/CtaWithHeader/CtaWithHeader.scss

@@ -44,7 +44,6 @@
     }
   }
 
-
   .header {
     width: 100%;
     margin: 0;
@@ -168,13 +167,19 @@
     width: 100%;
     display: flex;
     flex-wrap: wrap;
- 
+    
     a {
       margin: 40px 20px 0 40px;
       height: unset !important;
       white-space: pre-wrap;
     }
 
+    &--multiple {
+      a.ter-button + a.ter-button {
+        margin-top: 40px;
+      }
+    }
+
     &.text-links {
       flex-direction: column;
       grid-gap: 24px;

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

@@ -57,14 +57,6 @@
     }
   }
 
-  &__divider {
-    height: 1px;
-    background: $concrete-gray;
-    width: 100%;
-    position: absolute;
-    top: 56px;
-  }
-
   &__left {
     display: flex;
     align-items: center;

package/dist/luna/components/ScrollInPlace/ScrollInPlace.js

@@ -80,7 +80,9 @@ var ScrollInPlace = function ScrollInPlace(_ref) {
 
   (0, _react.useEffect)(function () {
     // hook up the slide set nvigation buttons
-    for (var i = 0; i < sets.length; i++) {
+    for (var i = 0; i < ((_sets = sets) === null || _sets === void 0 ? void 0 : _sets.length); i++) {
+      var _sets;
+
       var navButtons = sets[i].getElementsByClassName("nav-btn");
 
       for (var j = 0; j < navButtons.length; j++) {
@@ -118,14 +120,14 @@ var ScrollInPlace = function ScrollInPlace(_ref) {
         if (!currentHooked) {
           var slideSetPositions = []; // loop through all slide sets on a page and build array of their dom elements and positions
 
-          for (var i = 0; i < sets.length; i++) {
-            var _sets, _sets$i, _sets$i$classList, _sets2, _sets2$i, _sets2$i$classList;
+          for (var i = 0; i < ((_sets2 = sets) === null || _sets2 === void 0 ? void 0 : _sets2.length); i++) {
+            var _sets2, _sets3, _sets3$i, _sets3$i$classList, _sets4, _sets4$i, _sets4$i$classList;
 
             var setRect = sets[i].getBoundingClientRect();
             slideSetPositions.push({
               element: sets[i],
               position: setRect.top,
-              finished: ((_sets = sets) === null || _sets === void 0 ? void 0 : (_sets$i = _sets[i]) === null || _sets$i === void 0 ? void 0 : (_sets$i$classList = _sets$i.classList) === null || _sets$i$classList === void 0 ? void 0 : _sets$i$classList.contains("activated")) && !((_sets2 = sets) === null || _sets2 === void 0 ? void 0 : (_sets2$i = _sets2[i]) === null || _sets2$i === void 0 ? void 0 : (_sets2$i$classList = _sets2$i.classList) === null || _sets2$i$classList === void 0 ? void 0 : _sets2$i$classList.contains("active")) ? true : false
+              finished: ((_sets3 = sets) === null || _sets3 === void 0 ? void 0 : (_sets3$i = _sets3[i]) === null || _sets3$i === void 0 ? void 0 : (_sets3$i$classList = _sets3$i.classList) === null || _sets3$i$classList === void 0 ? void 0 : _sets3$i$classList.contains("activated")) && !((_sets4 = sets) === null || _sets4 === void 0 ? void 0 : (_sets4$i = _sets4[i]) === null || _sets4$i === void 0 ? void 0 : (_sets4$i$classList = _sets4$i.classList) === null || _sets4$i$classList === void 0 ? void 0 : _sets4$i$classList.contains("active")) ? true : false
             });
           } // get the current hooked scroll element
 

package/dist/luna/heroes/SuperHero/SuperHeroMethods.js

@@ -261,19 +261,19 @@ var imageSizes = {
   },
   variant_8: {
     desktop: {
-      width: 720,
+      width: 960,
       height: 720,
       ratio: {
-        width: 1,
-        height: 1
+        width: 4,
+        height: 3
       }
     },
     tablet: {
       width: 960,
-      height: 480,
+      height: 720,
       ratio: {
-        width: 2,
-        height: 1
+        width: 4,
+        height: 3
       }
     },
     mobile: {

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

@@ -15,6 +15,8 @@ var _terraOne = require("terra-one");
 
 var _flickity = _interopRequireDefault(require("flickity"));
 
+require("flickity-imagesloaded");
+
 var _lodash = _interopRequireDefault(require("lodash"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -40,6 +42,13 @@ var Carousel = function Carousel(_ref) {
   var xSmallCards = _lodash.default.chunk(content === null || content === void 0 ? void 0 : content.cards, 1);
 
   (0, _react.useEffect)(function () {
+    var carouselParams = {
+      cellAlign: "center",
+      wrapAround: true,
+      adaptiveHeight: false,
+      imagesLoaded: true
+    };
+
     if (carouselWrapper) {
       var carouselElemSelector = ".ter-carousel--xsmall";
       var carousel = new _flickity.default(carouselElemSelector, carouselParams);
@@ -59,11 +68,6 @@ var Carousel = function Carousel(_ref) {
       }
     }
   }, [carouselWrapper]);
-  var carouselParams = {
-    cellAlign: "center",
-    wrapAround: true,
-    adaptiveHeight: true
-  };
 
   var updateSlideCountMessage = function updateSlideCountMessage(slideIndex) {
     if (document !== null) {

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

@@ -87,17 +87,17 @@
       display: none;
     }
     &.next {
-      right: 0;
+      right: -40px;
     }
     &.previous {
-      left: 0;
+      left: -40px;
     }
   }
   .flickity-page-dots {
     margin-top: 0;
     padding: 32px 0;
     width: 100%;
-    z-index: 50;
+    z-index: 5;
     position: relative;
     display: flex;
     justify-content: center;
@@ -125,17 +125,6 @@
       }
     }
   }
-  .flickity-viewport {
-    min-height: 600px;
-    width: 100%;
-    transition: height 0.5s;
-    padding-left: 40px;
-    padding-right: 40px;
-    @media screen and (max-width: $breakpoint-xs) {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
   .carousel-cell {
     display: flex;
     width: 100%;

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

@@ -25,6 +25,8 @@ var _closeIcon = _interopRequireDefault(require("../../images/close-icon.svg"));
 
 var _rightCaretLightGray = _interopRequireDefault(require("../../images/right-caret-light-gray.svg"));
 
+var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,6 +64,10 @@ var LanguageSelector = function LanguageSelector(_ref) {
       setSectionDeployed = _useState8[1];
 
   var checkComponent = false;
+
+  var _useMouse = (0, _useMouse2.default)(),
+      mouse = _useMouse.mouse;
+
   (0, _react.useEffect)(function () {
     return function () {
       if (typeof window !== "undefined") {
@@ -100,13 +106,31 @@ var LanguageSelector = function LanguageSelector(_ref) {
     checkComponent = true;
   };
 
+  var handleClickWithEnter = function handleClickWithEnter(e, fn) {
+    if (e.keyCode === 13) {
+      fn();
+      checkComponent = true;
+    }
+  };
+
+  var setStateWithEnter = function setStateWithEnter(e, state, item) {
+    if (e.keyCode === 13) {
+      state(item);
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "luna-language-selector"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "luna-language-selector__header ".concat(languageSelectorDeployed && "luna-language-selector__header-deployed"),
+    className: mouse ? "luna-language-selector__header ".concat(languageSelectorDeployed && "luna-language-selector__header-deployed") : "luna-language-selector__header tabFocus ".concat(languageSelectorDeployed && "luna-language-selector__header-deployed"),
+    tabIndex: "0",
     onClick: function onClick() {
       return handleClick();
-    }
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClickWithEnter(e, handleClick);
+    },
+    "aria-label": "".concat(currentSettings === null || currentSettings === void 0 ? void 0 : currentSettings.region, ": Change Region or language")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "luna-language-selector__header-icon"
   }, languageSelectorDeployed ? /*#__PURE__*/_react.default.createElement("img", {
@@ -132,7 +156,8 @@ var LanguageSelector = function LanguageSelector(_ref) {
   }, "|")), (currentSettings === null || currentSettings === void 0 ? void 0 : currentSettings.language) && /*#__PURE__*/_react.default.createElement("div", {
     className: "luna-language-selector__header-text-language"
   }, currentSettings === null || currentSettings === void 0 ? void 0 : (_currentSettings$lang = currentSettings.language) === null || _currentSettings$lang === void 0 ? void 0 : _currentSettings$lang.nativeField))), languageSelectorDeployed && /*#__PURE__*/_react.default.createElement("div", {
-    className: "luna-language-selector__body",
+    className: mouse ? "luna-language-selector__body" : "luna-language-selector__body tabFocus",
+    tabIndex: "0",
     onMouseLeave: function onMouseLeave() {
       return bodyMouseLeave();
     }
@@ -150,10 +175,15 @@ var LanguageSelector = function LanguageSelector(_ref) {
   }, regions && regions.map(function (region, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "region-".concat(index),
-      className: "luna-language-selector__body-section-item",
+      className: mouse ? "luna-language-selector__body-section-item" : "luna-language-selector__body-section-item tabFocus",
       onClick: function onClick() {
         return setCurrentRegion(region);
-      }
+      },
+      onKeyDown: function onKeyDown(e) {
+        return setStateWithEnter(e, setCurrentRegion, region);
+      },
+      "aria-label": "".concat(region),
+      tabIndex: "0"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "luna-language-selector__body-section-item-icon"
     }, region === currentRegion && /*#__PURE__*/_react.default.createElement("img", {
@@ -175,10 +205,15 @@ var LanguageSelector = function LanguageSelector(_ref) {
   }, languages && languages.map(function (language, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "region-".concat(index),
-      className: "luna-language-selector__body-section-item",
+      className: mouse ? "luna-language-selector__body-section-item" : "luna-language-selector__body-section-item tabFocus",
       onClick: function onClick() {
         return setCurrentLanguage(language);
-      }
+      },
+      onKeyDown: function onKeyDown(e) {
+        return setStateWithEnter(e, setCurrentLanguage, language);
+      },
+      "aria-label": "".concat(language === null || language === void 0 ? void 0 : language.nativeField, " (").concat(language === null || language === void 0 ? void 0 : language.translatableName, ")"),
+      tabIndex: "0"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "luna-language-selector__body-section-item-icon"
     }, (language === null || language === void 0 ? void 0 : language.code) === (currentLanguage === null || currentLanguage === void 0 ? void 0 : currentLanguage.code) && /*#__PURE__*/_react.default.createElement("img", {
@@ -196,11 +231,18 @@ var LanguageSelector = function LanguageSelector(_ref) {
     onClick: function onClick() {
       return handleLanguageSelectorDeployed(false);
     },
-    className: "luna-language-selector__body-footer-link"
+    onKeyDown: function onKeyDown(e) {
+      return handleClickWithEnter(e, handleLanguageSelectorDeployed);
+    },
+    className: mouse ? "luna-language-selector__body-footer-link" : "luna-language-selector__body-footer-link tabFocus",
+    tabIndex: "0"
   }, (labels === null || labels === void 0 ? void 0 : (_labels$buttons = labels.buttons) === null || _labels$buttons === void 0 ? void 0 : _labels$buttons.cancel) || "Cancel"), /*#__PURE__*/_react.default.createElement(_terraOne.Button, {
     onClick: function onClick() {
       return handleSaveLanguage();
     },
+    onKeyDown: function onKeyDown(e) {
+      return handleClickWithEnter(e, handleSaveLanguage);
+    },
     className: "ter-button--primary--1 luna-language-selector__body-footer-button",
     size: "md",
     text: (labels === null || labels === void 0 ? void 0 : (_labels$buttons2 = labels.buttons) === null || _labels$buttons2 === void 0 ? void 0 : _labels$buttons2.ok) || "OK"

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

@@ -308,4 +308,10 @@
       }
     }
   }
+
+  &__body.tabFocus:focus, &__header.tabFocus:focus, &__body-section-item.tabFocus:focus, &__body-footer-link.tabFocus:focus {
+    outline: 2px solid $sky-blue;
+  }
+
+  
 }

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

@@ -375,9 +375,7 @@ var NavBar = function NavBar(props) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: _lodash.default.uniqueId("id-"),
     className: "ter-navbar__menus-wrapper"
-  }, generateNavOptions(), featuredLink && generateFeaturedLink()), !subNavDisplay && /*#__PURE__*/_react.default.createElement("div", {
-    className: "ter-navbar-top__divider"
-  }))), /*#__PURE__*/_react.default.createElement(_MobileNav.default, {
+  }, generateNavOptions(), featuredLink && generateFeaturedLink()))), /*#__PURE__*/_react.default.createElement(_MobileNav.default, {
     rightLinks: rightLinks,
     navOptions: navOptions,
     disableLogin: disableLogin,

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

@@ -12,7 +12,6 @@
   @include benton-normal();
   position: fixed;
   //left and right padding comes from the boilerplate
-
   &--is-showing {
     .ter-navbar-top {
       height: 48px;
@@ -530,3 +529,9 @@
     -moz-transform: rotate(225deg);
   }
 }
+
+.luna-layout--no-subnav {
+  .ter-navbar--is-showing {
+    border-bottom: 1px solid $concrete-gray;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.310",
+  "version": "3.1.314",
   "dependencies": {
     "@storybook/addon-knobs": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",
@@ -11,6 +11,7 @@
     "axios": "^0.21.1",
     "cross-env": "^7.0.3",
     "flickity": "^2.2.2",
+    "flickity-imagesloaded": "^2.0.0",
     "lodash": "^4.17.20",
     "node-sass": "^4.12.0",
     "npm": "^7.20.5",