luna-one 3.1.591 → 3.1.593

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/luna/components/FilterSection/FilterSection.js +46 -16
  2. package/dist/luna/components/FilterSection/FilterSection.scss +46 -14
  3. package/dist/luna/components/FilterSection/FilterSectionMethods.js +11 -5
  4. package/dist/luna/components/ResourceGrid/ResourceGrid.scss +3 -3
  5. package/dist/luna/other-organisms/Flyout/Flyout.js +1 -0
  6. package/dist/luna/other-organisms/Footer/GlobalFooter.js +4 -4
  7. package/package.json +1 -1
package/dist/luna/components/FilterSection/FilterSection.js CHANGED
@@ -10,10 +10,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  require("./FilterSection.scss");
12
12
  var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
13
- var _lodash = require("lodash");
14
13
  var _FilterSectionMethods = require("./FilterSectionMethods");
15
14
  var _useClickListener = _interopRequireDefault(require("../../utils/hooks/useClickListener"));
15
+ var _useScreenSize2 = require("../../utils/hooks/useScreenSize");
16
16
  var FilterSection = function FilterSection(_ref) {
17
+ var _collapseWrapperRef$c;
17
18
  var content = _ref.content;
18
19
  var introSection = content.introSection,
19
20
  allFilters = content.allFilters,
@@ -26,10 +27,18 @@ var FilterSection = function FilterSection(_ref) {
26
27
  mouse = _useMouse.mouse;
27
28
  var _useState = (0, _react.useState)(null),
28
29
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
29
- openFilterDropdown = _useState2[0],
30
- setOpenFilterDropdown = _useState2[1]; // controls which filter dropdown is open
31
-
32
- var filterDropdownClickHandler = function filterDropdownClickHandler(e, filter) {
30
+ hoveredItem = _useState2[0],
31
+ setHoveredItem = _useState2[1];
32
+ var _useState3 = (0, _react.useState)(null),
33
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
34
+ openFilterDropdown = _useState4[0],
35
+ setOpenFilterDropdown = _useState4[1]; // controls which filter dropdown is open
36
+ var _useState5 = (0, _react.useState)(false),
37
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
38
+ filtersCollapsed = _useState6[0],
39
+ setFiltersCollapsed = _useState6[1];
40
+ var collapseWrapperRef = (0, _react.useRef)(null);
41
+ var handleFilterDropdownClick = function handleFilterDropdownClick(e, filter) {
33
42
  var _e$target;
34
43
  if (!(e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.classList.contains('ter-checkbox__label')) && openFilterDropdown === filter) {
35
44
  // if clicked dropdown is already open, close it
@@ -38,18 +47,26 @@ var FilterSection = function FilterSection(_ref) {
38
47
  setOpenFilterDropdown(filter);
39
48
  }
40
49
  };
50
+ var handleOptionHover = function handleOptionHover(e, option) {
51
+ setHoveredItem(option);
52
+ };
41
53
  var handleCloseDropdown = function handleCloseDropdown(e) {
42
- var classCheck = function classCheck(target) {
43
- var _target$classList, _target$classList2, _target$classList3, _target$classList4;
44
- 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')) {
45
- return true;
46
- }
47
- return false;
48
- };
49
- if (classCheck(e === null || e === void 0 ? void 0 : e.target) === false) {
54
+ var _e$target2, _e$target2$classList, _e$target3, _e$target3$classList, _e$target4, _e$target4$classList, _e$target5, _e$target5$classList, _e$target6, _e$target6$classList, _e$target7, _e$target7$classList;
55
+ e.stopPropagation();
56
+ if (!(e !== null && e !== void 0 && (_e$target2 = e.target) !== null && _e$target2 !== void 0 && (_e$target2$classList = _e$target2.classList) !== null && _e$target2$classList !== void 0 && _e$target2$classList.contains('ter-filter-section__filter-label') || e !== null && e !== void 0 && (_e$target3 = e.target) !== null && _e$target3 !== void 0 && (_e$target3$classList = _e$target3.classList) !== null && _e$target3$classList !== void 0 && _e$target3$classList.contains('ter-filter-section__filter-placeholder') || e !== null && e !== void 0 && (_e$target4 = e.target) !== null && _e$target4 !== void 0 && (_e$target4$classList = _e$target4.classList) !== null && _e$target4$classList !== void 0 && _e$target4$classList.contains('ter-filter-section__filter-list') || e !== null && e !== void 0 && (_e$target5 = e.target) !== null && _e$target5 !== void 0 && (_e$target5$classList = _e$target5.classList) !== null && _e$target5$classList !== void 0 && _e$target5$classList.contains('ter-checkbox__label') || e !== null && e !== void 0 && (_e$target6 = e.target) !== null && _e$target6 !== void 0 && (_e$target6$classList = _e$target6.classList) !== null && _e$target6$classList !== void 0 && _e$target6$classList.contains('ter-checkbox') || e !== null && e !== void 0 && (_e$target7 = e.target) !== null && _e$target7 !== void 0 && (_e$target7$classList = _e$target7.classList) !== null && _e$target7$classList !== void 0 && _e$target7$classList.contains('ter-filter-section__filter-checkbox'))) {
50
57
  setOpenFilterDropdown(null);
51
58
  }
52
59
  };
60
+ var _useScreenSize = (0, _useScreenSize2.useScreenSize)(),
61
+ width = _useScreenSize.width;
62
+ (0, _react.useEffect)(function () {
63
+ if (width <= 600) {
64
+ setFiltersCollapsed(true);
65
+ } else {
66
+ setFiltersCollapsed(false);
67
+ }
68
+ }, [width]);
69
+ var filtersWrapperHeight = !filtersCollapsed ? (collapseWrapperRef === null || collapseWrapperRef === void 0 ? void 0 : (_collapseWrapperRef$c = collapseWrapperRef.current) === null || _collapseWrapperRef$c === void 0 ? void 0 : _collapseWrapperRef$c.clientHeight) + 14 + "px" : "0";
53
70
  var query = "";
54
71
  if (typeof window !== "undefined" && typeof document !== "undefined") {
55
72
  var _document;
@@ -60,20 +77,33 @@ var FilterSection = function FilterSection(_ref) {
60
77
  className: "ter-filter-section"
61
78
  }, introSection && /*#__PURE__*/_react["default"].createElement("div", {
62
79
  className: "ter-filter-section__intro"
63
- }, introSection), (allFilters === null || allFilters === void 0 ? void 0 : allFilters.length) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
80
+ }, introSection), (allFilters === null || allFilters === void 0 ? void 0 : allFilters.length) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
81
+ className: "ter-button ter-button--primary--2 ter-filter-section__collapse-button",
82
+ onClick: function onClick(e) {
83
+ setFiltersCollapsed(!filtersCollapsed);
84
+ }
85
+ }, filtersCollapsed ? 'Show Filters' : 'Hide Filters'), /*#__PURE__*/_react["default"].createElement("div", {
86
+ className: "ter-filter-section__collapse-wrapper",
87
+ style: {
88
+ maxHeight: filtersWrapperHeight,
89
+ overflow: filtersCollapsed ? 'hidden' : 'visible'
90
+ }
91
+ }, /*#__PURE__*/_react["default"].createElement("div", {
92
+ ref: collapseWrapperRef
93
+ }, /*#__PURE__*/_react["default"].createElement("div", {
64
94
  className: "ter-filter-section__title"
65
95
  }, /*#__PURE__*/_react["default"].createElement("h4", null, filtersTitle)), /*#__PURE__*/_react["default"].createElement("div", {
66
96
  className: "ter-filter-section__outer "
67
97
  }, /*#__PURE__*/_react["default"].createElement("div", {
68
98
  className: "ter-filter-section__filters"
69
- }, (0, _FilterSectionMethods.renderFiltersSection)(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters), (activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
99
+ }, (0, _FilterSectionMethods.renderFiltersSection)(allFilters, handleFilterDropdownClick, filterOptionClickHandler, openFilterDropdown, activeFilters, handleOptionHover, hoveredItem), (activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
70
100
  className: "ter-filter-section__clear"
71
101
  }, /*#__PURE__*/_react["default"].createElement("button", {
72
102
  className: "ter-filter-section__clear-button",
73
103
  onClick: function onClick(e) {
74
104
  return clearAllFiltersHandler(e);
75
105
  }
76
- }, "Clear all filters")))), (activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
106
+ }, "Clear all filters")))))), (activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
77
107
  className: "ter-filter-section__chips"
78
108
  }, (0, _FilterSectionMethods.renderActiveFilters)(activeFilters, removeActiveFilterHandler))));
79
109
  };
package/dist/luna/components/FilterSection/FilterSection.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  display: flex;
15
15
  flex-wrap: wrap;
16
16
  width: 100%;
17
- grid-gap: 0 24px;
17
+ grid-gap: 0 11px;
18
18
  align-items: center;
19
19
  font-size: $large-body-font-size;
20
20
  margin-bottom: 16px;
@@ -24,10 +24,11 @@
24
24
  display: block;
25
25
  border-radius: 4px;
26
26
  border: 1px solid $trimble-dark-gray;
27
- padding: 16px;
27
+ padding: 11px 14px;
28
28
  color: $trimble-blue;
29
29
  font-weight: 500;
30
- line-height: 1.18;
30
+ line-height: 1;
31
+ font-size: $body-font-size;
31
32
  cursor: pointer;
32
33
  &> span,
33
34
  &> svg {
@@ -38,14 +39,18 @@
38
39
  width: 100%;
39
40
  position: relative;
40
41
  margin-bottom: 15px;
41
- @media screen and (min-width: $breakpoint-xs) {
42
- max-width: 220px;
42
+ @media screen and (min-width: $breakpoint-xs){
43
+ max-width: 270px;
44
+ }
45
+ @media screen and (min-width: $breakpoint-sm) {
46
+ max-width: 215px;
43
47
  }
44
48
  }
45
49
  &-title {
46
50
  font-weight: 500;
47
51
  margin-bottom: 5px;
48
52
  display: block;
53
+ font-size: $body-font-size;
49
54
  }
50
55
  &-list {
51
56
  height: 0;
@@ -69,7 +74,6 @@
69
74
  }
70
75
  &-option {
71
76
  display: flex;
72
- font-size: $body-font-size;
73
77
  padding: 15px;
74
78
  align-items: center;
75
79
  pointer-events: none;
@@ -84,25 +88,40 @@
84
88
  & > .ter-checkbox {
85
89
  padding: 0;
86
90
  }
91
+ &--hovered {
92
+ background-color: $gray--1;
93
+ }
87
94
  }
88
95
  &-label {
89
96
  flex-grow: 1;
90
97
  line-height: 1;
91
98
  padding-left: 24px;
92
99
  padding-bottom: 0;
93
- font-size: $body-font-size;
100
+ font-size: $eyebrow-font-size;
94
101
  &:before {
95
- top: 0;
102
+ top: -2px;
103
+ height: 14px;
104
+ width: 14px;
96
105
  }
97
106
  &:after {
98
- top: 3px;
107
+ top: 1px;
108
+ height: 10px;
109
+ width: 10px;
110
+
99
111
  }
100
112
  }
101
113
  }
102
- &__clear {
103
- @media screen and (max-width: $breakpoint-md) {
104
- width: 100%;
114
+ &__collapse-button {
115
+ font-size: $body-font-size;
116
+ font-weight: 700;
117
+ @media screen and (max-width: $breakpoint-sm) {
118
+ display: block;
119
+ margin-bottom: 14px;
105
120
  }
121
+ }
122
+ &__clear {
123
+ margin-top: 9px;
124
+ width: 100%;
106
125
  &-button {
107
126
  font-size: $body-font-size;
108
127
  font-weight: 500;
@@ -126,7 +145,7 @@
126
145
  }
127
146
  }
128
147
  &__chevron {
129
- margin-right: 24px;
148
+ margin-right: 16px;
130
149
  &--open {
131
150
  transform: rotate(180deg);
132
151
  }
@@ -136,9 +155,22 @@
136
155
  flex-wrap: wrap;
137
156
  padding: 15px 0;
138
157
  &> .ter-chip {
139
- margin-right: 24px;
158
+ margin-right: 16px;
140
159
  margin-bottom: 14px;
141
160
  font-size: $body-font-size;
142
161
  }
143
162
  }
163
+ &__collapse-button {
164
+ display: none;
165
+ padding: 8px 10px;
166
+ height: auto;
167
+ line-height: 1;
168
+ @media screen and (max-width: $breakpoint-xs) {
169
+ display: block;
170
+ }
171
+ }
172
+ &__collapse-wrapper {
173
+ z-index: 10;
174
+ position: relative;
175
+ }
144
176
  }
package/dist/luna/components/FilterSection/FilterSectionMethods.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.renderFiltersSection = exports.renderActiveFilters = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = _interopRequireDefault(require("react"));
9
9
  var _terraOne = require("terra-one");
10
10
  var renderActiveFilters = function renderActiveFilters(activeFilters, removeActiveFilterHandler) {
11
11
  return activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.map(function (filter, i) {
@@ -20,7 +20,7 @@ var renderActiveFilters = function renderActiveFilters(activeFilters, removeActi
20
20
  });
21
21
  };
22
22
  exports.renderActiveFilters = renderActiveFilters;
23
- var renderFiltersSection = function renderFiltersSection(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters) {
23
+ var renderFiltersSection = function renderFiltersSection(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters, handleOptionHover, hoveredItem) {
24
24
  var filterIsChecked = function filterIsChecked(activeFilters, option) {
25
25
  return activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.some(function (filter) {
26
26
  return (filter === null || filter === void 0 ? void 0 : filter.id) === (option === null || option === void 0 ? void 0 : option.id);
@@ -60,9 +60,15 @@ var renderFiltersSection = function renderFiltersSection(allFilters, filterDropd
60
60
  overrideChecked: filterIsChecked(activeFilters, option)
61
61
  };
62
62
  return /*#__PURE__*/_react["default"].createElement("div", {
63
- className: "ter-filter-section__filter-option",
63
+ className: "ter-filter-section__filter-option ".concat(hoveredItem === option.name ? 'ter-filter-section__filter-option--hovered' : ''),
64
64
  key: i,
65
- "aria-label": option === null || option === void 0 ? void 0 : option.name
65
+ "aria-label": option === null || option === void 0 ? void 0 : option.name,
66
+ onMouseOver: function onMouseOver(e) {
67
+ return handleOptionHover(e, option === null || option === void 0 ? void 0 : option.name);
68
+ },
69
+ onMouseLeave: function onMouseLeave(e) {
70
+ return handleOptionHover(e, null);
71
+ }
66
72
  }, /*#__PURE__*/_react["default"].createElement(_terraOne.Checkbox, Object.assign({}, optionAttributes, {
67
73
  handleChange: function handleChange(e) {
68
74
  return filterOptionClickHandler(e, option);
package/dist/luna/components/ResourceGrid/ResourceGrid.scss CHANGED
@@ -29,7 +29,7 @@
29
29
  grid-template-columns: repeat(2, 1fr);
30
30
  }
31
31
 
32
- @media screen and (min-width: $breakpoint-md){
33
- grid-template-columns: repeat(3, 1fr);
34
- }
32
+ @media screen and (min-width: $breakpoint-sm){
33
+ grid-template-columns: repeat(3, 1fr);
34
+ }
35
35
  }
package/dist/luna/other-organisms/Flyout/Flyout.js CHANGED
@@ -157,6 +157,7 @@ var Flyout = function Flyout(_ref) {
157
157
  className: "ter-flyout ".concat(sectorFlyoutDeployed ? 'ter-flyout--deployed' : '')
158
158
  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
159
159
  className: "ter-flyout__close-btn",
160
+ "aria-label": "closes-flyout-section",
160
161
  onClick: function onClick() {
161
162
  return close();
162
163
  }
package/dist/luna/other-organisms/Footer/GlobalFooter.js CHANGED
@@ -46,7 +46,7 @@ var GlobalFooter = function GlobalFooter(_ref) {
46
46
  }, /*#__PURE__*/_react["default"].createElement("ul", {
47
47
  className: "ter-footer__legal-items"
48
48
  }, legalStuff.map(function (link, index) {
49
- var _link$iconImage, _link$iconImage$image, _link$iconImage2, _link$iconImage2$imag, _link$iconImage3, _link$iconImage3$imag, _link$iconImage3$imag2, _link$iconImage4, _link$iconImage5;
49
+ var _link$iconImage, _link$iconImage$image, _link$iconImage2, _link$iconImage2$imag, _link$iconImage3, _link$iconImage4, _link$iconImage4$imag, _link$iconImage4$imag2, _link$iconImage5, _link$iconImage6;
50
50
  var iconImageOriginalHeight = link === null || link === void 0 ? void 0 : (_link$iconImage = link.iconImage) === null || _link$iconImage === void 0 ? void 0 : (_link$iconImage$image = _link$iconImage.image) === null || _link$iconImage$image === void 0 ? void 0 : _link$iconImage$image.height;
51
51
  var iconImageOriginalWidth = link === null || link === void 0 ? void 0 : (_link$iconImage2 = link.iconImage) === null || _link$iconImage2 === void 0 ? void 0 : (_link$iconImage2$imag = _link$iconImage2.image) === null || _link$iconImage2$imag === void 0 ? void 0 : _link$iconImage2$imag.width;
52
52
  var iconImageAspectRatio = Number(parseFloat(iconImageOriginalWidth / iconImageOriginalHeight).toFixed(2));
@@ -65,10 +65,10 @@ var GlobalFooter = function GlobalFooter(_ref) {
65
65
  rel: link.external === false ? "" : "noopener noreferrer",
66
66
  tabIndex: "0",
67
67
  target: typeof (link === null || link === void 0 ? void 0 : link.external) === "boolean" ? link !== null && link !== void 0 && link.external ? "_blank" : "_self" : null
68
- }, link.text), /*#__PURE__*/_react["default"].createElement("img", {
68
+ }, link.text), (link === null || link === void 0 ? void 0 : (_link$iconImage3 = link.iconImage) === null || _link$iconImage3 === void 0 ? void 0 : _link$iconImage3.image) && /*#__PURE__*/_react["default"].createElement("img", {
69
69
  className: "ter-footer__legal-stuff-icon",
70
- src: link === null || link === void 0 ? void 0 : (_link$iconImage3 = link.iconImage) === null || _link$iconImage3 === void 0 ? void 0 : (_link$iconImage3$imag = _link$iconImage3.image) === null || _link$iconImage3$imag === void 0 ? void 0 : (_link$iconImage3$imag2 = _link$iconImage3$imag.file) === null || _link$iconImage3$imag2 === void 0 ? void 0 : _link$iconImage3$imag2.url,
71
- alt: link !== null && link !== void 0 && (_link$iconImage4 = link.iconImage) !== null && _link$iconImage4 !== void 0 && _link$iconImage4.altText ? link === null || link === void 0 ? void 0 : (_link$iconImage5 = link.iconImage) === null || _link$iconImage5 === void 0 ? void 0 : _link$iconImage5.altText : "",
70
+ src: link === null || link === void 0 ? void 0 : (_link$iconImage4 = link.iconImage) === null || _link$iconImage4 === void 0 ? void 0 : (_link$iconImage4$imag = _link$iconImage4.image) === null || _link$iconImage4$imag === void 0 ? void 0 : (_link$iconImage4$imag2 = _link$iconImage4$imag.file) === null || _link$iconImage4$imag2 === void 0 ? void 0 : _link$iconImage4$imag2.url,
71
+ alt: link !== null && link !== void 0 && (_link$iconImage5 = link.iconImage) !== null && _link$iconImage5 !== void 0 && _link$iconImage5.altText ? link === null || link === void 0 ? void 0 : (_link$iconImage6 = link.iconImage) === null || _link$iconImage6 === void 0 ? void 0 : _link$iconImage6.altText : "icon",
72
72
  style: {
73
73
  height: "".concat(iconImageHeight, "px"),
74
74
  width: "".concat(iconImageWidth, "px")
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "luna-one",
3
- "version": "3.1.591",
3
+ "version": "3.1.593",
4
4
  "peerDependencies": {
5
5
  "react": "^18.2.0",
6
6
  "react-dom": "^18.2.0",