Add banner to the taxonomy navigation

app/assets/stylesheets/helpers/_taxonomy-navigation.scss

@@ -5,6 +5,14 @@
   border-top: 2px solid $govuk-blue;
 }
 
+.taxonomy-navigation__banner {
+  @include core-19;
+
+  padding: $gutter-half $gutter-half $gutter-one-third;
+  background: $grey-4;
+  border: 1px solid $border-colour;
+}
+
 .taxonomy-navigation__row {
   display: flex;
   flex-wrap: wrap;

app/controllers/content_items_controller.rb

@@ -89,6 +89,22 @@ def load_taxonomy_navigation
                                .yield_self { |document_collections| document_collections || [] }
                                .select { |document_collection| document_collection['document_type'] == 'document_collection' }
                                .map { |document_collection| document_collection.values_at('base_path', 'title') }
+
+      # Fetch link attributes of parent step by steps required to render the top navigation banner
+      @banner_items = @content_item
+                        .content_item
+                        .dig('links', 'part_of_step_navs')
+                        .yield_self { |part_of_step_navs| part_of_step_navs || [] }
+                        .sort_by { |step_by_step_nav| step_by_step_nav['title'] }
+                        .map { |step_by_step_nav| step_by_step_nav.values_at('title', 'base_path') }
+
+      # Append link attributes of parent taxons to our collections of items for the top navigation banner if the
+      # content item is tagged to more than one taxon. If their is only one taxon a breadcrumb will be used instead.
+      if taxons.many?
+        @banner_items += taxons
+                           .sort_by { |taxon| taxon[:taxon_name] }
+                           .map { |taxon| taxon.values_at('title', 'base_path') }
+      end
     end
   end
 

app/views/layouts/application.html.erb

@@ -38,8 +38,50 @@
 
     <% if @content_item.try(:back_link) %>
       <%= render 'govuk_publishing_components/components/back_link', href: @content_item.back_link %>
-    <% else %>
-      <%= render 'govuk_publishing_components/components/contextual_breadcrumbs', content_item: @content_item.content_item.parsed_content, prioritise_taxon_breadcrumbs: show_new_navigation? %>
+    <% elsif show_new_navigation? %>
+      <% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(@content_item.content_item.parsed_content, request.path) %>
+
+      <% if @tagged_taxons.present? || navigation.breadcrumbs.present? %>
+        <div class='gem-c-contextual-breadcrumbs'>
+          <% if @tagged_taxons.present? %>
+            <% if @tagged_taxons.one? %>
+              <%= render 'govuk_publishing_components/components/breadcrumbs',
+                         breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
+                         collapse_on_mobile: true %>
+            <% else %>
+              <%= render 'govuk_publishing_components/components/breadcrumbs',
+                         breadcrumbs: [{ title: "Home", url: "/" }] %>
+            <% end %>
+          <% elsif navigation.breadcrumbs.present? %>
+            <%= render 'govuk_publishing_components/components/breadcrumbs',
+                       breadcrumbs: navigation.breadcrumbs %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <% if @banner_items.present? %>
+        <% banner_links = @banner_items.map { |title, path| link_to title, path } %>
+        <div class="taxonomy-navigation__banner" data-module="gem-toggle">
+          <% if @banner_items.size <= 2 %>
+            <p>This page is part of <%= banner_links.take(2).to_sentence.html_safe %></p>
+          <% else %>
+            <% featured_banner_link, *other_banner_links = banner_links %>
+            <p>
+              This page is part of <%= featured_banner_link %>
+              and <%= pluralize(other_banner_links.size, 'other') %>
+              <a href="#"
+                 data-controls="toggle_taxonomy-navigation__banner-extra"
+                 data-expanded="false"
+                 data-toggled-text="&minus; hide all">+ show all</a>
+            </p>
+            <p id="toggle_taxonomy-navigation__banner-extra" class="js-hidden">
+              <%= other_banner_links.to_sentence.html_safe %>
+            </p>
+          <% end %>
+        </div>
+      <% end %>
+    <% else  %>
+      <%= render 'govuk_publishing_components/components/contextual_breadcrumbs', content_item: @content_item.content_item.parsed_content %>
     <% end %>
 
     <main role="main" id="content" class="<%= @content_item.schema_name.dasherize %>" lang="<%= I18n.locale %>">

test/integration/content_pages_navigation_test.rb

@@ -250,16 +250,153 @@ def setup
     end
   end
 
-  test "shows taxon breadcrumbs if variant b" do
-    stub_empty_rummager
+  test "ContentPagesNav variant B when a page belongs to a single topic shows full breadcrumb" do
+    stub_rummager
     setup_variant_b
 
-    taxons = THREE_TAXONS
-    setup_and_visit_content_item_with_taxons('guide', taxons)
+    setup_and_visit_content_item_with_taxons('guide', SINGLE_TAXON)
 
     within('.gem-c-contextual-breadcrumbs') do
-      assert page.has_css?('a', text: "Home")
-      assert page.has_css?('a', text: "Becoming a wizard")
+      assert page.has_css?('a', text: 'Home')
+      assert page.has_css?('a', text: 'Becoming an apprentice')
+    end
+
+    refute page.has_css?('.taxonomy-navigation__banner')
+  end
+
+  test "ContentPagesNav variant B shows home breadcrumb when a page belongs to a two topics" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide', TWO_TAXONS)
+
+    within('.gem-c-contextual-breadcrumbs') do
+      assert page.has_css?('a', text: 'Home')
+      refute page.has_css?('a', text: 'Becoming an apprentice')
+      refute page.has_css?('a', text: 'Becoming a wizard')
+    end
+  end
+
+  test "ContentPagesNav variant B shows banner when a page belongs to two topics" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide', TWO_TAXONS)
+
+    within('.taxonomy-navigation__banner') do
+      assert page.has_content?('This page is part of Becoming an apprentice and Becoming a wizard')
+      assert page.has_css?('a', text: 'Becoming an apprentice')
+      assert page.has_css?('a', text: 'Becoming a wizard')
+    end
+  end
+
+  test "ContentPagesNav variant B shows breadcrumb when a page belongs to more than two topics" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide', THREE_TAXONS)
+
+    within('.gem-c-contextual-breadcrumbs') do
+      assert page.has_css?('a', text: 'Home')
+      refute page.has_css?('a', text: 'Becoming an apprentice')
+      refute page.has_css?('a', text: 'Becoming a wizard')
+      refute page.has_css?('a', text: 'Becoming the sorceror supreme')
+    end
+  end
+
+  test "ContentPagesNav variant B shows banner when a page belongs to more than two topics" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide', THREE_TAXONS)
+
+    within('.taxonomy-navigation__banner') do
+      assert page.has_content?('This page is part of Becoming an apprentice and 2 others + show all')
+      assert page.has_css?('a', text: 'Becoming an apprentice')
+      assert page.has_css?('a', text: 'Becoming a wizard')
+      assert page.has_css?('a', text: 'Becoming the sorceror supreme')
+    end
+  end
+
+  test "ContentPagesNav variant B shows full breadcrumb when a page belongs to a single topic and a step by step" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide-with-step-navs', SINGLE_TAXON)
+
+    within('.gem-c-contextual-breadcrumbs') do
+      assert page.has_css?('a', text: 'Home')
+      assert page.has_css?('a', text: 'Becoming an apprentice')
+    end
+  end
+
+  test "ContentPagesNav variant B shows banner when a page belongs to a single topic and a step by step" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide-with-step-navs', SINGLE_TAXON)
+
+    within('.taxonomy-navigation__banner') do
+      assert page.has_content?('This page is part of Learn to drive a car: step by step')
+      assert page.has_css?('a', text: 'Learn to drive a car: step by step')
+    end
+  end
+
+  test "ContentPagesNav variant B shows home breadcrumb when a page belongs to a two topics and a step by step" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide-with-step-navs', TWO_TAXONS)
+
+    within('.gem-c-contextual-breadcrumbs') do
+      assert page.has_css?('a', text: 'Home')
+      refute page.has_css?('a', text: 'Becoming an apprentice')
+      refute page.has_css?('a', text: 'Becoming a wizard')
+    end
+  end
+
+  test "ContentPagesNav variant B shows banner when a page belongs to two topics and a step by step" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide-with-step-navs', TWO_TAXONS)
+
+    within('.taxonomy-navigation__banner') do
+      assert page.has_content?('This page is part of Learn to drive a car: step by step and 2 others + show all')
+      assert page.has_content?('Becoming an apprentice and Becoming a wizard')
+      assert page.has_css?('a', text: 'Learn to drive a car')
+      assert page.has_css?('a', text: 'Becoming an apprentice')
+      assert page.has_css?('a', text: 'Becoming a wizard')
+    end
+  end
+
+  test "ContentPagesNav variant B shows home breadcrumb when a page belongs to more than two topics and a step by step" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide-with-step-navs', THREE_TAXONS)
+
+    within('.gem-c-contextual-breadcrumbs') do
+      assert page.has_css?('a', text: 'Home')
+      refute page.has_css?('a', text: 'Becoming an apprentice')
+      refute page.has_css?('a', text: 'Becoming a wizard')
+      refute page.has_css?('a', text: 'Becoming the sorceror supreme')
+    end
+  end
+
+  test "ContentPagesNav variant B shows banner when a page belongs to more than two topics and a step by step" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('guide-with-step-navs', THREE_TAXONS)
+
+    within('.taxonomy-navigation__banner') do
+      assert page.has_content?('This page is part of Learn to drive a car: step by step and 3 others + show all')
+      assert page.has_content?('Becoming an apprentice, Becoming a wizard, and Becoming the sorceror supreme')
+      assert page.has_css?('a', text: 'Learn to drive a car')
+      assert page.has_css?('a', text: 'Becoming an apprentice')
+      assert page.has_css?('a', text: 'Becoming a wizard')
+      assert page.has_css?('a', text: 'Becoming the sorceror supreme')
     end
   end
 

test/support/content_pages_nav_test_helper.rb

@@ -64,6 +64,25 @@ def setup_and_visit_content_from_publishing_app(publishing_app: nil)
     }
   ].freeze
 
+  TWO_TAXONS = [
+    {
+      "base_path" => "/education/becoming-an-apprentice",
+      "content_id" => "ff0e8e1f-4dea-42ff-b1d5-f1ae37807af2",
+      "description" => "Pay and conditions, how to apply, become a higher or degree apprentice. Apprenticeship levels, training, find an apprenticeship.",
+      "schema_name" => "taxon",
+      "title" => "Becoming an apprentice",
+      "phase" => "live",
+    },
+    {
+      "base_path" => "/education/becoming-a-wizard",
+      "content_id" => "ff0e8e1f-4dea-42ff-b1d5-f1ae37807af3",
+      "description" => "Pay and conditions, how to apply, become a higher or degree wizard. Wizard levels, training, find a wizard placement.",
+      "schema_name" => "taxon",
+      "title" => "Becoming a wizard",
+      "phase" => "live",
+    }
+  ].freeze
+
   THREE_TAXONS = [
     {
       "base_path" => "/education/becoming-an-apprentice",