luna-one 3.1.586 → 3.1.587

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

@@ -0,0 +1,141 @@
+@import "../../../global-styles/terra.scss";
+
+.ter-filter-section {
+	&__title {
+		font-size: $body-font-size;
+		text-transform: uppercase;
+		margin-bottom: 24px;
+	}
+	&__filters {
+		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+		grid-gap: 0 24px;
+		align-items: center;
+		font-size: $large-body-font-size;
+		margin-bottom: 16px;
+	}
+	&__filter {
+		&-placeholder {
+			display: block;
+			border-radius: 4px;
+			border: 1px solid $trimble-dark-gray;	
+			padding: 16px;
+			color: $trimble-blue;
+			font-weight: 500;
+			line-height: 1.18;
+			cursor: pointer;
+			&> span,
+			&> svg {
+				pointer-events: none;
+			}
+		}
+		&-wrapper {
+			max-width: 220px;
+			width: 100%;
+			position: relative;
+			margin-bottom: 15px;
+		}
+		&-title {
+			font-weight: 500;
+			margin-bottom: 5px;
+			display: block;
+		}
+		&-list {
+			height: 0;
+			border-radius: 0 0 5px 5px;
+			border: 1px solid black;
+			background-color: $white;
+			max-height: 250px;
+			overflow-y: scroll;
+			display: block;
+			opacity: 0;
+			position: absolute;
+			left: 0;
+			right: 0;
+			z-index: 1;
+			visibility: hidden;
+			&--open {
+				height: auto;
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+		&-option {
+			display: flex;
+			font-size: $body-font-size;
+			padding: 15px;
+			align-items: center;
+			pointer-events: none;
+			cursor: default;
+			& > * {
+				cursor: pointer;
+				pointer-events: auto;
+			}
+			& + .ter-filter-section__filter-option {
+				border-top: 1px solid $concrete-gray;
+			}
+			& > .ter-checkbox {
+				padding: 0;
+			}
+		}
+		&-label {
+			flex-grow: 1;
+			line-height: 1;
+			padding-left: 24px;
+			padding-bottom: 0;
+			font-size: $body-font-size;
+			&:before {
+				top: 0;
+			}
+			&:after {
+				top: 3px;
+			}
+		}
+	}
+	&__clear {
+		@media screen and (max-width: $breakpoint-md) {
+			width: 100%;
+		}
+		&-button {
+			font-size: $body-font-size;
+			font-weight: 500;
+			position: relative;
+			cursor: pointer;
+			display: block;
+			padding: 0;
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				background-color: $trimble-gold;
+				height: 2px;
+			}
+			&:hover:after {
+				background-color: $trimble-dark-gray;
+			}
+		}
+	}
+	&__filter-wrapper:last-of-type {
+		margin-right: 24px;
+	}
+	&__chevron {
+		margin-right: 24px;
+		&--open {
+			transform: rotate(180deg);
+		}
+	}
+	&__chips {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 15px 0;
+		&> .ter-chip {
+			margin-right: 24px;
+			margin-bottom: 14px;
+			font-size: $body-font-size;
+		}
+	}
+}

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderFiltersSection = exports.renderActiveFilters = void 0;
+var _react = _interopRequireDefault(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) {
+    return /*#__PURE__*/_react["default"].createElement(_terraOne.Chip, {
+      key: i,
+      isSelected: false,
+      removeChipClickHandler: function removeChipClickHandler(e) {
+        return removeActiveFilterHandler(e, filter.id);
+      },
+      label: filter === null || filter === void 0 ? void 0 : filter.name
+    });
+  });
+};
+exports.renderActiveFilters = renderActiveFilters;
+var renderFiltersSection = function renderFiltersSection(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters) {
+  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
+      };
+      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);
+        }
+      })));
+    })));
+  });
+};
+exports.renderFiltersSection = renderFiltersSection;

package/dist/luna/components/HTMLEmbed/HTMLEmbed.scss

@@ -1,52 +1,52 @@
-@import "../../../global-styles/terra.scss";
-
-.MXP-embed {
-  &__header {
-    font-size: $heading-3-size;
-    @include benton-very-bold();
-    text-align: center;
-  }
-
-  &__subheader {
-    text-align: center;
-    font-weight: 450;
-    font-size: $subheading-size;
-  }
-
-  &__content-wrapper {
-    display: flex;
-    margin: 0 auto;
-    
-    div, section, article {
-      margin: 0 auto;
-    }
-
-    iframe {
-      margin: 0 auto;
-    }
-    &--ratio {
-      position: relative;
-      height: 100%;
-      overflow: auto;
-      &-1-1 {
-        padding-bottom: 100%;
-      }
-      &-3-4 {
-        padding-bottom: 133%;
-      }
-      &-4-3 {
-        padding-bottom: 75%;
-      }
-      & > *,
-      & > iframe {
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        height: 100%;
-        width: 100%;
-      }
-    }
-  }
+@import "../../../global-styles/terra.scss";
+
+.MXP-embed {
+  &__header {
+    font-size: $heading-3-size;
+    @include benton-very-bold();
+    text-align: center;
+  }
+
+  &__subheader {
+    text-align: center;
+    font-weight: 450;
+    font-size: $subheading-size;
+  }
+
+  &__content-wrapper {
+    display: flex;
+    margin: 0 auto;
+    
+    div, section, article {
+      margin: 0 auto;
+    }
+
+    iframe {
+      margin: 0 auto;
+    }
+    &--ratio {
+      position: relative;
+      height: 100%;
+      overflow: auto;
+      &-1-1 {
+        padding-bottom: 100%;
+      }
+      &-3-4 {
+        padding-bottom: 133%;
+      }
+      &-4-3 {
+        padding-bottom: 75%;
+      }
+      & > *,
+      & > iframe {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
 }

package/dist/luna/components/Header/Header.scss

@@ -1,36 +1,36 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-header {
-  width: 100%;
-  
-  &--centered {
-    text-align: center;
-  }
-
-  &__container {
-    width: 100%;
-    margin: 0;
-
-    .eyebrow {
-      @include h1-standard-size;
-      margin: 0;
-      text-transform: uppercase;
-      font-weight: 700 !important;
-    }
-
-    .headline {
-      @include header-standard-size;
-      margin: 12px 0 0 0;
-
-      &--no-margin {
-        margin: 0;
-      }
-    }
-
-    .subhead {
-      @include subheader-standard-size;
-      margin: 6px 0 0 0;
-      font-weight: $medium-font-weight !important;
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.ter-header {
+  width: 100%;
+  
+  &--centered {
+    text-align: center;
+  }
+
+  &__container {
+    width: 100%;
+    margin: 0;
+
+    .eyebrow {
+      @include h1-standard-size;
+      margin: 0;
+      text-transform: uppercase;
+      font-weight: 700 !important;
+    }
+
+    .headline {
+      @include header-standard-size;
+      margin: 12px 0 0 0;
+
+      &--no-margin {
+        margin: 0;
+      }
+    }
+
+    .subhead {
+      @include subheader-standard-size;
+      margin: 6px 0 0 0;
+      font-weight: $medium-font-weight !important;
+    }
+  }
+}