From 7d2d02d2f21da8e9c0479a3df5fbac9f235c261b Mon Sep 17 00:00:00 2001
From: Alexander Menk <alex@addismap.com>
Date: Sat, 4 Feb 2023 20:43:33 +0100
Subject: [PATCH 1/2] fix: #116 Add outputMetricUnits to config types and use
 in itinerary-body

---
 .../itinerary-body/src/defaults/access-leg-description.tsx  | 6 +++++-
 packages/types/src/index.ts                                 | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/itinerary-body/src/defaults/access-leg-description.tsx b/packages/itinerary-body/src/defaults/access-leg-description.tsx
index 0fe9b53c1..9cb2119e1 100644
--- a/packages/itinerary-body/src/defaults/access-leg-description.tsx
+++ b/packages/itinerary-body/src/defaults/access-leg-description.tsx
@@ -99,7 +99,11 @@ export default function AccessLegDescription({
           id="otpUi.AccessLegBody.summaryAndDistance"
           values={{
             // TODO: Implement metric vs imperial (up until now it's just imperial).
-            distance: humanizeDistanceString(leg.distance, false, intl),
+            distance: humanizeDistanceString(
+              leg.distance,
+              config.outputMetricUnits,
+              intl
+            ),
             mode: modeContent,
             place: placeContent
           }}
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 4b8021553..0f036c37c 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -146,6 +146,7 @@ export type Config = {
     longDateFormat?: string;
   };
   homeTimezone: string;
+  outputMetricUnits: boolean;
   modes: ConfiguredModes;
   // TODO: add full typing
   map?: {

From c389bedaf9a3378795a825da2632c166af1ff9bf Mon Sep 17 00:00:00 2001
From: Alexander Menk <alex@addismap.com>
Date: Sat, 11 Feb 2023 09:53:55 +0100
Subject: [PATCH 2/2] *WIP* fix: #116 Add new story and flag outputMetricUnits
 to location-field

---
 packages/location-field/src/index.tsx             |  2 ++
 packages/location-field/src/options.tsx           |  8 +++++---
 .../location-field/src/stories/Mobile.story.tsx   | 15 +++++++++++++++
 packages/location-field/src/types.ts              |  5 +++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx
index 12fe407a4..52e4bd905 100644
--- 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
index 85a6bb4e5..d6ed2c1be 100644
--- 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
index a9dd03e38..ca62fc42d 100644
--- 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
index d7aadb92d..5eeb6f80a 100644
--- 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..."