diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx index 8b9b20a0c..7643e9b07 100644 --- a/packages/location-field/src/index.tsx +++ b/packages/location-field/src/index.tsx @@ -28,6 +28,7 @@ import { LocationFieldProps, ResultType } from "./types"; import { addInParentheses, generateLabel, + GeocoderResultsConstants, getCombinedLabel, getGeocoderErrorMessage, getMatchingLocations @@ -159,6 +160,7 @@ const LocationField = ({ GeocodedOptionIconComponent = GeocodedOptionIcon, geocoderConfig, getCurrentPosition, + geocoderResultsOrder = ["STATIONS", "STOPS", "OTHER"], hideExistingValue = false, initialSearchResults = null, inputPlaceholder = null, @@ -644,46 +646,92 @@ const LocationField = ({ const transitFeaturesPresent = stopFeatures.length > 0 || stationFeatures.length > 0; - // Iterate through the geocoder results - menuItems = menuItems.concat( - stationFeatures.length > 0 && ( - - - - ), - stationFeatures.map(feature => renderFeature(itemIndex++, feature)), - - stopFeatures.length > 0 && ( - - - - ), - stopFeatures.map(feature => renderFeature(itemIndex++, feature)), - - transitFeaturesPresent && otherFeatures.length > 0 && ( - - + const FeaturesElements = ({ + bgColor, + title, + HeaderMessage, + featuresArray + }: { + bgColor: string; + title: string; + HeaderMessage: JSX.Element; + featuresArray: JSX.Element[]; + }) => { + const Header = () => ( + + {HeaderMessage} - ), - otherFeatures.map(feature => renderFeature(itemIndex++, feature)) - ); + ); + return ( + <> + {/* Only include the header if there are features to show */} + {(title === "other" || transitFeaturesPresent) &&
} + {featuresArray.map(feature => renderFeature(itemIndex++, feature))} + + ); + }; + + // Create an array of results to display based on the geocoderResultsOrder + const featuresElementsArray = geocoderResultsOrder.map(result => { + let Element; + switch (result) { + case GeocoderResultsConstants.OTHER: + Element = ( + + } + key="other-header" + featuresArray={otherFeatures} + title="other" + /> + ); + break; + case GeocoderResultsConstants.STATIONS: + Element = ( + + } + key="gtfs-stations-header" + featuresArray={stationFeatures} + title="stations" + /> + ); + break; + case GeocoderResultsConstants.STOPS: + Element = ( + + } + key="gtfs-stops-header" + featuresArray={stopFeatures} + title="stops" + /> + ); + break; + default: + Element = null; + break; + } + return Element; + }); + + // Iterate through the geocoder results + menuItems = menuItems.concat(featuresElementsArray); } /* 2) Process nearby transit stop options */ diff --git a/packages/location-field/src/stories/Desktop.story.tsx b/packages/location-field/src/stories/Desktop.story.tsx index 15f0cf022..60b0ec066 100644 --- a/packages/location-field/src/stories/Desktop.story.tsx +++ b/packages/location-field/src/stories/Desktop.story.tsx @@ -251,3 +251,22 @@ export const WithUserSettings = (): JSX.Element => ( userLocationsAndRecentPlaces={userLocationsAndRecentPlaces} /> ); + +export const WithCustomResultsOrder = (): JSX.Element => ( + +); + +WithCustomResultsOrder.parameters = a11yOverrideParameters; diff --git a/packages/location-field/src/stories/__snapshots__/Desktop.story.tsx.snap b/packages/location-field/src/stories/__snapshots__/Desktop.story.tsx.snap index 8a1147af6..e8476b941 100644 --- a/packages/location-field/src/stories/__snapshots__/Desktop.story.tsx.snap +++ b/packages/location-field/src/stories/__snapshots__/Desktop.story.tsx.snap @@ -715,7 +715,13 @@ exports[`LocationField/Desktop Context WithCustomResultColorsAndIcons smoke-test `; -exports[`LocationField/Desktop Context WithPrefilledSearch smoke-test 1`] = ` +exports[`LocationField/Desktop Context WithOtherFirst smoke-test 1`] = ` +
@@ -766,7 +772,7 @@ exports[`LocationField/Desktop Context WithPrefilledSearch smoke-test 1`] = ` Stations
    • +
  • + + + + + + 2200 Westlake Avenue + + + , + + Downtown Seattle, WA + + + +
    • +
  • + + + + + + Use Current Location + + +
    • + +
    +`; + +exports[`LocationField/Desktop Context WithPrefilledSearch smoke-test 1`] = ` +
    + + + + +
      +

      + Stations +

      +
    • + + + + + + Union Station (Sound Transit Stop) + + +
      • +

      + Stops +

      +
    • + + + + + + Clinton (WA State Ferry Stop) + + + , + + Clinton Ferry Pier + + + + , + + Another label + + + + , + + Really just way too long a name I mean this name is just unconscionably long! Who would possibly approve a stop name this long + + + +
      • +
    • + + + + + + Marine Dr NE & 27th Ave NE (Community Transit Stop ID 1) + + +
    • + + + + + + Marine Dr NE & 23rd Ave NE (Community Transit Stop ID 7) + + +
      • +

      + Other +

      +
    • + + + + + + Whole Foods that is far away, but prioritized + + +
      • +
    • + + + + + + Whole Foods Market + + + , + + Broadway, First Hill, Seattle, WA + + + +
      • +
    • diff --git a/packages/location-field/src/types.ts b/packages/location-field/src/types.ts index 8762e20da..a69b72f43 100644 --- a/packages/location-field/src/types.ts +++ b/packages/location-field/src/types.ts @@ -113,6 +113,8 @@ export interface LocationFieldProps { maxNearbyStops?: number; type: string; }; + /** Order of geocoder results to display */ + geocoderResultsOrder?: Array<"STATIONS" | "STOPS" | "OTHER">; /** * This is dispatched when the current position is null. This indicates that * the user has requested to use the current position, but that the current diff --git a/packages/location-field/src/utils.ts b/packages/location-field/src/utils.ts index 6c26c1b00..1ac8194b5 100644 --- a/packages/location-field/src/utils.ts +++ b/packages/location-field/src/utils.ts @@ -120,3 +120,9 @@ export function getMatchingLocations( return []; } + +export const GeocoderResultsConstants = { + STATIONS: "STATIONS", + STOPS: "STOPS", + OTHER: "OTHER" +}; diff --git a/packages/map-popup/src/MapPopup.story.tsx b/packages/map-popup/src/MapPopup.story.tsx index 708885586..8b63eaaf0 100644 --- a/packages/map-popup/src/MapPopup.story.tsx +++ b/packages/map-popup/src/MapPopup.story.tsx @@ -8,6 +8,7 @@ export default { const STOP = { flex: false, + gtfsId: "9526", id: "9526", lat: 45.523009, lon: -122.672529,