willba-component-library 0.2.89 → 0.2.91
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 +9 -15
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +9 -15
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +9 -15
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.css +1 -1
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.css +3 -4
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css +6 -2
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx +28 -2
- package/src/components/FilterBar/hooks/useFilterBar.tsx +0 -12
package/lib/index.js
CHANGED
|
@@ -11724,16 +11724,6 @@ var useFilterBar = function (_a) {
|
|
|
11724
11724
|
setAgeCategoryCounts(ageCategoryCountsParam);
|
|
11725
11725
|
setCategories(parsedCategories);
|
|
11726
11726
|
}, []);
|
|
11727
|
-
React__default.useEffect(function () {
|
|
11728
|
-
// Handle hide scroll bar on mobile
|
|
11729
|
-
if (typeof window === 'undefined')
|
|
11730
|
-
return;
|
|
11731
|
-
document.body.style.overflow =
|
|
11732
|
-
selectedFilter && window.innerWidth < 960 ? 'hidden' : 'visible';
|
|
11733
|
-
return function () {
|
|
11734
|
-
document.body.style.overflow = 'visible';
|
|
11735
|
-
};
|
|
11736
|
-
}, [selectedFilter]);
|
|
11737
11727
|
React__default.useEffect(function () {
|
|
11738
11728
|
if (typeof window === 'undefined')
|
|
11739
11729
|
return;
|
|
@@ -11870,7 +11860,7 @@ var useScrollInToView = function (_a) {
|
|
|
11870
11860
|
return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
|
|
11871
11861
|
};
|
|
11872
11862
|
|
|
11873
|
-
var css_248z$7 = ".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
|
|
11863
|
+
var css_248z$7 = ".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 color: var(--will-black);\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n \n color: var(--will-black);\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n min-height: 19px;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\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: 700;\n font-size: 15px;\n opacity: 1;\n\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";
|
|
11874
11864
|
styleInject(css_248z$7);
|
|
11875
11865
|
|
|
11876
11866
|
var SelectButton = function (_a) {
|
|
@@ -11890,7 +11880,7 @@ var TabButton = function (_a) {
|
|
|
11890
11880
|
return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
11891
11881
|
};
|
|
11892
11882
|
|
|
11893
|
-
var css_248z$5 = ".will-guests-filter-label, .will-guests-filter-count {\n font-size: 18px;\n color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 30px;\n}\n\n.will-guests-filter-label {\n display: block;\n font-weight: 600;\n margin-bottom: 10px;\n \n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-count {\n margin: 0 10px;\n min-width: 30px;\n text-align: center;\n}\n\n.will-guests-filter-counter-button {\n
|
|
11883
|
+
var css_248z$5 = ".will-guests-filter-label, .will-guests-filter-count {\n font-size: 18px;\n color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 30px;\n}\n\n.will-guests-filter-label {\n display: block;\n font-weight: 600;\n margin-bottom: 10px;\n \n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-count {\n margin: 0 10px;\n min-width: 30px;\n text-align: center;\n}\n\n.will-guests-filter-counter-button {\n \n border-radius: 50%;\n background-color: transparent;\n border: 1px solid var(--will-grey);\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\n color: var(--will-black);\n\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n\n .will-guests-filter-inner {\n width: 100%;\n margin: 15px 0;\n justify-content: space-between;\n }\n}";
|
|
11894
11884
|
styleInject(css_248z$5);
|
|
11895
11885
|
|
|
11896
11886
|
function GuestCount(_a) {
|
|
@@ -11915,9 +11905,13 @@ function GuestCount(_a) {
|
|
|
11915
11905
|
cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
|
|
11916
11906
|
paddingBottom: '4px',
|
|
11917
11907
|
opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
|
|
11918
|
-
} },
|
|
11908
|
+
} },
|
|
11909
|
+
React__default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11910
|
+
React__default.createElement("path", { d: "M4 10H16", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))),
|
|
11919
11911
|
React__default.createElement("span", { className: "will-guests-filter-count" }, count),
|
|
11920
|
-
React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
|
|
11912
|
+
React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
|
|
11913
|
+
React__default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11914
|
+
React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))));
|
|
11921
11915
|
}
|
|
11922
11916
|
|
|
11923
11917
|
var css_248z$4 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-title {\n font-size: 22px;\n margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n font-size: 15px;\n font-weight: 500;\n color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n display: flex;\n flex-direction: column;\n min-width: 400px;\n}\n\n\n@media (max-width: 960px) {\n .will-guests-filter-title {\n font-size: 18px;\n }\n\n .will-guests-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}";
|
|
@@ -11962,7 +11956,7 @@ var Categories = function (_a) {
|
|
|
11962
11956
|
React__default.createElement("span", null, itm))); }))));
|
|
11963
11957
|
};
|
|
11964
11958
|
|
|
11965
|
-
var css_248z$1 = ".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-root.is-full-width {\n width: 100%;\n min-width: auto;\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 \n}\n\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:
|
|
11959
|
+
var css_248z$1 = ".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-root.is-full-width {\n width: 100%;\n min-width: auto;\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 \n}\n\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: 45px 20px;\n position: relative;\n }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n box-shadow: var(--will-box-shadow-dark)\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n box-shadow: var(--will-box-shadow-light)\n}\n\n";
|
|
11966
11960
|
styleInject(css_248z$1);
|
|
11967
11961
|
|
|
11968
11962
|
function FilterBar(_a) {
|