willba-component-library 0.1.55 → 0.1.56

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -6,6 +6,11 @@
   position: relative;
 }
 
+.will-root.is-full-width {
+  width: 100%;
+  min-width: auto;
+}
+
 .will-filter-bar {
   box-sizing: border-box;
   position: relative;

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

@@ -15,6 +15,7 @@ type Story = StoryObj<typeof FilterBar>
 
 export const Primary: Story = {
   args: {
+    fullWidth: true,
     language: '',
     redirectUrl: '',
     ageCategories: [

package/src/components/FilterBar/FilterBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import useTheme, { Palette } from '../../themes/useTheme'
@@ -38,6 +38,7 @@ export type FilterBarProps = {
   palette?: Palette
   currentViewApply?: string
   onSubmit?: ((val: Filters) => void) | null
+  fullWidth: boolean
 }
 
 export default function FilterBar({
@@ -47,6 +48,7 @@ export default function FilterBar({
   palette,
   currentViewApply,
   onSubmit,
+  fullWidth,
 }: FilterBarProps) {
   const themePalette = useTheme({ palette })
 
@@ -87,12 +89,26 @@ export default function FilterBar({
   // Handle close filter section
   const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
 
+  // Display component after fully loaded
+  const [initialRenderComplete, setInitialRenderComplete] =
+    useState<boolean>(false)
+
+  useEffect(() => {
+    setInitialRenderComplete(true)
+  }, [])
+
+  if (!initialRenderComplete) return
+  //----/----
+
   // Parsed data for filter section description
   const parsedDates = parseDates({ calendarRange })
   const parsedGuests = parseGuests({ ageCategoryCounts, ageCategories })
 
   return (
-    <div className={`will-root`} style={themePalette}>
+    <div
+      className={`will-root ${fullWidth ? 'is-full-width' : ''}`}
+      style={themePalette}
+    >
       {!currentViewApply && (
         <div
           className="will-filter-bar-tabs"

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

@@ -31,8 +31,12 @@
   opacity: 0.8;
   
   white-space: nowrap;
-  /* overflow: hidden;
-  text-overflow: ellipsis; */
+ 
+ }
+
+ .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-label.active,

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

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