willba-component-library 0.1.21 → 0.1.22

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -12,7 +12,7 @@
 }
 
 .will-filter-bar-underlay {
-  background-color: rgba(0,0,0,.8);
+  background-color: transparent;
   position: absolute;
   /* top:0; */
   left: 0;
@@ -30,30 +30,30 @@
 .will-filter-bar-tabs {
   display: flex;
   align-items: center;
-  width: fit-content;
+  justify-content: center;
   position: relative;
   z-index: 222;
+  background: transparent;
+  padding: 10px;
+  gap: 10px
 }
 
 /* Header */
 .will-filter-bar-header {
   display: flex;
   justify-content: space-between;
-  padding: 10px 20px;
+  padding: 10px;
   position: relative;
   z-index: 222;
-  
-  
   border-radius: 40px;
-  border-top-left-radius: 0;
-  background-color: var(--will-white);
-  
+  background-color: var(--will-white); 
 }
 
 @media (max-width: 960px) {
   .will-filter-bar-header {
     flex-direction: column;
     padding: 20px;
+    border-radius: 25px;
   }
 }
 
@@ -62,13 +62,11 @@
 .will-filter-bar-container {
   background-color: var(--will-white);
   min-height: 100px;
- 
-  padding: 90px 40px 30px 40px;
+  padding: 40px 20px ;
   position: absolute;
-  top: 45px;
+  top: 125px;
   z-index: 111;
   border-radius: 25px;
-  width: -webkit-fill-available;
   box-shadow: var(--will-box-shadow);
 }
 
@@ -81,8 +79,9 @@
   }
 
   .will-filter-bar-container {
-    margin-top: 20px;
-    padding: 30px 40px;
+    margin-top: 10px;
+    top:0;
+    padding: 30px 20px;
     position: relative;
   }
 

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

@@ -1,7 +1,8 @@
+import React from 'react'
 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,
@@ -9,7 +10,6 @@ const meta: Meta<typeof 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 = {
@@ -18,25 +18,28 @@ export const Primary: Story = {
     redirectUrl: '',
     ageCategories: [
       {
-        id: '1',
+        id: '2',
         name: 'Alle 6 vuotiaat',
         minAge: null,
         maxAge: 6,
-        minVal: 1,
+        minVal: 0,
+        sortOrder: 3,
       },
       {
-        id: '2',
+        id: '3',
         name: '6-16 vuotiaat',
         minAge: 6,
         maxAge: 17,
         minVal: 0,
+        sortOrder: 2,
       },
       {
-        id: '3',
+        id: '1',
         name: 'Aikuiset',
         minAge: 17,
         maxAge: null,
-        minVal: 0,
+        minVal: 2,
+        sortOrder: 1,
       },
     ],
     palette: {
@@ -44,4 +47,9 @@ export const Primary: Story = {
       secondary: '',
     },
   },
+  render: (args) => (
+    <div style={{ background: 'grey', padding: '30px', height: '100vh' }}>
+      <FilterBar {...args} />
+    </div>
+  ),
 }

package/src/components/FilterBar/FilterBar.tsx

@@ -104,42 +104,20 @@ export default function FilterBar({
 
         <div className="will-filter-bar-header">
           <SelectButton
-            style={fontWeightBold(selectedFilter === 1 || selectedFilter === 2)}
-            label={t('calendar.startDate')}
+            label={'When'}
+            description={'Add Check-in and -out'}
             onClick={() => handleSelectedFilter(1)}
-            date={
-              calendarRange?.from
-                ? format(calendarRange.from, 'dd.MM.yyyy')
-                : null
-            }
+            style={fontWeightBold(selectedFilter === 1)}
           />
 
           <Divider />
-
           <SelectButton
-            style={fontWeightBold(selectedFilter === 1 || selectedFilter === 2)}
-            label={t('calendar.endDate')}
+            label={'Who'}
+            description={'Add Guests'}
             onClick={() => handleSelectedFilter(2)}
-            date={
-              calendarRange?.to ? format(calendarRange.to, 'dd.MM.yyyy') : null
-            }
+            style={fontWeightBold(selectedFilter === 2)}
           />
 
-          {/* TODO - Add strapi settings to show or hide filter sections */}
-          {/* <Divider />
-          <SelectButton
-            label={t('guests.label')}
-            onClick={() => handleSelectedFilter(3)}
-            style={fontWeightBold(selectedFilter === 3)}
-          /> */}
-
-          {/* <Divider />
-          <SelectButton
-            label={t('categories.label')}
-            onClick={() => handleSelectedFilter(4)}
-            style={fontWeightBold(selectedFilter === 4)}
-          /> */}
-
           <SubmitButton onClick={handleSubmit} />
         </div>
 
@@ -147,20 +125,20 @@ export default function FilterBar({
           <div className="will-filter-bar-container">
             <CloseButton handleClose={() => handleSelectedFilter(false)} />
 
-            {(selectedFilter === 1 || selectedFilter === 2) && (
+            {selectedFilter === 1 && (
               <Calendar
                 calendarRange={calendarRange}
                 setCalendarRange={setCalendarRange}
               />
             )}
-            {selectedFilter === 3 && (
+            {selectedFilter === 2 && (
               <Guests
                 updateGuestsCount={updateGuestsCount}
                 ageCategories={ageCategories}
                 ageCategoryCounts={ageCategoryCounts}
               />
             )}
-            {selectedFilter === 4 && (
+            {selectedFilter === 3 && (
               <Categories
                 categories={categories}
                 setCategories={setCategories}
@@ -183,13 +161,15 @@ const AGE_CATEGORIES_FALLBACK = [
   {
     id: '1',
     name: 'Adults',
+    sortOrder: 1,
     minAge: null,
     maxAge: 6,
-    minVal: 1,
+    minVal: 0,
   },
   {
     id: '2',
     name: 'Kids',
+    sortOrder: 2,
     minAge: 6,
     maxAge: 17,
     minVal: 0,

package/src/components/FilterBar/FilterBarTypes.ts

@@ -8,6 +8,7 @@ export interface AgeCategoryType {
   minAge: number | null
   maxAge: number | null
   minVal: number
+  sortOrder: number
 }
 
 export interface GuestsPropsType {
@@ -22,4 +23,5 @@ export interface GuestsCountPropsType {
   updateGuestsCount: (arg1: number, arg2: number) => void
   count: number
   minVal: number
+  sortOrder: number
 }

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

@@ -13,8 +13,8 @@
   /* display: none; */
 
   position: absolute;
-  top: 80px;
-  right: 20px;
+  top: 10px;
+  right: 10px;
 
   min-height: 35px;
 }

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

@@ -3,13 +3,18 @@
   height: auto;
   background-color: transparent;
   border: none;
-  padding: 10px 20px;
+  padding: 0 20px;
   border-radius: 20px;
   cursor: pointer;
-  font-size: 15px;
+  font-size: 14px;
   text-align: initial;
 }
 
+.will-filter-bar-select-button .select-button-description {
+ font-weight: 400;
+ opacity: 0.4;
+}
+
 .will-filter-bar-select-button .select-button-wrapper {
   display: flex;
   align-items: center;
@@ -20,7 +25,8 @@
 
 @media (max-width: 960px) {
   .will-filter-bar-select-button {
-    margin: 15px 0;
+    margin: 5px 0;
+    padding: 10px 20px;
   }
 
   .will-filter-bar-select-button .select-button-wrapper {

package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx

@@ -2,7 +2,13 @@ import React from 'react'
 
 import './SelectButton.css'
 
-export default function SelectButton({ label, onClick, style, date }: any) {
+export default function SelectButton({
+  label,
+  onClick,
+  style,
+  date,
+  description,
+}: any) {
   return (
     <button
       className="will-filter-bar-select-button"
@@ -10,7 +16,10 @@ export default function SelectButton({ label, onClick, style, date }: any) {
       style={style}
     >
       <span className="select-button-wrapper">
-        <span className="select-button-label">{label}</span>
+        <div>
+          <p className="select-button-label">{label}</p>
+          <p className="select-button-description">{description}</p>
+        </div>
 
         {!!date && (
           <>

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

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

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

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

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

@@ -1,5 +1,3 @@
-/* .will-filter-bar-calendar {} */
-
 .will-calendar-filter-header {
   padding: 15px 0;
   border-bottom: 1px solid var(--will-grey);
@@ -15,11 +13,11 @@
 .will-calendar-filter-container {
   display: flex;
   justify-content: center;
-  padding-top: 20px;
 }
 
 /* Calendar overrides */
 
+
 .will-calendar-filter-container .DayPicker {
   font-size: 25px; /* Adjust this value to make the DayPicker bigger */
 }
@@ -65,6 +63,12 @@
   opacity: 1;
 }
 
+.my-today:not(.rdp-day_selected) { 
+  font-weight: 700;
+  opacity: 1;
+  color: var(--will-primary);
+}
+
 @media (max-width: 960px) {
   .will-calendar-filter-container .rdp-month .rdp-nav {
     border: none;

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

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
-//import { useTranslation } from 'react-i18next'
 import { DateRange, DayPicker } from 'react-day-picker'
-import { addDays } from 'date-fns'
+import { addDays, startOfDay, addMonths } from 'date-fns'
 import { useMediaQuery } from 'react-responsive'
 
 import 'react-day-picker/dist/style.css'
@@ -12,21 +11,20 @@ interface CalendarPropsType {
   setCalendarRange: (range: DateRange | undefined) => void
 }
 
-const currentMonth = new Date()
-
 export default function Calendar({
   calendarRange,
   setCalendarRange,
 }: CalendarPropsType) {
-  //const { t } = useTranslation('filterBar')
   const isTablet = useMediaQuery({ maxWidth: 960 })
 
-  // Add default selection
-  // const defaultCalendarSelected: DateRange = {
-  //   from: currentMonth,
-  //   to: addDays(currentMonth, 0),
-  // }
-  //--------------//----------------
+  const today = startOfDay(new Date())
+
+  const disabledDays = [
+    {
+      from: addDays(today, -2),
+      to: addDays(today, -50),
+    },
+  ]
 
   useEffect(() => {
     if (!calendarRange) setCalendarRange(undefined)
@@ -44,9 +42,18 @@ export default function Calendar({
           showOutsideDays
           numberOfMonths={!isTablet ? 2 : 1}
           weekStartsOn={1}
-          defaultMonth={currentMonth}
           selected={calendarRange}
           onSelect={setCalendarRange}
+          modifiersClassNames={{
+            today: 'my-today',
+          }}
+          modifiersStyles={{
+            disabled: { opacity: '0.2' },
+          }}
+          captionLayout="dropdown-buttons"
+          defaultMonth={today}
+          disabled={disabledDays}
+          fromMonth={today}
         />
       </div>
     </div>

package/src/components/FilterBar/components/divider/Divider.css

@@ -1,13 +1,12 @@
 .will-filter-bar-divider {
   width: 1px;
   margin: 0 10px;
-  height: 35px;
   background-color: #384265;
 }
 
 @media (max-width: 960px) {
   .will-filter-bar-divider {
-    width: 100%;
+    width: auto;
     margin: 0 10px;
     height: 1px;
     background-color: #384265;

package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css

@@ -6,21 +6,18 @@
 .will-guests-filter-inner {
   display: flex;
   align-items: center;
-}
-
-.will-guests-filter-inner {
+  justify-content: space-between;
   margin-top: 30px;
-  margin-right: 50px;
 }
 
 .will-guests-filter-label {
   display: block;
-  margin-right: 20px;
-  font-weight: bold;
+  font-weight: 600;
+  margin-bottom: 10px;
  
 }
 
-.will-guests-filter-inner > div {
+.will-guests-filter-inner .will-guests-filter-counter {
   display: flex;
   align-items: center;
 }
@@ -31,12 +28,13 @@
   text-align: center;
 }
 
-.will-guests-filter-button {
+.will-guests-filter-counter-button {
   border-radius: 50%;
   border: none;
-  background-color: var(--will-onahau);
-  width: 25px;
-  height: 25px;
+  background-color: transparent;
+  border: 1px solid var(--will-grey);
+  width: 30px;
+  height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,6 +42,10 @@
   cursor: pointer;
 }
 
+.will-guests-filter-counter-button:hover {
+  background-color: var(--will-onahau);
+}
+
 @media (max-width: 960px) {
 
   .will-guests-filter-inner {

package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx

@@ -6,6 +6,7 @@ import './GuestCount.css'
 
 export default function GuestCount({
   label,
+  sortOrder,
   id,
   updateGuestsCount,
   count,
@@ -22,11 +23,12 @@ export default function GuestCount({
   }
 
   return (
-    <div className="will-guests-filter-inner">
-      <span className="will-guests-filter-label">{label}</span>
-      <div>
+    <div className="will-guests-filter-inner" style={{ order: `${sortOrder}` }}>
+      <p className="will-guests-filter-label">{label}</p>
+
+      <div className="will-guests-filter-counter">
         <button
-          className="will-guests-filter-button"
+          className="will-guests-filter-counter-button"
           onClick={handleDecrement}
           disabled={minVal && count < 2 ? true : false}
           style={{
@@ -42,7 +44,10 @@ export default function GuestCount({
           -
         </button>
         <span className="will-guests-filter-count">{count}</span>
-        <button className="will-guests-filter-button" onClick={handleIncrement}>
+        <button
+          className="will-guests-filter-counter-button"
+          onClick={handleIncrement}
+        >
           +
         </button>
       </div>

package/src/components/FilterBar/components/guests/Guests.css

@@ -3,8 +3,7 @@
 }
 
 .will-guests-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
+  font-size: 22px;
   margin: 10px 0;
 }
 
@@ -17,11 +16,17 @@
 
 .will-guests-filter-container {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  min-width: 300px;
+
 }
 
 
 @media (max-width: 960px) {
+  .will-guests-filter-title {
+    font-size: 18px;
+  }
+
   .will-guests-filter-container {
    margin-top: 15px;
   }

package/src/components/FilterBar/components/guests/Guests.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 
 import GuestCount from './GuestCount/GuestCount'
 import { AgeCategoryCount, GuestsPropsType } from '../../FilterBarTypes'
@@ -11,12 +10,9 @@ export default function Guests({
   updateGuestsCount,
   ageCategoryCounts,
 }: GuestsPropsType) {
-  const { t } = useTranslation('filterBar')
-
   return (
     <div className="will-filter-bar-guests">
-      <h3 className="will-guests-filter-title">{t('guests.title')}</h3>
-      <p className="will-guests-filter-subtitle">{t('guests.subtitle')}</p>
+      <h3 className="will-guests-filter-title">Who's coming?</h3>
 
       <div className="will-guests-filter-container">
         {ageCategories?.map((category) => (
@@ -25,6 +21,7 @@ export default function Guests({
             id={parseInt(category.id)}
             label={category.name}
             minVal={category.minVal}
+            sortOrder={category.sortOrder}
             updateGuestsCount={updateGuestsCount}
             count={
               (ageCategoryCounts as AgeCategoryCount)[category.id] ||

package/src/themes/Default.css

@@ -19,7 +19,7 @@
   --will-black: #000;
   --will-onahau: #CDEEFF;
   --will-text: #5A5959;
-  --will-transparent-white: rgba(255, 255, 255, 0.8);
+  --will-transparent-white: rgba(255, 255, 255, 0.30);
 
   /* Confines */
   --will-box-shadow: 0px 6px 11px 0px #a7a4a480;