DT-3417

app/component/CallAgencyLeg.js

@@ -52,6 +52,7 @@ class CallAgencyLeg extends React.Component {
               mode="call"
               className="leg-call"
               realtime={false}
+              gtfsId={this.props.leg.route.gtfsId}
               vertical
               fadeLong
             />

app/component/FavouriteLocation.js

@@ -49,6 +49,7 @@ const FavouriteLocation = ({
           mode={firstTransitLeg.mode}
           realtime={firstTransitLeg.realTime}
           text={firstTransitLeg.route.shortName}
+          gtfsId={firstTransitLeg.route.gtfsId}
         />
          
         {departureTimeComponent}
@@ -116,6 +117,10 @@ FavouriteLocation.propTypes = {
   firstTransitLeg: PropTypes.object,
 };
 
+FavouriteLocation.contextTypes = {
+  config: PropTypes.object.isRequired,
+};
+
 FavouriteLocation.displayName = 'FavouriteLocation';
 
 export default FavouriteLocation;

app/component/NextDeparturesList.js

@@ -104,6 +104,7 @@ function NextDeparturesList(props, context) {
               alertSeverityLevel={departure.alertSeverityLevel}
               mode={stoptime.pattern.route.mode}
               text={stoptime.pattern.route.shortName}
+              gtfsId={stoptime.pattern.route.gtfsId}
             />
           </td>
           <td className="td-destination">

app/component/RouteHeader.js

@@ -35,7 +35,7 @@ export default function RouteHeader(props) {
   return (
     <div className={cx('route-header', props.className)}>
       <h1 className={mode}>
-        <RouteNumber mode={mode} text={routeLine} />
+        <RouteNumber mode={mode} text={routeLine} gtfsId={props.route.gtfsId} />
         {trip}
       </h1>
     </div>

app/component/RouteNumber.js

@@ -8,23 +8,27 @@ import ComponentUsageExample from './ComponentUsageExample';
 import { realtimeDeparture as exampleRealtimeDeparture } from './ExampleData';
 import { isMobile } from '../util/browser';
 
-const LONG_ROUTE_NUMBER_LENGTH = 6;
+const LONG_ROUTE_NUMBER_LENGTH = 5;
 
 function RouteNumber(props, context) {
   let mode = props.mode.toLowerCase();
+  const routeName =
+    mode === 'bus' && props.gtfsId && context.config.getRoutePrefix
+      ? context.config.getRoutePrefix(props.gtfsId).concat(props.text)
+      : props.text;
   const { alertSeverityLevel, color } = props;
 
   if (mode === 'bicycle' || mode === 'car') {
     mode += '-withoutBox';
   }
 
-  const longText = props.text && props.text.length >= LONG_ROUTE_NUMBER_LENGTH;
+  const longText = routeName && routeName.length >= LONG_ROUTE_NUMBER_LENGTH;
   // Checks if route only has letters without identifying numbers and
   // length doesn't fit in the tab view
   const hasNoShortName =
-    props.text &&
-    new RegExp(/^([^0-9]*)$/).test(props.text) &&
-    props.text.length > 3;
+    routeName &&
+    new RegExp(/^([^0-9]*)$/).test(routeName) &&
+    routeName.length > 3;
 
   const getIcon = (icon, isCallAgency, hasDisruption, badgeFill, badgeText) => {
     if (isCallAgency) {
@@ -106,7 +110,7 @@ function RouteNumber(props, context) {
           </div>
         )}
       </span>
-      {props.text &&
+      {routeName &&
         (props.vertical === false ? (
           <span
             style={{
@@ -119,7 +123,7 @@ function RouteNumber(props, context) {
               hasNoShortName: hasNoShortName && longText && props.isRouteView,
             })}
           >
-            {props.text}
+            {routeName}
           </span>
         ) : (
           <div className="vehicle-number-container-v">
@@ -130,7 +134,7 @@ function RouteNumber(props, context) {
                 long: longText,
               })}
             >
-              {props.text}
+              {routeName}
             </span>
           </div>
         ))}
@@ -210,6 +214,7 @@ RouteNumber.propTypes = {
   badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   icon: PropTypes.string,
   isRouteView: PropTypes.bool,
+  gtfsId: PropTypes.string,
 };
 
 RouteNumber.defaultProps = {
@@ -225,10 +230,12 @@ RouteNumber.defaultProps = {
   isCallAgency: false,
   isRouteView: false,
   icon: undefined,
+  gtfsId: undefined,
 };
 
 RouteNumber.contextTypes = {
   intl: intlShape.isRequired,
+  config: PropTypes.object,
 };
 
 RouteNumber.displayName = 'RouteNumber';

app/component/RouteNumberContainer.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import PropTypes from 'prop-types';
 import React from 'react';
 import get from 'lodash/get';
@@ -16,7 +17,7 @@ const getText = (route, config) => {
 };
 
 const RouteNumberContainer = (
-  { alertSeverityLevel, className, route, isCallAgency, ...props },
+  { alertSeverityLevel, className, route, isCallAgency, trip, ...props },
   { config },
 ) =>
   route && (
@@ -27,6 +28,13 @@ const RouteNumberContainer = (
       color={route.color ? `#${route.color}` : null}
       mode={route.mode}
       text={getText(route, config)}
+      gtfsId={
+        route.gtfsId
+          ? route.gtfsId
+          : trip && trip.pattern
+            ? trip.pattern.code
+            : ''
+      }
       {...props}
     />
   );
@@ -37,6 +45,7 @@ RouteNumberContainer.propTypes = {
   vertical: PropTypes.bool,
   className: PropTypes.string,
   fadeLong: PropTypes.bool,
+  trip: PropTypes.object,
 };
 
 RouteNumberContainer.defaultProps = {

app/component/RoutePage.js

@@ -341,6 +341,7 @@ class RoutePage extends React.Component {
                 color={route.color ? `#${route.color}` : null}
                 mode={route.mode}
                 text={route.shortName}
+                gtfsId={route.gtfsId}
                 isRouteView
               />
             )}

app/component/SummaryRow.js

@@ -76,6 +76,7 @@ export const RouteLeg = ({ leg, large, intl }) => {
       <RouteNumberContainer
         alertSeverityLevel={getActiveLegAlertSeverityLevel(leg)}
         route={leg.route}
+        trip={leg.trip}
         className={cx('line', leg.mode.toLowerCase())}
         vertical
         withBar

app/component/TransitLeg.js

@@ -270,6 +270,7 @@ class TransitLeg extends React.Component {
                 mode={mode.toLowerCase()}
                 color={leg.route ? `#${leg.route.color}` : 'currentColor'}
                 text={leg.route && leg.route.shortName}
+                gtfsId={leg.route.gtfsId}
                 realtime={leg.realTime}
                 vertical
                 fadeLong

app/component/ViaLeg.js

@@ -91,7 +91,11 @@ function ViaLeg(props, context) {
         <div className="itinerary-time-column-time via-departure-time">
           {moment(props.leg.startTime).format('HH:mm')}
         </div>
-        <RouteNumber mode={props.leg.mode.toLowerCase()} vertical />
+        <RouteNumber
+          mode={props.leg.mode.toLowerCase()}
+          vertical
+          gtfsId={props.leg.gtfsId}
+        />
       </div>
       <ItineraryCircleLine
         isVia
@@ -175,6 +179,7 @@ ViaLeg.propTypes = {
     startTime: PropTypes.number.isRequired,
     distance: PropTypes.number.isRequired,
     mode: PropTypes.string.isRequired,
+    gtfsId: PropTypes.string,
     from: PropTypes.shape({
       name: PropTypes.string.isRequired,
       stop: PropTypes.shape({

app/component/departure.scss

@@ -18,7 +18,7 @@
   white-space: nowrap;
 
   .vehicle-number {
-    width: 2.5em;
+    width: 3em;
   }
 
   & .route-number {

app/component/front-page.scss

@@ -354,7 +354,7 @@ div.route-tabs .tabs-navigation.bp-large {
 
     .vehicle-number {
       vertical-align: text-bottom;
-      padding-left: 0.4em;
+      padding-left: 0.2em;
     }
   }
 

app/configurations/config.default.js

@@ -775,4 +775,11 @@ export default {
 
   timetables: {},
   showLogin: false,
+
+  /* Function that can be used to configure route names before displaying them
+     Takes routes gtfsId as input */
+  // eslint-disable-next-line no-unused-vars
+  getRoutePrefix: function routePrefix(routeId) {
+    return '';
+  },
 };

app/configurations/config.hsl.js

@@ -535,4 +535,13 @@ export default {
     },
   },
   showLogin: true,
+
+  /* Function that can be used to configure route names before displaying them
+     Takes routes gtfsId as input */
+  getRoutePrefix: function routePrefix(routeId) {
+    if (!routeId || !routeId.includes(':')) {
+      return '';
+    }
+    return routeId.split(':')[1].substring(0, 1) === '7' ? 'U' : '';
+  },
 };