willba-component-library 0.1.11 → 0.1.12

package/README.md

@@ -49,9 +49,9 @@ or you can add the willba-component-library using scripts:
 
 ## Props of FilterBar
 
-| Name          | Value         | Description                                                                                                              |
-| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| redirectUrl   | `"string"`    | Define the URL where the component showld redirect on filtering.                                                         |
-| language      | `"fi" , "en"` | Specify the language, available languages Finnish and English.                                                           |
-| ageCategories | `[{}]`        | Specify age categories for guests filter: [{id: string, name: string, minAge: number , maxAge: number , minVal: number}] |
-| vendor        | `"string"`    | Add vendor name for custom theme.                                                                                        |
+| Name          | Value         | Description                                                                                                               |
+| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| redirectUrl   | `"string"`    | Define the URL where the component showld redirect on filtering.                                                          |
+| language      | `"fi" , "en"` | Specify the language, available languages Finnish and English.                                                            |
+| ageCategories | `[{}]`        | Specify age categories for guests: filter: [{id: string, name: string, minAge: number , maxAge: number , minVal: number}] |
+| palette       | `{}`          | Override color: palette: {primary: string, secondary: string}.                                                            |

package/lib/components/FilterBar/FilterBar.d.ts

@@ -8,6 +8,6 @@ export interface FilterBarProps {
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl: string;
-    palette: Palette;
+    palette?: Palette;
 }
 export default function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;

package/lib/index.d.ts

@@ -45,7 +45,7 @@ interface FilterBarProps {
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl: string;
-    palette: Palette;
+    palette?: Palette;
 }
 declare function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
 

package/lib/index.esm.js

@@ -8087,7 +8087,7 @@ function useFilterBar(_a) {
     };
 }
 
-var css_248z$2 = ".will-root {\r\n  z-index: 99999;\r\n  width: 100%;\r\n  max-height: 100vh;\r\n  position: relative;\r\n \r\n}\r\n\r\n.will-filter-bar {\r\n  box-sizing: border-box;\r\n  position: relative;\r\n}\r\n\r\n.will-filter-bar-underlay {\r\n  background-color: rgba(0,0,0,.8);\r\n  position: absolute;\r\n  /* top:0; */\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  cursor: pointer;\r\n  min-height: 200vh;\r\n  z-index: 88888;\r\n\r\n  transform: translateY(-50%);\r\n}\r\n\r\n/* Header */\r\n.will-filter-bar-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 10px 20px;\r\n  position: relative;\r\n  z-index: 222;\r\n  \r\n  \r\n  border-radius: 40px;\r\n  background-color: var(--will-white);\r\n  box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-header {\r\n    flex-direction: column;\r\n    padding: 20px;\r\n  }\r\n}\r\n\r\n/* Container */\r\n\r\n.will-filter-bar-container {\r\n  background-color: var(--will-white);\r\n  min-height: 100px;\r\n \r\n  padding: 90px 40px 30px 40px;\r\n  position: absolute;\r\n  top: 0;\r\n  z-index: 111;\r\n  border-radius: 25px;\r\n  width: -webkit-fill-available;\r\n  box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-root {   \r\n    overflow-y: auto;\r\n    padding: 40px 10px;\r\n    top: 15px;\r\n    z-index: 0;\r\n  }\r\n\r\n  .will-filter-bar-container {\r\n    margin-top: 20px;\r\n    padding: 30px 40px;\r\n    position: relative;\r\n  }\r\n\r\n  .isMobileAbsolute {\r\n    position: absolute;\r\n    z-index: 99999;\r\n  }\r\n\r\n\r\n\r\n \r\n}\r\n\r\n";
+var css_248z$2 = ".will-root {\r\n  z-index: 99999;\r\n  width: 100%;\r\n  max-height: 100vh;\r\n  position: relative;\r\n \r\n}\r\n\r\n.will-filter-bar {\r\n  box-sizing: border-box;\r\n  position: relative;\r\n}\r\n\r\n.will-filter-bar-underlay {\r\n  background-color: rgba(0,0,0,.8);\r\n  position: absolute;\r\n  /* top:0; */\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  cursor: pointer;\r\n  min-height: 200vh;\r\n  z-index: 88888;\r\n\r\n  transform: translateY(-50%);\r\n}\r\n\r\n/* Header */\r\n.will-filter-bar-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 10px 20px;\r\n  position: relative;\r\n  z-index: 222;\r\n  \r\n  \r\n  border-radius: 40px;\r\n  background-color: var(--will-white);\r\n  box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-header {\r\n    flex-direction: column;\r\n    padding: 20px;\r\n  }\r\n}\r\n\r\n/* Container */\r\n\r\n.will-filter-bar-container {\r\n  background-color: var(--will-white);\r\n  min-height: 100px;\r\n \r\n  padding: 90px 40px 30px 40px;\r\n  position: absolute;\r\n  top: 0;\r\n  z-index: 111;\r\n  border-radius: 25px;\r\n  width: -webkit-fill-available;\r\n  box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-root {   \r\n    overflow-y: auto;\r\n    padding: 40px 10px;\r\n    top: 15px;\r\n    z-index: 0;\r\n  }\r\n\r\n  .will-filter-bar-container {\r\n    margin-top: 20px;\r\n    padding: 30px 40px;\r\n    position: relative;\r\n  }\r\n\r\n  .will-root.isMobileAbsolute {\r\n    position: relative;\r\n    z-index: 99999;\r\n  }\r\n}\r\n\r\n";
 styleInject(css_248z$2);
 
 var css_248z$1 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\r\n\r\n.will-root * {\r\n  font-family: 'Montserrat', sans-serif;\r\n}\r\n\r\n.will-root {\r\n  \r\n  box-sizing: border-box;\r\n  font-size: 14px;\r\n  \r\n  color: #1E1E1E;\r\n\r\n  /* Pallete */\r\n  --will-primary: #374269;\r\n  --will-secondary: #374269;\r\n  --will-grey: #ABA7AF;\r\n  --will-white: #fff;\r\n  --will-onahau: #CDEEFF;\r\n  --will-text: #5A5959;\r\n\r\n  /* Confines */\r\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n\r\n  /* Breakpoints */\r\n\r\n  --will-lg: 1140px;\r\n  --will-md: 960px;\r\n  --will-sm: 600px;\r\n  --will-xl: 1280px;\r\n  --will-xs: 0px;\r\n}\r\n\r\n/* Typography */\r\n\r\n.will-root h1, h2, h3, h4, h5, h6 {\r\n font-weight: 700;\r\n} \r\n\r\n.will-root p, h1, h2, h3, h4, h5, h6, span {\r\n  margin: 0;\r\n  padding: 0;\r\n}";
@@ -10460,12 +10460,14 @@ function FilterBar(_a) {
     // Filters
     var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount;
     // Scroll in to view
-    var targetElementRef = useRef(null);
+    var targetFilterBarRef = useRef(null);
     useEffect(function () {
-        if (targetElementRef.current) {
-            targetElementRef.current.scrollIntoView({
+        if (targetFilterBarRef.current && selectedFilter) {
+            window.scrollTo({
                 behavior: 'smooth',
-                block: 'start',
+                top: targetFilterBarRef.current.getBoundingClientRect().top -
+                    document.body.getBoundingClientRect().top -
+                    30,
             });
         }
     }, [selectedFilter]);
@@ -10474,7 +10476,7 @@ function FilterBar(_a) {
                 handleSelectedFilter(false);
             } })),
         React__default__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
-            React__default__default.createElement("div", { className: "will-filter-bar-header", ref: targetElementRef },
+            React__default__default.createElement("div", { className: "will-filter-bar-header", ref: targetFilterBarRef },
                 React__default__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); } }),
                 React__default__default.createElement(Divider, null),
                 React__default__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); } }),