@bonlineza/luxity-lib 2.40.5 → 2.40.6

package/GALink.js

@@ -23,6 +23,42 @@
     return _extends.apply(this, arguments);
   }
 
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+
+    return target;
+  }
+
   var Event = function Event(instance, track) {
     var category = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     var action = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -39,20 +75,29 @@
     }
   };
 
-  var GALink = function GALink(props) {
+  var _excluded = ["instance", "track", "label", "onClick", "children"];
+
+  var GALink = function GALink(_ref) {
+    var instance = _ref.instance,
+        track = _ref.track,
+        label = _ref.label,
+        onClick = _ref.onClick,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
     var gaOnClick = function gaOnClick(event) {
-      Event(props.instance, props.track, 'Link', "Click on ".concat(props.href), props.label);
+      Event(instance, track, 'Link', "Click on ".concat(rest.href), label);
 
-      if (typeof props.onClick === 'function') {
-        props.onClick(event);
+      if (typeof onClick === 'function') {
+        onClick(event);
       }
     };
 
     return /*#__PURE__*/React.createElement("a", _extends({
       href: "/"
-    }, props, {
+    }, rest, {
       onClick: gaOnClick
-    }), props.children);
+    }), children);
   };
 
   return GALink;

package/GraphQLDropdownSelector.js

@@ -12267,16 +12267,11 @@
   var FooterConnectContainer = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n  }\n"])));
 
   var _templateObject$V;
-  var FooterWrapper$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
-    return props.theme.colors.gray;
-  });
-
-  var _templateObject$W;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
+  var StyledMultiselector$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;

package/LuxityDesktopHeader.js

@@ -1147,15 +1147,16 @@
         stores = _ref.stores,
         contactNumber = _ref.contactNumber,
         productsUrl = _ref.productsUrl,
-        LinkComponent = _ref.LinkComponent,
+        _ref$LinkComponent = _ref.LinkComponent,
+        LinkComponent = _ref$LinkComponent === void 0 ? 'a' : _ref$LinkComponent,
         onInterestClick = _ref.onInterestClick,
         onCartClick = _ref.onCartClick,
         onAccountClick = _ref.onAccountClick,
         inputSearchIcon = _ref.inputSearchIcon,
-        onSellToUsClick = _ref.onSellToUsClick,
+        sellToUsLink = _ref.sellToUsLink,
         contactUsLink = _ref.contactUsLink,
         ourStoryLink = _ref.ourStoryLink,
-        onLogoClick = _ref.onLogoClick,
+        logoHref = _ref.logoHref,
         endpoint = _ref.endpoint,
         initialSearchData = _ref.initialSearchData,
         onSearchSubmit = _ref.onSearchSubmit,
@@ -1343,21 +1344,14 @@
       });
     };
 
-    var getMarginRight = function getMarginRight(showLoyaltyIcon, userName) {
-      if (showLoyaltyIcon) return '15px';
-      if (userName) return '5px';
-      return '18px';
-    };
-
     return /*#__PURE__*/React__default.createElement("div", {
       className: "navbar"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "navbar__container"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "navbar__logo-wrapper"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      onClick: onLogoClick,
+    }, /*#__PURE__*/React__default.createElement(LinkComponent, {
+      href: logoHref,
       className: "navbar__logo"
     }, /*#__PURE__*/React__default.createElement("img", {
       src: logoSrc,
@@ -1438,10 +1432,7 @@
     }), shop && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "navbar__icon relative flex",
-      onClick: onAccountClick,
-      style: {
-        marginRight: getMarginRight(isEarlyAccess || isExclusive, name)
-      }
+      onClick: onAccountClick
     }, /*#__PURE__*/React__default.createElement("img", {
       src: accountIcon,
       alt: "account-icon",
@@ -1502,10 +1493,9 @@
       className: "navbar__link-item"
     }, "Contact Us")), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__company-link"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "navbar__company-block",
-      onClick: onSellToUsClick
+    }, /*#__PURE__*/React__default.createElement(LinkComponent, {
+      href: sellToUsLink,
+      className: "navbar__company-block"
     }, "Sell to us")))))));
   };
 

package/LuxityFooter.js

@@ -24,6 +24,42 @@
     return _extends.apply(this, arguments);
   }
 
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+
+    return target;
+  }
+
   function _taggedTemplateLiteral(strings, raw) {
     if (!raw) {
       raw = strings.slice(0);
@@ -1824,75 +1860,6 @@
       return _formControl.current;
   }
 
-  var theme = {
-    breakpoints: ['40em', '52em', '64em'],
-    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
-    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
-    letterSpacings: ['-0.5px', '0px', '+0.5px'],
-    radii: ['0px', '2px', '4px', '8px'],
-    borderRadius: '6px',
-    colors: {
-      primary: '#000',
-      base: '#4e4949',
-      baseLt: '#817c7c',
-      borderColor: '#d8d8d8',
-      ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6',
-      gray: '#efefef',
-      darkerGray: '#454141'
-    },
-    rareStepColors: {
-      primary: '#202b58',
-      secondary: '#ef5c2d',
-      ntrlMin: '#ffffff',
-      ntrl40: '#f4f4f4',
-      ntrl50: '#808080',
-      ntrl60: '#e8e8e8',
-      ntrl70: '#252525',
-      ntrlMax: '#000000'
-    },
-    rareStepFontWeights: {
-      normal: 400,
-      medium: 500,
-      semiBold: 600,
-      bold: 700
-    },
-    rareStepFontSize: {
-      h1: '36px',
-      h2: '30px',
-      h3: '24px',
-      h4: '20px',
-      h5: '16px',
-      h6: '14px',
-      footerTitle: '16px'
-    },
-    rareStepPageSizes: {
-      mobile: '500px',
-      tablet: '768px',
-      desktop: '992px',
-      screenl: '1280px',
-      screenxl: '1680px',
-      screenxxl: '1920px',
-      container: '1600px'
-    }
-  };
-
-  var themed = (function (Component) {
-    return /*#__PURE__*/React.forwardRef(function (props, ref) {
-      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-        theme: theme
-      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
-        ref: ref
-      })));
-    });
-  });
-
-  var _templateObject;
-  var FooterWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
-    return props.theme.colors.gray;
-  });
-
   var Event = function Event(instance, track) {
     var category = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     var action = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -1909,26 +1876,35 @@
     }
   };
 
-  var GALink = function GALink(props) {
+  var _excluded = ["instance", "track", "label", "onClick", "children"];
+
+  var GALink = function GALink(_ref) {
+    var instance = _ref.instance,
+        track = _ref.track,
+        label = _ref.label,
+        onClick = _ref.onClick,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
     var gaOnClick = function gaOnClick(event) {
-      Event(props.instance, props.track, 'Link', "Click on ".concat(props.href), props.label);
+      Event(instance, track, 'Link', "Click on ".concat(rest.href), label);
 
-      if (typeof props.onClick === 'function') {
-        props.onClick(event);
+      if (typeof onClick === 'function') {
+        onClick(event);
       }
     };
 
     return /*#__PURE__*/React__default.createElement("a", _extends({
       href: "/"
-    }, props, {
+    }, rest, {
       onClick: gaOnClick
-    }), props.children);
+    }), children);
   };
 
-  var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
   /* position relative is required for the Body element to be positioned correctly */
 
-  var relativeInlineStyle = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+  var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
@@ -1940,7 +1916,7 @@
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
   };
 
-  var _templateObject$2;
+  var _templateObject$1;
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1975,7 +1951,7 @@
     }
   };
 
-  var Body = styled__default.span(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
+  var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
     return props.$bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
@@ -1985,8 +1961,72 @@
     return getAfterStyling(props);
   });
 
-  var _templateObject$3;
-  var Container = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), relativeInlineStyle, Body);
+  var _templateObject$2;
+  var Container = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), relativeInlineStyle, Body);
+
+  var theme = {
+    breakpoints: ['40em', '52em', '64em'],
+    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+    letterSpacings: ['-0.5px', '0px', '+0.5px'],
+    radii: ['0px', '2px', '4px', '8px'],
+    borderRadius: '6px',
+    colors: {
+      primary: '#000',
+      base: '#4e4949',
+      baseLt: '#817c7c',
+      borderColor: '#d8d8d8',
+      ntrlMin: '#fff',
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '16px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
+    }
+  };
+
+  var themed = (function (Component) {
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+        theme: theme
+      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
+        ref: ref
+      })));
+    });
+  });
 
   /* eslint-disable react/require-default-props */
 
@@ -2151,16 +2191,28 @@
       })), /*#__PURE__*/React__default.createElement("div", {
         className: "footer__links"
       }, !!contactLinks.map && contactLinks.map(function (link) {
-        return !link.isContact ? /*#__PURE__*/React__default.createElement(GALink, {
-          key: link.label,
-          instance: link.instance,
-          href: link.href,
-          label: link.label,
-          className: "footer__link",
-          rel: "noopener noreferrer",
-          track: link === null || link === void 0 ? void 0 : link.track,
-          target: link.target
-        }, link.label) : /*#__PURE__*/React__default.createElement("div", {
+        if (!link.isContact) {
+          return /*#__PURE__*/React__default.createElement(GALink, {
+            key: link.label,
+            instance: link.instance,
+            href: link.href,
+            label: link.label,
+            className: "footer__link",
+            rel: "noopener noreferrer",
+            track: link === null || link === void 0 ? void 0 : link.track,
+            target: link.target
+          }, link.label);
+        }
+
+        if (link.href) {
+          return /*#__PURE__*/React__default.createElement("a", {
+            key: link.label,
+            href: link.href,
+            className: "footer__text"
+          }, link.label);
+        }
+
+        return /*#__PURE__*/React__default.createElement("div", {
           key: link.label,
           className: "footer__text"
         }, link.label);
@@ -2215,7 +2267,9 @@
       });
     };
 
-    return /*#__PURE__*/React__default.createElement(FooterWrapper, null, showNewsletter && /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "footer__container"
+    }, showNewsletter && /*#__PURE__*/React__default.createElement("div", {
       className: "footer__newsletter-section"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "footer__newsletter-wrapper"
@@ -2302,8 +2356,6 @@
     }, "Copyright ", currentYear, " | Luxity (Pty) LTD | All Rights Reserved")));
   };
 
-  var index = themed(LuxityFooter);
-
-  return index;
+  return LuxityFooter;
 
 })));

package/LuxityGraphQLDropdownSelector.js

@@ -12267,16 +12267,11 @@
   var FooterConnectContainer = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n  }\n"])));
 
   var _templateObject$V;
-  var FooterWrapper$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
-    return props.theme.colors.gray;
-  });
-
-  var _templateObject$W;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
+  var StyledMultiselector$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;