From 7b95f4b5d954c9e941d7f80604d934fe3af7d7c0 Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Thu, 20 Feb 2025 12:03:51 -0500 Subject: [PATCH 1/3] refactor(Components.Alerts): enhanced embedded_alert --- lib/dotcom_web/components/alerts.ex | 60 +++++++++++++++++++---------- lib/dotcom_web/views/alert_view.ex | 10 ++--- 2 files changed, 44 insertions(+), 26 deletions(-) diff --git a/lib/dotcom_web/components/alerts.ex b/lib/dotcom_web/components/alerts.ex index fa6aa06b30..36b96eef86 100644 --- a/lib/dotcom_web/components/alerts.ex +++ b/lib/dotcom_web/components/alerts.ex @@ -8,34 +8,52 @@ defmodule DotcomWeb.Components.Alerts do alias Alerts.Alert alias DotcomWeb.AlertView + @date_time_module Application.compile_env!(:dotcom, :date_time_module) + attr :alert, Alert, required: true @doc """ An alert that is embedded within another component. It does not include header information like the time range, effect, or route. """ - def embedded_alert(assigns) do + def embedded_alert(%{alert: alert} = assigns) do + assigns = + assign( + assigns, + Map.new([:description, :header, :url], fn key -> + {key, if(Map.get(alert, key) != "", do: Map.get(alert, key))} + end) + ) + |> assign(:now, @date_time_module.now()) + |> assign(:alert_icon_type, Alerts.Alert.icon(alert)) + ~H""" -
- <%= if @alert.image do %> - {if - <% end %> - <%= if @alert.header do %> -

{AlertView.format_alert_description(@alert.header)}

- <% end %> - <%= if @alert.description do %> -
-

{AlertView.format_alert_description(@alert.description)}

- <% end %> - <%= if @alert.url do %> -
-

- For more information: {@alert.url} -

+
+
+ + {AlertView.alert_icon(@alert_icon_type)} + + {AlertView.format_alert_description(@header)} +
+ <%= if @description do %> +
+ {if + {AlertView.format_alert_description(@description)} + <%= if @url do %> +
+

+ For more information: {@url} +

+ <% end %> +
+ {AlertView.alert_updated(@alert, @now)} +
+
<% end %>
""" diff --git a/lib/dotcom_web/views/alert_view.ex b/lib/dotcom_web/views/alert_view.ex index c9d5740f71..7976e2a054 100644 --- a/lib/dotcom_web/views/alert_view.ex +++ b/lib/dotcom_web/views/alert_view.ex @@ -261,9 +261,9 @@ defmodule DotcomWeb.AlertView do def type_icon(mode), do: mode_icon(mode, :default) @spec alert_icon(Alert.icon_type()) :: Phoenix.HTML.Safe.t() - defp alert_icon(:shuttle), do: svg("icon-shuttle-default.svg") - defp alert_icon(:cancel), do: svg("icon-cancelled-default.svg") - defp alert_icon(:snow), do: svg("icon-snow-default.svg") - defp alert_icon(:alert), do: svg("icon-alerts-triangle.svg") - defp alert_icon(:none), do: "" + def alert_icon(:shuttle), do: svg("icon-shuttle-default.svg") + def alert_icon(:cancel), do: svg("icon-cancelled-default.svg") + def alert_icon(:snow), do: svg("icon-snow-default.svg") + def alert_icon(:alert), do: svg("icon-alerts-triangle.svg") + def alert_icon(:none), do: "" end From b9b5ac3f2b5350afccd1cfd878a36ea61e36b77c Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Thu, 20 Feb 2025 00:27:49 -0500 Subject: [PATCH 2/3] fixup(Components.PlannedDisruptions): consistent UI --- lib/dotcom_web/components/components.ex | 8 +++++--- lib/dotcom_web/components/planned_disruptions.ex | 12 ++++++++---- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/lib/dotcom_web/components/components.ex b/lib/dotcom_web/components/components.ex index 3ceabeef92..f4b2c385ac 100644 --- a/lib/dotcom_web/components/components.ex +++ b/lib/dotcom_web/components/components.ex @@ -196,14 +196,14 @@ defmodule DotcomWeb.Components do slot(:content, required: true) slot(:heading, required: true) - attr(:class, :string, default: "Class names applied to the underlying
element.") + attr(:class, :string, default: "") attr(:summary_class, :string, default: "", doc: "Class names applied to the underlying element." ) - attr(:chevron_class, :string, default: "Class names applied to the chevron icon.") + attr(:chevron_class, :string, default: "") attr(:rest, :global) @doc """ @@ -221,7 +221,9 @@ defmodule DotcomWeb.Components do
{render_slot(@heading)} - <.icon name="chevron-down" class={"#{@chevron_class} shrink-0 group-open:rotate-180"} /> +
+ <.icon name="chevron-down" class="h-3 w-3 group-open:rotate-180" /> +
{render_slot(@content)}
diff --git a/lib/dotcom_web/components/planned_disruptions.ex b/lib/dotcom_web/components/planned_disruptions.ex index e2935f33de..c363462d89 100644 --- a/lib/dotcom_web/components/planned_disruptions.ex +++ b/lib/dotcom_web/components/planned_disruptions.ex @@ -36,8 +36,8 @@ defmodule DotcomWeb.Components.PlannedDisruptions do defp disruption(assigns) do ~H""" <.unstyled_accordion - summary_class="flex gap-sm p-2 items-center hover:bg-slate-600 focus:bg-slate-600 hover:text-white focus:text-white cursor-pointer group/row" - chevron_class="ml-auto mr-2 w-3 h-3" + summary_class="flex items-center hover:bg-brand-primary-lightest cursor-pointer group/row" + chevron_class="fill-gray-lighter px-2 py-3" > <:heading> <.heading alert={@alert} /> @@ -59,8 +59,12 @@ defmodule DotcomWeb.Components.PlannedDisruptions do assigns = assign(assigns, route_ids: route_ids, time_range_str: time_range_str) ~H""" - <.subway_route_pill route_ids={@route_ids} class="group-hover/row:ring-slate-600" /> - <.status_label status={@alert.effect} prefix={@time_range_str} /> +
+ <.subway_route_pill route_ids={@route_ids} class="group-hover/row:ring-brand-primary-lightest" /> +
+
+ <.status_label status={@alert.effect} prefix={@time_range_str} /> +
""" end From b9e9a3fc69c200221c69aa6972f1195f30bb5d8c Mon Sep 17 00:00:00 2001 From: Cristen Jones Date: Thu, 20 Feb 2025 12:18:48 -0500 Subject: [PATCH 3/3] fix(RouteSymbols): don't translate the route abbreviation --- lib/dotcom_web/components/route_symbols.ex | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/dotcom_web/components/route_symbols.ex b/lib/dotcom_web/components/route_symbols.ex index 1b371370bf..e7e48b7943 100644 --- a/lib/dotcom_web/components/route_symbols.ex +++ b/lib/dotcom_web/components/route_symbols.ex @@ -203,7 +203,7 @@ defmodule DotcomWeb.Components.RouteSymbols do @class, "w-[3.125rem] h-6 rounded-full ring-2 ring-white", "flex items-center justify-center", - "text-white font-bold font-heading leading-none" + "text-white font-bold font-heading leading-none notranslate" ]}> {@route_abbreviation}