feat(SubwayStatus): show on homepage (#2377)

mbta · Feb 18, 2025 · d6e8243 · d6e8243
1 parent e4288d7
commit d6e8243
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 81 deletions.
diff --git a/assets/css/_homepage.scss b/assets/css/_homepage.scss
@@ -12,31 +12,12 @@
   }
 }
 
-.m-homepage__shortcuts {
-  column-gap: 3.125%;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: auto;
-  justify-items: stretch;
-  margin-top: 24px;
-
-  @include media-breakpoint-down(xs) {
-    column-gap: 3.125%;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-  }
-}
-
 .m-homepage__shortcut {
   @include icon-size(80px);
   background-color: $white;
   border: $border;
   border-radius: .5rem;
   color: $gray-dark;
-  display: inline-block;
-  font-size: $font-size-h4;
-  font-weight: 700;
-  line-height: $headings-line-height;
   padding: $base-spacing;
   text-align: center;
 
@@ -52,7 +33,6 @@
 
   @include media-breakpoint-only(xs) {
     @include icon-size(40px);
-    margin-bottom: math.div($base-spacing, 2);
     padding: $space-12;
   }
 

diff --git a/lib/dotcom_web/components/system_status/subway_status.ex b/lib/dotcom_web/components/system_status/subway_status.ex
@@ -14,7 +14,7 @@ defmodule DotcomWeb.Components.SystemStatus.SubwayStatus do
 
   attr :subway_status, :any, required: true
 
-  def subway_status(assigns) do
+  def homepage_subway_status(assigns) do
     assigns = assigns |> assign(:rows, status_to_rows(assigns.subway_status))
 
     ~H"""

diff --git a/lib/dotcom_web/controllers/page_controller.ex b/lib/dotcom_web/controllers/page_controller.ex
@@ -15,6 +15,7 @@ defmodule DotcomWeb.PageController do
 
   plug(:alerts)
   plug(DotcomWeb.Plugs.RecentlyVisited)
+  plug(:subway_status)
 
   @type content :: Banner.t() | Teaser.t() | WhatsHappeningItem.t()
   @type whats_happening_set :: {nil | [WhatsHappeningItem.t()], nil | [WhatsHappeningItem.t()]}
@@ -139,4 +140,8 @@ defmodule DotcomWeb.PageController do
 
     assign(conn, :alerts, alerts)
   end
+
+  defp subway_status(conn, _opts) do
+    assign(conn, :subway_status, Dotcom.SystemStatus.subway_status())
+  end
 end
diff --git a/lib/dotcom_web/live/system_status.ex b/lib/dotcom_web/live/system_status.ex
@@ -33,11 +33,9 @@ defmodule DotcomWeb.Live.SystemStatus do
       |> assign(:statuses, statuses)
       |> assign(:examples, examples)
 
-    Widget
-
     ~H"""
     <h1>Live Data</h1>
-    <.subway_status subway_status={@statuses} />
+    <.homepage_subway_status subway_status={@statuses} />
 
     <h2>Alerts</h2>
     <div class="flex flex-col gap-2">
@@ -48,7 +46,7 @@ defmodule DotcomWeb.Live.SystemStatus do
     <div :for={example <- @examples} class="mb-4">
       <div class="flex gap-5">
         <div>
-          <.subway_status subway_status={example.statuses} />
+          <.homepage_subway_status subway_status={example.statuses} />
         </div>
         <div class="flex flex-col gap-5">
           <span class="text-lg font-bold">Alerts</span>

diff --git a/lib/dotcom_web/templates/page/_tabbed_nav.html.eex b/lib/dotcom_web/templates/page/_tabbed_nav.html.eex
diff --git a/lib/dotcom_web/templates/page/_tabbed_nav.html.heex b/lib/dotcom_web/templates/page/_tabbed_nav.html.heex
@@ -0,0 +1,97 @@
+<div class="m-tabbed-nav" role="navigation">
+  <div class="nav m-tabbed-nav__items" role="tablist">
+    <div class="m-tabbed-nav__item-container">
+      <a
+        tabindex="0"
+        class="nav-link m-tabbed-nav__item active"
+        role="tab"
+        data-toggle="tab"
+        data-tab-type="schedules"
+        aria-controls="schedules-content"
+        aria-selected="true"
+      >
+        <span aria-hidden="true">
+          {svg("icon-map-default.svg")}
+        </span>
+        <span href="/schedules" class="m-tabbed-nav__icon-text">Schedules</span>
+      </a>
+    </div>
+    <div class="m-tabbed-nav__item-container">
+      <a
+        tabindex="0"
+        class="nav-link m-tabbed-nav__item"
+        role="tab"
+        data-toggle="tab"
+        data-tab-type="trip-planner"
+        aria-controls="trip-planner-content"
+        aria-selected="false"
+      >
+        <span aria-hidden="true">
+          {svg("icon-trip-planner-default.svg")}
+        </span>
+        <span href="/trip-planner" class="m-tabbed-nav__icon-text">Trip Planner</span>
+      </a>
+    </div>
+    <div class="m-tabbed-nav__item-container">
+      <a
+        tabindex="0"
+        class="nav-link m-tabbed-nav__item"
+        role="tab"
+        data-toggle="tab"
+        data-tab-type="alerts"
+        aria-controls="alerts-content"
+        aria-selected="false"
+      >
+        <span aria-hidden="true">
+          {svg("icon-alerts-default.svg")}
+        </span>
+        <span href="/alerts" class="m-tabbed-nav__icon-text">Alerts</span>
+      </a>
+    </div>
+  </div>
+  <div class="m-tabbed-nav__content">
+    <div
+      role="tabpanel"
+      id="schedules-content"
+      class="m-tabbed-nav__content-item active"
+      data-tab-content-type="schedules"
+    >
+      {render(DotcomWeb.PartialView, "_recently_visited.html",
+        conn: @conn,
+        routes: Map.get(assigns, :recently_visited, []),
+        alerts: @alerts,
+        date_time: @date_time,
+        header_class: "text-2xl"
+      )}
+      <%= unless Enum.empty?(Map.get(assigns, :recently_visited, [])) do %>
+        <hr />
+      <% end %>
+      <div class="my-6 lg:flex divide-y lg:divide-y-0 lg:divide-x">
+        <div class="flex-1 pb-6 lg:pb-0 lg:pe-6 grid gap-4 grid-cols-3 grid-rows-2 justify-items-stretch">
+          {shortcut_icons()}
+        </div>
+        <div class="pt-6 lg:pt-0 lg:ps-6 basis-2/5">
+          <.homepage_subway_status subway_status={@subway_status} />
+        </div>
+      </div>
+    </div>
+    <div
+      role="tabpanel"
+      id="trip-planner-content"
+      class="m-tabbed-nav__content-item"
+      data-tab-content-type="trip-planner"
+    >
+      <div class="m-mode-hub__trip-plan-widget">
+        {DotcomWeb.PartialView.render("_trip_planner_widget.html", assigns)}
+      </div>
+    </div>
+    <div
+      role="tabpanel"
+      id="alerts-content"
+      class="m-tabbed-nav__content-item"
+      data-tab-content-type="alerts"
+    >
+      {alerts(@conn.assigns.alerts)}
+    </div>
+  </div>
+</div>
diff --git a/lib/dotcom_web/views/page_view.ex b/lib/dotcom_web/views/page_view.ex
@@ -3,6 +3,7 @@ defmodule DotcomWeb.PageView do
   import PhoenixHTMLHelpers.Tag
   import DotcomWeb.CMSHelpers
   import DotcomWeb.CMS.ParagraphView, only: [render_paragraph: 2]
+  import DotcomWeb.Components.SystemStatus.SubwayStatus, only: [homepage_subway_status: 1]
 
   alias CMS.Page.NewsEntry
   alias CMS.Partial.Banner
@@ -143,11 +144,8 @@ defmodule DotcomWeb.PageView do
   end
 
   def shortcut_icons do
-    icons =
-      [:commuter_rail, :subway, :bus, :ferry, :the_ride]
-      |> Enum.map(&shortcut_icon/1)
-
-    content_tag(:div, icons, class: "m-homepage__shortcuts")
+    [:commuter_rail, :subway, :bus, :ferry, :the_ride]
+    |> Enum.map(&shortcut_icon/1)
   end
 
   @spec shortcut_icon(atom) :: Phoenix.HTML.Safe.t()

diff --git a/test/dotcom_web/views/page_view_test.exs b/test/dotcom_web/views/page_view_test.exs
@@ -43,9 +43,10 @@ defmodule DotcomWeb.PageViewTest do
 
   describe "shortcut_icons/0" do
     test "renders shortcut icons" do
-      rendered = PageView.shortcut_icons() |> HTML.safe_to_string()
-      icons = Floki.find(rendered, ".m-homepage__shortcut")
+      icons = PageView.shortcut_icons()
       assert length(icons) == 5
+      icon = List.first(icons) |> HTML.safe_to_string()
+      assert icon =~ "<svg"
     end
   end