willba-component-library 0.1.45 → 0.1.47

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

@@ -1,17 +1,22 @@
-export interface AgeCategoryCount {
+export type AgeCategoryCount = {
     [categoryId: string]: number;
-}
-export interface AgeCategoryType {
+};
+export type AgeCategoryType = {
     id: string;
     name: string;
     minVal: number;
     sortOrder: number;
-}
-export interface GuestsCountPropsType {
+};
+export type GuestsCountPropsType = {
     label: string;
     id: number;
     updateGuestsCount: (arg1: string, arg2: number) => void;
     count: number;
     minVal: number;
     sortOrder: number;
+};
+export declare enum FilterSections {
+    CALENDAR = "calendar",
+    GUESTS = "guests",
+    CATEGORIES = "categories"
 }

package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts

@@ -1,3 +1,10 @@
 import React from 'react';
 import './SelectButton.css';
-export declare const SelectButton: ({ label, onClick, style, description }: any) => React.JSX.Element;
+type Props = {
+    label: string;
+    onClick: () => void;
+    description: string;
+    active?: boolean;
+};
+export declare const SelectButton: ({ active, label, onClick, description, }: Props) => React.JSX.Element;
+export {};

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

@@ -7,16 +7,16 @@ type Props = {
     ageCategories?: AgeCategoryType[];
 };
 export declare const useFilterBar: ({ redirectUrl, currentViewApply, ageCategories, }: Props) => {
-    selectedFilter: number | boolean;
+    selectedFilter: string | boolean;
     ageCategoryCounts: AgeCategoryCount;
     categories: number;
     calendarRange: DateRange | undefined;
     selectedPath: string;
     setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
-    setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
+    setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<string | boolean>>;
     setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<AgeCategoryCount>>;
     setCategories: import("react").Dispatch<import("react").SetStateAction<number>>;
-    handleSelectedFilter: (id: number | boolean) => void;
+    handleSelectedFilter: (id: string | boolean) => void;
     handleSubmit: () => string;
     updateGuestsCount: (id: string, newCount: number) => void;
     handleResetFilters: () => void;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 type Props = {
-    selectedFilter: number | boolean;
+    selectedFilter: string | boolean;
 };
 export declare const useScrollInToView: ({ selectedFilter }: Props) => {
     isMobile: boolean;

package/lib/index.d.ts

@@ -32,12 +32,12 @@ interface Palette {
     secondary: string;
 }
 
-interface AgeCategoryType {
+type AgeCategoryType = {
     id: string;
     name: string;
     minVal: number;
     sortOrder: number;
-}
+};
 
 type FilterBarProps = {
     vendor?: string;

package/lib/index.esm.js

@@ -429,6 +429,18 @@ function useTranslation(ns) {
   });
 }
 
+function useTheme(_a) {
+    var palette = _a.palette;
+    var themePalette = {
+        '--will-primary': palette === null || palette === void 0 ? void 0 : palette.primary,
+        '--will-secondary': palette === null || palette === void 0 ? void 0 : palette.secondary,
+    };
+    return themePalette;
+}
+
+var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n\n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n\n  /* Confines */\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}";
+styleInject(css_248z$b);
+
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -3869,18 +3881,6 @@ function setYear(dirtyDate, dirtyYear) {
   return date;
 }
 
-function useTheme(_a) {
-    var palette = _a.palette;
-    var themePalette = {
-        '--will-primary': palette === null || palette === void 0 ? void 0 : palette.primary,
-        '--will-secondary': palette === null || palette === void 0 ? void 0 : palette.secondary,
-    };
-    return themePalette;
-}
-
-var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n\n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n\n  /* Confines */\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}";
-styleInject(css_248z$b);
-
 var parseDates = function (_a) {
     var calendarRange = _a.calendarRange;
     return (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
@@ -3900,6 +3900,13 @@ var parseGuests = function (_a) {
     }, '');
 };
 
+var FilterSections;
+(function (FilterSections) {
+    FilterSections["CALENDAR"] = "calendar";
+    FilterSections["GUESTS"] = "guests";
+    FilterSections["CATEGORIES"] = "categories";
+})(FilterSections || (FilterSections = {}));
+
 var useFilterBar = function (_a) {
     var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories;
     var _b = __read(useState('/events'), 2), selectedPath = _b[0], setSelectedPath = _b[1];
@@ -4071,7 +4078,7 @@ var useScrollInToView = function (_a) {
     var _b = __read(useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
     var targetFilterBarRef = useRef(null);
     useEffect(function () {
-        if (window !== undefined && window.innerWidth > 960) {
+        if (typeof window !== 'undefined' && window.innerWidth > 960) {
             setIsMobile(false);
             return;
         }
@@ -6555,16 +6562,16 @@ var CloseButton = function (_a) {
         React__default__default.createElement(IoIosCloseCircleOutline, null)));
 };
 
-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\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-description {\n  font-weight: 400;\n  opacity: 0.4;\n \n \n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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";
+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";
 styleInject(css_248z$9);
 
 var SelectButton = function (_a) {
-    var label = _a.label, onClick = _a.onClick, style = _a.style, description = _a.description;
-    return (React__default__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style },
+    var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description;
+    return (React__default__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick },
         React__default__default.createElement("span", { className: "select-button-wrapper" },
             React__default__default.createElement("div", null,
-                React__default__default.createElement("p", { className: "select-button-label" }, label),
-                React__default__default.createElement("p", { className: "select-button-description" }, description)))));
+                React__default__default.createElement("p", { className: "select-button-label ".concat(active ? 'active' : '') }, label),
+                React__default__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : '') }, description)))));
 };
 
 // THIS FILE IS AUTO GENERATED
@@ -10673,7 +10680,7 @@ function FilterBar(_a) {
     var t = useTranslation('filterBar').t;
     // Filters
     var _d = useFilterBar({ redirectUrl: redirectUrl, currentViewApply: currentViewApply, ageCategories: ageCategories }), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath;
-    // Default selected tab
+    // Default selected tab when tabs are hidden
     useEffect(function () {
         if (currentViewApply === 'roomFilters') {
             setSelectedPath('/rooms');
@@ -10683,6 +10690,7 @@ function FilterBar(_a) {
     var _e = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _e.isMobile, targetFilterBarRef = _e.targetFilterBarRef;
     // Handle close filter section
     var filtersRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filtersRef;
+    // Parsed data for filter section description
     var parsedDates = parseDates({ calendarRange: calendarRange });
     var parsedGuests = parseGuests({ ageCategoryCounts: ageCategoryCounts, ageCategories: ageCategories });
     return (React__default__default.createElement("div", { className: "will-root", style: themePalette },
@@ -10694,21 +10702,18 @@ function FilterBar(_a) {
                     ? parsedDates
                     : selectedPath === '/rooms'
                         ? t('calendar.roomsLabelPlaceholder')
-                        : t('calendar.eventsLabelPlaceholder'), onClick: function () { return handleSelectedFilter(1); }, style: fontWeightBold(selectedFilter === 1), date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'dd.MM.yyyy') : null }),
+                        : t('calendar.eventsLabelPlaceholder'), onClick: function () { return handleSelectedFilter(FilterSections.CALENDAR); }, active: selectedFilter === FilterSections.CALENDAR }),
             selectedPath === '/rooms' && (React__default__default.createElement(React__default__default.Fragment, null,
                 React__default__default.createElement(Divider, null),
-                React__default__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests ? parsedGuests : t('guests.labelPlaceholder'), onClick: function () { return handleSelectedFilter(2); }, style: fontWeightBold(selectedFilter === 2) }))),
+                React__default__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests ? parsedGuests : t('guests.labelPlaceholder'), onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: selectedFilter === FilterSections.GUESTS }))),
             React__default__default.createElement(SubmitButton, { onClick: handleSubmit })),
         selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container", style: currentViewApply && !isMobile ? { top: 66 } : {} },
             React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
-            selectedFilter === 1 && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef })),
-            selectedFilter === 2 && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),
-            selectedFilter === 3 && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
+            selectedFilter === FilterSections.CALENDAR && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef })),
+            selectedFilter === FilterSections.GUESTS && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),
+            selectedFilter === FilterSections.CATEGORIES && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
 }
 ////////////
-var fontWeightBold = function (input) {
-    return { fontWeight: input ? 'bold' : 'initial' };
-};
 var AGE_CATEGORIES_FALLBACK = [
     {
         id: '1',