refactor: show transit leg summary for short legs (#2057)

assets/css/_icons.scss

@@ -296,23 +296,25 @@ a {
 
 .c-icon__bus-pill {
   border-radius: calc(#{$base-spacing} / 4);
+  display: inline-block;
   font-weight: bold;
-  max-height: calc(#{$base-spacing} * 1.5);
-  min-width: 2rem;
-  padding: 0 calc(#{$base-spacing} / 4);
+  line-height: normal;
+  min-width: calc(#{$base-spacing} * 4 / 2);
+  padding: 0 calc(#{$base-spacing} / 3);
   text-align: center;
+  white-space: nowrap;
 }
 
 .c-icon__bus-pill--small {
   border-radius: calc(#{$base-spacing} / 6);
   display: inline-block;
   font-size: calc(#{$font-size-base} * 2 / 3);
   font-weight: bold;
-  height: $base-spacing;
-  line-height: $base-spacing;
+  line-height: normal;
   min-width: calc(#{$base-spacing} * 4 / 3);
   padding: 0 calc(#{$base-spacing} / 6);
   text-align: center;
+  white-space: nowrap;
 }
 
 .c-icon__crowding {

assets/css/_stop-bubbles.scss

@@ -141,12 +141,13 @@ $location-line-width: $space-6;
 
 .route-branch-stop-info {
   border-bottom: $border;
+  border-top: $border;
   display: inline-block; // for non-flex browsers
   display: flex;
   flex: 1 1 0%;
   flex-direction: column;
   margin-bottom: $base-spacing;
-  width: 60%; // for non-flex browsers
+  padding: calc(#{$base-spacing} / 2) 0;
 }
 
 .route-branch-destination {
@@ -163,46 +164,32 @@ $location-line-width: $space-6;
 }
 
 .toggle-detail-list {
-  align-items: center;
   color: $gray-dark;
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: .75rem;
-  padding-top: .5rem;
-  text-align: left;
-  width: 100%;
-
-  @include media-breakpoint-down(sm) {
-    padding-right: 0;
-  }
 
+  &:focus,
   &:hover {
     text-decoration: none;
   }
 
-  &:focus {
-    text-decoration: none;
+  .expand-show-details {
+    display: block;
   }
 }
 
 .expand-show-details {
   color: $brand-primary;
+  display: none;
+  font-size: $font-size-sm;
+  padding-top: $base-spacing-sm * .75;
 
   &:hover {
     text-decoration: underline;
   }
-}
-
-.expand-link-stop-text {
-  flex: 1 1 auto;
-  max-width: 80%;
-  // .btn has white-space: nowrap set. We need to override this to allow the stop text to wrap
-  white-space: normal;
-}
 
-.expand-branch-link-icon {
-  color: $brand-primary;
-  flex: 0 0 auto;
+  [aria-expanded='true'] &--show,
+  [aria-expanded='false'] &--hide {
+    display: none;
+  }
 }
 
 @include media-breakpoint-only(xs) {

assets/css/_trip-plan-results.scss

@@ -90,12 +90,6 @@
     .fa-angle-right {
       margin: 0 calc(#{$base-spacing} / 4);
     }
-
-    .c-icon__bus-pill {
-      font-size: .9em;
-      max-height: initial;
-      white-space: nowrap;
-    }
   }
 
   &-length-time {
@@ -153,4 +147,28 @@
   &-fare + &-fare-title {
     margin-top: 1rem;
   }
+
+  .c-svg__walk {
+    display: inline-block;
+    height: $base-spacing * 1.25;
+    width: $base-spacing * 1.25;
+  }
+
+  .leg-summary {
+    display: grid;
+    gap: calc($base-spacing * .5);
+    grid-template-columns: 4ch 1fr;
+    line-height: 1.25;
+
+    .c-svg__walk {
+      height: $base-spacing * 1.5;
+      width: $base-spacing * 1.5;
+    }
+  }
+
+  .leg-summary-container {
+    align-items: start;
+    display: flex;
+    justify-content: space-between;
+  }
 }

assets/js/app.js

@@ -25,7 +25,6 @@ import datePicker from "./date-picker";
 import toggleBtn from "./toggle-on-click";
 import * as TimeControls from "./time-controls/time-controls";
 import * as TripPlannerLocationControls from "./trip-planner-location-controls";
-import stopBubbles from "./stop-bubbles";
 import search from "./search";
 import photoGallery from "./photo-gallery";
 import { init as embeddedSearchInit } from "./algolia-embedded-search";
@@ -129,7 +128,6 @@ timetableStyle();
 timetableStick();
 datePicker();
 toggleBtn();
-stopBubbles();
 search(window.$, breakpoints);
 photoGallery();
 stickyTooltip();

lib/dotcom_web/templates/trip_plan/_itinerary_row_transit.html.eex

@@ -13,20 +13,31 @@
         bubble_params: transfer_bubbles
       })
   %>
-  <%= if DotcomWeb.ScheduleView.StopList.display_expand_link?(step_bubble_params) do
-    bubble_map = %{bubbles: [{ItineraryRow.route_name(@itinerary_row), :line}],
-      route: @itinerary_row.route,
-      vehicle_tooltip: nil,
-      intermediate_stop_count: Enum.count(step_bubble_params),
-      alerts?: ItineraryRow.intermediate_alerts?(@itinerary_row)}
-    DotcomWeb.ScheduleView.StopList.view_branch_link(
-        route_name,
-        Map.merge(assigns, bubble_map),
-        collapse_target_id,
-        route_name)
-  end %>
+  <%= if route_name do %>
+    <%# @doc """
+      Link to expand or collapse a route branch.
+
+      Note: The target element (with id `"target_id"`) must also have class `"collapse stop-list"`
+      for the javascript to appropriately modify the button and the dotted/solid line
+      """
+    %>
+   <%= render(
+      "_stop_list_expand_link.html",
+        Map.merge(assigns,  %{
+          bubbles: [{ItineraryRow.route_name(@itinerary_row), :line}],
+          route: @itinerary_row.route,
+          vehicle_tooltip: nil,
+          intermediate_stop_count: Enum.count(step_bubble_params) + 1,
+          alerts?: ItineraryRow.intermediate_alerts?(@itinerary_row),
+          branch_name: route_name,
+          branch_display: route_name,
+          target_id: collapse_target_id,
+          expanded: route_name == @expanded
+        })
+      ) %>
+ <% end %>
   <%=
-    content_tag :div, DotcomWeb.ScheduleView.StopList.step_bubble_attributes(step_bubble_params, collapse_target_id, route_name == @expanded) do
+    content_tag :div, [id: collapse_target_id, class: "collapse stop-list " <> if(route_name == @expanded, do: "in", else: "")] do
       render_steps(@conn, step_bubble_params, @mode_class, @itinerary_idx, @row_idx)
     end
   %>

lib/dotcom_web/templates/trip_plan/_leg_summary.html.heex

@@ -0,0 +1,27 @@
+<div class="leg-summary">
+  <div><%= icon_for_route(@route) %></div>
+  <div>
+    <strong class="pe-8">
+      Ride the <%= @branch_display %>
+    </strong> 
+    <%= "(#{@intermediate_stop_count} #{Inflex.inflect("Stop", @intermediate_stop_count)}, #{display_seconds_as_minutes(@itinerary_row.duration)} min)" %>
+    <%= if @itinerary_row.trip do %>
+      <div class="fs-14">
+        <%= Routes.Route.direction_name(@route, @itinerary_row.trip.direction_id) %>
+        <%= if @itinerary_row.trip.headsign && @itinerary_row.trip.headsign != "" do %>
+          towards <%= @itinerary_row.trip.headsign %>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="expand-show-details">
+      <span class="expand-show-details--hide">Hide</span>
+      <span class="expand-show-details--show">Show</span>
+      Details
+      <%= if Map.get(assigns, :alerts?, false) do %>
+        <span class="itinerary-has-alerts-icon">
+          <%= fa "exclamation-triangle" %>
+        </span>
+      <% end %>
+    </div>
+  </div>
+</div>

lib/dotcom_web/templates/trip_plan/_stop_list_expand_link.html.eex

@@ -0,0 +1,24 @@
+<div class="route-branch-stop<%= if @expanded, do: " expanded", else: "" %>">
+  <%=
+    stop_branch = assigns[:stop] && @stop.branch
+    assigns
+    |> Map.put(:bubbles, Enum.map(@bubbles, fn {branch, _} -> {branch, :line} end))
+    |> DotcomWeb.ScheduleView.StopList.stop_bubble_row_params(false)
+    |> DotcomWeb.PartialView.StopBubbles.render_stop_bubbles(true, stop_branch)
+  %>
+  <div class="route-branch-stop-info">
+    <%= if @intermediate_stop_count > 1 do %>
+     <%= link(to: update_url(assigns.conn, expanded: (if @expanded, do: nil, else: @branch_name)),
+             class: "toggle-detail-list",
+             aria: [expanded: if(@expanded, do: "true", else: "false")],
+             data: [toggle: "collapse", target: "##{@target_id}"]) do %>
+        <div class="leg-summary-container">
+          <%= render("_leg_summary.html", assigns) %>
+          <span class="c-expandable-block-caret"></span>
+        </div>
+      <% end %>
+    <% else %>
+      <%= render("_leg_summary.html", assigns) %>
+    <% end %>
+  </div>
+</div>