@bonlineza/luxity-lib 2.39.6 → 2.39.7
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/Accordion.js +352 -342
- package/AddInterest.js +3141 -3135
- package/AddProductInterest.js +7584 -1011
- package/BrandSelector.js +861 -854
- package/Checkbox.js +250 -240
- package/CheckboxButton.js +236 -229
- package/CommunicationPreferenceOptionsRenderer.js +568 -560
- package/CommunicationPreferenceSection.js +659 -651
- package/CommunicationPreferences.js +2402 -2394
- package/ConditionSelector.js +859 -852
- package/CountryCodeSelect.js +6650 -79
- package/CurrencyInputFormatter.js +96 -86
- package/CurrencySelect.js +227 -219
- package/DropdownSelector.js +6820 -211
- package/GALink.js +51 -43
- package/GenderSelector.js +362 -355
- package/GraphQLDropdownSelector.js +11878 -5308
- package/GraphQLMultiSelector.js +601 -593
- package/IconHeader.js +126 -118
- package/IconWrapper.js +25 -17
- package/InterestCatSelector.js +432 -424
- package/InterestItem.js +470 -462
- package/Interests.js +11286 -4716
- package/InterestsSubheading.js +41 -33
- package/InvertedTextButton.js +175 -167
- package/LuxityAppSideNav.js +189 -181
- package/LuxityDesktopHeader.js +1363 -1355
- package/LuxityFooter.js +2236 -2228
- package/LuxityGraphQLDropdownSelector.js +11963 -5393
- package/LuxityGraphQLMultiselector.js +785 -778
- package/LuxityMobileHeader.js +1794 -1786
- package/LuxityPageReady.js +209 -199
- package/LuxityProductInterestItem.js +367 -359
- package/LuxitySideNav.js +673 -665
- package/MaterialSelector.js +11993 -5423
- package/ModelSelector.js +11993 -5423
- package/NotificationDropDown.js +7029 -459
- package/Notify.js +32 -20
- package/OutlinePrimaryButton.js +142 -134
- package/PriceRangeSelector.js +1270 -1264
- package/PrimaryButton.js +137 -129
- package/RadioButtons.js +318 -308
- package/RangeSlider.js +1039 -1033
- package/RareStepFooter.js +264 -257
- package/RareStepHeader.js +808 -801
- package/ReactSelectWrapper.js +6604 -33
- package/SecondaryButton.js +152 -144
- package/ShoeSizeRangeSelector.js +1153 -1147
- package/ShoeSizeSelector.js +1154 -1146
- package/SimpleErrorBoundary.js +138 -130
- package/StyleSelector.js +861 -854
- package/TextButton.js +143 -135
- package/Tooltip.js +184 -176
- package/Tracking.js +25 -15
- package/WrapperButton.js +58 -50
- package/build/bundle.css +1 -1
- package/build/bundle.js +17236 -10632
- package/build/constants.js +45 -32
- package/package.json +2 -2
- package/svg/Accessories.js +42 -34
- package/svg/Account.js +38 -30
- package/svg/Add.js +39 -31
- package/svg/ArrowRight.js +36 -28
- package/svg/Bags.js +48 -40
- package/svg/BurgerMenu.js +32 -24
- package/svg/Calendar.js +106 -98
- package/svg/CalendarCircled.js +108 -100
- package/svg/CheckCircled.js +40 -32
- package/svg/Close.js +37 -29
- package/svg/Clothing.js +44 -36
- package/svg/Dot.js +40 -32
- package/svg/Edit.js +35 -27
- package/svg/Eye.js +36 -28
- package/svg/FileAttach.js +36 -28
- package/svg/FileAttachCircled.js +38 -30
- package/svg/Jewellery.js +57 -49
- package/svg/LightBulb.js +66 -58
- package/svg/Logo.js +140 -132
- package/svg/LuxityMenu.js +36 -28
- package/svg/Minus.js +37 -29
- package/svg/MobileAvatar.js +36 -28
- package/svg/MyOrder.js +44 -36
- package/svg/MyPayment.js +44 -36
- package/svg/MyProfile.js +52 -44
- package/svg/MySale.js +39 -31
- package/svg/Notification.js +38 -30
- package/svg/PointerDown.js +36 -28
- package/svg/Search.js +35 -27
- package/svg/Shoes.js +45 -37
- package/svg/SvgWrapper.js +21 -13
- package/svg/Trash.js +40 -32
- package/svg/Watches.js +55 -47
package/Accordion.js
CHANGED
|
@@ -1,380 +1,390 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
function
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-animate-height'), require('styled-components')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-animate-height', 'styled-components'], factory) :
|
|
4
|
+
(global = global || self, factory(global.Accordion = {}, global.React, global.AnimateHeight, global.styled));
|
|
5
|
+
}(this, (function (exports, React, AnimateHeight, styled) { 'use strict';
|
|
6
|
+
|
|
7
|
+
var React__default = 'default' in React ? React['default'] : React;
|
|
8
|
+
AnimateHeight = AnimateHeight && Object.prototype.hasOwnProperty.call(AnimateHeight, 'default') ? AnimateHeight['default'] : AnimateHeight;
|
|
9
|
+
var styled__default = 'default' in styled ? styled['default'] : styled;
|
|
10
|
+
|
|
11
|
+
function _extends() {
|
|
12
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
13
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
14
|
+
var source = arguments[i];
|
|
15
|
+
|
|
16
|
+
for (var key in source) {
|
|
17
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
18
|
+
target[key] = source[key];
|
|
19
|
+
}
|
|
13
20
|
}
|
|
14
21
|
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
return target;
|
|
18
|
-
};
|
|
19
|
-
return _extends.apply(this, arguments);
|
|
20
|
-
}
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
return target;
|
|
24
|
+
};
|
|
25
|
+
return _extends.apply(this, arguments);
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
raw
|
|
29
|
-
|
|
28
|
+
function _taggedTemplateLiteral(strings, raw) {
|
|
29
|
+
if (!raw) {
|
|
30
|
+
raw = strings.slice(0);
|
|
30
31
|
}
|
|
31
|
-
}));
|
|
32
|
-
}
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
return Object.freeze(Object.defineProperties(strings, {
|
|
34
|
+
raw: {
|
|
35
|
+
value: Object.freeze(raw)
|
|
36
|
+
}
|
|
37
|
+
}));
|
|
38
|
+
}
|
|
37
39
|
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
}
|
|
40
|
+
function _slicedToArray(arr, i) {
|
|
41
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
42
|
+
}
|
|
41
43
|
|
|
42
|
-
function
|
|
43
|
-
|
|
44
|
+
function _arrayWithHoles(arr) {
|
|
45
|
+
if (Array.isArray(arr)) return arr;
|
|
46
|
+
}
|
|
44
47
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
var _n = true;
|
|
48
|
-
var _d = false;
|
|
48
|
+
function _iterableToArrayLimit(arr, i) {
|
|
49
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
49
50
|
|
|
50
|
-
|
|
51
|
+
if (_i == null) return;
|
|
52
|
+
var _arr = [];
|
|
53
|
+
var _n = true;
|
|
54
|
+
var _d = false;
|
|
51
55
|
|
|
52
|
-
|
|
53
|
-
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
|
54
|
-
_arr.push(_s.value);
|
|
56
|
+
var _s, _e;
|
|
55
57
|
|
|
56
|
-
if (i && _arr.length === i) break;
|
|
57
|
-
}
|
|
58
|
-
} catch (err) {
|
|
59
|
-
_d = true;
|
|
60
|
-
_e = err;
|
|
61
|
-
} finally {
|
|
62
58
|
try {
|
|
63
|
-
|
|
59
|
+
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
|
60
|
+
_arr.push(_s.value);
|
|
61
|
+
|
|
62
|
+
if (i && _arr.length === i) break;
|
|
63
|
+
}
|
|
64
|
+
} catch (err) {
|
|
65
|
+
_d = true;
|
|
66
|
+
_e = err;
|
|
64
67
|
} finally {
|
|
65
|
-
|
|
68
|
+
try {
|
|
69
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
|
70
|
+
} finally {
|
|
71
|
+
if (_d) throw _e;
|
|
72
|
+
}
|
|
66
73
|
}
|
|
74
|
+
|
|
75
|
+
return _arr;
|
|
67
76
|
}
|
|
68
77
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
77
|
-
if (n === "Map" || n === "Set") return Array.from(o);
|
|
78
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function _arrayLikeToArray(arr, len) {
|
|
82
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
83
|
-
|
|
84
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
85
|
-
|
|
86
|
-
return arr2;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
function _nonIterableRest() {
|
|
90
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
var _templateObject;
|
|
94
|
-
var OuterContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n"])), function (props) {
|
|
95
|
-
return props.theme.colors.borderColor;
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
var _templateObject$1;
|
|
99
|
-
var ToggleButton = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n padding-left: 3rem;\n padding-right: 3rem;\n display: flex;\n align-items: center;\n min-height: 70px;\n height: 70px;\n cursor: pointer;\n outline: none;\n"])));
|
|
100
|
-
|
|
101
|
-
var _templateObject$2;
|
|
102
|
-
var Title = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n font-size: ", ";\n font-weight: bold;\n flex-grow: 1;\n color: ", ";\n"])), function (props) {
|
|
103
|
-
return props.theme.fontSizes[2];
|
|
104
|
-
}, function (props) {
|
|
105
|
-
return props.theme.colors.primary || '';
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
var _templateObject$3;
|
|
109
|
-
var BodyContent = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), function (props) {
|
|
110
|
-
return props.theme.marginPaddings[5];
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
var _templateObject$4;
|
|
114
|
-
var BodyDivider = styled.hr(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n margin-top: 0;\n border-style: none;\n border-bottom: 1px solid ", ";\n"])), function (props) {
|
|
115
|
-
return props.theme.marginPaddings[4];
|
|
116
|
-
}, function (props) {
|
|
117
|
-
return props.theme.colors.borderColor;
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
var _templateObject$5;
|
|
121
|
-
var Body = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n padding-left: ", ";\n padding-right: ", ";\n"])), function (props) {
|
|
122
|
-
return props.theme.marginPaddings[6];
|
|
123
|
-
}, function (props) {
|
|
124
|
-
return props.theme.marginPaddings[6];
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
var theme = {
|
|
128
|
-
breakpoints: ['40em', '52em', '64em'],
|
|
129
|
-
space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
|
|
130
|
-
fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
|
|
131
|
-
marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
|
|
132
|
-
letterSpacings: ['-0.5px', '0px', '+0.5px'],
|
|
133
|
-
radii: ['0px', '2px', '4px', '8px'],
|
|
134
|
-
borderRadius: '6px',
|
|
135
|
-
colors: {
|
|
136
|
-
primary: '#000',
|
|
137
|
-
base: '#4e4949',
|
|
138
|
-
baseLt: '#817c7c',
|
|
139
|
-
borderColor: '#d8d8d8',
|
|
140
|
-
ntrlMin: '#fff',
|
|
141
|
-
ntrlMinTen: '#e6e6e6',
|
|
142
|
-
gray: '#efefef',
|
|
143
|
-
darkerGray: '#454141'
|
|
144
|
-
},
|
|
145
|
-
rareStepColors: {
|
|
146
|
-
primary: '#202b58',
|
|
147
|
-
secondary: '#ef5c2d',
|
|
148
|
-
ntrlMin: '#ffffff',
|
|
149
|
-
ntrl40: '#f4f4f4',
|
|
150
|
-
ntrl50: '#808080',
|
|
151
|
-
ntrl60: '#e8e8e8',
|
|
152
|
-
ntrl70: '#252525',
|
|
153
|
-
ntrlMax: '#000000'
|
|
154
|
-
},
|
|
155
|
-
rareStepFontWeights: {
|
|
156
|
-
normal: 400,
|
|
157
|
-
medium: 500,
|
|
158
|
-
semiBold: 600,
|
|
159
|
-
bold: 700
|
|
160
|
-
},
|
|
161
|
-
rareStepFontSize: {
|
|
162
|
-
h1: '36px',
|
|
163
|
-
h2: '30px',
|
|
164
|
-
h3: '24px',
|
|
165
|
-
h4: '20px',
|
|
166
|
-
h5: '16px',
|
|
167
|
-
h6: '14px',
|
|
168
|
-
footerTitle: '16px'
|
|
169
|
-
},
|
|
170
|
-
rareStepPageSizes: {
|
|
171
|
-
mobile: '500px',
|
|
172
|
-
tablet: '768px',
|
|
173
|
-
desktop: '992px',
|
|
174
|
-
screenl: '1280px',
|
|
175
|
-
screenxl: '1680px',
|
|
176
|
-
screenxxl: '1920px',
|
|
177
|
-
container: '1600px'
|
|
78
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
79
|
+
if (!o) return;
|
|
80
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
81
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
82
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
83
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
84
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
178
85
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
ref: ref
|
|
187
|
-
})));
|
|
188
|
-
});
|
|
189
|
-
});
|
|
190
|
-
|
|
191
|
-
var SimpleAccordion = function SimpleAccordion(_ref) {
|
|
192
|
-
var identifier = _ref.identifier,
|
|
193
|
-
wrapperClass = _ref.wrapperClass,
|
|
194
|
-
containerClass = _ref.containerClass,
|
|
195
|
-
title = _ref.title,
|
|
196
|
-
_onClick = _ref.onClick,
|
|
197
|
-
openIndicator = _ref.openIndicator;
|
|
198
|
-
var OpenIndicator = openIndicator;
|
|
199
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
200
|
-
className: wrapperClass
|
|
201
|
-
}, /*#__PURE__*/React.createElement(OuterContainer, {
|
|
202
|
-
"data-qe-id": identifier,
|
|
203
|
-
className: containerClass
|
|
204
|
-
}, /*#__PURE__*/React.createElement(ToggleButton, {
|
|
205
|
-
className: "".concat(containerClass, "__toggle-button"),
|
|
206
|
-
"data-qe-id": "".concat(identifier, "-toggle-button"),
|
|
207
|
-
onClick: function onClick(e) {
|
|
208
|
-
e.preventDefault();
|
|
209
|
-
|
|
210
|
-
_onClick();
|
|
211
|
-
},
|
|
212
|
-
role: "button"
|
|
213
|
-
}, /*#__PURE__*/React.createElement(Title, {
|
|
214
|
-
className: "".concat(containerClass, "__toggle-button__title")
|
|
215
|
-
}, title), /*#__PURE__*/React.createElement("div", {
|
|
216
|
-
className: "".concat(containerClass, "__toggle-button__indicator")
|
|
217
|
-
}, /*#__PURE__*/React.createElement(OpenIndicator, null)))));
|
|
218
|
-
};
|
|
219
|
-
|
|
220
|
-
SimpleAccordion.defaultProps = {
|
|
221
|
-
identifier: '',
|
|
222
|
-
wrapperClass: '',
|
|
223
|
-
containerClass: 'luxity-accordion',
|
|
224
|
-
title: '',
|
|
225
|
-
onClick: function onClick() {
|
|
226
|
-
return null;
|
|
227
|
-
},
|
|
228
|
-
openIndicator: function openIndicator() {
|
|
229
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, "Open");
|
|
86
|
+
|
|
87
|
+
function _arrayLikeToArray(arr, len) {
|
|
88
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
89
|
+
|
|
90
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
91
|
+
|
|
92
|
+
return arr2;
|
|
230
93
|
}
|
|
231
|
-
};
|
|
232
|
-
var SimpleAccordion$1 = themed(SimpleAccordion);
|
|
233
|
-
|
|
234
|
-
var DummyAccordion = SimpleAccordion$1;
|
|
235
|
-
|
|
236
|
-
var runAfter = function runAfter(fn, duration) {
|
|
237
|
-
setTimeout(fn, duration);
|
|
238
|
-
};
|
|
239
|
-
|
|
240
|
-
var getInitHeight = function getInitHeight(defaultHeight) {
|
|
241
|
-
if (defaultHeight === 'auto') return 'auto';
|
|
242
|
-
return 0;
|
|
243
|
-
};
|
|
244
|
-
/**
|
|
245
|
-
* An Expand and Collapsible container which show a Title by default
|
|
246
|
-
* and then expands to show the content/children when it is triggered
|
|
247
|
-
*/
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
var Accordion = function Accordion(_ref) {
|
|
251
|
-
var wrapperClass = _ref.wrapperClass,
|
|
252
|
-
containerClass = _ref.containerClass,
|
|
253
|
-
title = _ref.title,
|
|
254
|
-
closeIndicator = _ref.closeIndicator,
|
|
255
|
-
openIndicator = _ref.openIndicator,
|
|
256
|
-
itemKey = _ref.itemKey,
|
|
257
|
-
childRenderer = _ref.children,
|
|
258
|
-
duration = _ref.duration,
|
|
259
|
-
onAnimationStart = _ref.onAnimationStart,
|
|
260
|
-
onAnimationEnd = _ref.onAnimationEnd,
|
|
261
|
-
onClose = _ref.onClose,
|
|
262
|
-
onOpen = _ref.onOpen,
|
|
263
|
-
onToggle = _ref.onToggle,
|
|
264
|
-
identifier = _ref.identifier,
|
|
265
|
-
defaultHeight = _ref.defaultHeight;
|
|
266
|
-
|
|
267
|
-
var _useState = useState(getInitHeight(defaultHeight)),
|
|
268
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
269
|
-
height = _useState2[0],
|
|
270
|
-
setHeight = _useState2[1];
|
|
271
|
-
|
|
272
|
-
var isClosed = height === 0 || false;
|
|
273
|
-
|
|
274
|
-
var toggle = function toggle() {
|
|
275
|
-
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
|
|
276
|
-
return null;
|
|
277
|
-
};
|
|
278
|
-
setHeight(isClosed ? 'auto' : 0); // triggers animation with duration
|
|
279
94
|
|
|
280
|
-
|
|
95
|
+
function _nonIterableRest() {
|
|
96
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
97
|
+
}
|
|
281
98
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
99
|
+
var _templateObject;
|
|
100
|
+
var OuterContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n"])), function (props) {
|
|
101
|
+
return props.theme.colors.borderColor;
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
var _templateObject$1;
|
|
105
|
+
var ToggleButton = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n padding-left: 3rem;\n padding-right: 3rem;\n display: flex;\n align-items: center;\n min-height: 70px;\n height: 70px;\n cursor: pointer;\n outline: none;\n"])));
|
|
106
|
+
|
|
107
|
+
var _templateObject$2;
|
|
108
|
+
var Title = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n font-size: ", ";\n font-weight: bold;\n flex-grow: 1;\n color: ", ";\n"])), function (props) {
|
|
109
|
+
return props.theme.fontSizes[2];
|
|
110
|
+
}, function (props) {
|
|
111
|
+
return props.theme.colors.primary || '';
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
var _templateObject$3;
|
|
115
|
+
var BodyContent = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), function (props) {
|
|
116
|
+
return props.theme.marginPaddings[5];
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
var _templateObject$4;
|
|
120
|
+
var BodyDivider = styled__default.hr(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n margin-top: 0;\n border-style: none;\n border-bottom: 1px solid ", ";\n"])), function (props) {
|
|
121
|
+
return props.theme.marginPaddings[4];
|
|
122
|
+
}, function (props) {
|
|
123
|
+
return props.theme.colors.borderColor;
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
var _templateObject$5;
|
|
127
|
+
var Body = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n padding-left: ", ";\n padding-right: ", ";\n"])), function (props) {
|
|
128
|
+
return props.theme.marginPaddings[6];
|
|
129
|
+
}, function (props) {
|
|
130
|
+
return props.theme.marginPaddings[6];
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
var theme = {
|
|
134
|
+
breakpoints: ['40em', '52em', '64em'],
|
|
135
|
+
space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
|
|
136
|
+
fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
|
|
137
|
+
marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
|
|
138
|
+
letterSpacings: ['-0.5px', '0px', '+0.5px'],
|
|
139
|
+
radii: ['0px', '2px', '4px', '8px'],
|
|
140
|
+
borderRadius: '6px',
|
|
141
|
+
colors: {
|
|
142
|
+
primary: '#000',
|
|
143
|
+
base: '#4e4949',
|
|
144
|
+
baseLt: '#817c7c',
|
|
145
|
+
borderColor: '#d8d8d8',
|
|
146
|
+
ntrlMin: '#fff',
|
|
147
|
+
ntrlMinTen: '#e6e6e6',
|
|
148
|
+
gray: '#efefef',
|
|
149
|
+
darkerGray: '#454141'
|
|
150
|
+
},
|
|
151
|
+
rareStepColors: {
|
|
152
|
+
primary: '#202b58',
|
|
153
|
+
secondary: '#ef5c2d',
|
|
154
|
+
ntrlMin: '#ffffff',
|
|
155
|
+
ntrl40: '#f4f4f4',
|
|
156
|
+
ntrl50: '#808080',
|
|
157
|
+
ntrl60: '#e8e8e8',
|
|
158
|
+
ntrl70: '#252525',
|
|
159
|
+
ntrlMax: '#000000'
|
|
160
|
+
},
|
|
161
|
+
rareStepFontWeights: {
|
|
162
|
+
normal: 400,
|
|
163
|
+
medium: 500,
|
|
164
|
+
semiBold: 600,
|
|
165
|
+
bold: 700
|
|
166
|
+
},
|
|
167
|
+
rareStepFontSize: {
|
|
168
|
+
h1: '36px',
|
|
169
|
+
h2: '30px',
|
|
170
|
+
h3: '24px',
|
|
171
|
+
h4: '20px',
|
|
172
|
+
h5: '16px',
|
|
173
|
+
h6: '14px',
|
|
174
|
+
footerTitle: '16px'
|
|
175
|
+
},
|
|
176
|
+
rareStepPageSizes: {
|
|
177
|
+
mobile: '500px',
|
|
178
|
+
tablet: '768px',
|
|
179
|
+
desktop: '992px',
|
|
180
|
+
screenl: '1280px',
|
|
181
|
+
screenxl: '1680px',
|
|
182
|
+
screenxxl: '1920px',
|
|
183
|
+
container: '1600px'
|
|
286
184
|
}
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
var themed = (function (Component) {
|
|
188
|
+
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
189
|
+
return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
|
|
190
|
+
theme: theme
|
|
191
|
+
}, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
|
|
192
|
+
ref: ref
|
|
193
|
+
})));
|
|
194
|
+
});
|
|
195
|
+
});
|
|
287
196
|
|
|
288
|
-
|
|
197
|
+
var SimpleAccordion = function SimpleAccordion(_ref) {
|
|
198
|
+
var identifier = _ref.identifier,
|
|
199
|
+
wrapperClass = _ref.wrapperClass,
|
|
200
|
+
containerClass = _ref.containerClass,
|
|
201
|
+
title = _ref.title,
|
|
202
|
+
_onClick = _ref.onClick,
|
|
203
|
+
openIndicator = _ref.openIndicator;
|
|
204
|
+
var OpenIndicator = openIndicator;
|
|
205
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
206
|
+
className: wrapperClass
|
|
207
|
+
}, /*#__PURE__*/React__default.createElement(OuterContainer, {
|
|
208
|
+
"data-qe-id": identifier,
|
|
209
|
+
className: containerClass
|
|
210
|
+
}, /*#__PURE__*/React__default.createElement(ToggleButton, {
|
|
211
|
+
className: "".concat(containerClass, "__toggle-button"),
|
|
212
|
+
"data-qe-id": "".concat(identifier, "-toggle-button"),
|
|
213
|
+
onClick: function onClick(e) {
|
|
214
|
+
e.preventDefault();
|
|
215
|
+
|
|
216
|
+
_onClick();
|
|
217
|
+
},
|
|
218
|
+
role: "button"
|
|
219
|
+
}, /*#__PURE__*/React__default.createElement(Title, {
|
|
220
|
+
className: "".concat(containerClass, "__toggle-button__title")
|
|
221
|
+
}, title), /*#__PURE__*/React__default.createElement("div", {
|
|
222
|
+
className: "".concat(containerClass, "__toggle-button__indicator")
|
|
223
|
+
}, /*#__PURE__*/React__default.createElement(OpenIndicator, null)))));
|
|
289
224
|
};
|
|
290
225
|
|
|
291
|
-
|
|
292
|
-
|
|
226
|
+
SimpleAccordion.defaultProps = {
|
|
227
|
+
identifier: '',
|
|
228
|
+
wrapperClass: '',
|
|
229
|
+
containerClass: 'luxity-accordion',
|
|
230
|
+
title: '',
|
|
231
|
+
onClick: function onClick() {
|
|
293
232
|
return null;
|
|
294
|
-
}
|
|
295
|
-
|
|
233
|
+
},
|
|
234
|
+
openIndicator: function openIndicator() {
|
|
235
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Open");
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
var SimpleAccordion$1 = themed(SimpleAccordion);
|
|
296
239
|
|
|
297
|
-
|
|
298
|
-
|
|
240
|
+
var DummyAccordion = SimpleAccordion$1;
|
|
241
|
+
|
|
242
|
+
var runAfter = function runAfter(fn, duration) {
|
|
243
|
+
setTimeout(fn, duration);
|
|
299
244
|
};
|
|
300
245
|
|
|
301
|
-
var
|
|
302
|
-
|
|
303
|
-
|
|
246
|
+
var getInitHeight = function getInitHeight(defaultHeight) {
|
|
247
|
+
if (defaultHeight === 'auto') return 'auto';
|
|
248
|
+
return 0;
|
|
249
|
+
};
|
|
250
|
+
/**
|
|
251
|
+
* An Expand and Collapsible container which show a Title by default
|
|
252
|
+
* and then expands to show the content/children when it is triggered
|
|
253
|
+
*/
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
var Accordion = function Accordion(_ref) {
|
|
257
|
+
var wrapperClass = _ref.wrapperClass,
|
|
258
|
+
containerClass = _ref.containerClass,
|
|
259
|
+
title = _ref.title,
|
|
260
|
+
closeIndicator = _ref.closeIndicator,
|
|
261
|
+
openIndicator = _ref.openIndicator,
|
|
262
|
+
itemKey = _ref.itemKey,
|
|
263
|
+
childRenderer = _ref.children,
|
|
264
|
+
duration = _ref.duration,
|
|
265
|
+
onAnimationStart = _ref.onAnimationStart,
|
|
266
|
+
onAnimationEnd = _ref.onAnimationEnd,
|
|
267
|
+
onClose = _ref.onClose,
|
|
268
|
+
onOpen = _ref.onOpen,
|
|
269
|
+
onToggle = _ref.onToggle,
|
|
270
|
+
identifier = _ref.identifier,
|
|
271
|
+
defaultHeight = _ref.defaultHeight;
|
|
272
|
+
|
|
273
|
+
var _useState = React.useState(getInitHeight(defaultHeight)),
|
|
274
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
275
|
+
height = _useState2[0],
|
|
276
|
+
setHeight = _useState2[1];
|
|
277
|
+
|
|
278
|
+
var isClosed = height === 0 || false;
|
|
279
|
+
|
|
280
|
+
var toggle = function toggle() {
|
|
281
|
+
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
|
|
282
|
+
return null;
|
|
283
|
+
};
|
|
284
|
+
setHeight(isClosed ? 'auto' : 0); // triggers animation with duration
|
|
285
|
+
|
|
286
|
+
runAfter(callback, duration);
|
|
287
|
+
|
|
288
|
+
if (isClosed) {
|
|
289
|
+
runAfter(onOpen, duration);
|
|
290
|
+
} else {
|
|
291
|
+
runAfter(onClose, duration);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
runAfter(onToggle, duration);
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
var close = function close() {
|
|
298
|
+
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
|
|
299
|
+
return null;
|
|
300
|
+
};
|
|
301
|
+
setHeight(0); // triggers animation with duration
|
|
302
|
+
|
|
303
|
+
runAfter(callback, duration);
|
|
304
|
+
runAfter(onClose, duration);
|
|
304
305
|
};
|
|
305
|
-
setHeight('auto'); // triggers animation with duration
|
|
306
306
|
|
|
307
|
-
|
|
308
|
-
|
|
307
|
+
var open = function open() {
|
|
308
|
+
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
|
|
309
|
+
return null;
|
|
310
|
+
};
|
|
311
|
+
setHeight('auto'); // triggers animation with duration
|
|
312
|
+
|
|
313
|
+
runAfter(callback, duration);
|
|
314
|
+
runAfter(onOpen, duration);
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
var CloseIndicator = closeIndicator;
|
|
318
|
+
var OpenIndicator = openIndicator;
|
|
319
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
320
|
+
className: wrapperClass
|
|
321
|
+
}, /*#__PURE__*/React__default.createElement(OuterContainer, {
|
|
322
|
+
"data-qe-id": identifier,
|
|
323
|
+
className: containerClass
|
|
324
|
+
}, /*#__PURE__*/React__default.createElement(ToggleButton, {
|
|
325
|
+
className: "".concat(containerClass, "__toggle-button"),
|
|
326
|
+
"data-qe-id": "".concat(identifier, "-toggle-button"),
|
|
327
|
+
onKeyPress: function onKeyPress() {
|
|
328
|
+
return null;
|
|
329
|
+
},
|
|
330
|
+
onClick: function onClick(e) {
|
|
331
|
+
e.preventDefault();
|
|
332
|
+
toggle();
|
|
333
|
+
},
|
|
334
|
+
role: "button",
|
|
335
|
+
tabIndex: itemKey + 1
|
|
336
|
+
}, /*#__PURE__*/React__default.createElement(Title, {
|
|
337
|
+
className: "".concat(containerClass, "__toggle-button__title")
|
|
338
|
+
}, title), /*#__PURE__*/React__default.createElement("div", {
|
|
339
|
+
className: "".concat(containerClass, "__toggle-button__indicator")
|
|
340
|
+
}, isClosed ? /*#__PURE__*/React__default.createElement(OpenIndicator, null) : /*#__PURE__*/React__default.createElement(CloseIndicator, null))), /*#__PURE__*/React__default.createElement(AnimateHeight, {
|
|
341
|
+
height: height,
|
|
342
|
+
duration: duration,
|
|
343
|
+
onAnimationStart: onAnimationStart,
|
|
344
|
+
onAnimationEnd: onAnimationEnd
|
|
345
|
+
}, /*#__PURE__*/React__default.createElement(Body, {
|
|
346
|
+
className: "".concat(containerClass, "__body")
|
|
347
|
+
}, title ? /*#__PURE__*/React__default.createElement(BodyDivider, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(BodyContent, {
|
|
348
|
+
className: "".concat(containerClass, "__body__content")
|
|
349
|
+
}, typeof childRenderer === 'function' ? childRenderer(close, open, toggle) : childRenderer)))));
|
|
309
350
|
};
|
|
310
351
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
onKeyPress: function onKeyPress() {
|
|
352
|
+
Accordion.defaultProps = {
|
|
353
|
+
identifier: '',
|
|
354
|
+
wrapperClass: '',
|
|
355
|
+
containerClass: 'luxity-accordion',
|
|
356
|
+
title: '',
|
|
357
|
+
itemKey: 0,
|
|
358
|
+
children: null,
|
|
359
|
+
duration: 500,
|
|
360
|
+
defaultHeight: '0',
|
|
361
|
+
onAnimationStart: function onAnimationStart() {
|
|
322
362
|
return null;
|
|
323
363
|
},
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
toggle();
|
|
364
|
+
onAnimationEnd: function onAnimationEnd() {
|
|
365
|
+
return null;
|
|
327
366
|
},
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
title: '',
|
|
351
|
-
itemKey: 0,
|
|
352
|
-
children: null,
|
|
353
|
-
duration: 500,
|
|
354
|
-
defaultHeight: '0',
|
|
355
|
-
onAnimationStart: function onAnimationStart() {
|
|
356
|
-
return null;
|
|
357
|
-
},
|
|
358
|
-
onAnimationEnd: function onAnimationEnd() {
|
|
359
|
-
return null;
|
|
360
|
-
},
|
|
361
|
-
onClose: function onClose() {
|
|
362
|
-
return null;
|
|
363
|
-
},
|
|
364
|
-
onOpen: function onOpen() {
|
|
365
|
-
return null;
|
|
366
|
-
},
|
|
367
|
-
onToggle: function onToggle() {
|
|
368
|
-
return null;
|
|
369
|
-
},
|
|
370
|
-
closeIndicator: function closeIndicator() {
|
|
371
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, "Close");
|
|
372
|
-
},
|
|
373
|
-
openIndicator: function openIndicator() {
|
|
374
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, "Open");
|
|
375
|
-
}
|
|
376
|
-
};
|
|
377
|
-
var index = themed(Accordion);
|
|
367
|
+
onClose: function onClose() {
|
|
368
|
+
return null;
|
|
369
|
+
},
|
|
370
|
+
onOpen: function onOpen() {
|
|
371
|
+
return null;
|
|
372
|
+
},
|
|
373
|
+
onToggle: function onToggle() {
|
|
374
|
+
return null;
|
|
375
|
+
},
|
|
376
|
+
closeIndicator: function closeIndicator() {
|
|
377
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Close");
|
|
378
|
+
},
|
|
379
|
+
openIndicator: function openIndicator() {
|
|
380
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Open");
|
|
381
|
+
}
|
|
382
|
+
};
|
|
383
|
+
var index = themed(Accordion);
|
|
384
|
+
|
|
385
|
+
exports.DummyAccordion = DummyAccordion;
|
|
386
|
+
exports.default = index;
|
|
387
|
+
|
|
388
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
378
389
|
|
|
379
|
-
|
|
380
|
-
export { DummyAccordion };
|
|
390
|
+
})));
|