govuk_publishing_components 24.9.1 → 24.10.1

data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -53,8 +53,8 @@ $large-input-size: 50px;
   @include govuk-font($size: 19, $line-height: (28 / 19));
   margin: 0;
   width: 100%;
-  height: em(40, 16);
-  padding: em(6, 16);
+  height: govuk-em(40, 16);
+  padding: govuk-em(6, 16);
   border: $govuk-border-width-form-element solid $govuk-input-border-colour;
   background: govuk-colour("white");
   border-radius: 0; //otherwise iphones apply an automatic border radius
@@ -63,8 +63,8 @@ $large-input-size: 50px;
   -moz-appearance: none;
   appearance: none;
   @include govuk-media-query($from: tablet) {
-    height: em(40, 19);
-    padding: em(6, 19);
+    height: govuk-em(40, 19);
+    padding: govuk-em(6, 19);
   }
 
   // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in

data/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;

data/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;
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -15,12 +15,12 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 @mixin step-nav-line-position {
   left: 0;
-  margin-left: em(($number-circle-size / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(($number-circle-size / 2) - ($stroke-width / 2), 16);
 }
 
 @mixin step-nav-line-position-large {
   left: 0;
-  margin-left: em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
 }
 
 // custom mixin as govuk-font does undesirable things at different breakpoints
@@ -136,10 +136,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__chevron {
   display: inline-block;
   vertical-align: middle;
-  margin-left: em(5, 14);
+  margin-left: govuk-em(5, 14);
 
   .gem-c-step-nav--large & {
-    margin-left: em(5, 16);
+    margin-left: govuk-em(5, 16);
   }
 
   svg {
@@ -150,18 +150,18 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__button-text {
   display: inline-block;
   text-align: left;
-  min-width: em(35, 14);
+  min-width: govuk-em(35, 14);
 
   .gem-c-step-nav--large & {
-    min-width: em(40, 16);
+    min-width: govuk-em(40, 16);
   }
 }
 
 .gem-c-step-nav__button-text--all {
-  min-width: em(87, 14);
+  min-width: govuk-em(87, 14);
 
   .gem-c-step-nav--large & {
-    min-width: em(100, 16);
+    min-width: govuk-em(100, 16);
   }
 }
 
@@ -172,23 +172,23 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__step {
   position: relative;
-  padding-left: em(govuk-spacing(6) + govuk-spacing(3), 16);
+  padding-left: govuk-em(govuk-spacing(6) + govuk-spacing(3), 16);
   list-style: none;
 
   // line down the side of a step
   &:after {
     @include step-nav-vertical-line;
     @include step-nav-line-position;
-    top: em(govuk-spacing(3), 16);
+    top: govuk-em(govuk-spacing(3), 16);
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      padding-left: em(govuk-spacing(9), 16);
+      padding-left: govuk-em(govuk-spacing(9), 16);
 
       &:after { // stylelint-disable-line max-nesting-depth
         @include step-nav-line-position-large;
-        top: em(govuk-spacing(6), 16);
+        top: govuk-em(govuk-spacing(6), 16);
       }
     }
   }
@@ -246,8 +246,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   z-index: 5;
   top: 3px;
   left: 0;
-  width: em($number-circle-size, 16);
-  height: em($number-circle-size, 16);
+  width: govuk-em($number-circle-size, 16);
+  height: govuk-em($number-circle-size, 16);
   color: govuk-colour("black");
   background: govuk-colour("white");
   border-radius: 100px;
@@ -256,8 +256,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
       top: 11px;
-      width: em($number-circle-size-large, 19);
-      height: em($number-circle-size-large, 19);
+      width: govuk-em($number-circle-size-large, 19);
+      height: govuk-em($number-circle-size-large, 19);
     }
   }
 }
@@ -283,15 +283,15 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__circle--logic {
   @include step-nav-font(19, $weight: bold, $line-height: 28px);
   left: 3px;
-  width: em($number-circle-size, 19);
-  height: em($number-circle-size, 19);
+  width: govuk-em($number-circle-size, 19);
+  height: govuk-em($number-circle-size, 19);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
 
     @include govuk-media-query($from: tablet) {
-      width: em($number-circle-size-large, 24);
-      height: em($number-circle-size-large, 24);
+      width: govuk-em($number-circle-size-large, 24);
+      height: govuk-em($number-circle-size-large, 24);
     }
   }
 }

data/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;

data/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");
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss

@@ -1,33 +1,36 @@
 $info-background: #d5e8f3;
 $high-alert-border: #cc0000;
 
-.gem-c-govspeak .advisory {
-  background-image: image-url("govuk_publishing_components/icon-important.svg");
-  background-repeat: no-repeat;
-  background-size: 30px 30px;
-  background-position: 98% center;
-  background-color: $info-background;
-  line-height: 1.3em;
-  margin: 0 -1em 1em;
-  padding: govuk-spacing(3) govuk-spacing(8) govuk-spacing(3) govuk-spacing(3);
-  text-align: left;
+.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 {
+  .advisory {
+    background-image: image-url("govuk_publishing_components/icon-important.svg");
+    background-repeat: no-repeat;
+    background-size: 30px 30px;
+    background-position: 98% center;
+    background-color: $info-background;
+    line-height: 1.3em;
+    margin: 0 -1em 1em;
+    padding: govuk-spacing(3) govuk-spacing(8) govuk-spacing(3) govuk-spacing(3);
+    text-align: left;
 
-  p {
-    margin: 0 .75em 0 0;
-    min-height: 1.75em;
-    padding-right: 3em;
-  }
+    p {
+      margin: 0 .75em 0 0;
+      min-height: 1.75em;
+      padding-right: 3em;
+    }
 
-  strong {
-    font-weight: 400;
-  }
+    strong {
+      font-weight: 400;
+    }
 
-  &.high-alert {
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
-    border: 1px solid $high-alert-border;
-  }
+    &.high-alert {
+      background-color: govuk-colour("light-grey", $legacy: "grey-3");
+      border: 1px solid $high-alert-border;
+    }
 
-  @include govuk-media-query($until: tablet) {
-    margin: 0 0 1em;
+    @include govuk-media-query($until: tablet) {
+      margin: 0 0 1em;
+    }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss

@@ -7,8 +7,8 @@
 
 // stylelint-disable max-nesting-depth
 
+.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 {
-
   // Scope attachment and attachment-link component styles to gem-c-govspeak
   @import "../attachment-link";
   @import "../attachment";

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss

@@ -1,7 +1,22 @@
-@import "govuk/components/button/button";
-
 // stylelint-disable scss/at-extend-no-missing-placeholder
+.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 {
+  @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;
   }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss

@@ -6,6 +6,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.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 {
   .call-to-action {
     margin: 2em 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -11,6 +11,7 @@
 
 // stylelint-disable max-nesting-depth
 
+.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 {
   // DEFAULT CHART STYLES
 
@@ -271,7 +272,6 @@
   }
 
   .mc-toggle-button {
-    @extend %govuk-body-s;
     border: 1px solid $govuk-border-colour;
     color: $govuk-link-colour;
     cursor: pointer;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss

@@ -7,6 +7,7 @@
 
 // stylelint-disable max-nesting-depth
 
+.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 {
   // .address is used by the `$A` markdown pattern
   .address,

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss

@@ -5,6 +5,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.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 {
   .example {
     border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3");

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss

@@ -11,6 +11,7 @@
 
 // stylelint-disable max-nesting-depth
 
+.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 {
   .footnotes {
     border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss

@@ -1,21 +1,24 @@
-.gem-c-govspeak .form-download {
-  padding: .25em 0;
+.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 {
+  .form-download {
+    padding: .25em 0;
 
-  @include govuk-media-query($until: tablet) {
-    margin: 1em 0 1.5em;
-  }
+    @include govuk-media-query($until: tablet) {
+      margin: 1em 0 1.5em;
+    }
 
-  p {
-    padding-right: 3em;
-  }
+    p {
+      padding-right: 3em;
+    }
 
-  a {
-    display: block;
-    font-weight: 600;
-    background-image: image-url("govuk_publishing_components/icon-file-download.svg");
-    background-repeat: no-repeat;
-    background-size: 40px 40px;
-    min-height: 2.5em;
-    padding: 0 0 0 50px;
+    a {
+      display: block;
+      font-weight: 600;
+      background-image: image-url("govuk_publishing_components/icon-file-download.svg");
+      background-repeat: no-repeat;
+      background-size: 40px 40px;
+      min-height: 2.5em;
+      padding: 0 0 0 50px;
+    }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss

@@ -6,6 +6,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✘
 
+.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 {
   .fraction {
     sup,

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -3,41 +3,44 @@
 $highlight-answer-bg-color: govuk-colour("green");
 $highlight-answer-color: govuk-colour("white");
 
-.gem-c-govspeak .highlight-answer {
-  background-color: $highlight-answer-bg-color;
-  color: $highlight-answer-color;
-  text-align: center;
-  padding: 1.75em .75em 1.25em;
-  margin: 0 -1em 1em;
-
-  p {
-    @include govuk-font($size: 24, $weight: bold);
+.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 {
+  .highlight-answer {
+    background-color: $highlight-answer-bg-color;
     color: $highlight-answer-color;
+    text-align: center;
+    padding: 1.75em .75em 1.25em;
+    margin: 0 -1em 1em;
 
-    em {
-      @include govuk-font($size: 80, $weight: bold);
-      display: block;
-      padding-top: .1em;
+    p {
+      @include govuk-font($size: 24, $weight: bold);
       color: $highlight-answer-color;
-    }
-  }
 
-  p:last-child {
-    margin-bottom: 0;
-  }
+      em {
+        @include govuk-font($size: 80, $weight: bold);
+        display: block;
+        padding-top: .1em;
+        color: $highlight-answer-color;
+      }
+    }
 
-  @include govuk-media-query($until: tablet) {
-    margin: 0 0 1em;
-    @include govuk-font($size: 48);
+    p:last-child {
+      margin-bottom: 0;
+    }
 
-    p {
-      font-size: 1em;
-      line-height: inherit;
+    @include govuk-media-query($until: tablet) {
+      margin: 0 0 1em;
+      @include govuk-font($size: 48);
 
-      em {
+      p {
         font-size: 1em;
-        padding-top: 0;
-        display: inline;
+        line-height: inherit;
+
+        em {
+          font-size: 1em;
+          padding-top: 0;
+          display: inline;
+        }
       }
     }
   }