willba-component-library 0.1.32 → 0.1.33

package/package.json

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

package/src/components/FilterBar/FilterBar.tsx

@@ -88,6 +88,27 @@ export default function FilterBar({
     }
   }, [selectedFilter])
 
+  const renderDates =
+    calendarRange?.to && calendarRange?.from
+      ? `${format(calendarRange.from, 'dd.MM.yyyy')} -
+    ${format(calendarRange.to, 'dd.MM.yyyy')}`
+      : null
+
+  const renderGuests = Object.entries(ageCategoryCounts).reduce(
+    (acc, [key, value]) => {
+      const ageCategory = ageCategories.find(
+        (c) => c.id === key[key.length - 1]
+      )
+
+      if (ageCategory) {
+        acc += `${acc ? ' -' : ''} ${ageCategory.name}: ${value}`
+      }
+
+      return acc
+    },
+    ''
+  )
+
   return (
     <>
       {selectedFilter && (
@@ -104,7 +125,10 @@ export default function FilterBar({
         style={themePalette}
       >
         {!currentViewApply && (
-          <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
+          <div
+            className="will-filter-bar-tabs"
+            ref={!currentViewApply ? targetFilterBarRef : null}
+          >
             <TabButton
               label={t('tabs.events')}
               onClick={() => setSelectedPath('/events')}
@@ -118,12 +142,24 @@ export default function FilterBar({
           </div>
         )}
 
-        <div className="will-filter-bar-header">
+        <div
+          className="will-filter-bar-header"
+          ref={currentViewApply ? targetFilterBarRef : null}
+        >
           <SelectButton
             label={t('calendar.label')}
-            description={t('calendar.labelPlaceholder')}
+            description={
+              renderDates
+                ? renderDates
+                : selectedPath === '/rooms'
+                ? t('calendar.roomsLabelPlaceholder')
+                : t('calendar.eventsLabelPlaceholder')
+            }
             onClick={() => handleSelectedFilter(1)}
             style={fontWeightBold(selectedFilter === 1)}
+            date={
+              calendarRange?.to ? format(calendarRange.to, 'dd.MM.yyyy') : null
+            }
           />
 
           {selectedPath === '/rooms' && (
@@ -132,7 +168,9 @@ export default function FilterBar({
 
               <SelectButton
                 label={t('guests.label')}
-                description={t('guests.labelPlaceholder')}
+                description={
+                  renderGuests ? renderGuests : t('guests.labelPlaceholder')
+                }
                 onClick={() => handleSelectedFilter(2)}
                 style={fontWeightBold(selectedFilter === 2)}
               />

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

@@ -25,9 +25,12 @@
 
 @media (max-width: 960px) {
   .will-filter-bar-select-button {
-    margin: 5px 0;
-    padding: 10px 20px;
-  }
+    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;

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

@@ -2,11 +2,17 @@ import React from 'react'
 
 import './SelectButton.css'
 
+type Props = {
+  label: string
+  onClick: () => void
+  style: Object
+  description: string
+}
+
 export default function SelectButton({
   label,
   onClick,
   style,
-  date,
   description,
 }: any) {
   return (
@@ -20,13 +26,6 @@ export default function SelectButton({
           <p className="select-button-label">{label}</p>
           <p className="select-button-description">{description}</p>
         </div>
-
-        {!!date && (
-          <>
-            <span className="select-button-divider">|</span>
-            <span className="select-button-date"> {date}</span>
-          </>
-        )}
       </span>
     </button>
   )

package/src/components/FilterBar/components/buttons/submit-button/SubmitButton.css

@@ -22,6 +22,6 @@
 @media (max-width: 960px) {
   .will-filter-bar-submit-button {
     justify-content: center;
-    margin-bottom: 5px;
+   
   }
 }

package/src/locales/en/filterBar.json

@@ -1,7 +1,8 @@
 {
   "calendar": {
     "label": "When",
-    "labelPlaceholder": "Add check-in and check-out",
+    "roomsLabelPlaceholder": "Add check-in and check-out",
+    "eventsLabelPlaceholder": "Add search dates",
     "startDate": "Start date",
     "endDate": "End date",
     "title": "Calendar"

package/src/locales/fi/filterBar.json

@@ -1,7 +1,8 @@
 {
   "calendar": {
     "label": "Milloin",
-    "labelPlaceholder": "Lisää check-in ja check-out",
+    "roomsLabelPlaceholder": "Lisää check-in ja check-out",
+    "eventsLabelPlaceholder": "Lisää aikaväli",
     "startDate": "Alku",
     "endDate": "Loppu",
     "title": "Kalenteri"