willba-component-library 0.1.52 → 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 -7
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +7 -7
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +7 -7
- 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 -3
- 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,7 +4061,7 @@ var useFilterBar = function (_a) {
|
|
|
4061
4061
|
finally { if (e_3) throw e_3.error; }
|
|
4062
4062
|
}
|
|
4063
4063
|
handleSelectedFilter(false);
|
|
4064
|
-
return onSubmit
|
|
4064
|
+
return onSubmit && selectedPath === '/rooms'
|
|
4065
4065
|
? onSubmit(newParams)
|
|
4066
4066
|
: (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
|
|
4067
4067
|
}
|
|
@@ -6596,7 +6596,7 @@ var CloseButton = function (_a) {
|
|
|
6596
6596
|
React__default.createElement(IoIosCloseCircleOutline, null)));
|
|
6597
6597
|
};
|
|
6598
6598
|
|
|
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
|
|
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";
|
|
6600
6600
|
styleInject(css_248z$9);
|
|
6601
6601
|
|
|
6602
6602
|
var SelectButton = function (_a) {
|
|
@@ -6605,7 +6605,7 @@ var SelectButton = function (_a) {
|
|
|
6605
6605
|
React__default.createElement("span", { className: "select-button-wrapper" },
|
|
6606
6606
|
React__default.createElement("div", null,
|
|
6607
6607
|
React__default.createElement("p", { className: "select-button-label ".concat(active ? 'active' : '') }, label),
|
|
6608
|
-
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 } })))));
|
|
6609
6609
|
};
|
|
6610
6610
|
|
|
6611
6611
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -6625,7 +6625,7 @@ var SubmitButton = function (_a) {
|
|
|
6625
6625
|
t('submit.label')));
|
|
6626
6626
|
};
|
|
6627
6627
|
|
|
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 }
|
|
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 }";
|
|
6629
6629
|
styleInject(css_248z$7);
|
|
6630
6630
|
|
|
6631
6631
|
var TabButton = function (_a) {
|
|
@@ -10703,7 +10703,7 @@ var Categories = function (_a) {
|
|
|
10703
10703
|
React__default.createElement("span", null, itm))); }))));
|
|
10704
10704
|
};
|
|
10705
10705
|
|
|
10706
|
-
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";
|
|
10707
10707
|
styleInject(css_248z);
|
|
10708
10708
|
|
|
10709
10709
|
function FilterBar(_a) {
|