willba-component-library 0.0.81 → 0.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.81",
+  "version": "0.0.83",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/FilterBar.css

@@ -1,8 +1,9 @@
 .will-root {
   z-index: 99999;
   width: 100%;
-  max-height: calc(100vh - 56px);
+  max-height: 100vh;
   position: relative;
+  overflow-y: auto;
 }
 
 .will-filter-bar {
@@ -36,7 +37,7 @@
   box-shadow: var(--will-box-shadow);
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 960px) {
   .will-filter-bar-header {
     flex-direction: column;
     padding: 20px;
@@ -58,11 +59,21 @@
   box-shadow: var(--will-box-shadow);
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 960px) {
+  .will-root {   
+    position: absolute;
+    padding: 40px 10px;
+    top: 15px;
+  }
+
   .will-filter-bar-container {
     margin-top: 20px;
     padding: 30px 40px;
     position: initial;
   }
+
+
+
+ 
 }
 

package/src/components/FilterBar/FilterBar.tsx

@@ -15,6 +15,7 @@ import { AgeCategoryType } from './FilterBarTypes'
 import './FilterBar.css'
 import '../../themes/Default.css'
 import i18n from '../../i18n'
+import CloseButton from './components/close-button/CloseButton'
 
 interface FilterBarProps {
   vendor?: string
@@ -25,7 +26,7 @@ interface FilterBarProps {
 export default function FilterBar({
   vendor,
   language,
-  ageCategories,
+  ageCategories = ageCategoriesFallback,
 }: FilterBarProps) {
   const themeClass = useTheme({ vendor })
   const [rerenderKey, setRerenderKey] = useState(0)
@@ -33,7 +34,6 @@ export default function FilterBar({
   useEffect(() => {
     i18n.changeLanguage(language)
 
-    // Trigger a re-render by updating the rerenderKey
     setRerenderKey((prevKey) => prevKey + 1)
   }, [language])
 
@@ -49,6 +49,7 @@ export default function FilterBar({
     handleSelectedFilter,
     handleSubmit,
     updateGuestsCount,
+    handleResetFilters,
   } = useFilterBar(ageCategories)
 
   return (
@@ -88,6 +89,8 @@ export default function FilterBar({
             style={fontWigthBold(selectedFilter === 4)}
           /> */}
           <SubmitButton onClick={handleSubmit} />
+
+          <CloseButton handleClose={handleResetFilters} />
         </div>
 
         {selectedFilter && (
@@ -121,3 +124,20 @@ export default function FilterBar({
 const fontWigthBold = (input: boolean) => {
   return { fontWeight: input ? 'bold' : 'initial' }
 }
+
+const ageCategoriesFallback = [
+  {
+    id: '1',
+    name: 'Adults',
+    minAge: null,
+    maxAge: 6,
+    minVal: 1,
+  },
+  {
+    id: '2',
+    name: 'Kids',
+    minAge: 6,
+    maxAge: 17,
+    minVal: 0,
+  },
+]

package/src/components/FilterBar/components/calendar/Calendar.css

@@ -65,7 +65,7 @@
   opacity: 1;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 960px) {
   .will-calendar-filter-container .rdp-month .rdp-nav {
     border: none;
     border-radius: initial;

package/src/components/FilterBar/components/close-button/CloseButton.css

@@ -0,0 +1,25 @@
+.will-filter-bar-close-button {
+  width: auto;
+  height: auto;
+  background-color: var(--will-grey);
+  color: var(--will-white);
+  padding: 2px 7px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+  font-size: 25px;
+  margin-left: 15px;
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-close-button {
+    min-height: 35px;
+    border-radius: 25px;
+    margin-left:0;
+    margin-bottom: 25px;
+    display: flex;
+    justify-content: center;
+  }
+}

package/src/components/FilterBar/components/close-button/CloseButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { IoIosCloseCircleOutline } from 'react-icons/io'
+
+import './CloseButton.css'
+
+interface CloseButtonPropsType {
+  handleClose: () => void
+}
+
+export default function CloseButton({ handleClose }: CloseButtonPropsType) {
+  return (
+    <button className="will-filter-bar-close-button" onClick={handleClose}>
+      <IoIosCloseCircleOutline />
+    </button>
+  )
+}

package/src/components/FilterBar/components/divider/Divider.css

@@ -5,7 +5,7 @@
   background-color: #384265;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 960px) {
   .will-filter-bar-divider {
     width: 100%;
     margin: 0 10px;

package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css

@@ -44,7 +44,7 @@
   cursor: pointer;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 960px) {
 
   .will-guests-filter-inner {
     width: 100%;

package/src/components/FilterBar/components/guests/Guests.css

@@ -21,7 +21,7 @@
 }
 
 
-@media (max-width: 1024px) {
+@media (max-width: 960px) {
   .will-guests-filter-container {
    margin-top: 15px;
   }

package/src/components/FilterBar/components/select-button/SelectButton.css

@@ -10,7 +10,7 @@
   text-align: initial;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 960px) {
   .will-filter-bar-select-button {
     margin: 15px 0;
     text-align: center;

package/src/components/FilterBar/components/submit-button/SubmitButton.css

@@ -19,7 +19,7 @@
  display: flex;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 960px) {
   .will-filter-bar-submit-button {
     justify-content: center;
     margin-bottom: 25px;

package/src/components/FilterBar/hooks/useFilterBar.tsx

@@ -9,8 +9,6 @@ export default function useFilterBar(ageCategories: any) {
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
 
   const [categories, setCategories] = useState<number>(0)
-
-  //
   const [ageCategoryCounts, setAgeCategoryCounts] = useState<AgeCategoryCount>(
     {}
   )
@@ -22,8 +20,6 @@ export default function useFilterBar(ageCategories: any) {
     }))
   }
 
-  //
-
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
 
@@ -82,6 +78,12 @@ export default function useFilterBar(ageCategories: any) {
     }
   }, [selectedFilter])
 
+  const handleResetFilters = () => {
+    setAgeCategoryCounts({})
+    handleSubmit()
+    setSelectedFilter(false)
+  }
+
   return {
     selectedFilter,
     ageCategoryCounts,
@@ -93,7 +95,7 @@ export default function useFilterBar(ageCategories: any) {
     setCategories,
     handleSelectedFilter,
     handleSubmit,
-
     updateGuestsCount,
+    handleResetFilters,
   }
 }