willba-component-library 0.1.31 → 0.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.1.31",
+  "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={'When'}
-            description={'Add Check-in and -out'}
+            label={t('calendar.label')}
+            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' && (
@@ -131,8 +167,10 @@ export default function FilterBar({
               <Divider />
 
               <SelectButton
-                label={'Who'}
-                description={'Add Guests'}
+                label={t('guests.label')}
+                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/components/FilterBar/components/guests/Guests.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import GuestCount from './GuestCount/GuestCount'
 import { AgeCategoryCount, GuestsPropsType } from '../../FilterBarTypes'
@@ -10,9 +11,10 @@ export default function Guests({
   updateGuestsCount,
   ageCategoryCounts,
 }: GuestsPropsType) {
+  const { t } = useTranslation('filterBar')
   return (
     <div className="will-filter-bar-guests">
-      <h3 className="will-guests-filter-title">Who's coming?</h3>
+      <h3 className="will-guests-filter-title">{t('guests.title')}</h3>
 
       <div className="will-guests-filter-container">
         {ageCategories?.map((category) => (

package/src/locales/en/filterBar.json

@@ -1,13 +1,16 @@
 {
   "calendar": {
+    "label": "When",
+    "roomsLabelPlaceholder": "Add check-in and check-out",
+    "eventsLabelPlaceholder": "Add search dates",
     "startDate": "Start date",
     "endDate": "End date",
     "title": "Calendar"
   },
   "guests": {
-    "label": "Guests",
-    "title": "Guests",
-    "subtitle": "Who's coming?",
+    "label": "Who",
+    "labelPlaceholder": "Add guests",
+    "title": "Who's coming?",
     "adultsLabel": "Adults",
     "kidsLabel": "kids"
   },

package/src/locales/fi/filterBar.json

@@ -1,13 +1,16 @@
 {
   "calendar": {
+    "label": "Milloin",
+    "roomsLabelPlaceholder": "Lisää check-in ja check-out",
+    "eventsLabelPlaceholder": "Lisää aikaväli",
     "startDate": "Alku",
     "endDate": "Loppu",
     "title": "Kalenteri"
   },
   "guests": {
-    "label": "Vieraat",
-    "title": "Vieraat",
-    "subtitle": "Kuka saapuu?",
+    "label": "Kuka",
+    "labelPlaceholder": "Lisää vieraat",
+    "title": "Ketkä ovat tulossa?",
     "adultsLabel": "Aikuiset",
     "kidsLabel": "lapset"
   },