From 334cea77af7a687cac074ae0c0c4a441e63fc22b Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Fri, 3 Aug 2018 13:42:13 +0000
Subject: [PATCH 1/4] Fix small link text on mobile

Link text for Topic and Collection links was 14px on mobile. We shouldn't really be using 14px font-size on mobile, especially not for important links.

Other content surrounding that was also using 16px, so we should match that.
---
 app/assets/stylesheets/helpers/_taxonomy-navigation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
index 556e770f5..fc61739bd 100644
--- a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
+++ b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
@@ -27,9 +27,9 @@
 }
 
 .taxonomy-navigation__column {
-  @include core-16;
   @include box-sizing(border-box);
   width: 100%;
+  font-size: 16px;
   padding: ($gutter / 6) $gutter-one-third ($gutter-half + $gutter-one-third) 0;
 
   @include media(tablet) {

From 4d78d3d9757f21f7bb2a8ed767f2be154dfcb60d Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Fri, 3 Aug 2018 13:43:58 +0000
Subject: [PATCH 2/4] Improve spacing

---
 app/assets/stylesheets/helpers/_taxonomy-navigation.scss | 3 ++-
 app/views/shared/_taxonomy_navigation.html.erb           | 6 ++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
index fc61739bd..b42859c24 100644
--- a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
+++ b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
@@ -6,7 +6,7 @@
 }
 
 .taxonomy-navigation__list-item {
-  margin-bottom: $gutter / 6;
+  margin: $gutter-one-third 0 ($gutter-one-third / 2) 0;
   padding-bottom: $gutter / 6;
   list-style: none;
 }
@@ -20,6 +20,7 @@
 .taxonomy-navigation__row {
   display: flex;
   flex-wrap: wrap;
+  padding-top: $gutter-one-third;
 
   @include media(tablet) {
     margin-right: -25px;
diff --git a/app/views/shared/_taxonomy_navigation.html.erb b/app/views/shared/_taxonomy_navigation.html.erb
index f5b9c819b..3220b0245 100644
--- a/app/views/shared/_taxonomy_navigation.html.erb
+++ b/app/views/shared/_taxonomy_navigation.html.erb
@@ -4,8 +4,7 @@
       <div class="taxonomy-navigation__column">
         <%= render "govuk_publishing_components/components/heading",
                    text: 'Topics',
-                   heading_level: 2,
-                   padding: true %>
+                   heading_level: 2 %>
         <ul>
           <% tagged_taxons.each do |tagged_taxon| %>
             <li class="taxonomy-navigation__list-item">
@@ -19,8 +18,7 @@
         <div class="taxonomy-navigation__column">
           <%= render "govuk_publishing_components/components/heading",
                      text: 'Collections',
-                     heading_level: 2,
-                     padding: true %>
+                     heading_level: 2 %>
           <ul>
             <% related_collections.each do |base_path, title| %>
               <li class="taxonomy-navigation__list-item">

From 5375d886767c9b33c05a8276951fd79ddae27703 Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Fri, 3 Aug 2018 13:47:51 +0000
Subject: [PATCH 3/4] Refactor taxonomy navigation CSS

Re-organise the CSS so it follows the HTML order - makes it easier to read
Replace $gutter / 6 with $gutter-one-third / 2
---
 .../helpers/_taxonomy-navigation.scss         | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
index b42859c24..6be318446 100644
--- a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
+++ b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
@@ -5,18 +5,6 @@
   border-top: 2px solid $govuk-blue;
 }
 
-.taxonomy-navigation__list-item {
-  margin: $gutter-one-third 0 ($gutter-one-third / 2) 0;
-  padding-bottom: $gutter / 6;
-  list-style: none;
-}
-
-.taxonomy-navigation__section {
-  padding: $gutter-one-third 0 $gutter-two-thirds 0;
-  margin-top: $gutter-half;
-  border-top: 1px solid $black;
-}
-
 .taxonomy-navigation__row {
   display: flex;
   flex-wrap: wrap;
@@ -31,19 +19,31 @@
   @include box-sizing(border-box);
   width: 100%;
   font-size: 16px;
-  padding: ($gutter / 6) $gutter-one-third ($gutter-half + $gutter-one-third) 0;
+  padding: ($gutter-one-third / 2) $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;
+    padding: ($gutter-one-third / 2) ($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;
+    padding: ($gutter-one-third / 2) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
   }
 
   .gem-c-heading {
     @include bold-16;
   }
 }
+
+.taxonomy-navigation__list-item {
+  margin: $gutter-one-third 0 ($gutter-one-third / 2) 0;
+  padding-bottom: $gutter-one-third / 2;
+  list-style: none;
+}
+
+.taxonomy-navigation__section {
+  padding: $gutter-one-third 0 $gutter-two-thirds 0;
+  margin-top: $gutter-half;
+  border-top: 1px solid $black;
+}

From 4dcd4e6b18a543b1c12b96107d2600ef836cd8cb Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Fri, 3 Aug 2018 13:55:34 +0000
Subject: [PATCH 4/4] Remove CSS override for component

We were overriding the CSS for the heading component. It's bad practice to do this, we should instead make use of the parameters which can be passed into the component.

This will make the headings render as 19px on desktop and 16px on mobile (as opposed to 16px on all devices).
---
 app/assets/stylesheets/helpers/_taxonomy-navigation.scss | 4 ----
 app/views/shared/_taxonomy_navigation.html.erb           | 6 ++++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
index 6be318446..17079e817 100644
--- a/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
+++ b/app/assets/stylesheets/helpers/_taxonomy-navigation.scss
@@ -30,10 +30,6 @@
     width: (1 / 3) * 100%;
     padding: ($gutter-one-third / 2) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
   }
-
-  .gem-c-heading {
-    @include bold-16;
-  }
 }
 
 .taxonomy-navigation__list-item {
diff --git a/app/views/shared/_taxonomy_navigation.html.erb b/app/views/shared/_taxonomy_navigation.html.erb
index 3220b0245..8da0bfc4b 100644
--- a/app/views/shared/_taxonomy_navigation.html.erb
+++ b/app/views/shared/_taxonomy_navigation.html.erb
@@ -4,7 +4,8 @@
       <div class="taxonomy-navigation__column">
         <%= render "govuk_publishing_components/components/heading",
                    text: 'Topics',
-                   heading_level: 2 %>
+                   heading_level: 2,
+                   font_size: 19 %>
         <ul>
           <% tagged_taxons.each do |tagged_taxon| %>
             <li class="taxonomy-navigation__list-item">
@@ -18,7 +19,8 @@
         <div class="taxonomy-navigation__column">
           <%= render "govuk_publishing_components/components/heading",
                      text: 'Collections',
-                     heading_level: 2 %>
+                     heading_level: 2,
+                     font_size: 19 %>
           <ul>
             <% related_collections.each do |base_path, title| %>
               <li class="taxonomy-navigation__list-item">