Support CMS Fare Card links and nested links (#186)

mbta · Sep 3, 2019 · a57c424 · a57c424
1 parent 6673799
commit a57c424
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 42 deletions.
diff --git a/apps/cms/lib/partial/paragraph/fare_card.ex b/apps/cms/lib/partial/paragraph/fare_card.ex
@@ -3,8 +3,9 @@ defmodule CMS.Partial.Paragraph.FareCard do
   Represents a Fare Card paragraph type from the CMS.
   """
 
+  import CMS.Helpers, only: [field_value: 2, parse_link: 2]
+
   alias CMS.Field.Link
-  alias CMS.Helpers
   alias CMS.Partial.Paragraph.CustomHTML
 
   defstruct fare_token: "",
@@ -26,15 +27,15 @@ defmodule CMS.Partial.Paragraph.FareCard do
       %__MODULE__{
         fare_token: fare_token,
         note: note,
-        link: nil,
-        show_media: Helpers.field_value(data, "field_fare_media")
+        link: parse_link(data, "field_card_link"),
+        show_media: field_value(data, "field_fare_media")
       }
     end
   end
 
   defp fare_token(data) do
     data
-    |> Helpers.field_value("field_fare_request")
+    |> field_value("field_fare_request")
     |> parse_token()
   end
 

diff --git a/apps/site/assets/css/_fare-card.scss b/apps/site/assets/css/_fare-card.scss
@@ -43,8 +43,11 @@ $fare-card-icon-offset: 1.375 * $base-spacing;
 
   &--linked {
     @extend %button-focus-color;
-    color: $black;
-    display: block;
+
+    .u-linked-card__primary-link {
+      color: $black;
+      text-decoration: none;
+    }
   }
 
   &--subway {

diff --git a/apps/site/assets/css/_utilities.scss b/apps/site/assets/css/_utilities.scss
@@ -160,13 +160,12 @@
       position: absolute;
       right: 0;
       top: 0;
+      z-index: 1;
     }
   }
 
-  &__secondary-link {
-    left: -$base-spacing / 2;
-    padding: $base-spacing / 2;
+  a:not(&__primary-link) {
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
 }
diff --git a/apps/site/lib/site_web/templates/cms/paragraph/_fare_card.html.eex b/apps/site/lib/site_web/templates/cms/paragraph/_fare_card.html.eex
@@ -11,9 +11,11 @@
     _ -> Fares.Format.name(fare)
   end
 
-  display_duration? = case fare do
-    %Fares.Summary{} -> false
-    _ -> true
+  duration_fn = fn f -> f |> Map.put(:media, []) |> Fares.Format.duration() end
+
+  duration = case fare do
+    %Fares.Summary{} -> []
+    _ -> [" ", content_tag(:span, duration_fn.(fare), class: "c-fare-card__duration")]
   end
 
   price = case fare do
@@ -38,22 +40,21 @@
   card_classes =
     ["c-fare-card", "single", CSSHelpers.atom_to_class(mode), link_class]
     |> Enum.intersperse(" c-fare-card--")
+
+  card_title = [content_tag(:span, name, class: "c-fare-card__mode"), duration]
 %>
 
-<%= content_tag @element.tag, Keyword.put(@element.attrs, :class, card_classes) do %>
+<%= content_tag :div, class: card_classes do %>
 
   <div class="c-fare-card__icon">
     <%= mode_icon(mode, :default) %>
   </div>
 
   <h3 class="c-fare-card__name">
-    <span class="c-fare-card__mode">
-      <%= name %>
-    </span>
-    <%= if display_duration? do %>
-      <span class="c-fare-card__duration">
-        <%= fare |> Map.put(:media, []) |> Fares.Format.duration() %>
-      </span>
+    <%= if @fare_card.link do %>
+      <%= link card_title, to: @fare_card.link.url, class: "u-linked-card__primary-link" %>
+    <% else %>
+      <%= card_title %>
     <% end %>
   </h3>
 

diff --git a/apps/site/lib/site_web/templates/cms/paragraph/_grouped_fare_card.html.eex b/apps/site/lib/site_web/templates/cms/paragraph/_grouped_fare_card.html.eex
@@ -13,24 +13,29 @@
   card_classes =
     ["c-fare-card", "grouped", CSSHelpers.atom_to_class(group_fare.mode), link_class]
     |> Enum.intersperse(" c-fare-card--")
+
+  card_title = [
+    content_tag(:span, Fares.Format.name(group_fare), class: "c-fare-card__mode"), " ",
+    content_tag(:span, Fares.Format.duration(group_fare), class: "c-fare-card__duration")
+  ]
+
 %>
 
 <%= extend_width :cards do %>
 
-  <%= content_tag @element.tag, Keyword.put(@element.attrs, :class, card_classes) do %>
+  <%= content_tag :div, class: card_classes do %>
 
     <div class="c-fare-card__header">
       <div class="c-fare-card__icon">
         <%= mode_icon(group_fare.mode, :default) %>
       </div>
 
       <h3 class="c-fare-card__name">
-        <span class="c-fare-card__mode">
-          <%= Fares.Format.name(group_fare) %>
-        </span>
-        <span class="c-fare-card__duration">
-          <%= Fares.Format.duration(group_fare) %>
-        </span>
+        <%= if group_fare_card.link do %>
+          <%= link card_title, to: group_fare_card.link.url, class: "u-linked-card__primary-link" %>
+        <% else %>
+          <%= card_title %>
+        <% end %>
       </h3>
     </div>
 

diff --git a/apps/site/lib/site_web/views/helpers/cms_helpers.ex b/apps/site/lib/site_web/views/helpers/cms_helpers.ex
@@ -33,12 +33,7 @@ defmodule SiteWeb.CMSHelpers do
   """
   @spec link_category(String.t()) :: String.t() | Phoenix.HTML.safe()
   def link_category("Projects" = text) do
-    link(
-      text,
-      to: "/projects",
-      title: "View all #{text}",
-      class: "u-linked-card__secondary-link"
-    )
+    link(text, to: "/projects", title: "View all #{text}")
   end
 
   def link_category(text), do: text

diff --git a/apps/site/lib/site_web/views/paragraph_view.ex b/apps/site/lib/site_web/views/paragraph_view.ex
@@ -52,12 +52,9 @@ defmodule SiteWeb.CMS.ParagraphView do
       |> nested_paragraphs()
       |> grouped_fare_card_data()
 
-    group_fare = List.first(fare_cards)
-
     render(
       "_grouped_fare_card.html",
       fare_cards: fare_cards,
-      element: fare_card_element(group_fare.link),
       conn: conn
     )
   end
@@ -66,7 +63,6 @@ defmodule SiteWeb.CMS.ParagraphView do
     render(
       "_fare_card.html",
       fare_card: paragraph,
-      element: fare_card_element(paragraph.link),
       conn: conn
     )
   end
@@ -162,10 +158,6 @@ defmodule SiteWeb.CMS.ParagraphView do
     nil
   end
 
-  @spec fare_card_element(Link.t() | nil) :: map
-  defp fare_card_element(%Link{url: url}), do: %{tag: :a, attrs: [href: url]}
-  defp fare_card_element(nil), do: %{tag: :div, attrs: []}
-
   @spec paragraph_classes(Paragraph.t()) :: iodata()
   defp paragraph_classes(%Callout{image: %Image{}}), do: ["c-callout--with-image"]
   defp paragraph_classes(_), do: []