From 50ec79842c94dbb91322257b4ca2cb75d72ecec4 Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Wed, 22 Nov 2017 15:39:25 +0000
Subject: [PATCH 1/4] Update design of taxonomy sidebar

We are developing a new related links component in government-frontend. We need to bring the taxonomy sidebar component design in line with the new related links.
---
 .../govuk-component/_taxonomy-sidebar.scss    | 38 +++++++++++--------
 .../govuk_component/docs/taxonomy_sidebar.yml |  2 +-
 .../taxonomy_sidebar.raw.html.erb             |  5 ++-
 config/locales/en.yml                         |  2 +
 test/govuk_component/taxonomy_sidebar_test.rb | 10 ++---
 5 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
index 3a35bd9dc..8f8060199 100644
--- a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
+++ b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
@@ -1,29 +1,37 @@
 .govuk-taxonomy-sidebar {
-  border-top: 10px solid $mainstream-brand;
-  padding-top: 5px;
+  border-top: 2px solid $govuk-blue;
+  padding-top: $gutter-half;
   @include core-16;
 
-  h2 {
-    @include bold-24;
-    margin-top: 0.3em;
-    margin-bottom: 0.5em;
+  .govuk-taxonomy-sidebar__heading {
+    margin-top: 0;
+    margin-bottom: $gutter-one-third;
+    @include bold-19;
   }
 
   .taxon-description {
-    margin-bottom: 0.75em;
+    margin-top: 0;
+    margin-bottom: $gutter-one-third;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  nav {
+    margin-bottom: $gutter;
+  }
+
+  li {
+    padding: 0;
+    list-style-type: none;
+    margin-bottom: $gutter-one-third;
   }
 
   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;
-    }
-  }
+ }
 }
diff --git a/app/views/govuk_component/docs/taxonomy_sidebar.yml b/app/views/govuk_component/docs/taxonomy_sidebar.yml
index bed2bcca7..2924f5038 100644
--- a/app/views/govuk_component/docs/taxonomy_sidebar.yml
+++ b/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 &amp; 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
diff --git a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
index 47f117a49..f571322b1 100644
--- a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
+++ b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
@@ -1,9 +1,10 @@
 <% 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>
+        <h3 class='govuk-taxonomy-sidebar__heading'>
           <%=
             link_to_if(
               item[:url],
@@ -21,7 +22,7 @@
               },
             )
           %>
-        </h2>
+        </h3>
 
         <p class='taxon-description'>
           <%= item[:description] %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 962d54a48..4d3e705aa 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -34,3 +34,5 @@ en:
       in: "in"
     task_list_related:
       part_of: "Part of"
+    taxonomy_sidebar:
+      related_content: "Related content"
diff --git a/test/govuk_component/taxonomy_sidebar_test.rb b/test/govuk_component/taxonomy_sidebar_test.rb
index 9d16bc8ca..c503f485a 100644
--- a/test/govuk_component/taxonomy_sidebar_test.rb
+++ b/test/govuk_component/taxonomy_sidebar_test.rb
@@ -27,7 +27,7 @@ def component_name
       ]
     )
 
-    taxon_titles = css_select(".sidebar-taxon h2").map { |taxon_title| taxon_title.text.strip }
+    taxon_titles = css_select(".sidebar-taxon h3").map { |taxon_title| taxon_title.text.strip }
     assert_equal ["Item 1 title", "Item 2 title"], taxon_titles
   end
 
@@ -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,7 @@ 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
 end

From 5c86d289528cae2e94638c3415217342e2f1fbc2 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@digital.cabinet-office.gov.uk>
Date: Mon, 11 Dec 2017 18:06:32 +0000
Subject: [PATCH 2/4] Render collections links in taxonomy sidebar

'Part of' links are moving to the sidebar navigation,
so they need to be present in the taxonomy sidebar.
---
 .../govuk-component/_taxonomy-sidebar.scss    | 13 +++++++++-
 .../taxonomy_sidebar.raw.html.erb             | 17 ++++++++++++
 test/govuk_component/taxonomy_sidebar_test.rb | 26 +++++++++++++++++++
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
index 8f8060199..2d4b750ff 100644
--- a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
+++ b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
@@ -33,5 +33,16 @@
     padding: 0;
     margin: 0;
     margin-bottom: 1.25em;
- }
+  }
+
+  .govuk-taxonomy-sidebar__collections-heading {
+    border-top: 1px solid $border-colour;
+    margin-bottom: $gutter-half;
+    margin-top: $gutter;
+    padding-top: $gutter-half;
+  }
+
+  .govuk-taxonomy-sidebar__collections-link {
+    @include bold-19;
+  }
 }
diff --git a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
index f571322b1..d13322568 100644
--- a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
+++ b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
@@ -57,6 +57,23 @@
         <% end %>
       </div>
     <% end %>
+
+    <% if local_assigns[:collections] && !collections.blank? %>
+      <div>
+        <h3 class="govuk-taxonomy-sidebar__collections-heading">Collections</h3>
+        <nav role='navigation'>
+          <ul>
+            <% 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 %>
diff --git a/test/govuk_component/taxonomy_sidebar_test.rb b/test/govuk_component/taxonomy_sidebar_test.rb
index c503f485a..28e661390 100644
--- a/test/govuk_component/taxonomy_sidebar_test.rb
+++ b/test/govuk_component/taxonomy_sidebar_test.rb
@@ -117,4 +117,30 @@ def component_name
     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

From 179473f0e642f0705c171fa5e326b504905e23bb Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@digital.cabinet-office.gov.uk>
Date: Tue, 12 Dec 2017 09:03:57 +0000
Subject: [PATCH 3/4] Add collections data to taxonomy sidebar docs

---
 app/views/govuk_component/docs/taxonomy_sidebar.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/views/govuk_component/docs/taxonomy_sidebar.yml b/app/views/govuk_component/docs/taxonomy_sidebar.yml
index 2924f5038..dadcace1e 100644
--- a/app/views/govuk_component/docs/taxonomy_sidebar.yml
+++ b/app/views/govuk_component/docs/taxonomy_sidebar.yml
@@ -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.

From dd4211811e9342ba8d5952d256b8655ef2ff1303 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@digital.cabinet-office.gov.uk>
Date: Tue, 12 Dec 2017 13:31:10 +0000
Subject: [PATCH 4/4] Replace element selectors with BEM taxonomy styles

---
 .../govuk-component/_taxonomy-sidebar.scss    | 88 ++++++++++---------
 .../taxonomy_sidebar.raw.html.erb             | 28 +++---
 test/govuk_component/taxonomy_sidebar_test.rb |  4 +-
 3 files changed, 62 insertions(+), 58 deletions(-)

diff --git a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
index 2d4b750ff..ccc2adf5d 100644
--- a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
+++ b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
@@ -1,48 +1,50 @@
 .govuk-taxonomy-sidebar {
+  @include core-16;
   border-top: 2px solid $govuk-blue;
   padding-top: $gutter-half;
-  @include core-16;
+}
+
+.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;
+}
 
-  .govuk-taxonomy-sidebar__heading {
-    margin-top: 0;
-    margin-bottom: $gutter-one-third;
-    @include bold-19;
-  }
-
-  .taxon-description {
-    margin-top: 0;
-    margin-bottom: $gutter-one-third;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  nav {
-    margin-bottom: $gutter;
-  }
-
-  li {
-    padding: 0;
-    list-style-type: none;
-    margin-bottom: $gutter-one-third;
-  }
-
-  ul {
-    // reset the default browser styles
-    padding: 0;
-    margin: 0;
-    margin-bottom: 1.25em;
-  }
-
-  .govuk-taxonomy-sidebar__collections-heading {
-    border-top: 1px solid $border-colour;
-    margin-bottom: $gutter-half;
-    margin-top: $gutter;
-    padding-top: $gutter-half;
-  }
-
-  .govuk-taxonomy-sidebar__collections-link {
-    @include bold-19;
-  }
+.govuk-taxonomy-sidebar__collections-link {
+  @include bold-19;
+  text-decoration: none;
 }
diff --git a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
index d13322568..d6ace9b7f 100644
--- a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
+++ b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
@@ -3,14 +3,14 @@
   <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">
+      <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}",
@@ -24,16 +24,16 @@
           %>
         </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],
@@ -47,7 +47,7 @@
                             dimension29: related_item[:title],
                           }
                       },
-                      class: 'related-link',
+                      class: 'related-link govuk-taxonomy-sidebar__link',
                     )
                   %>
                 </li>
@@ -60,14 +60,16 @@
 
     <% if local_assigns[:collections] && !collections.blank? %>
       <div>
-        <h3 class="govuk-taxonomy-sidebar__collections-heading">Collections</h3>
-        <nav role='navigation'>
-          <ul>
+        <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>
+                <li>
+                  <%= link_to(item[:text],
+                              item[:path],
+                              class: 'govuk-taxonomy-sidebar__collections-link') %>
+                </li>
               <% end %>
             <% end %>
           </ul>
diff --git a/test/govuk_component/taxonomy_sidebar_test.rb b/test/govuk_component/taxonomy_sidebar_test.rb
index 28e661390..a5ecc6492 100644
--- a/test/govuk_component/taxonomy_sidebar_test.rb
+++ b/test/govuk_component/taxonomy_sidebar_test.rb
@@ -27,8 +27,8 @@ def component_name
       ]
     )
 
-    taxon_titles = css_select(".sidebar-taxon h3").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