willba-component-library 0.0.47 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -14,11 +14,14 @@
   "author": "Willba",
   "license": "MIT",
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "i18next": "^23.4.4",
     "react-day-picker": "^8.8.0",
-    "react-i18next": "^13.1.1"
+    "react-i18next": "^13.1.1",
+    "typeface-montserrat": "^1.1.13"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/rollup.config.mjs

@@ -52,6 +52,10 @@ export default [
         extensions: ['.css'],
       }),
       json(),
+      resolve({
+        mainFields: ['module', 'main', 'browser'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      }),
     ],
   },
   {

package/src/components/FilterBar/FilterBar.css

@@ -1,31 +1,39 @@
-.filter-bar {
+.will-filter-bar {
   box-sizing: border-box;
   max-width: 1100px;
   position: relative;
 }
 
-.filter-bar-header {
+.will-filter-bar-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   padding: 10px 20px;
   position: relative;
   z-index: 222;
   
   border-radius: 40px;
-  background-color: #fff;
-  box-shadow: 0px 6px 11px 0px #a7a4a480;
+  background-color: var(--will-white);
+  box-shadow: var(--will-box-shadow);
 }
 
-.filter-bar-container {
-  background-color: #fff;
+.will-filter-bar-container {
+  background-color: var(--will-white);
   min-height: 100px;
  
   padding: 90px 40px 30px 40px;
   position: absolute;
   top: 0;
   z-index: 111;
-  border-radius: 40px;
+  border-radius: 25px;
   width: -webkit-fill-available;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--will-box-shadow);
+}
+
+.will-filter-bar-underlay {
+  background-color: red;
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }

package/src/components/FilterBar/FilterBar.tsx

@@ -49,14 +49,16 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
 
   return (
     <div className={`will-root ${themeClass}`}>
-      <div className={`filter-bar`}>
-        <div className="filter-bar-header">
+      <div className={`will-filter-bar will-filter-bar-underlay`}>
+        <div className="will-filter-bar-header">
           <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)}
           />
@@ -64,17 +66,19 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
           <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="filter-bar-container">
+          <div className="will-filter-bar-container">
             {(selectedFilter === 1 || selectedFilter === 2) && (
               <Calendar
                 calendarRange={calendarRange}
@@ -103,3 +107,7 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
     </div>
   )
 }
+
+const fontWigthBold = (input: boolean) => {
+  return { fontWeight: input ? 'bold' : 'initial' }
+}

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

@@ -1,4 +1,62 @@
-.filter-bar-calendar {
+/* .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;
+}
+
+.will-calendar-filter-container {
   display: flex;
   justify-content: center;
-}
+  padding-top: 20px;
+}
+
+/* Calendar overrides */
+
+.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;
+}

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
-
-import { addDays } from 'date-fns'
+import { useTranslation } from 'react-i18next'
 import { DateRange, DayPicker } from 'react-day-picker'
+import { addDays } from 'date-fns'
 
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
@@ -9,6 +9,8 @@ import './Calendar.css'
 const currentMonth = new Date()
 
 export default function Calendar({ calendarRange, setCalendarRange }: any) {
+  const { t } = useTranslation('filterBar')
+
   const defaultCalendarSelected: DateRange = {
     from: currentMonth,
     to: addDays(currentMonth, 0),
@@ -19,15 +21,24 @@ export default function Calendar({ calendarRange, setCalendarRange }: any) {
   }, [])
 
   return (
-    <div className="filter-bar-calendar">
-      <DayPicker
-        id="test"
-        mode="range"
-        numberOfMonths={2}
-        defaultMonth={currentMonth}
-        selected={calendarRange}
-        onSelect={setCalendarRange}
-      />
+    <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={2}
+          weekStartsOn={1}
+          max={31}
+          defaultMonth={currentMonth}
+          selected={calendarRange}
+          onSelect={setCalendarRange}
+        />
+      </div>
     </div>
   )
 }

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

@@ -1,15 +1,21 @@
-.filter-bar-categories {
+.will-filter-bar-categories {
   text-align: center;
 }
 
-.categories-filter-inner {
+.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;
 }
 
-.categories-filter-inner input {
+.will-categories-filter-inner input {
   cursor: pointer;
   margin-right: 10px;
 }

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

@@ -21,9 +21,9 @@ export default function Categories({ categories, setCategories }: any) {
   }
 
   return (
-    <div className="filter-bar-categories">
-      <h3>{t('categories.label')}</h3>
-      <div className="categories-filter-inner">
+    <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

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

@@ -1,4 +1,4 @@
-.filter-bar-divider {
+.will-filter-bar-divider {
   width: 1px;
   margin: 0 10px;
   height: 35px;

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

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

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

@@ -1,44 +1,63 @@
-.filter-bar-guests {
+.will-filter-bar-guests {
   text-align: initial;
 }
 
-.guests-filter-container {
+.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-label, .will-guests-filter-count {
+  font-size: 18px;
+  color: var(--will-text)
+}
+
+.will-guests-filter-container {
   display: flex;
   margin-top: 30px;
 }
 
-.guests-filter-inner {
+.will-guests-filter-inner {
   display: flex;
   align-items: center;
 }
 
-.guests-filter-inner:not(:last-child) {
+.will-guests-filter-inner:not(:last-child) {
   margin-right: 50px;
 }
 
-.guests-filter-inner > span {
+.will-guests-filter-label {
   display: block;
   margin-right: 20px;
   font-weight: bold;
 }
 
-.guests-filter-inner > div {
+.will-guests-filter-inner > div {
   display: flex;
   align-items: center;
 }
 
-.guests-filter-inner > div > span {
-  margin: 0 10px;
+.will-guests-filter-count {
+  margin: 0 15px;
 }
 
-.guests-filter-inner > div button {
+.will-guests-filter-button {
   border-radius: 50%;
   border: none;
-  background-color: #CDEEFF;
+  background-color: var(--will-onahau);
   width: 25px;
   height: 25px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 20px;
+  cursor: pointer;
 }

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

@@ -14,29 +14,59 @@ export default function Guests({
   const { t } = useTranslation('filterBar')
 
   return (
-    <div className="filter-bar-guests">
-      <h3>{t('guests.title')}</h3>
-      <p>{t('guests.subtitle')}</p>
+    <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="guests-filter-container">
-        <div className="guests-filter-inner">
-          <span>{t('guests.adultsLabel')}</span>
+      <div className="will-guests-filter-container">
+        <div className="will-guests-filter-inner">
+          <span className="will-guests-filter-label">
+            {t('guests.adultsLabel')}
+          </span>
           <div>
-            <button onClick={decrementAdults} disabled={guestsAdults < 2}>
+            <button
+              className="will-guests-filter-button"
+              onClick={decrementAdults}
+              disabled={guestsAdults < 2}
+              style={{
+                cursor: guestsAdults < 2 ? 'initial' : 'pointer',
+                paddingBottom: '4px',
+              }}
+            >
               -
             </button>
-            <span>{guestsAdults}</span>
-            <button onClick={incrementAdults}>+</button>
+            <span className="will-guests-filter-count">{guestsAdults}</span>
+            <button
+              className="will-guests-filter-button"
+              onClick={incrementAdults}
+            >
+              +
+            </button>
           </div>
         </div>
-        <div className="guests-filter-inner">
-          <span>{t('guests.kidsLabel')}</span>
+        <div className="will-guests-filter-inner">
+          <span className="will-guests-filter-label">
+            {t('guests.kidsLabel')}
+          </span>
           <div>
-            <button onClick={decrementKids} disabled={guestsKids < 1}>
+            <button
+              className="will-guests-filter-button"
+              onClick={decrementKids}
+              disabled={guestsKids < 1}
+              style={{
+                cursor: guestsKids < 1 ? 'initial' : 'pointer',
+                paddingBottom: '4px',
+              }}
+            >
               -
             </button>
-            <span>{guestsKids}</span>
-            <button onClick={incrementKids}>+</button>
+            <span className="will-guests-filter-count">{guestsKids}</span>
+            <button
+              className="will-guests-filter-button"
+              onClick={incrementKids}
+            >
+              +
+            </button>
           </div>
         </div>
       </div>

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

@@ -1,4 +1,4 @@
-.filter-bar-select-button {
+.will-filter-bar-select-button {
   width: 100%;
   height: auto;
   background-color: transparent;
@@ -6,4 +6,6 @@
   padding: 10px 20px;
   border-radius: 20px;
   cursor: pointer;
+  font-size: 15px;
+  text-align: initial;
 }

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

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

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

@@ -1,11 +1,19 @@
-.filter-bar-submit-button {
+.will-filter-bar-submit-button {
   width: auto;
   height: auto;
-  background-color: #384265;
-  color: #fff;
+  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;
 }

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

@@ -1,11 +1,19 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
 
 import './SubmitButton.css'
 
 export default function SubmitButton({ onClick }: any) {
+  const { t } = useTranslation('filterBar')
+
   return (
-    <button className="filter-bar-submit-button" onClick={onClick}>
-      Search
+    <button className="will-filter-bar-submit-button" onClick={onClick}>
+      <span>
+        <FontAwesomeIcon icon={faSearch} />
+      </span>
+      {t('submit.label')}
     </button>
   )
 }

package/src/index.ts

@@ -1,3 +1,5 @@
+import 'typeface-montserrat'
+
 import Button from './components/Button'
 import FilterBar from './components/FilterBar'
 

package/src/locales/en/filterBar.json

@@ -1,7 +1,8 @@
 {
   "calendar": {
     "startDate": "Start date",
-    "endDate": "End date"
+    "endDate": "End date",
+    "title": "Calendar"
   },
   "guests": {
     "label": "Guests",
@@ -13,5 +14,8 @@
   "categories": {
     "label": "Categories",
     "title": "Category"
+  },
+  "submit": {
+    "label": "Search"
   }
 }

package/src/locales/fi/filterBar.json

@@ -1,7 +1,8 @@
 {
   "calendar": {
     "startDate": "Aloitus päivämäärä",
-    "endDate": "Päättymis päivämäärä"
+    "endDate": "Päättymis päivämäärä",
+    "title": "Kalenteri"
   },
   "guests": {
     "label": "Vieraat",
@@ -13,5 +14,8 @@
   "categories": {
     "label": "Kategoriat",
     "title": "Kategoria"
+  },
+  "submit": {
+    "label": "Hae"
   }
 }

package/src/themes/Default.css

@@ -1,23 +1,39 @@
-:root {
-  --primary-color: #3498db;
-  --font-size: 16px;
-  --box-shadow: 0px 6px 11px 0px #a7a4a480
+.will-root * {
+  font-family: 'Montserrat', sans-serif;
 }
 
-* {
+.will-root {
+  
   box-sizing: border-box;
+  font-size: 14px;
+  
+  color: #1E1E1E;
+
+  /* Pallete */
+  --will-primary: #374269;
+  --will-grey: #ABA7AF;
+  --will-white: #fff;
+  --will-onahau: #CDEEFF;
+  --will-text: #5A5959;
+ 
+
+  /* Confines */
+  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;
 }
 
+/* Typography */
 
+.will-root p, h1, h2, h3, h4, h5, h6, span {
+  margin: 0;
+  padding: 0;
+} 
 
-.will-root {
-  background-color: aqua;
-}
+/* Overrides as themes */
 
 .will-root-kis {
-  background-color: red;
+  --will-primary: #374269;
 }
 
 .will-root-paj {
-  background-color: blue;
+  --will-primary: #1897D8;
 }