Merge pull request #2002 from alphagov/remove-extend-from-some-compon…

…ents Remove `@extend` from component Sass
alphagov · Apr 13, 2021 · 6b8714f · 6b8714f
2 parents 4bcba19 + df152c1
commit 6b8714f
Show file tree

Hide file tree

Showing 27 changed files with 62 additions and 56 deletions.
diff --git 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
 

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
@@ -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/_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/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/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/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/...ets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss b/...ets/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/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/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/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/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/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/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/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
@@ -1,7 +1,21 @@
-@import "govuk/components/button/button";
-
 // stylelint-disable scss/at-extend-no-missing-placeholder
 .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;
   }

diff --git 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;

diff --git 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,18 @@
 // 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%);
+
+$gem-hover-dark-background: #dddcdb;
diff --git 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]
             )
           %>

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
@@ -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"

diff --git 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?
 %>
 

diff --git 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">

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
@@ -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="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="govuk-link"
                 data-track-category="stepNavPartOfClicked"
                 data-track-action="<%= pretitle %>"
                 data-track-label="<%= link[:href] %>"

diff --git 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 %>

diff --git 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 %>

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
@@ -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: "" %>

diff --git 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
 

diff --git 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
@@ -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