willba-component-library 0.1.12 → 0.1.14

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import './SelectButton.css'
+
+export default function SelectButton({ label, onClick, style, date }: any) {
+  return (
+    <button
+      className="will-filter-bar-select-button"
+      onClick={onClick}
+      style={style}
+    >
+      <span className="select-button-wrapper">
+        <span className="select-button-label">{label}</span>
+
+        {!!date && (
+          <>
+            <span className="select-button-divider">|</span>
+            <span className="select-button-date"> {date}</span>
+          </>
+        )}
+      </span>
+    </button>
+  )
+}

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

@@ -1,27 +1,27 @@
-.will-filter-bar-submit-button {
-  width: auto;
-  height: auto;
-  background-color: var(--will-primary);
-  color: var(--will-white);
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  border: none;
-  white-space: nowrap;
-  text-transform: uppercase;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-}
-
-.will-filter-bar-submit-button span {
- margin-right: 10px;
- display: flex;
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-submit-button {
-    justify-content: center;
-    margin-bottom: 15px;
-  }
-}
+.will-filter-bar-submit-button {
+  width: auto;
+  height: auto;
+  background-color: var(--will-primary);
+  color: var(--will-white);
+  padding: 10px 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  border: none;
+  white-space: nowrap;
+  text-transform: uppercase;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.will-filter-bar-submit-button span {
+ margin-right: 10px;
+ display: flex;
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-submit-button {
+    justify-content: center;
+    margin-bottom: 15px;
+  }
+}

package/src/components/FilterBar/components/{submit-button → buttons/submit-button}/SubmitButton.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { FaSearch } from 'react-icons/fa'
-
-import './SubmitButton.css'
-
-export default function SubmitButton({ onClick }: any) {
-  const { t } = useTranslation('filterBar')
-
-  return (
-    <button className="will-filter-bar-submit-button" onClick={onClick}>
-      <span>
-        <FaSearch />
-      </span>
-      {t('submit.label')}
-    </button>
-  )
-}
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { FaSearch } from 'react-icons/fa'
+
+import './SubmitButton.css'
+
+export default function SubmitButton({ onClick }: any) {
+  const { t } = useTranslation('filterBar')
+
+  return (
+    <button className="will-filter-bar-submit-button" onClick={onClick}>
+      <span>
+        <FaSearch />
+      </span>
+      {t('submit.label')}
+    </button>
+  )
+}

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

@@ -1,76 +1,76 @@
-/* .will-filter-bar-calendar {} */
-
-.will-calendar-filter-header {
-  padding: 15px 0;
-  border-bottom: 1px solid var(--will-grey);
-}
-
-.will-calendar-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
-  margin: 10px 0;
-  text-align: left;
-}
-
-.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 */
-}
-
-.will-calendar-filter-container .rdp-month {
-  position: relative;
-}
-
-.will-calendar-filter-container .rdp-month.rdp-caption_start {
-  padding-left: 70px;
-}
-
-.will-calendar-filter-container .rdp-month.rdp-caption_end {
-  padding-right: 70px;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-nav {
-  border: 1px solid var(--will-primary);
-  border-radius: 50%;
-  left: 25;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-nav svg {
-  color: var(--will-primary);
-}
-
-
-.will-calendar-filter-container .rdp-month .rdp-caption {
-  position: initial;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,
-.will-calendar-filter-container .rdp-table .rdp-head {
-  opacity: .6;
-}
-
-.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {
-  opacity: 0.7;
-}
-
-.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
-  background-color: var(--will-primary);
-  opacity: 1;
-}
-
-@media (max-width: 960px) {
-  .will-calendar-filter-container .rdp-month .rdp-nav {
-    border: none;
-    border-radius: initial;
-    
-  }
-}
-
-
+/* .will-filter-bar-calendar {} */
+
+.will-calendar-filter-header {
+  padding: 15px 0;
+  border-bottom: 1px solid var(--will-grey);
+}
+
+.will-calendar-filter-title {
+  font-size: 16px;
+  text-transform: uppercase;
+  margin: 10px 0;
+  text-align: left;
+}
+
+.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 */
+}
+
+.will-calendar-filter-container .rdp-month {
+  position: relative;
+}
+
+.will-calendar-filter-container .rdp-month.rdp-caption_start {
+  padding-left: 70px;
+}
+
+.will-calendar-filter-container .rdp-month.rdp-caption_end {
+  padding-right: 70px;
+}
+
+.will-calendar-filter-container .rdp-month .rdp-nav {
+  border: 1px solid var(--will-primary);
+  border-radius: 50%;
+  left: 25;
+}
+
+.will-calendar-filter-container .rdp-month .rdp-nav svg {
+  color: var(--will-primary);
+}
+
+
+.will-calendar-filter-container .rdp-month .rdp-caption {
+  position: initial;
+}
+
+.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,
+.will-calendar-filter-container .rdp-table .rdp-head {
+  opacity: .6;
+}
+
+.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {
+  opacity: 0.7;
+}
+
+.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
+  background-color: var(--will-primary);
+  opacity: 1;
+}
+
+@media (max-width: 960px) {
+  .will-calendar-filter-container .rdp-month .rdp-nav {
+    border: none;
+    border-radius: initial;
+    
+  }
+}
+
+

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

@@ -1,54 +1,52 @@
-import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { DateRange, DayPicker } from 'react-day-picker'
-import { addDays } from 'date-fns'
-import { useMediaQuery } from 'react-responsive'
-
-import 'react-day-picker/dist/style.css'
-import './Calendar.css'
-
-interface CalendarPropsType {
-  calendarRange: DateRange | undefined
-  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 })
-
-  const defaultCalendarSelected: DateRange = {
-    from: currentMonth,
-    to: addDays(currentMonth, 0),
-  }
-
-  useEffect(() => {
-    if (!calendarRange) setCalendarRange(defaultCalendarSelected)
-  }, [])
-
-  return (
-    <div className="will-filter-bar-calendar">
-      <div className="will-calendar-filter-header">
-        <h3 className="will-calendar-filter-title">{t('calendar.title')}</h3>
-      </div>
-      <div className="will-calendar-filter-container">
-        <DayPicker
-          id="will-calendar"
-          mode="range"
-          showOutsideDays
-          fixedWeeks
-          numberOfMonths={!isTablet ? 2 : 1}
-          weekStartsOn={1}
-          max={31}
-          defaultMonth={currentMonth}
-          selected={calendarRange}
-          onSelect={setCalendarRange}
-        />
-      </div>
-    </div>
-  )
-}
+import React, { useEffect } from 'react'
+//import { useTranslation } from 'react-i18next'
+import { DateRange, DayPicker } from 'react-day-picker'
+import { addDays } from 'date-fns'
+import { useMediaQuery } from 'react-responsive'
+
+import 'react-day-picker/dist/style.css'
+import './Calendar.css'
+
+interface CalendarPropsType {
+  calendarRange: DateRange | undefined
+  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 })
+
+  const defaultCalendarSelected: DateRange = {
+    from: currentMonth,
+    to: addDays(currentMonth, 0),
+  }
+
+  useEffect(() => {
+    if (!calendarRange) setCalendarRange(defaultCalendarSelected)
+  }, [])
+
+  return (
+    <div className="will-filter-bar-calendar">
+      {/* <div className="will-calendar-filter-header">
+        <h3 className="will-calendar-filter-title">{t('calendar.title')}</h3>
+      </div> */}
+      <div className="will-calendar-filter-container">
+        <DayPicker
+          id="will-calendar"
+          mode="range"
+          showOutsideDays
+          numberOfMonths={!isTablet ? 2 : 1}
+          weekStartsOn={1}
+          defaultMonth={currentMonth}
+          selected={calendarRange}
+          onSelect={setCalendarRange}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/FilterBar/components/categories/Categories.css

@@ -1,21 +1,21 @@
-.will-filter-bar-categories {
-  text-align: center;
-}
-
-.will-categories-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
-  margin: 10px 0 30px 0;
-}
-
-.will-categories-filter-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.will-categories-filter-inner input {
-  cursor: pointer;
-  margin-right: 10px;
-}
+.will-filter-bar-categories {
+  text-align: center;
+}
+
+.will-categories-filter-title {
+  font-size: 16px;
+  text-transform: uppercase;
+  margin: 10px 0 30px 0;
+}
+
+.will-categories-filter-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.will-categories-filter-inner input {
+  cursor: pointer;
+  margin-right: 10px;
+}

package/src/components/FilterBar/components/categories/Categories.tsx

@@ -1,41 +1,41 @@
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import './Categories.css'
-
-export default function Categories({ categories, setCategories }: any) {
-  const { t } = useTranslation('filterBar')
-
-  const categoriesPlaceholder = [
-    'Weekend',
-    'Week',
-    'Summer camp',
-    'Winter camp',
-  ]
-
-  const [selectedCategory, setSelectedCategory] = useState('')
-
-  const handleCategoryChange = (selectedCategory: any) => {
-    setSelectedCategory(selectedCategory)
-    setCategories(selectedCategory)
-  }
-
-  return (
-    <div className="will-filter-bar-categories">
-      <h3 className="will-categories-filter-title">{t('categories.label')}</h3>
-      <div className="will-categories-filter-inner">
-        {categoriesPlaceholder.map((itm, idx) => (
-          <div key={idx}>
-            <input
-              type="radio"
-              value={itm}
-              checked={selectedCategory === itm}
-              onChange={() => handleCategoryChange(itm)}
-            />
-            <span>{itm}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import './Categories.css'
+
+export default function Categories({ categories, setCategories }: any) {
+  const { t } = useTranslation('filterBar')
+
+  const categoriesPlaceholder = [
+    'Weekend',
+    'Week',
+    'Summer camp',
+    'Winter camp',
+  ]
+
+  const [selectedCategory, setSelectedCategory] = useState('')
+
+  const handleCategoryChange = (selectedCategory: any) => {
+    setSelectedCategory(selectedCategory)
+    setCategories(selectedCategory)
+  }
+
+  return (
+    <div className="will-filter-bar-categories">
+      <h3 className="will-categories-filter-title">{t('categories.label')}</h3>
+      <div className="will-categories-filter-inner">
+        {categoriesPlaceholder.map((itm, idx) => (
+          <div key={idx}>
+            <input
+              type="radio"
+              value={itm}
+              checked={selectedCategory === itm}
+              onChange={() => handleCategoryChange(itm)}
+            />
+            <span>{itm}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -1,7 +1,7 @@
-import React from 'react'
-
-import './Divider.css'
-
-export default function Divider() {
-  return <div className="will-filter-bar-divider" />
-}
+import React from 'react'
+
+import './Divider.css'
+
+export default function Divider() {
+  return <div className="will-filter-bar-divider" />
+}

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

@@ -1,54 +1,54 @@
-.will-guests-filter-label, .will-guests-filter-count {
-  font-size: 18px;
-  color: var(--will-text)
-}
-
-.will-guests-filter-inner {
-  display: flex;
-  align-items: center;
-}
-
-.will-guests-filter-inner {
-  margin-top: 30px;
-  margin-right: 50px;
-}
-
-.will-guests-filter-label {
-  display: block;
-  margin-right: 20px;
-  font-weight: bold;
- 
-}
-
-.will-guests-filter-inner > div {
-  display: flex;
-  align-items: center;
-}
-
-.will-guests-filter-count {
-  margin: 0 10px;
-  min-width: 30px;
-  text-align: center;
-}
-
-.will-guests-filter-button {
-  border-radius: 50%;
-  border: none;
-  background-color: var(--will-onahau);
-  width: 25px;
-  height: 25px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 20px;
-  cursor: pointer;
-}
-
-@media (max-width: 960px) {
-
-  .will-guests-filter-inner {
-    width: 100%;
-    margin: 15px 0;
-    justify-content: space-between;
-  }
+.will-guests-filter-label, .will-guests-filter-count {
+  font-size: 18px;
+  color: var(--will-text)
+}
+
+.will-guests-filter-inner {
+  display: flex;
+  align-items: center;
+}
+
+.will-guests-filter-inner {
+  margin-top: 30px;
+  margin-right: 50px;
+}
+
+.will-guests-filter-label {
+  display: block;
+  margin-right: 20px;
+  font-weight: bold;
+ 
+}
+
+.will-guests-filter-inner > div {
+  display: flex;
+  align-items: center;
+}
+
+.will-guests-filter-count {
+  margin: 0 10px;
+  min-width: 30px;
+  text-align: center;
+}
+
+.will-guests-filter-button {
+  border-radius: 50%;
+  border: none;
+  background-color: var(--will-onahau);
+  width: 25px;
+  height: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+@media (max-width: 960px) {
+
+  .will-guests-filter-inner {
+    width: 100%;
+    margin: 15px 0;
+    justify-content: space-between;
+  }
 }