willba-component-library 0.3.4 → 0.3.6

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -53,7 +53,7 @@
 .will-filter-bar-container {
   background-color: var(--will-white);
   min-height: 100px;
-  padding: 40px 20px;
+  padding: 20px;
   position: absolute;
   top: 125px;
   z-index: 111;

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

@@ -79,59 +79,66 @@ export const Main: Story = {
     outerLoading: false,
     locations: {
       multiSelect: false,
+      disabled: false,
       data: [
         {
           id: 1,
-          label: {
-            en: 'Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1',
-            fi: 'Location 1 fi',
-          },
-          description: {
-            en: 'Location 1 description',
-            fi: 'Location 1 description fi',
-          },
-          imageUrl:
-            '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
+          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' },
+          ],
+          imageUrl: '',
         },
         {
           id: 2,
-          label: {
-            en: 'Location 2',
-            fi: 'Location 2 fi',
-          },
+          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: '',
         },
         {
           id: 3,
-          label: {
-            en: 'Location 3',
-            fi: 'Location 3 fi',
-          },
-          description: {
-            en: 'Location 3 description',
-            fi: 'Location 3 description fi',
-          },
-          imageUrl:
-            '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
+          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: '',
         },
         {
           id: 4,
-          label: {
-            en: 'Location 4',
-            fi: 'Location 4 fi',
-          },
-          imageUrl:
-            '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
+          label: [
+            { content: 'Turku Harbor', locale: 'en' },
+            { content: 'Turun Satama', locale: 'fi' },
+          ],
+          imageUrl: null,
         },
         {
           id: 5,
-          label: {
-            en: 'Location 5',
-            fi: 'Location 5 fi',
-          },
-          description: {
-            en: 'Location 5 description',
-            fi: 'Location 5 description fi',
-          },
+          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' },
+          ],
+          imageUrl: null,
         },
       ],
     },

package/src/components/FilterBar/FilterBar.tsx

@@ -25,6 +25,7 @@ import {
 } from './components'
 
 import './FilterBar.css'
+import { Dates } from './components/dates'
 
 export default function FilterBar({
   language = LANGUAGE_FALLBACK,
@@ -47,7 +48,7 @@ export default function FilterBar({
 
   // Refs for SelectButtons
   const locationsButtonRef = useRef<HTMLButtonElement>(null)
-  const calendarButtonRef = useRef<HTMLButtonElement>(null)
+  const datesButtonRef = useRef<HTMLButtonElement>(null)
   const guestsButtonRef = useRef<HTMLButtonElement>(null)
   const previouslyFocusedButtonRef = useRef<HTMLButtonElement | null>(null)
 
@@ -153,6 +154,7 @@ export default function FilterBar({
                 handleSelectedFilter(FilterSections.LOCATIONS)
               }}
               active={!!selectedLocations.length}
+              disabled={locations?.disabled}
               ariaExpanded={selectedFilter === FilterSections.LOCATIONS}
               ariaControls="will-locations-filter"
             />
@@ -162,7 +164,7 @@ export default function FilterBar({
         )}
 
         <SelectButton
-          ref={calendarButtonRef}
+          ref={datesButtonRef}
           label={t('calendar.label')}
           description={
             parsedDates
@@ -172,7 +174,7 @@ export default function FilterBar({
                 : t('calendar.eventsLabelPlaceholder')
           }
           onClick={() => {
-            previouslyFocusedButtonRef.current = calendarButtonRef.current
+            previouslyFocusedButtonRef.current = datesButtonRef.current
             handleSelectedFilter(FilterSections.CALENDAR)
           }}
           active={!!parsedDates}
@@ -212,18 +214,18 @@ export default function FilterBar({
           className={`will-filter-bar-container ${mode || 'light'}`}
           style={(!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {}}
         >
-          <CloseButton handleClose={() => handleSelectedFilter(false)} />
-
           {selectedFilter === FilterSections.CALENDAR && (
             <div id="will-calendar-filter">
-              <Calendar
+              <Dates
+                autoFocus
+                ref={filtersRef}
+                onClose={() => handleSelectedFilter(false)}
                 calendarRange={calendarRange}
                 setCalendarRange={setCalendarRange}
                 disableCalendarDates={disableCalendarDates}
                 selectedPath={selectedPath}
                 language={language}
-                ref={filtersRef}
-                autoFocus
+                filtersRef={filtersRef}
               />
             </div>
           )}
@@ -235,22 +237,28 @@ export default function FilterBar({
                 ageCategoryCounts={ageCategoryCounts}
                 ref={filtersRef}
                 autoFocus
+                onClose={() => handleSelectedFilter(false)}
               />
             </div>
           )}
           {selectedFilter === FilterSections.CATEGORIES && (
-            <Categories categories={categories} setCategories={setCategories} />
+            <div id="will-categories-filter">
+              <Categories
+                categories={categories}
+                setCategories={setCategories}
+              />
+            </div>
           )}
           {selectedFilter === FilterSections.LOCATIONS && (
             <div id="will-locations-filter">
               <Locations
-                locations={locations?.data}
+                autoFocus
                 ref={filtersRef}
+                locations={locations?.data}
                 language={language}
                 selectedLocations={selectedLocations}
                 setSelectedLocations={setSelectedLocations}
                 multiSelect={locations?.multiSelect}
-                autoFocus
                 onClose={() => handleSelectedFilter(false)}
               />
             </div>

package/src/components/FilterBar/FilterBarTypes.ts

@@ -12,10 +12,7 @@ export type FilterBarTypes = {
   mode?: string
   tabs?: Tab[]
   outerLoading?: boolean
-  locations?: {
-    multiSelect: boolean
-    data: Location[]
-  }
+  locations?: Locations
 }
 
 export type AgeCategoryCount = {
@@ -59,6 +56,11 @@ type Translations = {
   [key: string]: string
 }
 
+export type LocaleTranslation = Array<{
+  content: string
+  locale: string
+}>
+
 export type Tab = {
   path: string
   default?: boolean
@@ -66,9 +68,15 @@ export type Tab = {
   label?: Translations
 }
 
+export type Locations = {
+  multiSelect: boolean
+  disabled?: boolean
+  data: Location[]
+}
+
 export type Location = {
   id: number
-  label: Translations
-  description?: Translations
-  imageUrl?: string
+  label: LocaleTranslation
+  description?: LocaleTranslation | null
+  imageUrl?: string | null
 }

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

@@ -10,16 +10,19 @@
   text-align: initial;
 }
 
+.will-filter-bar-select-button.disabled {
+  cursor: not-allowed;
+}
+
 .will-filter-bar-select-button .select-button-wrapper {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
- 
 }
 
 .will-filter-bar-select-button .select-button-wrapper > div {
-  display: grid
+  display: grid;
 }
 
 .will-filter-bar-select-button .select-button-label {
@@ -38,25 +41,24 @@
 }
 
 .will-filter-bar-select-button .select-button-description span {
-  font: inherit
+  font: inherit;
 }
 
- .will-filter-bar-select-button .select-button-label.active,
- .will-filter-bar-select-button .select-button-description.active {
+.will-filter-bar-select-button .select-button-label.active,
+.will-filter-bar-select-button .select-button-description.active {
   font-weight: 700;
   font-size: 15px;
   opacity: 1;
-
- }
+}
 
 @media (max-width: 960px) {
   .will-filter-bar-select-button {
     padding: 15px 0;
-   }
+  }
 
   .will-filter-bar-select-button:first-child {
     padding: 0 0 15px 0;
-   }
+  }
 
   .will-filter-bar-select-button .select-button-wrapper {
     justify-content: center;
@@ -65,11 +67,9 @@
 
   .will-filter-bar-select-button .select-button-description {
     white-space: wrap;
-   }
+  }
 
   .will-filter-bar-select-button .select-button-divider {
-    display: none
+    display: none;
   }
 }
-
-

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

@@ -7,20 +7,23 @@ type Props = {
   onClick: () => void
   description: string
   active?: boolean
+  disabled?: boolean
   ariaExpanded?: boolean
   ariaControls?: string
 }
 
 export const SelectButton = forwardRef<HTMLButtonElement, Props>(
-  ({ active, label, onClick, description, ariaExpanded, ariaControls }, ref) => {
+  ({ active, label, onClick, description, disabled, ariaExpanded, ariaControls }, ref) => {
     return (
       <button
         ref={ref}
-        className="will-filter-bar-select-button"
-        onClick={onClick}
+        className={`will-filter-bar-select-button ${disabled ? 'disabled' : ''}`}
+        onClick={disabled ? undefined : onClick}
+        disabled={disabled}
         aria-expanded={ariaExpanded}
         aria-controls={ariaControls}
         aria-haspopup="true"
+        aria-disabled={disabled}
       >
         <span className="select-button-wrapper">
           <div>

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

@@ -4,8 +4,8 @@ import './ImageCard.css'
 
 type Props = {
   title?: string
-  description?: string
-  imageUrl?: string
+  description?: string | null
+  imageUrl?: string | null
   isSelected: boolean
   onClick?: () => void
 }

package/src/components/FilterBar/components/categories/Categories.tsx

@@ -28,6 +28,7 @@ export const Categories = ({ categories, setCategories }: Props) => {
   return (
     <div className="will-filter-bar-categories">
       <h3 className="will-categories-filter-title">{t('categories.label')}</h3>
+
       <div className="will-categories-filter-inner">
         {categoriesPlaceholder.map((itm, idx) => (
           <div key={idx}>

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

@@ -0,0 +1,29 @@
+.will-filter-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.will-filter-section-title {
+  font-size: 22px;
+  margin: 0;
+}
+
+.will-filter-section-action {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.will-filter-section-action .will-filter-bar-close-button {
+  position: relative;
+  top: auto;
+  right: auto;
+  margin: 0;
+}
+
+@media (max-width: 960px) {
+  .will-filter-section-title {
+    font-size: 18px;
+  }
+}

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react'
+import './FilterSectionHeader.css'
+
+type Props = {
+  title: string
+  action?: ReactNode
+}
+
+export const FilterSectionHeader = ({ title, action }: Props) => {
+  return (
+    <div className="will-filter-section-header">
+      <h3 className="will-filter-section-title">{title}</h3>
+      {action && <div className="will-filter-section-action">{action}</div>}
+    </div>
+  )
+}

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

@@ -0,0 +1,57 @@
+import { DateRange } from 'react-day-picker'
+import { Calendar } from '../../../../core/components'
+import { DisableCalendarDates } from '../../../../core/components/calendar/CalendarTypes'
+import { CloseButton } from '../buttons'
+import { FilterSectionHeader } from '../common/FilterSectionHeader'
+import { forwardRef } from 'react'
+
+type Props = {
+  ref: React.RefObject<HTMLDivElement>
+  onClose?: () => void
+  autoFocus?: boolean
+  calendarRange: DateRange | undefined
+  setCalendarRange: (range: DateRange | undefined) => void
+  disableCalendarDates?: DisableCalendarDates
+  selectedPath?: string
+  language?: string
+  filtersRef?: React.RefObject<HTMLDivElement>
+}
+
+export const Dates = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      onClose,
+      autoFocus,
+      calendarRange,
+      setCalendarRange,
+      disableCalendarDates,
+      selectedPath,
+      language,
+      filtersRef,
+    },
+    ref
+  ) => {
+    return (
+      <div className="will-filter-bar-dates" ref={ref}>
+        <FilterSectionHeader
+          title={''}
+          action={onClose && <CloseButton handleClose={onClose} />}
+        />
+
+        <div className="will-dates-filter-container">
+          <Calendar
+            autoFocus={autoFocus}
+            calendarRange={calendarRange}
+            setCalendarRange={setCalendarRange}
+            disableCalendarDates={disableCalendarDates}
+            selectedPath={selectedPath}
+            language={language}
+            ref={filtersRef}
+          />
+        </div>
+      </div>
+    )
+  }
+)
+
+Dates.displayName = 'Dates'

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

@@ -0,0 +1 @@
+export { Dates } from './Dates'

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

@@ -1,20 +1,19 @@
-.will-guests-filter-label, .will-guests-filter-count {
+.will-guests-filter-label,
+.will-guests-filter-count {
   font-size: 18px;
-  color: var(--will-text)
+  color: var(--will-text);
 }
 
 .will-guests-filter-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 30px;
 }
 
 .will-guests-filter-label {
   display: block;
   font-weight: 600;
   margin-bottom: 10px;
- 
 }
 
 .will-guests-filter-inner .will-guests-filter-counter {
@@ -29,7 +28,6 @@
 }
 
 .will-guests-filter-counter-button {
-  
   border-radius: 50%;
   background-color: transparent;
   border: 1px solid var(--will-grey);
@@ -53,10 +51,9 @@
 }
 
 @media (max-width: 960px) {
-
   .will-guests-filter-inner {
     width: 100%;
     margin: 15px 0;
     justify-content: space-between;
   }
-}
+}

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

@@ -2,32 +2,17 @@
   text-align: initial;
 }
 
-.will-guests-filter-title {
-  font-size: 22px;
-  margin: 10px 0;
-}
-
-.will-guests-filter-subtitle {
-  font-size: 15px;
-  font-weight: 500;
-  color:var(--will-text)
-}
-
-
 .will-guests-filter-container {
   display: flex;
   flex-direction: column;
   min-width: 400px;
+  gap: 20px;
+  margin-top: 20px;
 }
 
-
 @media (max-width: 960px) {
-  .will-guests-filter-title {
-    font-size: 18px;
-  }
-
   .will-guests-filter-container {
-   margin-top: 15px;
-   min-width: 100%;
+    margin-top: 15px;
+    min-width: 100%;
   }
-}
+}

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

@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next'
 import { useAutoFocus } from '../../../../core/hooks'
 import { GuestCount } from './GuestCount/GuestCount'
 import { AgeCategoryCount, AgeCategoryType } from '../../FilterBarTypes'
+import { FilterSectionHeader } from '../common/FilterSectionHeader'
+import { CloseButton } from '../../../../core/components'
 
 import './Guests.css'
 
@@ -12,16 +14,20 @@ type Props = {
   updateGuestsCount: (arg1: string, arg2: number) => void
   ageCategoryCounts: AgeCategoryCount
   autoFocus?: boolean
+  onClose?: () => void
 }
 
 export const Guests = forwardRef<HTMLDivElement, Props>(
-  ({ ageCategories, updateGuestsCount, ageCategoryCounts, autoFocus }: Props, ref) => {
+  ({ ageCategories, updateGuestsCount, ageCategoryCounts, autoFocus, onClose }: Props, ref) => {
     const { t } = useTranslation('filterBar')
     const containerRef = useAutoFocus<HTMLDivElement>(autoFocus)
 
     return (
       <div className="will-filter-bar-guests" ref={ref}>
-        <h3 className="will-guests-filter-title">{t('guests.title')}</h3>
+        <FilterSectionHeader
+          title={t('guests.title')}
+          action={onClose && <CloseButton handleClose={onClose} />}
+        />
 
         <div className="will-guests-filter-container" ref={containerRef}>
           {ageCategories?.map((category) => (

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

@@ -2,29 +2,15 @@
   text-align: initial;
 }
 
-.will-locations-filter-title {
-  font-size: 22px;
-  margin: 10px 0;
-}
-
-.will-locations-filter-subtitle {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--will-text);
-}
-
 .will-locations-filter-container {
   display: flex;
   gap: 10px;
   flex-direction: column;
   min-width: 400px;
+  margin-top: 20px;
 }
 
 @media (max-width: 960px) {
-  .will-locations-filter-title {
-    font-size: 18px;
-  }
-
   .will-locations-filter-container {
     margin-top: 15px;
     min-width: 100%;