Add header and footer instances in closures CG.

assets/css/elevator_v2.scss

@@ -34,3 +34,11 @@ body {
 *::after {
   box-sizing: border-box;
 }
+
+.normal-header,
+.footer {
+  &--closed {
+    color: white;
+    background-color: $accessibility-blue;
+  }
+}

assets/css/v2/elevator/elevator_closures.scss

@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 1632px;
+  height: 100%;
   color: $cool-black-15;
   background-color: $warm-neutral-90;
 

assets/css/v2/elevator/footer.scss

@@ -1,17 +1,12 @@
 .footer {
-  height: 184px;
+  height: 100%;
   padding: 26px 48px;
   font-size: 48px;
   font-weight: 500;
   line-height: 62px;
   color: white;
   background-color: $cool-black-30;
 
-  &--blue {
-    color: white;
-    background-color: $accessibility-blue;
-  }
-
   b {
     letter-spacing: -0.2px;
   }

assets/css/v2/elevator/header.scss

@@ -2,16 +2,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 104px;
+  height: 100%;
   padding: 0 48px;
   font-family: Inter, sans-serif;
   font-size: 48px;
   line-height: 62px;
   color: $warm-neutral-90;
   background-color: $cool-black-15;
-
-  &--blue {
-    color: white;
-    background-color: $accessibility-blue;
-  }
 }

assets/css/v2/elevator/normal.scss

@@ -5,7 +5,18 @@
   margin-left: auto;
 }
 
-.screen-normal__main-content {
-  width: 100%;
-  height: 1920px;
+.screen-normal__header {
+  width: 1080px;
+  height: 104px;
+}
+
+.screen-normal__body {
+  width: 1080px;
+  height: 1632px;
+}
+
+.screen-normal__footer {
+  position: relative;
+  width: 1080px;
+  height: 184px;
 }

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

@@ -9,8 +9,6 @@ import OutsideClosuresView from "Components/v2/elevator/closures/outside_closure
 import CurrentElevatorClosedView, {
   type Coordinates,
 } from "Components/v2/elevator/closures/current_elevator_closed_view";
-import Footer from "Components/v2/elevator/footer";
-import NormalHeader from "Components/v2/normal_header";
 
 export type StationWithClosures = {
   id: string;
@@ -35,7 +33,6 @@ interface Props extends WrappedComponentProps {
   accessible_path_direction_arrow: Direction;
   accessible_path_image_url: string | null;
   accessible_path_image_here_coordinates: Coordinates;
-  time: string;
 }
 
 const ElevatorClosures: React.ComponentType<Props> = ({
@@ -46,7 +43,6 @@ const ElevatorClosures: React.ComponentType<Props> = ({
   accessible_path_direction_arrow: accessiblePathDirectionArrow,
   accessible_path_image_url: accessiblePathImageUrl,
   accessible_path_image_here_coordinates: accessiblePathImageHereCoordinates,
-  time,
   lastUpdate,
   onFinish,
 }: Props) => {
@@ -55,36 +51,27 @@ const ElevatorClosures: React.ComponentType<Props> = ({
   );
 
   return (
-    <>
-      <NormalHeader
-        text={`Elevator ${id}`}
-        time={time}
-        maxHeight={104}
-        classModifiers={currentElevatorClosure ? "blue" : ""}
-      />
-      <div className="elevator-closures">
-        {currentElevatorClosure ? (
-          <CurrentElevatorClosedView
-            closure={currentElevatorClosure}
-            alternateDirectionText={alternateDirectionText}
-            accessiblePathDirectionArrow={accessiblePathDirectionArrow}
-            accessiblePathImageUrl={accessiblePathImageUrl}
-            accessiblePathImageHereCoordinates={
-              accessiblePathImageHereCoordinates
-            }
-            onFinish={onFinish}
-            lastUpdate={lastUpdate}
-          />
-        ) : (
-          <OutsideClosuresView
-            stations={otherStationsWithClosures}
-            lastUpdate={lastUpdate}
-            onFinish={onFinish}
-          />
-        )}
-      </div>
-      <Footer variant={currentElevatorClosure ? "blue" : ""} />
-    </>
+    <div className="elevator-closures">
+      {currentElevatorClosure ? (
+        <CurrentElevatorClosedView
+          closure={currentElevatorClosure}
+          alternateDirectionText={alternateDirectionText}
+          accessiblePathDirectionArrow={accessiblePathDirectionArrow}
+          accessiblePathImageUrl={accessiblePathImageUrl}
+          accessiblePathImageHereCoordinates={
+            accessiblePathImageHereCoordinates
+          }
+          onFinish={onFinish}
+          lastUpdate={lastUpdate}
+        />
+      ) : (
+        <OutsideClosuresView
+          stations={otherStationsWithClosures}
+          lastUpdate={lastUpdate}
+          onFinish={onFinish}
+        />
+      )}
+    </div>
   );
 };
 

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { classWithModifier } from "Util/util";
 
-const Footer = ({ variant }: { variant?: string }) => {
+const Footer = ({ variant }: { variant: string | null }) => {
   return (
     <div className={classWithModifier("footer", variant)}>
       For more info and alternate paths: <b>mbta.com/alerts/access</b> or{" "}

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

@@ -3,15 +3,23 @@ import React from "react";
 import Widget, { WidgetData } from "Components/v2/widget";
 
 interface Props {
+  header: WidgetData;
   main_content: WidgetData;
+  footer: WidgetData;
 }
 
-const NormalScreen = ({ main_content: mainContent }: Props) => {
+const NormalScreen = ({ header, main_content: mainContent, footer }: Props) => {
   return (
     <div className="screen-normal">
+      <div className="screen-normal__header">
+        <Widget data={header} />
+      </div>
       <div className="screen-normal__body">
         <Widget data={mainContent} />
       </div>
+      <div className="screen-normal__footer">
+        <Widget data={footer} />
+      </div>
     </div>
   );
 };

assets/src/components/v2/normal_header.tsx

@@ -1,15 +1,9 @@
-import useTextResizer from "Hooks/v2/use_text_resizer";
 import React, { forwardRef, ComponentType } from "react";
-import { getDatasetValue } from "Util/dataset";
 
 import LiveDataSvg from "Images/svgr_bundled/live-data-small.svg";
-
-import {
-  classWithModifier,
-  classWithModifiers,
-  formatTimeString,
-  imagePath,
-} from "Util/util";
+import { getDatasetValue } from "Util/dataset";
+import { classWithModifiers, formatTimeString, imagePath } from "Util/util";
+import useTextResizer from "Hooks/v2/use_text_resizer";
 
 enum Icon {
   green_b = "green_b",
@@ -154,6 +148,7 @@ interface Props {
   fullName?: boolean;
   classModifiers?: string;
   accentPattern?: string;
+  variant?: string | null;
 }
 
 const NormalHeader: ComponentType<Props> = ({
@@ -167,14 +162,17 @@ const NormalHeader: ComponentType<Props> = ({
   fullName = false,
   classModifiers,
   accentPattern,
+  variant,
 }) => {
   const { ref: headerRef, size: headerSize } = useTextResizer({
     sizes: Object.keys(TitleSize),
     maxHeight: maxHeight,
     resetDependencies: [text],
   });
   return (
-    <div className={classWithModifier("normal-header", classModifiers)}>
+    <div
+      className={classWithModifiers("normal-header", [classModifiers, variant])}
+    >
       <NormalHeaderTitle
         icon={icon}
         text={text}

assets/src/util/util.tsx

@@ -1,6 +1,7 @@
 import moment from "moment";
 import "moment-timezone";
 import { RefObject } from "react";
+import cx from "classnames";
 
 import { getDatasetValue } from "Util/dataset";
 import { isDup } from "Util/outfront";
@@ -17,8 +18,9 @@ export const classWithModifiers = (baseClass, modifiers) => {
   if (modifiers.length === 0) {
     return baseClass;
   } else {
-    return (
-      `${baseClass} ` + modifiers.map((m) => `${baseClass}--${m}`).join(" ")
+    return cx(
+      baseClass,
+      ...modifiers.filter((m) => m).map((m) => `${baseClass}--${m}`),
     );
   }
 };

lib/screens/v2/candidate_generator/elevator.ex

@@ -5,14 +5,21 @@ defmodule Screens.V2.CandidateGenerator.Elevator do
   alias Screens.V2.CandidateGenerator.Elevator.Closures, as: ElevatorClosures
   alias Screens.V2.CandidateGenerator.Widgets.Evergreen
   alias Screens.V2.Template.Builder
+  alias Screens.V2.WidgetInstance.{Footer, NormalHeader}
+  alias ScreensConfig.Screen
+  alias ScreensConfig.V2.Elevator
 
   @behaviour CandidateGenerator
 
   def screen_template do
     {
       :screen,
       %{
-        normal: [:main_content]
+        normal: [
+          :header,
+          :main_content,
+          :footer
+        ]
       }
     }
     |> Builder.build_template()
@@ -21,14 +28,26 @@ defmodule Screens.V2.CandidateGenerator.Elevator do
   def candidate_instances(
         config,
         now \\ DateTime.utc_now(),
-        elevator_closure_instances_fn \\ &ElevatorClosures.elevator_status_instances/2,
+        elevator_closure_instances_fn \\ &ElevatorClosures.elevator_status_instances/3,
         evergreen_content_instances_fn \\ &Evergreen.evergreen_content_instances/2
       ) do
     Enum.concat([
-      elevator_closure_instances_fn.(config, now),
+      elevator_closure_instances_fn.(
+        config,
+        header_instance(config, now),
+        footer_instance(config)
+      ),
       evergreen_content_instances_fn.(config, now)
     ])
   end
 
   def audio_only_instances(_widgets, _config), do: []
+
+  defp header_instance(%Screen{app_params: %Elevator{elevator_id: elevator_id}} = config, now) do
+    %NormalHeader{text: "Elevator #{elevator_id}", screen: config, time: now}
+  end
+
+  defp footer_instance(config) do
+    %Footer{screen: config}
+  end
 end

lib/screens/v2/candidate_generator/elevator/closures.ex

@@ -6,7 +6,7 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
   alias Screens.Alerts.{Alert, InformedEntity}
   alias Screens.Routes.Route
   alias Screens.Stops.Stop
-  alias Screens.V2.WidgetInstance.ElevatorClosures
+  alias Screens.V2.WidgetInstance.{ElevatorClosures, Footer, NormalHeader}
   alias Screens.V2.WidgetInstance.Serializer.RoutePill
   alias ScreensConfig.Screen
   alias ScreensConfig.V2.Elevator
@@ -18,10 +18,12 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
   @route injected(Route)
   @stop injected(Stop)
 
-  @spec elevator_status_instances(Screen.t()) :: list(ElevatorClosures.t())
+  @spec elevator_status_instances(Screen.t(), NormalHeader.t(), Footer.t()) ::
+          list(ElevatorClosures.t())
   def elevator_status_instances(
         %Screen{app_params: %Elevator{elevator_id: elevator_id} = config},
-        now \\ DateTime.utc_now()
+        header_instance,
+        footer_instance
       ) do
     with {:ok, %Stop{id: stop_id}} <- @facility.fetch_stop_for_facility(elevator_id),
          {:ok, parent_station_map} <- @stop.fetch_parent_station_name_map(),
@@ -32,14 +34,24 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
       {in_station_alerts, outside_alerts} =
         split_closures_by_location(elevator_alerts, stop_id)
 
+      in_station_closures =
+        Enum.map(in_station_alerts, &alert_to_elevator_closure/1)
+
+      header_footer_variant =
+        if(Enum.any?(in_station_closures, &(&1.elevator_id == elevator_id)),
+          do: :closed,
+          else: nil
+        )
+
       [
+        %NormalHeader{header_instance | variant: header_footer_variant},
         %ElevatorClosures{
-          in_station_closures: Enum.map(in_station_alerts, &alert_to_elevator_closure/1),
+          in_station_closures: in_station_closures,
           other_stations_with_closures:
             format_outside_closures(outside_alerts, parent_station_map, routes_map),
-          app_params: config,
-          now: now
-        }
+          app_params: config
+        },
+        %Footer{footer_instance | variant: header_footer_variant}
       ]
     else
       :error ->