willba-component-library 0.1.52 → 0.1.53

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -1,6 +1,7 @@
 .will-root {
   z-index: 999;
-  width: 100%;
+  width: fit-content;
+  min-width: 796px;
   max-height: 100vh;
   position: relative;
 }
@@ -57,7 +58,9 @@
 }
 
 @media (max-width: 960px) {
-  .will-root {   
+  .will-root { 
+    width: 100%;
+    max-height: 100vh;  
     z-index: 3;
   }
 

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

@@ -45,10 +45,7 @@ export const Primary: Story = {
   },
   render: (args) => (
     <div style={{ background: 'grey', padding: '30px', height: '100vh' }}>
-      <FilterBar
-        {...args}
-        onSubmit={false ? null : (val: Filters) => console.log(val)}
-      />
+      <FilterBar {...args} onSubmit={false ? null : (val: Filters) => null} />
     </div>
   ),
 }

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

@@ -31,8 +31,8 @@
   opacity: 0.8;
   
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
  }
 
  .will-filter-bar-select-button .select-button-label.active,

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

@@ -23,9 +23,10 @@ export const SelectButton = ({
           <p className={`select-button-label ${active ? 'active' : ''}`}>
             {label}
           </p>
-          <p className={`select-button-description ${active ? 'active' : ''}`}>
-            {description}
-          </p>
+          <p
+            className={`select-button-description ${active ? 'active' : ''}`}
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
         </div>
       </span>
     </button>

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

@@ -23,13 +23,4 @@
   .will-filter-bar-tab-button.active {
     background-color: var(--will-transparent-white);
    
-  }
-
-
-  /* @media (max-width: 960px) {
-    .will-filter-bar-tab-button {
-      justify-content: center;
-      margin-bottom: 15px;
-    }
-  } */
-  
+  }

package/src/components/FilterBar/hooks/useFilterBar.tsx

@@ -18,7 +18,6 @@ export const useFilterBar = ({
   onSubmit,
 }: Props) => {
   const [selectedPath, setSelectedPath] = useState('/events')
-
   const [selectedFilter, setSelectedFilter] = useState<string | boolean>(false)
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
 
@@ -121,7 +120,7 @@ export const useFilterBar = ({
 
       handleSelectedFilter(false)
 
-      if (onSubmit) {
+      if (onSubmit && selectedPath === '/rooms') {
         const updatedParamsObject: { [key: string]: string } = {}
 
         updatedParams.forEach((value, key) => {
@@ -142,7 +141,7 @@ export const useFilterBar = ({
       }
 
       handleSelectedFilter(false)
-      return onSubmit
+      return onSubmit && selectedPath === '/rooms'
         ? onSubmit(newParams)
         : (window.location.href = `${redirectUrl}/${selectedPath}${
             querySearchParams ? `?${querySearchParams.toString()}` : ''

package/src/components/FilterBar/utils/parseGuests.tsx

@@ -10,7 +10,9 @@ export const parseGuests = ({ ageCategoryCounts, ageCategories }: Props) =>
     const ageCategory = ageCategories.find((c) => c.id === key[key.length - 1])
 
     if (ageCategory && value) {
-      acc += `${acc ? ' -' : ''} ${ageCategory.name}: ${value}`
+      acc += `${acc ? ' -' : ''} ${
+        ageCategory.name
+      }: <span style="display: inline-block; width: 21px">${value}</span>`
     }
 
     return acc