willba-component-library 0.1.72 → 0.1.73

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -38,9 +38,11 @@
   z-index: 222;
   border-radius: 40px;
   background-color: var(--will-white);
-  box-shadow: 0px 3px 10px 0px lightgrey; 
+  
 }
 
+
+
 @media (max-width: 960px) {
   .will-filter-bar-header {
     flex-direction: column;
@@ -78,3 +80,15 @@
   }
 }
 
+/* Common */
+
+.will-filter-bar-header.dark,
+.will-filter-bar-container.dark {
+  box-shadow: var(--will-box-shadow-dark)
+}
+
+.will-filter-bar-header.light,
+.will-filter-bar-container.light {
+  box-shadow: var(--will-box-shadow-light)
+}
+

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

@@ -43,13 +43,15 @@ export const Primary: Story = {
       },
     ],
     palette: {
-      primary: '#fff',
+      primary: '',
       secondary: '',
     },
     currentViewApply: 'roomFilters',
+    mode: 'dark',
+    defaultTab: '/rooms',
   },
   render: (args) => (
-    <div style={{ background: 'grey', padding: '30px', height: '100vh' }}>
+    <div style={{ background: 'white', padding: '30px', height: '100vh' }}>
       <FilterBar {...args} onSubmit={false ? null : (val: Filters) => null} />
     </div>
   ),

package/src/components/FilterBar/FilterBar.tsx

@@ -33,7 +33,6 @@ import {
 import './FilterBar.css'
 
 export type FilterBarProps = {
-  vendor?: string
   language?: string
   ageCategories?: AgeCategoryType[]
   redirectUrl?: string
@@ -41,7 +40,9 @@ export type FilterBarProps = {
   currentViewApply?: string
   onSubmit?: ((val: Filters) => void) | null
   fullWidth?: boolean
-  calendarOffset: CalendarOffset
+  calendarOffset?: CalendarOffset
+  mode?: string
+  defaultTab?: string
 }
 
 export default function FilterBar({
@@ -53,6 +54,8 @@ export default function FilterBar({
   onSubmit,
   fullWidth,
   calendarOffset,
+  mode,
+  defaultTab,
 }: FilterBarProps) {
   const themePalette = useTheme({ palette })
 
@@ -79,6 +82,7 @@ export default function FilterBar({
     currentViewApply,
     ageCategories,
     onSubmit,
+    defaultTab,
   })
 
   // Default selected tab when tabs are hidden
@@ -131,6 +135,7 @@ export default function FilterBar({
               setSelectedPath(Pages.EVENTS), handleResetFilters()
             }}
             active={selectedPath === Pages.EVENTS}
+            mode={mode}
           />
           <TabButton
             label={t('tabs.rooms')}
@@ -138,12 +143,13 @@ export default function FilterBar({
               setSelectedPath(Pages.ROOMS), handleResetFilters()
             }}
             active={selectedPath === Pages.ROOMS}
+            mode={mode}
           />
         </div>
       )}
 
       <div
-        className="will-filter-bar-header"
+        className={`will-filter-bar-header ${mode || 'dark'}`}
         ref={currentViewApply ? targetFilterBarRef : null}
       >
         <SelectButton
@@ -177,7 +183,7 @@ export default function FilterBar({
 
       {selectedFilter && (
         <div
-          className="will-filter-bar-container"
+          className={`will-filter-bar-container ${mode || 'dark'}`}
           style={currentViewApply && !isMobile ? { top: 66 } : {}}
         >
           <CloseButton handleClose={() => handleSelectedFilter(false)} />

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

@@ -12,15 +12,25 @@
     user-select: none;
     font-weight: 600;
     border-radius: 50px;
+  }
+
+  .will-filter-bar-tab-button.light {
     color: var(--will-white)
   }
 
- 
+  .will-filter-bar-tab-button.dark {
+    color: var(--will-black)
+  }
+
+  .will-filter-bar-tab-button.light.active,
   .will-filter-bar-tab-button:hover {
     background-color: var(--will-transparent-white);
   }
 
-  .will-filter-bar-tab-button.active {
-    background-color: var(--will-transparent-white);
-   
-  }
+  .will-filter-bar-tab-button.dark.active,
+  .will-filter-bar-tab-button:hover {
+    background-color: var(--will-transparent-black);
+  }
+
+ 
+

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

@@ -6,12 +6,15 @@ type Props = {
   onClick?: () => void
   label: string
   active?: boolean
+  mode?: string
 }
 
-export const TabButton = ({ onClick, label, active }: Props) => {
+export const TabButton = ({ onClick, label, active, mode }: Props) => {
   return (
     <button
-      className={`will-filter-bar-tab-button ${active && 'active'}`}
+      className={`will-filter-bar-tab-button ${mode || 'dark'} ${
+        active && 'active'
+      } `}
       onClick={onClick}
     >
       {label}

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

@@ -12,7 +12,7 @@ import './Calendar.css'
 type Props = {
   calendarRange: DateRange | undefined
   setCalendarRange: (range: DateRange | undefined) => void
-  calendarOffset: CalendarOffset
+  calendarOffset?: CalendarOffset
   selectedPath: string
   locale?: string
 }
@@ -36,9 +36,11 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
 
     const today = startOfDay(new Date())
 
-    const daysToOffsetCalendar = Object.entries(calendarOffset)?.find(
-      (page) => selectedPath.substring(1) === page[0]
-    )
+    const daysToOffsetCalendar = calendarOffset
+      ? Object.entries(calendarOffset)?.find(
+          (page) => selectedPath.substring(1) === page[0]
+        )
+      : null
 
     const disabledDays = [
       {

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

@@ -14,6 +14,7 @@ type Props = {
   currentViewApply?: string
   ageCategories?: AgeCategoryType[]
   onSubmit?: ((val: Filters) => void) | null
+  defaultTab?: string
 }
 
 export const useFilterBar = ({
@@ -21,6 +22,7 @@ export const useFilterBar = ({
   currentViewApply,
   ageCategories,
   onSubmit,
+  defaultTab,
 }: Props) => {
   const [selectedPath, setSelectedPath] = useState(Pages.EVENTS)
   const [selectedFilter, setSelectedFilter] = useState<string | boolean>(false)
@@ -69,12 +71,15 @@ export const useFilterBar = ({
   useEffect(() => {
     // Handle default selected tab
     if (typeof window === 'undefined') return
-
-    const currentPath = window.location.pathname.includes(Pages.EVENTS)
-      ? Pages.EVENTS
-      : window.location.pathname.includes(Pages.ROOMS)
-      ? Pages.ROOMS
-      : Pages.EVENTS
+    console.log(defaultTab)
+    const currentPath =
+      defaultTab === Pages.EVENTS ||
+      window.location.pathname.includes(Pages.EVENTS)
+        ? Pages.EVENTS
+        : defaultTab === Pages.ROOMS ||
+          window.location.pathname.includes(Pages.ROOMS)
+        ? Pages.ROOMS
+        : Pages.EVENTS
 
     setSelectedPath(currentPath)
   }, [])

package/src/themes/Default.css

@@ -20,9 +20,11 @@
   --will-onahau: #CDEEFF;
   --will-text: #5A5959;
   --will-transparent-white: rgba(255, 255, 255, 0.30);
+  --will-transparent-black: rgba(171, 167, 175, 0.30);
 
   /* Confines */
-  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;
+  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;
+  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;
 
   /* Breakpoints */