feat: Elevator Closures list

assets/css/colors.scss

@@ -9,6 +9,7 @@ $line-color-ferry: #008eaa;
 
 $alert-yellow: #fd0;
 
+$true-grey-45: #737373;
 $true-grey-70: #b2b1af;
 
 $warm-neutral-80: #cccbc8;

assets/css/elevator_v2.scss

@@ -6,6 +6,7 @@
 @import "v2/lcd_common/simulation";
 @import "v2/elevator/header";
 @import "v2/elevator/footer";
+@import "v2/lcd_common/route_pill";
 
 body {
   margin: 0;

assets/css/v2/elevator/elevator_closures.scss

@@ -8,32 +8,126 @@
 
   .in-station-summary {
     display: flex;
+    gap: 82px;
     justify-content: space-between;
-    padding: 24px 58px;
+    padding: 24px 48px;
     font-size: 48px;
     font-weight: 400;
     line-height: 64px;
     color: $cool-black-30;
   }
 
-  hr {
-    width: 100%;
-    height: 24px;
-    margin-top: 0;
-    margin-bottom: 0;
+  hr.thick {
+    min-height: 24px;
+    margin: 0;
     background-color: $cool-black-15;
+    border: none;
+  }
+
+  hr.thin {
+    min-height: 2px;
+    margin: 24px 0 0;
+    background-color: $true-grey-45;
+    border: none;
+    opacity: 0.5;
   }
 
   .outside-alert-list {
+    position: relative;
     height: 100%;
+    font-family: Inter;
     background-color: $warm-neutral-90;
 
-    .header {
+    .header-container {
+      margin: 48px;
+      margin-bottom: 0;
+
+      .header {
+        display: flex;
+        max-height: 432px;
+        font-size: 112px;
+        font-weight: 700;
+        line-height: 112px;
+
+        &__title {
+          word-spacing: 9999px;
+        }
+      }
+    }
+
+    .alert-list-container {
+      overflow: hidden;
+
+      .alert-list {
+        display: flex;
+        flex-flow: column wrap;
+        height: 904px;
+        transform: translateX(calc(-100% * var(--alert-list-offset)));
+
+        .alert-row {
+          margin: 24px 48px 0;
+
+          &__station-name {
+            font-size: 62px;
+            font-weight: 600;
+            line-height: 80px;
+            color: $cool-black-15;
+          }
+
+          &__name-and-pills {
+            display: flex;
+            gap: 24px;
+            align-items: center;
+            margin-bottom: 14px;
+
+            .route-pill {
+              width: 132px;
+              height: 68.13px;
+
+              & > * {
+                height: 100%;
+              }
+            }
+          }
+
+          &__elevator-name {
+            line-height: 64px;
+          }
+
+          &__elevator-name.list-item {
+            display: list-item;
+            margin-bottom: 8px;
+            margin-left: 48px;
+          }
+        }
+      }
+    }
+
+    .paging-info-container {
+      position: absolute;
+      bottom: 0;
       display: flex;
-      padding: 48px;
-      font-size: 150px;
-      font-weight: 700;
-      line-height: 150px;
+      justify-content: space-between;
+      width: 100%;
+      height: 72px;
+
+      & > * {
+        margin: 0 48px 12px;
+      }
+
+      .paging-indicators {
+        display: flex;
+        gap: 27px;
+        align-items: center;
+        margin-right: 66px;
+      }
+    }
+
+    .paging-info-container,
+    .alert-row__elevator-name {
+      font-size: 48px;
+      font-weight: 400;
+      color: $cool-black-30;
     }
   }
 }

assets/src/components/v2/elevator/elevator_closures.tsx

@@ -1,9 +1,65 @@
-import React from "react";
+import React, {
+  ComponentType,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import cx from "classnames";
 import NormalService from "Images/svgr_bundled/normal-service.svg";
 import AccessibilityAlert from "Images/svgr_bundled/accessibility-alert.svg";
+import PagingDotUnselected from "Images/svgr_bundled/paging_dot_unselected.svg";
+import PagingDotSelected from "Images/svgr_bundled/paging_dot_selected.svg";
+import makePersistent, { WrappedComponentProps } from "../persistent_wrapper";
+import RoutePill, { routePillKey, type Pill } from "../departures/route_pill";
+
+type StationWithAlert = {
+  id: string;
+  name: string;
+  routes: Pill[];
+  alerts: ElevatorClosure[];
+};
+
+type ElevatorClosure = {
+  id: string;
+  elevator_name: string;
+  elevator_id: string;
+  description: string;
+  header_text: string;
+};
+
+interface AlertRowProps {
+  station: StationWithAlert;
+}
+
+const AlertRow = ({ station }: AlertRowProps) => {
+  const { name, alerts, routes, id } = station;
+
+  return (
+    <div className="alert-row">
+      <div className="alert-row__name-and-pills">
+        {routes.map((route) => (
+          <RoutePill pill={route} key={`${routePillKey(route)}-${id}`} />
+        ))}
+        <div className="alert-row__station-name">{name}</div>
+      </div>
+      {alerts.map((alert) => (
+        <div
+          key={alert.id}
+          className={cx("alert-row__elevator-name", {
+            "list-item": alerts.length > 1,
+          })}
+        >
+          {alert.elevator_name} ({alert.elevator_id})
+        </div>
+      ))}
+      <hr className="thin" />
+    </div>
+  );
+};
 
 interface InStationSummaryProps {
-  alerts: string[];
+  alerts: ElevatorClosure[];
 }
 
 const InStationSummary = ({ alerts }: InStationSummaryProps) => {
@@ -19,44 +75,138 @@ const InStationSummary = ({ alerts }: InStationSummaryProps) => {
           <NormalService height={72} width={72} fill="#145A06" />
         </span>
       </div>
-      <hr />
+      <hr className="thick" />
     </>
   );
 };
 
-interface OutsideAlertListProps {
-  alerts: string[];
+interface OutsideAlertListProps extends WrappedComponentProps {
+  stations: StationWithAlert[];
+  lastUpdate: number | null;
 }
 
-const OutsideAlertList = (_props: OutsideAlertListProps) => {
+const OutsideAlertList = ({
+  stations,
+  lastUpdate,
+  onFinish,
+}: OutsideAlertListProps) => {
+  const [isFirstRender, setIsFirstRender] = useState(true);
+  const [pageIndex, setPageIndex] = useState(0);
+
+  // Each value represents the pageIndex the row is visible on
+  const [rowPageIndexes, setRowPageIndexes] = useState<number[]>([]);
+
+  const [numPages, numOffsetRows] = useMemo(
+    () => [
+      rowPageIndexes.filter((val, i, self) => self.indexOf(val) === i).length,
+      rowPageIndexes.filter((offset) => offset !== pageIndex).length,
+    ],
+    [rowPageIndexes],
+  );
+
+  useEffect(() => {
+    if (lastUpdate != null) {
+      if (isFirstRender) {
+        setIsFirstRender(false);
+      } else {
+        setPageIndex((i) => i + 1);
+      }
+    }
+  }, [lastUpdate]);
+
+  useEffect(() => {
+    if (pageIndex === numPages - 1) {
+      onFinish();
+    }
+  }, [pageIndex]);
+
+  useLayoutEffect(() => {
+    const alertRows = Array.from(document.getElementsByClassName("alert-row"));
+    const screenWidth = 1080;
+    const totalXMargins = 48;
+
+    const rowPageIndexes = alertRows.map((alert) => {
+      const val = (alert as HTMLDivElement).offsetLeft - totalXMargins;
+      return val / screenWidth;
+    });
+
+    setRowPageIndexes(rowPageIndexes);
+  }, [stations]);
+
+  const getPagingIndicators = (num: number) => {
+    const indicators: JSX.Element[] = [];
+    for (let i = 0; i < num; i++) {
+      const indicator =
+        pageIndex === i ? (
+          <PagingDotSelected height={40} width={40} key={i} />
+        ) : (
+          <PagingDotUnselected height={28} width={28} key={i} />
+        );
+      indicators.push(indicator);
+    }
+
+    return indicators;
+  };
+
   return (
     <div className="outside-alert-list">
-      <div className="header">
-        <span>MBTA Elevator Closures</span>
-        <span>
-          <AccessibilityAlert height={128} width={128} />
-        </span>
+      <div className="header-container">
+        <div className="header">
+          <div className="header__title">MBTA Elevator Closures</div>
+          <div>
+            <AccessibilityAlert height={128} width={155} />
+          </div>
+        </div>
+        <hr className="thin" />
+      </div>
+      <div className="alert-list-container">
+        {
+          <div
+            className="alert-list"
+            style={
+              {
+                "--alert-list-offset": pageIndex,
+              } as React.CSSProperties
+            }
+          >
+            {stations.map((station) => (
+              <AlertRow station={station} key={station.id} />
+            ))}
+          </div>
+        }
+      </div>
+      <div className="paging-info-container">
+        <div>+{numOffsetRows} more elevators</div>
+        <div className="paging-indicators">{getPagingIndicators(numPages)}</div>
       </div>
     </div>
   );
 };
 
-interface Props {
+interface Props extends WrappedComponentProps {
   id: string;
-  in_station_alerts: string[];
-  outside_alerts: string[];
+  in_station_alerts: ElevatorClosure[];
+  other_stations_with_alerts: StationWithAlert[];
 }
 
 const ElevatorClosures: React.ComponentType<Props> = ({
+  other_stations_with_alerts: otherStationsWithAlerts,
   in_station_alerts: inStationAlerts,
-  outside_alerts: outsideAlerts,
+  lastUpdate,
+  onFinish,
 }: Props) => {
   return (
     <div className="elevator-closures">
       <InStationSummary alerts={inStationAlerts} />
-      <OutsideAlertList alerts={outsideAlerts} />
+      <OutsideAlertList
+        stations={otherStationsWithAlerts}
+        lastUpdate={lastUpdate}
+        onFinish={onFinish}
+      />
     </div>
   );
 };
 
-export default ElevatorClosures;
+export default makePersistent(
+  ElevatorClosures as ComponentType<WrappedComponentProps>,
+);

config/test.exs

@@ -170,6 +170,12 @@ config :screens, Screens.V2.RDS,
   route_pattern_module: Screens.RoutePatterns.MockRoutePattern,
   stop_module: Screens.Stops.MockStop
 
+config :screens, Screens.V2.CandidateGenerator.Elevator.Closures,
+  stop_module: Screens.Stops.MockStop,
+  facility_module: Screens.Facilities.MockFacility,
+  alert_module: Screens.Alerts.MockAlert,
+  route_module: Screens.Routes.MockRoute
+
 config :screens, Screens.LastTrip,
   trip_updates_adapter: Screens.LastTrip.TripUpdates.Noop,
   vehicle_positions_adapter: Screens.LastTrip.VehiclePositions.Noop