willba-component-library 0.1.4 → 0.1.6

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;
+  }
 }

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

@@ -1,51 +1,51 @@
-import React from 'react'
-
-import { GuestsCountPropsType } from '../../../FilterBarTypes'
-
-import './GuestCount.css'
-
-export default function GuestCount({
-  label,
-  id,
-  updateGuestsCount,
-  count,
-  minVal,
-}: GuestsCountPropsType) {
-  const handleDecrement = () => {
-    if (count > minVal) {
-      updateGuestsCount(id, count - 1)
-    }
-  }
-
-  const handleIncrement = () => {
-    updateGuestsCount(id, count + 1)
-  }
-
-  return (
-    <div className="will-guests-filter-inner">
-      <span className="will-guests-filter-label">{label}</span>
-      <div>
-        <button
-          className="will-guests-filter-button"
-          onClick={handleDecrement}
-          disabled={minVal && count < 2 ? true : false}
-          style={{
-            cursor:
-              minVal && count < 2
-                ? 'initial'
-                : !minVal && count < 1
-                ? 'initial'
-                : 'pointer',
-            paddingBottom: '4px',
-          }}
-        >
-          -
-        </button>
-        <span className="will-guests-filter-count">{count}</span>
-        <button className="will-guests-filter-button" onClick={handleIncrement}>
-          +
-        </button>
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+
+import { GuestsCountPropsType } from '../../../FilterBarTypes'
+
+import './GuestCount.css'
+
+export default function GuestCount({
+  label,
+  id,
+  updateGuestsCount,
+  count,
+  minVal,
+}: GuestsCountPropsType) {
+  const handleDecrement = () => {
+    if (count > minVal) {
+      updateGuestsCount(id, count - 1)
+    }
+  }
+
+  const handleIncrement = () => {
+    updateGuestsCount(id, count + 1)
+  }
+
+  return (
+    <div className="will-guests-filter-inner">
+      <span className="will-guests-filter-label">{label}</span>
+      <div>
+        <button
+          className="will-guests-filter-button"
+          onClick={handleDecrement}
+          disabled={minVal && count < 2 ? true : false}
+          style={{
+            cursor:
+              minVal && count < 2
+                ? 'initial'
+                : !minVal && count < 1
+                ? 'initial'
+                : 'pointer',
+            paddingBottom: '4px',
+          }}
+        >
+          -
+        </button>
+        <span className="will-guests-filter-count">{count}</span>
+        <button className="will-guests-filter-button" onClick={handleIncrement}>
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -1,28 +1,28 @@
-.will-filter-bar-guests {
-  text-align: initial;
-}
-
-.will-guests-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
-  margin: 10px 0;
-}
-
-.will-guests-filter-subtitle {
-  font-size: 15px;
-  font-weight: 500;
-  color:var(--will-text)
-}
-
-
-.will-guests-filter-container {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-
-@media (max-width: 960px) {
-  .will-guests-filter-container {
-   margin-top: 15px;
-  }
+.will-filter-bar-guests {
+  text-align: initial;
+}
+
+.will-guests-filter-title {
+  font-size: 16px;
+  text-transform: uppercase;
+  margin: 10px 0;
+}
+
+.will-guests-filter-subtitle {
+  font-size: 15px;
+  font-weight: 500;
+  color:var(--will-text)
+}
+
+
+.will-guests-filter-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
+@media (max-width: 960px) {
+  .will-guests-filter-container {
+   margin-top: 15px;
+  }
 }

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

@@ -1,38 +1,38 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import GuestCount from './GuestCount/GuestCount'
-import { AgeCategoryCount, GuestsPropsType } from '../../FilterBarTypes'
-
-import './Guests.css'
-
-export default function Guests({
-  ageCategories,
-  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>
-
-      <div className="will-guests-filter-container">
-        {ageCategories?.map((category) => (
-          <GuestCount
-            key={category.id}
-            id={parseInt(category.id)}
-            label={category.name}
-            minVal={category.minVal}
-            updateGuestsCount={updateGuestsCount}
-            count={
-              (ageCategoryCounts as AgeCategoryCount)[category.id] ||
-              category.minVal
-            }
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import GuestCount from './GuestCount/GuestCount'
+import { AgeCategoryCount, GuestsPropsType } from '../../FilterBarTypes'
+
+import './Guests.css'
+
+export default function Guests({
+  ageCategories,
+  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>
+
+      <div className="will-guests-filter-container">
+        {ageCategories?.map((category) => (
+          <GuestCount
+            key={category.id}
+            id={parseInt(category.id)}
+            label={category.name}
+            minVal={category.minVal}
+            updateGuestsCount={updateGuestsCount}
+            count={
+              (ageCategoryCounts as AgeCategoryCount)[category.id] ||
+              category.minVal
+            }
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -1,20 +1,20 @@
-.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;
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-select-button {
+    margin: 15px 0;
+    text-align: center;
+  }
+}
+
+

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

@@ -1,15 +1,15 @@
-import React from 'react'
-
-import './SelectButton.css'
-
-export default function SelectButton({ label, onClick, style }: any) {
-  return (
-    <button
-      className="will-filter-bar-select-button"
-      onClick={onClick}
-      style={style}
-    >
-      {label}
-    </button>
-  )
-}
+import React from 'react'
+
+import './SelectButton.css'
+
+export default function SelectButton({ label, onClick, style }: any) {
+  return (
+    <button
+      className="will-filter-bar-select-button"
+      onClick={onClick}
+      style={style}
+    >
+      {label}
+    </button>
+  )
+}

package/src/components/FilterBar/components/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: 25px;
-  }
-}
+.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: 25px;
+  }
+}

package/src/components/FilterBar/components/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>
+  )
+}