luna-one 3.1.587 → 3.1.589

package/dist/index.js

@@ -328,6 +328,12 @@ Object.defineProperty(exports, "PullQuote", {
     return _PullQuote["default"];
   }
 });
+Object.defineProperty(exports, "ResourceGrid", {
+  enumerable: true,
+  get: function get() {
+    return _ResourceGrid["default"];
+  }
+});
 Object.defineProperty(exports, "ScrollInPlace", {
   enumerable: true,
   get: function get() {
@@ -587,6 +593,7 @@ var _Accordion = _interopRequireDefault(require("./luna/featurettes/Accordion/Ac
 var _x = _interopRequireDefault(require("./luna/components/2x2/2x2"));
 var _LinkList = _interopRequireDefault(require("./luna/components/LinkList/LinkList"));
 var _DataPoint = _interopRequireDefault(require("./luna/components/DataPoint/DataPoint"));
+var _ResourceGrid = _interopRequireDefault(require("./luna/components/ResourceGrid/ResourceGrid"));
 var _FullBackgroundHero = _interopRequireDefault(require("./luna/heroes/FullBackgroundHero/FullBackgroundHero"));
 var _InPageJumpNav = _interopRequireDefault(require("./luna/components/InPageJumpNav/InPageJumpNav"));
 var _HTMLEmbed = _interopRequireDefault(require("./luna/components/HTMLEmbed/HTMLEmbed"));

package/dist/luna/components/FilterSection/FilterSection.js

@@ -28,10 +28,7 @@ var FilterSection = function FilterSection(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     openFilterDropdown = _useState2[0],
     setOpenFilterDropdown = _useState2[1]; // controls which filter dropdown is open
-  var _useState3 = (0, _react.useState)(activeFilters),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    activeFilterChips = _useState4[0],
-    setActiveFilterChips = _useState4[1];
+
   var filterDropdownClickHandler = function filterDropdownClickHandler(e, filter) {
     var _e$target;
     if (!(e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.classList.contains('ter-checkbox__label')) && openFilterDropdown === filter) {
@@ -59,27 +56,26 @@ var FilterSection = function FilterSection(_ref) {
     query = ((_document = document) === null || _document === void 0 ? void 0 : _document.querySelectorAll(".ter-filter-section__filter-placeholder").length) > 0;
   }
   (0, _useClickListener["default"])(handleCloseDropdown, query);
-  (0, _react.useEffect)(function () {
-    setActiveFilterChips(activeFilters);
-  }, [activeFilters]);
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "ter-filter-section"
-  }, introSection && /*#__PURE__*/_react["default"].createElement("p", null, introSection), allFilters && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+  }, introSection && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ter-filter-section__intro"
+  }, introSection), (allFilters === null || allFilters === void 0 ? void 0 : allFilters.length) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-filter-section__title"
   }, /*#__PURE__*/_react["default"].createElement("h4", null, filtersTitle)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-filter-section__outer "
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-filter-section__filters"
-  }, (0, _FilterSectionMethods.renderFiltersSection)(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _FilterSectionMethods.renderFiltersSection)(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters), (activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-filter-section__clear"
-  }, activeFilters && /*#__PURE__*/_react["default"].createElement("button", {
+  }, /*#__PURE__*/_react["default"].createElement("button", {
     className: "ter-filter-section__clear-button",
     onClick: function onClick(e) {
       return clearAllFiltersHandler(e);
     }
-  }, "Clear all filters")))), (activeFilterChips === null || activeFilterChips === void 0 ? void 0 : activeFilterChips.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Clear all filters")))), (activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-filter-section__chips"
-  }, (0, _FilterSectionMethods.renderActiveFilters)(activeFilterChips, removeActiveFilterHandler))));
+  }, (0, _FilterSectionMethods.renderActiveFilters)(activeFilters, removeActiveFilterHandler))));
 };
 var _default = FilterSection;
 exports["default"] = _default;

package/dist/luna/components/FilterSection/FilterSection.scss

@@ -1,6 +1,10 @@
 @import "../../../global-styles/terra.scss";
 
 .ter-filter-section {
+	&__intro {
+		max-width: 650px;
+		margin-bottom: 48px;
+	}
 	&__title {
 		font-size: $body-font-size;
 		text-transform: uppercase;
@@ -31,10 +35,12 @@
 			}
 		}
 		&-wrapper {
-			max-width: 220px;
 			width: 100%;
 			position: relative;
 			margin-bottom: 15px;
+			@media screen and (min-width: $breakpoint-xs) {
+				max-width: 220px;
+			}
 		}
 		&-title {
 			font-weight: 500;
@@ -119,9 +125,6 @@
 			}
 		}
 	}
-	&__filter-wrapper:last-of-type {
-		margin-right: 24px;
-	}
 	&__chevron {
 		margin-right: 24px;
 		&--open {

package/dist/luna/components/FilterSection/FilterSectionMethods.js

@@ -1,11 +1,11 @@
 "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.renderFiltersSection = exports.renderActiveFilters = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _terraOne = require("terra-one");
 var renderActiveFilters = function renderActiveFilters(activeFilters, removeActiveFilterHandler) {
   return activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.map(function (filter, i) {
@@ -13,7 +13,7 @@ var renderActiveFilters = function renderActiveFilters(activeFilters, removeActi
       key: i,
       isSelected: false,
       removeChipClickHandler: function removeChipClickHandler(e) {
-        return removeActiveFilterHandler(e, filter.id);
+        return removeActiveFilterHandler(e, filter);
       },
       label: filter === null || filter === void 0 ? void 0 : filter.name
     });
@@ -21,51 +21,57 @@ var renderActiveFilters = function renderActiveFilters(activeFilters, removeActi
 };
 exports.renderActiveFilters = renderActiveFilters;
 var renderFiltersSection = function renderFiltersSection(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters) {
+  var filterIsChecked = function filterIsChecked(activeFilters, option) {
+    return activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.some(function (filter) {
+      return (filter === null || filter === void 0 ? void 0 : filter.id) === (option === null || option === void 0 ? void 0 : option.id);
+    });
+  };
   return allFilters === null || allFilters === void 0 ? void 0 : allFilters.map(function (filter, i) {
     var _filter$options;
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: i,
-      className: "ter-filter-section__filter-wrapper"
-    }, /*#__PURE__*/_react["default"].createElement("label", {
-      className: "ter-filter-section__filter-title"
-    }, filter === null || filter === void 0 ? void 0 : filter.name), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "ter-filter-section__filter-placeholder",
-      onClick: function onClick(e) {
-        return filterDropdownClickHandler(e, filter === null || filter === void 0 ? void 0 : filter.id);
-      }
-    }, /*#__PURE__*/_react["default"].createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "16",
-      height: "11",
-      fill: "currentColor",
-      className: "ter-filter-section__chevron ".concat(openFilterDropdown === (filter === null || filter === void 0 ? void 0 : filter.id) ? 'ter-filter-section__chevron--open' : '')
-    }, /*#__PURE__*/_react["default"].createElement("path", {
-      fill: "currentColor",
-      d: "M1.88.453 8 6.56 14.12.453 16 2.333l-8 8-8-8L1.88.453Z"
-    })), /*#__PURE__*/_react["default"].createElement("span", null, "Select")), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "ter-filter-section__filter-list ".concat(openFilterDropdown === (filter === null || filter === void 0 ? void 0 : filter.id) ? 'ter-filter-section__filter-list--open' : '')
-    }, filter === null || filter === void 0 ? void 0 : (_filter$options = filter.options) === null || _filter$options === void 0 ? void 0 : _filter$options.map(function (option, i) {
-      var isChecked = activeFilters.some(function (filter) {
-        return (filter === null || filter === void 0 ? void 0 : filter.id) === (option === null || option === void 0 ? void 0 : option.id);
-      });
-      var optionAttributes = {
-        label: option === null || option === void 0 ? void 0 : option.name,
-        name: option === null || option === void 0 ? void 0 : option.name,
-        inputClass: "ter-filter-section__filter-checkbox",
-        labelClass: "ter-filter-section__filter-label",
-        overrideChecked: isChecked
-      };
+    if ((filter === null || filter === void 0 ? void 0 : (_filter$options = filter.options) === null || _filter$options === void 0 ? void 0 : _filter$options.length) > 0) {
+      var _filter$options2;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "ter-filter-section__filter-option",
         key: i,
-        "aria-label": option === null || option === void 0 ? void 0 : option.name
-      }, /*#__PURE__*/_react["default"].createElement(_terraOne.Checkbox, Object.assign({}, optionAttributes, {
-        checked: true,
-        handleChange: function handleChange(e) {
-          return filterOptionClickHandler(e, option === null || option === void 0 ? void 0 : option.id);
+        className: "ter-filter-section__filter-wrapper"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "ter-filter-section__filter-title"
+      }, filter === null || filter === void 0 ? void 0 : filter.name), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "ter-filter-section__filter-placeholder",
+        onClick: function onClick(e) {
+          return filterDropdownClickHandler(e, filter === null || filter === void 0 ? void 0 : filter.id);
         }
+      }, /*#__PURE__*/_react["default"].createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "11",
+        fill: "currentColor",
+        className: "ter-filter-section__chevron ".concat(openFilterDropdown === (filter === null || filter === void 0 ? void 0 : filter.id) ? 'ter-filter-section__chevron--open' : '')
+      }, /*#__PURE__*/_react["default"].createElement("path", {
+        fill: "currentColor",
+        d: "M1.88.453 8 6.56 14.12.453 16 2.333l-8 8-8-8L1.88.453Z"
+      })), /*#__PURE__*/_react["default"].createElement("span", null, "Select")), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "ter-filter-section__filter-list ".concat(openFilterDropdown === (filter === null || filter === void 0 ? void 0 : filter.id) ? 'ter-filter-section__filter-list--open' : '')
+      }, filter === null || filter === void 0 ? void 0 : (_filter$options2 = filter.options) === null || _filter$options2 === void 0 ? void 0 : _filter$options2.map(function (option, i) {
+        var optionAttributes = {
+          label: option === null || option === void 0 ? void 0 : option.name,
+          name: option === null || option === void 0 ? void 0 : option.name,
+          inputClass: "ter-filter-section__filter-checkbox",
+          labelClass: "ter-filter-section__filter-label",
+          overrideChecked: filterIsChecked(activeFilters, option)
+        };
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "ter-filter-section__filter-option",
+          key: i,
+          "aria-label": option === null || option === void 0 ? void 0 : option.name
+        }, /*#__PURE__*/_react["default"].createElement(_terraOne.Checkbox, Object.assign({}, optionAttributes, {
+          handleChange: function handleChange(e) {
+            return filterOptionClickHandler(e, option);
+          }
+        })));
       })));
-    })));
+    } else {
+      return null;
+    }
   });
 };
 exports.renderFiltersSection = renderFiltersSection;

package/dist/luna/components/ResourceGrid/ResourceGrid.js

@@ -0,0 +1,127 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+require("./ResourceGrid.scss");
+var _ResourceGridMethods = require("./ResourceGridMethods");
+var _FilterSection = _interopRequireDefault(require("../FilterSection/FilterSection"));
+var ResourceGrid = function ResourceGrid(_ref) {
+  var content = _ref.content;
+  var cards = content.cards,
+    allFilters = content.allFilters,
+    filtersTitle = content.filtersTitle,
+    introSection = content.introSection;
+
+  // max number of cards per page
+  var cardsPerPage = 9;
+  var _useState = (0, _react.useState)(cardsPerPage),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    numCardsVisible = _useState2[0],
+    setNumCardsVisible = _useState2[1];
+
+  // array of currently applied filters + reducer functions for filter operations
+  var _useReducer = (0, _react.useReducer)(activeFilterReducer, [], createInitialState),
+    _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+    activeFilters = _useReducer2[0],
+    setActiveFiltersDispatch = _useReducer2[1];
+
+  // filtered and paginated cards
+  var _useState3 = (0, _react.useState)(cards),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    paginatedCards = _useState4[0],
+    setPaginatedCards = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    displayLoadMoreButton = _useState6[0],
+    setDisplayLoadMoreButton = _useState6[1];
+
+  // set initial state for filter list to empty array, so no filtering happens by default
+  function createInitialState() {
+    return [];
+  }
+  (0, _react.useEffect)(function () {
+    var resourceCards = (0, _ResourceGridMethods.filterResourceCards)(cards, activeFilters);
+    if ((resourceCards === null || resourceCards === void 0 ? void 0 : resourceCards.length) > numCardsVisible) {
+      setPaginatedCards(resourceCards === null || resourceCards === void 0 ? void 0 : resourceCards.slice(0, numCardsVisible));
+      // if more than 9 cards are returned, paginate them to 9
+      setDisplayLoadMoreButton(true);
+    } else {
+      setPaginatedCards(resourceCards);
+      setDisplayLoadMoreButton(false);
+    }
+  }, [activeFilters, numCardsVisible]);
+  (0, _react.useEffect)(function () {
+    // each time filters change, re-paginate the cards a maximum of 9
+    setNumCardsVisible(9);
+  }, [activeFilters]);
+  function activeFilterReducer(state, action) {
+    if (action.type === 'add_filter') {
+      // if there's current filters, merge new filter into state array
+      if (state != undefined) {
+        return [].concat((0, _toConsumableArray2["default"])(state), [action.filter]);
+      }
+      // otherwise set the first filter
+      return [action.filter];
+    } else if (action.type === 'remove_filter') {
+      // filter out clicked filter from activeFilters array
+      return (0, _toConsumableArray2["default"])(state.filter(function (filter) {
+        return filter.id != action.filter.id;
+      }));
+    } else if (action.type === 'clear_filters') {
+      // override state array with blank array (default value)
+      return createInitialState();
+    }
+  }
+  var loadMoreCards = function loadMoreCards(e) {
+    // adds another 9 cards to the list
+    e.preventDefault();
+    setNumCardsVisible(numCardsVisible + cardsPerPage);
+  };
+  var filterOptionClickHandler = function filterOptionClickHandler(e, filter) {
+    if (activeFilters !== null && activeFilters !== void 0 && activeFilters.includes(filter)) {
+      removeActiveFilterHandler(e, filter);
+    } else {
+      setActiveFiltersDispatch({
+        activeFilters: activeFilters,
+        type: 'add_filter',
+        filter: filter
+      });
+    }
+  };
+  var removeActiveFilterHandler = function removeActiveFilterHandler(e, filter) {
+    setActiveFiltersDispatch({
+      activeFilters: activeFilters,
+      type: 'remove_filter',
+      filter: filter
+    });
+  };
+  var clearAllFiltersHandler = function clearAllFiltersHandler() {
+    setActiveFiltersDispatch({
+      activeFilters: activeFilters,
+      type: 'clear_filters'
+    });
+    setNumCardsVisible(9);
+  };
+  return /*#__PURE__*/_react["default"].createElement("section", {
+    className: "luna-resource-grid--wrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_FilterSection["default"], {
+    content: {
+      introSection: introSection,
+      allFilters: allFilters,
+      filtersTitle: filtersTitle,
+      filterOptionClickHandler: filterOptionClickHandler,
+      activeFilters: activeFilters,
+      clearAllFiltersHandler: clearAllFiltersHandler,
+      removeActiveFilterHandler: removeActiveFilterHandler
+    }
+  }), (0, _ResourceGridMethods.renderResourceGrid)(paginatedCards), (0, _ResourceGridMethods.renderLoadMoreSection)(loadMoreCards, displayLoadMoreButton));
+};
+var _default = ResourceGrid;
+exports["default"] = _default;

package/dist/luna/components/ResourceGrid/ResourceGrid.scss

@@ -0,0 +1,35 @@
+@import "../../../global-styles/terra.scss";
+.luna-resource-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  row-gap: 45px;
+  grid-gap: 32px;
+  padding: 80px 0;
+  justify-items: center;
+  
+  @media screen and (max-width: $breakpoint-md) {
+    padding: 40px 0 ;
+  }
+
+  .ter-bounded-card {
+    width: 100%;
+    max-width: 350px;
+      &__header {
+        flex: 1;
+      }
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 80px;
+  }
+
+  @media screen and (min-width: $breakpoint-xs){
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+    @media screen and (min-width: $breakpoint-md){
+      grid-template-columns: repeat(3, 1fr);
+    }
+}

package/dist/luna/components/ResourceGrid/ResourceGridMethods.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderResourceGrid = exports.renderLoadMoreSection = exports.filterResourceCards = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _terraOne = require("terra-one");
+// Images Sizes here are the same when used in Bounded Cards to preserve the 3:2 image ratio
+var resourceGridImageSizes = {
+  desktop: {
+    width: 272,
+    height: 181,
+    ratio: {
+      width: 3,
+      height: 2
+    }
+  },
+  tablet: {
+    width: 272,
+    height: 181,
+    ratio: {
+      width: 3,
+      height: 2
+    }
+  },
+  mobile: {
+    width: 525,
+    height: 350,
+    ratio: {
+      width: 3,
+      height: 2
+    }
+  }
+};
+var renderLoadMoreSection = function renderLoadMoreSection(loadMoreCards, displayLoadMoreButton) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "luna-resource-grid__load-more"
+  }, displayLoadMoreButton && /*#__PURE__*/_react["default"].createElement(_terraOne.Button, {
+    key: "button-load-more",
+    onClick: function onClick(e) {
+      return loadMoreCards(e);
+    }
+  }, "Load more"));
+};
+exports.renderLoadMoreSection = renderLoadMoreSection;
+var renderResourceGrid = function renderResourceGrid(resourceCards) {
+  if (resourceCards && (resourceCards === null || resourceCards === void 0 ? void 0 : resourceCards.length) > 0) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "luna-resource-grid"
+    }, resourceCards.map(function (resourceCard, index) {
+      var ResourceCardContent = {
+        image: resourceCard === null || resourceCard === void 0 ? void 0 : resourceCard.image,
+        eyebrow: resourceCard === null || resourceCard === void 0 ? void 0 : resourceCard.eyebrow,
+        header: resourceCard === null || resourceCard === void 0 ? void 0 : resourceCard.header,
+        cardLink: resourceCard === null || resourceCard === void 0 ? void 0 : resourceCard.cardLink,
+        imageSizes: resourceGridImageSizes
+      };
+      return /*#__PURE__*/_react["default"].createElement(_terraOne.BoundedCard, {
+        key: index,
+        content: ResourceCardContent
+      });
+    }));
+  }
+};
+exports.renderResourceGrid = renderResourceGrid;
+var filterResourceCards = function filterResourceCards(cards, activeFilters) {
+  if (!cards || (cards === null || cards === void 0 ? void 0 : cards.length) === 0) {
+    // if no cards, don't render anything
+    return null;
+  }
+  if (activeFilters.length < 1 || activeFilters === null) {
+    // if no filters are set, just return all cards (default view)
+    return cards;
+  }
+
+  // create shallow array of filter values for comparison
+  var activeCardFilters = (0, _toConsumableArray2["default"])(activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.map(function (filter) {
+    return filter === null || filter === void 0 ? void 0 : filter.value;
+  }));
+  var matchingCards = [];
+  cards === null || cards === void 0 ? void 0 : cards.map(function (card) {
+    var _card$cardTags;
+    // create shallow array of card tag values for comparison
+    var cardTagValues = card === null || card === void 0 ? void 0 : (_card$cardTags = card.cardTags) === null || _card$cardTags === void 0 ? void 0 : _card$cardTags.map(function (tag) {
+      return tag === null || tag === void 0 ? void 0 : tag.value;
+    });
+    var matchesAllTags = activeCardFilters === null || activeCardFilters === void 0 ? void 0 : activeCardFilters.every(function (filter) {
+      // check if a card has all matching tags
+      if (cardTagValues !== null && cardTagValues !== void 0 && cardTagValues.includes(filter)) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    if (matchesAllTags === true) {
+      matchingCards === null || matchingCards === void 0 ? void 0 : matchingCards.push(card);
+    }
+  });
+  return matchingCards;
+};
+exports.filterResourceCards = filterResourceCards;

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

@@ -414,13 +414,13 @@ var NavBar = function NavBar(props) {
     globalSearch: globalSearch,
     setGlobalSearch: setGlobalSearch,
     waffleMenu: true
-  }, (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.authenticated) && /*#__PURE__*/_react["default"].createElement(_WaffleMenu["default"], {
+  }, (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.login) && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ter-navbar-top__pipe"
+  }, "|"), (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.authenticated) && /*#__PURE__*/_react["default"].createElement(_WaffleMenu["default"], {
     links: waffleMenu === null || waffleMenu === void 0 ? void 0 : waffleMenu.links,
     cta: waffleMenu === null || waffleMenu === void 0 ? void 0 : waffleMenu.cta,
     Link: Link
-  }), (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.login) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ter-navbar-top__pipe"
-  }, "|"), /*#__PURE__*/_react["default"].createElement("button", {
+  }), (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.login) && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     className: "ter-utility-nav__my-account",
     onClick: function onClick() {
@@ -432,7 +432,7 @@ var NavBar = function NavBar(props) {
     width: "21",
     height: "21",
     alt: ""
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "luna-layout__navigation-padding ".concat(menuBarTheme ? "luna-layout__navigation-padding--".concat(menuBarTheme) : "")
   }, !disableMenus && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-navbar__wrapper \n            ".concat(menuBarTheme ? "ter-navbar__wrapper--".concat(menuBarTheme) : "", "\n            ").concat(displayIcons ? "ter-navbar__wrapper--with-icons" : "", "\n            ").concat(displayIcons && menuBarTheme ? "ter-navbar__wrapper--with-icons--".concat(menuBarTheme) : "", "\n          ")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.587",
+  "version": "3.1.589",
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -49,7 +49,7 @@
     "react-player": "^2.11.2",
     "react-scroll": "^1.8.9",
     "smoothscroll-polyfill": "^0.4.4",
-    "terra-one": "^3.0.194"
+    "terra-one": "^3.0.196"
   },
   "scripts": {
     "start": "start-storybook -p 9009 -s public",