willba-component-library 0.1.15 → 0.1.17

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -25,6 +25,16 @@
   transform: translateY(-50%);
 }
 
+/* Tabs */
+
+.will-filter-bar-tabs {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  position: relative;
+  z-index: 222;
+}
+
 /* Header */
 .will-filter-bar-header {
   display: flex;
@@ -35,8 +45,9 @@
   
   
   border-radius: 40px;
+  border-top-left-radius: 0;
   background-color: var(--will-white);
-  box-shadow: var(--will-box-shadow);
+  
 }
 
 @media (max-width: 960px) {
@@ -54,7 +65,7 @@
  
   padding: 90px 40px 30px 40px;
   position: absolute;
-  top: 0;
+  top: 45px;
   z-index: 111;
   border-radius: 25px;
   width: -webkit-fill-available;

package/src/components/FilterBar/FilterBar.tsx

@@ -16,6 +16,7 @@ import './FilterBar.css'
 import '../../themes/Default.css'
 import i18n from '../../i18n'
 import CloseButton from './components/buttons/close-button/CloseButton'
+import TabButton from './components/buttons/tab-button/TabButton'
 import { AgeCategoryType } from './FilterBarTypes'
 
 export interface FilterBarProps {
@@ -24,11 +25,13 @@ export interface FilterBarProps {
   ageCategories?: AgeCategoryType[]
   redirectUrl: string
   palette?: Palette
+  currentPath?: string
 }
 
 export default function FilterBar({
   language,
   ageCategories = AGE_CATEGORIES_FALLBACK,
+  currentPath,
   redirectUrl = REDIRECT_URL_FALLBACK,
   palette,
 }: FilterBarProps) {
@@ -49,11 +52,13 @@ export default function FilterBar({
     ageCategoryCounts,
     categories,
     calendarRange,
+    selectedPath,
     setCalendarRange,
     setCategories,
     handleSelectedFilter,
     handleSubmit,
     updateGuestsCount,
+    setSelectedPath,
   } = useFilterBar({ redirectUrl })
 
   // Scroll in to view
@@ -81,13 +86,27 @@ export default function FilterBar({
           }}
         />
       )}
+
       <div
         className={`will-root ${selectedFilter ? 'isMobileAbsolute' : ''}`}
         style={themePalette}
       >
-        <div className="will-filter-bar-header" ref={targetFilterBarRef}>
+        <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
+          <TabButton
+            label={t('tabs.events')}
+            onClick={() => setSelectedPath('./events')}
+            active={selectedPath === '/events'}
+          />
+          <TabButton
+            label={t('tabs.rooms')}
+            onClick={() => setSelectedPath('./rooms')}
+            active={selectedPath === '/rooms'}
+          />
+        </div>
+
+        <div className="will-filter-bar-header">
           <SelectButton
-            style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
+            style={fontWeightBold(selectedFilter === 1 || selectedFilter === 2)}
             label={t('calendar.startDate')}
             onClick={() => handleSelectedFilter(1)}
             date={
@@ -96,9 +115,11 @@ export default function FilterBar({
                 : null
             }
           />
+
           <Divider />
+
           <SelectButton
-            style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
+            style={fontWeightBold(selectedFilter === 1 || selectedFilter === 2)}
             label={t('calendar.endDate')}
             onClick={() => handleSelectedFilter(2)}
             date={
@@ -111,14 +132,14 @@ export default function FilterBar({
           <SelectButton
             label={t('guests.label')}
             onClick={() => handleSelectedFilter(3)}
-            style={fontWigthBold(selectedFilter === 3)}
+            style={fontWeightBold(selectedFilter === 3)}
           /> */}
 
           {/* <Divider />
           <SelectButton
             label={t('categories.label')}
             onClick={() => handleSelectedFilter(4)}
-            style={fontWigthBold(selectedFilter === 4)}
+            style={fontWeightBold(selectedFilter === 4)}
           /> */}
 
           <SubmitButton onClick={handleSubmit} />
@@ -156,7 +177,7 @@ export default function FilterBar({
 
 ////////////
 
-const fontWigthBold = (input: boolean) => {
+const fontWeightBold = (input: boolean) => {
   return { fontWeight: input ? 'bold' : 'initial' }
 }
 

package/src/components/FilterBar/components/buttons/tab-button/TabButton.css

@@ -0,0 +1,43 @@
+.will-filter-bar-tab-button {
+    width: auto;
+    height: auto;
+    padding: 10px 50px;
+    cursor: pointer;
+    border: none;
+    white-space: nowrap;
+    text-transform: uppercase;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--will-black);
+    border-top: none;
+    background-color: var(--will-transparent-white);
+    user-select: none;
+    font-weight: 600;
+  }
+
+  /* .will-filter-bar-tab-button:not(:first-child) {
+    border-left: none;
+  } */
+
+  .will-filter-bar-tab-button:hover {
+    background-color: var(--will-white);
+  }
+
+  .will-filter-bar-tab-button.active {
+    background-color: var(--will-white);
+    border-color: var(--will-white);
+  }
+
+
+
+
+  
+
+  /* @media (max-width: 960px) {
+    .will-filter-bar-tab-button {
+      justify-content: center;
+      margin-bottom: 15px;
+    }
+  } */
+  

package/src/components/FilterBar/components/buttons/tab-button/TabButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import './TabButton.css'
+
+type Props = {
+  onClick?: () => void
+  label: string
+  active?: boolean
+}
+
+export default function SubmitButton({ onClick, label, active }: Props) {
+  return (
+    <button
+      className={`will-filter-bar-tab-button ${active && 'active'}`}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  )
+}

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

@@ -21,13 +21,15 @@ export default function Calendar({
   //const { t } = useTranslation('filterBar')
   const isTablet = useMediaQuery({ maxWidth: 960 })
 
-  const defaultCalendarSelected: DateRange = {
-    from: currentMonth,
-    to: addDays(currentMonth, 0),
-  }
+  // Add default selection
+  // const defaultCalendarSelected: DateRange = {
+  //   from: currentMonth,
+  //   to: addDays(currentMonth, 0),
+  // }
+  //--------------//----------------
 
   useEffect(() => {
-    if (!calendarRange) setCalendarRange(defaultCalendarSelected)
+    if (!calendarRange) setCalendarRange(undefined)
   }, [])
 
   return (

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

@@ -9,6 +9,8 @@ interface UseFilterBarPropsType {
 }
 
 export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
+  const [selectedPath, setSelectedPath] = useState('/events')
+
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
 
@@ -69,7 +71,7 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
       }
     }
 
-    window.location.href = `${redirectUrl}${
+    window.location.href = `${redirectUrl}/${selectedPath}${
       queryParams ? `?${queryParams.toString()}` : ''
     }`
     handleSelectedFilter(false)
@@ -83,6 +85,21 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
     }
   }, [selectedFilter])
 
+  useEffect(() => {
+    let currentPath = '/events' // Default path name
+
+    if (typeof window !== 'undefined') {
+      // Get current path name
+      currentPath =
+        window.location.pathname.includes('/events') ||
+        window.location.pathname.includes('/rooms')
+          ? window.location.pathname
+          : '/events'
+
+      setSelectedPath(currentPath)
+    }
+  }, [])
+
   const handleResetFilters = () => {
     setAgeCategoryCounts({})
     handleSubmit()
@@ -94,6 +111,7 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
     ageCategoryCounts,
     categories,
     calendarRange,
+    selectedPath,
     setCalendarRange,
     setSelectedFilter,
     setAgeCategoryCounts,
@@ -102,5 +120,6 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
     handleSubmit,
     updateGuestsCount,
     handleResetFilters,
+    setSelectedPath,
   }
 }

package/src/locales/en/filterBar.json

@@ -17,5 +17,9 @@
   },
   "submit": {
     "label": "Search"
+  },
+  "tabs": {
+    "events": "Events",
+    "rooms": "Rooms"
   }
 }

package/src/locales/fi/filterBar.json

@@ -17,5 +17,9 @@
   },
   "submit": {
     "label": "Hae"
+  },
+  "tabs": {
+    "events": "Events",
+    "rooms": "Rooms"
   }
 }

package/src/themes/Default.css

@@ -11,13 +11,15 @@
   
   color: #1E1E1E;
 
-  /* Pallete */
+  /* Palette */
   --will-primary: #374269;
   --will-secondary: #374269;
   --will-grey: #ABA7AF;
   --will-white: #fff;
+  --will-black: #000;
   --will-onahau: #CDEEFF;
   --will-text: #5A5959;
+  --will-transparent-white: rgba(255, 255, 255, 0.8);
 
   /* Confines */
   --will-box-shadow: 0px 6px 11px 0px #a7a4a480;