fix: #116 Add outputMetricUnits to config types and use in itinerary-…

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
           }}

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++;

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>

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}

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..."

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?: {