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.esm.js
CHANGED
|
@@ -3894,7 +3894,7 @@ var parseGuests = function (_a) {
|
|
|
3894
3894
|
var _b = __read(_a, 2), key = _b[0], value = _b[1];
|
|
3895
3895
|
var ageCategory = ageCategories.find(function (c) { return c.id === key[key.length - 1]; });
|
|
3896
3896
|
if (ageCategory && value) {
|
|
3897
|
-
acc += "".concat(acc ? ' -' : '', " ").concat(ageCategory.name, ": ").concat(value);
|
|
3897
|
+
acc += "".concat(acc ? ' -' : '', " ").concat(ageCategory.name, ": <span style=\"display: inline-block; width: 21px\">").concat(value, "</span>");
|
|
3898
3898
|
}
|
|
3899
3899
|
return acc;
|
|
3900
3900
|
}, '');
|
|
@@ -4013,7 +4013,7 @@ var useFilterBar = function (_a) {
|
|
|
4013
4013
|
var baseUrl = window.location.origin + window.location.pathname;
|
|
4014
4014
|
var updatedUrl = "".concat(baseUrl, "?").concat(updatedParams.toString());
|
|
4015
4015
|
handleSelectedFilter(false);
|
|
4016
|
-
if (onSubmit) {
|
|
4016
|
+
if (onSubmit && selectedPath === '/rooms') {
|
|
4017
4017
|
var updatedParamsObject_1 = {};
|
|
4018
4018
|
updatedParams.forEach(function (value, key) {
|
|
4019
4019
|
if (value)
|
|
@@ -4041,8 +4041,7 @@ var useFilterBar = function (_a) {
|
|
|
4041
4041
|
finally { if (e_3) throw e_3.error; }
|
|
4042
4042
|
}
|
|
4043
4043
|
handleSelectedFilter(false);
|
|
4044
|
-
|
|
4045
|
-
return onSubmit
|
|
4044
|
+
return onSubmit && selectedPath === '/rooms'
|
|
4046
4045
|
? onSubmit(newParams)
|
|
4047
4046
|
: (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
|
|
4048
4047
|
}
|
|
@@ -6577,7 +6576,7 @@ var CloseButton = function (_a) {
|
|
|
6577
6576
|
React__default__default.createElement(IoIosCloseCircleOutline, null)));
|
|
6578
6577
|
};
|
|
6579
6578
|
|
|
6580
|
-
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
|
|
6579
|
+
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";
|
|
6581
6580
|
styleInject(css_248z$9);
|
|
6582
6581
|
|
|
6583
6582
|
var SelectButton = function (_a) {
|
|
@@ -6586,7 +6585,7 @@ var SelectButton = function (_a) {
|
|
|
6586
6585
|
React__default__default.createElement("span", { className: "select-button-wrapper" },
|
|
6587
6586
|
React__default__default.createElement("div", null,
|
|
6588
6587
|
React__default__default.createElement("p", { className: "select-button-label ".concat(active ? 'active' : '') }, label),
|
|
6589
|
-
React__default__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : '') }
|
|
6588
|
+
React__default__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
6590
6589
|
};
|
|
6591
6590
|
|
|
6592
6591
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -6606,7 +6605,7 @@ var SubmitButton = function (_a) {
|
|
|
6606
6605
|
t('submit.label')));
|
|
6607
6606
|
};
|
|
6608
6607
|
|
|
6609
|
-
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 }
|
|
6608
|
+
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 }";
|
|
6610
6609
|
styleInject(css_248z$7);
|
|
6611
6610
|
|
|
6612
6611
|
var TabButton = function (_a) {
|
|
@@ -10684,7 +10683,7 @@ var Categories = function (_a) {
|
|
|
10684
10683
|
React__default__default.createElement("span", null, itm))); }))));
|
|
10685
10684
|
};
|
|
10686
10685
|
|
|
10687
|
-
var css_248z = ".will-root {\n z-index: 999;\n width:
|
|
10686
|
+
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";
|
|
10688
10687
|
styleInject(css_248z);
|
|
10689
10688
|
|
|
10690
10689
|
function FilterBar(_a) {
|