willba-component-library 0.3.4 → 0.3.6

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

@@ -4,6 +4,9 @@ import { useTranslation } from 'react-i18next'
 import './Locations.css'
 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[]
@@ -40,7 +43,9 @@ export const Locations = forwardRef<HTMLDivElement, Props>(
     const handleLocationClick = (location: Location) => {
       if (multiSelect) {
         // Multi-select: toggle location in array
-        const isSelected = selectedLocations.some((loc) => loc.id === location.id)
+        const isSelected = selectedLocations.some(
+          (loc) => loc.id === location.id
+        )
 
         if (isSelected) {
           // Remove location if already selected
@@ -60,23 +65,47 @@ export const Locations = forwardRef<HTMLDivElement, Props>(
 
     return (
       <div className="will-filter-bar-locations" ref={ref}>
-        <h3 className="will-locations-filter-title">{t('locations.title')}</h3>
+        <FilterSectionHeader
+          title={t('locations.title')}
+          action={onClose && <CloseButton handleClose={onClose} />}
+        />
 
         <div className="will-locations-filter-container">
           {!!(locations?.length && language) &&
             locations
-              .filter((location) => location?.label?.[language])
-              .map((location, index) => (
-                <ImageCard
-                  key={location.id}
-                  ref={index === 0 ? firstCardRef : null}
-                  title={location.label[language]}
-                  description={location.description?.[language]}
-                  imageUrl={location.imageUrl}
-                  isSelected={selectedLocations.some((loc) => loc.id === location.id)}
-                  onClick={() => handleLocationClick(location)}
-                />
-              ))}
+              .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)}
+                  />
+                )
+              })}
         </div>
       </div>
     )

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

@@ -0,0 +1,21 @@
+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
+}

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

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

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

@@ -1,4 +1,5 @@
 import { Location } from '../FilterBarTypes'
+import { getLocalizedContent } from './getLocalizedContent'
 
 type Props = {
   selectedLocations: Location[]
@@ -18,7 +19,10 @@ export const parseLocations = ({
   }
 
   if (selectedLocations.length === 1) {
-    const translation = selectedLocations[0]?.label?.[language]
+    const translation = getLocalizedContent({
+      contents: selectedLocations[0].label,
+      locale: language,
+    })
     if (!translation) {
       return locationsPlaceholder
     }

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

@@ -5,6 +5,9 @@
 }
 
 /* Calendar overrides */
+.will-calendar-filter-container .rdp {
+  margin: 0;
+}
 
 .will-calendar-filter-container .DayPicker {
   font-size: 25px;
@@ -31,14 +34,13 @@
   color: var(--will-primary);
 }
 
-
 .will-calendar-filter-container .rdp-month .rdp-caption {
   position: initial;
 }
 
 .will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,
 .will-calendar-filter-container .rdp-table .rdp-head {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .will-calendar-filter-container .rdp-table {
@@ -46,13 +48,14 @@
   border-spacing: 0px 2px;
 }
 
-.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
+.will-calendar-filter-container
+  .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
   background-color: var(--will-primary);
   opacity: 1;
-  color: var(--will-white)
+  color: var(--will-white);
 }
 
-.will-calendar-filter-container .my-today:not(.rdp-day_selected) { 
+.will-calendar-filter-container .my-today:not(.rdp-day_selected) {
   font-weight: 700;
   opacity: 1;
   color: var(--will-primary);
@@ -66,14 +69,14 @@
   font-weight: 500;
 }
 
-.will-calendar-filter-container .rdp-cell button.booked  {
+.will-calendar-filter-container .rdp-cell button.booked {
   font-weight: 400;
   cursor: not-allowed;
 }
 
 .will-calendar-filter-container .rdp-cell .rdp-button[disabled] {
   color: var(--will-transparent-black);
-  opacity: 1
+  opacity: 1;
 }
 
 @media (max-width: 960px) {
@@ -85,7 +88,7 @@
   .will-calendar-filter-container .rdp-month.rdp-caption_start {
     padding-left: 10px;
   }
-  
+
   .will-calendar-filter-container .rdp-month.rdp-caption_end {
     padding-right: 10px;
   }
@@ -94,22 +97,40 @@
 /* Tooltips */
 .will-root .will-calendar-filter-container .will-calendar-tooltip,
 .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {
- position: absolute;
- top: -42px;
- transform: translateX(calc(-50% + 20px));
- display: none;
- white-space: nowrap;
- z-index: 2;
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-overlapping-date,
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-check-out-only,
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-check-in-only {
+  position: absolute;
+  top: -42px;
+  transform: translateX(calc(-50% + 20px));
+  display: none;
+  white-space: nowrap;
+  z-index: 2;
 }
 
 .will-root .will-calendar-filter-container .will-calendar-tooltip > div,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out > div,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only > div,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only > div {
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-check-out
+  > div,
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-overlapping-date
+  > div,
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-check-out-only
+  > div,
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-check-in-only
+  > div {
   background-color: white;
   position: relative;
   padding: 5px 10px;
@@ -118,27 +139,50 @@
 }
 
 .will-root .will-calendar-filter-container .will-calendar-tooltip::before,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only::before,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only::before {
-  content: "";
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-check-out::before,
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-overlapping-date::before,
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-check-out-only::before,
+.will-root
+  .will-calendar-filter-container
+  .will-calendar-tooltip-check-in-only::before {
+  content: '';
   width: 10px;
   height: 10px;
   border: 1px solid var(--will-primary);
   position: absolute;
   bottom: -4px;
-  left:calc(50% - 5.555px);
+  left: calc(50% - 5.555px);
   rotate: 45deg;
   z-index: 0;
   background-color: var(--will-white);
 }
 
-.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,
-.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out,
-.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date,
-.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out-only,
-.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-in-only {
+.will-root
+  .will-calendar-filter-container
+  .rdp-cell:hover
+  .will-calendar-tooltip,
+.will-root
+  .will-calendar-filter-container
+  .rdp-cell:hover
+  .will-calendar-tooltip-check-out,
+.will-root
+  .will-calendar-filter-container
+  .rdp-cell:hover
+  .will-calendar-tooltip-overlapping-date,
+.will-root
+  .will-calendar-filter-container
+  .rdp-cell:hover
+  .will-calendar-tooltip-check-out-only,
+.will-root
+  .will-calendar-filter-container
+  .rdp-cell:hover
+  .will-calendar-tooltip-check-in-only {
   display: block;
 }
 
@@ -150,8 +194,8 @@
 
 .will-root .will-calendar-filter-container .will-calendar-spinner {
   position: absolute;
-  top:0;
-  bottom:0;
+  top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
   background-color: var(--will-white-transparent);
@@ -166,14 +210,14 @@
 
 .will-root .will-calendar-filter-container .no-active-selection-start,
 .will-root .will-calendar-filter-container .no-active-selection-mid,
-.will-root .will-calendar-filter-container .no-active-selection-end { 
+.will-root .will-calendar-filter-container .no-active-selection-end {
   position: initial;
 }
 
 .will-root .will-calendar-filter-container .no-active-selection-start::before,
 .will-root .will-calendar-filter-container .no-active-selection-mid::before,
-.will-root .will-calendar-filter-container .no-active-selection-end::before { 
-  content: "";
+.will-root .will-calendar-filter-container .no-active-selection-end::before {
+  content: '';
   position: absolute;
   width: 100%;
   height: 100%;
@@ -198,7 +242,9 @@
   border-bottom-right-radius: 50%;
 }
 
-.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.checkout-option {
+.will-root
+  .will-calendar-filter-container
+  .rdp-day_selected.rdp-day_range_middle.checkout-option {
   background-color: var(--will-primary-lightest);
   color: inherit;
 }
@@ -215,16 +261,20 @@
 }
 
 @media (max-width: 600px) {
- /* Tooltips */
-.will-root .will-calendar-filter-container .will-calendar-tooltip,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {
-  top: -70px;
-  white-space: wrap;
-  max-width: 120px;
-}
+  /* Tooltips */
+  .will-root .will-calendar-filter-container .will-calendar-tooltip,
+  .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,
+  .will-root
+    .will-calendar-filter-container
+    .will-calendar-tooltip-overlapping-date,
+  .will-root
+    .will-calendar-filter-container
+    .will-calendar-tooltip-check-out-only,
+  .will-root
+    .will-calendar-filter-container
+    .will-calendar-tooltip-check-in-only {
+    top: -70px;
+    white-space: wrap;
+    max-width: 120px;
+  }
 }
-
-

package/src/locales/en/filterBar.json

@@ -1,7 +1,7 @@
 {
   "locations": {
     "label": "Locations",
-    "title": "Where to?",
+    "title": "Select location",
     "placeholder": "Add location",
     "selected": "locations"
   },

package/src/locales/fi/filterBar.json

@@ -1,9 +1,9 @@
 {
   "locations": {
     "label": "Sijainnit",
-    "title": "Minne?",
+    "title": "Valitse sijainti",
     "placeholder": "Lisää sijainti",
-    "selected": "sijaintia"
+    "selected": "sijainnit"
   },
   "calendar": {
     "label": "Päivät",