@bonlineza/luxity-lib 2.30.3 → 2.31.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 (15) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/GALink.js +60 -0
  3. package/LuxityDesktopHeader.js +373 -0
  4. package/LuxityFooter.js +2026 -0
  5. package/LuxityGraphQLDropdownSelector.js +6 -1
  6. package/LuxityHeader.js +369 -0
  7. package/LuxityMobileHeader.js +567 -0
  8. package/LuxitySideNav.js +424 -0
  9. package/MaterialSelector.js +6 -1
  10. package/ModelSelector.js +6 -1
  11. package/Tracking.js +27 -0
  12. package/build/assets/.DS_Store +0 -0
  13. package/build/bundle.css +1 -0
  14. package/build/bundle.js +997 -0
  15. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  ## Changelog
2
2
 
3
+ ### 2.31.0
4
+ - Add Luxity Desktop Header Component
5
+ - Add Luxity Mobile Header Component
6
+ - Add Luxity Footer Component
7
+
8
+
9
+ ### 2.30.3
10
+ - update the communication preferences radio buttons to match the existing style of radio buttons.
11
+ - update the is_disabled prop tp follow camel case.
12
+
13
+ ### 2.30.2
14
+ - rename dropdown components to make them more generic.
15
+ - add shoe size range selector
16
+
3
17
  ### 2.30.1
4
18
  - adding a class name prop for the buttons on the communications preference components.
5
19
  - removing the default section header on communication preferences.
package/GALink.js ADDED
@@ -0,0 +1,60 @@
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.GALink = 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 _extends() {
10
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
11
+ for (var i = 1; i < arguments.length; i++) {
12
+ var source = arguments[i];
13
+
14
+ for (var key in source) {
15
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
16
+ target[key] = source[key];
17
+ }
18
+ }
19
+ }
20
+
21
+ return target;
22
+ };
23
+ return _extends.apply(this, arguments);
24
+ }
25
+
26
+ var Event = function Event(instance, track) {
27
+ var category = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
28
+ var action = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
29
+ var label = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
30
+ var value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
31
+
32
+ if (track) {
33
+ instance.event({
34
+ category: category,
35
+ action: action,
36
+ label: label,
37
+ value: value
38
+ });
39
+ }
40
+ };
41
+
42
+ var GALink = function GALink(props) {
43
+ var gaOnClick = function gaOnClick(event) {
44
+ Event(props.instance, props.track, 'Link', "Click on ".concat(props.href), props.label);
45
+
46
+ if (typeof props.onClick === 'function') {
47
+ props.onClick(event);
48
+ }
49
+ };
50
+
51
+ return /*#__PURE__*/React.createElement("a", _extends({
52
+ href: "/"
53
+ }, props, {
54
+ onClick: gaOnClick
55
+ }), props.children);
56
+ };
57
+
58
+ return GALink;
59
+
60
+ })));
package/LuxityDesktopHeader.js ADDED
@@ -0,0 +1,373 @@
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.LuxityDesktopHeader = factory(global.React));
5
+ }(this, (function (React) { 'use strict';
6
+
7
+ var React__default = 'default' in React ? React['default'] : React;
8
+
9
+ function _slicedToArray(arr, i) {
10
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
11
+ }
12
+
13
+ function _arrayWithHoles(arr) {
14
+ if (Array.isArray(arr)) return arr;
15
+ }
16
+
17
+ function _iterableToArrayLimit(arr, i) {
18
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
19
+
20
+ if (_i == null) return;
21
+ var _arr = [];
22
+ var _n = true;
23
+ var _d = false;
24
+
25
+ var _s, _e;
26
+
27
+ try {
28
+ for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
29
+ _arr.push(_s.value);
30
+
31
+ if (i && _arr.length === i) break;
32
+ }
33
+ } catch (err) {
34
+ _d = true;
35
+ _e = err;
36
+ } finally {
37
+ try {
38
+ if (!_n && _i["return"] != null) _i["return"]();
39
+ } finally {
40
+ if (_d) throw _e;
41
+ }
42
+ }
43
+
44
+ return _arr;
45
+ }
46
+
47
+ function _unsupportedIterableToArray(o, minLen) {
48
+ if (!o) return;
49
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
50
+ var n = Object.prototype.toString.call(o).slice(8, -1);
51
+ if (n === "Object" && o.constructor) n = o.constructor.name;
52
+ if (n === "Map" || n === "Set") return Array.from(o);
53
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
54
+ }
55
+
56
+ function _arrayLikeToArray(arr, len) {
57
+ if (len == null || len > arr.length) len = arr.length;
58
+
59
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
60
+
61
+ return arr2;
62
+ }
63
+
64
+ function _nonIterableRest() {
65
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
66
+ }
67
+
68
+ var Dropdown = function Dropdown(_ref) {
69
+ var title = _ref.title,
70
+ imageSrc = _ref.imageSrc,
71
+ _ref$categoryElements = _ref.categoryElements,
72
+ categoryElements = _ref$categoryElements === void 0 ? [] : _ref$categoryElements,
73
+ _ref$brandElements = _ref.brandElements,
74
+ brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
75
+ productsUrl = _ref.productsUrl;
76
+ return /*#__PURE__*/React__default.createElement("div", {
77
+ className: "dropdown"
78
+ }, /*#__PURE__*/React__default.createElement("div", {
79
+ className: "dropdown__column"
80
+ }, /*#__PURE__*/React__default.createElement("div", {
81
+ className: "dropdown__title"
82
+ }, title), /*#__PURE__*/React__default.createElement("div", {
83
+ className: "dropdown__elements dropdown__elements--column"
84
+ }, !!categoryElements.length && categoryElements.map(function (category) {
85
+ return /*#__PURE__*/React__default.createElement("a", {
86
+ href: "".concat(productsUrl, "/").concat(category === null || category === void 0 ? void 0 : category.slug),
87
+ className: "dropdown__element",
88
+ key: category.name
89
+ }, category === null || category === void 0 ? void 0 : category.name);
90
+ }))), /*#__PURE__*/React__default.createElement("div", {
91
+ className: "dropdown__column"
92
+ }, /*#__PURE__*/React__default.createElement("div", {
93
+ className: "dropdown__title"
94
+ }, "Brands"), /*#__PURE__*/React__default.createElement("div", {
95
+ className: "dropdown__elements dropdown__elements--row"
96
+ }, !!brandElements.length && brandElements.map(function (brand) {
97
+ return /*#__PURE__*/React__default.createElement("a", {
98
+ href: "".concat(productsUrl, "/").concat(brand === null || brand === void 0 ? void 0 : brand.slug),
99
+ className: "dropdown__element",
100
+ key: brand.name
101
+ }, brand === null || brand === void 0 ? void 0 : brand.name);
102
+ }))), /*#__PURE__*/React__default.createElement("div", {
103
+ className: "dropdown__column"
104
+ }, /*#__PURE__*/React__default.createElement("img", {
105
+ src: imageSrc,
106
+ alt: "".concat(title)
107
+ })));
108
+ };
109
+
110
+ var StoresDropdown = function StoresDropdown(_ref) {
111
+ var _ref$stores = _ref.stores,
112
+ stores = _ref$stores === void 0 ? [] : _ref$stores,
113
+ contactNumber = _ref.contactNumber;
114
+ return /*#__PURE__*/React__default.createElement("div", {
115
+ className: "stores-dropdown"
116
+ }, !!stores.length && stores.map(function (store) {
117
+ return /*#__PURE__*/React__default.createElement("div", {
118
+ className: "stores-dropdown__store-details",
119
+ key: store.name
120
+ }, /*#__PURE__*/React__default.createElement("div", {
121
+ className: "stores-dropdown__store-image"
122
+ }, /*#__PURE__*/React__default.createElement("img", {
123
+ className: "stores-dropdown__image",
124
+ src: store.image,
125
+ alt: store.name
126
+ })), /*#__PURE__*/React__default.createElement("div", {
127
+ className: "stores-dropdown__store-info"
128
+ }, /*#__PURE__*/React__default.createElement("h4", {
129
+ className: "stores-dropdown__title"
130
+ }, store.title, " ", /*#__PURE__*/React__default.createElement("br", null), " ", store.location), /*#__PURE__*/React__default.createElement("div", {
131
+ className: "stores-dropdown__open-days"
132
+ }, store.regularOpenDays), /*#__PURE__*/React__default.createElement("div", {
133
+ className: "stores-dropdown__open-hours"
134
+ }, store.regularOpenHours), /*#__PURE__*/React__default.createElement("div", {
135
+ className: "stores-dropdown__open-days"
136
+ }, store.holidayOpenDays), /*#__PURE__*/React__default.createElement("div", {
137
+ className: "stores-dropdown__open-hours"
138
+ }, store.holidayOpenHours), (store === null || store === void 0 ? void 0 : store.weekendOpenDays) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
139
+ className: "stores-dropdown__open-days"
140
+ }, store.weekendOpenDays), /*#__PURE__*/React__default.createElement("div", {
141
+ className: "stores-dropdown__open-hours"
142
+ }, store.weekendOpenHours))));
143
+ }), /*#__PURE__*/React__default.createElement("div", {
144
+ className: "stores-dropdown__queries"
145
+ }, /*#__PURE__*/React__default.createElement("h4", {
146
+ className: "stores-dropdown__queries-title"
147
+ }, "Customer Queries: "), /*#__PURE__*/React__default.createElement("a", {
148
+ className: "stores-dropdown__contact-details",
149
+ href: "tel:".concat(contactNumber)
150
+ }, contactNumber)));
151
+ };
152
+
153
+ var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
154
+ var accountIcon = _ref.accountIcon,
155
+ cartIcon = _ref.cartIcon,
156
+ interestIcon = _ref.interestIcon,
157
+ cartCount = _ref.cartCount,
158
+ logoSrc = _ref.logoSrc,
159
+ categoryElements = _ref.categoryElements,
160
+ newBrandElements = _ref.newBrandElements,
161
+ bagsElements = _ref.bagsElements,
162
+ shoesElement = _ref.shoesElement,
163
+ clothingElements = _ref.clothingElements,
164
+ accessoriesElements = _ref.accessoriesElements,
165
+ accessoriesCategoryElements = _ref.accessoriesCategoryElements,
166
+ watchesElements = _ref.watchesElements,
167
+ newBrandsImage = _ref.newBrandsImage,
168
+ bagsImage = _ref.bagsImage,
169
+ shoesImage = _ref.shoesImage,
170
+ clothingImage = _ref.clothingImage,
171
+ accessoriesImage = _ref.accessoriesImage,
172
+ watchesImage = _ref.watchesImage,
173
+ productsUrl = _ref.productsUrl,
174
+ stores = _ref.stores,
175
+ contactNumber = _ref.contactNumber,
176
+ onInterestClick = _ref.onInterestClick,
177
+ onCartClick = _ref.onCartClick,
178
+ onAccountClick = _ref.onAccountClick,
179
+ inputSearchIcon = _ref.inputSearchIcon,
180
+ onSearch = _ref.onSearch,
181
+ ourStoryLink = _ref.ourStoryLink,
182
+ blogLink = _ref.blogLink,
183
+ contactUsLink = _ref.contactUsLink,
184
+ sellToUsLink = _ref.sellToUsLink;
185
+
186
+ var _useState = React.useState(''),
187
+ _useState2 = _slicedToArray(_useState, 2),
188
+ searchValue = _useState2[0],
189
+ setSearchValue = _useState2[1];
190
+
191
+ var handleChange = function handleChange(event) {
192
+ setSearchValue(event.target.value);
193
+ };
194
+
195
+ var handleKeyDown = function handleKeyDown(event) {
196
+ if (event.key === 'Enter') {
197
+ onSearch(searchValue);
198
+ }
199
+ };
200
+
201
+ return /*#__PURE__*/React__default.createElement("div", {
202
+ className: "navbar"
203
+ }, /*#__PURE__*/React__default.createElement("div", {
204
+ className: "navbar__container"
205
+ }, /*#__PURE__*/React__default.createElement("div", {
206
+ className: "navbar__logo-wrapper"
207
+ }, /*#__PURE__*/React__default.createElement("div", {
208
+ className: "navbar__logo"
209
+ }, /*#__PURE__*/React__default.createElement("img", {
210
+ src: logoSrc,
211
+ alt: "luxity-logo"
212
+ }))), /*#__PURE__*/React__default.createElement("div", {
213
+ className: "navbar__section"
214
+ }, /*#__PURE__*/React__default.createElement("div", {
215
+ className: "navbar__body"
216
+ }, /*#__PURE__*/React__default.createElement("div", {
217
+ className: "navbar__product-search"
218
+ }, /*#__PURE__*/React__default.createElement("img", {
219
+ src: inputSearchIcon,
220
+ alt: "search-icon",
221
+ className: "navbar__input-search-icon"
222
+ }), /*#__PURE__*/React__default.createElement("input", {
223
+ className: "navbar__form-input",
224
+ type: "text",
225
+ placeholder: "Search for items and designs",
226
+ value: searchValue,
227
+ onChange: handleChange,
228
+ onKeyDown: handleKeyDown
229
+ })), /*#__PURE__*/React__default.createElement("nav", {
230
+ className: "navbar__nav-links navbar__nav-links--wrap"
231
+ }, /*#__PURE__*/React__default.createElement("li", {
232
+ className: "navbar__link"
233
+ }, /*#__PURE__*/React__default.createElement("a", {
234
+ href: "#",
235
+ className: "navbar__link-item"
236
+ }, "New"), /*#__PURE__*/React__default.createElement("div", {
237
+ className: "navbar__dropdown"
238
+ }, /*#__PURE__*/React__default.createElement(Dropdown, {
239
+ title: "Department",
240
+ imageSrc: newBrandsImage,
241
+ categoryElements: categoryElements,
242
+ brandElements: newBrandElements,
243
+ productsUrl: productsUrl
244
+ }))), /*#__PURE__*/React__default.createElement("li", {
245
+ className: "navbar__link"
246
+ }, /*#__PURE__*/React__default.createElement("a", {
247
+ href: "#",
248
+ className: "navbar__link-item"
249
+ }, "Bags"), /*#__PURE__*/React__default.createElement("div", {
250
+ className: "navbar__dropdown"
251
+ }, /*#__PURE__*/React__default.createElement(Dropdown, {
252
+ title: "Department",
253
+ imageSrc: bagsImage,
254
+ categoryElements: categoryElements,
255
+ brandElements: bagsElements,
256
+ productsUrl: productsUrl
257
+ }))), /*#__PURE__*/React__default.createElement("li", {
258
+ className: "navbar__link"
259
+ }, /*#__PURE__*/React__default.createElement("a", {
260
+ href: "#",
261
+ className: "navbar__link-item"
262
+ }, "Shoes"), /*#__PURE__*/React__default.createElement("div", {
263
+ className: "navbar__dropdown"
264
+ }, /*#__PURE__*/React__default.createElement(Dropdown, {
265
+ title: "Department",
266
+ imageSrc: shoesImage,
267
+ categoryElements: categoryElements,
268
+ brandElements: shoesElement,
269
+ productsUrl: productsUrl
270
+ }))), /*#__PURE__*/React__default.createElement("li", {
271
+ className: "navbar__link"
272
+ }, /*#__PURE__*/React__default.createElement("a", {
273
+ href: "#",
274
+ className: "navbar__link-item"
275
+ }, "Clothing"), /*#__PURE__*/React__default.createElement("div", {
276
+ className: "navbar__dropdown"
277
+ }, /*#__PURE__*/React__default.createElement(Dropdown, {
278
+ title: "Department",
279
+ imageSrc: clothingImage,
280
+ categoryElements: categoryElements,
281
+ brandElements: clothingElements,
282
+ productsUrl: productsUrl
283
+ }))), /*#__PURE__*/React__default.createElement("li", {
284
+ className: "navbar__link"
285
+ }, /*#__PURE__*/React__default.createElement("a", {
286
+ href: "#",
287
+ className: "navbar__link-item"
288
+ }, "Accessories"), /*#__PURE__*/React__default.createElement("div", {
289
+ className: "navbar__dropdown"
290
+ }, /*#__PURE__*/React__default.createElement(Dropdown, {
291
+ title: "Department",
292
+ imageSrc: accessoriesImage,
293
+ categoryElements: accessoriesCategoryElements,
294
+ brandElements: accessoriesElements,
295
+ productsUrl: productsUrl
296
+ }))), /*#__PURE__*/React__default.createElement("li", {
297
+ className: "navbar__link"
298
+ }, /*#__PURE__*/React__default.createElement("a", {
299
+ href: "#",
300
+ className: "navbar__link-item"
301
+ }, "Watches"), /*#__PURE__*/React__default.createElement("div", {
302
+ className: "navbar__dropdown"
303
+ }, /*#__PURE__*/React__default.createElement(Dropdown, {
304
+ title: "Department",
305
+ imageSrc: watchesImage,
306
+ categoryElements: categoryElements,
307
+ brandElements: watchesElements,
308
+ productsUrl: productsUrl
309
+ }))), /*#__PURE__*/React__default.createElement("li", {
310
+ className: "navbar__link"
311
+ }, /*#__PURE__*/React__default.createElement("a", {
312
+ href: "#",
313
+ className: "navbar__link-item"
314
+ }, "Stores"), /*#__PURE__*/React__default.createElement("div", {
315
+ className: "navbar__dropdown"
316
+ }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
317
+ stores: stores,
318
+ contactNumber: contactNumber
319
+ }))))), /*#__PURE__*/React__default.createElement("div", {
320
+ className: "navbar__icons-wrapper"
321
+ }, /*#__PURE__*/React__default.createElement("div", {
322
+ className: "navbar__icons"
323
+ }, /*#__PURE__*/React__default.createElement("button", {
324
+ type: "button",
325
+ className: "navbar__icon",
326
+ onClick: onInterestClick
327
+ }, /*#__PURE__*/React__default.createElement("img", {
328
+ src: interestIcon,
329
+ alt: "interest-icon"
330
+ })), /*#__PURE__*/React__default.createElement("button", {
331
+ type: "button",
332
+ className: "navbar__icon",
333
+ onClick: onAccountClick
334
+ }, /*#__PURE__*/React__default.createElement("img", {
335
+ src: accountIcon,
336
+ alt: "account-icon"
337
+ })), /*#__PURE__*/React__default.createElement("button", {
338
+ type: "button",
339
+ className: "navbar__cart-icon navbar__icon",
340
+ onClick: onCartClick
341
+ }, /*#__PURE__*/React__default.createElement("img", {
342
+ src: cartIcon,
343
+ alt: "cart-icon"
344
+ }), /*#__PURE__*/React__default.createElement("div", {
345
+ className: "navbar__cart-count"
346
+ }, cartCount))), /*#__PURE__*/React__default.createElement("nav", {
347
+ className: "navbar__nav-links"
348
+ }, /*#__PURE__*/React__default.createElement("li", {
349
+ className: "navbar__company-link"
350
+ }, /*#__PURE__*/React__default.createElement("a", {
351
+ href: ourStoryLink,
352
+ className: "navbar__link-item"
353
+ }, "Our Story")), /*#__PURE__*/React__default.createElement("li", {
354
+ className: "navbar__company-link"
355
+ }, /*#__PURE__*/React__default.createElement("a", {
356
+ href: blogLink,
357
+ className: "navbar__link-item"
358
+ }, "Blog")), /*#__PURE__*/React__default.createElement("li", {
359
+ className: "navbar__company-link"
360
+ }, /*#__PURE__*/React__default.createElement("a", {
361
+ href: contactUsLink,
362
+ className: "navbar__link-item"
363
+ }, "Contact Us")), /*#__PURE__*/React__default.createElement("li", {
364
+ className: "navbar__company-link navbar__company-block"
365
+ }, /*#__PURE__*/React__default.createElement("a", {
366
+ href: sellToUsLink,
367
+ className: "navbar__link-item"
368
+ }, "Sell to us")))))));
369
+ };
370
+
371
+ return LuxityDesktopHeader;
372
+
373
+ })));