Add related collections to the taxonomy navigation

alphagov · Jul 31, 2018 · 6f1c843 · 6f1c843
1 parent b3a791d
commit 6f1c843
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 17 deletions.
diff --git a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
@@ -1,11 +1,14 @@
+// govuk_frontend_toolkit imports
+@import 'css3';
+
 .taxonomy-navigation {
   border-top: 2px solid $govuk-blue;
-  padding-top: $gutter-half;
 }
 
-.taxonomy-navigation__title-link {
-  @include bold-24;
-  display: block;
+.taxonomy-navigation__list-item {
+  margin-bottom: $gutter / 6;
+  padding-bottom: $gutter / 6;
+  list-style: none;
 }
 
 .taxonomy-navigation__section {
@@ -14,6 +17,32 @@
   border-top: 1px solid $black;
 }
 
-.taxonomy-navigation__section:first-of-type {
-  margin-top: $gutter * 1.5;
+.taxonomy-navigation__row {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include media(tablet) {
+    margin-right: -25px;
+  }
+}
+
+.taxonomy-navigation__column {
+  @include core-16;
+  @include box-sizing(border-box);
+  width: 100%;
+  padding: ($gutter / 6) $gutter-one-third ($gutter-half + $gutter-one-third) 0;
+
+  @include media(tablet) {
+    width: 50%;
+    padding: ($gutter / 6) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
+  }
+
+  @include media(desktop) {
+    width: (1 / 3) * 100%;
+    padding: ($gutter / 6) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
+  }
+
+  .gem-c-heading {
+    @include bold-16;
+  }
 }
diff --git a/app/controllers/content_items_controller.rb b/app/controllers/content_items_controller.rb
@@ -89,6 +89,13 @@ def load_taxonomy_navigation
           taxon_link: taxon["base_path"],
         }
       end
+
+      @related_collections = @content_item
+                               .content_item
+                               .dig('links', 'document_collections')
+                               .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') }
     end
   end
 

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -45,7 +45,10 @@
     <main role="main" id="content" class="<%= @content_item.schema_name.dasherize %>" lang="<%= I18n.locale %>">
       <%= yield %>
       <% if show_new_navigation? && @taxonomy_navigation %>
-        <%= render 'shared/taxonomy_navigation', taxonomy_navigation: @taxonomy_navigation, tagged_taxons: @tagged_taxons %>
+        <%= render 'shared/taxonomy_navigation',
+                   taxonomy_navigation: @taxonomy_navigation,
+                   tagged_taxons: @tagged_taxons,
+                   related_collections: @related_collections %>
       <% end %>
     </main>
     <%= render 'govuk_publishing_components/components/feedback' %>

diff --git a/app/views/shared/_taxonomy_navigation.html.erb b/app/views/shared/_taxonomy_navigation.html.erb
@@ -1,10 +1,36 @@
 <% if taxonomy_navigation.values().flatten.any? %>
   <div class="taxonomy-navigation" data-module="track-click">
-    <h2>More in
-      <% tagged_taxons.each do |tagged_taxon| %>
-        <a class="taxonomy-navigation__title-link" href="<%= tagged_taxon[:taxon_link] %>"><%= tagged_taxon[:taxon_name] %></a>
+    <div class="taxonomy-navigation__row">
+      <div class="taxonomy-navigation__column">
+        <%= render "govuk_publishing_components/components/heading",
+                   text: 'Topics',
+                   heading_level: 2,
+                   padding: true %>
+        <ul>
+          <% tagged_taxons.each do |tagged_taxon| %>
+            <li class="taxonomy-navigation__list-item">
+              <%= link_to tagged_taxon[:taxon_name], tagged_taxon[:taxon_link] %>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+
+      <% if related_collections.any? %>
+        <div class="taxonomy-navigation__column">
+          <%= render "govuk_publishing_components/components/heading",
+                     text: 'Collections',
+                     heading_level: 2,
+                     padding: true %>
+          <ul>
+            <% related_collections.each do |base_path, title| %>
+              <li class="taxonomy-navigation__list-item">
+                <%= link_to title, base_path %>
+              </li>
+            <% end %>
+          </ul>
+        </div>
       <% end %>
-    </h2>
+    </div>
 
     <% if taxonomy_navigation[:services].present? %>
       <div class="taxonomy-navigation__section">

diff --git a/test/integration/content_pages_navigation_test.rb b/test/integration/content_pages_navigation_test.rb
@@ -26,7 +26,7 @@ class ContentPagesNavigationTest < ActionDispatch::IntegrationTest
 
     setup_and_visit_content_item_with_taxons('guide', SINGLE_TAXON)
 
-    assert page.has_css?('.taxonomy-navigation h2', text: 'Becoming an apprentice')
+    assert page.has_css?('.taxonomy-navigation li', text: 'Becoming an apprentice')
     assert page.has_css?('.gem-c-highlight-boxes__title', text: 'Free school meals form')
   end
 
@@ -36,9 +36,11 @@ class ContentPagesNavigationTest < ActionDispatch::IntegrationTest
 
     setup_and_visit_content_item_with_taxons('guide', THREE_TAXONS)
 
-    assert page.has_css?('.taxonomy-navigation h2 a[href="/education/becoming-an-apprentice"]', text: 'Becoming an apprentice')
-    assert page.has_css?('.taxonomy-navigation h2 a[href="/education/becoming-a-wizard"]', text: 'Becoming a wizard')
-    assert page.has_css?('.taxonomy-navigation h2 a[href="/education/becoming-the-sorceror-supreme"]', text: 'Becoming the sorceror supreme')
+    within '.taxonomy-navigation' do
+      assert page.has_css?('li a[href="/education/becoming-an-apprentice"]', text: 'Becoming an apprentice')
+      assert page.has_css?('li a[href="/education/becoming-a-wizard"]', text: 'Becoming a wizard')
+      assert page.has_css?('li a[href="/education/becoming-the-sorceror-supreme"]', text: 'Becoming the sorceror supreme')
+    end
 
     assert page.has_css?('.gem-c-highlight-boxes__title', text: 'Free school meals form')
   end
@@ -51,8 +53,10 @@ class ContentPagesNavigationTest < ActionDispatch::IntegrationTest
 
     setup_and_visit_content_item_with_taxons('guide', taxons)
 
-    assert page.has_css?('.taxonomy-navigation h2 a[href="/education/becoming-an-apprentice"]', text: 'Becoming an apprentice')
-    refute page.has_css?('.taxonomy-navigation h2 a[href="/education/becoming-a-ghostbuster"]', text: 'Becoming a ghostbuster')
+    within '.taxonomy-navigation' do
+      assert page.has_css?('li a[href="/education/becoming-an-apprentice"]', text: 'Becoming an apprentice')
+      refute page.has_css?('li a[href="/education/becoming-a-ghostbuster"]', text: 'Becoming a ghostbuster')
+    end
   end
 
   test "shows the Services section title and documents with tracking" do

diff --git a/test/integration/content_pages_related_navigation_test.rb b/test/integration/content_pages_related_navigation_test.rb
@@ -12,6 +12,17 @@ class ContentPagesRelatedNavigationTest < ActionDispatch::IntegrationTest
     assert page.has_css?('.gem-c-related-navigation__sub-heading', text: 'Collection')
   end
 
+  test "ContentPagesNav variant B shows related collections in the taxonomy navigation" do
+    stub_rummager
+    setup_variant_b
+
+    setup_and_visit_content_item_with_taxons('case_study', SINGLE_TAXON)
+
+    within '.taxonomy-navigation' do
+      assert page.has_css?('.gem-c-heading', text: 'Collections')
+    end
+  end
+
   test "ContentPagesNav variant B does not show related collections in the sidebar" do
     setup_variant_b