Merge pull request #3614 from alphagov/start_newbrowse_test

NewBrowse AB test list view

app/assets/stylesheets/views/_browse.scss

@@ -1,4 +1,5 @@
 @import "govuk_publishing_components/individual_component_support";
+@import "govuk_publishing_components/components/mixins/prefixed-transform";
 
 // This dark grey is the background colour for the browse pages.
 //
@@ -86,4 +87,76 @@ $browse-header-background-colour: #263135;
   @include govuk-media-query($from: "tablet") {
     margin-bottom: govuk-spacing(6);
   }
-}
+}
+
+// chevron-card added from `frontend` for A/B testing
+.browse__chevron-cards {
+  list-style: none;
+  padding: 0;
+  margin-top: 0;
+}
+
+.chevron-card {
+  border-top: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(1) 0 govuk-spacing(4);
+
+  &:last-child {
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+}
+
+.chevron-card__wrapper {
+  padding: 19px 0 4px;
+  position: relative;
+
+  .govuk-heading-s,
+  .chevron-card__description {
+    margin: 0 govuk-spacing(6) 0 0;
+
+    // Ensure card content width is constrained to two thirds on desktop
+    @include govuk-media-query($from: "desktop") {
+      max-width: 66.6667%;
+    }
+  }
+}
+
+.chevron-card__link {
+  &::after {
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &::before {
+    $dimension: 7px;
+    $width: 3px;
+
+    border-right: $width solid $govuk-brand-colour;
+    border-top: $width solid $govuk-brand-colour;
+    content: "";
+    display: block;
+    height: $dimension;
+    position: absolute;
+    right: govuk-spacing(1);
+    top: 50%;
+    margin-top: 5px;
+    @include prefixed-transform($rotate: 45deg);
+    width: $dimension;
+  }
+
+  &:hover {
+    &::before {
+      border-color: $govuk-link-hover-colour;
+    }
+  }
+
+  &:focus {
+    &::before {
+      border-color: $govuk-focus-text-colour;
+    }
+  }
+}

app/controllers/browse_controller.rb

@@ -1,4 +1,5 @@
 class BrowseController < ApplicationController
+  include NewBrowseAbTestable
   slimmer_template "gem_layout_full_width"
 
   def index
@@ -20,6 +21,8 @@ def show
 
 private
 
+  helper_method :new_browse_variant_b?
+
   def show_html(page)
     template = :show
     render template, locals: { page: }

app/controllers/new_browse_ab_testable.rb

@@ -22,7 +22,7 @@ def set_new_browse_response_header
   end
 
   def new_browse_variant_b?
-    page_under_test? && new_browse_variant.variant?("B")
+    new_browse_page_under_test? && new_browse_variant.variant?("B")
   end
 
   def new_browse_page_under_test?

app/views/browse/_browse_grid.html.erb

@@ -0,0 +1,30 @@
+<% total_links = page.second_level_browse_pages.count.to_s %>
+<%= render "govuk_publishing_components/components/cards", {
+  items: page.second_level_browse_pages.map.with_index do |second_level_browse_page, index|
+    {
+      link: {
+        text: second_level_browse_page.title,
+        path: second_level_browse_page.base_path,
+        data_attributes: {
+          track_category: "browseClicked",
+          track_action: "topicsLink",
+          track_label: second_level_browse_page.base_path,
+          track_dimension: second_level_browse_page.title,
+          track_options: {
+            dimension28: total_links,
+            dimension29: second_level_browse_page.title,
+            dimension114: index + 1,
+          },
+          ga4_link: {
+            event_name: "navigation",
+            type: "browse card",
+            index_link: index + 1,
+            index_total: total_links,
+          },
+        },
+      },
+      description: second_level_browse_page.description,
+    }
+  end,
+  sub_heading_level: display_action_links_for_slug?(page.slug) ? 3 : 2,
+} %>

app/views/browse/_browse_list.html.erb

@@ -0,0 +1,28 @@
+<% total_links = page.second_level_browse_pages.count.to_s %>
+<ul class="browse__chevron-cards">
+  <% page.second_level_browse_pages.map.with_index do |second_level_browse_page, index| %>
+    <%= render partial: "browse/chevron_card", locals: {
+      title: second_level_browse_page.title,
+      link: second_level_browse_page.base_path,
+      description: second_level_browse_page.description,
+      sub_heading_level: display_action_links_for_slug?(page.slug) ? 3 : 2,
+      data_attributes: {
+        track_category: "browseClicked",
+        track_action: "topicsLink",
+        track_label: second_level_browse_page.base_path,
+        track_dimension: second_level_browse_page.title,
+        track_options: {
+          dimension28: total_links,
+          dimension29: second_level_browse_page.title,
+          dimension114: index + 1,
+        },
+        ga4_link: {
+          event_name: "navigation",
+          type: "browse card",
+          index_link: index + 1,
+          index_total: total_links,
+        },
+      },
+    } %>
+  <% end %>
+</ul>

app/views/browse/_chevron_card.html.erb

@@ -0,0 +1,22 @@
+<%
+  element ||= :li
+
+  link = capture do
+    link_to(raw(title), link, {
+      class: "govuk-link chevron-card__link",
+      data: data_attributes,
+    })
+  end
+%>
+
+<%= content_tag(element, class: "chevron-card") do %>
+  <div class="chevron-card__wrapper">
+    <%= render("govuk_publishing_components/components/heading", {
+      text: link,
+      font_size: "s",
+      heading_level: sub_heading_level,
+      margin_bottom: 2,
+    }) %>
+    <p class="govuk-body chevron-card__description"><%= raw(description) %></p>
+  </div>
+<% end %>

app/views/browse/show.html.erb

@@ -60,35 +60,10 @@
   </div>
 <% end %>
 
-<% total_links = page.second_level_browse_pages.count.to_s %>
 <%= render "shared/browse_cards_container" do %>
-  <%= render "govuk_publishing_components/components/cards", {
-    items: page.second_level_browse_pages.map.with_index do |second_level_browse_page, index|
-      {
-        link: {
-          text: second_level_browse_page.title,
-          path: second_level_browse_page.base_path,
-          data_attributes: {
-            track_category: "browseClicked",
-            track_action: "topicsLink",
-            track_label: second_level_browse_page.base_path,
-            track_dimension: second_level_browse_page.title,
-            track_options: {
-              dimension28: total_links,
-              dimension29: second_level_browse_page.title,
-              dimension114: index + 1,
-            },
-            ga4_link: {
-              event_name: "navigation",
-              type: "browse card",
-              index_link: index + 1,
-              index_total: total_links,
-            },
-          },
-        },
-        description: second_level_browse_page.description,
-      }
-    end,
-    sub_heading_level: display_action_links_for_slug?(page.slug) ? 3 : 2,
-  } %>
+  <% if new_browse_variant_b? %>
+    <%= render partial: "browse/browse_list", locals: { page: page } %>
+  <% else %>
+    <%= render partial: "browse/browse_grid", locals: { page: page } %>
+  <% end %>
 <% end %>

spec/controllers/browse_controller_spec.rb

@@ -50,11 +50,21 @@
       context "NewBrowse AB test" do
         subject { get :show, params: { top_level_slug: "benefits" } }
 
-        %w[A B Z].each do |variant|
-          it "with variant #{variant}" do
-            with_variant NewBrowse: variant do
-              expect(subject).to render_template(:show)
-            end
+        it "with variant A" do
+          with_variant NewBrowse: "A" do
+            expect(subject).to render_template(partial: "_browse_grid")
+          end
+        end
+
+        it "with variant B" do
+          with_variant NewBrowse: "B" do
+            expect(subject).to render_template(partial: "_browse_list")
+          end
+        end
+
+        it "with variant Z" do
+          with_variant NewBrowse: "Z" do
+            expect(subject).to render_template(partial: "_browse_grid")
           end
         end
       end