Pass operator logos to map popup

packages/map-popup/src/MapPopup.story.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
+import styled from "styled-components";
+import { Station, Stop } from "@opentripplanner/types";
 import MapPopupContents from "./index";
 
 export default {
@@ -8,6 +10,7 @@ export default {
 
 const STOP = {
   flex: false,
+  gtfsId: "9526",
   id: "9526",
   lat: 45.523009,
   lon: -122.672529,
@@ -64,13 +67,33 @@ const FLOATING_CAR = {
   y: 52.52
 };
 
+const getEntityPrefixExample = (entity: Stop | Station) => {
+  const DemoIcon = styled.span`
+    background-color: blue;
+    border-radius: 50px;
+    color: white;
+    margin-right: 0.5ch;
+    padding: 2px;
+  `;
+
+  return <DemoIcon>{entity.name?.charAt(0)}</DemoIcon>;
+};
+
 export const StopEntity = (): JSX.Element => (
   <MapPopupContents
     entity={STOP}
     setLocation={action("setLocation")}
     setViewedStop={action("setViewedStop")}
   />
 );
+export const StopEntitywithEntityPrefix = (): JSX.Element => (
+  <MapPopupContents
+    entity={STOP}
+    getEntityPrefix={getEntityPrefixExample}
+    setLocation={action("setLocation")}
+    setViewedStop={action("setViewedStop")}
+  />
+);
 
 export const StopEntityNoHandlers = (): JSX.Element => (
   <MapPopupContents entity={STOP} />

packages/map-popup/src/__snapshots__/MapPopup.story.tsx.snap

@@ -255,3 +255,71 @@ exports[`Map Popup StopEntityNoHandlers smoke-test 1`] = `
   </div>
 </div>
 `;
+
+exports[`Map Popup StopEntitywithEntityPrefix smoke-test 1`] = `
+<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
+  <div id="focus-9526-popup-focus-trap"
+       role="presentation"
+  >
+    <header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
+      <span class="MapPopupstory__DemoIcon-sc-vlk9f0-0 eLlbsf">
+        W
+      </span>
+      W Burnside &amp; SW 2nd
+    </header>
+    <p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
+      <strong>
+        Stop ID: 9526
+      </strong>
+      <button class="styled__ViewStopButton-sc-12v7ov3-0 jdXQjY">
+        Stop Viewer
+      </button>
+    </p>
+    <p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
+      <strong>
+        Plan a trip:
+      </strong>
+      <span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
+        <span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
+          <svg viewbox="0 0 512 512"
+               height="0.9em"
+               width="0.9em"
+               aria-hidden="true"
+               focusable="false"
+               fill="currentColor"
+               xmlns="http://www.w3.org/2000/svg"
+               class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
+          >
+            <path fill="currentColor"
+                  d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
+            >
+            </path>
+          </svg>
+          <button class="styled__Button-sc-vb4790-2 hNNoVB">
+            From here
+          </button>
+        </span>
+        <span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
+          <svg viewbox="0 0 384 512"
+               height="0.9em"
+               width="0.9em"
+               aria-hidden="true"
+               focusable="false"
+               fill="currentColor"
+               xmlns="http://www.w3.org/2000/svg"
+               class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
+          >
+            <path fill="currentColor"
+                  d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
+            >
+            </path>
+          </svg>
+          <button class="styled__Button-sc-vb4790-2 hNNoVB">
+            To here
+          </button>
+        </span>
+      </span>
+    </p>
+  </div>
+</div>
+`;

packages/map-popup/src/index.tsx

@@ -90,6 +90,7 @@ type Props = {
   configCompanies?: ConfiguredCompany[];
   entity: Entity
   getEntityName?: (entity: Entity, configCompanies: Company[],) => string;
+  getEntityPrefix?: (entity: Entity) => JSX.Element
   setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;
   setViewedStop?: StopEventHandler;
 };
@@ -101,7 +102,8 @@ function entityIsStation(entity: Entity): entity is Station {
 /**
  * Renders a map popup for a stop, scooter, or shared bike
  */
-export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {
+export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEntityName, getEntityPrefix, setLocation, setViewedStop }: Props): JSX.Element {
+
   const intl = useIntl()
   if (!entity) return <></>
 
@@ -121,6 +123,7 @@ export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEn
     <Styled.MapOverlayPopup>
       <FocusTrapWrapper closePopup={closePopup} id={id}>
       <Styled.PopupTitle>
+        {getEntityPrefix && getEntityPrefix(entity)}
         <FormattedMessage
           defaultMessage={defaultMessages["otpUi.MapPopup.popupTitle"]}
           description="Text for title of the popup, contains an optional company name"

packages/otp2-tile-overlay/src/index.tsx

@@ -2,6 +2,7 @@ import EntityPopup from "@opentripplanner/map-popup"
 import {
   ConfiguredCompany,
   MapLocationActionArg,
+  Station,
   Stop,
   StopEventHandler,
 } from "@opentripplanner/types"
@@ -19,6 +20,7 @@ const AREA_TYPES = ["areaStops"]
 const OTP2TileLayerWithPopup = ({
   color,
   configCompanies,
+  getEntityPrefix,
   id,
   network,
   onMapClick,
@@ -34,6 +36,7 @@ const OTP2TileLayerWithPopup = ({
    * default scooter/bike popup.
    */
   configCompanies?: ConfiguredCompany[]
+  getEntityPrefix?: (entity: Stop | Station) => JSX.Element
   id: string
   name?: string
   /**
@@ -195,6 +198,7 @@ const OTP2TileLayerWithPopup = ({
             closePopup={() => setClickedEntity(null)}
             configCompanies={configCompanies}
             entity={{ ...clickedEntity, id: clickedEntity?.id || clickedEntity?.gtfsId }}
+            getEntityPrefix={getEntityPrefix}
             setLocation={setLocation ? (location) => { setClickedEntity(null); setLocation(location) } : null}
             setViewedStop={setViewedStop ? (stop) => { setClickedEntity(null);setViewedStop(stop) } : null}
           />
@@ -224,7 +228,8 @@ const generateOTP2TileLayers = (
   setLocation?: (location: MapLocationActionArg) => void,
   setViewedStop?: (stop: Stop) => void,
   stopsWhitelist?: string[],
-  configCompanies?: ConfiguredCompany[]
+  configCompanies?: ConfiguredCompany[],
+  getEntityPrefix?: (entity: Stop | Station) => JSX.Element
 ): JSX.Element[] => {
   return [
     <Source
@@ -244,6 +249,7 @@ const generateOTP2TileLayers = (
         <OTP2TileLayerWithPopup
           color={color}
           configCompanies={configCompanies}
+          getEntityPrefix={getEntityPrefix}
           id={id}
           key={id}
           name={name || id}