luna-one 3.1.586 → 3.1.588

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.
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
10
+ var _react = _interopRequireWildcard(require("react"));
11
+ require("./FilterSection.scss");
12
+ var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
13
+ var _lodash = require("lodash");
14
+ var _FilterSectionMethods = require("./FilterSectionMethods");
15
+ var _useClickListener = _interopRequireDefault(require("../../utils/hooks/useClickListener"));
16
+ var FilterSection = function FilterSection(_ref) {
17
+ var content = _ref.content;
18
+ var introSection = content.introSection,
19
+ allFilters = content.allFilters,
20
+ filtersTitle = content.filtersTitle,
21
+ filterOptionClickHandler = content.filterOptionClickHandler,
22
+ activeFilters = content.activeFilters,
23
+ clearAllFiltersHandler = content.clearAllFiltersHandler,
24
+ removeActiveFilterHandler = content.removeActiveFilterHandler;
25
+ var _useMouse = (0, _useMouse2["default"])(),
26
+ mouse = _useMouse.mouse;
27
+ var _useState = (0, _react.useState)(null),
28
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
29
+ openFilterDropdown = _useState2[0],
30
+ setOpenFilterDropdown = _useState2[1]; // controls which filter dropdown is open
31
+ var _useState3 = (0, _react.useState)(activeFilters),
32
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
33
+ activeFilterChips = _useState4[0],
34
+ setActiveFilterChips = _useState4[1];
35
+ var filterDropdownClickHandler = function filterDropdownClickHandler(e, filter) {
36
+ var _e$target;
37
+ if (!(e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.classList.contains('ter-checkbox__label')) && openFilterDropdown === filter) {
38
+ // if clicked dropdown is already open, close it
39
+ setOpenFilterDropdown(null);
40
+ } else {
41
+ setOpenFilterDropdown(filter);
42
+ }
43
+ };
44
+ var handleCloseDropdown = function handleCloseDropdown(e) {
45
+ var classCheck = function classCheck(target) {
46
+ var _target$classList, _target$classList2, _target$classList3, _target$classList4;
47
+ 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')) {
48
+ return true;
49
+ }
50
+ return false;
51
+ };
52
+ if (classCheck(e === null || e === void 0 ? void 0 : e.target) === false) {
53
+ setOpenFilterDropdown(null);
54
+ }
55
+ };
56
+ var query = "";
57
+ if (typeof window !== "undefined" && typeof document !== "undefined") {
58
+ var _document;
59
+ query = ((_document = document) === null || _document === void 0 ? void 0 : _document.querySelectorAll(".ter-filter-section__filter-placeholder").length) > 0;
60
+ }
61
+ (0, _useClickListener["default"])(handleCloseDropdown, query);
62
+ (0, _react.useEffect)(function () {
63
+ setActiveFilterChips(activeFilters);
64
+ }, [activeFilters]);
65
+ return /*#__PURE__*/_react["default"].createElement("section", {
66
+ className: "ter-filter-section"
67
+ }, introSection && /*#__PURE__*/_react["default"].createElement("p", null, introSection), allFilters && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
68
+ className: "ter-filter-section__title"
69
+ }, /*#__PURE__*/_react["default"].createElement("h4", null, filtersTitle)), /*#__PURE__*/_react["default"].createElement("div", {
70
+ className: "ter-filter-section__outer "
71
+ }, /*#__PURE__*/_react["default"].createElement("div", {
72
+ className: "ter-filter-section__filters"
73
+ }, (0, _FilterSectionMethods.renderFiltersSection)(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters), /*#__PURE__*/_react["default"].createElement("div", {
74
+ className: "ter-filter-section__clear"
75
+ }, activeFilters && /*#__PURE__*/_react["default"].createElement("button", {
76
+ className: "ter-filter-section__clear-button",
77
+ onClick: function onClick(e) {
78
+ return clearAllFiltersHandler(e);
79
+ }
80
+ }, "Clear all filters")))), (activeFilterChips === null || activeFilterChips === void 0 ? void 0 : activeFilterChips.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
81
+ className: "ter-filter-section__chips"
82
+ }, (0, _FilterSectionMethods.renderActiveFilters)(activeFilterChips, removeActiveFilterHandler))));
83
+ };
84
+ var _default = FilterSection;
85
+ exports["default"] = _default;
@@ -0,0 +1,141 @@
1
+ @import "../../../global-styles/terra.scss";
2
+
3
+ .ter-filter-section {
4
+ &__title {
5
+ font-size: $body-font-size;
6
+ text-transform: uppercase;
7
+ margin-bottom: 24px;
8
+ }
9
+ &__filters {
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ width: 100%;
13
+ grid-gap: 0 24px;
14
+ align-items: center;
15
+ font-size: $large-body-font-size;
16
+ margin-bottom: 16px;
17
+ }
18
+ &__filter {
19
+ &-placeholder {
20
+ display: block;
21
+ border-radius: 4px;
22
+ border: 1px solid $trimble-dark-gray;
23
+ padding: 16px;
24
+ color: $trimble-blue;
25
+ font-weight: 500;
26
+ line-height: 1.18;
27
+ cursor: pointer;
28
+ &> span,
29
+ &> svg {
30
+ pointer-events: none;
31
+ }
32
+ }
33
+ &-wrapper {
34
+ max-width: 220px;
35
+ width: 100%;
36
+ position: relative;
37
+ margin-bottom: 15px;
38
+ }
39
+ &-title {
40
+ font-weight: 500;
41
+ margin-bottom: 5px;
42
+ display: block;
43
+ }
44
+ &-list {
45
+ height: 0;
46
+ border-radius: 0 0 5px 5px;
47
+ border: 1px solid black;
48
+ background-color: $white;
49
+ max-height: 250px;
50
+ overflow-y: scroll;
51
+ display: block;
52
+ opacity: 0;
53
+ position: absolute;
54
+ left: 0;
55
+ right: 0;
56
+ z-index: 1;
57
+ visibility: hidden;
58
+ &--open {
59
+ height: auto;
60
+ visibility: visible;
61
+ opacity: 1;
62
+ }
63
+ }
64
+ &-option {
65
+ display: flex;
66
+ font-size: $body-font-size;
67
+ padding: 15px;
68
+ align-items: center;
69
+ pointer-events: none;
70
+ cursor: default;
71
+ & > * {
72
+ cursor: pointer;
73
+ pointer-events: auto;
74
+ }
75
+ & + .ter-filter-section__filter-option {
76
+ border-top: 1px solid $concrete-gray;
77
+ }
78
+ & > .ter-checkbox {
79
+ padding: 0;
80
+ }
81
+ }
82
+ &-label {
83
+ flex-grow: 1;
84
+ line-height: 1;
85
+ padding-left: 24px;
86
+ padding-bottom: 0;
87
+ font-size: $body-font-size;
88
+ &:before {
89
+ top: 0;
90
+ }
91
+ &:after {
92
+ top: 3px;
93
+ }
94
+ }
95
+ }
96
+ &__clear {
97
+ @media screen and (max-width: $breakpoint-md) {
98
+ width: 100%;
99
+ }
100
+ &-button {
101
+ font-size: $body-font-size;
102
+ font-weight: 500;
103
+ position: relative;
104
+ cursor: pointer;
105
+ display: block;
106
+ padding: 0;
107
+ &:after {
108
+ content: "";
109
+ display: block;
110
+ position: absolute;
111
+ bottom: 0;
112
+ left: 0;
113
+ right: 0;
114
+ background-color: $trimble-gold;
115
+ height: 2px;
116
+ }
117
+ &:hover:after {
118
+ background-color: $trimble-dark-gray;
119
+ }
120
+ }
121
+ }
122
+ &__filter-wrapper:last-of-type {
123
+ margin-right: 24px;
124
+ }
125
+ &__chevron {
126
+ margin-right: 24px;
127
+ &--open {
128
+ transform: rotate(180deg);
129
+ }
130
+ }
131
+ &__chips {
132
+ display: flex;
133
+ flex-wrap: wrap;
134
+ padding: 15px 0;
135
+ &> .ter-chip {
136
+ margin-right: 24px;
137
+ margin-bottom: 14px;
138
+ font-size: $body-font-size;
139
+ }
140
+ }
141
+ }
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.renderFiltersSection = exports.renderActiveFilters = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _terraOne = require("terra-one");
10
+ var renderActiveFilters = function renderActiveFilters(activeFilters, removeActiveFilterHandler) {
11
+ return activeFilters === null || activeFilters === void 0 ? void 0 : activeFilters.map(function (filter, i) {
12
+ return /*#__PURE__*/_react["default"].createElement(_terraOne.Chip, {
13
+ key: i,
14
+ isSelected: false,
15
+ removeChipClickHandler: function removeChipClickHandler(e) {
16
+ return removeActiveFilterHandler(e, filter.id);
17
+ },
18
+ label: filter === null || filter === void 0 ? void 0 : filter.name
19
+ });
20
+ });
21
+ };
22
+ exports.renderActiveFilters = renderActiveFilters;
23
+ var renderFiltersSection = function renderFiltersSection(allFilters, filterDropdownClickHandler, filterOptionClickHandler, openFilterDropdown, activeFilters) {
24
+ return allFilters === null || allFilters === void 0 ? void 0 : allFilters.map(function (filter, i) {
25
+ var _filter$options;
26
+ return /*#__PURE__*/_react["default"].createElement("div", {
27
+ key: i,
28
+ className: "ter-filter-section__filter-wrapper"
29
+ }, /*#__PURE__*/_react["default"].createElement("label", {
30
+ className: "ter-filter-section__filter-title"
31
+ }, filter === null || filter === void 0 ? void 0 : filter.name), /*#__PURE__*/_react["default"].createElement("div", {
32
+ className: "ter-filter-section__filter-placeholder",
33
+ onClick: function onClick(e) {
34
+ return filterDropdownClickHandler(e, filter === null || filter === void 0 ? void 0 : filter.id);
35
+ }
36
+ }, /*#__PURE__*/_react["default"].createElement("svg", {
37
+ xmlns: "http://www.w3.org/2000/svg",
38
+ width: "16",
39
+ height: "11",
40
+ fill: "currentColor",
41
+ className: "ter-filter-section__chevron ".concat(openFilterDropdown === (filter === null || filter === void 0 ? void 0 : filter.id) ? 'ter-filter-section__chevron--open' : '')
42
+ }, /*#__PURE__*/_react["default"].createElement("path", {
43
+ fill: "currentColor",
44
+ d: "M1.88.453 8 6.56 14.12.453 16 2.333l-8 8-8-8L1.88.453Z"
45
+ })), /*#__PURE__*/_react["default"].createElement("span", null, "Select")), /*#__PURE__*/_react["default"].createElement("div", {
46
+ className: "ter-filter-section__filter-list ".concat(openFilterDropdown === (filter === null || filter === void 0 ? void 0 : filter.id) ? 'ter-filter-section__filter-list--open' : '')
47
+ }, filter === null || filter === void 0 ? void 0 : (_filter$options = filter.options) === null || _filter$options === void 0 ? void 0 : _filter$options.map(function (option, i) {
48
+ var isChecked = activeFilters.some(function (filter) {
49
+ return (filter === null || filter === void 0 ? void 0 : filter.id) === (option === null || option === void 0 ? void 0 : option.id);
50
+ });
51
+ var optionAttributes = {
52
+ label: option === null || option === void 0 ? void 0 : option.name,
53
+ name: option === null || option === void 0 ? void 0 : option.name,
54
+ inputClass: "ter-filter-section__filter-checkbox",
55
+ labelClass: "ter-filter-section__filter-label",
56
+ overrideChecked: isChecked
57
+ };
58
+ return /*#__PURE__*/_react["default"].createElement("div", {
59
+ className: "ter-filter-section__filter-option",
60
+ key: i,
61
+ "aria-label": option === null || option === void 0 ? void 0 : option.name
62
+ }, /*#__PURE__*/_react["default"].createElement(_terraOne.Checkbox, Object.assign({}, optionAttributes, {
63
+ checked: true,
64
+ handleChange: function handleChange(e) {
65
+ return filterOptionClickHandler(e, option === null || option === void 0 ? void 0 : option.id);
66
+ }
67
+ })));
68
+ })));
69
+ });
70
+ };
71
+ exports.renderFiltersSection = renderFiltersSection;
@@ -414,13 +414,13 @@ var NavBar = function NavBar(props) {
414
414
  globalSearch: globalSearch,
415
415
  setGlobalSearch: setGlobalSearch,
416
416
  waffleMenu: true
417
- }, (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.authenticated) && /*#__PURE__*/_react["default"].createElement(_WaffleMenu["default"], {
417
+ }, (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.login) && /*#__PURE__*/_react["default"].createElement("span", {
418
+ className: "ter-navbar-top__pipe"
419
+ }, "|"), (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.authenticated) && /*#__PURE__*/_react["default"].createElement(_WaffleMenu["default"], {
418
420
  links: waffleMenu === null || waffleMenu === void 0 ? void 0 : waffleMenu.links,
419
421
  cta: waffleMenu === null || waffleMenu === void 0 ? void 0 : waffleMenu.cta,
420
422
  Link: Link
421
- }), (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.login) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
422
- className: "ter-navbar-top__pipe"
423
- }, "|"), /*#__PURE__*/_react["default"].createElement("button", {
423
+ }), (sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.login) && /*#__PURE__*/_react["default"].createElement("button", {
424
424
  type: "button",
425
425
  className: "ter-utility-nav__my-account",
426
426
  onClick: function onClick() {
@@ -432,7 +432,7 @@ var NavBar = function NavBar(props) {
432
432
  width: "21",
433
433
  height: "21",
434
434
  alt: ""
435
- })))), /*#__PURE__*/_react["default"].createElement("div", {
435
+ }))), /*#__PURE__*/_react["default"].createElement("div", {
436
436
  className: "luna-layout__navigation-padding ".concat(menuBarTheme ? "luna-layout__navigation-padding--".concat(menuBarTheme) : "")
437
437
  }, !disableMenus && /*#__PURE__*/_react["default"].createElement("div", {
438
438
  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 ")
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+ var _react = require("react");
8
+ var useClickListener = function useClickListener(handler, selectorCheck) {
9
+ (0, _react.useEffect)(function () {
10
+ // Check if selector is passed to function, and selected element exists in DOM. selectorCheck should be a DOM query, like 'document.querySelectorAll(".nav-entry").length > 0'
11
+ // if the element doesn't exist in the DOM we shouldn't add a listener/handler for it onto the app.
12
+ // hopefully this approach results in better performance by not having blank listeners sitting in memory!
13
+ if (selectorCheck && typeof window !== "undefined" && typeof document !== "undefined") {
14
+ document.addEventListener("click", handler);
15
+ return function () {
16
+ document.removeEventListener("click", handler);
17
+ };
18
+ }
19
+ }, [handler, selectorCheck]);
20
+ };
21
+ var _default = useClickListener;
22
+ exports["default"] = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "luna-one",
3
- "version": "3.1.586",
3
+ "version": "3.1.588",
4
4
  "peerDependencies": {
5
5
  "react": "^18.2.0",
6
6
  "react-dom": "^18.2.0",
@@ -49,7 +49,7 @@
49
49
  "react-player": "^2.11.2",
50
50
  "react-scroll": "^1.8.9",
51
51
  "smoothscroll-polyfill": "^0.4.4",
52
- "terra-one": "^3.0.189"
52
+ "terra-one": "^3.0.194"
53
53
  },
54
54
  "scripts": {
55
55
  "start": "start-storybook -p 9009 -s public",
@@ -57,7 +57,7 @@
57
57
  "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
58
58
  "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!terra-component-lib)/\"",
59
59
  "eject": "react-scripts eject",
60
- "push-update": "npm version patch && npm run build && npm publish && git push origin master",
60
+ "luna-publish": "git checkout master && git pull && npm install && npm version patch && npm run build && npm publish && git push",
61
61
  "update-terra": "npm update terra-component-lib",
62
62
  "patch": "git add . && git commit -m 'Bug fix' && npm version patch && npm run build && npm publish afplay /System/Library/Sounds/Pop.aiff ",
63
63
  "storybook": "start-storybook -p 9009 -s public",