feat(SF2.0): Add The Squiggle for collapsed trip details

assets/tailwind.config.js

@@ -57,7 +57,7 @@ module.exports = {
   ],
   safelist: [
     {
-      pattern: /(bg|text|border|ring)-(logan-express|blue|green|orange|red|silver|bus|ferry|)./
+      pattern: /(bg|text|border|ring|stroke)-(logan-express|blue|green|orange|red|silver|bus|brand-bus|ferry|commuter-rail).*/
     }
   ],
   theme: {

lib/css_helpers.ex

@@ -50,4 +50,26 @@ defmodule CSSHelpers do
       "mbta-route-#{String.downcase(route.id)}-line"
     end
   end
+
+  @doc """
+  Returns a Tailwind stroke color class for a route.
+  This is used for SVG elements that need stroke colors.
+  """
+  @spec route_to_stroke_class(Route.t()) :: String.t()
+  def route_to_stroke_class(%Route{type: 3} = route) do
+    if Route.silver_line?(route) do
+      "stroke-silver-line"
+    else
+      "stroke-brand-bus"
+    end
+  end
+
+  def route_to_stroke_class(%Route{type: 2}), do: "stroke-commuter-rail"
+  def route_to_stroke_class(%Route{type: 4}), do: "stroke-ferry"
+  def route_to_stroke_class(%Route{id: "Mattapan"}), do: "stroke-red-line"
+  def route_to_stroke_class(%Route{id: "Red"}), do: "stroke-red-line"
+  def route_to_stroke_class(%Route{id: "Blue"}), do: "stroke-blue-line"
+  def route_to_stroke_class(%Route{id: "Orange"}), do: "stroke-orange-line"
+  def route_to_stroke_class(%Route{id: "Green" <> _}), do: "stroke-green-line"
+  def route_to_stroke_class(_), do: "stroke-black"
 end

lib/dotcom_web/components/route_components.ex

@@ -76,7 +76,7 @@ defmodule DotcomWeb.RouteComponents do
 
   attr :variant, :string,
     default: "default",
-    values: ["cancelled", "default", "mode", "none"],
+    values: ["cancelled", "default", "mode", "none", "squiggle"],
     doc:
       "Determines what kind of marker gets put on the line. `default` is a small round circle, " <>
         "`mode` is a larger bus, subway, etc icon, and `none` draws no marker at all."
@@ -115,7 +115,10 @@ defmodule DotcomWeb.RouteComponents do
 
   attr :background, :string, default: "white", values: ["white", "charcoal-90"]
   attr :route, Route, required: true
-  attr :variant, :string, default: "default", values: ["cancelled", "default", "mode", "none"]
+
+  attr :variant, :string,
+    default: "default",
+    values: ["cancelled", "default", "mode", "none", "squiggle"]
 
   defp lined_list_marker(%{variant: "none"} = assigns) do
     ~H""
@@ -155,6 +158,19 @@ defmodule DotcomWeb.RouteComponents do
     """
   end
 
+  defp lined_list_marker(%{variant: "squiggle"} = assigns) do
+    ~H"""
+    <div class={[
+      "#{route_to_stroke_class(@route)}",
+      "absolute top-0 bottom-0 left-0 right-0 z-20 m-auto",
+      "size-5 #{background_to_bg_class(@background)}",
+      "flex items-center justify-items-center"
+    ]}>
+      <Icon.icon type="icon-svg" name="icon-squiggle" />
+    </div>
+    """
+  end
+
   defp lined_list_marker(assigns) do
     ~H"""
     <div class={[
@@ -167,4 +183,7 @@ defmodule DotcomWeb.RouteComponents do
 
   defp background_to_ring_class("white"), do: "ring-white"
   defp background_to_ring_class("charcoal-90"), do: "ring-charcoal-90"
+
+  defp background_to_bg_class("white"), do: "bg-white"
+  defp background_to_bg_class("charcoal-90"), do: "bg-charcoal-90"
 end

lib/dotcom_web/live/schedule_finder_live.ex

@@ -840,17 +840,34 @@ defmodule DotcomWeb.ScheduleFinderLive do
               class="group/details"
             >
               <summary class="cursor-pointer bg-charcoal-90">
-                <.lined_list_item route={upcoming_departure.route} variant="none">
+                <.lined_list_item
+                  background="charcoal-90"
+                  class="group-open/details:hidden"
+                  route={upcoming_departure.route}
+                  variant="squiggle"
+                >
                   <div class="grow">
-                    <span class="text-[0.75rem] underline group-open/details:hidden">
+                    <span class="text-[0.75rem] underline">
                       {~t"Show more stops"}
                     </span>
-                    <span class="text-[0.75rem] underline hidden group-open/details:block">
+                  </div>
+                  <div class="shrink-0">
+                    <.icon name="chevron-down" class="h-3 w-3" />
+                  </div>
+                </.lined_list_item>
+                <.lined_list_item
+                  background="charcoal-90"
+                  class="hidden group-open/details:flex"
+                  route={upcoming_departure.route}
+                  variant="none"
+                >
+                  <div class="grow">
+                    <span class="text-[0.75rem] underline">
                       {~t"Show fewer stops"}
                     </span>
                   </div>
                   <div class="shrink-0">
-                    <.icon name="chevron-down" class="h-3 w-3 group-open/details:rotate-180" />
+                    <.icon name="chevron-down" class="h-3 w-3 rotate-180" />
                   </div>
                 </.lined_list_item>
               </summary>

mix.exs

@@ -127,7 +127,6 @@ defmodule DotCom.Mixfile do
       {:logster, "1.1.1"},
       # reverted from 0.4
       {:mail, "0.3.1"},
-      # {:mbta_metro, path: "../mbta_metro", runtime: false},
       {:mbta_metro, "1.1.2", runtime: false},
       {:mock, "0.3.9", [only: :test]},
       {:mox, "1.2.0", [only: [:dev, :test]]},