ui(TripPlanner): Make <.itinerary_detail /> more closely match final …

…designs (#2275)

Co-authored-by: Cristen Jones <[email protected]>

lib/dotcom_web/components/trip_planner/itinerary_detail.ex

@@ -6,7 +6,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
 
   use DotcomWeb, :component
 
-  import DotcomWeb.Components.TripPlanner.Place
+  import DotcomWeb.Components.TripPlanner.StartOrEndPlace
   import DotcomWeb.Components.TripPlanner.TransitLeg, only: [transit_leg: 1]
   import DotcomWeb.Components.TripPlanner.WalkingLeg, only: [walking_leg: 1]
 
@@ -95,7 +95,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
       |> assign(:place, place)
 
     ~H"""
-    <.place place={@place} time={@time} />
+    <.start_or_end_place place={@place} time={@time} />
     """
   end
 

lib/dotcom_web/components/trip_planner/place.ex

@@ -5,69 +5,52 @@ defmodule DotcomWeb.Components.TripPlanner.Place do
 
   use DotcomWeb, :component
 
-  import DotcomWeb.Components.TripPlanner.AlertGroup, only: [alert_group: 1]
-
-  alias Routes.Route
-  alias Stops.Stop
-
-  attr :place, :map, required: true
+  attr :accessible, :boolean, default: false
+  attr :name, :string, required: true
   attr :time, :any, required: true
-  attr :route, :map, default: nil
-  attr :alerts, :list, default: []
+  attr :url, :string, default: nil
+  slot :icon
 
   def place(assigns) do
-    stop_url = stop_url(assigns.route, assigns.place.stop)
-
-    assigns =
-      assign(assigns, %{
-        stop_url: stop_url,
-        tag_name: if(stop_url, do: "a", else: "div")
-      })
-
     ~H"""
-    <div class="bg-gray-bordered-background px-3 py-2 rounded-lg grid grid-cols-[1.5rem_auto_1fr] items-center gap-x-2 w-full">
-      <.location_icon route={@route} class="h-6 w-6" />
-      <.dynamic_tag class="hover:no-underline text-black" tag_name={@tag_name} href={@stop_url}>
-        <strong class="flex items-center gap-2">
-          {@place.name}
+    <div class="flex items-stretch gap-x-3">
+      <div class="flex flex-col items-center">
+        {render_slot(@icon)}
+      </div>
+
+      <.wrap_with_url url={@url}>
+        <strong class="text-sm">
+          {@name}
           <.icon
-            :if={!is_nil(@place.stop) and Stop.accessible?(@place.stop)}
+            :if={@accessible}
             type="icon-svg"
             name="icon-accessible-default"
-            class="h-5 w-5 ml-0.5 shrink-0"
+            class="h-3 w-3 shrink-0 ml-1.5"
             aria-hidden="true"
           />
         </strong>
-      </.dynamic_tag>
-      <time class="text-right no-wrap">{format_time(@time)}</time>
-      <.alert_group class="col-start-2 col-end-4 mr-4" alerts={@alerts} />
+      </.wrap_with_url>
+
+      <time class="ml-auto text-right text-sm text-nowrap">{format_time(@time)}</time>
     </div>
     """
   end
 
-  defp stop_url(%Route{external_agency_name: nil}, %Stop{} = stop) do
-    ~p"/stops/#{stop}"
-  end
-
-  defp stop_url(_, _), do: nil
-
-  defp location_icon(%{route: %Route{}} = assigns) do
-    icon_name =
-      if(Routes.Route.type_atom(assigns.route) in [:bus, :logan_express, :massport_shuttle],
-        do: "icon-stop-default",
-        else: "icon-circle-t-default"
-      )
-
-    assigns = assign(assigns, :icon_name, icon_name)
+  attr :url, :string, required: true
+  slot :inner_block
+  defp wrap_with_url(assigns)
 
+  defp wrap_with_url(%{url: nil} = assigns) do
     ~H"""
-    <.icon type="icon-svg" class={@class} name={@icon_name} />
+    {render_slot(@inner_block)}
     """
   end
 
-  defp location_icon(assigns) do
+  defp wrap_with_url(assigns) do
     ~H"""
-    <.icon class={"#{@class} fill-brand-primary"} name="location-dot" />
+    <a class="hover:no-underline text-black leading-5" href={@url} target="_blank">
+      {render_slot(@inner_block)}
+    </a>
     """
   end
 

lib/dotcom_web/components/trip_planner/start_or_end_place.ex

@@ -0,0 +1,29 @@
+defmodule DotcomWeb.Components.TripPlanner.StartOrEndPlace do
+  @moduledoc """
+  A component to display a specific location in the itinerary detail.
+  """
+
+  use DotcomWeb, :component
+
+  import DotcomWeb.Components.TripPlanner.Place, only: [place: 1]
+
+  alias Routes.Route
+  alias Stops.Stop
+
+  attr :place, :map, required: true
+  attr :time, :any, required: true
+  attr :route, :map, default: nil
+  attr :alerts, :list, default: []
+
+  def start_or_end_place(assigns) do
+    ~H"""
+    <div class="bg-gray-bordered-background rounded-lg p-3">
+      <.place name={@place.name} time={@time}>
+        <:icon>
+          <.icon name="location-dot" class="fill-brand-primary h-5 w-5" />
+        </:icon>
+      </.place>
+    </div>
+    """
+  end
+end