willba-component-library 0.1.52 → 0.1.54
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 +6 -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.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,7 +4041,7 @@ var useFilterBar = function (_a) {
|
|
|
4041
4041
|
finally { if (e_3) throw e_3.error; }
|
|
4042
4042
|
}
|
|
4043
4043
|
handleSelectedFilter(false);
|
|
4044
|
-
return onSubmit
|
|
4044
|
+
return onSubmit && selectedPath === '/rooms'
|
|
4045
4045
|
? onSubmit(newParams)
|
|
4046
4046
|
: (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
|
|
4047
4047
|
}
|
|
@@ -6576,7 +6576,7 @@ var CloseButton = function (_a) {
|
|
|
6576
6576
|
React__default__default.createElement(IoIosCloseCircleOutline, null)));
|
|
6577
6577
|
};
|
|
6578
6578
|
|
|
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
|
|
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";
|
|
6580
6580
|
styleInject(css_248z$9);
|
|
6581
6581
|
|
|
6582
6582
|
var SelectButton = function (_a) {
|
|
@@ -6585,7 +6585,7 @@ var SelectButton = function (_a) {
|
|
|
6585
6585
|
React__default__default.createElement("span", { className: "select-button-wrapper" },
|
|
6586
6586
|
React__default__default.createElement("div", null,
|
|
6587
6587
|
React__default__default.createElement("p", { className: "select-button-label ".concat(active ? 'active' : '') }, label),
|
|
6588
|
-
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 } })))));
|
|
6589
6589
|
};
|
|
6590
6590
|
|
|
6591
6591
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -6605,7 +6605,7 @@ var SubmitButton = function (_a) {
|
|
|
6605
6605
|
t('submit.label')));
|
|
6606
6606
|
};
|
|
6607
6607
|
|
|
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 }
|
|
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 }";
|
|
6609
6609
|
styleInject(css_248z$7);
|
|
6610
6610
|
|
|
6611
6611
|
var TabButton = function (_a) {
|
|
@@ -10683,7 +10683,7 @@ var Categories = function (_a) {
|
|
|
10683
10683
|
React__default__default.createElement("span", null, itm))); }))));
|
|
10684
10684
|
};
|
|
10685
10685
|
|
|
10686
|
-
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 min-width: auto;\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";
|
|
10687
10687
|
styleInject(css_248z);
|
|
10688
10688
|
|
|
10689
10689
|
function FilterBar(_a) {
|