willba-component-library 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -25,7 +25,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",

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

@@ -27,7 +27,7 @@ export const Main: Story = {
         },
       ],
     },
-    fullWidth: true,
+    fullWidth: false,
     language: 'en',
     redirectUrl: 'http://localhost:4000/',
     ageCategories: [
@@ -81,9 +81,9 @@ export const Main: Story = {
       multiSelect: false,
       data: [
         {
-          id: '1',
+          id: 1,
           label: {
-            en: 'Location 1',
+            en: 'Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1',
             fi: 'Location 1 fi',
           },
           description: {
@@ -94,14 +94,14 @@ export const Main: Story = {
             '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
         },
         {
-          id: '2',
+          id: 2,
           label: {
             en: 'Location 2',
             fi: 'Location 2 fi',
           },
         },
         {
-          id: '3',
+          id: 3,
           label: {
             en: 'Location 3',
             fi: 'Location 3 fi',
@@ -114,7 +114,7 @@ export const Main: Story = {
             '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
         },
         {
-          id: '4',
+          id: 4,
           label: {
             en: 'Location 4',
             fi: 'Location 4 fi',
@@ -123,7 +123,7 @@ export const Main: Story = {
             '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
         },
         {
-          id: '5',
+          id: 5,
           label: {
             en: 'Location 5',
             fi: 'Location 5 fi',

package/src/components/FilterBar/FilterBarTypes.ts

@@ -67,7 +67,7 @@ export type Tab = {
 }
 
 export type Location = {
-  id: string
+  id: number
   label: Translations
   description?: Translations
   imageUrl?: string

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

@@ -28,22 +28,18 @@
 }
 
 .will-filter-bar-select-button .select-button-description {
- 
   color: var(--will-black);
   font-weight: 400;
   opacity: 0.5;
   white-space: nowrap;
   min-height: 19px;
- }
-
- .will-filter-bar-select-button .select-button-description span {
-  font: inherit
- }
-
- .will-root.is-full-width .will-filter-bar-select-button .select-button-description {
   overflow: hidden;
   text-overflow: ellipsis;
- }
+}
+
+.will-filter-bar-select-button .select-button-description span {
+  font: inherit
+}
 
  .will-filter-bar-select-button .select-button-label.active,
  .will-filter-bar-select-button .select-button-description.active {

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

@@ -68,7 +68,7 @@ export const useFilterBar = ({
     // Set selected locations from URL - handle all locationIds
     if (locations?.data?.length && locationIdParams.length) {
       const matchedLocations = locations.data.filter((location) =>
-        locationIdParams.includes(location.id)
+        locationIdParams.includes(location.id.toString())
       )
       setSelectedLocations(matchedLocations)
     }
@@ -118,21 +118,27 @@ export const useFilterBar = ({
         ageCategoryCounts,
         ageCategories,
       }),
+
+      selectedLocations: selectedLocations
+        .map((location) => location.id.toString())
+        .join(','),
     }
 
     const querySearchParams = new URLSearchParams()
 
     for (const [key, value] of Object.entries(newParams)) {
       if (value) {
-        querySearchParams.append(key, value.toString())
+        if (key === 'selectedLocations' && !!selectedLocations.length) {
+          // Append all selected locationIds
+          selectedLocations.forEach((location) => {
+            querySearchParams.append('locationId', location.id.toString())
+          })
+        } else {
+          querySearchParams.append(key, value.toString())
+        }
       }
     }
 
-    // Append all selected locationIds
-    selectedLocations.forEach((location) => {
-      querySearchParams.append('locationId', location.id)
-    })
-
     handleSelectedFilter(false)
 
     if (onSubmit && window.location.href.includes(selectedPath)) {

package/tsconfig.json

@@ -13,11 +13,11 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     
     "baseUrl": "./",
     "paths": {