@bonlineza/luxity-lib 2.9.2 → 2.10.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.
- package/AddInterest.js +125 -72
- package/BrandSelector.js +78 -25
- package/GraphQLMultiSelector.js +69 -16
- package/Interests.js +153 -97
- package/LuxityGraphQLMultiselector.js +74 -21
- package/LuxityLoader.js +75 -0
- package/LuxityPageReady.js +72 -6
- package/NotificationDropDown.js +65 -9
- package/README.md +3 -0
- package/StyleSelector.js +78 -25
- package/build/bundle.js +153 -97
- package/package.json +1 -1
- package/svg/LuxityArrowLeft.js +28 -0
- package/svg/LuxityArrowRight.js +28 -0
package/StyleSelector.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('styled-components'), require('@bonlineza/b-lib/
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'styled-components', '@bonlineza/b-lib/
|
|
4
|
-
(global = global || self, global.StyleSelector = factory(global.React, global.function, global.styled, global.
|
|
5
|
-
}(this, (function (React, functions, styled,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('styled-components'), require('@bonlineza/b-lib/PageReady')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'styled-components', '@bonlineza/b-lib/PageReady'], factory) :
|
|
4
|
+
(global = global || self, global.StyleSelector = factory(global.React, global.function, global.styled, global.PageReady));
|
|
5
|
+
}(this, (function (React, functions, styled, PageReady) { 'use strict';
|
|
6
6
|
|
|
7
7
|
var React__default = 'default' in React ? React['default'] : React;
|
|
8
8
|
var styled__default = 'default' in styled ? styled['default'] : styled;
|
|
9
|
-
EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
|
|
10
9
|
PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
|
|
11
10
|
|
|
12
11
|
function _classCallCheck(instance, Constructor) {
|
|
@@ -236,6 +235,57 @@
|
|
|
236
235
|
return message.replace(':error_code', error.status || 'Network Down');
|
|
237
236
|
};
|
|
238
237
|
|
|
238
|
+
var LuxityArrowLeft = (function (props) {
|
|
239
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
240
|
+
version: "1.0",
|
|
241
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
242
|
+
width: props.width || '100%',
|
|
243
|
+
height: props.height || '100%',
|
|
244
|
+
viewBox: "0 0 177.000000 300.000000",
|
|
245
|
+
preserveAspectRatio: "xMidYMid meet"
|
|
246
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
247
|
+
transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
|
|
248
|
+
fill: "#000000",
|
|
249
|
+
stroke: "none"
|
|
250
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
251
|
+
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"
|
|
252
|
+
})));
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
var LuxityArrowRight = (function (props) {
|
|
256
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
257
|
+
version: "1.0",
|
|
258
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
259
|
+
width: props.width || '100%',
|
|
260
|
+
height: props.height || '100%',
|
|
261
|
+
viewBox: "0 0 177.000000 300.000000",
|
|
262
|
+
preserveAspectRatio: "xMidYMid meet"
|
|
263
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
264
|
+
transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
|
|
265
|
+
fill: "#000000",
|
|
266
|
+
stroke: "none"
|
|
267
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
268
|
+
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"
|
|
269
|
+
})));
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
273
|
+
var LoaderContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin: 20px auto;\n"])));
|
|
274
|
+
var LeftImageContainer = styled__default.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"])));
|
|
275
|
+
var RightImageContainer = styled__default.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"])));
|
|
276
|
+
|
|
277
|
+
function LuxityLoader(_ref) {
|
|
278
|
+
var width = _ref.width,
|
|
279
|
+
height = _ref.height;
|
|
280
|
+
return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(LeftImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowRight, {
|
|
281
|
+
width: width,
|
|
282
|
+
height: height
|
|
283
|
+
})), /*#__PURE__*/React__default.createElement(RightImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowLeft, {
|
|
284
|
+
width: width,
|
|
285
|
+
height: height
|
|
286
|
+
})));
|
|
287
|
+
}
|
|
288
|
+
|
|
239
289
|
var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
|
|
240
290
|
data: null
|
|
241
291
|
});
|
|
@@ -311,7 +361,10 @@
|
|
|
311
361
|
customErrorMessage: customErrorMessage,
|
|
312
362
|
customErrorHandler: customErrorHandler,
|
|
313
363
|
renderCustomLoader: function renderCustomLoader() {
|
|
314
|
-
return /*#__PURE__*/React__default.createElement(
|
|
364
|
+
return /*#__PURE__*/React__default.createElement(LuxityLoader, {
|
|
365
|
+
height: "40px",
|
|
366
|
+
width: "95%"
|
|
367
|
+
});
|
|
315
368
|
},
|
|
316
369
|
errorMessageInterpreter: interpretErrorMessage
|
|
317
370
|
}, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
|
|
@@ -338,9 +391,9 @@
|
|
|
338
391
|
}
|
|
339
392
|
};
|
|
340
393
|
|
|
341
|
-
var _templateObject, _templateObject2;
|
|
342
|
-
var disabledButtonStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: not-allowed;\n opacity: 0.4;\n"])));
|
|
343
|
-
var baseButtonStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 1rem 3.5rem;\n cursor: pointer;\n letter-spacing: 1.3px;\n border-style: none;\n text-transform: uppercase;\n font-size: 12px;\n color: #fff;\n transition: 0.2s ease-in-out;\n outline: none;\n min-width: 150px;\n"])));
|
|
394
|
+
var _templateObject$1, _templateObject2$1;
|
|
395
|
+
var disabledButtonStyle = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n opacity: 0.4;\n"])));
|
|
396
|
+
var baseButtonStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n padding: 1rem 3.5rem;\n cursor: pointer;\n letter-spacing: 1.3px;\n border-style: none;\n text-transform: uppercase;\n font-size: 12px;\n color: #fff;\n transition: 0.2s ease-in-out;\n outline: none;\n min-width: 150px;\n"])));
|
|
344
397
|
|
|
345
398
|
var theme = {
|
|
346
399
|
breakpoints: ['40em', '52em', '64em'],
|
|
@@ -374,8 +427,8 @@
|
|
|
374
427
|
|
|
375
428
|
var _excluded = ["children"];
|
|
376
429
|
|
|
377
|
-
var _templateObject$
|
|
378
|
-
var Button = styled__default.button(_templateObject$
|
|
430
|
+
var _templateObject$2;
|
|
431
|
+
var Button = styled__default.button(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n ", ";\n background-color: transparent;\n color: ", ";\n &:hover {\n color: ", ";\n }\n &:disabled {\n ", ";\n color: ", ";\n }\n"])), baseButtonStyle, function (props) {
|
|
379
432
|
return props.theme.colors.base;
|
|
380
433
|
}, function (props) {
|
|
381
434
|
return props.theme.colors.primary;
|
|
@@ -397,8 +450,8 @@
|
|
|
397
450
|
|
|
398
451
|
var _excluded$1 = ["children"];
|
|
399
452
|
|
|
400
|
-
var _templateObject$
|
|
401
|
-
var Button$1 = styled__default(TextButton$1)(_templateObject$
|
|
453
|
+
var _templateObject$3;
|
|
454
|
+
var Button$1 = styled__default(TextButton$1)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:disabled {\n background-color: ", ";\n color: ", ";\n }\n"])), function (props) {
|
|
402
455
|
return props.theme.colors.ntrlMin;
|
|
403
456
|
}, function (props) {
|
|
404
457
|
return props.theme.colors.primary;
|
|
@@ -428,15 +481,15 @@
|
|
|
428
481
|
lg: '1200px'
|
|
429
482
|
};
|
|
430
483
|
|
|
431
|
-
var _templateObject$
|
|
484
|
+
var _templateObject$4, _templateObject2$2;
|
|
432
485
|
var ALL_ITEM = {
|
|
433
486
|
id: 'ALL',
|
|
434
487
|
name: 'ALL'
|
|
435
488
|
};
|
|
436
489
|
var multiSelectorItemMaxHeight = '3rem';
|
|
437
490
|
var multiSelectorItemAnimationDuration = '300ms';
|
|
438
|
-
var multiselectorItemFadeIn = styled.keyframes(_templateObject$
|
|
439
|
-
var StyledMultiselector = styled__default.div(_templateObject2$
|
|
491
|
+
var multiselectorItemFadeIn = styled.keyframes(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n from {\n margin: 0;\n max-height: 0px;\n opacity: 0;\n }\n to {\n max-height: ", ";\n opacity: 1;\n }\n"])), multiSelectorItemMaxHeight);
|
|
492
|
+
var StyledMultiselector = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: wrap;\n margin-left: calc(-1 * ", ");\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n text-transform: none;\n box-sizing: border-box;\n animation: ", " ease-in-out\n ", " forwards;\n flex-basis: calc(25% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n text-overflow: ellipsis;\n overflow-x: hidden;\n min-height: 40px;\n\n @media (max-width: ", ") {\n flex-basis: calc(50% - ", ");\n }\n }\n }\n\n .multiselector__footer {\n display: flex;\n justify-content: center;\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
440
493
|
return props.theme.marginPaddings[2];
|
|
441
494
|
}, function (props) {
|
|
442
495
|
return props.theme.colors.ntrlMin;
|
|
@@ -673,11 +726,11 @@
|
|
|
673
726
|
}));
|
|
674
727
|
});
|
|
675
728
|
|
|
676
|
-
var _templateObject$
|
|
677
|
-
var Title = styled__default.h1(_templateObject$
|
|
729
|
+
var _templateObject$5, _templateObject2$3;
|
|
730
|
+
var Title = styled__default.h1(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n font-size: ", ";\n font-weight: bold;\n margin-bottom: 0;\n text-transform: uppercase;\n"])), function (props) {
|
|
678
731
|
return props.theme.fontSizes[2];
|
|
679
732
|
});
|
|
680
|
-
var InterestsSubheadingContainer = styled__default.div(_templateObject2$
|
|
733
|
+
var InterestsSubheadingContainer = styled__default.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n border-bottom: 1px solid ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n width: 100%;\n align-items: center;\n"])), function (props) {
|
|
681
734
|
return props.theme.marginPaddings[1];
|
|
682
735
|
}, function (props) {
|
|
683
736
|
return props.theme.colors.primary;
|
|
@@ -696,7 +749,7 @@
|
|
|
696
749
|
}, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
|
|
697
750
|
};
|
|
698
751
|
|
|
699
|
-
var _templateObject$
|
|
752
|
+
var _templateObject$6;
|
|
700
753
|
|
|
701
754
|
var Title$1 = function Title(_ref) {
|
|
702
755
|
var baseClass = _ref.baseClass,
|
|
@@ -717,7 +770,7 @@
|
|
|
717
770
|
})));
|
|
718
771
|
};
|
|
719
772
|
|
|
720
|
-
var StyledTitle = styled__default(Title$1)(_templateObject$
|
|
773
|
+
var StyledTitle = styled__default(Title$1)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n font-weight: bold;\n display: flex;\n align-items: center;\n font-size: ", ";\n\n .title__search,\n .title__search {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 30px;\n margin-bottom: ", ";\n\n svg {\n margin-left: ", ";\n fill: ", ";\n stroke: ", ";\n }\n\n input {\n width: 140px;\n border: none;\n font-size: ", ";\n transition: 0.2s border-color ease-in-out;\n margin-left: ", ";\n padding: 0;\n\n :focus {\n border-color: ", ";\n border-bottom: none;\n }\n }\n }\n"])), function (props) {
|
|
721
774
|
return props.theme.marginPaddings[2];
|
|
722
775
|
}, function (props) {
|
|
723
776
|
return props.theme.fontSizes[2];
|
|
@@ -859,8 +912,8 @@
|
|
|
859
912
|
|
|
860
913
|
var _excluded$2 = ["children"];
|
|
861
914
|
|
|
862
|
-
var _templateObject$
|
|
863
|
-
var Button$2 = styled__default.button(_templateObject$
|
|
915
|
+
var _templateObject$7;
|
|
916
|
+
var Button$2 = styled__default.button(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n ", ";\n background-color: ", ";\n color: ", ";\n &:active,\n &:hover {\n background-color: #fff;\n color: ", ";\n }\n\n &:disabled {\n ", "\n\n &:hover {\n background-color: ", ";\n color: #ffff;\n }\n }\n"])), baseButtonStyle, function (props) {
|
|
864
917
|
return props.theme.colors.primary;
|
|
865
918
|
}, function (props) {
|
|
866
919
|
return props.theme.colors.ntrlMin;
|
|
@@ -879,8 +932,8 @@
|
|
|
879
932
|
|
|
880
933
|
var PrimaryButton$1 = themed(PrimaryButton);
|
|
881
934
|
|
|
882
|
-
var _templateObject$
|
|
883
|
-
var BaseButton = styled__default.button(_templateObject$
|
|
935
|
+
var _templateObject$8;
|
|
936
|
+
var BaseButton = styled__default.button(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n color: ", ";\n border: 1px solid ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n"])), function (props) {
|
|
884
937
|
return props.theme.colors.base;
|
|
885
938
|
}, function (props) {
|
|
886
939
|
return props.theme.colors.borderColor;
|