Feature branch: Prefare Alerts 2.0 (#1971)

* feat: Pre-Fare alerts 2.0 CandidateGenerator (#1765)

* [feature] Pre-fare alert 2.0 frontend left screen (#1787)

* feat: Pre-Fare alerts 2.0 serializer (#1785)

* feat: Disruption Diagram - Frontend (#1825)

* [tweak] Disruption diagram maths (#1830)

* In LocationContext, tag stop sequences by their routes (#1832)

* tweak: PreFare simulations (#1837)

* [feature] Prefare alerts 2.0 audio (#1824)

* feat: Disruption Diagram - Backend (#1828)

* feat(WIP): Disruption diagram backend. Working for Blue Line and other basic scenarios only atm.

* fix: Update location context stop sequences field in TrainCrowdingTest (#1895)

* test: D. diagram unit test for RL trunk statio closure with home stop at Ashmont (#1894)

* Added padding-top to layout when there is no banner. (#1902)

* Cm/govt ctr gl affected pill fix (#1898)

* Cm/adjust diagram size positioning (#1896)

* Changed label to display on a single line. (#1899)

* Tweaked resizer logic so it maxHeight matches the card height on page. (#1905)

* Removed bolding of 'to' from arrow labels. (#1908)

* Fixed icon display when current stop is affected. (#1903)

* feat: Consistent description of disrupted stop ranges throughout pre-fare alerts (#1912)

* Adjusted Ashmont/Braintree destination to proper formatting (#1917)

* Refactor disruption diagram SVG (#1914)

* Log alert ID and screen's home stop when disruption diagram logic fails (#1920)

* polish: Recalculate dimensions in hook (#1921)

* Added audio column to GL & PreFare in admin table (#1916)

* Draw D. diagrams for multi-line alerts when home stop narrows it to 1 line (#1922)

* fix: PreFare Polish - Inside shuttle (#1941)

* fix: Pre-fare polish - Boundary alerts banner (#1945)

* fix: Pre-fare polish -- Text only resizes for bypassed stations (#1946)

* fix: Pre-fare polish -- Station closed takeover text wrapping (#1947)

* Downstream shuttle endpoint should be a circle (#1948)

* Label splitting logic was buggy (#1949)

* Prefare format in config is "Ashmont & Braintree" not "Ashmont/Braintree" (#1954)

* Sub-header for takeover alert is now regular weight (#1955)

* fix: Prefare alerts polish -- Fix GL headsign in various cases (#1957)

* fix: Prefare polish -- Use FreeText to prevent station text wrapping in subheaders (#1956)

* fix: Prefare polish -- Alerts that break assumptions use the fallback case (#1958)

* fix: Prefare polish -- Reorder audio with alerts before subway status (#1962)

* fix: Prefare polish -- New abbreviation rule (#1961)

* fix: Prefare Alerts polish -- RL headsigns for branch-only alerts (#1967)

* fix: Prefare alerts polish -- Screenplay sim sizing / page layout (#1966)

* fix: Prefare polish -- "via" diagram labels need abbreviating (#1968)

---------

Co-authored-by: Christian Maddox <[email protected]>
Co-authored-by: Jon Zimbel <[email protected]>

assets/css/pre_fare_v2.scss

@@ -40,6 +40,8 @@
 @import "v2/pre_fare/flex/paging_indicator";
 @import "v2/pre_fare/full_line_map";
 @import "v2/pre_fare/reconstructed_alert";
+@import "v2/pre_fare/alert-banner";
+@import "v2/pre_fare/prefare_single_screen_alert";
 @import "v2/pre_fare/free_text";
 @import "v2/pre_fare/shuttle_bus_info";
 
@@ -62,6 +64,8 @@
 
 @import "v2/blue_bikes";
 
+@import "v2/pre_fare/disruption_diagram/disruption_diagram";
+
 body {
   margin: 0px;
 }

assets/css/v2/pre_fare/alert-banner.scss

@@ -0,0 +1,56 @@
+.alert-banner {
+  font-family: Inter;
+  width: 100%;
+  font-size: 60px;
+  line-height: 72px;
+  font-weight: 600;
+  filter: drop-shadow(0px 30px 20px rgba(0, 0, 0, 0.25));
+
+  display: flex;
+  flex-wrap: wrap;
+
+  /* Background colors */
+  &--blue {
+    background-color: #b3c5e4;
+  }
+
+  &--red {
+    background-color: #f4bfbb;
+  }
+
+  &--orange {
+    background-color: #fadcb3;
+  }
+
+  &--yellow {
+    background-color: #fff7bf;
+  }
+
+  &--green {
+    background-color: #b3dac5;
+  }
+}
+
+.alert-banner__attention-text {
+  font-weight: 700;
+}
+
+.alert-banner__route-pill--short {
+  margin: 0 20px;
+  height: 96px;
+}
+
+.alert-banner__route-pill--long {
+  margin: 16.2px 0 0.8px 0;
+}
+
+.alert-banner--large--two-routes {
+  padding: 31px 65px 42px 65px;
+}
+.alert-banner--large--one-route {
+  padding: 86px 74px 102px 74px;
+}
+.alert-banner--small {
+  padding: 52px 88px;
+  align-items: center;
+}

assets/css/v2/pre_fare/disruption_diagram/disruption_diagram.scss

@@ -0,0 +1,124 @@
+.end-slot__arrow {
+  &--red {
+    fill: $line-color-red;
+  }
+
+  &--blue {
+    fill: $line-color-blue;
+  }
+
+  &--orange {
+    fill: $line-color-orange;
+  }
+
+  &--green {
+    fill: $line-color-green;
+  }
+}
+
+.end-slot__icon {
+  &--red {
+    stroke: $line-color-red;
+  }
+
+  &--blue {
+    stroke: $line-color-blue;
+  }
+
+  &--orange {
+    stroke: $line-color-orange;
+  }
+
+  &--green {
+    stroke: $line-color-green;
+  }
+
+  &--affected {
+    stroke: #171f26;
+  }
+}
+
+.shuttle-stop {
+  stroke: #171f26;
+}
+
+.middle-slot__background {
+  &--red {
+    fill: $line-color-red;
+  }
+
+  &--blue {
+    fill: $line-color-blue;
+  }
+
+  &--orange {
+    fill: $line-color-orange;
+  }
+
+  &--green {
+    fill: $line-color-green;
+  }
+}
+
+.middle-slot__icon {
+  &--red {
+    stroke: $line-color-red;
+  }
+
+  &--blue {
+    stroke: $line-color-blue;
+  }
+
+  &--orange {
+    stroke: $line-color-orange;
+  }
+
+  &--green {
+    stroke: $line-color-green;
+  }
+}
+
+.label--endpoint {
+  font-size: 35px;
+  font-weight: 700;
+
+  .label {
+    font-weight: 400;
+  }
+}
+
+.label-large {
+  font-family: Inter;
+  font-size: 30px;
+  font-weight: 500;
+  line-height: 35px;
+
+  &--current-stop {
+    font-size: 35px;
+    font-weight: 700;
+  }
+
+  &--small {
+    font-size: 25px;
+  }
+}
+
+.label-small {
+  font-family: Inter;
+  font-size: 25px;
+  font-weight: 500;
+  line-height: 35px;
+
+  &--current-stop {
+    font-size: 30px;
+    font-weight: 700;
+  }
+}
+
+.station-closure-icon {
+  fill: #171f26;
+
+  &--current-stop {
+    fill: #ee2e24;
+  }
+}

assets/css/v2/pre_fare/free_text.scss

@@ -54,3 +54,7 @@
     line-height: unset;
   }
 }
+
+.free-text__string--nowrap {
+  white-space: nowrap;
+}