govuk_publishing_components 23.15.0 → 24.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -1,12 +1,12 @@
 .gem-c-success-alert {
-  color: $gem-text-colour;
-  padding: $gem-spacing-scale-3;
-  border: $gem-border-width-mobile solid $gem-success-colour;
+  color: $govuk-text-colour;
+  padding: govuk-spacing(3);
+  border: $govuk-border-width-narrow solid $govuk-success-colour;
   @include govuk-responsive-margin(8, "bottom");
 
   @include govuk-media-query($from: tablet) {
-    padding: $gem-spacing-scale-4;
-    border-width: $gem-border-width-tablet;
+    padding: govuk-spacing(4);
+    border-width: $govuk-border-width;
   }
 }
 
@@ -17,10 +17,10 @@
 
 .gem-c-success-summary__title {
   margin-top: 0;
-  margin-bottom: $gem-spacing-scale-3;
+  margin-bottom: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-bottom: $gem-spacing-scale-4;
+    margin-bottom: govuk-spacing(4);
   }
 
   @include govuk-font(24, $weight: bold);
@@ -32,5 +32,5 @@
 }
 
 .gem-c-success-alert:focus {
-  outline: $gem-focus-width solid $gem-focus-colour;
+  outline: $govuk-focus-width solid $govuk-focus-colour;
 }

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

@@ -25,11 +25,6 @@
       float: none;
       width: 100%;
 
-      h3 {
-        @include govuk-font($size: 19, $weight: bold);
-        margin-bottom: 5px;
-      }
-
       .email-url-number {
         .email {
           word-wrap: break-word;

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

@@ -1,7 +1,7 @@
 $grey-2: #bfc1c3;
 $white: #ffffff;
 $number-circle-size: 35px;
-$stroke-width: 3px;
+$stroke-width: 1px;
 
 .gem-c-step-nav:not(.gem-c-step-nav--large),
 .gem-c-step-nav__controls,
@@ -63,7 +63,7 @@ $stroke-width: 3px;
 }
 
 .gem-c-step-nav__circle--number {
-  border: solid 3px $grey-2;
+  border: solid 1px $grey-2;
 }
 
 .gem-c-step-nav__step,

data/app/views/govuk_publishing_components/components/_document_list.html.erb

@@ -29,12 +29,21 @@
           item_classes = "gem-c-document-list__item-title #{brand_helper.color_class} #{title_with_context_class if item[:link][:context]}"
 
           if item[:link][:path]
+            rel = [
+              "external",
+              "nofollow",
+              "noopener",
+              "noreferrer",
+              "opener",
+            ].include?(item[:link][:rel]) ? item[:link][:rel] : nil
+
             link_to(
               item[:link][:text],
               item[:link][:path],
               data: item[:link][:data_attributes],
               class: "#{item_classes} gem-c-document-list__item-link",
-              lang: item[:link][:locale].presence
+              lang: item[:link][:locale].presence,
+              rel: rel,
             )
           else
             content_tag(

data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml

@@ -72,6 +72,11 @@ examples:
                       - text: Check what age you can drive
                         href: "/vehicles-can-drive"
                     optional: false
+                  - title: Testing the and
+                    logic: and
+                    contents:
+                    - type: paragraph
+                      text: hello hello what's UP
                   - title: Driving lessons and practice
                     contents:
                     - type: paragraph

data/app/views/govuk_publishing_components/components/docs/document_list.yml

@@ -305,3 +305,21 @@ examples:
           path: '/become-an-apprentice'
           description: 'Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship.'
           full_size_description: true
+  with_rel_link_attribute:
+    description: |
+      The [rel attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) is an option attribute to dictate the relationship between the document being linked to and the current page. This is predominantly used by search engines to help index journeys through a website.
+      
+      On GOV.UK, this is typically used to dictate an external website being linked to with `rel="external"`, however this component supports:
+      
+      - external
+      - nofollow
+      - noopener
+      - noreferrer
+      - opener
+    data:
+      items:
+      - link:
+          text: 'Report Fraud'
+          path: 'https://www.actionfraud.police.uk/contact-us'
+          rel: 'external'
+          description: "Contact Action Fraud to report fraud and cyber crime, or to tell them you've been the victim of a scam."

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -312,8 +312,8 @@ examples:
       block: |
         <div class="contact" id="contact_1017">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>
@@ -332,8 +332,8 @@ examples:
         <h2>This is a title</h2>
         <div class="contact" id="contact_1018">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>
@@ -349,8 +349,8 @@ examples:
         <p>This is a paragraph.</p>
         <div class="contact" id="contact_1019">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>

data/config/initializers/assets.rb

@@ -25,7 +25,6 @@ Rails.application.config.assets.precompile += %w[
   govuk_publishing_components/search-button.png
   govuk_publishing_components/icon-file-download.svg
   govuk_publishing_components/icon-important.svg
-  govuk_publishing_components/chevron-banner/*.svg
   govuk_publishing_components/crests/*.png
   govuk_publishing_components/take-action-amber.svg
   govuk_publishing_components/take-action-green.svg

data/lib/govuk_publishing_components/presenters/contextual_navigation.rb

@@ -115,7 +115,67 @@ module GovukPublishingComponents
 
       def brexit_cta_document_exceptions
         # /government/news/30-creative-teams-awarded-up-to-100000-each-for-festival-uk-2022-rd-project
-        %w[c3752802-f091-43a9-ba90-33568fccf391]
+        # and answer pages that have a start button (tracked in https://docs.google.com/spreadsheets/d/1ynH8zIjvElvK-u8JLI8KOYylxTbzJsoXRqEnqrnqv_4/edit)
+        %w[
+          c3752802-f091-43a9-ba90-33568fccf391
+          e1a9ce2b-4085-4761-b70f-d125a6571de3
+          6a2bf66e-2313-4204-afd5-9940de5e1d66
+          f65b0ac7-b8cd-476b-bd5d-738268517659
+          45ad868a-2e79-4029-991b-c29559d7eb29
+          e4e9c4ec-385e-4758-93ac-388bc154815e
+          cee73f76-83f0-44e2-b657-3b51a9cbc76e
+          9a945506-60bc-44d8-a2ec-0eb2824732d6
+          6ae16c12-a554-44e2-b3e3-596375aa1b9a
+          9add4ccc-dc4c-44cf-9b69-6878c162d431
+          4f5cf1cd-efda-4c49-8292-1db1c6c3cfb0
+          73058592-dedf-4379-9a1d-d8222a796c0a
+          c9259172-5432-43a6-b710-409d463c7627
+          59ecfc6d-cb9e-49b8-b013-fc368ebdf8ed
+          9897695d-624b-4cb9-b873-f3113f0332a1
+          715f4659-b058-46ec-84c8-cc346c210778
+          c63890f9-2356-4be3-9e07-6cf4b8de7081
+          e7661ec8-b678-444e-b4d0-a221fa83a7f7
+          723f9c0a-bcdb-4d8f-952c-6df0ed468c57
+          a1c420b7-11d7-4b9c-a97e-406fb73c0200
+          c1347936-839b-4547-a570-0c315c34ee45
+          1396f68b-6ffa-47ef-a049-414e7b548e81
+          3b054acf-d0af-470e-b912-9481204d1a9a
+          317b9c08-928b-4fd2-bc8e-4c6acf287c58
+          44d6cb7a-d853-4cd8-a9cb-69eff0299d9e
+          15517245-f142-4e45-ad84-773250f7d5a2
+          6fe6644d-d037-4ea4-baf6-800dc1966ed0
+          4a63625c-a195-4b86-9562-cb6653dd26ff
+          47521233-20a8-4d02-ba31-6e1977448fd1
+          7b8ca4ac-f3a3-41b8-9555-9e244c36575b
+          be1a82d1-e53c-431a-9e7a-337ed4b2654f
+          6c445001-4e29-4853-8c14-444d7f9374ee
+          c8cf2a7c-5c13-4f3d-b1ff-6a7eb5533973
+          2422a237-f8f1-4e9f-ad51-f1d44fde9755
+          ae000c08-c74f-467b-b8a4-90f138252a5c
+          7eec7800-9c4d-4160-af53-57b5d3e02972
+          eb545b3b-111b-4c3c-890c-c9ec29b9090d
+          8d705ade-8977-480d-9080-72a19e341c2a
+          2a0dd317-0252-4c7c-8c13-b43af28406bc
+          f27e5792-a84b-4164-9890-7e86767634e8
+          b0b9a600-1fe6-4257-9e68-2be0f59ea25d
+          28fa04ea-42e1-46ad-9abc-acf132c5666d
+          64b27b8a-ae53-4034-a812-f4805cd7e3ad
+          1dd5a75f-18b4-419d-b2b6-6d4808f2c7e4
+          b21b9e34-455c-4305-b4cc-4e6b8d3f7522
+          0ab53a0d-b098-43a8-b3cc-8b3224697228
+          e3862156-ba5a-41ba-8ee6-22e5cd6a6144
+          2e8f7fae-7164-459c-898b-0c0538eee3e0
+          6087439c-26d2-4881-b345-5160e23f3b5e
+          cac78a0a-9c28-436a-a29e-8ccbe8fbc956
+          c2fd13a5-537b-4368-ac2e-6078b2c463f1
+          98f0a21d-7b67-4089-a98c-f0a0177291a2
+          06692612-8c39-464c-8aee-2aa62e6c8887
+          df943977-69cb-479d-a921-9410d603c471
+          2656eb6b-f2eb-4982-8a90-e40d03a34a4d
+          4ca8698b-4a24-45ff-baea-7633cc24b679
+          ed73581f-9bf8-48b5-bb66-935581a255e3
+          15f1c594-af1d-4f16-97cc-ad4d12017509
+        ]
       end
 
       def brexit_cta_document_exception?
@@ -125,7 +185,6 @@ module GovukPublishingComponents
       def brexit_cta_document_type_exceptions
         %w[
           aaib_report
-          answer
           asylum_support_decision
           fatality_notice
           maib_report

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.15.0".freeze
+  VERSION = "24.0.0".freeze
 end

data/node_modules/govuk-frontend/govuk/all.js

@@ -1498,7 +1498,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
   }
 }
 

data/node_modules/govuk-frontend/govuk/components/_all.scss

@@ -6,6 +6,7 @@
 @import "button/index";
 @import "checkboxes/index";
 @import "character-count/index";
+@import "cookie-banner/index";
 @import "summary-list/index";
 @import "date-input/index";
 @import "details/index";

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json

@@ -15,7 +15,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -28,7 +28,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -53,7 +53,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -70,7 +70,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -90,7 +90,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -112,7 +112,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs  govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -141,7 +141,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>",
             "hidden": true
         },
         {
@@ -158,7 +158,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": true
         },
         {
@@ -170,7 +170,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n    \n  \n  </ol>\n</div>",
             "hidden": true
         },
         {
@@ -186,7 +186,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": true
         }
     ]

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk

@@ -1,8 +1,8 @@
 {# Set classes for this component #}
-{%- set classNames = "govuk-breadcrumbs " -%}
+{%- set classNames = "govuk-breadcrumbs" -%}
 
 {% if params.classes %}
-  {% set classNames = classNames + params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
 {% endif -%}
 
 {% if params.collapseOnMobile %}

data/node_modules/govuk-frontend/govuk/components/button/_index.scss

@@ -29,6 +29,8 @@
     position: relative;
     width: 100%;
     margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
     @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
     padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
     border: $govuk-border-width-form-element solid transparent;

data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss

@@ -14,6 +14,7 @@
   }
 
   .govuk-character-count__message {
+    @include govuk-font($size: false, $tabular: true);
     margin-top: 0;
     margin-bottom: 0;
   }

data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js

@@ -1018,7 +1018,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
   }
 }
 

data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json

@@ -222,6 +222,19 @@
             },
             "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n\n\n  \n  \n  <span id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
             "hidden": true
+        },
+        {
+            "name": "with id starting with number",
+            "options": {
+                "name": "more-detail",
+                "id": "1_more-detail",
+                "maxlength": 10,
+                "label": {
+                    "text": "Can you provide more detail?"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n</div>\n\n  <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": true
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss

@@ -0,0 +1,51 @@
+@include govuk-exports("govuk/component/cookie-banner") {
+
+  // This needs to be kept in sync with the header component's styles
+  $border-bottom-width: govuk-spacing(2);
+
+  .govuk-cookie-banner {
+    @include govuk-font($size: 19);
+
+    padding-top: govuk-spacing(4);
+    // The component does not set bottom spacing.
+    // The bottom spacing should be created by the items inside the component.
+
+    // Visually separate the cookie banner from content underneath
+    // when user changes colours in their browser.
+    border-bottom: $border-bottom-width solid transparent;
+
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+  }
+
+  // Support older browsers which don't hide elements with the `hidden` attribute
+  // when user hides the whole cookie banner with a 'Hide' button.
+  .govuk-cookie-banner[hidden] {
+    display: none;
+  }
+
+  .govuk-cookie-banner__message {
+    // Remove the extra height added by the separator border.
+    margin-bottom: -$border-bottom-width;
+
+    &[hidden] {
+      // Support older browsers which don't hide elements with the `hidden` attribute
+      // when the visibility of cookie and replacement messages is toggled.
+      display: none;
+    }
+
+    &:focus {
+      // Remove the native visible focus indicator when the element is programmatically focused.
+      //
+      // The focused cookie banner is the first element on the page and the last thing the user
+      // interacted with prior to it gaining focus.
+      // We therefore assume that moving focus to it is not going to surprise users, and that giving
+      // it a visible focus indicator could be more confusing than helpful, especially as the
+      // element is not normally keyboard operable.
+      //
+      // We have flagged this in the research section of the guidance as something to monitor.
+      //
+      // A related discussion: https://github.com/w3c/wcag/issues/1001
+      outline: none;
+    }
+  }
+}