From d69703751aae38a2b34bc9baa2fd610046f55829 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 30 Mar 2021 20:46:06 +0100
Subject: [PATCH 01/16] Swap `extend` for CSS class in Magna Charta

---
 .../govuk_publishing_components/lib/govspeak/magna-charta.js    | 2 +-
 .../components/govspeak/_charts.scss                            | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
index 45cf204f28..926fe1dad1 100644
--- a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
+++ b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
@@ -188,7 +188,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status')
     toggleStatus.setAttribute('role', 'alert')
 
-    link.classList.add('mc-toggle-button')
+    link.classList.add('govuk-body-s', 'mc-toggle-button')
     link.appendChild(toggleText)
     link.appendChild(toggleStatus)
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss
index 0dfd191be2..63b034d44e 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss
@@ -271,7 +271,6 @@
   }
 
   .mc-toggle-button {
-    @extend %govuk-body-s;
     border: 1px solid $govuk-border-colour;
     color: $govuk-link-colour;
     cursor: pointer;

From 312b4127faad7443c380072a80c9ea9fb4f9218e Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 30 Mar 2021 20:47:48 +0100
Subject: [PATCH 02/16] Swap `extend` for CSS class in contextual sidebar

And tweaked focus state to avoid a yellow bar on top of the red bar in the call
to action.
---
 .../components/_contextual-sidebar.scss                       | 4 ++--
 .../components/contextual_sidebar/_brexit_cta.html.erb        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss b/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss
index f61f8f19bc..7bbbff211b 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss
@@ -6,7 +6,6 @@ $transition-campaign-dark-blue: #1e1348;
 }
 
 .gem-c-contextual-sidebar__brexit-heading {
-  @extend %govuk-heading-s;
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
 }
@@ -24,7 +23,6 @@ $transition-campaign-dark-blue: #1e1348;
   }
 
   .gem-c-contextual-sidebar__brexit-text {
-    @extend %govuk-link;
     @include govuk-font(16);
 
     margin-top: 0;
@@ -38,6 +36,8 @@ $transition-campaign-dark-blue: #1e1348;
 }
 
 .gem-c-contextual-sidebar__brexit-cta:focus {
+  box-shadow: 0 $govuk-focus-width $govuk-focus-text-colour;
+
   .gem-c-contextual-sidebar__brexit-text {
     text-decoration: none;
   }
diff --git a/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb b/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb
index d5b9da5f91..f2cf1402d8 100644
--- a/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb
+++ b/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb
@@ -16,7 +16,7 @@
     data: data_attributes,
     aria: { label: "#{t("components.related_navigation.take_action_list.aria_label")} #{link_text}" },
     lang: shared_helper.t_locale("components.related_navigation.transition.title") do %>
-  <h2 class="gem-c-contextual-sidebar__brexit-heading"><%= t("components.related_navigation.transition.title") %></h2>
+  <h2 class="gem-c-contextual-sidebar__brexit-heading govuk-heading-s"><%= t("components.related_navigation.transition.title") %></h2>
   <ul class="govuk-list gem-c-contextual-sidebar__take-action-traffic-lights">
     <li>
       <%= image_tag 'govuk_publishing_components/take-action-red.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>

From 8f5a840f5794ffe7de9c73c0f731a35c0ccdbc51 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 30 Mar 2021 20:48:58 +0100
Subject: [PATCH 03/16] Swap extend for CSS class in related navigation

---
 .../components/_related-navigation.scss                          | 1 -
 .../presenters/related_navigation_helper.rb                      | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss b/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss
index 5b86ba970e..c28a2d03bf 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss
@@ -66,7 +66,6 @@
 }
 
 .gem-c-related-navigation__section-link {
-  @extend %govuk-link;
   font-weight: bold;
 
   @include govuk-template-link-focus-override;
diff --git a/lib/govuk_publishing_components/presenters/related_navigation_helper.rb b/lib/govuk_publishing_components/presenters/related_navigation_helper.rb
index 4ac3c88c3d..201747255b 100644
--- a/lib/govuk_publishing_components/presenters/related_navigation_helper.rb
+++ b/lib/govuk_publishing_components/presenters/related_navigation_helper.rb
@@ -67,6 +67,7 @@ def construct_section_heading(section_title)
 
       def section_css_class(css_class, section_title, link: {}, link_is_inline: false)
         css_classes = [css_class]
+        css_classes << "govuk-link"
         css_classes << "#{css_class}--#{@context}" unless @context.nil?
         css_classes << "#{css_class}--inline" if link_is_inline
 

From 01c316f57b4fe5dc092ed9bf11dd3ca221bd2483 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 30 Mar 2021 20:49:23 +0100
Subject: [PATCH 04/16] Swap extend for CSS class in step by step navigation

---
 .../components/_step-by-step-nav-related.scss             | 4 ----
 .../components/_step_by_step_nav_related.html.erb         | 8 ++++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
index b33a36baaf..4794c68986 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
@@ -46,7 +46,3 @@
 .gem-c-step-nav-related__link-item {
   margin-top: govuk-spacing(3);
 }
-
-.gem-c-step-nav-related__link {
-  @extend %govuk-link;
-}
diff --git a/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb b/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
index ae15a7d115..99d9b9485a 100644
--- a/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
+++ b/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
@@ -4,14 +4,14 @@
   always_display_as_list ||= false
 %>
 <% if links.any? %>
-  <div 
-    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>" 
+  <div
+    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
     data-module="gem-track-click">
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>
           <a href="<%= links[0][:href] %>"
-            class="gem-c-step-nav-related__link"
+            class="gem-c-step-nav-related__link govuk-link"
             data-track-category="stepNavPartOfClicked"
             data-track-action="<%= pretitle %>"
             data-track-label="<%= links[0][:href] %>"
@@ -27,7 +27,7 @@
           <% links.each do |link| %>
             <li class="gem-c-step-nav-related__link-item">
               <a href="<%= link[:href] %>"
-                class="gem-c-step-nav-related__link"
+                class="gem-c-step-nav-related__link govuk-link"
                 data-track-category="stepNavPartOfClicked"
                 data-track-action="<%= pretitle %>"
                 data-track-label="<%= link[:href] %>"

From 548168f61b0a3b02e8ab6623ba7191672d9f9639 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 30 Mar 2021 20:49:45 +0100
Subject: [PATCH 05/16] Swap extend for CSS class in subscription links

---
 .../components/_subscription-links.scss                     | 1 -
 .../components/_subscription_links.html.erb                 | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss
index 6628ffcf7f..39a3cb242e 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss
@@ -44,7 +44,6 @@
 }
 
 .gem-c-subscription-links__item {
-  @extend %govuk-link;
   display: inline-block;
   text-decoration: none;
   background-repeat: no-repeat;
diff --git a/app/views/govuk_publishing_components/components/_subscription_links.html.erb b/app/views/govuk_publishing_components/components/_subscription_links.html.erb
index 39c790be6d..6b3a789e65 100644
--- a/app/views/govuk_publishing_components/components/_subscription_links.html.erb
+++ b/app/views/govuk_publishing_components/components/_subscription_links.html.erb
@@ -36,7 +36,7 @@
            <%= sl_helper.email_signup_link_text %>
           <% end %>
           <%= link_to email_link_text, sl_helper.email_signup_link, {
-            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
             data: sl_helper.email_signup_link_data_attributes,
             lang: email_signup_link_text_locale
           } %>
@@ -50,13 +50,13 @@
            <%= sl_helper.feed_link_text %>
           <% end %>
           <%= tag.button feed_link_text, {
-            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
+            class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
             data: sl_helper.feed_link_data_attributes,
             lang: feed_link_text_locale
           } if sl_helper.feed_link_box_value %>
           <%= link_to feed_link_text, sl_helper.feed_link,
             {
-              class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+              class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
               data: sl_helper.feed_link_data_attributes,
               lang: feed_link_text_locale
             } unless sl_helper.feed_link_box_value %>

From f5d12ec8d94ff95f9241698af037ca3f5a9989c2 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Wed, 31 Mar 2021 16:24:42 +0100
Subject: [PATCH 06/16] Update button scope to only be used in Govspeak

This was being imported for use in the Govspeak component, but being added to
the CSS without being scoped to the Govspeak component. This meant that it was
overwriting any extended button styles outside of the Govspeak component.
---
 .../components/govspeak/_button.scss                          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
index fe3a971326..eb20a93fb5 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
@@ -1,7 +1,7 @@
-@import "govuk/components/button/button";
-
 // stylelint-disable scss/at-extend-no-missing-placeholder
 .gem-c-govspeak {
+  @import "govuk/components/button/button";
+
   .gem-c-button {
     @extend .govuk-button;
   }

From 379fb0f9103c04a77640661aae3659338b33308f Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Wed, 31 Mar 2021 16:27:14 +0100
Subject: [PATCH 07/16] Move button variables from button to support

The button variables were being used in subscription links components - if the
button file wasn't imported the Sass wouldn't compile.

The `govuk_frontend_support` Sass file should always be imported before any
components are being used. Including the variables there should ensure that
they're available for use by both the button and subscription links components.
---
 .../components/_button.scss                         |  8 --------
 .../govuk_frontend_support.scss                     | 13 +++++++++++++
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/_button.scss
index f36b30cb2b..ab022d0229 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_button.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_button.scss
@@ -1,13 +1,5 @@
 @import "govuk/components/button/button";
 
-$gem-secondary-button-colour: #00823b;
-$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
-$gem-secondary-button-background-colour: govuk-colour("white");
-$gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
-
-$gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
-$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
-
 // Because govuk-frontend adds a responsive bottom margin by default for each component
 // we reset it to zero so we can set it separately using `gem-c-button--bottom-margin`
 // If we decide to use responsive margins consistently across components we can remove this
diff --git a/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss b/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss
index f526dc5f5b..8a74a2b44e 100644
--- a/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss
@@ -2,3 +2,16 @@
 // It provides govuk-frontend but adds no weight to the compiled CSS
 @import "components/helpers/govuk-frontend-settings";
 @import "govuk/base";
+
+@import 'components/mixins/margins';
+// TODO: remove this focus override when govuk_template is no longer used
+@import 'components/mixins/govuk-template-link-focus-override';
+@import 'components/mixins/css3';
+
+$gem-secondary-button-colour: #00823b;
+$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
+$gem-secondary-button-background-colour: govuk-colour("white");
+$gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
+
+$gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
+$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);

From 9bf8c1dfee1d87f22d6358ef866f6c52b6fbb4f6 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 6 Apr 2021 16:47:54 +0100
Subject: [PATCH 08/16] Swap extend for CSS class in highlight boxes

---
 .../components/_highlight-boxes.scss                           | 3 +--
 .../components/_highlight_boxes.html.erb                       | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss b/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss
index 7dc98be6b0..a518852e20 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss
@@ -50,11 +50,10 @@
 }
 
 .gem-c-highlight-boxes__title {
-  @extend %govuk-link;
   @include govuk-font(19, $weight: bold);
   display: block;
   text-decoration: underline;
-  margin-bottom: 5px;
+  margin-bottom: govuk-spacing(1);
 }
 
 .gem-c-highlight-boxes--inverse .gem-c-highlight-boxes__title {
diff --git a/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb b/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb
index c490c66493..897ac94546 100644
--- a/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb
+++ b/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb
@@ -17,7 +17,7 @@
           <%= link_to(
             content_item[:link].fetch(:text),
             content_item[:link].fetch(:path),
-            class: "gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
+            class: "govuk-link gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
             data: content_item[:link][:data_attributes]
             )
           %>

From 097b684e015dfbae7abca4f97b88ccd7f784ee6f Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 6 Apr 2021 16:51:16 +0100
Subject: [PATCH 09/16] Swap extend for CSS class in previous and next link

---
 .../components/_previous-and-next-navigation.scss             | 1 -
 .../components/_previous_and_next_navigation.html.erb         | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss b/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss
index c6aea7919a..675be7ec8a 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss
@@ -18,7 +18,6 @@
 }
 
 .gem-c-pagination__link {
-  @extend %govuk-link;
   display: block;
   text-decoration: none;
   padding-bottom: govuk-spacing(4);
diff --git a/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb b/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb
index 817c4580e3..322765f8c2 100644
--- a/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb
+++ b/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb
@@ -8,7 +8,7 @@
     <% if local_assigns.include?(:previous_page) %>
       <li class="gem-c-pagination__item gem-c-pagination__item--previous">
         <a href="<%= previous_page[:url] %>"
-          class="gem-c-pagination__link"
+          class="govuk-link gem-c-pagination__link"
           rel="prev"
           data-track-category="contentsClicked"
           data-track-action="previous"
@@ -34,7 +34,7 @@
     <% if local_assigns.include?(:next_page) %>
       <li class="gem-c-pagination__item gem-c-pagination__item--next">
         <a href="<%= next_page[:url] %>"
-          class="gem-c-pagination__link"
+          class="govuk-link gem-c-pagination__link"
           rel="next"
           data-track-category="contentsClicked"
           data-track-action="next"

From 176e7b4469d49bbfa72a64bafc96557f0d8dc81f Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 6 Apr 2021 16:51:58 +0100
Subject: [PATCH 10/16] Swap extend for CSS class in print link

---
 .../govuk_publishing_components/components/_print-link.scss   | 1 -
 .../components/_print_link.html.erb                           | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss
index bc9e70f5ba..2bb25b02e5 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss
@@ -41,7 +41,6 @@ $gem-c-print-link-background-height: 18px;
 }
 
 .gem-c-print-link__button {
-  @extend %govuk-body-s;
   border: 1px solid $govuk-border-colour;
   color: $govuk-link-colour;
   cursor: pointer;
diff --git a/app/views/govuk_publishing_components/components/_print_link.html.erb b/app/views/govuk_publishing_components/components/_print_link.html.erb
index f075b17db9..5a01ccb562 100644
--- a/app/views/govuk_publishing_components/components/_print_link.html.erb
+++ b/app/views/govuk_publishing_components/components/_print_link.html.erb
@@ -18,8 +18,8 @@
   wrapper_classes << (shared_helper.get_margin_top)
   wrapper_classes << (shared_helper.get_margin_bottom)
 
-  classes = %w(govuk-link)
-  classes << "gem-c-print-link__button" if href.nil?
+  classes = %w[govuk-link]
+  classes << "govuk-body-s gem-c-print-link__button" if href.nil?
   classes << "gem-c-print-link__link govuk-link--no-visited-state" if href.present?
 %>
 

From 6475a9ca3ed80ac684245afe3adc2f5e6b82481e Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 6 Apr 2021 16:52:57 +0100
Subject: [PATCH 11/16] Swap extend for CSS class in share links

---
 .../govuk_publishing_components/components/_share-links.scss    | 1 -
 .../components/_share_links.html.erb                            | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
index 115969163c..2380ae4a4f 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
@@ -20,7 +20,6 @@ $share-button-height: 32px;
 }
 
 .gem-c-share-links__link {
-  @extend %govuk-link;
   @include govuk-font(16, $weight: bold);
   margin-right: govuk-spacing(6);
   text-decoration: none;
diff --git a/app/views/govuk_publishing_components/components/_share_links.html.erb b/app/views/govuk_publishing_components/components/_share_links.html.erb
index 2d54c81f53..739dd42f18 100644
--- a/app/views/govuk_publishing_components/components/_share_links.html.erb
+++ b/app/views/govuk_publishing_components/components/_share_links.html.erb
@@ -52,7 +52,7 @@
               'track-action': link[:icon],
               'track-options': track_options
             },
-            class: "gem-c-share-links__link #{brand_helper.color_class}" do %>
+            class: "govuk-link gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>
                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">

From 0ed4decfb118f2785b189a72b8df4709c752eaef Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 6 Apr 2021 16:54:11 +0100
Subject: [PATCH 12/16] Swap extend for CSS class in translation navigation

---
 .../components/_translation-nav.scss                          | 4 ----
 .../components/_translation_nav.html.erb                      | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss b/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
index d1ee76499e..1e792573a7 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
@@ -30,10 +30,6 @@
   }
 }
 
-.gem-c-translation-nav__link {
-  @extend %govuk-link;
-}
-
 .gem-c-translation-nav--inverse {
   border-color: govuk-colour("white");
 
diff --git a/app/views/govuk_publishing_components/components/_translation_nav.html.erb b/app/views/govuk_publishing_components/components/_translation_nav.html.erb
index 27705164f6..9f99298a1c 100644
--- a/app/views/govuk_publishing_components/components/_translation_nav.html.erb
+++ b/app/views/govuk_publishing_components/components/_translation_nav.html.erb
@@ -19,7 +19,7 @@
               hreflang: translation[:locale],
               lang: translation[:locale],
               rel: "alternate",
-              class: "gem-c-translation-nav__link #{brand_helper.color_class}",
+              class: "govuk-link gem-c-translation-nav__link #{brand_helper.color_class}",
               data: translation[:data_attributes]
             %>
           <% end %>

From dfd29b61b56ae8953f378dc5a42ed719ab52ca9c Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 6 Apr 2021 20:46:29 +0100
Subject: [PATCH 13/16] Remove unnecessary class from step by step related

---
 .../_step_by_step_nav_related.html.erb           |  4 ++--
 spec/components/step_by_step_nav_related_spec.rb | 16 ++++++++--------
 spec/features/step_nav_helper_spec.rb            |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb b/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
index 99d9b9485a..eb95057e6a 100644
--- a/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
+++ b/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
@@ -11,7 +11,7 @@
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>
           <a href="<%= links[0][:href] %>"
-            class="gem-c-step-nav-related__link govuk-link"
+            class="govuk-link"
             data-track-category="stepNavPartOfClicked"
             data-track-action="<%= pretitle %>"
             data-track-label="<%= links[0][:href] %>"
@@ -27,7 +27,7 @@
           <% links.each do |link| %>
             <li class="gem-c-step-nav-related__link-item">
               <a href="<%= link[:href] %>"
-                class="gem-c-step-nav-related__link govuk-link"
+                class="govuk-link"
                 data-track-category="stepNavPartOfClicked"
                 data-track-action="<%= pretitle %>"
                 data-track-label="<%= link[:href] %>"
diff --git a/spec/components/step_by_step_nav_related_spec.rb b/spec/components/step_by_step_nav_related_spec.rb
index dba2972a38..cbfe1fb93e 100644
--- a/spec/components/step_by_step_nav_related_spec.rb
+++ b/spec/components/step_by_step_nav_related_spec.rb
@@ -59,7 +59,7 @@ def two_links_with_tracking
   it "displays one link inside a heading" do
     render_component(links: one_link)
 
-    this_link = ".gem-c-step-nav-related .gem-c-step-nav-related__heading .gem-c-step-nav-related__link"
+    this_link = ".gem-c-step-nav-related .gem-c-step-nav-related__heading .govuk-link"
 
     assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__heading .gem-c-step-nav-related__pretitle", text: "Part of"
     assert_select "#{this_link}[href='/link1']", text: "Link 1"
@@ -73,10 +73,10 @@ def two_links_with_tracking
   it "displays more than one link in a list" do
     render_component(links: two_links)
 
-    this_link = ".gem-c-step-nav-related .gem-c-step-nav-related__links .gem-c-step-nav-related__link[href='/link2']"
+    this_link = ".gem-c-step-nav-related .gem-c-step-nav-related__links .govuk-link[href='/link2']"
 
     assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__heading .gem-c-step-nav-related__pretitle", text: "Part of"
-    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__links .gem-c-step-nav-related__link[href='/link1']", text: "Link 1"
+    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__links .govuk-link[href='/link1']", text: "Link 1"
     assert_select this_link, text: "Link 2"
     assert_select "#{this_link}[data-track-category='stepNavPartOfClicked']"
     assert_select "#{this_link}[data-track-action='Part of']"
@@ -89,26 +89,26 @@ def two_links_with_tracking
     render_component(links: one_link, pretitle: "Moo")
 
     assert_select ".gem-c-step-nav-related__pretitle", text: "Moo"
-    assert_select ".gem-c-step-nav-related__link[data-track-action='Moo']"
+    assert_select ".govuk-link[data-track-action='Moo']"
   end
 
   it "adds a tracking id to one link" do
     render_component(links: one_link_with_tracking)
 
-    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link[data-track-options='{\"dimension96\" : \"peter\" }']"
+    assert_select ".gem-c-step-nav-related .govuk-link[data-track-options='{\"dimension96\" : \"peter\" }']"
   end
 
   it "adds a tracking id to every link when there are more than one" do
     render_component(links: two_links_with_tracking)
 
-    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link-item:nth-child(1) .gem-c-step-nav-related__link[data-track-options='{\"dimension96\" : \"peter\" }']"
-    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link-item:nth-child(2) .gem-c-step-nav-related__link[data-track-options='{\"dimension96\" : \"paul\" }']"
+    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link-item:nth-child(1) .govuk-link[data-track-options='{\"dimension96\" : \"peter\" }']"
+    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__link-item:nth-child(2) .govuk-link[data-track-options='{\"dimension96\" : \"paul\" }']"
   end
 
   it "displays as a list when always_display_as_list is passed in" do
     render_component(links: one_link, always_display_as_list: true)
 
     assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__heading .gem-c-step-nav-related__pretitle", text: "Part of"
-    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__links .gem-c-step-nav-related__link[href='/link1']", text: "Link 1"
+    assert_select ".gem-c-step-nav-related .gem-c-step-nav-related__links .govuk-link[href='/link1']", text: "Link 1"
   end
 end
diff --git a/spec/features/step_nav_helper_spec.rb b/spec/features/step_nav_helper_spec.rb
index 8846c4934c..5292be2b2e 100644
--- a/spec/features/step_nav_helper_spec.rb
+++ b/spec/features/step_nav_helper_spec.rb
@@ -28,7 +28,7 @@
       expect(page).to have_selector(".gem-c-step-nav-related")
 
       within(".gem-c-step-nav-related") do
-        expect(page).to have_selector(".gem-c-step-nav-related__link", count: 1)
+        expect(page).to have_selector(".govuk-link", count: 1)
         expect(page).to have_link("Learn to spacewalk: small step by giant leap", href: "/learn-to-spacewalk")
       end
     end
@@ -58,7 +58,7 @@
       expect(page).to have_selector(".gem-c-step-nav-related")
 
       within(".gem-c-step-nav-related") do
-        expect(page).to have_selector(".gem-c-step-nav-related__link", count: 1)
+        expect(page).to have_selector(".govuk-link", count: 1)
         expect(page).to have_link("Learn to spacewalk: small step by giant leap", href: "/learn-to-spacewalk")
       end
     end

From 28c5acbafb340664ade040bce41002f6f1c7c0d3 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Wed, 7 Apr 2021 09:32:53 +0100
Subject: [PATCH 14/16] Add micro-documentation for Govspeak button

---
 .../components/govspeak/_button.scss               | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
index eb20a93fb5..7c1a9f45f1 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
@@ -2,6 +2,20 @@
 .gem-c-govspeak {
   @import "govuk/components/button/button";
 
+  // Some links in Govspeak should look like buttons[1] when using:
+  // ```
+  //    {button}[Random page](https://gov.uk/random){/button}
+  // ```.
+  //
+  // To make sure that the link styles don't override the button styles this
+  // needs more specificity.
+  //
+  // Govspeak targets link by using element selectors; so the selector
+  // `.gem-c-govspeak a:link` will override `.govuk-button`. Extending
+  // `govuk-button` here gives `gem-c-govspeak .gem-c-button` and prevents the
+  // link-that-looks-like-a-button from being overriden.
+
+  // [1]: https://github.com/alphagov/govspeak#button
   .gem-c-button {
     @extend .govuk-button;
   }

From 047539071e714cd7c1d15da1c577edd6913b4071 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Thu, 8 Apr 2021 11:56:06 +0100
Subject: [PATCH 15/16] Move variables to `govuk_frontend_support.scss`

---
 .../govuk_publishing_components/components/_action-link.scss    | 2 --
 .../govuk_publishing_components/govuk_frontend_support.scss     | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss
index bc35de4586..9b6f497570 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss
@@ -1,5 +1,3 @@
-$gem-hover-dark-background: #dddcdb;
-
 .gem-c-action-link {
   display: table;
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss b/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss
index 8a74a2b44e..535d87c759 100644
--- a/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss
@@ -15,3 +15,5 @@ $gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legac
 
 $gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
+
+$gem-hover-dark-background: #dddcdb;

From df152c1e3b7cacc5316b1403d1338ba809860fc7 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 13 Apr 2021 13:51:44 +0100
Subject: [PATCH 16/16] Update change log

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf90e04a5f..794e784d6f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ## Unreleased
 * Tidy up untranslated content and formatting on accordion docs ([PR #1958](https://github.com/alphagov/govuk_publishing_components/pull/1958)) PATCH
 * Add visual regression testing tool Percy ([PR #1013](https://github.com/alphagov/govuk_publishing_components/pull/1013)) PATCH
+* Remove @extend from component Sass ([PR #2002](https://github.com/alphagov/govuk_publishing_components/pull/2002)) PATCH
 
 ## 24.9.1