fix: support distance display in metric units

packages/itinerary-body/src/AccessLegBody/access-leg-steps.tsx

@@ -12,6 +12,7 @@ interface Props {
   mapillaryCallback?: (id: string) => void;
   mapillaryKey?: string;
   steps: Step[];
+  useMetricUnits?: boolean;
 }
 
 /**
@@ -20,7 +21,8 @@ interface Props {
 export default function AccessLegSteps({
   steps,
   mapillaryCallback,
-  mapillaryKey
+  mapillaryKey,
+  useMetricUnits = false
 }: Props): ReactElement {
   return (
     <S.Steps>
@@ -33,7 +35,7 @@ export default function AccessLegSteps({
             </S.StepIconContainer>
 
             <S.StepDescriptionContainer>
-              <AccessLegStep step={step} />
+              <AccessLegStep step={step} useMetricUnits={useMetricUnits} />
               <MapillaryButton
                 clickCallback={mapillaryCallback}
                 coords={{ lat, lon }}

packages/itinerary-body/src/AccessLegBody/access-leg-summary.tsx

@@ -12,14 +12,16 @@ interface Props {
   LegIcon: LegIconComponent;
   onSummaryClick: () => void;
   showLegIcon: boolean;
+  useMetricUnits?: boolean;
 }
 
 export default function AccessLegSummary({
   config,
   leg,
   LegIcon,
   onSummaryClick,
-  showLegIcon
+  showLegIcon,
+  useMetricUnits = false
 }: Props): ReactElement {
   return (
     <S.LegClickable>
@@ -32,7 +34,11 @@ export default function AccessLegSummary({
           )}
         </S.LegIconAndRouteShortName>
         <S.InvisibleAdditionalDetails> - </S.InvisibleAdditionalDetails>
-        <AccessLegDescription config={config} leg={leg} />
+        <AccessLegDescription
+          config={config}
+          leg={leg}
+          useMetricUnits={useMetricUnits}
+        />
         <S.LegClickableButton onClick={onSummaryClick}>
           <S.InvisibleAdditionalDetails>
             <FormattedMessage

packages/itinerary-body/src/AccessLegBody/index.tsx

@@ -38,6 +38,7 @@ interface Props {
   showElevationProfile: boolean;
   showLegIcon: boolean;
   TransitLegSubheader?: FunctionComponent<TransitLegSubheaderProps>;
+  useMetricUnits?: boolean;
 }
 
 interface State {
@@ -77,7 +78,8 @@ class AccessLegBody extends Component<Props, State> {
       setLegDiagram,
       showElevationProfile,
       showLegIcon,
-      TransitLegSubheader
+      TransitLegSubheader,
+      useMetricUnits = false
     } = this.props;
     const { expanded } = this.state;
 
@@ -93,6 +95,7 @@ class AccessLegBody extends Component<Props, State> {
           LegIcon={LegIcon}
           onSummaryClick={this.onSummaryClick}
           showLegIcon={showLegIcon}
+          useMetricUnits={useMetricUnits}
         />
       );
     }
@@ -121,6 +124,7 @@ class AccessLegBody extends Component<Props, State> {
             LegIcon={LegIcon}
             onSummaryClick={this.onSummaryClick}
             showLegIcon={showLegIcon}
+            useMetricUnits={useMetricUnits}
           />
           <S.LegDetails>
             {hideDrivingDirections ? (
@@ -163,6 +167,7 @@ class AccessLegBody extends Component<Props, State> {
                     mapillaryCallback={mapillaryCallback}
                     mapillaryKey={mapillaryKey}
                     steps={leg.steps}
+                    useMetricUnits={useMetricUnits}
                   />
                 </AnimateHeight>
               </>

packages/itinerary-body/src/AccessLegBody/tnc-leg.tsx

@@ -19,6 +19,7 @@ interface Props {
   onSummaryClick: () => void;
   showLegIcon: boolean;
   UBER_CLIENT_ID?: string;
+  useMetricUnits?: boolean;
 }
 
 export default function TNCLeg({
@@ -29,7 +30,8 @@ export default function TNCLeg({
   LYFT_CLIENT_ID = "",
   onSummaryClick,
   showLegIcon,
-  UBER_CLIENT_ID = ""
+  UBER_CLIENT_ID = "",
+  useMetricUnits = false
 }: Props): ReactElement {
   const universalLinks = {
     uber: `https://m.uber.com/${
@@ -74,6 +76,7 @@ export default function TNCLeg({
           LegIcon={LegIcon}
           onSummaryClick={onSummaryClick}
           showLegIcon={showLegIcon}
+          useMetricUnits={useMetricUnits}
         />
 
         {/* The "Book Ride" button */}

packages/itinerary-body/src/ItineraryBody/index.tsx

@@ -41,7 +41,8 @@ const ItineraryBody = ({
   TimeColumnContent,
   toRouteAbbreviation = defaultRouteAbbr,
   TransitLegSubheader,
-  TransitLegSummary
+  TransitLegSummary,
+  useMetricUnits = false
 }: ItineraryBodyProps): ReactElement => {
   /*
     TODO: replace component should update logic? companies is simply used to
@@ -91,6 +92,7 @@ const ItineraryBody = ({
           toRouteAbbreviation={toRouteAbbreviation}
           TransitLegSubheader={TransitLegSubheader}
           TransitLegSummary={TransitLegSummary}
+          useMetricUnits={useMetricUnits}
         />
       );
     }

packages/itinerary-body/src/ItineraryBody/place-row.tsx

@@ -47,7 +47,8 @@ export default function PlaceRow({
   TimeColumnContent = DefaultTimeColumnContent,
   toRouteAbbreviation,
   TransitLegSubheader,
-  TransitLegSummary
+  TransitLegSummary,
+  useMetricUnits
 }: PlaceRowProps): ReactElement {
   // NOTE: Previously there was a check for itineraries that changed vehicles
   // at a single stop, which would render the stop place the same as the
@@ -175,6 +176,7 @@ export default function PlaceRow({
               showElevationProfile={showElevationProfile}
               showLegIcon={showLegIcon}
               TransitLegSubheader={TransitLegSubheader}
+              useMetricUnits={useMetricUnits}
             />
           ))}
       </S.PlaceDetails>

packages/itinerary-body/src/defaults/access-leg-description.tsx

@@ -9,6 +9,7 @@ import { defaultMessages, getPlaceName } from "../util";
 interface Props extends HTMLAttributes<HTMLSpanElement> {
   config: Config;
   leg: Leg;
+  useMetricUnits?: boolean;
 }
 
 /**
@@ -71,7 +72,8 @@ export default function AccessLegDescription({
   className,
   config,
   leg,
-  style
+  style,
+  useMetricUnits
 }: Props): ReactElement {
   const intl = useIntl();
   // Replace the Vertex Type for BIKESHARE with VEHICLE as we do not know that
@@ -98,8 +100,11 @@ export default function AccessLegDescription({
           description="Summarizes an access leg, including distance"
           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,
+              useMetricUnits,
+              intl
+            ),
             mode: modeContent,
             place: placeContent
           }}

packages/itinerary-body/src/defaults/access-leg-step.tsx

@@ -12,6 +12,7 @@ import StreetName from "./street-name";
 
 interface Props extends HTMLAttributes<HTMLSpanElement> {
   step: Step;
+  useMetricUnits?: boolean;
 }
 
 /**
@@ -20,7 +21,8 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
 export default function AccessLegStep({
   className,
   step,
-  style
+  style,
+  useMetricUnits = false
 }: Props): ReactElement {
   const { absoluteDirection, relativeDirection, streetName } = step;
   const intl = useIntl();
@@ -104,10 +106,9 @@ export default function AccessLegStep({
     // for styled-components support.
     <span className={className} style={style}>
       {stepContent}
-      {/* TODO: Implement metric vs imperial (up until now it's just imperial). */}
       {step?.distance > 0 && (
         <S.StepLength>
-          {humanizeDistanceString(step.distance, false, intl)}
+          {humanizeDistanceString(step.distance, useMetricUnits, intl)}
         </S.StepLength>
       )}
     </span>

packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx

@@ -60,14 +60,16 @@ interface StoryWrapperProps {
   hideDrivingDirections?: boolean;
   itinerary: Itinerary;
   TimeColumnContent?: FunctionComponent<TimeColumnContentProps>;
+  useMetricUnits?: boolean;
 }
 
 function OtpRRItineraryBodyWrapper({
   alwaysCollapseAlerts,
   defaultFareSelector,
   hideDrivingDirections = false,
   itinerary,
-  TimeColumnContent
+  TimeColumnContent,
+  useMetricUnits = false
 }: StoryWrapperProps): ReactElement {
   return (
     <ItineraryBodyDefaultsWrapper
@@ -86,6 +88,7 @@ function OtpRRItineraryBodyWrapper({
       styledItinerary="otp-rr"
       TimeColumnContent={TimeColumnContent}
       TransitLegSubheader={WrappedOtpRRTransitLegSubheader}
+      useMetricUnits={useMetricUnits}
     />
   );
 }
@@ -99,11 +102,19 @@ export const WalkOnlyItinerary = (): ReactElement => (
   <OtpRRItineraryBodyWrapper itinerary={walkOnlyItinerary} />
 );
 
+export const WalkOnlyItineraryMetricUnits = (): ReactElement => (
+  <OtpRRItineraryBodyWrapper itinerary={walkOnlyItinerary} useMetricUnits />
+);
+
 // OTP2.4 type data
 export const Otp24Itinerary = (): ReactElement => (
   <OtpRRItineraryBodyWrapper itinerary={otp24Itinerary} />
 );
 
+export const Otp24ItineraryMetricUnits = (): ReactElement => (
+  <OtpRRItineraryBodyWrapper itinerary={otp24Itinerary} useMetricUnits />
+);
+
 export const BikeOnlyItinerary = (): ReactElement => (
   <OtpRRItineraryBodyWrapper itinerary={bikeOnlyItinerary} />
 );
@@ -112,6 +123,13 @@ export const WalkTransitWalkItinerary = (): ReactElement => (
   <OtpRRItineraryBodyWrapper itinerary={walkTransitWalkItinerary} />
 );
 
+export const WalkTransitWalkItineraryUseMetricUnits = (): ReactElement => (
+  <OtpRRItineraryBodyWrapper
+    itinerary={walkTransitWalkItinerary}
+    useMetricUnits
+  />
+);
+
 export const BikeTransitBikeItinerary = (): ReactElement => (
   <OtpRRItineraryBodyWrapper itinerary={bikeTransitBikeItinerary} />
 );

packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx

@@ -43,10 +43,18 @@ export const WalkOnlyItinerary = (): ReactElement => (
   <ItineraryBodyDefaultsWrapper itinerary={walkOnlyItinerary} />
 );
 
+export const WalkOnlyItineraryMetricUnits = (): ReactElement => (
+  <ItineraryBodyDefaultsWrapper itinerary={walkOnlyItinerary} useMetricUnits />
+);
+
 export const BikeOnlyItinerary = (): ReactElement => (
   <ItineraryBodyDefaultsWrapper itinerary={bikeOnlyItinerary} />
 );
 
+export const BikeOnlyItineraryMetricUnits = (): ReactElement => (
+  <ItineraryBodyDefaultsWrapper itinerary={bikeOnlyItinerary} useMetricUnits />
+);
+
 export const WalkTransitWalkItinerary = (): ReactElement => (
   <ItineraryBodyDefaultsWrapper
     itinerary={walkTransitWalkItinerary}
@@ -99,6 +107,15 @@ export const WalkTransitWalkItineraryWithCustomViewTripButtonActivatedAndCustomR
   />
 );
 
+export const WalkTransitWalkItineraryWithCustomViewTripButtonActivatedAndCustomRouteAbbreviationUseMetricUnits = (): ReactElement => (
+  <ItineraryBodyDefaultsWrapper
+    itinerary={walkTransitWalkItinerary}
+    showViewTripButton
+    toRouteAbbreviation={customToRouteAbbreviation}
+    useMetricUnits
+  />
+);
+
 export const BikeTransitBikeItinerary = (): ReactElement => (
   <ItineraryBodyDefaultsWrapper itinerary={bikeTransitBikeItinerary} />
 );

packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx

@@ -20,6 +20,7 @@ const config = require("../__mocks__/config.json");
 type Props = ItineraryBodyProps & {
   hideDrivingDirections?: boolean;
   styledItinerary?: string;
+  useMetricUnits?: boolean;
 };
 
 interface State {
@@ -62,7 +63,8 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
       TransitLegSubheader,
       TransitLegSummary,
       AlertToggleIcon,
-      AlertBodyIcon
+      AlertBodyIcon,
+      useMetricUnits = false
     } = this.props;
     const { diagramVisible } = this.state;
     let ItineraryBodyComponent;
@@ -112,6 +114,7 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
         toRouteAbbreviation={toRouteAbbreviation}
         TransitLegSubheader={TransitLegSubheader}
         TransitLegSummary={TransitLegSummary || DefaultTransitLegSummary}
+        useMetricUnits={useMetricUnits}
       />
     );
   }

packages/itinerary-body/src/types.ts

@@ -232,6 +232,8 @@ interface ItineraryBodySharedProps {
    * - stopsExpanded: whether the intermediate stop display is currently expanded
    */
   TransitLegSummary: FunctionComponent<TransitLegSummaryProps>;
+  /** If true, metric units (km, m) will be used. By default imperial units (mile, feet) will be used */
+  useMetricUnits?: boolean;
 }
 
 export interface PlaceRowProps

packages/location-field/src/index.tsx

@@ -185,7 +185,8 @@ const LocationField = ({
   suggestionHeadingType: headingType,
   suppressNearby = false,
   UserLocationIconComponent = UserLocationIcon,
-  userLocationsAndRecentPlaces = []
+  userLocationsAndRecentPlaces = [],
+  useMetricUnits = false
 }: LocationFieldProps): React.ReactElement => {
   /**
    * Gets the initial value to place in the input field.
@@ -724,6 +725,7 @@ const LocationField = ({
             onClick={locationSelected}
             stop={stop}
             stopOptionIcon={stopOptionIcon}
+            useMetricUnits={useMetricUnits}
           />
         );
         itemIndex++;