fix(alerts): properly render service alert body if exists

fix #107

Author: landonreed

lib/components/narrative/line-itin/itinerary.css

@@ -354,9 +354,17 @@
   font-size: 18px;
 }
 
+.otp .line-itin .leg-body .transit-alerts .transit-alert .alert-header {
+  font-size: 14px;
+  margin-left: 30px;
+  font-weight: 600;
+}
+
 .otp .line-itin .leg-body .transit-alerts .transit-alert .alert-body {
   font-size: 12px;
   margin-left: 30px;
+  /* white space pre-wrap is required to render line breaks correctly. */
+  white-space: pre-wrap;
 }
 
 .otp .line-itin .leg-body .transit-alerts .transit-alert .effective-date {

lib/components/narrative/line-itin/transit-leg-body.js

@@ -216,6 +216,10 @@ class AlertsBody extends Component {
             return (
               <div key={i} className='transit-alert'>
                 <div className='alert-icon'><i className='fa fa-exclamation-triangle' /></div>
+                {alert.alertHeaderText
+                  ? <div className='alert-header'>{alert.alertHeaderText}</div>
+                  : null
+                }
                 <div className='alert-body'>{alert.alertDescriptionText}</div>
                 <div className='effective-date'>{effectiveDateString}</div>
               </div>