luna-one 3.1.586 → 3.1.588

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