willba-component-library 0.1.46 → 0.1.47

package/package.json

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

package/src/components/FilterBar/FilterBar.tsx

@@ -6,7 +6,7 @@ import useTheme, { Palette } from '../../themes/useTheme'
 import '../../themes/Default.css'
 
 import { parseDates, parseGuests } from './utils'
-import { AgeCategoryType } from './FilterBarTypes'
+import { AgeCategoryType, FilterSections } from './FilterBarTypes'
 import {
   useCloseFilterSection,
   useFilterBar,
@@ -63,7 +63,7 @@ export default function FilterBar({
     setSelectedPath,
   } = useFilterBar({ redirectUrl, currentViewApply, ageCategories })
 
-  // Default selected tab
+  // Default selected tab when tabs are hidden
   useEffect(() => {
     if (currentViewApply === 'roomFilters') {
       setSelectedPath('/rooms')
@@ -76,6 +76,7 @@ export default function FilterBar({
   // Handle close filter section
   const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
 
+  // Parsed data for filter section description
   const parsedDates = parseDates({ calendarRange })
   const parsedGuests = parseGuests({ ageCategoryCounts, ageCategories })
 
@@ -112,11 +113,8 @@ export default function FilterBar({
               ? t('calendar.roomsLabelPlaceholder')
               : t('calendar.eventsLabelPlaceholder')
           }
-          onClick={() => handleSelectedFilter(1)}
-          style={fontWeightBold(selectedFilter === 1)}
-          date={
-            calendarRange?.to ? format(calendarRange.to, 'dd.MM.yyyy') : null
-          }
+          onClick={() => handleSelectedFilter(FilterSections.CALENDAR)}
+          active={selectedFilter === FilterSections.CALENDAR}
         />
 
         {selectedPath === '/rooms' && (
@@ -128,8 +126,8 @@ export default function FilterBar({
               description={
                 parsedGuests ? parsedGuests : t('guests.labelPlaceholder')
               }
-              onClick={() => handleSelectedFilter(2)}
-              style={fontWeightBold(selectedFilter === 2)}
+              onClick={() => handleSelectedFilter(FilterSections.GUESTS)}
+              active={selectedFilter === FilterSections.GUESTS}
             />
           </>
         )}
@@ -144,14 +142,14 @@ export default function FilterBar({
         >
           <CloseButton handleClose={() => handleSelectedFilter(false)} />
 
-          {selectedFilter === 1 && (
+          {selectedFilter === FilterSections.CALENDAR && (
             <Calendar
               calendarRange={calendarRange}
               setCalendarRange={setCalendarRange}
               ref={filtersRef}
             />
           )}
-          {selectedFilter === 2 && (
+          {selectedFilter === FilterSections.GUESTS && (
             <Guests
               updateGuestsCount={updateGuestsCount}
               ageCategories={ageCategories}
@@ -159,7 +157,7 @@ export default function FilterBar({
               ref={filtersRef}
             />
           )}
-          {selectedFilter === 3 && (
+          {selectedFilter === FilterSections.CATEGORIES && (
             <Categories categories={categories} setCategories={setCategories} />
           )}
         </div>
@@ -170,10 +168,6 @@ export default function FilterBar({
 
 ////////////
 
-const fontWeightBold = (input: boolean) => {
-  return { fontWeight: input ? 'bold' : 'initial' }
-}
-
 const AGE_CATEGORIES_FALLBACK = [
   {
     id: '1',

package/src/components/FilterBar/FilterBarTypes.ts

@@ -1,15 +1,15 @@
-export interface AgeCategoryCount {
+export type AgeCategoryCount = {
   [categoryId: string]: number
 }
 
-export interface AgeCategoryType {
+export type AgeCategoryType = {
   id: string
   name: string
   minVal: number
   sortOrder: number
 }
 
-export interface GuestsCountPropsType {
+export type GuestsCountPropsType = {
   label: string
   id: number
   updateGuestsCount: (arg1: string, arg2: number) => void
@@ -17,3 +17,9 @@ export interface GuestsCountPropsType {
   minVal: number
   sortOrder: number
 }
+
+export enum FilterSections {
+  CALENDAR = 'calendar',
+  GUESTS = 'guests',
+  CATEGORIES = 'categories',
+}

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

@@ -10,8 +10,6 @@
   text-align: initial;
 }
 
-
-
 .will-filter-bar-select-button .select-button-wrapper {
   display: flex;
   align-items: center;
@@ -24,16 +22,24 @@
   display: grid
 }
 
+.will-filter-bar-select-button .select-button-label {
+  font-weight: 500;
+}
+
 .will-filter-bar-select-button .select-button-description {
   font-weight: 400;
-  opacity: 0.4;
- 
- 
+  opacity: 0.8;
+  
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
  }
 
+ .will-filter-bar-select-button .select-button-label.active,
+ .will-filter-bar-select-button .select-button-description.active {
+  font-weight: 600;
+ }
+
 @media (max-width: 960px) {
   .will-filter-bar-select-button {
     padding: 15px 0;

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

@@ -5,21 +5,27 @@ import './SelectButton.css'
 type Props = {
   label: string
   onClick: () => void
-  style: Object
   description: string
+  active?: boolean
 }
 
-export const SelectButton = ({ label, onClick, style, description }: any) => {
+export const SelectButton = ({
+  active,
+  label,
+  onClick,
+
+  description,
+}: Props) => {
   return (
-    <button
-      className="will-filter-bar-select-button"
-      onClick={onClick}
-      style={style}
-    >
+    <button className="will-filter-bar-select-button" onClick={onClick}>
       <span className="select-button-wrapper">
         <div>
-          <p className="select-button-label">{label}</p>
-          <p className="select-button-description">{description}</p>
+          <p className={`select-button-label ${active ? 'active' : ''}`}>
+            {label}
+          </p>
+          <p className={`select-button-description ${active ? 'active' : ''}`}>
+            {description}
+          </p>
         </div>
       </span>
     </button>

package/src/components/FilterBar/hooks/useFilterBar.tsx

@@ -17,7 +17,7 @@ export const useFilterBar = ({
 }: Props) => {
   const [selectedPath, setSelectedPath] = useState('/events')
 
-  const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
+  const [selectedFilter, setSelectedFilter] = useState<string | boolean>(false)
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
 
   const [categories, setCategories] = useState<number>(0)
@@ -80,7 +80,7 @@ export const useFilterBar = ({
     }))
   }
 
-  const handleSelectedFilter = (id: number | boolean) => {
+  const handleSelectedFilter = (id: string | boolean) => {
     setSelectedFilter(id)
   }
 

package/src/components/FilterBar/hooks/useScrollInToView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 
 type Props = {
-  selectedFilter: number | boolean
+  selectedFilter: string | boolean
 }
 
 export const useScrollInToView = ({ selectedFilter }: Props) => {
@@ -9,7 +9,7 @@ export const useScrollInToView = ({ selectedFilter }: Props) => {
   const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (window !== undefined && window.innerWidth > 960) {
+    if (typeof window !== 'undefined' && window.innerWidth > 960) {
       setIsMobile(false)
       return
     }