willba-component-library 0.1.12 → 0.1.14

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

@@ -1,47 +1,47 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import FilterBar from './FilterBar'
-
-// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
-const meta: Meta<typeof FilterBar> = {
-  title: 'Components/FilterBar',
-  component: FilterBar,
-}
-
-export default meta
-
-// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
-type Story = StoryObj<typeof FilterBar>
-
-export const Primary: Story = {
-  args: {
-    language: '',
-    redirectUrl: '',
-    ageCategories: [
-      {
-        id: '1',
-        name: 'Alle 6 vuotiaat',
-        minAge: null,
-        maxAge: 6,
-        minVal: 1,
-      },
-      {
-        id: '2',
-        name: '6-16 vuotiaat',
-        minAge: 6,
-        maxAge: 17,
-        minVal: 0,
-      },
-      {
-        id: '3',
-        name: 'Aikuiset',
-        minAge: 17,
-        maxAge: null,
-        minVal: 0,
-      },
-    ],
-    palette: {
-      primary: '',
-      secondary: '',
-    },
-  },
-}
+import type { Meta, StoryObj } from '@storybook/react'
+import FilterBar from './FilterBar'
+
+// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
+const meta: Meta<typeof FilterBar> = {
+  title: 'Components/FilterBar',
+  component: FilterBar,
+}
+
+export default meta
+
+// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
+type Story = StoryObj<typeof FilterBar>
+
+export const Primary: Story = {
+  args: {
+    language: '',
+    redirectUrl: '',
+    ageCategories: [
+      {
+        id: '1',
+        name: 'Alle 6 vuotiaat',
+        minAge: null,
+        maxAge: 6,
+        minVal: 1,
+      },
+      {
+        id: '2',
+        name: '6-16 vuotiaat',
+        minAge: 6,
+        maxAge: 17,
+        minVal: 0,
+      },
+      {
+        id: '3',
+        name: 'Aikuiset',
+        minAge: 17,
+        maxAge: null,
+        minVal: 0,
+      },
+    ],
+    palette: {
+      primary: '',
+      secondary: '',
+    },
+  },
+}

package/src/components/FilterBar/FilterBar.tsx

@@ -1,171 +1,180 @@
-import React, { useEffect, useState, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import Divider from './components/divider/Divider'
-import SelectButton from './components/select-button/SelectButton'
-import SubmitButton from './components/submit-button/SubmitButton'
-import Calendar from './components/calendar/Calendar'
-import Guests from './components/guests/Guests'
-import Categories from './components/categories/Categories'
-
-import useTheme, { Palette } from '../../themes/useTheme'
-import useFilterBar from './hooks/useFilterBar'
-
-import './FilterBar.css'
-import '../../themes/Default.css'
-import i18n from '../../i18n'
-import CloseButton from './components/close-button/CloseButton'
-import { AgeCategoryType } from './FilterBarTypes'
-
-export interface FilterBarProps {
-  vendor?: string
-  language?: string
-  ageCategories?: AgeCategoryType[]
-  redirectUrl: string
-  palette?: Palette
-}
-
-export default function FilterBar({
-  language,
-  ageCategories = AGE_CATEGORIES_FALLBACK,
-  redirectUrl = REDIRECT_URL_FALLBACK,
-  palette,
-}: FilterBarProps) {
-  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,
-    categories,
-    calendarRange,
-    setCalendarRange,
-    setCategories,
-    handleSelectedFilter,
-    handleSubmit,
-    updateGuestsCount,
-  } = useFilterBar({ redirectUrl })
-
-  // Scroll in to view
-
-  const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
-  useEffect(() => {
-    if (targetFilterBarRef.current && selectedFilter) {
-      window.scrollTo({
-        behavior: 'smooth',
-        top:
-          targetFilterBarRef.current.getBoundingClientRect().top -
-          document.body.getBoundingClientRect().top -
-          30,
-      })
-    }
-  }, [selectedFilter])
-
-  return (
-    <>
-      {selectedFilter && (
-        <div
-          className={`will-filter-bar will-filter-bar-underlay`}
-          onClick={() => {
-            handleSelectedFilter(false)
-          }}
-        />
-      )}
-      <div
-        className={`will-root ${selectedFilter ? 'isMobileAbsolute' : ''}`}
-        style={themePalette}
-      >
-        <div className="will-filter-bar-header" ref={targetFilterBarRef}>
-          <SelectButton
-            style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
-            label={t('calendar.startDate')}
-            onClick={() => handleSelectedFilter(1)}
-          />
-          <Divider />
-          <SelectButton
-            style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
-            label={t('calendar.endDate')}
-            onClick={() => handleSelectedFilter(2)}
-          />
-
-          {/* TODO - Add strapi settings to show or hide filter sections */}
-          {/* <Divider />
-          <SelectButton
-            label={t('guests.label')}
-            onClick={() => handleSelectedFilter(3)}
-            style={fontWigthBold(selectedFilter === 3)}
-          /> */}
-
-          {/* <Divider />
-          <SelectButton
-            label={t('categories.label')}
-            onClick={() => handleSelectedFilter(4)}
-            style={fontWigthBold(selectedFilter === 4)}
-          /> */}
-
-          <SubmitButton onClick={handleSubmit} />
-        </div>
-
-        {selectedFilter && (
-          <div className="will-filter-bar-container">
-            <CloseButton handleClose={() => handleSelectedFilter(false)} />
-
-            {(selectedFilter === 1 || selectedFilter === 2) && (
-              <Calendar
-                calendarRange={calendarRange}
-                setCalendarRange={setCalendarRange}
-              />
-            )}
-            {selectedFilter === 3 && (
-              <Guests
-                updateGuestsCount={updateGuestsCount}
-                ageCategories={ageCategories}
-                ageCategoryCounts={ageCategoryCounts}
-              />
-            )}
-            {selectedFilter === 4 && (
-              <Categories
-                categories={categories}
-                setCategories={setCategories}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </>
-  )
-}
-
-////////////
-
-const fontWigthBold = (input: boolean) => {
-  return { fontWeight: input ? 'bold' : 'initial' }
-}
-
-const AGE_CATEGORIES_FALLBACK = [
-  {
-    id: '1',
-    name: 'Adults',
-    minAge: null,
-    maxAge: 6,
-    minVal: 1,
-  },
-  {
-    id: '2',
-    name: 'Kids',
-    minAge: 6,
-    maxAge: 17,
-    minVal: 0,
-  },
-]
-
-const REDIRECT_URL_FALLBACK = 'http://localhost:3000/'
+import React, { useEffect, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { format } from 'date-fns'
+
+import Divider from './components/divider/Divider'
+import SelectButton from './components/buttons/select-button/SelectButton'
+import SubmitButton from './components/buttons/submit-button/SubmitButton'
+import Calendar from './components/calendar/Calendar'
+import Guests from './components/guests/Guests'
+import Categories from './components/categories/Categories'
+
+import useTheme, { Palette } from '../../themes/useTheme'
+import useFilterBar from './hooks/useFilterBar'
+
+import './FilterBar.css'
+import '../../themes/Default.css'
+import i18n from '../../i18n'
+import CloseButton from './components/buttons/close-button/CloseButton'
+import { AgeCategoryType } from './FilterBarTypes'
+
+export interface FilterBarProps {
+  vendor?: string
+  language?: string
+  ageCategories?: AgeCategoryType[]
+  redirectUrl: string
+  palette?: Palette
+}
+
+export default function FilterBar({
+  language,
+  ageCategories = AGE_CATEGORIES_FALLBACK,
+  redirectUrl = REDIRECT_URL_FALLBACK,
+  palette,
+}: FilterBarProps) {
+  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,
+    categories,
+    calendarRange,
+    setCalendarRange,
+    setCategories,
+    handleSelectedFilter,
+    handleSubmit,
+    updateGuestsCount,
+  } = useFilterBar({ redirectUrl })
+
+  // Scroll in to view
+
+  const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => {
+    if (targetFilterBarRef.current && selectedFilter) {
+      window.scrollTo({
+        behavior: 'smooth',
+        top:
+          targetFilterBarRef.current.getBoundingClientRect().top -
+          document.body.getBoundingClientRect().top -
+          30,
+      })
+    }
+  }, [selectedFilter])
+
+  return (
+    <>
+      {selectedFilter && (
+        <div
+          className={`will-filter-bar will-filter-bar-underlay`}
+          onClick={() => {
+            handleSelectedFilter(false)
+          }}
+        />
+      )}
+      <div
+        className={`will-root ${selectedFilter ? 'isMobileAbsolute' : ''}`}
+        style={themePalette}
+      >
+        <div className="will-filter-bar-header" ref={targetFilterBarRef}>
+          <SelectButton
+            style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
+            label={t('calendar.startDate')}
+            onClick={() => handleSelectedFilter(1)}
+            date={
+              calendarRange?.from
+                ? format(calendarRange.from, 'dd.MM.yyyy')
+                : null
+            }
+          />
+          <Divider />
+          <SelectButton
+            style={fontWigthBold(selectedFilter === 1 || selectedFilter === 2)}
+            label={t('calendar.endDate')}
+            onClick={() => handleSelectedFilter(2)}
+            date={
+              calendarRange?.to ? format(calendarRange.to, 'dd.MM.yyyy') : null
+            }
+          />
+
+          {/* TODO - Add strapi settings to show or hide filter sections */}
+          {/* <Divider />
+          <SelectButton
+            label={t('guests.label')}
+            onClick={() => handleSelectedFilter(3)}
+            style={fontWigthBold(selectedFilter === 3)}
+          /> */}
+
+          {/* <Divider />
+          <SelectButton
+            label={t('categories.label')}
+            onClick={() => handleSelectedFilter(4)}
+            style={fontWigthBold(selectedFilter === 4)}
+          /> */}
+
+          <SubmitButton onClick={handleSubmit} />
+        </div>
+
+        {selectedFilter && (
+          <div className="will-filter-bar-container">
+            <CloseButton handleClose={() => handleSelectedFilter(false)} />
+
+            {(selectedFilter === 1 || selectedFilter === 2) && (
+              <Calendar
+                calendarRange={calendarRange}
+                setCalendarRange={setCalendarRange}
+              />
+            )}
+            {selectedFilter === 3 && (
+              <Guests
+                updateGuestsCount={updateGuestsCount}
+                ageCategories={ageCategories}
+                ageCategoryCounts={ageCategoryCounts}
+              />
+            )}
+            {selectedFilter === 4 && (
+              <Categories
+                categories={categories}
+                setCategories={setCategories}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+////////////
+
+const fontWigthBold = (input: boolean) => {
+  return { fontWeight: input ? 'bold' : 'initial' }
+}
+
+const AGE_CATEGORIES_FALLBACK = [
+  {
+    id: '1',
+    name: 'Adults',
+    minAge: null,
+    maxAge: 6,
+    minVal: 1,
+  },
+  {
+    id: '2',
+    name: 'Kids',
+    minAge: 6,
+    maxAge: 17,
+    minVal: 0,
+  },
+]
+
+const REDIRECT_URL_FALLBACK = 'http://localhost:3000/'

package/src/components/FilterBar/FilterBarTypes.ts

@@ -1,25 +1,25 @@
-export interface AgeCategoryCount {
-  [categoryId: string]: number
-}
-
-export interface AgeCategoryType {
-  id: string
-  name: string
-  minAge: number | null
-  maxAge: number | null
-  minVal: number
-}
-
-export interface GuestsPropsType {
-  ageCategories: AgeCategoryType[]
-  updateGuestsCount: (arg1: number, arg2: number) => void
-  ageCategoryCounts: AgeCategoryCount | {}
-}
-
-export interface GuestsCountPropsType {
-  label: string
-  id: number
-  updateGuestsCount: (arg1: number, arg2: number) => void
-  count: number
-  minVal: number
-}
+export interface AgeCategoryCount {
+  [categoryId: string]: number
+}
+
+export interface AgeCategoryType {
+  id: string
+  name: string
+  minAge: number | null
+  maxAge: number | null
+  minVal: number
+}
+
+export interface GuestsPropsType {
+  ageCategories: AgeCategoryType[]
+  updateGuestsCount: (arg1: number, arg2: number) => void
+  ageCategoryCounts: AgeCategoryCount | {}
+}
+
+export interface GuestsCountPropsType {
+  label: string
+  id: number
+  updateGuestsCount: (arg1: number, arg2: number) => void
+  count: number
+  minVal: number
+}

package/src/components/FilterBar/components/{close-button → buttons/close-button}/CloseButton.css

@@ -1,30 +1,33 @@
-.will-filter-bar-close-button {
-  width: auto;
-  height: auto;
-  /* 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: 23px;
-  display: none;
-
-  position: absolute;
-  top: 10px;
-  right: 10px;
-
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-close-button {
-    min-height: 35px;
-    border-radius: 25px;
-    margin-left:0;
-   
-    display: flex;
-    justify-content: center;
-  }
-}
+.will-filter-bar-close-button {
+  width: auto;
+  height: auto;
+  /* 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: 23px;
+  /* display: none; */
+
+  position: absolute;
+  top: 80px;
+  right: 20px;
+
+  min-height: 35px;
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-close-button {
+    top: 10px;
+    right: 10px;
+
+    border-radius: 25px;
+    margin-left:0;
+   
+    display: flex;
+    justify-content: center;
+  }
+}

package/src/components/FilterBar/components/{close-button → buttons/close-button}/CloseButton.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
-import { IoIosCloseCircleOutline } from 'react-icons/io'
-
-import './CloseButton.css'
-
-interface CloseButtonPropsType {
-  handleClose: () => void
-}
-
-export default function CloseButton({ handleClose }: CloseButtonPropsType) {
-  return (
-    <button className="will-filter-bar-close-button" onClick={handleClose}>
-      <IoIosCloseCircleOutline />
-    </button>
-  )
-}
+import React from 'react'
+import { IoIosCloseCircleOutline } from 'react-icons/io'
+
+import './CloseButton.css'
+
+interface CloseButtonPropsType {
+  handleClose: () => void
+}
+
+export default function CloseButton({ handleClose }: CloseButtonPropsType) {
+  return (
+    <button className="will-filter-bar-close-button" onClick={handleClose}>
+      <IoIosCloseCircleOutline />
+    </button>
+  )
+}

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

@@ -1,20 +1,36 @@
-.will-filter-bar-select-button {
-  width: 100%;
-  height: auto;
-  background-color: transparent;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 15px;
-  text-align: initial;
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-select-button {
-    margin: 15px 0;
-    text-align: center;
-  }
-}
-
-
+.will-filter-bar-select-button {
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 15px;
+  text-align: initial;
+}
+
+.will-filter-bar-select-button .select-button-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+ 
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-select-button {
+    margin: 15px 0;
+  }
+
+  .will-filter-bar-select-button .select-button-wrapper {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .will-filter-bar-select-button .select-button-divider {
+    display: none
+  }
+}
+
+