@bonlineza/luxity-lib 2.19.0 → 2.20.0

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 (16) hide show
  1. package/AddInterest.js +1 -3
  2. package/BrandSelector.js +1 -3
  3. package/GraphQLDropdownSelector.js +1 -3
  4. package/Interests.js +1 -3
  5. package/LuxityGraphQLDropdownSelector.js +1 -3
  6. package/MaterialSelector.js +1 -3
  7. package/ModelSelector.js +1 -3
  8. package/RareStepHeader.js +29 -51
  9. package/build/bundle.js +29 -51
  10. package/package.json +1 -1
  11. package/svg/MyProfile.js +2 -1
  12. package/LuxityLoader.js +0 -75
  13. package/RareStepLoginModal.js +0 -15
  14. package/svg/LuxityArrowLeft.js +0 -28
  15. package/svg/LuxityArrowRight.js +0 -28
  16. package/svg/RareStepLogo.js +0 -8
package/AddInterest.js CHANGED
@@ -9660,12 +9660,10 @@
9660
9660
  return props.theme.rareStepFontSize.h5;
9661
9661
  });
9662
9662
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
9663
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
9663
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
9664
9664
  return props.theme.marginPaddings[3];
9665
9665
  }, function (props) {
9666
9666
  return props.theme.rareStepColors.ntrl40;
9667
- }, function (props) {
9668
- return props.theme.rareStepColors.ntrl40;
9669
9667
  });
9670
9668
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
9671
9669
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
package/BrandSelector.js CHANGED
@@ -10894,12 +10894,10 @@
10894
10894
  return props.theme.rareStepFontSize.h5;
10895
10895
  });
10896
10896
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
10897
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10897
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10898
10898
  return props.theme.marginPaddings[3];
10899
10899
  }, function (props) {
10900
10900
  return props.theme.rareStepColors.ntrl40;
10901
- }, function (props) {
10902
- return props.theme.rareStepColors.ntrl40;
10903
10901
  });
10904
10902
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
10905
10903
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
package/GraphQLDropdownSelector.js CHANGED
@@ -11029,12 +11029,10 @@
11029
11029
  return props.theme.rareStepFontSize.h5;
11030
11030
  });
11031
11031
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
11032
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
11032
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
11033
11033
  return props.theme.marginPaddings[3];
11034
11034
  }, function (props) {
11035
11035
  return props.theme.rareStepColors.ntrl40;
11036
- }, function (props) {
11037
- return props.theme.rareStepColors.ntrl40;
11038
11036
  });
11039
11037
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
11040
11038
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
package/Interests.js CHANGED
@@ -9463,12 +9463,10 @@
9463
9463
  return props.theme.rareStepFontSize.h5;
9464
9464
  });
9465
9465
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
9466
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
9466
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
9467
9467
  return props.theme.marginPaddings[3];
9468
9468
  }, function (props) {
9469
9469
  return props.theme.rareStepColors.ntrl40;
9470
- }, function (props) {
9471
- return props.theme.rareStepColors.ntrl40;
9472
9470
  });
9473
9471
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
9474
9472
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
package/LuxityGraphQLDropdownSelector.js CHANGED
@@ -10930,12 +10930,10 @@
10930
10930
  return props.theme.rareStepFontSize.h5;
10931
10931
  });
10932
10932
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
10933
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10933
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10934
10934
  return props.theme.marginPaddings[3];
10935
10935
  }, function (props) {
10936
10936
  return props.theme.rareStepColors.ntrl40;
10937
- }, function (props) {
10938
- return props.theme.rareStepColors.ntrl40;
10939
10937
  });
10940
10938
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
10941
10939
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
package/MaterialSelector.js CHANGED
@@ -10895,12 +10895,10 @@
10895
10895
  return props.theme.rareStepFontSize.h5;
10896
10896
  });
10897
10897
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
10898
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10898
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10899
10899
  return props.theme.marginPaddings[3];
10900
10900
  }, function (props) {
10901
10901
  return props.theme.rareStepColors.ntrl40;
10902
- }, function (props) {
10903
- return props.theme.rareStepColors.ntrl40;
10904
10902
  });
10905
10903
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
10906
10904
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
package/ModelSelector.js CHANGED
@@ -10895,12 +10895,10 @@
10895
10895
  return props.theme.rareStepFontSize.h5;
10896
10896
  });
10897
10897
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
10898
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10898
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10899
10899
  return props.theme.marginPaddings[3];
10900
10900
  }, function (props) {
10901
10901
  return props.theme.rareStepColors.ntrl40;
10902
- }, function (props) {
10903
- return props.theme.rareStepColors.ntrl40;
10904
10902
  });
10905
10903
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
10906
10904
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
package/RareStepHeader.js CHANGED
@@ -224,12 +224,10 @@
224
224
  return props.theme.rareStepFontSize.h5;
225
225
  });
226
226
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
227
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
227
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
228
228
  return props.theme.marginPaddings[3];
229
229
  }, function (props) {
230
230
  return props.theme.rareStepColors.ntrl40;
231
- }, function (props) {
232
- return props.theme.rareStepColors.ntrl40;
233
231
  });
234
232
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
235
233
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
@@ -325,47 +323,20 @@
325
323
  };
326
324
 
327
325
  var HeaderDropdown = function HeaderDropdown(_ref) {
328
- var _headerDropdownProduc;
329
-
330
- var headerDropdownProductObject = _ref.headerDropdownProductObject,
326
+ var currentSelectedItem = _ref.currentSelectedItem,
331
327
  handleShowDropdown = _ref.handleShowDropdown,
332
328
  handleHideDropdown = _ref.handleHideDropdown;
333
-
334
- var _useState = React.useState([]),
335
- _useState2 = _slicedToArray(_useState, 2),
336
- currentModels = _useState2[0],
337
- setCurrentModels = _useState2[1];
338
-
339
- var _useState3 = React.useState(null),
340
- _useState4 = _slicedToArray(_useState3, 2),
341
- currentBrand = _useState4[0],
342
- setCurrentBrand = _useState4[1];
343
-
344
- var handleBrandHover = function handleBrandHover(brand) {
345
- setCurrentBrand(brand);
346
- setCurrentModels(brand.models);
347
- };
348
-
349
329
  return /*#__PURE__*/React__default.createElement(Dropdown, {
350
330
  onMouseOver: handleShowDropdown,
351
331
  onMouseOut: handleHideDropdown
352
- }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, headerDropdownProductObject === null || headerDropdownProductObject === void 0 ? void 0 : (_headerDropdownProduc = headerDropdownProductObject.brands) === null || _headerDropdownProduc === void 0 ? void 0 : _headerDropdownProduc.map(function (brand, index) {
353
- return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
354
- key: index,
355
- onMouseOver: function onMouseOver() {
356
- return handleBrandHover(brand);
357
- }
358
- }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, {
359
- href: brand.brandLink
360
- }, brand.brandName));
361
- })), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
332
+ }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownModels, null, ((currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.models) || []).map(function (model, index) {
362
333
  return /*#__PURE__*/React__default.createElement(DropdownModelsList, {
363
334
  key: index
364
335
  }, /*#__PURE__*/React__default.createElement(DropdownLink, {
365
336
  href: model.modelLink
366
337
  }, model.modelName));
367
- })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
368
- src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl
338
+ })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
339
+ src: currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl
369
340
  }))));
370
341
  };
371
342
 
@@ -374,14 +345,16 @@
374
345
  dropdownOpenIconUrl = _ref.dropdownOpenIconUrl,
375
346
  handleShowDropdown = _ref.handleShowDropdown,
376
347
  handleHideDropdown = _ref.handleHideDropdown,
377
- showDropdown = _ref.showDropdown,
348
+ currentSelectedItem = _ref.currentSelectedItem,
378
349
  desktopHeaderLinks = _ref.desktopHeaderLinks;
379
350
  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, desktopHeaderLinks.left.map(function (link, index) {
380
351
  return link !== null && link !== void 0 && link.isDropdown ? /*#__PURE__*/React__default.createElement(NavigationLink, {
381
352
  key: index,
382
- onMouseOver: handleShowDropdown,
353
+ onMouseOver: function onMouseOver() {
354
+ return handleShowDropdown(link);
355
+ },
383
356
  onMouseOut: handleHideDropdown
384
- }, link.name, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
357
+ }, link.name, currentSelectedItem.name === link.name ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
385
358
  src: dropdownClosedIconUrl
386
359
  }) : /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
387
360
  src: dropdownOpenIconUrl
@@ -413,18 +386,17 @@
413
386
  handleOnAccountClick = _ref.handleOnAccountClick,
414
387
  handleOnCartClick = _ref.handleOnCartClick,
415
388
  userIconDropdownContent = _ref.userIconDropdownContent;
389
+ var timeoutIdRef = React.useRef(null);
416
390
 
417
391
  var _useState = React.useState(false),
418
392
  _useState2 = _slicedToArray(_useState, 2),
419
- showDropdown = _useState2[0],
420
- setShowDropdown = _useState2[1];
393
+ showSearch = _useState2[0],
394
+ setShowSearch = _useState2[1];
421
395
 
422
- var timeoutIdRef = React.useRef(null);
423
-
424
- var _useState3 = React.useState(false),
396
+ var _useState3 = React.useState({}),
425
397
  _useState4 = _slicedToArray(_useState3, 2),
426
- showSearch = _useState4[0],
427
- setShowSearch = _useState4[1];
398
+ currentSelectedItem = _useState4[0],
399
+ setCurrentSelectedItem = _useState4[1];
428
400
 
429
401
  var _useState5 = React.useState(false),
430
402
  _useState6 = _slicedToArray(_useState5, 2),
@@ -437,14 +409,17 @@
437
409
  setShowSearch(!showSearch);
438
410
  };
439
411
 
440
- var handleShowDropdown = function handleShowDropdown() {
412
+ var _handleShowDropdown = function handleShowDropdown(currentItem) {
441
413
  clearTimeout(timeoutIdRef.current);
442
- setShowDropdown(true);
414
+
415
+ if (currentItem) {
416
+ setCurrentSelectedItem(currentItem);
417
+ }
443
418
  };
444
419
 
445
420
  var handleHideDropdown = function handleHideDropdown() {
446
421
  timeoutIdRef.current = setTimeout(function () {
447
- setShowDropdown(false);
422
+ setCurrentSelectedItem({});
448
423
  }, 500);
449
424
  };
450
425
 
@@ -493,18 +468,21 @@
493
468
  dropdownClosedIconUrl: dropdownClosedIconUrl,
494
469
  dropdownOpenIconUrl: dropdownOpenIconUrl,
495
470
  currencyFlagIconUrl: currencyFlagIconUrl,
496
- handleShowDropdown: handleShowDropdown,
471
+ handleShowDropdown: _handleShowDropdown,
472
+ currentSelectedItem: currentSelectedItem,
497
473
  handleHideDropdown: handleHideDropdown,
498
- showDropdown: showDropdown,
499
474
  desktopHeaderLinks: desktopHeaderLinks
500
475
  }), showSearch && /*#__PURE__*/React__default.createElement(DropdownSearchContainer, null, /*#__PURE__*/React__default.createElement(Search, {
501
476
  closeIconUrl: closeIconUrl,
502
477
  navigationSearchIconUrl: navigationSearchIconUrl,
503
478
  wordpressSiteUrl: wordpressSiteUrl,
504
479
  toggleSearch: toggleSearch
505
- })), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
480
+ })), Object.keys(currentSelectedItem).length !== 0 && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
506
481
  headerDropdownProductObject: desktopHeaderLinks.headerDropdownProductObject,
507
- handleShowDropdown: handleShowDropdown,
482
+ currentSelectedItem: currentSelectedItem,
483
+ handleShowDropdown: function handleShowDropdown() {
484
+ return _handleShowDropdown();
485
+ },
508
486
  handleHideDropdown: handleHideDropdown
509
487
  }));
510
488
  };
package/build/bundle.js CHANGED
@@ -11504,12 +11504,10 @@
11504
11504
  return props.theme.rareStepFontSize.h5;
11505
11505
  });
11506
11506
  var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
11507
- var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
11507
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
11508
11508
  return props.theme.marginPaddings[3];
11509
11509
  }, function (props) {
11510
11510
  return props.theme.rareStepColors.ntrl40;
11511
- }, function (props) {
11512
- return props.theme.rareStepColors.ntrl40;
11513
11511
  });
11514
11512
  var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
11515
11513
  var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
@@ -11605,47 +11603,20 @@
11605
11603
  };
11606
11604
 
11607
11605
  var HeaderDropdown = function HeaderDropdown(_ref) {
11608
- var _headerDropdownProduc;
11609
-
11610
- var headerDropdownProductObject = _ref.headerDropdownProductObject,
11606
+ var currentSelectedItem = _ref.currentSelectedItem,
11611
11607
  handleShowDropdown = _ref.handleShowDropdown,
11612
11608
  handleHideDropdown = _ref.handleHideDropdown;
11613
-
11614
- var _useState = React.useState([]),
11615
- _useState2 = _slicedToArray(_useState, 2),
11616
- currentModels = _useState2[0],
11617
- setCurrentModels = _useState2[1];
11618
-
11619
- var _useState3 = React.useState(null),
11620
- _useState4 = _slicedToArray(_useState3, 2),
11621
- currentBrand = _useState4[0],
11622
- setCurrentBrand = _useState4[1];
11623
-
11624
- var handleBrandHover = function handleBrandHover(brand) {
11625
- setCurrentBrand(brand);
11626
- setCurrentModels(brand.models);
11627
- };
11628
-
11629
11609
  return /*#__PURE__*/React__default.createElement(Dropdown, {
11630
11610
  onMouseOver: handleShowDropdown,
11631
11611
  onMouseOut: handleHideDropdown
11632
- }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, headerDropdownProductObject === null || headerDropdownProductObject === void 0 ? void 0 : (_headerDropdownProduc = headerDropdownProductObject.brands) === null || _headerDropdownProduc === void 0 ? void 0 : _headerDropdownProduc.map(function (brand, index) {
11633
- return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
11634
- key: index,
11635
- onMouseOver: function onMouseOver() {
11636
- return handleBrandHover(brand);
11637
- }
11638
- }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, {
11639
- href: brand.brandLink
11640
- }, brand.brandName));
11641
- })), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
11612
+ }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownModels, null, ((currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.models) || []).map(function (model, index) {
11642
11613
  return /*#__PURE__*/React__default.createElement(DropdownModelsList, {
11643
11614
  key: index
11644
11615
  }, /*#__PURE__*/React__default.createElement(DropdownLink, {
11645
11616
  href: model.modelLink
11646
11617
  }, model.modelName));
11647
- })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
11648
- src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl
11618
+ })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
11619
+ src: currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.brandImageUrl
11649
11620
  }))));
11650
11621
  };
11651
11622
 
@@ -11654,14 +11625,16 @@
11654
11625
  dropdownOpenIconUrl = _ref.dropdownOpenIconUrl,
11655
11626
  handleShowDropdown = _ref.handleShowDropdown,
11656
11627
  handleHideDropdown = _ref.handleHideDropdown,
11657
- showDropdown = _ref.showDropdown,
11628
+ currentSelectedItem = _ref.currentSelectedItem,
11658
11629
  desktopHeaderLinks = _ref.desktopHeaderLinks;
11659
11630
  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, desktopHeaderLinks.left.map(function (link, index) {
11660
11631
  return link !== null && link !== void 0 && link.isDropdown ? /*#__PURE__*/React__default.createElement(NavigationLink, {
11661
11632
  key: index,
11662
- onMouseOver: handleShowDropdown,
11633
+ onMouseOver: function onMouseOver() {
11634
+ return handleShowDropdown(link);
11635
+ },
11663
11636
  onMouseOut: handleHideDropdown
11664
- }, link.name, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
11637
+ }, link.name, currentSelectedItem.name === link.name ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
11665
11638
  src: dropdownClosedIconUrl
11666
11639
  }) : /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
11667
11640
  src: dropdownOpenIconUrl
@@ -11693,18 +11666,17 @@
11693
11666
  handleOnAccountClick = _ref.handleOnAccountClick,
11694
11667
  handleOnCartClick = _ref.handleOnCartClick,
11695
11668
  userIconDropdownContent = _ref.userIconDropdownContent;
11669
+ var timeoutIdRef = React.useRef(null);
11696
11670
 
11697
11671
  var _useState = React.useState(false),
11698
11672
  _useState2 = _slicedToArray(_useState, 2),
11699
- showDropdown = _useState2[0],
11700
- setShowDropdown = _useState2[1];
11673
+ showSearch = _useState2[0],
11674
+ setShowSearch = _useState2[1];
11701
11675
 
11702
- var timeoutIdRef = React.useRef(null);
11703
-
11704
- var _useState3 = React.useState(false),
11676
+ var _useState3 = React.useState({}),
11705
11677
  _useState4 = _slicedToArray(_useState3, 2),
11706
- showSearch = _useState4[0],
11707
- setShowSearch = _useState4[1];
11678
+ currentSelectedItem = _useState4[0],
11679
+ setCurrentSelectedItem = _useState4[1];
11708
11680
 
11709
11681
  var _useState5 = React.useState(false),
11710
11682
  _useState6 = _slicedToArray(_useState5, 2),
@@ -11717,14 +11689,17 @@
11717
11689
  setShowSearch(!showSearch);
11718
11690
  };
11719
11691
 
11720
- var handleShowDropdown = function handleShowDropdown() {
11692
+ var _handleShowDropdown = function handleShowDropdown(currentItem) {
11721
11693
  clearTimeout(timeoutIdRef.current);
11722
- setShowDropdown(true);
11694
+
11695
+ if (currentItem) {
11696
+ setCurrentSelectedItem(currentItem);
11697
+ }
11723
11698
  };
11724
11699
 
11725
11700
  var handleHideDropdown = function handleHideDropdown() {
11726
11701
  timeoutIdRef.current = setTimeout(function () {
11727
- setShowDropdown(false);
11702
+ setCurrentSelectedItem({});
11728
11703
  }, 500);
11729
11704
  };
11730
11705
 
@@ -11773,18 +11748,21 @@
11773
11748
  dropdownClosedIconUrl: dropdownClosedIconUrl,
11774
11749
  dropdownOpenIconUrl: dropdownOpenIconUrl,
11775
11750
  currencyFlagIconUrl: currencyFlagIconUrl,
11776
- handleShowDropdown: handleShowDropdown,
11751
+ handleShowDropdown: _handleShowDropdown,
11752
+ currentSelectedItem: currentSelectedItem,
11777
11753
  handleHideDropdown: handleHideDropdown,
11778
- showDropdown: showDropdown,
11779
11754
  desktopHeaderLinks: desktopHeaderLinks
11780
11755
  }), showSearch && /*#__PURE__*/React__default.createElement(DropdownSearchContainer, null, /*#__PURE__*/React__default.createElement(Search$1, {
11781
11756
  closeIconUrl: closeIconUrl,
11782
11757
  navigationSearchIconUrl: navigationSearchIconUrl,
11783
11758
  wordpressSiteUrl: wordpressSiteUrl,
11784
11759
  toggleSearch: toggleSearch
11785
- })), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
11760
+ })), Object.keys(currentSelectedItem).length !== 0 && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
11786
11761
  headerDropdownProductObject: desktopHeaderLinks.headerDropdownProductObject,
11787
- handleShowDropdown: handleShowDropdown,
11762
+ currentSelectedItem: currentSelectedItem,
11763
+ handleShowDropdown: function handleShowDropdown() {
11764
+ return _handleShowDropdown();
11765
+ },
11788
11766
  handleHideDropdown: handleHideDropdown
11789
11767
  }));
11790
11768
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonlineza/luxity-lib",
3
- "version": "2.19.0",
3
+ "version": "2.20.0",
4
4
  "scripts": {
5
5
  "start": "start-storybook -p 9001 -c .storybook -s ./public",
6
6
  "clean": "rimraf ./build/*.*",
package/svg/MyProfile.js CHANGED
@@ -35,7 +35,8 @@
35
35
  d: "M14.5 29C22.5081 29 29 22.5081 29 14.5C29 6.49187 22.5081 0 14.5 0C6.49187 0 0 6.49187 0 14.5C0 22.5081 6.49187 29 14.5 29Z",
36
36
  fill: "#E5E5E5"
37
37
  }), /*#__PURE__*/React.createElement("mask", {
38
- id: "mask0",
38
+ id: "mask0" // eslint-disable-next-line react/no-unknown-property
39
+ ,
39
40
  "mask-type": "alpha",
40
41
  maskUnits: "userSpaceOnUse",
41
42
  x: "4",
package/LuxityLoader.js DELETED
@@ -1,75 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components')) :
3
- typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
4
- (global = global || self, global.LuxityLoader = factory(global.React, global.styled));
5
- }(this, (function (React, styled) { 'use strict';
6
-
7
- React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
8
- styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
9
-
10
- function _taggedTemplateLiteral(strings, raw) {
11
- if (!raw) {
12
- raw = strings.slice(0);
13
- }
14
-
15
- return Object.freeze(Object.defineProperties(strings, {
16
- raw: {
17
- value: Object.freeze(raw)
18
- }
19
- }));
20
- }
21
-
22
- var LuxityArrowLeft = (function (props) {
23
- return /*#__PURE__*/React.createElement("svg", {
24
- version: "1.0",
25
- xmlns: "http://www.w3.org/2000/svg",
26
- width: props.width || '100%',
27
- height: props.height || '100%',
28
- viewBox: "0 0 177.000000 300.000000",
29
- preserveAspectRatio: "xMidYMid meet"
30
- }, /*#__PURE__*/React.createElement("g", {
31
- transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
32
- fill: "#000000",
33
- stroke: "none"
34
- }, /*#__PURE__*/React.createElement("path", {
35
- d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
36
- })));
37
- });
38
-
39
- var LuxityArrowRight = (function (props) {
40
- return /*#__PURE__*/React.createElement("svg", {
41
- version: "1.0",
42
- xmlns: "http://www.w3.org/2000/svg",
43
- width: props.width || '100%',
44
- height: props.height || '100%',
45
- viewBox: "0 0 177.000000 300.000000",
46
- preserveAspectRatio: "xMidYMid meet"
47
- }, /*#__PURE__*/React.createElement("g", {
48
- transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
49
- fill: "#000000",
50
- stroke: "none"
51
- }, /*#__PURE__*/React.createElement("path", {
52
- d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
53
- })));
54
- });
55
-
56
- var _templateObject, _templateObject2, _templateObject3;
57
- var LoaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin: 20px auto;\n"])));
58
- var LeftImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n object-fit: contain;\n animation: slide-left infinite 3s;\n background-color: white;\n\n @keyframes slide-left {\n 0% {\n transform: translateX(0);\n }\n 40% {\n transform: translateX(50%);\n }\n 100% {\n transform: translateX(150%);\n }\n }\n"])));
59
- var RightImageContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n width: 100%;\n height: 100%;\n object-fit: contain;\n animation: slide-right infinite 3s;\n\n @keyframes slide-right {\n 0% {\n transform: translateX(0);\n }\n 40% {\n transform: translateX(-50%);\n opacity: 1;\n }\n 100% {\n transform: translateX(-150%);\n opacity: 0;\n }\n }\n"])));
60
-
61
- function LuxityLoader(_ref) {
62
- var width = _ref.width,
63
- height = _ref.height;
64
- return /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(LeftImageContainer, null, /*#__PURE__*/React.createElement(LuxityArrowRight, {
65
- width: width,
66
- height: height
67
- })), /*#__PURE__*/React.createElement(RightImageContainer, null, /*#__PURE__*/React.createElement(LuxityArrowLeft, {
68
- width: width,
69
- height: height
70
- })));
71
- }
72
-
73
- return LuxityLoader;
74
-
75
- })));
package/RareStepLoginModal.js DELETED
@@ -1,15 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
3
- typeof define === 'function' && define.amd ? define(['react'], factory) :
4
- (global = global || self, global.RareStepLoginModal = factory(global.React));
5
- }(this, (function (React) { 'use strict';
6
-
7
- React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
8
-
9
- function RareStepLoginModal() {
10
- return /*#__PURE__*/React.createElement("div", null, "RareStepLoginModal");
11
- }
12
-
13
- return RareStepLoginModal;
14
-
15
- })));
package/svg/LuxityArrowLeft.js DELETED
@@ -1,28 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
3
- typeof define === 'function' && define.amd ? define(['react'], factory) :
4
- (global = global || self, global.svgs = factory(global.React));
5
- }(this, (function (React) { 'use strict';
6
-
7
- React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
8
-
9
- var LuxityArrowLeft = (function (props) {
10
- return /*#__PURE__*/React.createElement("svg", {
11
- version: "1.0",
12
- xmlns: "http://www.w3.org/2000/svg",
13
- width: props.width || '100%',
14
- height: props.height || '100%',
15
- viewBox: "0 0 177.000000 300.000000",
16
- preserveAspectRatio: "xMidYMid meet"
17
- }, /*#__PURE__*/React.createElement("g", {
18
- transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
19
- fill: "#000000",
20
- stroke: "none"
21
- }, /*#__PURE__*/React.createElement("path", {
22
- d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
23
- })));
24
- });
25
-
26
- return LuxityArrowLeft;
27
-
28
- })));
package/svg/LuxityArrowRight.js DELETED
@@ -1,28 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
3
- typeof define === 'function' && define.amd ? define(['react'], factory) :
4
- (global = global || self, global.svgs = factory(global.React));
5
- }(this, (function (React) { 'use strict';
6
-
7
- React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
8
-
9
- var LuxityArrowRight = (function (props) {
10
- return /*#__PURE__*/React.createElement("svg", {
11
- version: "1.0",
12
- xmlns: "http://www.w3.org/2000/svg",
13
- width: props.width || '100%',
14
- height: props.height || '100%',
15
- viewBox: "0 0 177.000000 300.000000",
16
- preserveAspectRatio: "xMidYMid meet"
17
- }, /*#__PURE__*/React.createElement("g", {
18
- transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
19
- fill: "#000000",
20
- stroke: "none"
21
- }, /*#__PURE__*/React.createElement("path", {
22
- d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
23
- })));
24
- });
25
-
26
- return LuxityArrowRight;
27
-
28
- })));
package/svg/RareStepLogo.js DELETED
@@ -1,8 +0,0 @@
1
- (function (factory) {
2
- typeof define === 'function' && define.amd ? define(factory) :
3
- factory();
4
- }((function () { 'use strict';
5
-
6
-
7
-
8
- })));