From 2937f0b1618fe27ac589e1a1e7aa26696eb3868d Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Fri, 27 Mar 2026 10:43:07 -0400 Subject: [PATCH 1/5] feat(SF2.0): Add The Squiggle for collapsed trip details --- lib/dotcom_web/components/route_components.ex | 23 ++++++++++- lib/dotcom_web/live/schedule_finder_live.ex | 25 ++++++++++-- mix.exs | 7 +++- mix.lock | 2 +- priv/static/icon-svg/icon-squiggle.svg | 38 +++++++++++++++++++ 5 files changed, 86 insertions(+), 9 deletions(-) create mode 100644 priv/static/icon-svg/icon-squiggle.svg diff --git a/lib/dotcom_web/components/route_components.ex b/lib/dotcom_web/components/route_components.ex index e0fc0643a3..8ce13116d2 100644 --- a/lib/dotcom_web/components/route_components.ex +++ b/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""" +
+ +
+ """ + end + defp lined_list_marker(assigns) do ~H"""
- <.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" + >
- + {~t"Show more stops"} -
+
+ <.icon name="chevron-down" class="h-3 w-3" /> +
+ + <.lined_list_item + background="charcoal-90" + class="hidden group-open/details:flex" + route={upcoming_departure.route} + variant="none" + > +
+ {~t"Show fewer stops"}
- <.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" />
diff --git a/mix.exs b/mix.exs index ba5e9d40ca..00f2f10893 100644 --- a/mix.exs +++ b/mix.exs @@ -127,8 +127,11 @@ 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}, + {:mbta_metro, + github: "mbta/mbta_metro", + branch: "jdl/feat/set-stroke-color-on-mbta-route-classes", + runtime: false}, + # {:mbta_metro, "1.1.2", runtime: false}, {:mock, "0.3.9", [only: :test]}, {:mox, "1.2.0", [only: [:dev, :test]]}, {:msgpack, "0.8.1"}, diff --git a/mix.lock b/mix.lock index cd2c11b899..b9e562d752 100644 --- a/mix.lock +++ b/mix.lock @@ -81,7 +81,7 @@ "makeup_elixir": {:hex, :makeup_elixir, "1.0.1", "e928a4f984e795e41e3abd27bfc09f51db16ab8ba1aebdba2b3a575437efafc2", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "7284900d412a3e5cfd97fdaed4f5ed389b8f2b4cb49efc0eb3bd10e2febf9507"}, "makeup_erlang": {:hex, :makeup_erlang, "1.0.3", "4252d5d4098da7415c390e847c814bad3764c94a814a0b4245176215615e1035", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "953297c02582a33411ac6208f2c6e55f0e870df7f80da724ed613f10e6706afd"}, "makeup_html": {:hex, :makeup_html, "0.2.0", "9f810da8d43d625ccd3f7ea25997e588fa541d80e0a8c6b895157ad5c7e9ca13", [:mix], [{:makeup, "~> 1.2", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "0856f7beb9a6a642ab1307e06d990fe39f0ba58690d0b8e662aa2e027ba331b2"}, - "mbta_metro": {:hex, :mbta_metro, "1.1.2", "c1388da300ca39ab01a147e6a634eaed4ad8180ea0d1c88687cb9b2df16622d4", [:mix], [{:cva, "~> 0.2", [hex: :cva, repo: "hexpm", optional: false]}, {:esbuild, "~> 0.10", [hex: :esbuild, repo: "hexpm", optional: false]}, {:floki, "~> 0.38", [hex: :floki, repo: "hexpm", optional: false]}, {:gettext, "~> 1.0", [hex: :gettext, repo: "hexpm", optional: false]}, {:heroicons, "~> 0.5", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.8", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.1", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "~> 0.9", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:tailwind, "~> 0.3", [hex: :tailwind, repo: "hexpm", optional: false]}], "hexpm", "a3885e8bcb6f8aefa85691536e13ce852376af39756d6e49cc823f3cc78daf29"}, + "mbta_metro": {:git, "https://github.com/mbta/mbta_metro.git", "8198466bf2b4651e2a913e66c4b32a9860172a7b", [branch: "jdl/feat/set-stroke-color-on-mbta-route-classes"]}, "meck": {:hex, :meck, "0.9.2", "85ccbab053f1db86c7ca240e9fc718170ee5bda03810a6292b5306bf31bae5f5", [:rebar3], [], "hexpm", "81344f561357dc40a8344afa53767c32669153355b626ea9fcbc8da6b3045826"}, "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"}, "mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"}, diff --git a/priv/static/icon-svg/icon-squiggle.svg b/priv/static/icon-svg/icon-squiggle.svg new file mode 100644 index 0000000000..4c363b5eed --- /dev/null +++ b/priv/static/icon-svg/icon-squiggle.svg @@ -0,0 +1,38 @@ + + + + + + From 04c978d590421529ec371df920f88653af46a12a Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Tue, 7 Apr 2026 15:18:40 -0400 Subject: [PATCH 2/5] fix: Don't rely on `mbta_metro` change that messes up other icons --- assets/tailwind.config.js | 2 +- lib/css_helpers.ex | 22 +++++++++++++++++++ lib/dotcom_web/components/route_components.ex | 2 +- mix.exs | 6 +---- mix.lock | 2 +- 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index bc3b00e1fb..fbcaad853e 100644 --- a/assets/tailwind.config.js +++ b/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|ferry|commuter-rail)-.*/ } ], theme: { diff --git a/lib/css_helpers.ex b/lib/css_helpers.ex index 67fcdd1be1..e7e3e5adf7 100644 --- a/lib/css_helpers.ex +++ b/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 diff --git a/lib/dotcom_web/components/route_components.ex b/lib/dotcom_web/components/route_components.ex index 8ce13116d2..d77af6bd1a 100644 --- a/lib/dotcom_web/components/route_components.ex +++ b/lib/dotcom_web/components/route_components.ex @@ -161,7 +161,7 @@ defmodule DotcomWeb.RouteComponents do defp lined_list_marker(%{variant: "squiggle"} = assigns) do ~H"""
1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "7284900d412a3e5cfd97fdaed4f5ed389b8f2b4cb49efc0eb3bd10e2febf9507"}, "makeup_erlang": {:hex, :makeup_erlang, "1.0.3", "4252d5d4098da7415c390e847c814bad3764c94a814a0b4245176215615e1035", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "953297c02582a33411ac6208f2c6e55f0e870df7f80da724ed613f10e6706afd"}, "makeup_html": {:hex, :makeup_html, "0.2.0", "9f810da8d43d625ccd3f7ea25997e588fa541d80e0a8c6b895157ad5c7e9ca13", [:mix], [{:makeup, "~> 1.2", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "0856f7beb9a6a642ab1307e06d990fe39f0ba58690d0b8e662aa2e027ba331b2"}, - "mbta_metro": {:git, "https://github.com/mbta/mbta_metro.git", "8198466bf2b4651e2a913e66c4b32a9860172a7b", [branch: "jdl/feat/set-stroke-color-on-mbta-route-classes"]}, + "mbta_metro": {:hex, :mbta_metro, "1.1.2", "c1388da300ca39ab01a147e6a634eaed4ad8180ea0d1c88687cb9b2df16622d4", [:mix], [{:cva, "~> 0.2", [hex: :cva, repo: "hexpm", optional: false]}, {:esbuild, "~> 0.10", [hex: :esbuild, repo: "hexpm", optional: false]}, {:floki, "~> 0.38", [hex: :floki, repo: "hexpm", optional: false]}, {:gettext, "~> 1.0", [hex: :gettext, repo: "hexpm", optional: false]}, {:heroicons, "~> 0.5", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.8", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.1", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "~> 0.9", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:tailwind, "~> 0.3", [hex: :tailwind, repo: "hexpm", optional: false]}], "hexpm", "a3885e8bcb6f8aefa85691536e13ce852376af39756d6e49cc823f3cc78daf29"}, "meck": {:hex, :meck, "0.9.2", "85ccbab053f1db86c7ca240e9fc718170ee5bda03810a6292b5306bf31bae5f5", [:rebar3], [], "hexpm", "81344f561357dc40a8344afa53767c32669153355b626ea9fcbc8da6b3045826"}, "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"}, "mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"}, From b2774f832d753f37807abd4c643619b798ec0d76 Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Tue, 7 Apr 2026 15:21:36 -0400 Subject: [PATCH 3/5] fix: Remove useless `stroke="fillColor"` --- priv/static/icon-svg/icon-squiggle.svg | 1 - 1 file changed, 1 deletion(-) diff --git a/priv/static/icon-svg/icon-squiggle.svg b/priv/static/icon-svg/icon-squiggle.svg index 4c363b5eed..eb1fc87e07 100644 --- a/priv/static/icon-svg/icon-squiggle.svg +++ b/priv/static/icon-svg/icon-squiggle.svg @@ -22,7 +22,6 @@ /> Date: Tue, 7 Apr 2026 15:30:58 -0400 Subject: [PATCH 4/5] fix: Syntax goof --- assets/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index fbcaad853e..506eb902d7 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -57,7 +57,7 @@ module.exports = { ], safelist: [ { - pattern: /(bg|text|border|ring|stroke)-(logan-express|blue|green|orange|red|silver|bus|ferry|commuter-rail)-.*/ + pattern: /(bg|text|border|ring|stroke)-(logan-express|blue|green|orange|red|silver|bus|ferry|commuter-rail).*/ } ], theme: { From 8e98c3ce3a1c81fe6021dbd6684256b1f9e6f877 Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Wed, 8 Apr 2026 11:58:29 -0400 Subject: [PATCH 5/5] fix: Make `stroke-brand-bus` work --- assets/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 506eb902d7..10b83e1573 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -57,7 +57,7 @@ module.exports = { ], safelist: [ { - pattern: /(bg|text|border|ring|stroke)-(logan-express|blue|green|orange|red|silver|bus|ferry|commuter-rail).*/ + pattern: /(bg|text|border|ring|stroke)-(logan-express|blue|green|orange|red|silver|bus|brand-bus|ferry|commuter-rail).*/ } ], theme: {