Refactor transit leg alerts to auto-show and link to alert

Refs opentripplanner#18
ibi-group · Jan 17, 2020 · e5de842 · e5de842
1 parent 1a1387b
commit e5de842
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git a/packages/itinerary-body/src/TransitLegBody/index.js b/packages/itinerary-body/src/TransitLegBody/index.js
@@ -69,12 +69,8 @@ class TransitLegBody extends Component {
         ? transitOperator.logo
         : agencyBrandingUrl;
 
-    // get the iconKey for the leg's icon
-    // let iconKey = mode;
-    // if (typeof customIcons.customIconForLeg === "function") {
-    //   const customIcon = customIcons.customIconForLeg(leg);
-    //   if (customIcon) iconKey = customIcon;
-    // }
+    const expandAlerts =
+      alertsExpanded || (leg.alerts && leg.alerts.length < 3);
 
     return (
       <Styled.LegBody>
@@ -118,7 +114,7 @@ class TransitLegBody extends Component {
         )}
 
         {/* Alerts toggle */}
-        {alerts && alerts.length > 0 && (
+        {alerts && alerts.length > 2 && (
           <Styled.TransitAlertToggle onClick={this.onToggleAlertsClick}>
             <ExclamationTriangle size={15} /> {alerts.length}{" "}
             {pluralize("alert", alerts)}{" "}
@@ -131,7 +127,7 @@ class TransitLegBody extends Component {
           enter={{ animation: "slideDown" }}
           leave={{ animation: "slideUp" }}
         >
-          {alertsExpanded && (
+          {expandAlerts && (
             <AlertsBody
               alerts={leg.alerts}
               longDateFormat={longDateFormat}
@@ -240,7 +236,7 @@ function AlertsBody({ alerts, longDateFormat, timeFormat }) {
           );
           const effectiveDateString = `Effective as of ${dateTimeString}`;
           return (
-            <Styled.TransitAlert key={i}>
+            <Styled.TransitAlert key={i} href={alert.alertUrl}>
               <Styled.TransitAlertIconContainer>
                 <ExclamationTriangle size={18} />
               </Styled.TransitAlertIconContainer>

diff --git a/packages/itinerary-body/src/styled.js b/packages/itinerary-body/src/styled.js
@@ -430,12 +430,14 @@ export const StopRow = styled.div`
   position: relative;
 `;
 
-export const TransitAlert = styled.div`
-  margin-top: 5px;
+export const TransitAlert = styled.a`
   background-color: #eee;
-  padding: 8px;
-  color: #000;
   border-radius: 4px;
+  color: #000;
+  display: block;
+  margin-top: 5px;
+  padding: 8px;
+  text-decoration: none;
 `;
 
 export const TransitAlertBody = styled.div`