@bonlineza/luxity-lib 2.30.2 → 2.31.0

package/LuxityGraphQLDropdownSelector.js

@@ -10966,12 +10966,9 @@
   var FooterPaymentImage = styled__default.img(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n   {\n    width: 100px;\n    height: 30px;\n  }\n"])));
   var FooterConnectContainer = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n  }\n"])));
 
-  var _templateObject$R, _templateObject2$d, _templateObject3$8, _templateObject4$7, _templateObject5$5;
+  var _templateObject$R, _templateObject2$d;
   var OptionsRow = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var OptionsRowDescription = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  flex-basis: 30%;\n  margin-right: 10px;\n"])));
-  var Options = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-  var OptionRadioInputContainer = styled__default.span(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n  flex-basis: 50%;\n"])));
-  var OptionRadioInput = styled__default.input(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
+  var Options = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
 
   var _templateObject$S, _templateObject2$e;
   var SectionContainer = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
@@ -10979,17 +10976,22 @@
   });
   var SectionHeading = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
 
-  var _templateObject$T, _templateObject2$f, _templateObject3$9;
+  var _templateObject$T, _templateObject2$f, _templateObject3$8;
   var CommunicationPreferenceContainer = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
   var EditButtonRow = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: end;\n  padding: 10px 5px;\n  margin-right: 16px;\n"])));
-  var SubmitButton = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
+  var SubmitButton = styled__default.input(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
 
   var _templateObject$U;
+  var FooterWrapper$1 = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
+    return props.theme.colors.gray;
+  });
+
+  var _templateObject$V;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$U || (_templateObject$U = _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/LuxityHeader.js

@@ -0,0 +1,369 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
+  typeof define === 'function' && define.amd ? define(['react'], factory) :
+  (global = global || self, global.LuxityHeader = factory(global.React));
+}(this, (function (React) { 'use strict';
+
+  var React__default = 'default' in React ? React['default'] : React;
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+
+    var _s, _e;
+
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var Dropdown = function Dropdown(_ref) {
+    var title = _ref.title,
+        imageSrc = _ref.imageSrc,
+        _ref$categoryElements = _ref.categoryElements,
+        categoryElements = _ref$categoryElements === void 0 ? [] : _ref$categoryElements,
+        _ref$brandElements = _ref.brandElements,
+        brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
+        productsUrl = _ref.productsUrl;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown__column"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown__title"
+    }, title), /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown__elements dropdown__elements--column"
+    }, !!categoryElements.length && categoryElements.map(function (category) {
+      return /*#__PURE__*/React__default.createElement("a", {
+        href: "".concat(productsUrl, "/").concat(category === null || category === void 0 ? void 0 : category.slug),
+        className: "dropdown__element",
+        key: category.name
+      }, category === null || category === void 0 ? void 0 : category.name);
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown__column"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown__title"
+    }, "Brands"), /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown__elements dropdown__elements--row"
+    }, !!brandElements.length && brandElements.map(function (brand) {
+      return /*#__PURE__*/React__default.createElement("a", {
+        href: "".concat(productsUrl, "/").concat(brand === null || brand === void 0 ? void 0 : brand.slug),
+        className: "dropdown__element",
+        key: brand.name
+      }, brand === null || brand === void 0 ? void 0 : brand.name);
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown__column"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: imageSrc,
+      alt: "".concat(title)
+    })));
+  };
+
+  var StoresDropdown = function StoresDropdown(_ref) {
+    var _ref$stores = _ref.stores,
+        stores = _ref$stores === void 0 ? [] : _ref$stores,
+        contactNumber = _ref.contactNumber;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "stores-dropdown"
+    }, !!stores.length && stores.map(function (store) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__store-details",
+        key: store.name
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__store-image"
+      }, /*#__PURE__*/React__default.createElement("img", {
+        className: "stores-dropdown__image",
+        src: store.image,
+        alt: store.name
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__store-info"
+      }, /*#__PURE__*/React__default.createElement("h4", {
+        className: "stores-dropdown__title"
+      }, store.title, " ", /*#__PURE__*/React__default.createElement("br", null), " ", store.location), /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__open-days"
+      }, store.regularOpenDays), /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__open-hours"
+      }, store.regularOpenHours), /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__open-days"
+      }, store.holidayOpenDays), /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__open-hours"
+      }, store.holidayOpenHours), (store === null || store === void 0 ? void 0 : store.weekendOpenDays) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__open-days"
+      }, store.weekendOpenDays), /*#__PURE__*/React__default.createElement("div", {
+        className: "stores-dropdown__open-hours"
+      }, store.weekendOpenHours))));
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "stores-dropdown__queries"
+    }, /*#__PURE__*/React__default.createElement("h4", {
+      className: "stores-dropdown__queries-title"
+    }, "Customer Queries: "), /*#__PURE__*/React__default.createElement("a", {
+      className: "stores-dropdown__contact-details",
+      href: "tel:".concat(contactNumber)
+    }, contactNumber)));
+  };
+
+  var LuxtyHeader = function LuxtyHeader(_ref) {
+    var accountIcon = _ref.accountIcon,
+        cartIcon = _ref.cartIcon,
+        interestIcon = _ref.interestIcon,
+        cartCount = _ref.cartCount,
+        logoSrc = _ref.logoSrc,
+        categoryElements = _ref.categoryElements,
+        newBrandElements = _ref.newBrandElements,
+        bagsElements = _ref.bagsElements,
+        shoesElement = _ref.shoesElement,
+        clothingElements = _ref.clothingElements,
+        accessoriesElements = _ref.accessoriesElements,
+        accessoriesCategoryElements = _ref.accessoriesCategoryElements,
+        watchesElements = _ref.watchesElements,
+        newBrandsImage = _ref.newBrandsImage,
+        bagsImage = _ref.bagsImage,
+        shoesImage = _ref.shoesImage,
+        clothingImage = _ref.clothingImage,
+        accessoriesImage = _ref.accessoriesImage,
+        watchesImage = _ref.watchesImage,
+        productsUrl = _ref.productsUrl,
+        stores = _ref.stores,
+        contactNumber = _ref.contactNumber,
+        onInterestClick = _ref.onInterestClick,
+        onCartClick = _ref.onCartClick,
+        onAccountClick = _ref.onAccountClick,
+        inputSearchIcon = _ref.inputSearchIcon,
+        onSearch = _ref.onSearch;
+
+    var _useState = React.useState(''),
+        _useState2 = _slicedToArray(_useState, 2),
+        searchValue = _useState2[0],
+        setSearchValue = _useState2[1];
+
+    var handleChange = function handleChange(event) {
+      setSearchValue(event.target.value);
+    };
+
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Enter') {
+        onSearch(searchValue);
+      }
+    };
+
+    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("div", {
+      className: "navbar__logo"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: logoSrc,
+      alt: ""
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__section"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__body"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__product-search"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: inputSearchIcon,
+      alt: "search-icon",
+      className: "navbar__input-search-icon"
+    }), /*#__PURE__*/React__default.createElement("input", {
+      className: "navbar__form-input",
+      type: "text",
+      placeholder: "Search for items and designs",
+      value: searchValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown
+    })), /*#__PURE__*/React__default.createElement("nav", {
+      className: "navbar__nav-links"
+    }, /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "#",
+      className: "navbar__link-item"
+    }, "New"), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__dropdown"
+    }, /*#__PURE__*/React__default.createElement(Dropdown, {
+      title: "Department",
+      imageSrc: newBrandsImage,
+      categoryElements: categoryElements,
+      brandElements: newBrandElements,
+      productsUrl: productsUrl
+    }))), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "#",
+      className: "navbar__link-item"
+    }, "Bags"), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__dropdown"
+    }, /*#__PURE__*/React__default.createElement(Dropdown, {
+      title: "Department",
+      imageSrc: bagsImage,
+      categoryElements: categoryElements,
+      brandElements: bagsElements,
+      productsUrl: productsUrl
+    }))), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "#",
+      className: "navbar__link-item"
+    }, "Shoes"), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__dropdown"
+    }, /*#__PURE__*/React__default.createElement(Dropdown, {
+      title: "Department",
+      imageSrc: shoesImage,
+      categoryElements: categoryElements,
+      brandElements: shoesElement,
+      productsUrl: productsUrl
+    }))), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "#",
+      className: "navbar__link-item"
+    }, "Clothing"), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__dropdown"
+    }, /*#__PURE__*/React__default.createElement(Dropdown, {
+      title: "Department",
+      imageSrc: clothingImage,
+      categoryElements: categoryElements,
+      brandElements: clothingElements,
+      productsUrl: productsUrl
+    }))), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "#",
+      className: "navbar__link-item"
+    }, "Accessories"), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__dropdown"
+    }, /*#__PURE__*/React__default.createElement(Dropdown, {
+      title: "Department",
+      imageSrc: accessoriesImage,
+      categoryElements: accessoriesCategoryElements,
+      brandElements: accessoriesElements,
+      productsUrl: productsUrl
+    }))), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "#",
+      className: "navbar__link-item"
+    }, "Watches"), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__dropdown"
+    }, /*#__PURE__*/React__default.createElement(Dropdown, {
+      title: "Department",
+      imageSrc: watchesImage,
+      categoryElements: categoryElements,
+      brandElements: watchesElements,
+      productsUrl: productsUrl
+    }))), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "#",
+      className: "navbar__link-item"
+    }, "Stores"), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__dropdown"
+    }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
+      stores: stores,
+      contactNumber: contactNumber
+    }))))), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__icons-wrapper"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__icons"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "navbar__icon",
+      onClick: onInterestClick
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: interestIcon,
+      alt: "interest-icon"
+    })), /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "navbar__icon",
+      onClick: onAccountClick
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: accountIcon,
+      alt: "account-icon"
+    })), /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "navbar__cart-icon navbar__icon",
+      onClick: onCartClick
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: cartIcon,
+      alt: "cart-icon"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "navbar__cart-count"
+    }, cartCount))), /*#__PURE__*/React__default.createElement("nav", {
+      className: "navbar__nav-links"
+    }, /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__company-link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "",
+      className: "navbar__link-item"
+    }, "Our Story")), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__company-link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "",
+      className: "navbar__link-item"
+    }, "Blog")), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__company-link"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "",
+      className: "navbar__link-item"
+    }, "Contact Us")), /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__company-link navbar__company-block"
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: "",
+      className: "navbar__link-item"
+    }, "Sell to us")))))));
+  };
+
+  return LuxtyHeader;
+
+})));