luna-one 3.1.591 → 3.1.593

Sign up to get free protection for your applications and to get access to all the features.
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",