willba-component-library 0.1.51 → 0.1.53
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/lib/index.esm.js +7 -8
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +7 -8
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +7 -8
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.css +5 -2
- package/src/components/FilterBar/FilterBar.stories.tsx +1 -4
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.css +2 -2
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx +4 -3
- package/src/components/FilterBar/components/buttons/tab-button/TabButton.css +1 -10
- package/src/components/FilterBar/hooks/useFilterBar.tsx +2 -4
- package/src/components/FilterBar/utils/parseGuests.tsx +3 -1
package/lib/index.umd.js
CHANGED
|
@@ -3916,7 +3916,7 @@
|
|
|
3916
3916
|
var _b = __read(_a, 2), key = _b[0], value = _b[1];
|
|
3917
3917
|
var ageCategory = ageCategories.find(function (c) { return c.id === key[key.length - 1]; });
|
|
3918
3918
|
if (ageCategory && value) {
|
|
3919
|
-
acc += "".concat(acc ? ' -' : '', " ").concat(ageCategory.name, ": ").concat(value);
|
|
3919
|
+
acc += "".concat(acc ? ' -' : '', " ").concat(ageCategory.name, ": <span style=\"display: inline-block; width: 21px\">").concat(value, "</span>");
|
|
3920
3920
|
}
|
|
3921
3921
|
return acc;
|
|
3922
3922
|
}, '');
|
|
@@ -4035,7 +4035,7 @@
|
|
|
4035
4035
|
var baseUrl = window.location.origin + window.location.pathname;
|
|
4036
4036
|
var updatedUrl = "".concat(baseUrl, "?").concat(updatedParams.toString());
|
|
4037
4037
|
handleSelectedFilter(false);
|
|
4038
|
-
if (onSubmit) {
|
|
4038
|
+
if (onSubmit && selectedPath === '/rooms') {
|
|
4039
4039
|
var updatedParamsObject_1 = {};
|
|
4040
4040
|
updatedParams.forEach(function (value, key) {
|
|
4041
4041
|
if (value)
|
|
@@ -4063,8 +4063,7 @@
|
|
|
4063
4063
|
finally { if (e_3) throw e_3.error; }
|
|
4064
4064
|
}
|
|
4065
4065
|
handleSelectedFilter(false);
|
|
4066
|
-
|
|
4067
|
-
return onSubmit
|
|
4066
|
+
return onSubmit && selectedPath === '/rooms'
|
|
4068
4067
|
? onSubmit(newParams)
|
|
4069
4068
|
: (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
|
|
4070
4069
|
}
|
|
@@ -6599,7 +6598,7 @@
|
|
|
6599
6598
|
React__default.createElement(IoIosCloseCircleOutline, null)));
|
|
6600
6599
|
};
|
|
6601
6600
|
|
|
6602
|
-
var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 500;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.8;\n \n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis
|
|
6601
|
+
var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 500;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.8;\n \n white-space: nowrap;\n /* overflow: hidden;\n text-overflow: ellipsis; */\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 600;\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
|
|
6603
6602
|
styleInject(css_248z$9);
|
|
6604
6603
|
|
|
6605
6604
|
var SelectButton = function (_a) {
|
|
@@ -6608,7 +6607,7 @@
|
|
|
6608
6607
|
React__default.createElement("span", { className: "select-button-wrapper" },
|
|
6609
6608
|
React__default.createElement("div", null,
|
|
6610
6609
|
React__default.createElement("p", { className: "select-button-label ".concat(active ? 'active' : '') }, label),
|
|
6611
|
-
React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : '') }
|
|
6610
|
+
React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
6612
6611
|
};
|
|
6613
6612
|
|
|
6614
6613
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -6628,7 +6627,7 @@
|
|
|
6628
6627
|
t('submit.label')));
|
|
6629
6628
|
};
|
|
6630
6629
|
|
|
6631
|
-
var css_248z$7 = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n font-size: 16px;\n display: flex;\n align-items: center;\n background-color: transparent;\n user-select: none;\n font-weight: 600;\n border-radius: 50px;\n color: var(--will-white)\n }\n\n \n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-white);\n }\n\n .will-filter-bar-tab-button.active {\n background-color: var(--will-transparent-white);\n \n }
|
|
6630
|
+
var css_248z$7 = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n font-size: 16px;\n display: flex;\n align-items: center;\n background-color: transparent;\n user-select: none;\n font-weight: 600;\n border-radius: 50px;\n color: var(--will-white)\n }\n\n \n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-white);\n }\n\n .will-filter-bar-tab-button.active {\n background-color: var(--will-transparent-white);\n \n }";
|
|
6632
6631
|
styleInject(css_248z$7);
|
|
6633
6632
|
|
|
6634
6633
|
var TabButton = function (_a) {
|
|
@@ -10706,7 +10705,7 @@
|
|
|
10706
10705
|
React__default.createElement("span", null, itm))); }))));
|
|
10707
10706
|
};
|
|
10708
10707
|
|
|
10709
|
-
var css_248z = ".will-root {\n z-index: 999;\n width:
|
|
10708
|
+
var css_248z = ".will-root {\n z-index: 999;\n width: fit-content;\n min-width: 796px;\n max-height: 100vh;\n position: relative;\n}\n\n.will-filter-bar {\n box-sizing: border-box;\n position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 222;\n background: transparent;\n padding: 10px;\n gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n display: flex;\n justify-content: space-between;\n padding: 10px;\n position: relative;\n z-index: 222;\n border-radius: 40px;\n background-color: var(--will-white);\n box-shadow: 0px 3px 10px 0px lightgrey; \n}\n\n@media (max-width: 960px) {\n .will-filter-bar-header {\n flex-direction: column;\n padding: 20px;\n border-radius: 25px;\n }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n background-color: var(--will-white);\n min-height: 100px;\n padding: 40px 20px ;\n position: absolute;\n top: 125px;\n z-index: 111;\n border-radius: 25px;\n box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n .will-root { \n width: 100%;\n max-height: 100vh; \n z-index: 3;\n }\n\n .will-filter-bar-container {\n margin-top: 10px;\n top:0;\n padding: 30px 20px;\n position: relative;\n }\n}\n\n";
|
|
10710
10709
|
styleInject(css_248z);
|
|
10711
10710
|
|
|
10712
10711
|
function FilterBar(_a) {
|