diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap index 5e8c4a067..ed86bcd68 100644 --- a/__snapshots__/storybook.test.ts.snap +++ b/__snapshots__/storybook.test.ts.snap @@ -24291,6 +24291,21 @@ exports[`Storyshots ItineraryBody/otp-react-redux Individual Leg Fare Components "route": null, "startTime": 1685139787000, "steps": Array [ + Object { + "relativeDirection": "ENTER_STATION", + "stayOn": false, + "streetName": "fake station name", + }, + Object { + "relativeDirection": "FOLLOW_SIGNS", + "stayOn": false, + "streetName": "fake station exit", + }, + Object { + "relativeDirection": "EXIT_STATION", + "stayOn": false, + "streetName": "fake station name", + }, Object { "absoluteDirection": "EAST", "alerts": Array [], @@ -26196,6 +26211,89 @@ exports[`Storyshots ItineraryBody/otp-react-redux Individual Leg Fare Components
    +
  1. +
    + + + +
    +
    + + ENTER_STATION + at + + fake station name + + +
    +
    2. +
  2. +
    + + + +
    +
    + + Follow signs to + + fake station exit + + +
    +
    3. +
  3. +
    + + + +
    +
    + + EXIT_STATION + at + + fake station name + + +
    +
  4. @@ -108122,6 +108220,21 @@ exports[`Storyshots ItineraryBody/otp-ui Individual Leg Fare Components 1`] = ` "route": null, "startTime": 1685139787000, "steps": Array [ + Object { + "relativeDirection": "ENTER_STATION", + "stayOn": false, + "streetName": "fake station name", + }, + Object { + "relativeDirection": "FOLLOW_SIGNS", + "stayOn": false, + "streetName": "fake station exit", + }, + Object { + "relativeDirection": "EXIT_STATION", + "stayOn": false, + "streetName": "fake station name", + }, Object { "absoluteDirection": "EAST", "alerts": Array [], @@ -109986,6 +110099,89 @@ exports[`Storyshots ItineraryBody/otp-ui Individual Leg Fare Components 2`] = `
      +
    1. +
      + + + +
      +
      + + ENTER_STATION + at + + fake station name + + +
      +
      2. +
    2. +
      + + + +
      +
      + + Follow signs to + + fake station exit + + +
      +
      3. +
    3. +
      + + + +
      +
      + + EXIT_STATION + at + + fake station name + + +
      +
    4. @@ -239918,6 +240114,21 @@ exports[`Storyshots TripDetails Fare Leg Table Story Leg Products 1`] = ` "routeTextColor": undefined, "startTime": 1685139787000, "steps": Array [ + Object { + "relativeDirection": "ENTER_STATION", + "stayOn": false, + "streetName": "fake station name", + }, + Object { + "relativeDirection": "FOLLOW_SIGNS", + "stayOn": false, + "streetName": "fake station exit", + }, + Object { + "relativeDirection": "EXIT_STATION", + "stayOn": false, + "streetName": "fake station name", + }, Object { "absoluteDirection": "EAST", "alerts": Array [], @@ -241675,6 +241886,21 @@ exports[`Storyshots TripDetails Leg Fare Products Itinerary 1`] = ` "route": null, "startTime": 1685139787000, "steps": Array [ + Object { + "relativeDirection": "ENTER_STATION", + "stayOn": false, + "streetName": "fake station name", + }, + Object { + "relativeDirection": "FOLLOW_SIGNS", + "stayOn": false, + "streetName": "fake station exit", + }, + Object { + "relativeDirection": "EXIT_STATION", + "stayOn": false, + "streetName": "fake station name", + }, Object { "absoluteDirection": "EAST", "alerts": Array [], diff --git a/packages/icons/src/directions/index.js b/packages/icons/src/directions/index.js index ee40708d1..f43fe8289 100644 --- a/packages/icons/src/directions/index.js +++ b/packages/icons/src/directions/index.js @@ -44,6 +44,14 @@ function DirectionIcon({ relativeDirection }) { return ; case "ELEVATOR": return ; + case "FOLLOW_SIGNS": + // TODO: Better/custom icon? + return ; + case "ENTER_STATION": + case "EXIT_STATION": + // TODO: Better/custom icon? + return ; + default: return null; } diff --git a/packages/itinerary-body/i18n/en-US.yml b/packages/itinerary-body/i18n/en-US.yml index 60ba6b455..14b903182 100644 --- a/packages/itinerary-body/i18n/en-US.yml +++ b/packages/itinerary-body/i18n/en-US.yml @@ -25,6 +25,8 @@ otpUi: circleClockwise: Follow circle clockwise circleCounterClockwise: Follow circle counterclockwise continue: Continue + enterStation: Enter station + exitStation: Exit station hardLeft: Hard left hardRight: Hard right left: Left @@ -35,6 +37,7 @@ otpUi: uTurnRight: Right U-turn stepDepart: Head {heading} on {street} stepElevator: Take elevator to {street} + stepFollowSigns: Follow signs to {street} stepGeneric: "{step} on {street}" stepHeading: east: east @@ -45,6 +48,7 @@ otpUi: southeast: southeast southwest: southwest west: west + stepStation: "{step} at {street}" summary: "{mode} to {place}" summaryAndDistance: "{mode} {distance} to {place}" summaryMode: diff --git a/packages/itinerary-body/i18n/fr.yml b/packages/itinerary-body/i18n/fr.yml index 6da7e53c1..52eac87a3 100644 --- a/packages/itinerary-body/i18n/fr.yml +++ b/packages/itinerary-body/i18n/fr.yml @@ -29,6 +29,8 @@ otpUi: circleClockwise: Prenez le rond-point par la gauche circleCounterClockwise: Prenez le rond-point par la droite continue: Continuez + enterStation: TODO + exitStation: TODO hardLeft: Virage à gauche hardRight: Virage à droite left: Tournez à gauche @@ -39,6 +41,7 @@ otpUi: uTurnRight: Demi-tour par la droite stepDepart: Dirigez-vous vers {heading} sur {street} stepElevator: Prenez l'ascenseur jusqu'à {street} + stepFollowSigns: TODO {street} stepGeneric: "{step} sur {street}" stepHeading: east: l'est @@ -49,6 +52,7 @@ otpUi: southeast: le sud-est southwest: le sud-ouest west: l'ouest + stepStation: "{step} TODO {street}" summary: "{mode} vers {place}" summaryAndDistance: "{mode} - {distance} vers {place}" summaryMode: @@ -70,8 +74,7 @@ otpUi: ItineraryBody: common: durationShort: "{hours, plural, =0 {} other {# h }}{minutes} min" - flexAdvanceNotice: " au moins {leadDays, plural, one {# jour} other {# jours}}\ - \ à l'avance" + flexAdvanceNotice: " au moins {leadDays, plural, one {# jour} other {# jours}} à l'avance" flexCallAhead: réserver au préalable flexCallNumber: réserver au {phoneNumber} flexPickupMessage: Pour emprunter cette ligne, vous devez {action}{advanceNotice}. @@ -100,8 +103,7 @@ otpUi: legDetails: Détails de l'étape operatedBy: Exploité par {agencyLink} ride: Prenez la ligne - rideDurationAndStops: "Trajet : {duration}{numStops, plural, =1 {} other { / #\ - \ arrêts}}" + rideDurationAndStops: "Trajet : {duration}{numStops, plural, =1 {} other { / # arrêts}}" routeDescription: "{routeName} vers {headsign}" stopId: Arrêt n°{stopId} stopIdBasic: Arrêt n°{stopId} diff --git a/packages/itinerary-body/src/__mocks__/itineraries/leg-fare-products.json b/packages/itinerary-body/src/__mocks__/itineraries/leg-fare-products.json index 0387113e8..b25d58151 100644 --- a/packages/itinerary-body/src/__mocks__/itineraries/leg-fare-products.json +++ b/packages/itinerary-body/src/__mocks__/itineraries/leg-fare-products.json @@ -54,6 +54,21 @@ } }, "steps": [ + { + "relativeDirection": "ENTER_STATION", + "stayOn": false, + "streetName": "fake station name" + }, + { + "relativeDirection": "FOLLOW_SIGNS", + "stayOn": false, + "streetName": "fake station exit" + }, + { + "relativeDirection": "EXIT_STATION", + "stayOn": false, + "streetName": "fake station name" + }, { "distance": 36.61, "lat": 47.7791959, diff --git a/packages/itinerary-body/src/__mocks__/itineraries/otp2-with-fareproducts.json b/packages/itinerary-body/src/__mocks__/itineraries/otp2-with-fareproducts.json index 5fb61c392..94331aaac 100644 --- a/packages/itinerary-body/src/__mocks__/itineraries/otp2-with-fareproducts.json +++ b/packages/itinerary-body/src/__mocks__/itineraries/otp2-with-fareproducts.json @@ -36,6 +36,18 @@ "route": null, "startTime": 1686620636000, "steps": [ + { + "absoluteDirection": "EAST", + "alerts": [], + "area": false, + "distance": 0, + "elevationProfile": [], + "lat": 47.5990191, + "lon": -122.3279188, + "relativeDirection": "ENTER_STATION", + "stayOn": false, + "streetName": "fake station name" + }, { "absoluteDirection": "WEST", "alerts": [], diff --git a/packages/itinerary-body/src/defaults/access-leg-step-action.tsx b/packages/itinerary-body/src/defaults/access-leg-step-action.tsx index 4e5636e2d..641f95076 100644 --- a/packages/itinerary-body/src/defaults/access-leg-step-action.tsx +++ b/packages/itinerary-body/src/defaults/access-leg-step-action.tsx @@ -122,7 +122,7 @@ export default function AccessLegStepAction({ action }: Props): ReactElement { ); case Action.exitStation: @@ -130,15 +130,7 @@ export default function AccessLegStepAction({ action }: Props): ReactElement { - ); - case Action.followSigns: - return ( - ); default: diff --git a/packages/itinerary-body/src/defaults/access-leg-step.tsx b/packages/itinerary-body/src/defaults/access-leg-step.tsx index b877b9444..d76b60591 100644 --- a/packages/itinerary-body/src/defaults/access-leg-step.tsx +++ b/packages/itinerary-body/src/defaults/access-leg-step.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-case-declarations */ import { Step } from "@opentripplanner/types"; import React, { HTMLAttributes, ReactElement } from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -31,43 +32,73 @@ export default function AccessLegStep({ ); let stepContent; - if (relativeDirection === "ELEVATOR") { - stepContent = ( - - ); - } else if (relativeDirection === "DEPART") { - const heading = absoluteDirection as Heading; - stepContent = ( - , - street - }} - /> - ); - } else { - const action = relativeDirection as Action; - stepContent = ( - , - street - }} - /> - ); + const action = relativeDirection as Action; + switch (relativeDirection) { + case "ELEVATOR": + stepContent = ( + + ); + break; + case "DEPART": + const heading = absoluteDirection as Heading; + stepContent = ( + , + street + }} + /> + ); + break; + case "ENTER_STATION": + case "EXIT_STATION": + stepContent = ( + , + street + }} + /> + ); + break; + case "FOLLOW_SIGNS": + stepContent = ( + + ); + break; + default: + stepContent = ( + , + street + }} + /> + ); } - return ( // Return an HTML element which is passed a className (and style props) // for styled-components support.