RubyGems - govuk_publishing_components - Versions diffs - 52.1.0 → 54.0.0 - Mend

govuk_publishing_components 52.1.0 → 54.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 65d358986b5bbd3ce3b30799d7cf7222b529b5c423633090273f08edb53b0bba
-  data.tar.gz: f9552e528d85ae9ba87045e65527e82a47eb13847713f8d8a7d6f2557e0e8328
+  metadata.gz: 45d09b1fcf62542a7497ba78e1b60618d092fc528646495b1f296aa64f54e59e
+  data.tar.gz: b25260a62d83b0395457eb8921ca7547eb775802c2c0a4fbbf851e8c5df46a1f
 SHA512:
-  metadata.gz: f6d4f5ed822cef7d67afcf398939c6e900bc1da3c35aa2701832680363aede5b7a8e882c64d744c771e1dbf9de683a4412353c7e7fdead23a6b4243425cf18f1
-  data.tar.gz: 52242c912e87ea2e6f7f0f6a4ed8ca91ea67b25ad485d0065b87659b44fd03ef3cd66ac58297a6e6ea1df082aa3e45c929f5c25bce323e0ffd9543f27aa74618
+  metadata.gz: acac17226a90dbd3083c33379ded3fcd64d9e53b6ee9a5f9390240a9bf7b720ac90c5eff2b94133ad5d34f0d347efb7f646c6a51af89eca386e03d0413d5aa85
+  data.tar.gz: 2840251f9834711840167a93322dd66508397f8f52769115cbb0023327eb44a9f9586c100dc3243f978c2d482a8a70920f0cc6b3b31049600bcef16d5ad90b55

data/app/assets/stylesheets/component_guide/application.scss CHANGED Viewed

@@ -13,7 +13,7 @@ $gem-guide-border-width: 1px;
   @extend %govuk-list--bullet;
   li {
-    margin-bottom: $govuk-gutter-half;
+    margin-bottom: govuk-spacing(3);
     @include govuk-font($size: 19);
   }
@@ -27,7 +27,7 @@ $gem-guide-border-width: 1px;
   .js-enabled & {
     display: block;
-    margin-top: $govuk-gutter * 2;
+    margin-top: govuk-spacing(9);
   }
 }
@@ -45,8 +45,8 @@ $gem-guide-border-width: 1px;
 .component-violation {
   border: 3px solid $govuk-error-colour;
-  margin: 0 0 $govuk-gutter;
-  padding: $govuk-gutter $govuk-gutter;
+  margin: 0 0 govuk-spacing(6);
+  padding: govuk-spacing(6);
   @include govuk-text-colour;
   .component-violation__title {
@@ -57,13 +57,13 @@ $gem-guide-border-width: 1px;
   .component-violation__link {
     display: block;
     color: $govuk-error-colour;
-    margin: $govuk-gutter-half 0;
+    margin: govuk-spacing(3) 0;
     @include govuk-font($size: 19, $weight: bold);
   }
 }
 .component-doc-h2 {
-  margin: ($govuk-gutter * 1.5) 0 $govuk-gutter;
+  margin: (govuk-spacing(6) * 1.5) 0 govuk-spacing(6);
   @include govuk-text-colour;
   @include govuk-font($size: 27, $weight: bold);
@@ -72,15 +72,9 @@ $gem-guide-border-width: 1px;
   }
 }
-.component-doc-h3 {
-  margin: $govuk-gutter 0 $govuk-gutter-half;
-  @include govuk-text-colour;
-  @include govuk-font($size: 19, $weight: bold);
-}
 .component-call {
   margin-top: -$gem-guide-border-width;
-  margin-bottom: $govuk-gutter-half;
+  margin-bottom: govuk-spacing(3);
   font-family: Consolas, Monaco, "Andale Mono", monospace;
   font-size: 16px;
@@ -97,7 +91,7 @@ $gem-guide-border-width: 1px;
   > pre {
     margin: 0;
-    padding: $govuk-gutter;
+    padding: govuk-spacing(6);
     max-height: 300px;
     overflow: auto;
     font-family: inherit;
@@ -116,7 +110,7 @@ $gem-guide-border-width: 1px;
 }
 .component-guide-preview {
-  padding: $govuk-gutter;
+  padding: govuk-spacing(6);
   border: $gem-guide-border-width solid $govuk-border-colour;
   position: relative;
@@ -168,7 +162,7 @@ $gem-guide-border-width: 1px;
   h3,
   h4 {
     margin-top: 0;
-    margin-bottom: calc($govuk-gutter / 2);
+    margin-bottom: govuk-spacing(3);
   }
   h3 a {
@@ -176,7 +170,7 @@ $gem-guide-border-width: 1px;
   }
   h3:not(:first-child) {
-    margin-top: $govuk-gutter;
+    margin-top: govuk-spacing(6);
   }
   ul {
@@ -219,10 +213,10 @@ $gem-guide-border-width: 1px;
 .examples {
   .component-example {
-    margin: 0 0 $govuk-gutter * 1.5;
+    margin: 0 0 govuk-spacing(6) * 1.5;
     .example-title {
-      margin: $govuk-gutter-half 0;
+      margin: govuk-spacing(3) 0;
       @include govuk-text-colour;
       @include govuk-font($size: 24, $weight: bold);
     }
@@ -255,7 +249,7 @@ html {
 }
 .component-guide-preview-page {
-  padding: ($govuk-gutter * 1.5) 0;
+  padding: (govuk-spacing(6) * 1.5) 0;
   position: relative;
   .preview-title {

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss CHANGED Viewed

@@ -85,6 +85,5 @@
 @import "components/tabs";
 @import "components/table";
 @import "components/textarea";
-@import "components/title";
 @import "components/translation-nav";
 @import "components/warning-text";

data/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss CHANGED Viewed

@@ -76,6 +76,18 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
   }
 }
+.govspeak,
+.gem-c-govspeak {
+  .gem-c-attachment__title {
+    @include govuk-font($size: 27, $weight: regular);
+    margin: 0 0 govuk-spacing(3) 0;
+  }
+  .gem-c-attachment__metadata {
+    margin: 0 0 govuk-spacing(3) 0;
+  }
+}
 .gem-c-attachment__metadata--compact {
   margin-bottom: 0;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss CHANGED Viewed

@@ -25,16 +25,16 @@
       @include govuk-font($size: 27, $weight: bold);
     }
-    .stat-headline:first-child {
-      margin-top: govuk-spacing(6);
+    * + h2,
+    * + h3 {
+      padding-top: govuk-spacing(3);
       @include govuk-media-query($from: tablet) {
-        margin-top: govuk-spacing(9) + govuk-spacing(4);
+        padding-top: govuk-spacing(9);
       }
     }
-    h2,
-    h3 {
+    .stat-headline:first-child {
       margin-top: govuk-spacing(6);
       @include govuk-media-query($from: tablet) {
@@ -42,15 +42,6 @@
       }
     }
-    h2:first-child,
-    h3:first-child {
-      margin-top: govuk-spacing(4);
-      @include govuk-media-query($from: tablet) {
-        margin-top: 0;
-      }
-    }
     h3 .number,
     h4 .number,
     h5 .number,

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss CHANGED Viewed

@@ -641,7 +641,7 @@ $after-button-padding-left: govuk-spacing(4);
     right: 0;
     @include focus-not-focus-visible {
-      border-bottom: 1px solid govuk-colour("dark-blue");
+      border-bottom: 1px solid transparent;
       border-left: none;
       position: relative;
     }

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

@@ -24,7 +24,6 @@ $large-input-size: 50px;
 .gem-c-search {
   position: relative;
-  margin-bottom: 30px;
 }
 .gem-c-search__label {

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

@@ -9,28 +9,14 @@
 .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";
-  @import "../details";
-  // This block is duplicated from Whitehall as a transitional step, see the
-  // commit message for 2d893c10ee3f2cab27162b9aba38b12379a71d07 before making
-  // changes, original version:
-  // https://github.com/alphagov/whitehall/blob/main/app/assets/stylesheets/frontend/helpers/_attachment.scss
   $thumbnail-width: 99px;
   .attachment {
     position: relative;
-    margin: govuk-spacing(6) 0;
-    padding: govuk-spacing(3) 0 0 ($thumbnail-width + govuk-spacing(6));
+    margin: 0 0 govuk-spacing(6) 0;
+    padding: 0 0 0 ($thumbnail-width + govuk-spacing(6));
     @include govuk-clearfix;
-    &:first-child {
-      margin-top: 0;
-      padding-top: 0;
-    }
     @include govuk-media-query($media-type: print) {
       padding-left: 0;
     }
@@ -64,12 +50,12 @@
     .attachment-details {
       h2 {
-        margin: 0;
+        margin: 0 0 govuk-spacing(2) 0;
         @include govuk-font($size: 27);
       }
       p {
-        margin: govuk-spacing(2) 0;
+        margin: 0 0 govuk-spacing(2) 0;
       }
       .metadata {

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

@@ -9,18 +9,9 @@
 .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;
+    margin: 0 0 govuk-spacing(4) 0;
     background-color: govuk-colour("light-grey");
-    padding: 2em;
-    &:first-child {
-      margin-top: 0;
-    }
-    p:last-child,
-    ul:last-child,
-    ol:last-child {
-      margin-bottom: 0;
-    }
+    padding: govuk-spacing(6);
+    padding-bottom: govuk-spacing(2);
   }
 }

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

@@ -14,8 +14,7 @@
   .contact {
     border-left: 1px solid govuk-colour("mid-grey");
     padding-left: govuk-spacing(3);
-    margin-bottom: govuk-spacing(6);
-    margin-top: govuk-spacing(6);
+    margin: 0 0 govuk-spacing(6) 0;
   }
   .contact {

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

@@ -9,15 +9,8 @@
 .gem-c-govspeak {
   .example {
     border-left: 10px solid govuk-colour("mid-grey");
-    padding: 1em 0 1em 1em;
-    margin: 2em 0;
-    // Remove margin from the last element
-    p:last-child,
-    ul:last-child,
-    ol:last-child {
-      margin-bottom: 0;
-    }
+    padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
+    margin: 0 0 govuk-spacing(4) 0;
     strong {
       display: block;

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

@@ -15,20 +15,11 @@
 .gem-c-govspeak {
   .footnotes {
     border-top: 1px solid govuk-colour("mid-grey");
-    margin-top: govuk-spacing(6);
-    padding-top: govuk-spacing(2);
+    margin: 0 0 govuk-spacing(4) 0;
+    padding-top: govuk-spacing(4);
     a {
       overflow-wrap: break-word;
     }
-    ol {
-      margin-top: 0;
-      padding-top: 0;
-      li p {
-        margin: 10px 0;
-      }
-    }
   }
 }

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

@@ -1,11 +1,7 @@
 .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;
-    }
+    margin: 0 0 govuk-spacing(4) 0;
     p {
       padding-right: 3em;

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

@@ -10,7 +10,7 @@ $highlight-answer-color: govuk-colour("white");
     color: $highlight-answer-color;
     text-align: center;
     padding: govuk-spacing(5) govuk-spacing(2) govuk-spacing(4);
-    margin: 0 0 govuk-spacing(2);
+    margin: 0 0 govuk-spacing(4);
     p {
       color: $highlight-answer-color;
@@ -29,7 +29,6 @@ $highlight-answer-color: govuk-colour("white");
     }
     @include govuk-media-query($until: tablet) {
-      margin: 0 0 govuk-spacing(2);
       @include govuk-font($size: 48);
       p {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss CHANGED Viewed

@@ -16,8 +16,7 @@
     width: 100%;
     clear: both;
     overflow: hidden;
-    padding: govuk-spacing(2) 0 0;
-    margin: 0;
+    margin: 0 0 govuk-spacing(4) 0;
     img {
       display: inline;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss CHANGED Viewed

@@ -10,14 +10,7 @@
 .gem-c-govspeak {
   .info-notice {
     border-left: 10px solid govuk-colour("mid-grey");
-    padding: 1em 0 1em 1em;
-    margin: 2em 0;
-    // Remove margin from the last element
-    p:last-child,
-    ul:last-child,
-    ol:last-child {
-      margin-bottom: 0;
-    }
+    padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
+    margin: 0 0 govuk-spacing(4) 0;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss CHANGED Viewed

@@ -9,19 +9,6 @@
 .gem-c-govspeak {
   .legislative-list {
     list-style: none;
-    margin: 5px 0;
-    li {
-      margin: 5px 0;
-    }
-    p {
-      margin: 20px 0;
-    }
-    ol {
-      margin: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
-      list-style: none;
-    }
+    margin: 0 0 govuk-spacing(4) 0;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss CHANGED Viewed

@@ -9,8 +9,7 @@
   position: relative;
   height: 0;
   overflow: hidden;
-  margin-top: govuk-spacing(2);
-  margin-bottom: govuk-spacing(2);
+  margin: 0 0 govuk-spacing(4) 0;
   padding-top: 0;
   padding-left: 0;
   padding-right: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss CHANGED Viewed

@@ -2,7 +2,7 @@
 .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 {
   .place {
-    margin: 1.5em 0;
+    margin: 0 0 govuk-spacing(4) 0;
     border-bottom: solid 1px govuk-colour("mid-grey");
     padding-bottom: 1.5em;
@@ -25,10 +25,6 @@
         margin: .25em 0;
       }
     }
-    @include govuk-media-query($until: tablet) {
-      margin: .75em 0;
-    }
   }
 }
 // stylelint-enable max-nesting-depth

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss CHANGED Viewed

@@ -8,13 +8,7 @@
 .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 {
   .stat-headline {
-    margin-bottom: govuk-spacing(3);
-    margin-top: govuk-spacing(3);
-    @include govuk-media-query($from: tablet) {
-      margin-bottom: govuk-spacing(4);
-      margin-top: govuk-spacing(4);
-    }
+    margin: 0 0 govuk-spacing(4) 0;
     p {
       margin: 0;
@@ -23,7 +17,6 @@
     em {
       display: block;
-      margin: 3px 0 -5px;
       @include govuk-font($size: 80, $weight: bold);
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss CHANGED Viewed

@@ -6,7 +6,7 @@
     > li {
       list-style-type: none;
-      margin-left: 0;
+      margin: 0;
       padding: .75em 0 .75em 2.5em;
       position: relative;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss CHANGED Viewed

@@ -11,7 +11,7 @@
     border-collapse: collapse;
     border-spacing: 0;
     display: block;
-    margin: govuk-spacing(6) 0;
+    margin: 0 0 govuk-spacing(6) 0;
     overflow-x: auto;
     width: 100%;
     @include govuk-font($size: 19);

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss CHANGED Viewed

@@ -26,7 +26,6 @@
     ul,
     ol {
-      margin-top: 0;
       margin-bottom: 0;
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss CHANGED Viewed

@@ -14,8 +14,8 @@
     $icon-size: 35px;
     $icon-spacing: 10px;
-    margin: 2em 0;
-    padding-left: calc($icon-size + $icon-spacing);
+    padding: govuk-spacing(3) 0 0 calc($icon-size + $icon-spacing);
+    margin: 0 0 govuk-spacing(6) 0;
     position: relative;
     &::before {
@@ -28,11 +28,4 @@
       @include govuk-font($size: 19, $weight: bold);
     }
   }
-  // Prevent excessive spacing when placed in a call-to-action block
-  .call-to-action {
-    .help-notice:first-child {
-      margin-top: 0;
-    }
-  }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss CHANGED Viewed

@@ -1,25 +1,24 @@
 @mixin markdown-typography {
   @include govuk-text-colour;
   @include govuk-font($size: 16);
-  $gutter-two-thirds: $govuk-gutter - calc($govuk-gutter / 3);
   ol,
   ul,
   p {
-    margin-top: $govuk-gutter-half;
-    margin-bottom: $govuk-gutter-half;
+    margin: 0 0 govuk-spacing(4) 0;
     @include govuk-font($size: 19);
-    @include govuk-media-query($from: tablet) {
-      margin-top: $gutter-two-thirds;
-      margin-bottom: $gutter-two-thirds;
-    }
   }
   // Headings
+  // put some spacing between any element followed by a heading
+  // has to be padding on the heading otherwise margins would overlap
+  * + h2,
+  * + h3 {
+    padding-top: govuk-spacing(4);
+  }
   // Markdown is expected to be styled within a document with a H1 title
   // thus H1's are not expected and are discouraged by bare styling
@@ -30,45 +29,22 @@
   }
   h2 {
-    margin-top: $govuk-gutter;
-    margin-bottom: govuk-spacing(4);
+    margin: 0 0 govuk-spacing(4) 0;
     @include govuk-font($size: 27, $weight: bold);
-    @include govuk-media-query($from: desktop) {
-      margin-top: $govuk-gutter * 1.5;
-    }
   }
   h3 {
-    margin-top: $govuk-gutter + 5px;
-    margin-bottom: 0;
+    margin: 0 0 govuk-spacing(4) 0;
     @include govuk-font($size: 19, $weight: bold);
   }
   // H4, H5 and H6 are discouraged and thus styled the same
   h4,
-  h5,
-  h6 {
-    margin-top: $govuk-gutter + 5px;
-    margin-bottom: 0;
-    @include govuk-font($size: 19, $weight: bold);
-    + p {
-      margin-top: 5px;
-    }
-  }
   h5,
   h6 {
     margin: 0;
-  }
-  h2:first-child,
-  h3:first-child,
-  h4:first-child,
-  p:first-child {
-    margin-top: 0;
+    @include govuk-font($size: 19, $weight: bold);
   }
   // Links
@@ -91,15 +67,8 @@
     // utilise the type attribute for the formatting. Browsers default to a
     // style of decimal.
     list-style-position: outside;
-    margin-left: $gutter-two-thirds;
+    margin: 0 0 govuk-spacing(4) govuk-spacing(4);
     padding: 0;
-    ul,
-    ol {
-      margin-top: 0;
-      margin-bottom: 0;
-      padding: 0;
-    }
   }
   ul {
@@ -107,22 +76,11 @@
   }
   li {
-    margin: 0 0 5px;
+    margin: 0 0 govuk-spacing(2);
     padding: 0;
     p {
-      margin: 0;
-      padding: 0;
-    }
-    p + p,
-    p + ul,
-    p + ol,
-    ul + p,
-    ul + ol,
-    ol + p,
-    ol + ul {
-      margin-top: 5px;
+      margin: 0 0 govuk-spacing(2);
     }
   }
@@ -142,8 +100,8 @@
   // Horizontal Rule
   hr {
-    margin-top: $govuk-gutter - 1px;
-    margin-bottom: $govuk-gutter;
+    margin-top: govuk-spacing(6) - 1px;
+    margin-bottom: govuk-spacing(6);
     border-top: 1px solid $govuk-border-colour;
   }

data/app/controllers/govuk_publishing_components/audit_controller.rb CHANGED Viewed

@@ -17,6 +17,7 @@ module GovukPublishingComponents
         government-frontend
         govspeak
         govspeak-preview
+        govuk-chat
         govuk-developer-docs
         local-links-manager
         manuals-publisher

data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb CHANGED Viewed

@@ -15,7 +15,8 @@
   end
   text = raw(text)
-  cookie_preferences_href ||= "/help/cookies"
+  absolute_links_helper = GovukPublishingComponents::Presenters::AbsoluteLinksHelper.new()
+  cookie_preferences_href ||= absolute_links_helper.make_url_absolute("/help/cookies")
   confirmation_message ||= raw(t("components.cookie_banner.confirmation_message.html",
                                 link: link_to(
                                   t("components.cookie_banner.confirmation_message.link"),

data/app/views/govuk_publishing_components/components/_govspeak.html.erb CHANGED Viewed

@@ -1,5 +1,8 @@
 <%
   add_gem_component_stylesheet("govspeak")
+  add_gem_component_stylesheet("attachment-link")
+  add_gem_component_stylesheet("attachment")
+  add_gem_component_stylesheet("details")
   inverse ||= false
   local_assigns[:margin_bottom] ||= 0

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb CHANGED Viewed

@@ -19,7 +19,6 @@
   omit_footer_border ||= false
   omit_header ||= false
   product_name ||= nil
-  show_explore_header ||= false
   show_cross_service_header ||= false
   draft_watermark ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
@@ -102,32 +101,19 @@
       href: "#content"
     } %>
     <% unless omit_header %>
-      <% if show_explore_header %>
-        <% if homepage %>
-          <%= render "govuk_publishing_components/components/layout_for_public/layout_super_navigation_header_homepage", {
-            logo_link: logo_link,
-          } %>
-        <% else %>
-          <%= render "govuk_publishing_components/components/layout_super_navigation_header", {
-            logo_link: logo_link,
-          } %>
-        <% end %>
-      <% elsif show_cross_service_header %>
+      <% if show_cross_service_header %>
         <%= render "govuk_publishing_components/components/cross_service_header", {
           one_login_navigation_items: one_login_navigation_items,
           service_navigation_items: service_navigation_items,
           product_name: product_name,
         } %>
+      <% elsif homepage %>
+        <%= render "govuk_publishing_components/components/layout_for_public/layout_super_navigation_header_homepage", {
+          logo_link: logo_link,
+        } %>
       <% else %>
-        <%= render "govuk_publishing_components/components/layout_header", {
-          search: show_search,
+        <%= render "govuk_publishing_components/components/layout_super_navigation_header", {
           logo_link: logo_link,
-          navigation_items: navigation_items,
-          product_name: product_name,
-          # The (blue) bottom border needs to be underneath the emergency banner -
-          # so it has been turned off and added in manually.
-          remove_bottom_border: true,
         } %>
       <% end %>
     <% end %>

data/app/views/govuk_publishing_components/components/_search.html.erb CHANGED Viewed

@@ -18,6 +18,7 @@
   no_border ||= false
   size ||= ""
   value ||= ""
+  local_assigns[:margin_bottom] ||= 6
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_data_attribute({ module: "gem-toggle-input-class-on-focus" })

data/app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb CHANGED Viewed

@@ -8,16 +8,20 @@
     raise ArgumentError, "The search_with_autocomplete component requires source_url and source_key"
   end
-  search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key).merge(
+  search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key, :margin_bottom).merge(
     # The `search` component has an inline label by default, but this conflicts with the accessible-
     # autocomplete component's markup and styling. Every potential use of this component is in
     # situations where we want the label not to be inline anyway, so we override the default here.
-    inline_label: false
+    inline_label: false,
+    margin_bottom: 0
   )
   classes = %w[gem-c-search-with-autocomplete]
   classes << "gem-c-search-with-autocomplete--large" if local_assigns[:size] == "large"
   classes << "gem-c-search-with-autocomplete--on-govuk-blue" if local_assigns[:on_govuk_blue]
+  margin_bottom = [*0..9].include?(local_assigns[:margin_bottom]) ? local_assigns[:margin_bottom] : 6
+  classes << "govuk-!-margin-bottom-#{margin_bottom}" if margin_bottom
 %>
 <%= tag.div(
   class: classes.join(" "),

data/app/views/govuk_publishing_components/components/_select.html.erb CHANGED Viewed

@@ -16,8 +16,11 @@
 <% if select_helper.options.any? && id && label %>
   <%= content_tag :div, class: select_helper.css_classes do %>
     <% if is_page_heading %>
-      <% add_gem_component_stylesheet("title") %>
-      <%= tag.h1 label_tag(id, label, class: select_helper.label_classes), class: "gem-c-title__text" %>
+      <% add_gem_component_stylesheet("heading") %>
+      <%= render "govuk_publishing_components/components/heading", {
+        text: label_tag(id, label, class: select_helper.label_classes),
+        heading_level: 1
+      } %>
     <% else %>
       <%= label_tag(id, label, class: select_helper.label_classes) %>
     <% end %>

data/app/views/govuk_publishing_components/components/docs/heading.yml CHANGED Viewed

@@ -106,3 +106,7 @@ examples:
       inverse: true
     context:
       dark_background: true
+  with_nested_html:
+    description: HTML can be rendered within the heading as shown.
+    data:
+      text: <label>This is a label element</label>

data/app/views/govuk_publishing_components/components/docs/inverse_header.yml CHANGED Viewed

@@ -14,9 +14,11 @@ examples:
     data:
       block: |
         <!-- example content -->
-          <%= render "govuk_publishing_components/components/title", {
-            title: "Education, Training and Skills",
-            inverse: true
+          <%= render "govuk_publishing_components/components/heading", {
+            text: "Education, Training and Skills",
+            font_size: "xl",
+            inverse: true,
+            padding: true,
           } %>
           <!-- end of example content -->
   with_custom_padding:
@@ -38,9 +40,11 @@ examples:
         full_width: true
         block: |
           <!-- example content -->
-            <%= render "govuk_publishing_components/components/title", {
-              title: "Education, Training and Skills",
-              inverse: true
+            <%= render "govuk_publishing_components/components/heading", {
+              text: "Education, Training and Skills",
+              font_size: "xl",
+              inverse: true,
+              padding: true,
             } %>
             <!-- end of example content -->
   with_subtext:
@@ -59,10 +63,12 @@ examples:
     data:
       block: |
         <!-- example content -->
-          <%= render "govuk_publishing_components/components/title", {
-            title: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
+          <%= render "govuk_publishing_components/components/heading", {
+            text: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
             inverse: true,
             context: "Notice",
+            padding: true,
+            font_size: "xl"
           } %>
           <p class="publication-header__last-changed">Published 22 April 2016</p>
           <!-- end of example content -->

data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml CHANGED Viewed

@@ -52,7 +52,6 @@ examples:
     description: This allows for rendering the layout super navigation header in a different way for only the homepage.
     data:
       homepage: true
-      show_explore_header: true
   omit_footer_navigation:
     description: This allows the footer navigation to be omitted
     data:

data/app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml CHANGED Viewed

@@ -60,3 +60,10 @@ examples:
       source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
       source_key: suggested_autocomplete
       label_text: <h2 class="govuk-heading-m govuk-!-margin-bottom-1">Search GOV.UK</h2>
+  with_margin_bottom:
+    description: |
+      The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom value of 6.
+    data:
+      source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
+      source_key: suggested_autocomplete
+      margin_bottom: 9

data/lib/govuk_publishing_components/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "52.1.0".freeze
+  VERSION = "54.0.0".freeze
 end

metadata CHANGED Viewed

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 52.1.0
+  version: 54.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
 bindir: bin
 cert_chain: []
-date: 2025-02-21 00:00:00.000000000 Z
+date: 2025-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -331,6 +331,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: simplecov
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: terser
   requirement: !ruby/object:Gem::Requirement
@@ -594,7 +608,6 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_table.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss
-- app/assets/stylesheets/govuk_publishing_components/components/_title.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss
@@ -740,7 +753,6 @@ files:
 - app/views/govuk_publishing_components/components/_table.html.erb
 - app/views/govuk_publishing_components/components/_tabs.html.erb
 - app/views/govuk_publishing_components/components/_textarea.html.erb
-- app/views/govuk_publishing_components/components/_title.html.erb
 - app/views/govuk_publishing_components/components/_translation_nav.html.erb
 - app/views/govuk_publishing_components/components/_warning_text.html.erb
 - app/views/govuk_publishing_components/components/attachment/_thumbnail_document.html.erb
@@ -836,7 +848,6 @@ files:
 - app/views/govuk_publishing_components/components/docs/table.yml
 - app/views/govuk_publishing_components/components/docs/tabs.yml
 - app/views/govuk_publishing_components/components/docs/textarea.yml
-- app/views/govuk_publishing_components/components/docs/title.yml
 - app/views/govuk_publishing_components/components/docs/translation_nav.yml
 - app/views/govuk_publishing_components/components/docs/warning_text.yml
 - app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb

data/app/assets/stylesheets/govuk_publishing_components/components/_title.scss DELETED Viewed

@@ -1,56 +0,0 @@
-@import "govuk_publishing_components/individual_component_support";
-.gem-c-title {
-  @include govuk-media-query($from: tablet) {
-    padding-top: govuk-spacing(8);
-  }
-}
-.gem-c-title--inverse {
-  color: govuk-colour("white");
-  .gem-c-title__text,
-  .gem-c-title__context {
-    color: inherit;
-  }
-}
-.gem-c-title__context-link {
-  text-decoration: none;
-  &:link,
-  &:visited {
-    color: inherit;
-  }
-  &:hover {
-    text-decoration: underline;
-  }
-  &:focus {
-    text-decoration: none;
-    color: $govuk-focus-text-colour;
-  }
-}
-.gem-c-title__text {
-  margin: 0;
-}
-@include govuk-media-query($media-type: print) {
-  .gem-c-title {
-    margin: 5mm 0 10mm !important; // stylelint-disable-line declaration-no-important
-  }
-  .gem-c-title__context {
-    margin: 0;
-  }
-  .gem-c-title__text {
-    margin-top: 0;
-  }
-  .gem-c-title--inverse {
-    color: $govuk-print-text-colour;
-  }
-}

data/app/views/govuk_publishing_components/components/_title.html.erb DELETED Viewed

@@ -1,38 +0,0 @@
-<%
-  add_gem_component_stylesheet("title")
-  average_title_length ||= false
-  context ||= false
-  context_locale ||= false
-  context_inside ||= false
-  inverse ||= false
-  local_assigns[:margin_bottom] ||= 8
-  margin_bottom = [*0..9].include?(local_assigns[:margin_bottom]) ? "govuk-!-margin-bottom-#{local_assigns[:margin_bottom]}" : "govuk-!-margin-bottom-3"
-  classes = %w[gem-c-title]
-  classes << "gem-c-title--inverse" if inverse
-  classes << margin_bottom
-  heading_classes = %w[gem-c-title__text]
-  heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
-%>
-<% @context_block = capture do %>
-  <span class="govuk-caption-xl gem-c-title__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
-    <%= context %>
-  </span>
-<% end %>
-<%= content_tag(:div, class: classes) do %>
-  <% if context && !context_inside %>
-    <%= @context_block %>
-  <% end %>
-  <h1 class="<%= heading_classes.join(" ") %>">
-    <% if context && context_inside %>
-      <%= @context_block %>
-    <% end %>
-    <%= title %>
-  </h1>
-<% end %>

data/app/views/govuk_publishing_components/components/docs/title.yml DELETED Viewed

@@ -1,64 +0,0 @@
-name: Page title
-description: A page title with optional context label
-body: |
-  This contains an optional parameter for average title length. The two valid
-  values for this parameter are 'medium' or 'long'. Medium titles are titles
-  where the average is around 30 characters or less. Long titles would have
-  an average length of nearer 50 characters or more.
-  On average the titles on government bits of content are 50 characters. The
-  average for bits of general guidance are nearer 27 characters long.
-accessibility_criteria: |
-  The page title must:
-  - be part of a correct heading structure for a page
-  - be semantically represented as a heading
-  - convey the heading level
-shared_accessibility_criteria:
-  - link
-examples:
-  default:
-    data:
-      title: My page title
-  with_context:
-    data:
-      context: Publication
-      title: My page title
-  with_context_inside:
-    description: |
-      If the context should be considered part of the page heading, you can nest the context within the <code><h1></code>.
-    data:
-      context: Publication
-      title: My page title
-      context_inside: true
-  with_context_language_labelled:
-    description: |
-      Sometimes this component appears on a page that has been translated. The title will naturally be supplied in the required language but the context string may fall back to the default. In these instances we need to label the language so the page remains semantic and screenreaders can handle the switch.
-      The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
-    data:
-      context: Publication
-      context_locale: en
-      title: My page title
-  long_title_with_context:
-    data:
-      context: Publication
-      title: My page title which is often really long and verbose and has lots of extra words it doesn't need
-      average_title_length: long
-  with_margin_bottom:
-    description: |
-      The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 50px.
-      This margin is responsive at certain sizes, see the link above for more detail. Note also that the component has a (responsive) top margin set as well, which cannot be modified.
-    data:
-      title: 'Margin bottom of 10px'
-      margin_bottom: 2
-  in_html_publication:
-    description: Page titles are used in HTML Publications ([see example](https://www.gov.uk/government/publications/fees-for-civil-and-family-courts/court-fees-for-the-high-court-county-court-and-family-court))
-    data:
-      context: Publication
-      title: HTML publication page title
-      inverse: true
-      margin_bottom: 0
-    context:
-      dark_background: true