willba-component-library 0.3.10 → 0.3.11

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -45,6 +45,7 @@
     flex-direction: column;
     padding: 20px;
     border-radius: 25px;
+    overflow: hidden;
   }
 }
 
@@ -53,7 +54,6 @@
 .will-filter-bar-container {
   background-color: var(--will-white);
   min-height: 100px;
-  padding: 20px;
   position: absolute;
   top: 125px;
   z-index: 111;

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -59,21 +59,15 @@ export const Main: Story = {
     tabs: [
       {
         path: '/rooms',
+        label: 'Rooms',
         default: true,
         order: 2,
-        label: {
-          en: 'Rooms',
-          fi: 'Rooms fi',
-        },
       },
       {
         path: '/events',
+        label: 'Events',
         default: false,
         order: 1,
-        label: {
-          en: 'Events',
-          fi: 'Events fi',
-        },
       },
     ],
     outerLoading: false,
@@ -83,61 +77,32 @@ export const Main: Story = {
       data: [
         {
           id: 1,
-          label: [
-            { content: 'Helsinki Center', locale: 'en' },
-            { content: 'Helsinki Keskusta', locale: 'fi' },
-          ],
-          description: [
-            { content: 'Main training facility in downtown', locale: 'en' },
-            { content: 'Pääkoulutuslaitoksemme keskustassa', locale: 'fi' },
-          ],
+          label: 'Helsinki Center',
+          description: 'Main training facility in downtown',
           imageUrl: '',
         },
         {
           id: 2,
-          label: [
-            { content: 'Espoo Campus', locale: 'en' },
-            { content: 'Espoon Kampus', locale: 'fi' },
-          ],
-          description: [
-            { content: 'Modern facilities with sea views', locale: 'en' },
-            { content: 'Modernit tilat merinäköalalla', locale: 'fi' },
-          ],
-          imageUrl: '',
+          label: 'Espoo Campus',
+          description: 'Modern facilities with sea views',
+          imageUrl: null,
         },
         {
           id: 3,
-          label: [
-            { content: 'Tampere Resort', locale: 'en' },
-            { content: 'Tampereen Lomakeskus', locale: 'fi' },
-          ],
-          description: [
-            { content: 'Lakeside retreat with full amenities', locale: 'en' },
-            { content: 'Järvenrannalla sijaitseva lomakeskus', locale: 'fi' },
-          ],
-          imageUrl: '',
+          label: 'Tampere Resort',
+          description: 'Lakeside retreat with full amenities',
+          imageUrl: null,
         },
         {
           id: 4,
-          label: [
-            { content: 'Turku Harbor', locale: 'en' },
-            { content: 'Turun Satama', locale: 'fi' },
-          ],
+          label: 'Turku Harbor',
+          description: 'Modern facilities with sea views',
           imageUrl: null,
         },
         {
           id: 5,
-          label: [
-            { content: 'Oulu North', locale: 'en' },
-            { content: 'Oulun Pohjoinen', locale: 'fi' },
-          ],
-          description: [
-            {
-              content: 'Northern location with winter activities',
-              locale: 'en',
-            },
-            { content: 'Pohjoinen kohde talviaktiviteeteilla', locale: 'fi' },
-          ],
+          label: 'Oulu North',
+          description: 'Northern location with winter activities',
           imageUrl: null,
         },
       ],

package/src/components/FilterBar/FilterBar.tsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useRef } from 'react'
+import {
+  CSSProperties,
+  MutableRefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaSearch } from 'react-icons/fa'
 
@@ -12,7 +18,7 @@ import {
 import { SubmitButton } from '../../core/components'
 import { parseDates } from '../../core/components/calendar/utils'
 
-import { parseGuests, parseLocations } from './utils'
+import { parseGuests, parseLocations, calculateDropdownPosition } from './utils'
 import { FilterBarTypes, FilterSections, Pages } from './FilterBarTypes'
 import { useFilterBar, useScrollInToView } from './hooks'
 import {
@@ -51,6 +57,10 @@ export default function FilterBar({
   const datesButtonRef = useRef<HTMLButtonElement>(null)
   const guestsButtonRef = useRef<HTMLButtonElement>(null)
   const previouslyFocusedButtonRef = useRef<HTMLButtonElement | null>(null)
+  const headerRef = useRef<HTMLDivElement>(null)
+
+  // Dropdown positioning
+  const [dropdownStyle, setDropdownStyle] = useState<CSSProperties>({})
 
   // Filters
   const {
@@ -83,6 +93,22 @@ export default function FilterBar({
   // Handle close filter section
   const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
 
+  // Enhanced handleSelectedFilter with positioning
+  const handleSelectedFilterWithPosition = (filter: FilterSections | false) => {
+    if (filter) {
+      const position = calculateDropdownPosition({
+        filterSection: filter,
+        headerRef,
+        locationsButtonRef,
+        datesButtonRef,
+        guestsButtonRef,
+        isMobile,
+      })
+      setDropdownStyle(position)
+    }
+    handleSelectedFilter(filter)
+  }
+
   // Store previously focused button and restore focus when closing
   useEffect(() => {
     if (!selectedFilter && previouslyFocusedButtonRef.current) {
@@ -105,7 +131,6 @@ export default function FilterBar({
   })
   const parsedLocations = parseLocations({
     selectedLocations,
-    language,
     locationsPlaceholder: t('locations.placeholder'),
     locationsSelectedLabel: t('locations.selected'),
   })
@@ -122,11 +147,7 @@ export default function FilterBar({
             .map((tab, idx) => (
               <TabButton
                 key={`tab-${idx}`}
-                label={
-                  tab.label && language
-                    ? tab.label[language]
-                    : t(`tabs.${tab.path.substring(1)}`)
-                }
+                label={tab.label || t(`tabs.${tab.path.substring(1)}`)}
                 onClick={() => {
                   setSelectedPath(tab.path)
                   handleResetFilters()
@@ -141,7 +162,14 @@ export default function FilterBar({
 
       <div
         className={`will-filter-bar-header ${mode || 'light'}`}
-        ref={tabs?.length === 1 ? targetFilterBarRef : null}
+        ref={(el) => {
+          ;(headerRef as MutableRefObject<HTMLDivElement | null>).current = el
+          if (tabs?.length === 1 && targetFilterBarRef) {
+            ;(
+              targetFilterBarRef as MutableRefObject<HTMLDivElement | null>
+            ).current = el
+          }
+        }}
       >
         {!!locations?.data?.length && (
           <>
@@ -151,7 +179,7 @@ export default function FilterBar({
               description={parsedLocations}
               onClick={() => {
                 previouslyFocusedButtonRef.current = locationsButtonRef.current
-                handleSelectedFilter(FilterSections.LOCATIONS)
+                handleSelectedFilterWithPosition(FilterSections.LOCATIONS)
               }}
               active={!!selectedLocations.length}
               disabled={locations?.disabled}
@@ -175,7 +203,7 @@ export default function FilterBar({
           }
           onClick={() => {
             previouslyFocusedButtonRef.current = datesButtonRef.current
-            handleSelectedFilter(FilterSections.CALENDAR)
+            handleSelectedFilterWithPosition(FilterSections.CALENDAR)
           }}
           active={!!parsedDates}
           ariaExpanded={selectedFilter === FilterSections.CALENDAR}
@@ -192,7 +220,7 @@ export default function FilterBar({
               description={parsedGuests.content}
               onClick={() => {
                 previouslyFocusedButtonRef.current = guestsButtonRef.current
-                handleSelectedFilter(FilterSections.GUESTS)
+                handleSelectedFilterWithPosition(FilterSections.GUESTS)
               }}
               active={!!parsedGuests.data.total}
               ariaExpanded={selectedFilter === FilterSections.GUESTS}
@@ -212,7 +240,10 @@ export default function FilterBar({
       {selectedFilter && (
         <div
           className={`will-filter-bar-container ${mode || 'light'}`}
-          style={(!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {}}
+          style={{
+            ...((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {}),
+            ...dropdownStyle,
+          }}
         >
           {selectedFilter === FilterSections.CALENDAR && (
             <div id="will-dates-filter">

package/src/components/FilterBar/FilterBarTypes.ts

@@ -50,22 +50,11 @@ export enum Pages {
   SALES = '/sales',
 }
 
-type Translations = {
-  en: string
-  fi: string
-  [key: string]: string
-}
-
-export type LocaleTranslation = Array<{
-  content: string
-  locale: string
-}>
-
 export type Tab = {
   path: string
   default?: boolean
   order: number
-  label?: Translations
+  label?: string
 }
 
 export type Locations = {
@@ -76,7 +65,7 @@ export type Locations = {
 
 export type Location = {
   id: number
-  label: LocaleTranslation
-  description?: LocaleTranslation | null
+  label: string
+  description?: string
   imageUrl?: string | null
 }

package/src/components/FilterBar/components/cards/image-card/ImageCard.css

@@ -6,7 +6,6 @@
   padding: 8px 16px;
   cursor: pointer;
   user-select: none;
-  border-radius: 8px;
   min-height: 40px;
 }
 

package/src/components/FilterBar/components/common/FilterSectionHeader.css

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 16px;
 }
 
 .will-filter-section-title {

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

@@ -0,0 +1,3 @@
+.will-dates-filter-container {
+  padding: 0 16px;
+}

package/src/components/FilterBar/components/dates/Dates.tsx

@@ -7,6 +7,8 @@ import { CloseButton } from '../buttons'
 import { FilterSectionHeader } from '../common/FilterSectionHeader'
 import { forwardRef } from 'react'
 
+import './Dates.css'
+
 type Props = {
   ref: React.RefObject<HTMLDivElement>
   onClose?: () => void

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

@@ -7,7 +7,7 @@
   flex-direction: column;
   min-width: 400px;
   gap: 20px;
-  margin-top: 20px;
+  padding: 16px;
 }
 
 @media (max-width: 960px) {

package/src/components/FilterBar/components/locations/Locations.css

@@ -7,7 +7,7 @@
   gap: 10px;
   flex-direction: column;
   min-width: 400px;
-  margin-top: 20px;
+  padding: 16px 0;
 }
 
 @media (max-width: 960px) {

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

@@ -6,7 +6,6 @@ import { ImageCard } from '../cards/image-card/ImageCard'
 import { Location } from '../../FilterBarTypes'
 import { FilterSectionHeader } from '../common/FilterSectionHeader'
 import { CloseButton } from '../../../../core/components'
-import { getLocalizedContent } from '../../utils'
 
 type Props = {
   locations?: Location[]
@@ -72,40 +71,21 @@ export const Locations = forwardRef<HTMLDivElement, Props>(
 
         <div className="will-locations-filter-container">
           {!!(locations?.length && language) &&
-            locations
-              .filter((location) => {
-                const label = getLocalizedContent({
-                  contents: location.label,
-                  locale: language,
-                })
-                return !!label
-              })
-              .map((location, index) => {
-                const label = getLocalizedContent({
-                  contents: location.label,
-                  locale: language,
-                })
-                const description = location.description
-                  ? getLocalizedContent({
-                      contents: location.description,
-                      locale: language,
-                    })
-                  : null
-
-                return (
-                  <ImageCard
-                    key={location.id}
-                    ref={index === 0 ? firstCardRef : null}
-                    title={label}
-                    description={description}
-                    imageUrl={location.imageUrl}
-                    isSelected={selectedLocations.some(
-                      (loc) => loc.id === location.id
-                    )}
-                    onClick={() => handleLocationClick(location)}
-                  />
-                )
-              })}
+            locations.map((location, index) => {
+              return (
+                <ImageCard
+                  key={location.id}
+                  ref={index === 0 ? firstCardRef : null}
+                  title={location.label}
+                  description={location.description}
+                  imageUrl={location.imageUrl}
+                  isSelected={selectedLocations.some(
+                    (loc) => loc.id === location.id
+                  )}
+                  onClick={() => handleLocationClick(location)}
+                />
+              )
+            })}
         </div>
       </div>
     )

package/src/components/FilterBar/utils/calculateDropdownPosition.tsx

@@ -0,0 +1,106 @@
+import { CSSProperties, RefObject } from 'react'
+import { FilterSections } from '../FilterBarTypes'
+
+type CalculateDropdownPositionParams = {
+  filterSection: FilterSections
+  headerRef: RefObject<HTMLDivElement>
+  locationsButtonRef: RefObject<HTMLButtonElement>
+  datesButtonRef: RefObject<HTMLButtonElement>
+  guestsButtonRef: RefObject<HTMLButtonElement>
+  isMobile: boolean
+}
+
+export const calculateDropdownPosition = ({
+  filterSection,
+  headerRef,
+  locationsButtonRef,
+  datesButtonRef,
+  guestsButtonRef,
+  isMobile,
+}: CalculateDropdownPositionParams): CSSProperties => {
+  // On mobile, don't apply any positioning - let CSS handle it naturally
+  // Dropdowns will start from leftmost point with position: relative
+  if (isMobile) {
+    return {}
+  }
+
+  if (!headerRef.current) return {}
+
+  const containerRect = headerRef.current.getBoundingClientRect()
+  const containerLeft = 0
+
+  switch (filterSection) {
+    case FilterSections.LOCATIONS:
+      // Locations: Start from beginning, hug content
+      if (locationsButtonRef.current) {
+        const buttonRect = locationsButtonRef.current.getBoundingClientRect()
+        const relativeLeft = buttonRect.left - containerRect.left
+        return {
+          left: relativeLeft,
+          right: 'auto',
+          width: 'auto',
+        }
+      }
+      break
+
+    case FilterSections.CALENDAR:
+      // Calendar: Two months side-by-side, needs ~650-700px
+      // Start from dates button, but push left if not enough space
+      if (datesButtonRef.current) {
+        const buttonRect = datesButtonRef.current.getBoundingClientRect()
+        const relativeLeft = buttonRect.left - containerRect.left
+        const availableWidth = containerRect.width - relativeLeft
+        const calendarMinWidth = 650
+
+        if (availableWidth < calendarMinWidth) {
+          // Not enough space, align to the right edge
+          return {
+            left: 'auto',
+            right: containerLeft,
+            width: 'auto',
+            maxWidth: `${containerRect.width}px`,
+          }
+        } else {
+          // Enough space, start from dates button
+          return {
+            left: relativeLeft,
+            right: 'auto',
+            width: 'auto',
+          }
+        }
+      }
+      break
+
+    case FilterSections.GUESTS:
+      // Guests: Start from guests button, push left if not enough space
+      if (guestsButtonRef.current) {
+        const buttonRect = guestsButtonRef.current.getBoundingClientRect()
+        const relativeLeft = buttonRect.left - containerRect.left
+        const availableWidth = containerRect.width - relativeLeft
+        const dropdownMinWidth = 350
+
+        if (availableWidth < dropdownMinWidth) {
+          // Not enough space, align to the right
+          return {
+            left: 'auto',
+            right: containerLeft,
+            width: 'auto',
+            maxWidth: `${containerRect.width}px`,
+          }
+        } else {
+          // Enough space, start from button
+          return {
+            left: relativeLeft,
+            right: 'auto',
+            width: 'auto',
+          }
+        }
+      }
+      break
+
+    default:
+      return {}
+  }
+
+  return {}
+}

package/src/components/FilterBar/utils/index.tsx

@@ -1,3 +1,3 @@
 export { parseGuests } from './parseGuests'
 export { parseLocations } from './parseLocations'
-export { getLocalizedContent } from './getLocalizedContent'
+export { calculateDropdownPosition } from './calculateDropdownPosition'

package/src/components/FilterBar/utils/parseLocations.tsx

@@ -1,16 +1,14 @@
 import { Location } from '../FilterBarTypes'
-import { getLocalizedContent } from './getLocalizedContent'
 
 type Props = {
   selectedLocations: Location[]
-  language: string
   locationsPlaceholder: string
   locationsSelectedLabel?: string
 }
 
 export const parseLocations = ({
   selectedLocations,
-  language,
+
   locationsPlaceholder,
   locationsSelectedLabel = 'locations',
 }: Props) => {
@@ -19,10 +17,8 @@ export const parseLocations = ({
   }
 
   if (selectedLocations.length === 1) {
-    const translation = getLocalizedContent({
-      contents: selectedLocations[0].label,
-      locale: language,
-    })
+    const translation = selectedLocations[0].label
+
     if (!translation) {
       return locationsPlaceholder
     }

package/src/components/FilterBar/utils/getLocalizedContent.tsx

@@ -1,21 +0,0 @@
-import { LocaleTranslation } from '../FilterBarTypes'
-
-type Props = {
-  contents: LocaleTranslation
-  locale: string
-  fallbackLocale?: string
-}
-
-export const getLocalizedContent = ({
-  contents,
-  locale,
-  fallbackLocale = 'en',
-}: Props): string | undefined => {
-  const preferred = contents.find((content) => content.locale === locale)
-  if (preferred) return preferred.content
-
-  const fallback = contents.find((content) => content.locale === fallbackLocale)
-  if (fallback) return fallback.content
-
-  return contents[0]?.content
-}