willba-component-library 0.0.62 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -19,7 +19,8 @@
     "i18next": "^23.4.4",
     "react-day-picker": "^8.8.0",
     "react-i18next": "^13.1.1",
-    "react-icons": "^4.10.1"
+    "react-icons": "^4.10.1",
+    "react-responsive": "^9.0.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/components/FilterBar/FilterBar.css

@@ -1,9 +1,24 @@
+.will-root {
+  position: relative;
+}
+
 .will-filter-bar {
   box-sizing: border-box;
-  max-width: 1100px;
   position: relative;
 }
 
+.will-filter-bar-underlay {
+  background-color: rgba(0,0,0,.6);
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  min-height: 100vh;
+}
+
+/* Header */
 .will-filter-bar-header {
   display: flex;
   justify-content: space-between;
@@ -11,11 +26,21 @@
   position: relative;
   z-index: 222;
   
+  
   border-radius: 40px;
   background-color: var(--will-white);
   box-shadow: var(--will-box-shadow);
 }
 
+@media (max-width: 1024px) {
+  .will-filter-bar-header {
+    flex-direction: column;
+    padding: 20px;
+  }
+}
+
+/* Container */
+
 .will-filter-bar-container {
   background-color: var(--will-white);
   min-height: 100px;
@@ -29,11 +54,11 @@
   box-shadow: var(--will-box-shadow);
 }
 
-.will-filter-bar-underlay {
-  background-color: red;
-  position: absolute;
-  top:0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
+@media (max-width: 1024px) {
+  .will-filter-bar-container {
+    margin-top: 20px;
+    padding: 30px 40px;
+    position: initial;
+  }
+}
+

package/src/components/FilterBar/FilterBar.tsx

@@ -48,8 +48,16 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
   } = useFilterBar()
 
   return (
-    <div className={`will-root ${themeClass}`}>
-      <div className={`will-filter-bar will-filter-bar-underlay`}>
+    <>
+      {selectedFilter && (
+        <div
+          className={`will-filter-bar will-filter-bar-underlay`}
+          onClick={() => {
+            handleSelectedFilter(false)
+          }}
+        />
+      )}
+      <div className={`will-root ${themeClass}`}>
         <div className="will-filter-bar-header">
           <SelectButton
             style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
@@ -68,12 +76,12 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
             onClick={() => handleSelectedFilter(3)}
             style={fontWigthBold(selectedFilter === 3)}
           />
-          <Divider />
+          {/* <Divider />
           <SelectButton
             label={t('categories.label')}
             onClick={() => handleSelectedFilter(4)}
             style={fontWigthBold(selectedFilter === 4)}
-          />
+          /> */}
           <SubmitButton onClick={handleSubmit} />
         </div>
 
@@ -104,7 +112,7 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
           </div>
         )}
       </div>
-    </div>
+    </>
   )
 }
 

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

@@ -35,7 +35,6 @@
   border: 1px solid var(--will-primary);
   border-radius: 50%;
   left: 25;
- 
 }
 
 .will-calendar-filter-container .rdp-month .rdp-nav svg {
@@ -60,3 +59,13 @@
   background-color: var(--will-primary);
   opacity: 1;
 }
+
+@media (max-width: 1024px) {
+  .will-calendar-filter-container .rdp-month .rdp-nav {
+    border: none;
+    border-radius: initial;
+    
+  }
+}
+
+

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

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DateRange, DayPicker } from 'react-day-picker'
 import { addDays } from 'date-fns'
+import { useMediaQuery } from 'react-responsive'
 
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
@@ -10,6 +11,7 @@ const currentMonth = new Date()
 
 export default function Calendar({ calendarRange, setCalendarRange }: any) {
   const { t } = useTranslation('filterBar')
+  const isTablet = useMediaQuery({ maxWidth: 1024 })
 
   const defaultCalendarSelected: DateRange = {
     from: currentMonth,
@@ -31,7 +33,7 @@ export default function Calendar({ calendarRange, setCalendarRange }: any) {
           mode="range"
           showOutsideDays
           fixedWeeks
-          numberOfMonths={2}
+          numberOfMonths={!isTablet ? 2 : 1}
           weekStartsOn={1}
           max={31}
           defaultMonth={currentMonth}

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

@@ -3,4 +3,13 @@
   margin: 0 10px;
   height: 35px;
   background-color: #384265;
+}
+
+@media (max-width: 1024px) {
+  .will-filter-bar-divider {
+    width: 100%;
+    margin: 0 10px;
+    height: 1px;
+    background-color: #384265;
+  }
 }

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

@@ -9,3 +9,12 @@
   font-size: 15px;
   text-align: initial;
 }
+
+@media (max-width: 1024px) {
+  .will-filter-bar-select-button {
+    margin: 15px 0;
+    text-align: center;
+  }
+}
+
+

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

@@ -16,4 +16,12 @@
 
 .will-filter-bar-submit-button span {
  margin-right: 10px;
-}
+ display: flex;
+}
+
+@media (max-width: 1024px) {
+  .will-filter-bar-submit-button {
+    justify-content: center;
+    margin-bottom: 25px;
+  }
+}

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

@@ -10,7 +10,7 @@ export default function SubmitButton({ onClick }: any) {
   return (
     <button className="will-filter-bar-submit-button" onClick={onClick}>
       <span>
-        {/* <FontAwesomeIcon icon={faSearch} /> */} <FaSearch />
+        <FaSearch />
       </span>
       {t('submit.label')}
     </button>

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

@@ -9,7 +9,7 @@ export default function useFilterBar() {
   const [guestsKids, setGuestsKids] = useState(0)
   const [categories, setCategories] = useState(0)
 
-  const handleSelectedFilter = (id: any) => {
+  const handleSelectedFilter = (id: number | boolean) => {
     setSelectedFilter(id)
   }
 

package/src/themes/Default.css

@@ -21,6 +21,14 @@
 
   /* Confines */
   --will-box-shadow: 0px 6px 11px 0px #a7a4a480;
+
+  /* Breakpoints */
+
+  --will-lg: 1140px;
+  --will-md: 960px;
+  --will-sm: 600px;
+  --will-xl: 1280px;
+  --will-xs: 0px;
 }
 
 /* Typography */