Merge pull request #4969 from alphagov/sass-refactor

andysellick · web-flow · commit 8e19ba12ecc6 · 2025-09-15T10:28:42.000+01:00
Remove unneeded Sass mixins
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Remove unneeded Sass mixins ([PR #4969](https://github.com/alphagov/govuk_publishing_components/pull/4969))
 * Upgrade to LUX version 4.3.2 ([PR #5018](https://github.com/alphagov/govuk_publishing_components/pull/5018))
 
 ## 60.2.1
diff --git a/app/assets/stylesheets/govuk_publishing_components/component_support.scss b/app/assets/stylesheets/govuk_publishing_components/component_support.scss
@@ -8,8 +8,6 @@
 
 @import "govuk_publishing_components/components/helpers/brand-colours";
 @import "govuk_publishing_components/components/helpers/link";
-@import "govuk_publishing_components/components/mixins/govuk-template-link-focus-override";
-@import "govuk_publishing_components/components/mixins/media-down";
 @import "govuk_publishing_components/components/mixins/margins";
 @import "govuk_publishing_components/components/mixins/css3";
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_cards.scss b/app/assets/stylesheets/govuk_publishing_components/components/_cards.scss
@@ -1,6 +1,6 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "mixins/grid-helper";
-@import "mixins/prefixed-transform";
+@import "mixins/css3";
 
 .gem-c-cards__heading {
   @include govuk-responsive-margin(6, "bottom");
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss
@@ -25,10 +25,6 @@
   @include govuk-font($size: 16);
 }
 
-.gem-c-contents-list__link {
-  @include govuk-template-link-focus-override;
-}
-
 .gem-c-contents-list__list-item--parent > .gem-c-contents-list__link {
   font-weight: $govuk-font-weight-bold;
 }
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss
@@ -8,10 +8,10 @@ $logo-height: 30px;
 $toggle-border-height: 3px;
 
 .gem-c-rebranded-one-login-header {
-  @include govuk-font($size: 16);
   color: govuk-colour("white");
   position: relative;
   background: $govuk-brand-colour;
+  @include govuk-font($size: 16);
 }
 
 .gem-c-rebranded-one-login-header__container {
@@ -58,11 +58,11 @@ $toggle-border-height: 3px;
 .gem-c-rebranded-one-login-header__link--homepage {
   // Font size needs to be set on the link so that the box sizing is correct
   // in Firefox
-  @include govuk-font($size: false, $weight: bold);
   display: inline;
   margin-right: govuk-spacing(2);
   font-size: 30px; // We don't have a mixin that produces 30px font size
   line-height: 1;
+  @include govuk-font($size: false, $weight: bold);
 
   @include govuk-media-query($from: tablet) {
     &:focus {
@@ -97,9 +97,9 @@ $toggle-border-height: 3px;
 .gem-c-rebranded-one-login-header__nav__link {
   &:link,
   &:visited {
+    text-decoration: none;
     @include govuk-typography-common;
     @include govuk-link-style-inverse;
-    text-decoration: none;
 
     &:hover {
       text-decoration: underline;
@@ -278,7 +278,6 @@ $toggle-border-height: 3px;
 
 .gem-c-rebranded-cross-service-header__toggle {
   display: none;
-  @include govuk-font($size: 16, $weight: bold);
   position: absolute;
   right: 0;
   top: 0;
@@ -289,6 +288,7 @@ $toggle-border-height: 3px;
   color: inherit;
   padding: $toggle-padding $toggle-padding calc($toggle-padding + 1px) $toggle-padding;
   margin-right: -(govuk-spacing(3));
+  @include govuk-font($size: 16, $weight: bold);
 
   @mixin toggle-button-focus {
     color: $govuk-focus-text-colour;
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -1,6 +1,6 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/header/header";
-@import "mixins/prefixed-transform";
+@import "mixins/css3";
 @import "mixins/grid-helper";
 
 $chevron-breakpoint: 360px;
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss b/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss
@@ -50,8 +50,6 @@
   @include govuk-media-query($from: tablet) {
     line-height: 1.28;
   }
-
-  @include govuk-template-link-focus-override;
 }
 
 .gem-c-related-navigation__link--truncated-links {
@@ -70,19 +68,10 @@
 
 .gem-c-related-navigation__section-link {
   font-weight: bold;
-
-  @include govuk-template-link-focus-override;
 }
 
 .gem-c-related-navigation__section-link--other {
   font-weight: normal;
-
-  @include govuk-template-link-focus-override;
-}
-
-.gem-c-related-navigation__section-link--footer {
-
-  @include govuk-template-link-focus-override;
 }
 
 .gem-c-related-navigation__section-link--inline {
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_search.scss b/app/assets/stylesheets/govuk_publishing_components/components/_search.scss
@@ -1,5 +1,6 @@
 @use "sass:color";
 @import "govuk_publishing_components/individual_component_support";
+@import "mixins/css3";
 
 $input-size: 40px;
 $large-input-size: 50px;
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss b/app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss
@@ -16,7 +16,7 @@ $choices-border-radius-item: 0 !default;
 $choices-z-index: 2 !default;
 $choices-button-dimension: 12px !default;
 
-@import "mixins/prefixed-transform";
+@import "mixins/css3";
 @import "govuk/components/label/label";
 @import "choices.js/src/styles/choices";
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
@@ -24,7 +24,6 @@ $share-button-height: 30px;
 .gem-c-share-links__link {
   margin-right: govuk-spacing(6);
   @include govuk-font(16, $weight: bold);
-  @include govuk-template-link-focus-override;
 }
 
 .gem-c-share-links__link-icon {
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss
@@ -1,4 +1,5 @@
 @import "govuk_publishing_components/individual_component_support";
+@import "mixins/css3";
 
 .gem-c-subscription-links {
   @include govuk-text-colour;
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss b/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
@@ -3,7 +3,6 @@
 .gem-c-translation-nav {
   margin-bottom: govuk-spacing(6);
   border-bottom: 1px solid $govuk-border-colour;
-  @include responsive-top-margin;
   @include govuk-text-colour;
   @include govuk-font(16);
 }
@@ -49,7 +48,3 @@
   border-right: 0;
   border-left: 0;
 }
-
-.gem-c-translation-nav--no-margin-top {
-  margin-top: 0;
-}
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss
@@ -6,6 +6,7 @@
 // - alphagov/govspeak: ✔︎
 
 // stylelint-disable max-nesting-depth
+@use "sass:color";
 
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
@@ -38,7 +39,7 @@
         width: $thumbnail-width;
         height: 140px;
         background: govuk-colour("white");
-        outline: $govuk-border-width solid transparentize(govuk-colour("black"), .9);
+        outline: $govuk-border-width solid color.adjust(govuk-colour("black"), $alpha: -0.9);
         box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4);
       }
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss
@@ -10,6 +10,7 @@
 // https://github.com/alphagov/magna-charta/blob/master/demo/stylesheets/magna-charta.css
 
 // stylelint-disable max-nesting-depth
+@use "sass:list";
 
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
@@ -92,9 +93,9 @@
       }
 
       // Key colours
-      @for $i from 0 to length($bar-colours) {
+      @for $i from 0 to list.length($bar-colours) {
         .mc-key-#{$i + 1} {
-          border-left-color: nth($bar-colours, $i + 1);
+          border-left-color: list.nth($bar-colours, $i + 1);
         }
       }
     }
@@ -150,10 +151,10 @@
         }
 
         // Bar colours
-        @for $i from 0 to length($bar-colours) {
+        @for $i from 0 to list.length($bar-colours) {
           .mc-bar-#{$i + 1} {
-            background-color: nth($bar-colours, $i + 1);
-            color: nth($bar-text-colours, $i + 1);
+            background-color: list.nth($bar-colours, $i + 1);
+            color: list.nth($bar-text-colours, $i + 1);
           }
         }
 
@@ -211,15 +212,15 @@
     }
 
     // Charts with multiple columns get different coloured bars
-    $len: length($bar-colours);
+    $len: list.length($bar-colours);
 
     @for $i from 0 to $len {
       .mc-tr .mc-td.mc-bar-cell.mc-bar-#{$i + 1} {
-        background-color: nth($bar-colours, $i + 1);
+        background-color: list.nth($bar-colours, $i + 1);
       }
 
       .mc-tr .mc-th.mc-key-#{$i + 1} {
-        border-left-color: nth($bar-colours, $i + 1);
+        border-left-color: list.nth($bar-colours, $i + 1);
       }
     }
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/mixins/_css3.scss b/app/assets/stylesheets/govuk_publishing_components/components/mixins/_css3.scss
@@ -3,3 +3,9 @@
   -ms-transform: scale($size);  // IE 9
   transform: scale($size);  // Firefox 16+, IE 10+, Opera
 }
+
+@mixin prefixed-transform($translateY: 0, $rotate: 0, $scale: 1) {
+  -webkit-transform: translateY($translateY) rotate($rotate) scale($scale);
+  -ms-transform: translateY($translateY) rotate($rotate) scale($scale);
+  transform: translateY($translateY) rotate($rotate) scale($scale);
+}
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/mixins/_govuk-template-link-focus-override.scss b/app/assets/stylesheets/govuk_publishing_components/components/mixins/_govuk-template-link-focus-override.scss
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss b/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss
@@ -5,16 +5,3 @@
     margin-bottom: govuk-spacing(7);
   }
 }
-
-@mixin responsive-top-margin {
-  margin-top: govuk-spacing(3);
-
-  @include govuk-media-query($from: tablet) {
-    margin-top: govuk-spacing(7);
-  }
-}
-
-@mixin responsive-vertical-margins {
-  @include responsive-bottom-margin;
-  @include responsive-top-margin;
-}
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss b/app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/mixins/_prefixed-transform.scss b/app/assets/stylesheets/govuk_publishing_components/components/mixins/_prefixed-transform.scss
diff --git a/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss b/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss
@@ -4,9 +4,6 @@
 @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";
 
 $govuk-suppressed-warnings: (
   organisation-colours
diff --git a/app/views/govuk_publishing_components/components/docs/translation_nav.yml b/app/views/govuk_publishing_components/components/docs/translation_nav.yml
@@ -74,17 +74,6 @@ examples:
       - locale: 'cy'
         base_path: '/cy'
         text: 'Cymraeg'
-  with_no_top_margin:
-    data:
-      no_margin_top: true
-      translations:
-      - locale: 'en'
-        base_path: '/en'
-        text: 'English'
-        active: true
-      - locale: 'cy'
-        base_path: '/cy'
-        text: 'Cymraeg'
   with_data_attributes_on_links:
     description: Data attributes can be passed for each link as shown.
     data:
diff --git a/lib/govuk_publishing_components/presenters/translation_nav_helper.rb b/lib/govuk_publishing_components/presenters/translation_nav_helper.rb
@@ -6,7 +6,6 @@ class TranslationNavHelper
       def initialize(local_assigns)
         @translations = []
         @translations = local_assigns[:translations] if local_assigns[:translations]
-        @no_margin_top = local_assigns[:no_margin_top]
         @inverse = local_assigns[:inverse]
       end
 
@@ -17,17 +16,12 @@ def has_translations?
       def classes
         classes = %w[gem-c-translation-nav]
         classes << inverse_class if @inverse
-        classes << margin_class if @no_margin_top
         classes.join(" ")
       end
 
       def inverse_class
         "gem-c-translation-nav--inverse"
       end
-
-      def margin_class
-        "gem-c-translation-nav--no-margin-top"
-      end
     end
   end
 end
diff --git a/spec/components/translation_nav_spec.rb b/spec/components/translation_nav_spec.rb
@@ -76,11 +76,6 @@ def multiple_translations
     assert_select ".gem-c-translation-nav .brand__color"
   end
 
-  it "has no margin top when option passed" do
-    render_component(translations: multiple_translations, no_margin_top: true)
-    assert_select ".gem-c-translation-nav--no-margin-top"
-  end
-
   it "renders as inverse when option passed" do
     render_component(translations: multiple_translations, inverse: true)
     assert_select ".gem-c-translation-nav--inverse"

Original file line number	Diff line number	Diff line change
`@@ -25,10 +25,6 @@`
`25`	`25`	`@include govuk-font($size: 16);`
`26`	`26`	`}`
`27`	`27`
`28`		`-.gem-c-contents-list__link {`
`29`		`- @include govuk-template-link-focus-override;`
`30`		`-}`
`31`		`-`
`32`	`28`	`.gem-c-contents-list__list-item--parent > .gem-c-contents-list__link {`
`33`	`29`	`font-weight: $govuk-font-weight-bold;`
`34`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,8 +50,6 @@`
`50`	`50`	`@include govuk-media-query($from: tablet) {`
`51`	`51`	`line-height: 1.28;`
`52`	`52`	`}`
`53`		`-`
`54`		`- @include govuk-template-link-focus-override;`
`55`	`53`	`}`
`56`	`54`
`57`	`55`	`.gem-c-related-navigation__link--truncated-links {`
`@@ -70,19 +68,10 @@`
`70`	`68`
`71`	`69`	`.gem-c-related-navigation__section-link {`
`72`	`70`	`font-weight: bold;`
`73`		`-`
`74`		`- @include govuk-template-link-focus-override;`
`75`	`71`	`}`
`76`	`72`
`77`	`73`	`.gem-c-related-navigation__section-link--other {`
`78`	`74`	`font-weight: normal;`
`79`		`-`
`80`		`- @include govuk-template-link-focus-override;`
`81`		`-}`
`82`		`-`
`83`		`-.gem-c-related-navigation__section-link--footer {`
`84`		`-`
`85`		`- @include govuk-template-link-focus-override;`
`86`	`75`	`}`
`87`	`76`
`88`	`77`	`.gem-c-related-navigation__section-link--inline {`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,6 @@ $share-button-height: 30px;`
`24`	`24`	`.gem-c-share-links__link {`
`25`	`25`	`margin-right: govuk-spacing(6);`
`26`	`26`	`@include govuk-font(16, $weight: bold);`
`27`		`- @include govuk-template-link-focus-override;`
`28`	`27`	`}`
`29`	`28`
`30`	`29`	`.gem-c-share-links__link-icon {`