willba-component-library 0.1.60 → 0.1.61

package/package.json

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

package/src/components/FilterBar/FilterBar.tsx

@@ -107,8 +107,14 @@ export default function FilterBar({
 
   // Parsed data for filter section description
   const parsedDates = parseDates({ calendarRange })
-  const parsedGuests = parseGuests({ ageCategoryCounts, ageCategories })
-
+  const parsedGuests = parseGuests({
+    ageCategoryCounts,
+    ageCategories,
+    guestsPlaceholder: t('guests.labelPlaceholder'),
+    guestLabel: t('guests.guestLabel'),
+    guestsLabel: t('guests.guestsLabel'),
+  })
+  console.log(parsedGuests)
   return (
     <div
       className={`will-root ${fullWidth ? 'is-full-width' : ''}`}
@@ -150,7 +156,7 @@ export default function FilterBar({
               : t('calendar.eventsLabelPlaceholder')
           }
           onClick={() => handleSelectedFilter(FilterSections.CALENDAR)}
-          active={selectedFilter === FilterSections.CALENDAR}
+          active={!!parsedDates}
         />
 
         {selectedPath === Pages.ROOMS && (
@@ -159,13 +165,9 @@ export default function FilterBar({
 
             <SelectButton
               label={t('guests.label')}
-              description={
-                parsedGuests
-                  ? t('guests.guestsLabel') + parsedGuests
-                  : t('guests.labelPlaceholder')
-              }
+              description={parsedGuests.content}
               onClick={() => handleSelectedFilter(FilterSections.GUESTS)}
-              active={selectedFilter === FilterSections.GUESTS}
+              active={!!parsedGuests.data.total}
             />
           </>
         )}
@@ -187,6 +189,7 @@ export default function FilterBar({
               ref={filtersRef}
               calendarOffset={calendarOffset}
               selectedPath={selectedPath}
+              locale={language}
             />
           )}
           {selectedFilter === FilterSections.GUESTS && (

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

@@ -23,12 +23,12 @@
 }
 
 .will-filter-bar-select-button .select-button-label {
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .will-filter-bar-select-button .select-button-description {
   font-weight: 400;
-  opacity: 0.8;
+  opacity: 0.5;
   
   white-space: nowrap;
  
@@ -41,7 +41,10 @@
 
  .will-filter-bar-select-button .select-button-label.active,
  .will-filter-bar-select-button .select-button-description.active {
-  font-weight: 600;
+  font-weight: 700;
+  font-size: 15px;
+  opacity: 1;
+
  }
 
 @media (max-width: 960px) {

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

@@ -20,9 +20,7 @@ export const SelectButton = ({
     <button className="will-filter-bar-select-button" onClick={onClick}>
       <span className="select-button-wrapper">
         <div>
-          <p className={`select-button-label ${active ? 'active' : ''}`}>
-            {label}
-          </p>
+          <p className={`select-button-label`}>{label}</p>
           <p
             className={`select-button-description ${active ? 'active' : ''}`}
             dangerouslySetInnerHTML={{ __html: description }}

package/src/components/FilterBar/components/calendar/Calendar.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useEffect } from 'react'
 import { DateRange, DayPicker } from 'react-day-picker'
-import { addDays, startOfDay, addMonths } from 'date-fns'
+import { addDays, startOfDay } from 'date-fns'
+import { fi, enUS } from 'date-fns/locale'
 import { useMediaQuery } from 'react-responsive'
 
 import { CalendarOffset } from '../../FilterBarTypes'
@@ -13,11 +14,18 @@ type Props = {
   setCalendarRange: (range: DateRange | undefined) => void
   calendarOffset: CalendarOffset
   selectedPath: string
+  locale?: string
 }
 
 export const Calendar = forwardRef<HTMLDivElement, Props>(
   (
-    { calendarRange, setCalendarRange, calendarOffset, selectedPath }: Props,
+    {
+      calendarRange,
+      setCalendarRange,
+      calendarOffset,
+      selectedPath,
+      locale,
+    }: Props,
     ref
   ) => {
     const isTablet = useMediaQuery({ maxWidth: 960 })
@@ -49,6 +57,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
           <DayPicker
             id="will-calendar"
             mode="range"
+            locale={locale === 'en' ? enUS : fi}
             numberOfMonths={!isTablet ? 2 : 1}
             weekStartsOn={1}
             selected={calendarRange}
@@ -60,7 +69,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
               disabled: { opacity: '0.2' },
             }}
             captionLayout="dropdown-buttons"
-            defaultMonth={selectedStartDate || today}
+            defaultMonth={selectedStartDate || disabledDays[0].from}
             disabled={disabledDays}
             fromMonth={today}
           />

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

@@ -3,6 +3,9 @@ import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
 type Props = {
   ageCategoryCounts: AgeCategoryCount
   ageCategories: AgeCategoryType[]
+  guestLabel: string
+  guestsLabel: string
+  guestsPlaceholder: string
 }
 
 type AccType = {
@@ -10,7 +13,13 @@ type AccType = {
   html: string[]
 }
 
-export const parseGuests = ({ ageCategoryCounts, ageCategories }: Props) => {
+export const parseGuests = ({
+  guestLabel,
+  guestsLabel,
+  guestsPlaceholder,
+  ageCategoryCounts,
+  ageCategories,
+}: Props) => {
   const parsedData = Object.entries(ageCategoryCounts).reduce(
     (acc: AccType, [key, value]) => {
       const ageCategoryId = key[key.length - 1]
@@ -19,10 +28,7 @@ export const parseGuests = ({ ageCategoryCounts, ageCategories }: Props) => {
       if (ageCategory && value) {
         return {
           total: acc.total + value,
-          html: [
-            ...acc.html,
-            `<span style="display: inline-block; width: 21px, text-align: center">${value}</span>`,
-          ],
+          html: [...acc.html, `${value}`],
         }
       }
 
@@ -34,8 +40,14 @@ export const parseGuests = ({ ageCategoryCounts, ageCategories }: Props) => {
   const htmlString =
     parsedData.html.length > 1 ? parsedData.html.join(' + ') : ''
 
-  return (
-    (parsedData.total || htmlString) &&
-    `: ${parsedData.total} ${htmlString ? ` &nbsp; ( ${htmlString} )` : ''}`
-  )
+  return {
+    content: parsedData.total
+      ? `<span style="display: inline-block; min-width: 10px">${
+          parsedData.total
+        }</span> ${parsedData.total > 1 ? guestsLabel : guestLabel}${
+          htmlString ? ` &nbsp; ( ${htmlString} )` : ''
+        }`
+      : guestsPlaceholder,
+    data: parsedData,
+  }
 }

package/src/locales/en/filterBar.json

@@ -13,7 +13,8 @@
     "title": "Who's coming?",
     "adultsLabel": "Adults",
     "kidsLabel": "kids",
-    "guestsLabel": "Guests"
+    "guestsLabel": "guests",
+    "guestLabel": "guest"
   },
   "categories": {
     "label": "Categories",

package/src/locales/fi/filterBar.json

@@ -13,7 +13,8 @@
     "title": "Ketkä ovat tulossa?",
     "adultsLabel": "Aikuiset",
     "kidsLabel": "lapset",
-    "guestsLabel": "Vieraita"
+    "guestsLabel": "vierasta",
+    "guestLabel": "vieras"
   },
   "categories": {
     "label": "Kategoriat",