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

packages/location-field/src/index.tsx

@@ -174,6 +174,7 @@ const LocationField = ({
   onTextInputClick = null,
   operatorIconMap = {},
   preferredLayers = [],
+  renderOtherFirst = false,
   sessionOptionIcon = <Search size={ICON_SIZE} />,
   sessionSearches = [],
   showClearButton = true,
@@ -644,8 +645,25 @@ const LocationField = ({
     const transitFeaturesPresent =
       stopFeatures.length > 0 || stationFeatures.length > 0;
 
+    const OtherFeaturesHeader = () => (
+      <S.MenuGroupHeader as={headingType} bgColor="#333" key="other-header">
+        <FormattedMessage
+          description="Text for header above the 'other' category of geocoder results"
+          id="otpUi.LocationField.other"
+        />
+      </S.MenuGroupHeader>
+    );
+
+    const otherFeaturesElements = otherFeatures.map(feature =>
+      renderFeature(itemIndex++, feature)
+    );
+
     // Iterate through the geocoder results
     menuItems = menuItems.concat(
+      renderOtherFirst &&
+        transitFeaturesPresent &&
+        otherFeatures.length > 0 && <OtherFeaturesHeader />,
+      renderOtherFirst && otherFeaturesElements,
       stationFeatures.length > 0 && (
         <S.MenuGroupHeader
           as={headingType}
@@ -673,16 +691,10 @@ const LocationField = ({
         </S.MenuGroupHeader>
       ),
       stopFeatures.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"
-          />
-        </S.MenuGroupHeader>
-      ),
-      otherFeatures.map(feature => renderFeature(itemIndex++, feature))
+      !renderOtherFirst &&
+        transitFeaturesPresent &&
+        otherFeatures.length > 0 && <OtherFeaturesHeader />,
+      !renderOtherFirst && otherFeaturesElements
     );
   }
 

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { ComponentMeta } from "@storybook/react";
 
 import { Ship } from "@styled-icons/fa-solid/Ship";
@@ -251,3 +251,35 @@ export const WithUserSettings = (): JSX.Element => (
     userLocationsAndRecentPlaces={userLocationsAndRecentPlaces}
   />
 );
+
+export const WithOtherFirst = (): JSX.Element => {
+  const [otherControl, setOtherControl] = useState(false);
+  return (
+    <>
+      <label htmlFor="other-input">
+        renderOtherFirst?
+        <input
+          id="other-input"
+          type="checkbox"
+          checked={otherControl}
+          onChange={() => setOtherControl(!otherControl)}
+        />
+      </label>
+      <LocationField
+        currentPosition={currentPosition}
+        geocoderConfig={geocoderConfig}
+        getCurrentPosition={getCurrentPosition}
+        preferredLayers={["example_layer"]}
+        initialSearchResults={mockedGeocoderResponse.features}
+        inputPlaceholder="Select from location"
+        layerColorMap={layerColorMap}
+        locationType="from"
+        onLocationSelected={onLocationSelected}
+        renderOtherFirst={otherControl}
+        sortByDistance
+        style={{ fontFamily: "sans-serif" }}
+      />
+    </>
+  );
+};
+WithOtherFirst.parameters = a11yOverrideParameters;