feat: Wayfinding Header/Section Implementation

- image_path config for Departure Header can now be used to implement a
  Wayfinding image
- we can use it to define images above departures, image only sections
  and full screen images using `header_only`
- addeds a container div around sections that exposes a true-grey-70
  section break for image section headers

Author: deanshi

assets/css/lcd/departures/section.scss

@@ -1,6 +1,15 @@
 @use "CSS/colors";
 
+.departures-section-container--header-image {
+  &:not(:first-child) {
+    padding-top: 24px;
+    background-color: colors.$true-grey-70;
+  }
+}
+
 .departures-section {
+  background-color: #e6e4e1;
+
   & > .departure-row:not(:last-child)::after {
     position: absolute;
     bottom: 0;

assets/src/components/departures/header.tsx

@@ -2,12 +2,14 @@ import cx from "classnames";
 import { type JSX } from "react";
 
 import Arrow45 from "Images/arrow-45.svg";
+import { extensionForAsset } from "Util/utils";
 
 type CardinalDirection = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
 
 type Header = {
   title: string | null;
   arrow: CardinalDirection | null;
+  image_path: string | null;
   subtitle: string | null;
 };
 
@@ -25,13 +27,20 @@ const DirectionArrow = ({ arrow }: { arrow: CardinalDirection }) => (
   />
 );
 
-const Header = ({ title, arrow, subtitle }: Header) => {
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "svg", "gif", "webp"];
+
+const Header = ({ title, arrow, subtitle, image_path: imagePath }: Header) => {
   return (
     <>
       <header className="departures-header">
         {(title || arrow) && <span>{title}</span>}
         {arrow && <DirectionArrow arrow={arrow} />}
       </header>
+      {imagePath && IMAGE_EXTENSIONS.includes(extensionForAsset(imagePath)) && (
+        <div className="departures-header__image-container">
+          <img className="departures-header__image" src={imagePath} />
+        </div>
+      )}
       {subtitle && (
         <div className="departures-header__subtitle">
           {formatSubtitle(subtitle)}

assets/src/components/departures/normal_section.tsx

@@ -5,6 +5,7 @@ import DepartureRow from "./departure_row";
 import NoticeRow from "./notice_row";
 import Header from "./header";
 import LaterDepartures, { MIN_LATER_DEPARTURES } from "./later_departures";
+import { classWithModifier } from "Util/utils";
 
 export type Layout = {
   base: number | null;
@@ -69,28 +70,35 @@ export const NormalSection: ComponentType<FoldedSection> = ({
     });
 
   return (
-    <div className="departures-section">
-      <Header {...header} />
-      {aboveFold.map((row, index) => {
-        if (row.type === "departure_row") {
-          return (
-            <DepartureRow
-              {...row}
-              key={row.id}
-              isBeforeDirectionSplit={
-                groupingType === "destination" &&
-                index === rowToAddDivider(aboveFold)
-              }
-            />
-          );
-        } else {
-          return <NoticeRow row={row} key={weakKey(row)} />;
-        }
-      })}
-
-      {includeLater && belowFold.length >= MIN_LATER_DEPARTURES && (
-        <LaterDepartures rows={belowFold} />
+    <div
+      className={classWithModifier(
+        "departures-section-container",
+        header.image_path ? "header-image" : "",
       )}
+    >
+      <div className="departures-section">
+        <Header {...header} />
+        {aboveFold.map((row, index) => {
+          if (row.type === "departure_row") {
+            return (
+              <DepartureRow
+                {...row}
+                key={row.id}
+                isBeforeDirectionSplit={
+                  groupingType === "destination" &&
+                  index === rowToAddDivider(aboveFold)
+                }
+              />
+            );
+          } else {
+            return <NoticeRow row={row} key={weakKey(row)} />;
+          }
+        })}
+
+        {includeLater && belowFold.length >= MIN_LATER_DEPARTURES && (
+          <LaterDepartures rows={belowFold} />
+        )}
+      </div>
     </div>
   );
 };

assets/src/components/evergreen_content.tsx

@@ -1,6 +1,7 @@
 import type { ComponentType } from "react";
 
 import LoopingVideoPlayer from "Components/looping_video_player";
+import { extensionForAsset } from "Util/utils";
 
 const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "svg", "gif", "webp"];
 const VIDEO_EXTENSIONS = ["mp4", "ogg", "ogv", "webm"];
@@ -14,8 +15,7 @@ const EvergreenContent: ComponentType<Props> = ({
   asset_url: assetUrl,
   isPlaying = true,
 }) => {
-  const parts = assetUrl.split(".");
-  const extension = parts[parts.length - 1].toLowerCase();
+  const extension = extensionForAsset(assetUrl);
 
   if (IMAGE_EXTENSIONS.includes(extension)) {
     return <Image assetUrl={assetUrl} />;

assets/src/util/utils.ts

@@ -68,3 +68,8 @@ export const firstWord = (str: string): string => str.split(" ")[0];
 
 export const formatCause = (cause: string) =>
   (cause.charAt(0).toUpperCase() + cause.substring(1)).replace("_", " ");
+
+export const extensionForAsset = (assetPath: string) => {
+  const parts = assetPath.split(".");
+  return parts[parts.length - 1].toLowerCase();
+};

assets/tests/components/departures/factories.ts

@@ -8,7 +8,7 @@ export const normalSection = Factory.define<Section>(() => ({
   type: "normal_section",
   layout: { min: 1, base: null, max: null, include_later: false },
   rows: departureRow.buildList(1),
-  header: { title: null, arrow: null, subtitle: null },
+  header: { title: null, arrow: null, subtitle: null, image_path: null },
   grouping_type: "time",
 }));
 

lib/screens/util/assets.ex

@@ -1,6 +1,9 @@
 defmodule Screens.Util.Assets do
   @moduledoc false
 
+  def s3_asset_url(nil), do: ""
+  def s3_asset_url(""), do: ""
+
   def s3_asset_url(asset_path) do
     env = Application.get_env(:screens, :environment_name, "screens-dev")
     "https://mbta-screens.s3.amazonaws.com/#{env}/#{asset_path}"

lib/screens/v2/widget_instance/departures.ex

@@ -8,6 +8,7 @@ defmodule Screens.V2.WidgetInstance.Departures do
   alias Screens.Schedules.Schedule
   alias Screens.Stops.Stop
   alias Screens.Util
+  alias Screens.Util.Assets
   alias Screens.V2.Departure
   alias Screens.V2.WidgetInstance.Departures
   alias Screens.V2.WidgetInstance.Serializer.RoutePill
@@ -194,7 +195,7 @@ defmodule Screens.V2.WidgetInstance.Departures do
   def serialize_section(
         %NormalSection{
           rows: rows,
-          header: header,
+          header: %Header{image_path: image_path} = header,
           layout: %Layout{max: max},
           grouping_type: :destination
         },
@@ -218,13 +219,18 @@ defmodule Screens.V2.WidgetInstance.Departures do
           min: 2,
           include_later: false
         }),
-      header: Header.to_json(header),
+      header: Map.put(header, :image_path, Assets.s3_asset_url(image_path)) |> Header.to_json(),
       grouping_type: :destination
     }
   end
 
   def serialize_section(
-        %NormalSection{rows: rows, layout: layout, header: header, grouping_type: grouping_type},
+        %NormalSection{
+          rows: rows,
+          layout: layout,
+          header: %Header{image_path: image_path} = header,
+          grouping_type: grouping_type
+        },
         screen,
         now,
         _is_only_section
@@ -239,7 +245,7 @@ defmodule Screens.V2.WidgetInstance.Departures do
       type: :normal_section,
       rows: serialized_rows,
       layout: Layout.to_json(layout),
-      header: Header.to_json(header),
+      header: Map.put(header, :image_path, Assets.s3_asset_url(image_path)) |> Header.to_json(),
       grouping_type: grouping_type
     }
   end

mix.lock

@@ -64,7 +64,7 @@
   "recon": {:hex, :recon, "2.5.6", "9052588e83bfedfd9b72e1034532aee2a5369d9d9343b61aeb7fbce761010741", [:mix, :rebar3], [], "hexpm", "96c6799792d735cc0f0fd0f86267e9d351e63339cbe03df9d162010cefc26bb0"},
   "remote_ip": {:hex, :remote_ip, "1.2.0", "fb078e12a44414f4cef5a75963c33008fe169b806572ccd17257c208a7bc760f", [:mix], [{:combine, "~> 0.10", [hex: :combine, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "2ff91de19c48149ce19ed230a81d377186e4412552a597d6a5137373e5877cb7"},
   "retry": {:hex, :retry, "0.19.0", "aeb326d87f62295d950f41e1255fe6f43280a1b390d36e280b7c9b00601ccbc2", [:mix], [], "hexpm", "85ef376aa60007e7bff565c366310966ec1bd38078765a0e7f20ec8a220d02ca"},
-  "screens_config": {:git, "https://github.com/mbta/screens-config-lib.git", "a7b27b92f1a667b33e8959a4fdb340d9556c77cd", []},
+  "screens_config": {:git, "https://github.com/mbta/screens-config-lib.git", "bfbb2a5b6e54b01fd596b938b2754af8a7af6322", []},
   "sentry": {:hex, :sentry, "12.0.3", "0d5f681b4a7b57c4df16a37f4b90a554d10e577dad01d4457c844ffa24800861", [:mix], [{:finch, "~> 0.21", [hex: :finch, repo: "hexpm", optional: true]}, {:hackney, "~> 1.8", [hex: :hackney, repo: "hexpm", optional: true]}, {:igniter, "~> 0.5", [hex: :igniter, repo: "hexpm", optional: true]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: true]}, {:nimble_options, "~> 1.0", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:nimble_ownership, "~> 0.3.0 or ~> 1.0", [hex: :nimble_ownership, repo: "hexpm", optional: false]}, {:opentelemetry, ">= 0.0.0", [hex: :opentelemetry, repo: "hexpm", optional: true]}, {:opentelemetry_api, ">= 0.0.0", [hex: :opentelemetry_api, repo: "hexpm", optional: true]}, {:opentelemetry_exporter, ">= 0.0.0", [hex: :opentelemetry_exporter, repo: "hexpm", optional: true]}, {:opentelemetry_semantic_conventions, ">= 0.0.0", [hex: :opentelemetry_semantic_conventions, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6", [hex: :phoenix, repo: "hexpm", optional: true]}, {:phoenix_live_view, "~> 0.20 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.6", [hex: :plug, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm", "3c2f571ea43e8d3c893c5ca88ab1d1b9501f02925d094fc23811ce5b7f228b65"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
   "stream_data": {:hex, :stream_data, "1.3.0", "bde37905530aff386dea1ddd86ecbf00e6642dc074ceffc10b7d4e41dfd6aac9", [:mix], [], "hexpm", "3cc552e286e817dca43c98044c706eec9318083a1480c52ae2688b08e2936e3c"},