willba-component-library 0.1.11 → 0.1.13

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -75,13 +75,9 @@
     position: relative;
   }
 
-  .isMobileAbsolute {
-    position: absolute;
+  .will-root.isMobileAbsolute {
+    position: relative;
     z-index: 99999;
   }
-
-
-
- 
 }
 

package/src/components/FilterBar/FilterBar.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { format } from 'date-fns'
 
 import Divider from './components/divider/Divider'
-import SelectButton from './components/select-button/SelectButton'
-import SubmitButton from './components/submit-button/SubmitButton'
+import SelectButton from './components/buttons/select-button/SelectButton'
+import SubmitButton from './components/buttons/submit-button/SubmitButton'
 import Calendar from './components/calendar/Calendar'
 import Guests from './components/guests/Guests'
 import Categories from './components/categories/Categories'
@@ -14,7 +15,7 @@ import useFilterBar from './hooks/useFilterBar'
 import './FilterBar.css'
 import '../../themes/Default.css'
 import i18n from '../../i18n'
-import CloseButton from './components/close-button/CloseButton'
+import CloseButton from './components/buttons/close-button/CloseButton'
 import { AgeCategoryType } from './FilterBarTypes'
 
 export interface FilterBarProps {
@@ -22,7 +23,7 @@ export interface FilterBarProps {
   language?: string
   ageCategories?: AgeCategoryType[]
   redirectUrl: string
-  palette: Palette
+  palette?: Palette
 }
 
 export default function FilterBar({
@@ -56,12 +57,16 @@ export default function FilterBar({
   } = useFilterBar({ redirectUrl })
 
   // Scroll in to view
-  const targetElementRef = useRef<HTMLDivElement | null>(null)
+
+  const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
   useEffect(() => {
-    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])
@@ -80,17 +85,25 @@ export default function FilterBar({
         className={`will-root ${selectedFilter ? 'isMobileAbsolute' : ''}`}
         style={themePalette}
       >
-        <div className="will-filter-bar-header" ref={targetElementRef}>
+        <div className="will-filter-bar-header" ref={targetFilterBarRef}>
           <SelectButton
             style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
             label={t('calendar.startDate')}
             onClick={() => handleSelectedFilter(1)}
+            date={
+              calendarRange?.from
+                ? format(calendarRange.from, 'dd-MM-yyyy')
+                : null
+            }
           />
           <Divider />
           <SelectButton
             style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
             label={t('calendar.endDate')}
             onClick={() => handleSelectedFilter(2)}
+            date={
+              calendarRange?.to ? format(calendarRange.to, 'dd-MM-yyyy') : null
+            }
           />
 
           {/* TODO - Add strapi settings to show or hide filter sections */}

package/src/components/FilterBar/components/{close-button → buttons/close-button}/CloseButton.css

@@ -10,17 +10,20 @@
   display: flex;
   align-items: center;
   font-size: 23px;
-  display: none;
+  /* display: none; */
 
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 80px;
+  right: 20px;
 
+  min-height: 35px;
 }
 
 @media (max-width: 960px) {
   .will-filter-bar-close-button {
-    min-height: 35px;
+    top: 10px;
+    right: 10px;
+
     border-radius: 25px;
     margin-left:0;
    

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

@@ -0,0 +1,36 @@
+.will-filter-bar-select-button {
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 15px;
+  text-align: initial;
+}
+
+.will-filter-bar-select-button .select-button-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+ 
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-select-button {
+    margin: 15px 0;
+  }
+
+  .will-filter-bar-select-button .select-button-wrapper {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .will-filter-bar-select-button .select-button-divider {
+    display: none
+  }
+}
+
+

package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import './SelectButton.css'
+
+export default function SelectButton({ label, onClick, style, date }: any) {
+  return (
+    <button
+      className="will-filter-bar-select-button"
+      onClick={onClick}
+      style={style}
+    >
+      <span className="select-button-wrapper">
+        <span className="select-button-label">{label}</span>
+
+        {!!date && (
+          <>
+            <span className="select-button-divider">|</span>
+            <span className="select-button-date"> {date}</span>
+          </>
+        )}
+      </span>
+    </button>
+  )
+}

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
+//import { useTranslation } from 'react-i18next'
 import { DateRange, DayPicker } from 'react-day-picker'
 import { addDays } from 'date-fns'
 import { useMediaQuery } from 'react-responsive'
@@ -18,7 +18,7 @@ export default function Calendar({
   calendarRange,
   setCalendarRange,
 }: CalendarPropsType) {
-  const { t } = useTranslation('filterBar')
+  //const { t } = useTranslation('filterBar')
   const isTablet = useMediaQuery({ maxWidth: 960 })
 
   const defaultCalendarSelected: DateRange = {
@@ -32,18 +32,16 @@ export default function Calendar({
 
   return (
     <div className="will-filter-bar-calendar">
-      <div className="will-calendar-filter-header">
+      {/* <div className="will-calendar-filter-header">
         <h3 className="will-calendar-filter-title">{t('calendar.title')}</h3>
-      </div>
+      </div> */}
       <div className="will-calendar-filter-container">
         <DayPicker
           id="will-calendar"
           mode="range"
           showOutsideDays
-          fixedWeeks
           numberOfMonths={!isTablet ? 2 : 1}
           weekStartsOn={1}
-          max={31}
           defaultMonth={currentMonth}
           selected={calendarRange}
           onSelect={setCalendarRange}

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

@@ -1,20 +0,0 @@
-.will-filter-bar-select-button {
-  width: 100%;
-  height: auto;
-  background-color: transparent;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 15px;
-  text-align: initial;
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-select-button {
-    margin: 15px 0;
-    text-align: center;
-  }
-}
-
-

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

@@ -1,15 +0,0 @@
-import React from 'react'
-
-import './SelectButton.css'
-
-export default function SelectButton({ label, onClick, style }: any) {
-  return (
-    <button
-      className="will-filter-bar-select-button"
-      onClick={onClick}
-      style={style}
-    >
-      {label}
-    </button>
-  )
-}