From bb5cf33b6b25a15df4c4ee2131c08b5a570fc7ee Mon Sep 17 00:00:00 2001 From: Miguel Cabrerizo Date: Fri, 19 Apr 2024 08:29:36 +0200 Subject: [PATCH 1/5] fix(itinerary-body): allow metric units for distance --- .../src/AccessLegBody/access-leg-steps.tsx | 6 ++++-- .../src/AccessLegBody/access-leg-summary.tsx | 10 ++++++++-- .../src/AccessLegBody/index.tsx | 7 ++++++- .../src/AccessLegBody/tnc-leg.tsx | 5 ++++- .../src/ItineraryBody/index.tsx | 4 +++- .../src/ItineraryBody/place-row.tsx | 4 +++- .../src/defaults/access-leg-description.tsx | 11 +++++++--- .../src/defaults/access-leg-step.tsx | 7 ++++--- .../src/stories/OtpRrItineraryBody.story.tsx | 20 ++++++++++++++++++- .../src/stories/OtpUiItineraryBody.story.tsx | 17 ++++++++++++++++ .../itinerary-body-defaults-wrapper.tsx | 5 ++++- packages/itinerary-body/src/types.ts | 2 ++ yarn.lock | 5 +++++ 13 files changed, 87 insertions(+), 16 deletions(-) diff --git a/packages/itinerary-body/src/AccessLegBody/access-leg-steps.tsx b/packages/itinerary-body/src/AccessLegBody/access-leg-steps.tsx index 5968175f4..6b9d46e7d 100644 --- a/packages/itinerary-body/src/AccessLegBody/access-leg-steps.tsx +++ b/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 ( @@ -33,7 +35,7 @@ export default function AccessLegSteps({ - + void; showLegIcon: boolean; + useMetricUnits?: boolean; } export default function AccessLegSummary({ @@ -19,7 +20,8 @@ export default function AccessLegSummary({ leg, LegIcon, onSummaryClick, - showLegIcon + showLegIcon, + useMetricUnits = false }: Props): ReactElement { return ( @@ -32,7 +34,11 @@ export default function AccessLegSummary({ )} - - + ; + useMetricUnits?: boolean; } interface State { @@ -77,7 +78,8 @@ class AccessLegBody extends Component { setLegDiagram, showElevationProfile, showLegIcon, - TransitLegSubheader + TransitLegSubheader, + useMetricUnits = false } = this.props; const { expanded } = this.state; @@ -93,6 +95,7 @@ class AccessLegBody extends Component { LegIcon={LegIcon} onSummaryClick={this.onSummaryClick} showLegIcon={showLegIcon} + useMetricUnits={useMetricUnits} /> ); } @@ -121,6 +124,7 @@ class AccessLegBody extends Component { LegIcon={LegIcon} onSummaryClick={this.onSummaryClick} showLegIcon={showLegIcon} + useMetricUnits={useMetricUnits} /> {hideDrivingDirections ? ( @@ -163,6 +167,7 @@ class AccessLegBody extends Component { mapillaryCallback={mapillaryCallback} mapillaryKey={mapillaryKey} steps={leg.steps} + useMetricUnits={useMetricUnits} /> diff --git a/packages/itinerary-body/src/AccessLegBody/tnc-leg.tsx b/packages/itinerary-body/src/AccessLegBody/tnc-leg.tsx index 8e31cfb7f..eead6bab7 100644 --- a/packages/itinerary-body/src/AccessLegBody/tnc-leg.tsx +++ b/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 */} diff --git a/packages/itinerary-body/src/ItineraryBody/index.tsx b/packages/itinerary-body/src/ItineraryBody/index.tsx index 8bc960db7..1bf3b3e6e 100755 --- a/packages/itinerary-body/src/ItineraryBody/index.tsx +++ b/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} /> ); } diff --git a/packages/itinerary-body/src/ItineraryBody/place-row.tsx b/packages/itinerary-body/src/ItineraryBody/place-row.tsx index d1e652878..a14be3f96 100755 --- a/packages/itinerary-body/src/ItineraryBody/place-row.tsx +++ b/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} /> ))} diff --git a/packages/itinerary-body/src/defaults/access-leg-description.tsx b/packages/itinerary-body/src/defaults/access-leg-description.tsx index 19ae3c1de..a28ccbee8 100644 --- a/packages/itinerary-body/src/defaults/access-leg-description.tsx +++ b/packages/itinerary-body/src/defaults/access-leg-description.tsx @@ -9,6 +9,7 @@ import { defaultMessages, getPlaceName } from "../util"; interface Props extends HTMLAttributes { 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 }} diff --git a/packages/itinerary-body/src/defaults/access-leg-step.tsx b/packages/itinerary-body/src/defaults/access-leg-step.tsx index d76b60591..7acfbc9ef 100644 --- a/packages/itinerary-body/src/defaults/access-leg-step.tsx +++ b/packages/itinerary-body/src/defaults/access-leg-step.tsx @@ -12,6 +12,7 @@ import StreetName from "./street-name"; interface Props extends HTMLAttributes { step: Step; + useMetricUnits?: boolean; } /** @@ -20,7 +21,8 @@ interface Props extends HTMLAttributes { 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. {stepContent} - {/* TODO: Implement metric vs imperial (up until now it's just imperial). */} {step?.distance > 0 && ( - {humanizeDistanceString(step.distance, false, intl)} + {humanizeDistanceString(step.distance, useMetricUnits, intl)} )} diff --git a/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx b/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx index 22ad83a28..12610c1e1 100644 --- a/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx +++ b/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx @@ -60,6 +60,7 @@ interface StoryWrapperProps { hideDrivingDirections?: boolean; itinerary: Itinerary; TimeColumnContent?: FunctionComponent; + useMetricUnits?: boolean; } function OtpRRItineraryBodyWrapper({ @@ -67,7 +68,8 @@ function OtpRRItineraryBodyWrapper({ defaultFareSelector, hideDrivingDirections = false, itinerary, - TimeColumnContent + TimeColumnContent, + useMetricUnits = false }: StoryWrapperProps): ReactElement { return ( ); } @@ -99,11 +102,19 @@ export const WalkOnlyItinerary = (): ReactElement => ( ); +export const WalkOnlyItineraryMetricUnits = (): ReactElement => ( + +); + // OTP2.4 type data export const Otp24Itinerary = (): ReactElement => ( ); +export const Otp24ItineraryMetricUnits = (): ReactElement => ( + +); + export const BikeOnlyItinerary = (): ReactElement => ( ); @@ -112,6 +123,13 @@ export const WalkTransitWalkItinerary = (): ReactElement => ( ); +export const WalkTransitWalkItineraryUseMetricUnits = (): ReactElement => ( + +); + export const BikeTransitBikeItinerary = (): ReactElement => ( ); diff --git a/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx b/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx index 3a8708fce..195b17dec 100644 --- a/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx +++ b/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx @@ -43,10 +43,18 @@ export const WalkOnlyItinerary = (): ReactElement => ( ); +export const WalkOnlyItineraryMetricUnits = (): ReactElement => ( + +); + export const BikeOnlyItinerary = (): ReactElement => ( ); +export const BikeOnlyItineraryMetricUnits = (): ReactElement => ( + +); + export const WalkTransitWalkItinerary = (): ReactElement => ( ); +export const WalkTransitWalkItineraryWithCustomViewTripButtonActivatedAndCustomRouteAbbreviationUseMetricUnits = (): ReactElement => ( + +); + export const BikeTransitBikeItinerary = (): ReactElement => ( ); diff --git a/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx b/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx index 1b68669c8..69d9cb290 100644 --- a/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx +++ b/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} /> ); } diff --git a/packages/itinerary-body/src/types.ts b/packages/itinerary-body/src/types.ts index 934a6829a..e9c193b66 100644 --- a/packages/itinerary-body/src/types.ts +++ b/packages/itinerary-body/src/types.ts @@ -232,6 +232,8 @@ interface ItineraryBodySharedProps { * - stopsExpanded: whether the intermediate stop display is currently expanded */ TransitLegSummary: FunctionComponent; + /** If true, metric units (km, m) will be used. By default imperial units (mile, feet) will be used */ + useMetricUnits?: boolean; } export interface PlaceRowProps diff --git a/yarn.lock b/yarn.lock index 886be9fff..1efbb8130 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3246,6 +3246,11 @@ resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca" integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q== +"@opentripplanner/types@6.4.0": + version "6.4.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.4.0.tgz#6f7a3475ea982c7b7d8b2f1383a6d775dfabe62a" + integrity sha512-PS+CUwETLf0WzAUZg3qiey+SBigaf0CfknKF1XMOM+zJVc2c8nN34hgnwV7sS+RKs030KZFAgIn8p035ErcBuQ== + "@peculiar/asn1-schema@^2.1.6", "@peculiar/asn1-schema@^2.3.0": version "2.3.3" resolved "https://registry.yarnpkg.com/@peculiar/asn1-schema/-/asn1-schema-2.3.3.tgz#21418e1f3819e0b353ceff0c2dad8ccb61acd777" From 256a16439cef3dee1b9eb12369db483f1e4a13f0 Mon Sep 17 00:00:00 2001 From: Miguel Cabrerizo Date: Fri, 19 Apr 2024 19:09:20 +0200 Subject: [PATCH 2/5] fix: use humanizeDistanceString in LocationField --- packages/location-field/src/index.tsx | 4 +++- packages/location-field/src/options.tsx | 11 +++++++---- .../location-field/src/stories/Mobile.story.tsx | 15 +++++++++++++++ packages/location-field/src/types.ts | 2 ++ 4 files changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx index 6eeb9aab0..6b05a503a 100644 --- a/packages/location-field/src/index.tsx +++ b/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++; diff --git a/packages/location-field/src/options.tsx b/packages/location-field/src/options.tsx index 44527ef8a..be434e1e7 100644 --- a/packages/location-field/src/options.tsx +++ b/packages/location-field/src/options.tsx @@ -1,7 +1,7 @@ -import { humanizeDistanceStringImperial } from "@opentripplanner/humanize-distance"; +import { humanizeDistanceString } from "@opentripplanner/humanize-distance"; import { Stop, UserLocation } from "@opentripplanner/types"; import React from "react"; -import { IntlShape } from "react-intl"; +import { IntlShape, useIntl } from "react-intl"; import { Bus } from "@styled-icons/fa-solid/Bus"; import { Briefcase } from "@styled-icons/fa-solid/Briefcase"; import { Home } from "@styled-icons/fa-solid/Home"; @@ -110,20 +110,23 @@ export function TransitStopOption({ isActive = false, onClick, stop, - stopOptionIcon + stopOptionIcon, + useMetricUnits = false }: { id?: string; isActive?: boolean; onClick: () => void; stop: Stop; stopOptionIcon: React.ReactNode; + useMetricUnits?: boolean; }): React.ReactElement { + const intl = useIntl(); return ( {stopOptionIcon} - {humanizeDistanceStringImperial(stop.dist, true)} + {humanizeDistanceString(stop.dist, useMetricUnits, intl)} diff --git a/packages/location-field/src/stories/Mobile.story.tsx b/packages/location-field/src/stories/Mobile.story.tsx index 874f7b41f..efe12bd43 100644 --- a/packages/location-field/src/stories/Mobile.story.tsx +++ b/packages/location-field/src/stories/Mobile.story.tsx @@ -207,6 +207,21 @@ export const WithNearbyStops = (): JSX.Element => ( /> ); +export const WithNearbyStopsMetricUnits = (): JSX.Element => ( + +); + export const WithSessionSearches = (): JSX.Element => ( Date: Fri, 19 Apr 2024 19:26:11 +0200 Subject: [PATCH 3/5] fix: add useMetricUnits to printable-itinerary AccessLeg --- .../src/PrintableItinerary.story.tsx | 27 +++++++++++++++++++ .../printable-itinerary/src/access-leg.tsx | 12 ++++++--- packages/printable-itinerary/src/index.tsx | 13 +++++++-- 3 files changed, 47 insertions(+), 5 deletions(-) diff --git a/packages/printable-itinerary/src/PrintableItinerary.story.tsx b/packages/printable-itinerary/src/PrintableItinerary.story.tsx index 963c8828f..c6314d9a8 100644 --- a/packages/printable-itinerary/src/PrintableItinerary.story.tsx +++ b/packages/printable-itinerary/src/PrintableItinerary.story.tsx @@ -42,6 +42,15 @@ export const WalkOnlyItinerary = () => ( /> ); +export const WalkOnlyItineraryMetricUnits = () => ( + +); + // OTP 2.4 type data export const OTP24Itinerary = () => ( ( /> ); +export const OTP24ItineraryMetricUnits = () => ( + +); + export const BikeOnlyItinerary = () => ( ( /> ); +export const BikeOnlyItineraryUseMetric = () => ( + +); + export const WalkTransitWalkItinerary = () => ( @@ -31,12 +33,16 @@ export default function AccessLeg({ LegIcon={LegIcon} /> - + {!leg.rideHailingEstimate && ( {leg.steps.map((step, k) => ( - + ))} diff --git a/packages/printable-itinerary/src/index.tsx b/packages/printable-itinerary/src/index.tsx index 5c6248d27..3ee3c262e 100644 --- a/packages/printable-itinerary/src/index.tsx +++ b/packages/printable-itinerary/src/index.tsx @@ -17,13 +17,16 @@ interface Props { itinerary: Itinerary; /** A component class that is used to render icons for legs of an itinerary. */ LegIcon: LegIconComponent; + /** If true, metric units (km, m) will be used. By default imperial units (mile, feet) will be used */ + useMetricUnits?: boolean; } function PrintableItinerary({ className, config, itinerary, - LegIcon + LegIcon, + useMetricUnits = false }: Props): ReactElement { return ( @@ -60,7 +63,13 @@ function PrintableItinerary({ ) : leg.rideHailingEstimate ? ( ) : ( - + ) )} From e1c6678f1e54c56560f9c6ae6d9714cb3ae071df Mon Sep 17 00:00:00 2001 From: Miguel Cabrerizo Date: Fri, 26 Apr 2024 11:15:27 +0200 Subject: [PATCH 4/5] fix: add areMetricUnitsUsed and use react-intl --- packages/core-utils/src/index.ts | 2 + packages/core-utils/src/metricUnits.ts | 43 +++++++++++++++ packages/itinerary-body/i18n/es.yml | 54 +++++++++---------- .../src/AccessLegBody/access-leg-steps.tsx | 6 +-- .../src/AccessLegBody/access-leg-summary.tsx | 10 +--- .../src/AccessLegBody/index.tsx | 7 +-- .../src/AccessLegBody/tnc-leg.tsx | 5 +- .../src/ItineraryBody/index.tsx | 4 +- .../src/ItineraryBody/place-row.tsx | 4 +- .../src/defaults/access-leg-description.tsx | 7 ++- .../src/defaults/access-leg-step.tsx | 11 ++-- .../src/stories/OtpRrItineraryBody.story.tsx | 20 +------ .../itinerary-body-defaults-wrapper.tsx | 5 +- packages/itinerary-body/src/types.ts | 2 - packages/location-field/src/index.tsx | 4 +- packages/location-field/src/options.tsx | 11 ++-- .../src/stories/Mobile.story.tsx | 15 ------ packages/location-field/src/types.ts | 2 - .../src/PrintableItinerary.story.tsx | 27 ---------- .../printable-itinerary/src/access-leg.tsx | 12 ++--- packages/printable-itinerary/src/index.tsx | 13 +---- 21 files changed, 103 insertions(+), 161 deletions(-) create mode 100644 packages/core-utils/src/metricUnits.ts diff --git a/packages/core-utils/src/index.ts b/packages/core-utils/src/index.ts index 5ce856f76..79cfb3db6 100644 --- a/packages/core-utils/src/index.ts +++ b/packages/core-utils/src/index.ts @@ -7,6 +7,7 @@ import * as route from "./route"; import * as storage from "./storage"; import * as time from "./time"; import * as ui from "./ui"; +import * as metricUnits from "./metricUnits"; import * as queryGen from "./query-gen"; const core = { @@ -19,6 +20,7 @@ const core = { route, storage, time, + metricUnits, ui }; diff --git a/packages/core-utils/src/metricUnits.ts b/packages/core-utils/src/metricUnits.ts new file mode 100644 index 000000000..07431e5ee --- /dev/null +++ b/packages/core-utils/src/metricUnits.ts @@ -0,0 +1,43 @@ +// Reference: https://en.wikipedia.org/wiki/Mile +// While most countries abandoned the mile when switching to the metric system, +// the international mile continues to be used in some countries, such as Liberia, +// Myanmar, the United Kingdom and the United States. It is also used in a number +// of territories with less than a million inhabitants, most of which are UK or US territories, +// or have close historical ties with the UK or US: American Samoa, Bahamas, Belize, +// British Virgin Islands, Cayman Islands, Dominica, Falkland Islands, Grenada,Guam, +// The N. Mariana Islands, Samoa, St. Lucia, St. Vincent & The Grenadines, St. Helena, +// St. Kitts & Nevis, the Turks & Caicos Islands, and the US Virgin Islands. +// The mile is even encountered in Canada, though this is predominantly in rail transport +// and horse racing, as the roadways have been metricated since 1977. + +export const areMetricUnitsUsed = (locale: string): boolean => { + const localesUsingImperialUnits = [ + "en-US", + "en-GB", + "en-LR", + "en-AS", + "sm-AS", + "en-BS", + "en-BZ", + "es-BZ", + "en-VG", + "en-KY", + "en-DM", + "en-GD", + "en-GU", + "en-MP", + "en-WS", + "sm-WS", + "en-LC", + "en-VC", + "en-SH", + "en-KN", + "en-TC", + "en-VI", + "my-MM" + ]; + + return !localesUsingImperialUnits.includes(locale); +}; + +export default areMetricUnitsUsed; diff --git a/packages/itinerary-body/i18n/es.yml b/packages/itinerary-body/i18n/es.yml index 623a44ba6..787b09271 100644 --- a/packages/itinerary-body/i18n/es.yml +++ b/packages/itinerary-body/i18n/es.yml @@ -10,30 +10,27 @@ otpUi: vehicleType: bike: la bicicleta bikeshare: la bicicleta compartida - car: el carro - escooter: la patineta + car: el coche + escooter: el patín vehicle: el vehículo - walkVehicle: Caminar vehículo por la {place} + walkVehicle: Conduzca el vehículo por {place} TncLeg: bookRide: Reservar un viaje - bookRideLater: Espere hasta las {timeMillis, time, short} para reservar + bookRideLater: Espera hasta las {timeMillis, time, short} para reservar estimatedCost: "Costo estimado: {minFare} - {maxFare}" - estimatedTravelTime: "Tiempo de viaje estimado: {duration} (no tiene en cuenta - el tráfico)" - waitForPickup: "Espera al conductor {company}{minutes, plural, =0 {} other { - # minutos}}" + estimatedTravelTime: "Tiempo de viaje estimado: {duration} (no tiene en cuenta el tráfico)" + waitForPickup: "Espera al conductor {company}{minutes, plural, =0 {} other { # minutos}}" mapillaryTooltip: Mostrar imágenes de la calle en esta ubicación step: - circleClockwise: Siga el círculo en el sentido de las agujas del reloj - circleCounterClockwise: Siga el círculo en sentido contrario a las agujas del - reloj - continue: Continuar - enterStation: Entrar a la estación - exitStation: Salir de la estación - hardLeft: Giro a la izquierda - hardRight: Giro a la derecha - left: Vire a la izquierda - right: Vire a la derecha + circleClockwise: Sigue el círculo en el sentido de las agujas del reloj + circleCounterClockwise: Sigue el círculo en sentido contrario a las agujas del reloj + continue: Continua + enterStation: Entra en la estación + exitStation: Sal de la estación + hardLeft: Turce a la izquierda + hardRight: Tuerce a la derecha + left: Gira a la izquierda + right: Gira a la derecha slightlyLeft: Ligeramente a la izquierda slightlyRight: Ligeramente a la derecha uTurnLeft: Media vuelta a la izquierda @@ -52,15 +49,15 @@ otpUi: southwest: el suroeste west: el oeste stepStation: "{step} en {street}" - summary: "{mode} a {place}" - summaryAndDistance: "{mode} - {distance} a {place}" + summary: "{mode} hacia {place}" + summaryAndDistance: "{mode} {distance} hacia {place}" summaryMode: bike: Bicicleta bikeshare: Bicicleta compartida carDrive: Coche carHail: Paseo - escooter: Patineta - walk: Caminar + escooter: Patín + walk: Camine unnamedPath: Sendero sin nombre unnamedRoad: Calle sin nombre vehicleTitle: "{vehicleType} {company}" @@ -68,13 +65,12 @@ otpUi: bike: Bicicleta bikeshare: Bicicleta compartida car: Coche - escooter: Patineta + escooter: Patín vehicle: Vehículo ItineraryBody: common: durationShort: "{hours, plural, =0 {} other {# hr. }}{minutes} min" - flexAdvanceNotice: " al menos {leadDays, plural, one {# día} other {# días}} de - antelación" + flexAdvanceNotice: " al menos {leadDays, plural, one {# día} other {# días}} de antelación" flexCallAhead: llama con anticipación flexCallNumber: llama {phoneNumber} flexPickupMessage: Para tomar esta ruta, tiene que {action}{advanceNotice}. @@ -85,13 +81,13 @@ otpUi: car: en carro escooter: en patineta walk: a pie - viewOnMap: Ver en el mapa tripAccessibility: inaccessible: inaccesible - unclear: desconocido - legAccessibility: 'Accesibilidad para sillas de ruedas en este tramo del viaje: ' + itineraryAccessibility: "Accesibilidad para sillas de ruedas en este viaje: " + legAccessibility: "Accesibilidad para sillas de ruedas en este tramo del viaje: " likelyAccessible: probablemente accesible - itineraryAccessibility: 'Accesibilidad para sillas de ruedas en este viaje: ' + unclear: desconocido + viewOnMap: Ver en el mapa TransitLegBody: AlertsBody: effectiveDate: A partir de {dateTime, date, long} diff --git a/packages/itinerary-body/src/AccessLegBody/access-leg-steps.tsx b/packages/itinerary-body/src/AccessLegBody/access-leg-steps.tsx index 6b9d46e7d..5968175f4 100644 --- a/packages/itinerary-body/src/AccessLegBody/access-leg-steps.tsx +++ b/packages/itinerary-body/src/AccessLegBody/access-leg-steps.tsx @@ -12,7 +12,6 @@ interface Props { mapillaryCallback?: (id: string) => void; mapillaryKey?: string; steps: Step[]; - useMetricUnits?: boolean; } /** @@ -21,8 +20,7 @@ interface Props { export default function AccessLegSteps({ steps, mapillaryCallback, - mapillaryKey, - useMetricUnits = false + mapillaryKey }: Props): ReactElement { return ( @@ -35,7 +33,7 @@ export default function AccessLegSteps({ - + void; showLegIcon: boolean; - useMetricUnits?: boolean; } export default function AccessLegSummary({ @@ -20,8 +19,7 @@ export default function AccessLegSummary({ leg, LegIcon, onSummaryClick, - showLegIcon, - useMetricUnits = false + showLegIcon }: Props): ReactElement { return ( @@ -34,11 +32,7 @@ export default function AccessLegSummary({ )} - - + ; - useMetricUnits?: boolean; } interface State { @@ -78,8 +77,7 @@ class AccessLegBody extends Component { setLegDiagram, showElevationProfile, showLegIcon, - TransitLegSubheader, - useMetricUnits = false + TransitLegSubheader } = this.props; const { expanded } = this.state; @@ -95,7 +93,6 @@ class AccessLegBody extends Component { LegIcon={LegIcon} onSummaryClick={this.onSummaryClick} showLegIcon={showLegIcon} - useMetricUnits={useMetricUnits} /> ); } @@ -124,7 +121,6 @@ class AccessLegBody extends Component { LegIcon={LegIcon} onSummaryClick={this.onSummaryClick} showLegIcon={showLegIcon} - useMetricUnits={useMetricUnits} /> {hideDrivingDirections ? ( @@ -167,7 +163,6 @@ class AccessLegBody extends Component { mapillaryCallback={mapillaryCallback} mapillaryKey={mapillaryKey} steps={leg.steps} - useMetricUnits={useMetricUnits} /> diff --git a/packages/itinerary-body/src/AccessLegBody/tnc-leg.tsx b/packages/itinerary-body/src/AccessLegBody/tnc-leg.tsx index eead6bab7..8e31cfb7f 100644 --- a/packages/itinerary-body/src/AccessLegBody/tnc-leg.tsx +++ b/packages/itinerary-body/src/AccessLegBody/tnc-leg.tsx @@ -19,7 +19,6 @@ interface Props { onSummaryClick: () => void; showLegIcon: boolean; UBER_CLIENT_ID?: string; - useMetricUnits?: boolean; } export default function TNCLeg({ @@ -30,8 +29,7 @@ export default function TNCLeg({ LYFT_CLIENT_ID = "", onSummaryClick, showLegIcon, - UBER_CLIENT_ID = "", - useMetricUnits = false + UBER_CLIENT_ID = "" }: Props): ReactElement { const universalLinks = { uber: `https://m.uber.com/${ @@ -76,7 +74,6 @@ export default function TNCLeg({ LegIcon={LegIcon} onSummaryClick={onSummaryClick} showLegIcon={showLegIcon} - useMetricUnits={useMetricUnits} /> {/* The "Book Ride" button */} diff --git a/packages/itinerary-body/src/ItineraryBody/index.tsx b/packages/itinerary-body/src/ItineraryBody/index.tsx index 1bf3b3e6e..8bc960db7 100755 --- a/packages/itinerary-body/src/ItineraryBody/index.tsx +++ b/packages/itinerary-body/src/ItineraryBody/index.tsx @@ -41,8 +41,7 @@ const ItineraryBody = ({ TimeColumnContent, toRouteAbbreviation = defaultRouteAbbr, TransitLegSubheader, - TransitLegSummary, - useMetricUnits = false + TransitLegSummary }: ItineraryBodyProps): ReactElement => { /* TODO: replace component should update logic? companies is simply used to @@ -92,7 +91,6 @@ const ItineraryBody = ({ toRouteAbbreviation={toRouteAbbreviation} TransitLegSubheader={TransitLegSubheader} TransitLegSummary={TransitLegSummary} - useMetricUnits={useMetricUnits} /> ); } diff --git a/packages/itinerary-body/src/ItineraryBody/place-row.tsx b/packages/itinerary-body/src/ItineraryBody/place-row.tsx index a14be3f96..d1e652878 100755 --- a/packages/itinerary-body/src/ItineraryBody/place-row.tsx +++ b/packages/itinerary-body/src/ItineraryBody/place-row.tsx @@ -47,8 +47,7 @@ export default function PlaceRow({ TimeColumnContent = DefaultTimeColumnContent, toRouteAbbreviation, TransitLegSubheader, - TransitLegSummary, - useMetricUnits + TransitLegSummary }: 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 @@ -176,7 +175,6 @@ export default function PlaceRow({ showElevationProfile={showElevationProfile} showLegIcon={showLegIcon} TransitLegSubheader={TransitLegSubheader} - useMetricUnits={useMetricUnits} /> ))} diff --git a/packages/itinerary-body/src/defaults/access-leg-description.tsx b/packages/itinerary-body/src/defaults/access-leg-description.tsx index a28ccbee8..3e92f4ea5 100644 --- a/packages/itinerary-body/src/defaults/access-leg-description.tsx +++ b/packages/itinerary-body/src/defaults/access-leg-description.tsx @@ -1,3 +1,4 @@ +import coreUtils from "@opentripplanner/core-utils"; import { humanizeDistanceString } from "@opentripplanner/humanize-distance"; import { Config, Leg } from "@opentripplanner/types"; import React, { HTMLAttributes, ReactElement } from "react"; @@ -9,7 +10,6 @@ import { defaultMessages, getPlaceName } from "../util"; interface Props extends HTMLAttributes { config: Config; leg: Leg; - useMetricUnits?: boolean; } /** @@ -72,8 +72,7 @@ export default function AccessLegDescription({ className, config, leg, - style, - useMetricUnits + style }: Props): ReactElement { const intl = useIntl(); // Replace the Vertex Type for BIKESHARE with VEHICLE as we do not know that @@ -102,7 +101,7 @@ export default function AccessLegDescription({ values={{ distance: humanizeDistanceString( leg.distance, - useMetricUnits, + coreUtils.metricUnits.areMetricUnitsUsed(intl.locale), intl ), mode: modeContent, diff --git a/packages/itinerary-body/src/defaults/access-leg-step.tsx b/packages/itinerary-body/src/defaults/access-leg-step.tsx index 7acfbc9ef..3150ee2a3 100644 --- a/packages/itinerary-body/src/defaults/access-leg-step.tsx +++ b/packages/itinerary-body/src/defaults/access-leg-step.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-case-declarations */ import { Step } from "@opentripplanner/types"; +import coreUtils from "@opentripplanner/core-utils"; import React, { HTMLAttributes, ReactElement } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { humanizeDistanceString } from "@opentripplanner/humanize-distance"; @@ -12,7 +13,6 @@ import StreetName from "./street-name"; interface Props extends HTMLAttributes { step: Step; - useMetricUnits?: boolean; } /** @@ -21,8 +21,7 @@ interface Props extends HTMLAttributes { export default function AccessLegStep({ className, step, - style, - useMetricUnits = false + style }: Props): ReactElement { const { absoluteDirection, relativeDirection, streetName } = step; const intl = useIntl(); @@ -108,7 +107,11 @@ export default function AccessLegStep({ {stepContent} {step?.distance > 0 && ( - {humanizeDistanceString(step.distance, useMetricUnits, intl)} + {humanizeDistanceString( + step.distance, + coreUtils.metricUnits.areMetricUnitsUsed(intl.locale), + intl + )} )} diff --git a/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx b/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx index 12610c1e1..22ad83a28 100644 --- a/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx +++ b/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx @@ -60,7 +60,6 @@ interface StoryWrapperProps { hideDrivingDirections?: boolean; itinerary: Itinerary; TimeColumnContent?: FunctionComponent; - useMetricUnits?: boolean; } function OtpRRItineraryBodyWrapper({ @@ -68,8 +67,7 @@ function OtpRRItineraryBodyWrapper({ defaultFareSelector, hideDrivingDirections = false, itinerary, - TimeColumnContent, - useMetricUnits = false + TimeColumnContent }: StoryWrapperProps): ReactElement { return ( ); } @@ -102,19 +99,11 @@ export const WalkOnlyItinerary = (): ReactElement => ( ); -export const WalkOnlyItineraryMetricUnits = (): ReactElement => ( - -); - // OTP2.4 type data export const Otp24Itinerary = (): ReactElement => ( ); -export const Otp24ItineraryMetricUnits = (): ReactElement => ( - -); - export const BikeOnlyItinerary = (): ReactElement => ( ); @@ -123,13 +112,6 @@ export const WalkTransitWalkItinerary = (): ReactElement => ( ); -export const WalkTransitWalkItineraryUseMetricUnits = (): ReactElement => ( - -); - export const BikeTransitBikeItinerary = (): ReactElement => ( ); diff --git a/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx b/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx index 69d9cb290..1b68669c8 100644 --- a/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx +++ b/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx @@ -20,7 +20,6 @@ const config = require("../__mocks__/config.json"); type Props = ItineraryBodyProps & { hideDrivingDirections?: boolean; styledItinerary?: string; - useMetricUnits?: boolean; }; interface State { @@ -63,8 +62,7 @@ export default class ItineraryBodyDefaultsWrapper extends Component< TransitLegSubheader, TransitLegSummary, AlertToggleIcon, - AlertBodyIcon, - useMetricUnits = false + AlertBodyIcon } = this.props; const { diagramVisible } = this.state; let ItineraryBodyComponent; @@ -114,7 +112,6 @@ export default class ItineraryBodyDefaultsWrapper extends Component< toRouteAbbreviation={toRouteAbbreviation} TransitLegSubheader={TransitLegSubheader} TransitLegSummary={TransitLegSummary || DefaultTransitLegSummary} - useMetricUnits={useMetricUnits} /> ); } diff --git a/packages/itinerary-body/src/types.ts b/packages/itinerary-body/src/types.ts index e9c193b66..934a6829a 100644 --- a/packages/itinerary-body/src/types.ts +++ b/packages/itinerary-body/src/types.ts @@ -232,8 +232,6 @@ interface ItineraryBodySharedProps { * - stopsExpanded: whether the intermediate stop display is currently expanded */ TransitLegSummary: FunctionComponent; - /** If true, metric units (km, m) will be used. By default imperial units (mile, feet) will be used */ - useMetricUnits?: boolean; } export interface PlaceRowProps diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx index 6b05a503a..6eeb9aab0 100644 --- a/packages/location-field/src/index.tsx +++ b/packages/location-field/src/index.tsx @@ -185,8 +185,7 @@ const LocationField = ({ suggestionHeadingType: headingType, suppressNearby = false, UserLocationIconComponent = UserLocationIcon, - userLocationsAndRecentPlaces = [], - useMetricUnits = false + userLocationsAndRecentPlaces = [] }: LocationFieldProps): React.ReactElement => { /** * Gets the initial value to place in the input field. @@ -725,7 +724,6 @@ const LocationField = ({ onClick={locationSelected} stop={stop} stopOptionIcon={stopOptionIcon} - useMetricUnits={useMetricUnits} /> ); itemIndex++; diff --git a/packages/location-field/src/options.tsx b/packages/location-field/src/options.tsx index be434e1e7..6dce447ef 100644 --- a/packages/location-field/src/options.tsx +++ b/packages/location-field/src/options.tsx @@ -1,5 +1,6 @@ import { humanizeDistanceString } from "@opentripplanner/humanize-distance"; import { Stop, UserLocation } from "@opentripplanner/types"; +import coreUtils from "@opentripplanner/core-utils"; import React from "react"; import { IntlShape, useIntl } from "react-intl"; import { Bus } from "@styled-icons/fa-solid/Bus"; @@ -110,15 +111,13 @@ export function TransitStopOption({ isActive = false, onClick, stop, - stopOptionIcon, - useMetricUnits = false + stopOptionIcon }: { id?: string; isActive?: boolean; onClick: () => void; stop: Stop; stopOptionIcon: React.ReactNode; - useMetricUnits?: boolean; }): React.ReactElement { const intl = useIntl(); return ( @@ -126,7 +125,11 @@ export function TransitStopOption({ {stopOptionIcon} - {humanizeDistanceString(stop.dist, useMetricUnits, intl)} + {humanizeDistanceString( + stop.dist, + coreUtils.metricUnits.areMetricUnitsUsed(intl.locale), + intl + )} diff --git a/packages/location-field/src/stories/Mobile.story.tsx b/packages/location-field/src/stories/Mobile.story.tsx index efe12bd43..874f7b41f 100644 --- a/packages/location-field/src/stories/Mobile.story.tsx +++ b/packages/location-field/src/stories/Mobile.story.tsx @@ -207,21 +207,6 @@ export const WithNearbyStops = (): JSX.Element => ( /> ); -export const WithNearbyStopsMetricUnits = (): JSX.Element => ( - -); - export const WithSessionSearches = (): JSX.Element => ( ( /> ); -export const WalkOnlyItineraryMetricUnits = () => ( - -); - // OTP 2.4 type data export const OTP24Itinerary = () => ( ( /> ); -export const OTP24ItineraryMetricUnits = () => ( - -); - export const BikeOnlyItinerary = () => ( ( /> ); -export const BikeOnlyItineraryUseMetric = () => ( - -); - export const WalkTransitWalkItinerary = () => ( @@ -33,16 +31,12 @@ export default function AccessLeg({ LegIcon={LegIcon} /> - + {!leg.rideHailingEstimate && ( {leg.steps.map((step, k) => ( - + ))} diff --git a/packages/printable-itinerary/src/index.tsx b/packages/printable-itinerary/src/index.tsx index 3ee3c262e..5c6248d27 100644 --- a/packages/printable-itinerary/src/index.tsx +++ b/packages/printable-itinerary/src/index.tsx @@ -17,16 +17,13 @@ interface Props { itinerary: Itinerary; /** A component class that is used to render icons for legs of an itinerary. */ LegIcon: LegIconComponent; - /** If true, metric units (km, m) will be used. By default imperial units (mile, feet) will be used */ - useMetricUnits?: boolean; } function PrintableItinerary({ className, config, itinerary, - LegIcon, - useMetricUnits = false + LegIcon }: Props): ReactElement { return ( @@ -63,13 +60,7 @@ function PrintableItinerary({ ) : leg.rideHailingEstimate ? ( ) : ( - + ) )} From ff248bdf341959edfcd75224bde5b708478fd64f Mon Sep 17 00:00:00 2001 From: Miguel Cabrerizo Date: Fri, 26 Apr 2024 11:18:27 +0200 Subject: [PATCH 5/5] fix: remove useMetricUnits remaining stories --- .../src/stories/OtpUiItineraryBody.story.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx b/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx index 195b17dec..3a8708fce 100644 --- a/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx +++ b/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx @@ -43,18 +43,10 @@ export const WalkOnlyItinerary = (): ReactElement => ( ); -export const WalkOnlyItineraryMetricUnits = (): ReactElement => ( - -); - export const BikeOnlyItinerary = (): ReactElement => ( ); -export const BikeOnlyItineraryMetricUnits = (): ReactElement => ( - -); - export const WalkTransitWalkItinerary = (): ReactElement => ( ); -export const WalkTransitWalkItineraryWithCustomViewTripButtonActivatedAndCustomRouteAbbreviationUseMetricUnits = (): ReactElement => ( - -); - export const BikeTransitBikeItinerary = (): ReactElement => ( );