Merge pull request #1222 from alphagov/update-taxonomy-sidebar-design

Update taxonomy sidebar design

app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss

@@ -1,29 +1,50 @@
 .govuk-taxonomy-sidebar {
-  border-top: 10px solid $mainstream-brand;
-  padding-top: 5px;
   @include core-16;
+  border-top: 2px solid $govuk-blue;
+  padding-top: $gutter-half;
+}
+
+.govuk-taxonomy-sidebar__heading {
+  @include bold-19;
+  margin-bottom: $gutter-one-third;
+  margin-top: 0;
+}
+
+.govuk-taxonomy-sidebar__taxon-description {
+  margin-bottom: $gutter-one-third;
+  margin-top: 0;
+}
+
+.govuk-taxonomy-sidebar__navigation {
+  margin-bottom: $gutter;
+}
+
+.govuk-taxonomy-sidebar__list {
+  list-style: none;
+  margin: 0;
+  margin-bottom: 1.25em;
+  padding: 0;
+}
+
+.govuk-taxonomy-sidebar__item {
+  list-style-type: none;
+  margin-bottom: $gutter-one-third;
+  padding: 0;
+}
+
+.govuk-taxonomy-sidebar__link {
+  text-decoration: none;
+}
+
+
+.govuk-taxonomy-sidebar__collections-heading {
+  border-top: 1px solid $border-colour;
+  margin-bottom: $gutter-half;
+  margin-top: $gutter;
+  padding-top: $gutter-half;
+}
 
-  h2 {
-    @include bold-24;
-    margin-top: 0.3em;
-    margin-bottom: 0.5em;
-  }
-
-  .taxon-description {
-    margin-bottom: 0.75em;
-  }
-
-  ul {
-    // reset the default browser styles
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    margin-bottom: 1.25em;
-
-    li {
-      // reset the default browser styles
-      padding: 0;
-      margin-bottom: 0.75em;
-    }
-  }
+.govuk-taxonomy-sidebar__collections-link {
+  @include bold-19;
+  text-decoration: none;
 }

app/views/govuk_component/docs/taxonomy_sidebar.yml

@@ -48,7 +48,7 @@ examples:
               link: /government/collections/key-stage-1-teacher-assessment
             - title: "Primary assessments: information and resources for 2017"
               link: /government/publications/primary-assessments-information-and-resources-for-2017
-            - title: "Slide pack from Phil Beach at the Skills & Employability Summit"
+            - title: "Slide pack from Phil Beach at the Skills & Employability Summit"
               link: /government/publications/primary-assessments-information-and-resources-for-2017
             - title: "Transport to education and training for people aged 16 to 18"
               link: /government/publications/primary-assessments-information-and-resources-for-2017
@@ -64,6 +64,9 @@ examples:
               link: /government/collections/key-stage-1-teacher-assessment
             - title: "Primary assessments: information and resources for 2017"
               link: /government/publications/primary-assessments-information-and-resources-for-2017
+      collections:
+        - text: "Statistics: outcome based success measures"
+        - path: "/government/collections/statistics-outcome-based-success-measures"
   no_children:
     description: |
       The child links are usually pulled from rummager. If rummager doesn’t respond we fallback to a sidebar with a taxon link but without any child content links.

app/views/govuk_component/taxonomy_sidebar.raw.html.erb

@@ -1,15 +1,16 @@
 <% if local_assigns[:items] && !items.blank? %>
 
   <aside class='govuk-taxonomy-sidebar' data-module='track-click' role='complementary'>
+    <h2 class='govuk-taxonomy-sidebar__heading'><%= t("govuk_component.taxonomy_sidebar.related_content") %></h2>
     <% items.each_with_index do |item, item_index| %>
-      <div class='sidebar-taxon' data-track-count="sidebarTaxonSection">
-        <h2>
+      <div data-track-count="sidebarTaxonSection">
+        <h3 class='govuk-taxonomy-sidebar__heading'>
           <%=
             link_to_if(
               item[:url],
               item[:title],
               item[:url],
-              class: 'taxon-link',
+              class: 'govuk-taxonomy-sidebar__link',
               data: {
                 track_category: 'relatedLinkClicked',
                 track_action: "#{item_index + 1}",
@@ -21,18 +22,18 @@
               },
             )
           %>
-        </h2>
+        </h3>
 
-        <p class='taxon-description'>
+        <p class='govuk-taxonomy-sidebar__taxon-description'>
           <%= item[:description] %>
         </p>
 
         <% item[:related_content] ||= [] %>
         <% if item[:related_content].any? %>
-          <nav role='navigation'>
-            <ul class='related-content'>
+          <nav class='govuk-taxonomy-sidebar__navigation' role='navigation'>
+            <ul class='govuk-taxonomy-sidebar__list'>
               <% item[:related_content].each_with_index do |related_item, related_content_index| %>
-                <li>
+                <li class='govuk-taxonomy-sidebar__item'>
                   <%=
                     link_to(
                       related_item[:title],
@@ -46,7 +47,7 @@
                             dimension29: related_item[:title],
                           }
                       },
-                      class: 'related-link',
+                      class: 'related-link govuk-taxonomy-sidebar__link',
                     )
                   %>
                 </li>
@@ -56,6 +57,25 @@
         <% end %>
       </div>
     <% end %>
+
+    <% if local_assigns[:collections] && !collections.blank? %>
+      <div>
+        <h3 class='govuk-taxonomy-sidebar__collections-heading'>Collections</h3>
+        <nav class='govuk-taxonomy-sidebar__navigation' role='navigation'>
+          <ul class='govuk-taxonomy-sidebar__list'>
+            <% collections.each do |item| %>
+              <% if item[:text] && item[:path] %>
+                <li>
+                  <%= link_to(item[:text],
+                              item[:path],
+                              class: 'govuk-taxonomy-sidebar__collections-link') %>
+                </li>
+              <% end %>
+            <% end %>
+          </ul>
+        </nav>
+      </div>
+    <% end %>
   </aside>
 
 <% end %>

config/locales/en.yml

@@ -34,3 +34,5 @@ en:
       in: "in"
     task_list_related:
       part_of: "Part of"
+    taxonomy_sidebar:
+      related_content: "Related content"

test/govuk_component/taxonomy_sidebar_test.rb

@@ -27,8 +27,8 @@ def component_name
       ]
     )
 
-    taxon_titles = css_select(".sidebar-taxon h2").map { |taxon_title| taxon_title.text.strip }
-    assert_equal ["Item 1 title", "Item 2 title"], taxon_titles
+    taxon_titles = css_select(".govuk-taxonomy-sidebar__heading").map { |taxon_title| taxon_title.text.strip }
+    assert_equal ["Related content", "Item 1 title", "Item 2 title"], taxon_titles
   end
 
   test "renders all data attributes for tracking" do
@@ -70,7 +70,7 @@ def component_name
     total_sections = 2
     total_links_in_section_1 = 3
 
-    assert_select 'h2 a', "Item title"
+    assert_select 'h3 a', "Item title"
     assert_select '.govuk-taxonomy-sidebar[data-module="track-click"]', 1
     assert_tracking_link("category", "relatedLinkClicked", 6)
 
@@ -94,7 +94,7 @@ def component_name
   end
 
 
-  test "renders without url on the h2 heading" do
+  test "renders without url on the h3 heading" do
     render_component(
       items: [
         {
@@ -114,7 +114,33 @@ def component_name
       ]
     )
 
-    assert_select 'h2', "Without an url"
-    assert_select 'h2 a', false
+    assert_select 'h3', "Without an url"
+    assert_select 'h3 a', false
+  end
+
+  test "renders collections links" do
+    render_component(
+      items: [
+        {
+          title: "Without an url",
+          description: "An item",
+          related_content: [
+            {
+              title: "Related link 1",
+              link: "/related-link-1",
+            }
+          ],
+        },
+      ],
+      collections: [
+        {
+          text: "Collection 1",
+          path: "/some-collection"
+        }
+      ]
+    )
+
+    assert_select "h3.govuk-taxonomy-sidebar__collections-heading", "Collections"
+    assert_select "a.govuk-taxonomy-sidebar__collections-link", "Collection 1"
   end
 end