willba-component-library 0.1.6 → 0.1.11

package/lib/themes/useTheme.d.ts

@@ -1,5 +1,14 @@
-type ThemeProps = {
-    vendor?: string;
-};
-export default function useTheme({ vendor }: ThemeProps): "" | "will-root-kis" | "will-root-paj";
+import { CSSProperties } from 'react';
+export interface Palette {
+    primary: string;
+    secondary: string;
+}
+export interface ThemeProps {
+    palette?: Palette;
+}
+interface CustomPaletteTypes extends CSSProperties {
+    '--will-primary'?: string;
+    '--will-secondary'?: string;
+}
+export default function useTheme({ palette }: ThemeProps): CustomPaletteTypes;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.1.6",
+  "version": "0.1.11",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -18,7 +18,7 @@
     "classnames": "^2.3.2",
     "react-day-picker": "^8.8.0",
     "react-i18next": "^13.1.2",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.11.0",
     "react-responsive": "^9.0.2"
   },
   "peerDependencies": {

package/src/components/FilterBar/FilterBar.css

@@ -14,13 +14,15 @@
 .will-filter-bar-underlay {
   background-color: rgba(0,0,0,.8);
   position: absolute;
-  top:0;
+  /* top:0; */
   left: 0;
   width: 100%;
   height: 100%;
   cursor: pointer;
   min-height: 200vh;
   z-index: 88888;
+
+  transform: translateY(-50%);
 }
 
 /* Header */
@@ -70,7 +72,7 @@
   .will-filter-bar-container {
     margin-top: 20px;
     padding: 30px 40px;
-    position: initial;
+    position: relative;
   }
 
   .isMobileAbsolute {

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

@@ -14,8 +14,8 @@ type Story = StoryObj<typeof FilterBar>
 
 export const Primary: Story = {
   args: {
-    vendor: '',
     language: '',
+    redirectUrl: '',
     ageCategories: [
       {
         id: '1',
@@ -39,6 +39,9 @@ export const Primary: Story = {
         minVal: 0,
       },
     ],
-    redirectUrl: '',
+    palette: {
+      primary: '',
+      secondary: '',
+    },
   },
 }

package/src/components/FilterBar/FilterBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import Divider from './components/divider/Divider'
@@ -8,39 +8,41 @@ import Calendar from './components/calendar/Calendar'
 import Guests from './components/guests/Guests'
 import Categories from './components/categories/Categories'
 
-import useTheme from '../../themes/useTheme'
+import useTheme, { Palette } from '../../themes/useTheme'
 import useFilterBar from './hooks/useFilterBar'
-import { AgeCategoryType } from './FilterBarTypes'
 
 import './FilterBar.css'
 import '../../themes/Default.css'
 import i18n from '../../i18n'
 import CloseButton from './components/close-button/CloseButton'
+import { AgeCategoryType } from './FilterBarTypes'
 
-interface FilterBarProps {
+export interface FilterBarProps {
   vendor?: string
   language?: string
   ageCategories?: AgeCategoryType[]
   redirectUrl: string
+  palette: Palette
 }
 
 export default function FilterBar({
-  vendor,
   language,
   ageCategories = AGE_CATEGORIES_FALLBACK,
   redirectUrl = REDIRECT_URL_FALLBACK,
+  palette,
 }: FilterBarProps) {
-  const themeClass = useTheme({ vendor })
-  const [rerenderKey, setRerenderKey] = useState(0)
+  const themePalette = useTheme({ palette })
 
+  // Translations
+  const [rerenderKey, setRerenderKey] = useState(0)
   useEffect(() => {
     i18n.changeLanguage(language)
 
     setRerenderKey((prevKey) => prevKey + 1)
   }, [language])
-
   const { t } = useTranslation('filterBar')
 
+  // Filters
   const {
     selectedFilter,
     ageCategoryCounts,
@@ -51,9 +53,19 @@ export default function FilterBar({
     handleSelectedFilter,
     handleSubmit,
     updateGuestsCount,
-    handleResetFilters,
   } = useFilterBar({ redirectUrl })
 
+  // Scroll in to view
+  const targetElementRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => {
+    if (targetElementRef.current) {
+      targetElementRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      })
+    }
+  }, [selectedFilter])
+
   return (
     <>
       {selectedFilter && (
@@ -65,11 +77,10 @@ export default function FilterBar({
         />
       )}
       <div
-        className={`will-root ${themeClass} ${
-          selectedFilter ? 'isMobileAbsolute' : ''
-        }`}
+        className={`will-root ${selectedFilter ? 'isMobileAbsolute' : ''}`}
+        style={themePalette}
       >
-        <div className="will-filter-bar-header">
+        <div className="will-filter-bar-header" ref={targetElementRef}>
           <SelectButton
             style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
             label={t('calendar.startDate')}
@@ -82,7 +93,7 @@ export default function FilterBar({
             onClick={() => handleSelectedFilter(2)}
           />
 
-          {/* TODO - Add strapi settings to add or remove functionality */}
+          {/* TODO - Add strapi settings to show or hide filter sections */}
           {/* <Divider />
           <SelectButton
             label={t('guests.label')}
@@ -98,12 +109,12 @@ export default function FilterBar({
           /> */}
 
           <SubmitButton onClick={handleSubmit} />
-
-          <CloseButton handleClose={handleResetFilters} />
         </div>
 
         {selectedFilter && (
           <div className="will-filter-bar-container">
+            <CloseButton handleClose={() => handleSelectedFilter(false)} />
+
             {(selectedFilter === 1 || selectedFilter === 2) && (
               <Calendar
                 calendarRange={calendarRange}

package/src/components/FilterBar/components/close-button/CloseButton.css

@@ -1,17 +1,21 @@
 .will-filter-bar-close-button {
   width: auto;
   height: auto;
-  background-color: var(--will-grey);
-  color: var(--will-white);
+  /* background-color: var(--will-grey); */
+  color: var(--will-grey);
   padding: 2px 7px;
   border-radius: 50%;
   cursor: pointer;
   border: none;
   display: flex;
   align-items: center;
-  font-size: 25px;
-  margin-left: 15px;
+  font-size: 23px;
   display: none;
+
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
 }
 
 @media (max-width: 960px) {
@@ -19,7 +23,7 @@
     min-height: 35px;
     border-radius: 25px;
     margin-left:0;
-    margin-bottom: 25px;
+   
     display: flex;
     justify-content: center;
   }

package/src/components/FilterBar/components/submit-button/SubmitButton.css

@@ -22,6 +22,6 @@
 @media (max-width: 960px) {
   .will-filter-bar-submit-button {
     justify-content: center;
-    margin-bottom: 25px;
+    margin-bottom: 15px;
   }
 }

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

@@ -60,7 +60,7 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
         : '',
       endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
       categories,
-      ageCategoryCounts: JSON.stringify(ageCategoryCounts),
+      //ageCategoryCounts: JSON.stringify(ageCategoryCounts),
     }
 
     for (const [key, value] of Object.entries(params)) {

package/src/themes/Default.css

@@ -13,6 +13,7 @@
 
   /* Pallete */
   --will-primary: #374269;
+  --will-secondary: #374269;
   --will-grey: #ABA7AF;
   --will-white: #fff;
   --will-onahau: #CDEEFF;
@@ -39,14 +40,4 @@
 .will-root p, h1, h2, h3, h4, h5, h6, span {
   margin: 0;
   padding: 0;
-} 
-
-/* Overrides as themes */
-
-.will-root-kis {
-  --will-primary: #374269;
-}
-
-.will-root-paj {
-  --will-primary: #1897D8;
 }

package/src/themes/useTheme.tsx

@@ -1,14 +1,24 @@
-type ThemeProps = {
-  vendor?: string
+import { CSSProperties } from 'react'
+
+export interface Palette {
+  primary: string
+  secondary: string
+}
+
+export interface ThemeProps {
+  palette?: Palette
+}
+
+interface CustomPaletteTypes extends CSSProperties {
+  '--will-primary'?: string
+  '--will-secondary'?: string
 }
 
-export default function useTheme({ vendor }: ThemeProps) {
-  const themeClass =
-    vendor === 'Kisakallio'
-      ? 'will-root-kis'
-      : vendor === 'Pajulahti'
-      ? 'will-root-paj'
-      : ''
+export default function useTheme({ palette }: ThemeProps) {
+  const themePalette: CustomPaletteTypes = {
+    '--will-primary': palette?.primary,
+    '--will-secondary': palette?.secondary,
+  }
 
-  return themeClass
+  return themePalette
 }