feat(location-field): make location group order configurable

packages/location-field/src/index.tsx

@@ -159,6 +159,7 @@ const LocationField = ({
   GeocodedOptionIconComponent = GeocodedOptionIcon,
   geocoderConfig,
   getCurrentPosition,
+  geocoderResultsOrder = ["STATIONS", "STOPS", "OTHER"],
   hideExistingValue = false,
   initialSearchResults = null,
   inputPlaceholder = null,
@@ -644,46 +645,76 @@ const LocationField = ({
     const transitFeaturesPresent =
       stopFeatures.length > 0 || stationFeatures.length > 0;
 
-    // Iterate through the geocoder results
-    menuItems = menuItems.concat(
-      stationFeatures.length > 0 && (
-        <S.MenuGroupHeader
-          as={headingType}
-          bgColor={layerColorMap.stations}
-          key="gtfs-stations-header"
-        >
-          <FormattedMessage
-            description="Text for header above Stations"
-            id="otpUi.LocationField.stations"
-          />
-        </S.MenuGroupHeader>
-      ),
-      stationFeatures.map(feature => renderFeature(itemIndex++, feature)),
-
-      stopFeatures.length > 0 && (
-        <S.MenuGroupHeader
-          as={headingType}
-          bgColor={layerColorMap.stops}
-          key="gtfs-stops-header"
-        >
+    const FeaturesElements = ({
+      bgColor,
+      key,
+      titleId,
+      featuresArray
+    }: {
+      bgColor: string;
+      key: string;
+      titleId: string;
+      featuresArray: JSX.Element[];
+    }) => {
+      const Header = () => (
+        <S.MenuGroupHeader as={headingType} bgColor={bgColor} key={key}>
           <FormattedMessage
-            description="Text for header above Stops"
-            id="otpUi.LocationField.stops"
+            description="Text for header above the 'other' category of geocoder results"
+            id={`otpUi.LocationField.${titleId}`}
           />
         </S.MenuGroupHeader>
-      ),
-      stopFeatures.map(feature => renderFeature(itemIndex++, feature)),
+      );
+      return (
+        <>
+          {/* Only include the header if there are features to show */}
+          {titleId === "other" ? (
+            <Header />
+          ) : (
+            transitFeaturesPresent && <Header />
+          )}
+          {featuresArray.map(feature => renderFeature(itemIndex++, feature))}
+        </>
+      );
+    };
 
-      transitFeaturesPresent && otherFeatures.length > 0 && (
-        <S.MenuGroupHeader as={headingType} bgColor="#333" key="other-header">
-          <FormattedMessage
-            description="Text for header above the 'other'"
-            id="otpUi.LocationField.other"
+    // Create an array of results to display based on the geocoderResultsOrder
+    const featuresElementsArray = geocoderResultsOrder.map(result => {
+      let Element;
+      if (result === "OTHER") {
+        Element = (
+          <FeaturesElements
+            bgColor="#333"
+            key="other-header"
+            featuresArray={otherFeatures}
+            titleId="other"
           />
-        </S.MenuGroupHeader>
-      ),
-      otherFeatures.map(feature => renderFeature(itemIndex++, feature))
-    );
+        );
+      }
+      if (result === "STATIONS") {
+        Element = (
+          <FeaturesElements
+            bgColor={layerColorMap.stations}
+            key="gtfs-stations-header"
+            featuresArray={stationFeatures}
+            titleId="stations"
+          />
+        );
+      }
+      if (result === "STOPS") {
+        Element = (
+          <FeaturesElements
+            bgColor={layerColorMap.stops}
+            key="gtfs-stops-header"
+            featuresArray={stopFeatures}
+            titleId="stops"
+          />
+        );
+      }
+      return Element;
+    });
+
+    // Iterate through the geocoder results
+    menuItems = menuItems.concat(featuresElementsArray);
   }
 
   /* 2) Process nearby transit stop options */

packages/location-field/src/stories/Desktop.story.tsx

@@ -251,3 +251,22 @@ export const WithUserSettings = (): JSX.Element => (
     userLocationsAndRecentPlaces={userLocationsAndRecentPlaces}
   />
 );
+
+export const WithCustomResultsOrder = (): JSX.Element => (
+  <LocationField
+    currentPosition={currentPosition}
+    geocoderConfig={geocoderConfig}
+    getCurrentPosition={getCurrentPosition}
+    preferredLayers={["example_layer"]}
+    initialSearchResults={mockedGeocoderResponse.features}
+    inputPlaceholder="Select from location"
+    layerColorMap={layerColorMap}
+    locationType="from"
+    onLocationSelected={onLocationSelected}
+    geocoderResultsOrder={["OTHER", "STATIONS", "STOPS"]}
+    sortByDistance
+    style={{ fontFamily: "sans-serif" }}
+  />
+);
+
+WithCustomResultsOrder.parameters = a11yOverrideParameters;