willba-component-library 0.1.75 → 0.1.77

package/package.json

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

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

@@ -46,10 +46,28 @@ export const Primary: Story = {
       primary: '',
       secondary: '',
     },
-    currentViewApply: 'roomFilters',
     mode: 'dark',
     defaultTab: '/rooms',
-    //tabs: ['/rooms', '/events'], -> TODO - show only available tabs -> also related to "currentViewApply"
+    tabs: [
+      {
+        path: '/rooms',
+        default: true,
+        order: 2,
+        label: {
+          en: 'Rooms',
+          fi: 'Rooms fi',
+        },
+      },
+      {
+        path: '/events',
+        default: false,
+        order: 1,
+        label: {
+          en: 'Events',
+          fi: 'Events fi',
+        },
+      },
+    ],
   },
   render: (args) => (
     <div style={{ background: 'white', padding: '30px', height: '100vh' }}>

package/src/components/FilterBar/FilterBar.tsx

@@ -11,7 +11,7 @@ import {
   FilterSections,
   Filters,
   Pages,
-  ViewApply,
+  Tab,
 } from './FilterBarTypes'
 import {
   useCloseFilterSection,
@@ -37,12 +37,12 @@ export type FilterBarProps = {
   ageCategories?: AgeCategoryType[]
   redirectUrl?: string
   palette?: Palette
-  currentViewApply?: string
   onSubmit?: ((val: Filters) => void) | null
   fullWidth?: boolean
   calendarOffset?: CalendarOffset
   mode?: string
   defaultTab?: string
+  tabs?: Tab[]
 }
 
 export default function FilterBar({
@@ -50,12 +50,11 @@ export default function FilterBar({
   ageCategories = AGE_CATEGORIES_FALLBACK,
   redirectUrl = REDIRECT_URL_FALLBACK,
   palette,
-  currentViewApply,
   onSubmit,
   fullWidth,
   calendarOffset,
   mode,
-  defaultTab,
+  tabs,
 }: FilterBarProps) {
   const themePalette = useTheme({ palette })
 
@@ -79,19 +78,11 @@ export default function FilterBar({
     handleResetFilters,
   } = useFilterBar({
     redirectUrl,
-    currentViewApply,
     ageCategories,
     onSubmit,
-    defaultTab,
+    tabs,
   })
 
-  // Default selected tab when tabs are hidden
-  useEffect(() => {
-    if (currentViewApply === ViewApply.ROOMS) {
-      setSelectedPath(Pages.ROOMS)
-    }
-  }, [])
-
   // Scroll in to view
   const { isMobile, targetFilterBarRef } = useScrollInToView({ selectedFilter })
 
@@ -124,33 +115,31 @@ export default function FilterBar({
       className={`will-root ${fullWidth ? 'is-full-width' : ''}`}
       style={themePalette}
     >
-      {!currentViewApply && (
-        <div
-          className="will-filter-bar-tabs"
-          ref={!currentViewApply ? targetFilterBarRef : null}
-        >
-          <TabButton
-            label={t('tabs.events')}
-            onClick={() => {
-              setSelectedPath(Pages.EVENTS), handleResetFilters()
-            }}
-            active={selectedPath === Pages.EVENTS}
-            mode={mode}
-          />
-          <TabButton
-            label={t('tabs.rooms')}
-            onClick={() => {
-              setSelectedPath(Pages.ROOMS), handleResetFilters()
-            }}
-            active={selectedPath === Pages.ROOMS}
-            mode={mode}
-          />
+      {tabs && tabs.length > 1 && (
+        <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
+          {tabs
+            .sort((a, b) => a.order - b.order)
+            .map((tab, idx) => (
+              <TabButton
+                key={`tab-${idx}`}
+                label={
+                  tab.label && language
+                    ? tab.label[language]
+                    : t(`tabs.${tab.path.substring(1)}`)
+                }
+                onClick={() => {
+                  setSelectedPath(tab.path), handleResetFilters()
+                }}
+                active={selectedPath === tab.path}
+                mode={mode}
+              />
+            ))}
         </div>
       )}
 
       <div
         className={`will-filter-bar-header ${mode || 'dark'}`}
-        ref={currentViewApply ? targetFilterBarRef : null}
+        ref={tabs?.length === 1 ? targetFilterBarRef : null}
       >
         <SelectButton
           label={t('calendar.label')}
@@ -184,7 +173,7 @@ export default function FilterBar({
       {selectedFilter && (
         <div
           className={`will-filter-bar-container ${mode || 'dark'}`}
-          style={currentViewApply && !isMobile ? { top: 66 } : {}}
+          style={tabs && tabs.length === 1 && !isMobile ? { top: 66 } : {}}
         >
           <CloseButton handleClose={() => handleSelectedFilter(false)} />
 

package/src/components/FilterBar/FilterBarTypes.ts

@@ -26,10 +26,6 @@ export enum FilterSections {
 
 export type Filters = { [key: string]: string }
 
-export enum ViewApply {
-  ROOMS = 'roomFilters',
-}
-
 export enum Pages {
   ROOMS = '/rooms',
   EVENTS = '/events',
@@ -38,3 +34,16 @@ export enum Pages {
 export type CalendarOffset = {
   [key: string]: number
 }
+
+type Translations = {
+  en: string
+  fi: string
+  [key: string]: string
+}
+
+export type Tab = {
+  path: string
+  default?: boolean
+  order: number
+  label?: Translations
+}

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

@@ -37,7 +37,6 @@
 .will-calendar-filter-container .rdp-month .rdp-nav {
   border: 1px solid var(--will-primary);
   border-radius: 50%;
-  left: 25;
 }
 
 .will-calendar-filter-container .rdp-month .rdp-nav svg {

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

@@ -7,24 +7,23 @@ import {
   AgeCategoryType,
   Filters,
   Pages,
+  Tab,
 } from '../FilterBarTypes'
 
 type Props = {
   redirectUrl?: string
-  currentViewApply?: string
   ageCategories?: AgeCategoryType[]
   onSubmit?: ((val: Filters) => void) | null
-  defaultTab?: string
+  tabs?: Tab[]
 }
 
 export const useFilterBar = ({
   redirectUrl,
-  currentViewApply,
   ageCategories,
   onSubmit,
-  defaultTab,
+  tabs,
 }: Props) => {
-  const [selectedPath, setSelectedPath] = useState(Pages.EVENTS)
+  const [selectedPath, setSelectedPath] = useState<string>(Pages.EVENTS)
   const [selectedFilter, setSelectedFilter] = useState<string | boolean>(false)
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
 
@@ -71,12 +70,14 @@ export const useFilterBar = ({
   useEffect(() => {
     // Handle default selected tab
     if (typeof window === 'undefined') return
+    const defaultTab =
+      tabs?.length === 1 ? tabs[0] : tabs?.find((tab) => tab.default)
 
     const currentPath =
-      defaultTab === Pages.EVENTS ||
+      defaultTab?.path === Pages.EVENTS ||
       window.location.pathname.includes(Pages.EVENTS)
         ? Pages.EVENTS
-        : defaultTab === Pages.ROOMS ||
+        : defaultTab?.path === Pages.ROOMS ||
           window.location.pathname.includes(Pages.ROOMS)
         ? Pages.ROOMS
         : Pages.EVENTS
@@ -108,7 +109,7 @@ export const useFilterBar = ({
       }),
     }
 
-    if (currentViewApply) {
+    if (tabs?.length === 1) {
       const currentSearchParams = new URLSearchParams(window.location.search)
       const updatedParams = new URLSearchParams()