Merge branch 'master' into alpha

opentripplanner · Oct 18, 2023 · 4763576 · 4763576
2 parents 68acec3 + 1d77e3a
commit 4763576
Show file tree

Hide file tree

Showing 19 changed files with 47,458 additions and 38,915 deletions.
diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
diff --git a/packages/core-utils/src/itinerary.ts b/packages/core-utils/src/itinerary.ts
@@ -294,7 +294,7 @@ export function legElevationAtDistance(
     const elevDistanceSpan = points[i][0] - start[0];
     if (distance >= traversed && distance <= traversed + elevDistanceSpan) {
       // Distance falls within this point and the previous one;
-      // compute & return iterpolated elevation value
+      // compute & return interpolated elevation value
       if (start[1] === null) {
         console.warn(
           "Elevation value does not exist for distance.",
@@ -370,10 +370,10 @@ export function getElevationProfile(
  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
  */
 export function getTextWidth(text: string, font = "22px Arial"): number {
-  // Create custom type for function including re-used canvas object
+  // Create custom type for function including reused canvas object
   type GetTextWidth = typeof getTextWidth & { canvas: HTMLCanvasElement };
 
-  // re-use canvas object for better performance
+  // reuse canvas object for better performance
   const canvas =
     (getTextWidth as GetTextWidth).canvas ||
     ((getTextWidth as GetTextWidth).canvas = document.createElement("canvas"));
@@ -674,7 +674,7 @@ export const convertGraphQLResponseToLegacy = (leg: any): any => ({
   },
   route: leg.route?.shortName,
   routeColor: leg.route?.color,
-  routeId: leg.route?.id,
+  routeId: leg.route?.gtfsId,
   routeLongName: leg.route?.longName,
   routeShortName: leg.route?.shortName,
   routeTextColor: leg.route?.textColor,

diff --git a/packages/core-utils/src/planQuery.graphql b/packages/core-utils/src/planQuery.graphql
@@ -57,7 +57,7 @@ query Plan(
             effectiveStartDate
             id
           }
-          id
+          gtfsId: id
           name
           timezone
           url
@@ -164,6 +164,7 @@ query Plan(
             id
           }
           color
+          gtfsId
           id
           longName
           shortName

diff --git a/packages/core-utils/src/query.js b/packages/core-utils/src/query.js
@@ -174,7 +174,7 @@ export function expandOtpFlexMode(mode) {
   const modes = reduceOtpFlexModes(mode.split(","));
   return modes
     .map(m => {
-      // If both the expanded and shrunk modes are included, remove the exapnded one
+      // If both the expanded and shrunk modes are included, remove the expanded one
       if (m === "FLEX_EGRESS" || m === "FLEX_ACCESS" || m === "FLEX_DIRECT") {
         if (mode.includes("FLEX")) return "";
       }

diff --git a/packages/itinerary-body/package.json b/packages/itinerary-body/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentripplanner/itinerary-body",
-  "version": "5.1.0-alpha.4",
+  "version": "5.1.0",
   "description": "A component for displaying an itinerary body of a trip planning result",
   "main": "lib/index.js",
   "module": "esm/index.js",

diff --git a/packages/itinerary-body/src/AccessLegBody/index.tsx b/packages/itinerary-body/src/AccessLegBody/index.tsx
@@ -17,7 +17,11 @@ import TNCLeg from "./tnc-leg";
 import { defaultMessages } from "../util";
 
 interface Props {
-  config: Config;
+  config: Config & {
+    itinerary?: {
+      hideDrivingDirections?: boolean;
+    };
+  };
   /**
    * Should be either null or a legType. Indicates that a particular leg diagram
    * has been selected and is active.
@@ -77,6 +81,9 @@ class AccessLegBody extends Component<Props, State> {
     } = this.props;
     const { expanded } = this.state;
 
+    const hideDrivingDirections =
+      config?.itinerary?.hideDrivingDirections && leg.mode === "CAR";
+
     if (leg.mode === "CAR" && leg.rideHailingEstimate) {
       return (
         <TNCLeg
@@ -90,6 +97,13 @@ class AccessLegBody extends Component<Props, State> {
       );
     }
 
+    const mapillary = (
+      <MapillaryButton
+        clickCallback={mapillaryCallback}
+        coords={leg.from}
+        mapillaryKey={mapillaryKey}
+      />
+    );
     return (
       <>
         {/* Place subheading: rented vehicle (e.g., scooter, bike, car)
@@ -109,40 +123,48 @@ class AccessLegBody extends Component<Props, State> {
             showLegIcon={showLegIcon}
           />
           <S.LegDetails>
-            <S.StepsHeaderAndMapLink>
-              <S.StepsHeader
-                aria-expanded={expanded}
-                onClick={this.onStepsHeaderClick}
-              >
-                <Duration seconds={leg.duration} />
-                {leg.steps && <S.CaretToggle expanded={expanded} />}
-                <S.InvisibleAdditionalDetails>
-                  <FormattedMessage
-                    defaultMessage={
-                      defaultMessages["otpUi.TransitLegBody.expandDetails"]
-                    }
-                    description="Screen reader text added to expand steps"
-                    id="otpUi.TransitLegBody.expandDetails"
+            {hideDrivingDirections ? (
+              <S.StepsHeaderAndMapLink>
+                <S.StepsHeaderSpan>
+                  <Duration seconds={leg.duration} />
+                </S.StepsHeaderSpan>
+                {mapillary}
+              </S.StepsHeaderAndMapLink>
+            ) : (
+              <>
+                <S.StepsHeaderAndMapLink>
+                  <S.StepsHeaderButton
+                    aria-expanded={expanded}
+                    onClick={this.onStepsHeaderClick}
+                  >
+                    <Duration seconds={leg.duration} />
+                    {leg.steps && <S.CaretToggle expanded={expanded} />}
+
+                    <S.InvisibleAdditionalDetails>
+                      <FormattedMessage
+                        defaultMessage={
+                          defaultMessages["otpUi.TransitLegBody.expandDetails"]
+                        }
+                        description="Screen reader text added to expand steps"
+                        id="otpUi.TransitLegBody.expandDetails"
+                      />
+                    </S.InvisibleAdditionalDetails>
+                  </S.StepsHeaderButton>
+                  {mapillary}
+                </S.StepsHeaderAndMapLink>
+                <AnimateHeight
+                  duration={500}
+                  height={expanded ? "auto" : 0}
+                  style={{ gridColumn: "1 / span 2" }}
+                >
+                  <AccessLegSteps
+                    mapillaryCallback={mapillaryCallback}
+                    mapillaryKey={mapillaryKey}
+                    steps={leg.steps}
                   />
-                </S.InvisibleAdditionalDetails>
-              </S.StepsHeader>
-              <MapillaryButton
-                clickCallback={mapillaryCallback}
-                coords={leg.from}
-                mapillaryKey={mapillaryKey}
-              />
-            </S.StepsHeaderAndMapLink>
-            <AnimateHeight
-              duration={500}
-              height={expanded ? "auto" : 0}
-              style={{ gridColumn: "1 / span 2" }}
-            >
-              <AccessLegSteps
-                mapillaryCallback={mapillaryCallback}
-                mapillaryKey={mapillaryKey}
-                steps={leg.steps}
-              />
-            </AnimateHeight>
+                </AnimateHeight>
+              </>
+            )}
             <LegDiagramPreview
               diagramVisible={diagramVisible}
               leg={leg}

diff --git a/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx b/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx
@@ -56,20 +56,23 @@ if (!isRunningJest()) {
 interface StoryWrapperProps {
   alwaysCollapseAlerts?: boolean;
   defaultFareSelector?: FareProductSelector;
+  hideDrivingDirections?: boolean;
   itinerary: Itinerary;
   TimeColumnContent?: FunctionComponent<TimeColumnContentProps>;
 }
 
 function OtpRRItineraryBodyWrapper({
   alwaysCollapseAlerts,
   defaultFareSelector,
+  hideDrivingDirections = false,
   itinerary,
   TimeColumnContent
 }: StoryWrapperProps): ReactElement {
   return (
     <ItineraryBodyDefaultsWrapper
       alwaysCollapseAlerts={alwaysCollapseAlerts}
       defaultFareSelector={defaultFareSelector}
+      hideDrivingDirections={hideDrivingDirections}
       itinerary={itinerary}
       LegIcon={LegIconWithA11y}
       LineColumnContent={OtpRRLineColumnContent}
@@ -227,3 +230,10 @@ export const TwoAlertsWithoutCollapsingProp = (): ReactElement => (
 export const ZeroAlertsWithoutCollapsingProp = (): ReactElement => (
   <OtpRRItineraryBodyWrapper itinerary={walkInterlinedTransitItinerary} />
 );
+
+export const HideDrivingDirections = (): ReactElement => (
+  <OtpRRItineraryBodyWrapper
+    hideDrivingDirections
+    itinerary={parkAndRideItinerary}
+  />
+);
diff --git a/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx b/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx
@@ -219,3 +219,10 @@ export const TwoAlertWithoutCollapsingProp = (): ReactElement => (
 export const ZeroAlertsWithoutCollapsingProp = (): ReactElement => (
   <ItineraryBodyDefaultsWrapper itinerary={walkInterlinedTransitItinerary} />
 );
+
+export const HideDrivingDirections = (): ReactElement => (
+  <ItineraryBodyDefaultsWrapper
+    hideDrivingDirections
+    itinerary={parkAndRideItinerary}
+  />
+);
diff --git a/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx b/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx
@@ -18,6 +18,7 @@ import { ItineraryBodyProps } from "../types";
 const config = require("../__mocks__/config.json");
 
 type Props = ItineraryBodyProps & {
+  hideDrivingDirections?: boolean;
   styledItinerary?: string;
 };
 
@@ -44,6 +45,7 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
     const {
       alwaysCollapseAlerts,
       defaultFareSelector,
+      hideDrivingDirections = false,
       itinerary,
       LegIcon = TriMetLegIcon,
       LineColumnContent,
@@ -74,6 +76,11 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
       default:
         ItineraryBodyComponent = ItineraryBody;
     }
+
+    config.itinerary = {
+      hideDrivingDirections
+    };
+
     return (
       <ItineraryBodyComponent
         AlertBodyIcon={AlertBodyIcon}

diff --git a/packages/itinerary-body/src/styled.tsx b/packages/itinerary-body/src/styled.tsx
@@ -2,7 +2,7 @@
 // @ts-ignore FIXME: Create TypeScript types for the icons package.
 import { Map } from "@opentripplanner/icons";
 import React, { ReactElement } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { CaretDown } from "@styled-icons/fa-solid/CaretDown";
 import { CaretUp } from "@styled-icons/fa-solid/CaretUp";
 import { ExclamationTriangle } from "@styled-icons/fa-solid/ExclamationTriangle";
@@ -589,13 +589,22 @@ export const StepsHeaderAndMapLink = styled.span`
   }
 `;
 
-export const StepsHeader = styled(TransparentButton)`
+const stepsHeaderStyling = css`
   color: #676767;
   font-size: 13px;
   font-style: normal;
   padding: 0;
 `;
 
+export const StepsHeaderButton = styled(TransparentButton)`
+  ${stepsHeaderStyling}
+`;
+
+export const StepsHeaderSpan = styled.span`
+  ${stepsHeaderStyling}
+  margin-right: 0.4em;
+`;
+
 export const StepIconContainer = styled.div`
   fill: #676767;
   float: left;

diff --git a/packages/location-field/i18n/en-US.yml b/packages/location-field/i18n/en-US.yml
@@ -8,7 +8,7 @@ otpUi:
     geocoderUnreachable: Unable to obtain suggestions
     homeLocation: Home
     howToAccessResults: >-
-      Use the down arrow key browse the results list. To select a result, use
+      Use the down arrow key to browse the results list. To select a result, use
       the Enter key.
     myPlaces: My Places
     nearby: Nearby Stops

diff --git a/packages/location-field/package.json b/packages/location-field/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentripplanner/location-field",
-  "version": "2.0.11-alpha.1",
+  "version": "2.0.11",
   "description": "A component for display and finding a location",
   "main": "lib/index.js",
   "module": "esm/index.js",

diff --git a/packages/location-field/src/options.tsx b/packages/location-field/src/options.tsx
@@ -52,17 +52,17 @@ export const MenuItem = ({
   <S.MenuItemLi
     // Hide disabled choices from screen readers (a relevant status is already provided).
     aria-hidden={disabled || undefined}
-    role={disabled ? undefined : "none"}
+    /* A known issue prevents combobox results to be read out on Voiceover. This is a hack to ensure 
+    AT hear all options - see https://react-spectrum.adobe.com/blog/building-a-combobox.html#voiceover */
+    aria-live={active ? "assertive" : "off"}
+    active={active}
+    id={id}
+    onClick={disabled ? null : onClick}
+    role="option"
+    aria-selected={active}
+    tabIndex={-1}
   >
-    <S.MenuItemA
-      active={active}
-      id={id}
-      onClick={disabled ? null : onClick}
-      role="option"
-      tabIndex={-1}
-    >
-      {children}
-    </S.MenuItemA>
+    {children}
   </S.MenuItemLi>
 );
 

diff --git a/packages/location-field/src/styled.ts b/packages/location-field/src/styled.ts
@@ -74,18 +74,6 @@ export const InputGroup = styled.div`
   position: relative;
 `;
 
-export const MenuItemA = styled.a<{ active?: boolean }>`
-  background-color: ${props => (props.active ? "#337ab7" : "transparent")};
-  clear: both;
-  color: ${props => (props.active ? "#fff" : "#333")};
-  display: block;
-  font-weight: 400;
-  line-height: 1.42857143;
-  padding: 3px 20px;
-  text-decoration: none;
-  white-space: nowrap;
-`;
-
 export const MenuGroupHeader = styled.h2<{
   bgColor?: string;
   fgColor?: string;
@@ -101,7 +89,7 @@ export const MenuGroupHeader = styled.h2<{
   white-space: nowrap;
 `;
 
-export const MenuItemLi = styled.li`
+export const MenuItemLi = styled.li<{ active?: boolean }>`
   &:hover {
     /* TODO: adjust highlight color based on props.color? */
     background-color: #f5f5f5;
@@ -114,6 +102,16 @@ export const MenuItemLi = styled.li`
     background-color: unset;
     cursor: default;
   }
+
+  background-color: ${props => (props.active ? "#337ab7" : "transparent")};
+  clear: both;
+  color: ${props => (props.active ? "#fff" : "#333")};
+  display: block;
+  font-weight: 400;
+  line-height: 1.42857143;
+  padding: 3px 20px;
+  text-decoration: none;
+  white-space: nowrap;
 `;
 
 export const OptionContainer = styled.span`

diff --git a/packages/trip-form/package.json b/packages/trip-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentripplanner/trip-form",
-  "version": "3.4.0-alpha.2",
+  "version": "3.3.4",
   "description": "Trip Settings Form and Related Components",
   "author": "@binh-dam-ibigroup",
   "homepage": "https://github.com/opentripplanner/otp-ui/#readme",

diff --git a/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx b/packages/trip-form/src/MetroModeSelector/MetroModeSelector.story.tsx
@@ -80,7 +80,7 @@ const modeSettingDefinitionsWithDropdown = [
     default: true,
     key: "tram",
     iconName: "tram",
-    label: "Tram but long",
+    label: "Tram",
     addTransportMode: {
       mode: "TRAM"
     },