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.js
CHANGED
|
@@ -3914,7 +3914,7 @@ var parseGuests = function (_a) {
|
|
|
3914
3914
|
var _b = __read(_a, 2), key = _b[0], value = _b[1];
|
|
3915
3915
|
var ageCategory = ageCategories.find(function (c) { return c.id === key[key.length - 1]; });
|
|
3916
3916
|
if (ageCategory && value) {
|
|
3917
|
-
acc += "".concat(acc ? ' -' : '', " ").concat(ageCategory.name, ": ").concat(value);
|
|
3917
|
+
acc += "".concat(acc ? ' -' : '', " ").concat(ageCategory.name, ": <span style=\"display: inline-block; width: 21px\">").concat(value, "</span>");
|
|
3918
3918
|
}
|
|
3919
3919
|
return acc;
|
|
3920
3920
|
}, '');
|
|
@@ -4033,7 +4033,7 @@ var useFilterBar = function (_a) {
|
|
|
4033
4033
|
var baseUrl = window.location.origin + window.location.pathname;
|
|
4034
4034
|
var updatedUrl = "".concat(baseUrl, "?").concat(updatedParams.toString());
|
|
4035
4035
|
handleSelectedFilter(false);
|
|
4036
|
-
if (onSubmit) {
|
|
4036
|
+
if (onSubmit && selectedPath === '/rooms') {
|
|
4037
4037
|
var updatedParamsObject_1 = {};
|
|
4038
4038
|
updatedParams.forEach(function (value, key) {
|
|
4039
4039
|
if (value)
|
|
@@ -4061,8 +4061,7 @@ var useFilterBar = function (_a) {
|
|
|
4061
4061
|
finally { if (e_3) throw e_3.error; }
|
|
4062
4062
|
}
|
|
4063
4063
|
handleSelectedFilter(false);
|
|
4064
|
-
|
|
4065
|
-
return onSubmit
|
|
4064
|
+
return onSubmit && selectedPath === '/rooms'
|
|
4066
4065
|
? onSubmit(newParams)
|
|
4067
4066
|
: (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
|
|
4068
4067
|
}
|
|
@@ -6597,7 +6596,7 @@ var CloseButton = function (_a) {
|
|
|
6597
6596
|
React__default.createElement(IoIosCloseCircleOutline, null)));
|
|
6598
6597
|
};
|
|
6599
6598
|
|
|
6600
|
-
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
|
|
6599
|
+
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";
|
|
6601
6600
|
styleInject(css_248z$9);
|
|
6602
6601
|
|
|
6603
6602
|
var SelectButton = function (_a) {
|
|
@@ -6606,7 +6605,7 @@ var SelectButton = function (_a) {
|
|
|
6606
6605
|
React__default.createElement("span", { className: "select-button-wrapper" },
|
|
6607
6606
|
React__default.createElement("div", null,
|
|
6608
6607
|
React__default.createElement("p", { className: "select-button-label ".concat(active ? 'active' : '') }, label),
|
|
6609
|
-
React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : '') }
|
|
6608
|
+
React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
6610
6609
|
};
|
|
6611
6610
|
|
|
6612
6611
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -6626,7 +6625,7 @@ var SubmitButton = function (_a) {
|
|
|
6626
6625
|
t('submit.label')));
|
|
6627
6626
|
};
|
|
6628
6627
|
|
|
6629
|
-
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 }
|
|
6628
|
+
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
6629
|
styleInject(css_248z$7);
|
|
6631
6630
|
|
|
6632
6631
|
var TabButton = function (_a) {
|
|
@@ -10704,7 +10703,7 @@ var Categories = function (_a) {
|
|
|
10704
10703
|
React__default.createElement("span", null, itm))); }))));
|
|
10705
10704
|
};
|
|
10706
10705
|
|
|
10707
|
-
var css_248z = ".will-root {\n z-index: 999;\n width:
|
|
10706
|
+
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";
|
|
10708
10707
|
styleInject(css_248z);
|
|
10709
10708
|
|
|
10710
10709
|
function FilterBar(_a) {
|