willba-component-library 0.3.20 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/FilterBar.tsx

@@ -11,7 +11,7 @@ import '../../themes/Default.css'
 import './FilterBar.css'
 
 export const FilterBar = ({
-  language = LANGUAGE_FALLBACK,
+  language,
   ageCategories,
   redirectUrl = REDIRECT_URL_FALLBACK,
   palette,
@@ -62,4 +62,3 @@ export const FilterBar = ({
 ////////////
 
 const REDIRECT_URL_FALLBACK = 'http://localhost:3000/'
-const LANGUAGE_FALLBACK = 'en'

package/src/components/FilterBar/components/FilterControls/FilterControls.tsx

@@ -70,7 +70,7 @@ export const FilterControls = () => {
         }
       }}
     >
-      {!!locations?.data?.length && (
+      {locations?.data?.length && locations.data.length > 1 && (
         <>
           <SelectButton
             ref={(el) => (buttonRefs.current[FilterSections.LOCATIONS] = el)}

package/src/components/FilterBar/components/FilterPanels/Dates/Dates.css

@@ -1,3 +1,9 @@
 .will-dates-filter-container {
-  padding: 0 16px 16px 16px;
+  padding: 0 30px 16px 30px;
+}
+
+@media (max-width: 960px) {
+  .will-dates-filter-container {
+    padding: 0 20px 16px 20px;
+  }
 }

package/src/components/FilterBar/components/FilterPanels/FilterPanels.tsx

@@ -84,7 +84,6 @@ export const FilterPanels = () => {
             autoFocus
             ref={filterSectionRef}
             locations={locations?.data}
-            language={language}
             selectedLocations={selectedLocations}
             setSelectedLocations={setSelectedLocations}
             multiSelect={locations?.multiSelect}

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

@@ -7,12 +7,13 @@
   flex-direction: column;
   min-width: 400px;
   gap: 20px;
-  padding: 0 16px 16px 16px;
+  padding: 0 30px 16px 30px;
 }
 
 @media (max-width: 960px) {
   .will-guests-filter-container {
     min-width: auto;
+    padding: 0 20px 16px 20px;
   }
 }
 

package/src/components/FilterBar/components/FilterPanels/Locations/Locations.tsx

@@ -10,7 +10,6 @@ import './Locations.css'
 
 type Props = {
   locations?: Location[]
-  language?: string
   selectedLocations: Location[]
   setSelectedLocations: (locations: Location[]) => void
   autoFocus?: boolean
@@ -22,7 +21,6 @@ export const Locations = forwardRef<HTMLDivElement, Props>(
   (
     {
       locations,
-      language,
       selectedLocations,
       setSelectedLocations,
       autoFocus,
@@ -71,7 +69,7 @@ export const Locations = forwardRef<HTMLDivElement, Props>(
         />
 
         <div className="will-locations-filter-container">
-          {!!(locations?.length && language) &&
+          {!!locations?.length &&
             locations.map((location, index) => {
               return (
                 <ImageCard

package/src/components/FilterBar/components/FilterPanels/SectionHeader/SectionHeader.css

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
+  padding: 16px 30px;
 }
 
 .will-filter-section-title {
@@ -24,6 +24,10 @@
 }
 
 @media (max-width: 960px) {
+  .will-filter-section-header {
+    padding: 16px 20px;
+  }
+
   .will-filter-section-title {
     font-size: 18px;
   }

package/src/components/FilterBar/components/FilterTabs/FilterTabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { useTranslation } from 'react-i18next'
 
@@ -15,33 +15,36 @@ export const FilterTabs = () => {
     selectedPath,
     mode,
     tabs,
+    tabsRef,
     handleSelectedFilter,
     setSelectedPath,
     handleResetFilters,
-    //
-    tabsRef,
   } = useFilterBar()
 
+  const sortedTabs = useMemo(
+    () => [...(tabs ?? [])].sort((a, b) => a.order - b.order),
+    [tabs]
+  )
+
+  const handleTabClick = (path: string) => {
+    setSelectedPath(path)
+    handleResetFilters()
+    handleSelectedFilter(false)
+  }
+
+  if (sortedTabs.length <= 1) return null
+
   return (
-    tabs &&
-    tabs.length > 1 && (
-      <div className="will-filter-bar-tabs" ref={tabsRef}>
-        {tabs
-          .sort((a, b) => a.order - b.order)
-          .map((tab, idx) => (
-            <TabButton
-              key={`tab-${idx}`}
-              label={tab.label || t(`tabs.${tab.path.substring(1)}`)}
-              onClick={() => {
-                setSelectedPath(tab.path)
-                handleResetFilters()
-                handleSelectedFilter(false)
-              }}
-              active={selectedPath === tab.path}
-              mode={mode}
-            />
-          ))}
-      </div>
-    )
+    <div className="will-filter-bar-tabs" ref={tabsRef}>
+      {sortedTabs.map((tab) => (
+        <TabButton
+          key={tab.path}
+          label={tab.label || t(`tabs.${tab.path.slice(1)}`)}
+          onClick={() => handleTabClick(tab.path)}
+          active={selectedPath === tab.path}
+          mode={mode}
+        />
+      ))}
+    </div>
   )
 }

package/src/components/FilterBar/components/ImageCard/ImageCard.css

@@ -3,7 +3,7 @@
   gap: 20px;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 16px;
+  padding: 8px 30px;
   cursor: pointer;
   user-select: none;
   min-height: 40px;
@@ -22,3 +22,9 @@
   height: 68px;
   object-fit: cover;
 }
+
+@media (max-width: 960px) {
+  .will-image-card {
+    padding: 8px 20px;
+  }
+}

package/src/components/FilterBar/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useScrollInToView } from './useScrollInToView'
 export { useFilterState } from './useFilterState'
 export { useFilterActions } from './useFilterActions'
-export { useFilterUi } from './useFilterUi'
+export { useFilterRefs } from './useFilterRefs'
 export { usePanelPosition } from './usePanelPosition'

package/src/components/FilterBar/hooks/{useFilterUi.tsx → useFilterRefs.tsx}

@@ -2,7 +2,7 @@ import { useRef } from 'react'
 
 import { useScrollInToView } from './useScrollInToView'
 
-export const useFilterUi = (selectedFilter: string | boolean) => {
+export const useFilterRefs = (selectedFilter: string | boolean) => {
   const buttonRefs = useRef<Record<string, HTMLButtonElement | null>>({})
   const panelRef = useRef<HTMLDivElement | null>(null)
   const previouslyFocusedButtonRef = useRef<HTMLButtonElement | null>(null)

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

@@ -39,7 +39,7 @@ export const usePanelPosition = ({
     const containerRect = container.getBoundingClientRect()
     const buttonRect = button.getBoundingClientRect()
 
-    const buttonLeft = buttonRect.left - containerRect.left
+    const buttonLeft = buttonRect.left - containerRect.left - 30 // Offset by 30px to account for controls section spacing
 
     const left = Math.max(
       0,

package/src/components/FilterBar/providers/FilterBarProvider.tsx

@@ -9,7 +9,7 @@ import React, {
 import { DateRange } from 'react-day-picker'
 
 import { AgeCategoryCount, Location, FilterBarTypes } from '../FilterBarTypes'
-import { useFilterActions, useFilterState, useFilterUi } from '../hooks'
+import { useFilterActions, useFilterState, useFilterRefs } from '../hooks'
 
 type FilterBarProviderProps = PropsWithChildren<FilterBarTypes>
 
@@ -96,7 +96,7 @@ export const FilterBarProvider = ({
     setInnerLoading,
   })
 
-  const filterUi = useFilterUi(selectedFilter)
+  const filterRefs = useFilterRefs(selectedFilter)
 
   const contextValue = useMemo(
     () => ({
@@ -129,7 +129,7 @@ export const FilterBarProvider = ({
       outerLoading,
       locations,
 
-      ...filterUi,
+      ...filterRefs,
     }),
     [
       selectedFilter,
@@ -150,9 +150,9 @@ export const FilterBarProvider = ({
       tabs,
       outerLoading,
       locations,
-      filterUi.isMobile,
-      filterUi.tabsRef,
-      filterUi.filtersRef,
+      filterRefs.isMobile,
+      filterRefs.tabsRef,
+      filterRefs.filtersRef,
     ]
   )