luna-one 3.1.586 → 3.1.587

package/dist/luna/components/DataPoint/DataPoint.scss

@@ -1,170 +1,170 @@
-@import "../../../global-styles/terra.scss";
-
-
-/* similar styling between variants */
-
-.data-point {
-  &__header, &__description {
-    font-size: $body-font-size;
-    line-height: 22px;
-    letter-spacing: 0.16px;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__header {
-    @include benton-bold();
-  }
-
-  &__description {
-    @include benton-light();
-  }
-
-  &__icon {
-    width: 47.61px !important;
-    height: 43.8px !important;
-    margin-bottom: 16px;
-    display: inline-block;
-
-    @media screen and (max-width: $breakpoint-md) {
-      width: 75.61px !important;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      width: 47.61px !important;
-    }
-  }
-}
-  
-
-/* variant 1 styling */
-
-.data-point--variant_1 {
-  width: 560px;
-  padding: 50px 40px 103px 40px;
-  display: flex;
-  flex-direction: row;
-
-  @media screen and (max-width: $breakpoint-md) {
-    width: 421px;
-    flex-direction: column;
-    padding: 50px 60px;
-  }
-
-  @media screen and (max-width: $breakpoint-xs) {
-    max-width: 300px;
-    height: fit-content !important;
-    padding: 40px 40px 60px 40px;
-    align-items: center;
-  }
-
-  &__item {
-    min-width: 128px;
-    max-width: 100%;
-
-    @media screen and (max-width: $breakpoint-md) {
-      display: flex;
-      width: 295px;
-
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      display: flex;
-      flex-direction: column;
-    }
-
-    @media screen and (max-width: $breakpoint-xxs) {
-      
-      max-width: 201px;
-    }
-
-    &--1, &--2 {
-      margin-left: 48px;
-      @media screen and (max-width: $breakpoint-md){
-        margin-left: 0;
-        margin-top: 32px;
-      }
-      @media screen and (max-width: $breakpoint-xxs) {
-        margin-top: 24px;
-      }
-    }
-  }
-
-  &__text-wrapper {
-    @media screen and (max-width: $breakpoint-md) {
-      margin-left: 16px;
-    }
-    @media screen and (max-width: $breakpoint-xs) {
-      margin-left: 0;
-    }
-  }
-
-  &__header {
-    @media screen and (max-width: $breakpoint-sm) {
-      display: block !important;
-    }
-  }
-
-  .ter-icon {
-    @media screen and (max-width: $breakpoint-xxs) {
-      margin-bottom: 8px !important; 
-    }
-  }
-
-  
-}
-
-
-/* variant 2 styling*/
-
-.data-point--variant_2a, .data-point--variant_2b {
-  display: flex;
-  flex-direction: column;
-  width: 320px;
-  padding: 65px 40px;
-
-  @media screen and (max-width: $breakpoint-xxs) {
-    width: 275px;
-    padding: 65px 23px;
-  }
-
-  &__text-wrapper {
-    @media screen and (max-width: $breakpoint-xxs) {
-      width: 230px;
-    }
-  }
-
-  &__item {
-    @media screen and (max-width: $breakpoint-xxs) {
-      padding: 0 !important;
-      width: 230px;
-      text-align: center;
-    }
-  }
-  
-  &__item {
-    &--1, &--2 {
-      margin-top: 48px;
-    }
-  }
-}
-
-.data-point--variant_2b {
-  &__item {
-    text-align: center;
-  }
-}
-
-/* variant 3 styling*/
-
-.data-point--variant_3 {
-  max-width: 320px;
-  min-width: 240px;
-  &__item {
-    width: 239px;
-    margin: 0 auto;
-    padding: 40px;
-    text-align: center;
-  }
-}
-
+@import "../../../global-styles/terra.scss";
+
+
+/* similar styling between variants */
+
+.data-point {
+  &__header, &__description {
+    font-size: $body-font-size;
+    line-height: 22px;
+    letter-spacing: 0.16px;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__header {
+    @include benton-bold();
+  }
+
+  &__description {
+    @include benton-light();
+  }
+
+  &__icon {
+    width: 47.61px !important;
+    height: 43.8px !important;
+    margin-bottom: 16px;
+    display: inline-block;
+
+    @media screen and (max-width: $breakpoint-md) {
+      width: 75.61px !important;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      width: 47.61px !important;
+    }
+  }
+}
+  
+
+/* variant 1 styling */
+
+.data-point--variant_1 {
+  width: 560px;
+  padding: 50px 40px 103px 40px;
+  display: flex;
+  flex-direction: row;
+
+  @media screen and (max-width: $breakpoint-md) {
+    width: 421px;
+    flex-direction: column;
+    padding: 50px 60px;
+  }
+
+  @media screen and (max-width: $breakpoint-xs) {
+    max-width: 300px;
+    height: fit-content !important;
+    padding: 40px 40px 60px 40px;
+    align-items: center;
+  }
+
+  &__item {
+    min-width: 128px;
+    max-width: 100%;
+
+    @media screen and (max-width: $breakpoint-md) {
+      display: flex;
+      width: 295px;
+
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      display: flex;
+      flex-direction: column;
+    }
+
+    @media screen and (max-width: $breakpoint-xxs) {
+      
+      max-width: 201px;
+    }
+
+    &--1, &--2 {
+      margin-left: 48px;
+      @media screen and (max-width: $breakpoint-md){
+        margin-left: 0;
+        margin-top: 32px;
+      }
+      @media screen and (max-width: $breakpoint-xxs) {
+        margin-top: 24px;
+      }
+    }
+  }
+
+  &__text-wrapper {
+    @media screen and (max-width: $breakpoint-md) {
+      margin-left: 16px;
+    }
+    @media screen and (max-width: $breakpoint-xs) {
+      margin-left: 0;
+    }
+  }
+
+  &__header {
+    @media screen and (max-width: $breakpoint-sm) {
+      display: block !important;
+    }
+  }
+
+  .ter-icon {
+    @media screen and (max-width: $breakpoint-xxs) {
+      margin-bottom: 8px !important; 
+    }
+  }
+
+  
+}
+
+
+/* variant 2 styling*/
+
+.data-point--variant_2a, .data-point--variant_2b {
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  padding: 65px 40px;
+
+  @media screen and (max-width: $breakpoint-xxs) {
+    width: 275px;
+    padding: 65px 23px;
+  }
+
+  &__text-wrapper {
+    @media screen and (max-width: $breakpoint-xxs) {
+      width: 230px;
+    }
+  }
+
+  &__item {
+    @media screen and (max-width: $breakpoint-xxs) {
+      padding: 0 !important;
+      width: 230px;
+      text-align: center;
+    }
+  }
+  
+  &__item {
+    &--1, &--2 {
+      margin-top: 48px;
+    }
+  }
+}
+
+.data-point--variant_2b {
+  &__item {
+    text-align: center;
+  }
+}
+
+/* variant 3 styling*/
+
+.data-point--variant_3 {
+  max-width: 320px;
+  min-width: 240px;
+  &__item {
+    width: 239px;
+    margin: 0 auto;
+    padding: 40px;
+    text-align: center;
+  }
+}
+

package/dist/luna/components/EventCard/EventCard.scss

@@ -1,134 +1,134 @@
-@import "../../../global-styles/terra.scss";
-
-$event-card-border: 1px solid color("gray-4");
-
-.mep-event-card {
-  min-height: 135px;
-  border-top: $event-card-border;
-  border-bottom: $event-card-border;
-  margin-top: 40px;
-
-  display: -ms-grid;
-
-  display: grid;
-  -ms-grid-columns: 140px 115px 1fr 40px;
-  grid-template-columns: 140px 115px 1fr 40px;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-
-  @media screen and (max-width: 900px) {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    max-width: 256px;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    margin: 40px auto;
-  }
-
-  &__date-section {
-    height: calc(100% - 35px);
-    border-right: $event-card-border;
-
-    @media screen and (max-width: 900px) {
-      height: 95px;
-      margin-top: 20px;
-    }
-  }
-
-  &__focus:focus {
-    outline: 2px solid $sky-blue !important;
-  }
-
-  &__date,
-  &__year {
-    font-size: $eyebrow-font-size;
-    line-height: 14px;
-    margin: 0 20px;
-    text-align: end;
-
-    @media screen and (max-width: 900px) {
-      padding-right: $large-body-font-size;
-      margin: 0;
-    }
-  }
-
-  &__date {
-    margin-bottom: 10px;
-    @include benton-medium();
-  }
-
-  &__image {
-    width: 95px;
-    height: 95px;
-    margin-left: 20px;
-    display: block;
-
-    @media screen and (max-width: 900px) {
-      height: 95px;
-      margin-top: 20px;
-    }
-  }
-
-  &__details {
-    margin: 0 20px;
-    margin: 17px 20px;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-
-  &__industry {
-    font-size: $eyebrow-font-size;
-    line-height: 14px;
-    margin-bottom: 8px;
-    color: #9d9da6;
-  }
-
-  &__name {
-    font-size: $large-body-font-size;
-    line-height: 20px;
-    @include benton-medium();
-  }
-
-  &__description {
-    font-size: $large-body-font-size;
-    line-height: 19px;
-    color: #363545;
-    font-weight: 300;
-  }
-
-  &__location {
-    font-size: $large-body-font-size;
-    line-height: 19px;
-    margin-bottom: 0;
-  }
-
-  .ter-icon {
-    -webkit-transition: 0.3;
-    -o-transition: 0.3;
-    transition: 0.3;
-
-    &:hover {
-      -webkit-transform: scale(1.2);
-      -ms-transform: scale(1.2);
-      transform: scale(1.2);
-    }
-    @media screen and (max-width: 900px) {
-      margin-bottom: 24px;
-      -webkit-transform: translateX(100px);
-      -ms-transform: translateX(100px);
-      transform: translateX(100px);
-
-      &:hover {
-        -webkit-transform: scale(1) translateX(100px);
-        -ms-transform: scale(1) translateX(100px);
-        transform: scale(1) translateX(100px);
-      }
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+$event-card-border: 1px solid color("gray-4");
+
+.mep-event-card {
+  min-height: 135px;
+  border-top: $event-card-border;
+  border-bottom: $event-card-border;
+  margin-top: 40px;
+
+  display: -ms-grid;
+
+  display: grid;
+  -ms-grid-columns: 140px 115px 1fr 40px;
+  grid-template-columns: 140px 115px 1fr 40px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  @media screen and (max-width: 900px) {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    max-width: 256px;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    margin: 40px auto;
+  }
+
+  &__date-section {
+    height: calc(100% - 35px);
+    border-right: $event-card-border;
+
+    @media screen and (max-width: 900px) {
+      height: 95px;
+      margin-top: 20px;
+    }
+  }
+
+  &__focus:focus {
+    outline: 2px solid $sky-blue !important;
+  }
+
+  &__date,
+  &__year {
+    font-size: $eyebrow-font-size;
+    line-height: 14px;
+    margin: 0 20px;
+    text-align: end;
+
+    @media screen and (max-width: 900px) {
+      padding-right: $large-body-font-size;
+      margin: 0;
+    }
+  }
+
+  &__date {
+    margin-bottom: 10px;
+    @include benton-medium();
+  }
+
+  &__image {
+    width: 95px;
+    height: 95px;
+    margin-left: 20px;
+    display: block;
+
+    @media screen and (max-width: 900px) {
+      height: 95px;
+      margin-top: 20px;
+    }
+  }
+
+  &__details {
+    margin: 0 20px;
+    margin: 17px 20px;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  &__industry {
+    font-size: $eyebrow-font-size;
+    line-height: 14px;
+    margin-bottom: 8px;
+    color: #9d9da6;
+  }
+
+  &__name {
+    font-size: $large-body-font-size;
+    line-height: 20px;
+    @include benton-medium();
+  }
+
+  &__description {
+    font-size: $large-body-font-size;
+    line-height: 19px;
+    color: #363545;
+    font-weight: 300;
+  }
+
+  &__location {
+    font-size: $large-body-font-size;
+    line-height: 19px;
+    margin-bottom: 0;
+  }
+
+  .ter-icon {
+    -webkit-transition: 0.3;
+    -o-transition: 0.3;
+    transition: 0.3;
+
+    &:hover {
+      -webkit-transform: scale(1.2);
+      -ms-transform: scale(1.2);
+      transform: scale(1.2);
+    }
+    @media screen and (max-width: 900px) {
+      margin-bottom: 24px;
+      -webkit-transform: translateX(100px);
+      -ms-transform: translateX(100px);
+      transform: translateX(100px);
+
+      &:hover {
+        -webkit-transform: scale(1) translateX(100px);
+        -ms-transform: scale(1) translateX(100px);
+        transform: scale(1) translateX(100px);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+"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 = _interopRequireWildcard(require("react"));
+require("./FilterSection.scss");
+var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
+var _lodash = require("lodash");
+var _FilterSectionMethods = require("./FilterSectionMethods");
+var _useClickListener = _interopRequireDefault(require("../../utils/hooks/useClickListener"));
+var FilterSection = function FilterSection(_ref) {
+  var content = _ref.content;
+  var introSection = content.introSection,
+    allFilters = content.allFilters,
+    filtersTitle = content.filtersTitle,
+    filterOptionClickHandler = content.filterOptionClickHandler,
+    activeFilters = content.activeFilters,
+    clearAllFiltersHandler = content.clearAllFiltersHandler,
+    removeActiveFilterHandler = content.removeActiveFilterHandler;
+  var _useMouse = (0, _useMouse2["default"])(),
+    mouse = _useMouse.mouse;
+  var _useState = (0, _react.useState)(null),
+    _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) {
+      // if clicked dropdown is already open, close it
+      setOpenFilterDropdown(null);
+    } else {
+      setOpenFilterDropdown(filter);
+    }
+  };
+  var handleCloseDropdown = function handleCloseDropdown(e) {
+    var classCheck = function classCheck(target) {
+      var _target$classList, _target$classList2, _target$classList3, _target$classList4;
+      if (target !== null && target !== void 0 && (_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('ter-filter-section__filter-label') || target !== null && target !== void 0 && (_target$classList2 = target.classList) !== null && _target$classList2 !== void 0 && _target$classList2.contains('ter-filter-section__filter-placeholder') || target !== null && target !== void 0 && (_target$classList3 = target.classList) !== null && _target$classList3 !== void 0 && _target$classList3.contains('ter-filter-section__filter-list') || target !== null && target !== void 0 && (_target$classList4 = target.classList) !== null && _target$classList4 !== void 0 && _target$classList4.contains('ter-checkbox__label')) {
+        return true;
+      }
+      return false;
+    };
+    if (classCheck(e === null || e === void 0 ? void 0 : e.target) === false) {
+      setOpenFilterDropdown(null);
+    }
+  };
+  var query = "";
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    var _document;
+    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", {
+    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", {
+    className: "ter-filter-section__clear"
+  }, activeFilters && /*#__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", {
+    className: "ter-filter-section__chips"
+  }, (0, _FilterSectionMethods.renderActiveFilters)(activeFilterChips, removeActiveFilterHandler))));
+};
+var _default = FilterSection;
+exports["default"] = _default;