*WIP* fix: #116 Add new story and flag outputMetricUnits to location-…

…field
opentripplanner · Feb 11, 2023 · c389bed · c389bed
1 parent 6ca4257
commit c389bed
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx
@@ -65,6 +65,7 @@ const LocationField = ({
   onLocationSelected,
   onTextInputClick = null,
   operatorIconMap = {},
+  outputMetricUnits = false,
   preferredLayers = [],
   sessionOptionIcon = <Search size={13} />,
   sessionSearches = [],
@@ -531,6 +532,7 @@ const LocationField = ({
             onClick={locationSelected}
             stop={stop}
             stopOptionIcon={stopOptionIcon}
+            outputMetricUnits={outputMetricUnits}
           />
         );
         itemIndex++;

diff --git a/packages/location-field/src/options.tsx b/packages/location-field/src/options.tsx
@@ -1,5 +1,5 @@
 import coreUtils from "@opentripplanner/core-utils";
-import { humanizeDistanceStringImperial } from "@opentripplanner/humanize-distance";
+import { humanizeDistanceString } from "@opentripplanner/humanize-distance";
 import React, { ReactElement } from "react";
 import { FormattedMessage } from "react-intl";
 import { Bus } from "@styled-icons/fa-solid/Bus";
@@ -75,19 +75,21 @@ export function TransitStopOption({
   isActive = false,
   onClick,
   stop,
-  stopOptionIcon
+  stopOptionIcon,
+  outputMetricUnits = false
 }: {
   isActive?: boolean;
   onClick: () => void;
   stop: Stop;
   stopOptionIcon: React.ReactNode;
+  outputMetricUnits?: boolean;
 }): React.ReactElement {
   return (
     <S.MenuItem onClick={onClick} active={isActive}>
       <S.StopIconAndDistanceContainer>
         {stopOptionIcon}
         <S.StopDistance>
-          {humanizeDistanceStringImperial(stop.dist, true)}
+          {humanizeDistanceString(stop.dist, outputMetricUnits)}
         </S.StopDistance>
       </S.StopIconAndDistanceContainer>
       <S.StopContentContainer>

diff --git a/packages/location-field/src/stories/Mobile.story.tsx b/packages/location-field/src/stories/Mobile.story.tsx
@@ -182,6 +182,21 @@ export const WithNearbyStops = (): JSX.Element => (
   />
 );
 
+export const WithNearbyStopsAndMetricUnits = (): JSX.Element => (
+  <LocationField
+    currentPosition={currentPosition}
+    geocoderConfig={geocoderConfig}
+    getCurrentPosition={getCurrentPosition}
+    isStatic
+    layerColorMap={layerColorMap}
+    locationType="to"
+    nearbyStops={nearbyStops}
+    onLocationSelected={onLocationSelected}
+    stopsIndex={stopsIndex}
+    outputMetricUnits
+  />
+);
+
 export const WithSessionSearches = (): JSX.Element => (
   <LocationField
     currentPosition={currentPosition}

diff --git a/packages/location-field/src/types.ts b/packages/location-field/src/types.ts
@@ -122,6 +122,11 @@ export interface LocationFieldProps {
    * initial render.
    */
   hideExistingValue?: boolean;
+
+  /**
+   * Whether to display metric units
+   */
+  outputMetricUnits?: boolean;
   /**
    * Placeholder text to show in the input element. If the current position is
    * set to have a true fetching property, then the text "Fetching location..."