govuk_tech_docs 4.4.0 → 5.0.0

data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs

@@ -570,6 +570,7 @@ class CharacterCount extends ConfigurableComponent {
         identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
       });
     }
+    this.$errorMessage = this.$root.querySelector('.govuk-error-message');
     if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
       $textareaDescription.textContent = this.i18n.t('textareaDescription', {
         count: this.maxLength
@@ -628,7 +629,9 @@ class CharacterCount extends ConfigurableComponent {
     const remainingNumber = this.maxLength - this.count(this.$textarea.value);
     const isError = remainingNumber < 0;
     this.$visibleCountMessage.classList.toggle('govuk-character-count__message--disabled', !this.isOverThreshold());
-    this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    if (!this.$errorMessage) {
+      this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    }
     this.$visibleCountMessage.classList.toggle('govuk-error-message', isError);
     this.$visibleCountMessage.classList.toggle('govuk-hint', !isError);
     this.$visibleCountMessage.textContent = this.getCountMessage();

data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.mjs

@@ -71,6 +71,7 @@ class CharacterCount extends ConfigurableComponent {
         identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
       });
     }
+    this.$errorMessage = this.$root.querySelector('.govuk-error-message');
     if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
       $textareaDescription.textContent = this.i18n.t('textareaDescription', {
         count: this.maxLength
@@ -129,7 +130,9 @@ class CharacterCount extends ConfigurableComponent {
     const remainingNumber = this.maxLength - this.count(this.$textarea.value);
     const isError = remainingNumber < 0;
     this.$visibleCountMessage.classList.toggle('govuk-character-count__message--disabled', !this.isOverThreshold());
-    this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    if (!this.$errorMessage) {
+      this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    }
     this.$visibleCountMessage.classList.toggle('govuk-error-message', isError);
     this.$visibleCountMessage.classList.toggle('govuk-hint', !isError);
     this.$visibleCountMessage.textContent = this.getCountMessage();

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

@@ -1,3 +1,5 @@
+@import "../button/index";
+
 @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);
@@ -11,7 +13,11 @@
     // changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
-    background-color: $govuk-canvas-background-colour;
+    @include _govuk-rebrand(
+      "background-color",
+      $govuk-template-background-colour,
+      $_govuk-rebrand-template-background-colour
+    );
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute

data/node_modules/govuk-frontend/dist/govuk/components/date-input/_index.scss

@@ -2,6 +2,7 @@
 @import "../input/index";
 @import "../hint/index";
 @import "../label/index";
+@import "../fieldset/index";
 
 @include govuk-exports("govuk/component/date-input") {
   .govuk-date-input {

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js

@@ -507,6 +507,8 @@
       this.$status = void 0;
       this.i18n = void 0;
       this.id = void 0;
+      this.$announcements = void 0;
+      this.enteredAnotherElement = void 0;
       const $input = this.$root.querySelector('input');
       if ($input === null) {
         throw new ElementError({
@@ -596,12 +598,6 @@
         this.enteredAnotherElement = false;
       });
     }
-
-    /**
-     * Updates the visibility of the dropzone as users enters the various elements on the page
-     *
-     * @param {DragEvent} event - The `dragenter` event
-     */
     updateDropzoneVisibility(event) {
       if (this.$button.disabled) return;
       if (event.target instanceof Node) {
@@ -626,12 +622,6 @@
     hideDraggingState() {
       this.$button.classList.remove('govuk-file-upload-button--dragging');
     }
-
-    /**
-     * Handles user dropping on the component
-     *
-     * @param {DragEvent} event - The `dragenter` event
-     */
     onDrop(event) {
       event.preventDefault();
       if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs

@@ -501,6 +501,8 @@ class FileUpload extends ConfigurableComponent {
     this.$status = void 0;
     this.i18n = void 0;
     this.id = void 0;
+    this.$announcements = void 0;
+    this.enteredAnotherElement = void 0;
     const $input = this.$root.querySelector('input');
     if ($input === null) {
       throw new ElementError({
@@ -590,12 +592,6 @@ class FileUpload extends ConfigurableComponent {
       this.enteredAnotherElement = false;
     });
   }
-
-  /**
-   * Updates the visibility of the dropzone as users enters the various elements on the page
-   *
-   * @param {DragEvent} event - The `dragenter` event
-   */
   updateDropzoneVisibility(event) {
     if (this.$button.disabled) return;
     if (event.target instanceof Node) {
@@ -620,12 +616,6 @@ class FileUpload extends ConfigurableComponent {
   hideDraggingState() {
     this.$button.classList.remove('govuk-file-upload-button--dragging');
   }
-
-  /**
-   * Handles user dropping on the component
-   *
-   * @param {DragEvent} event - The `dragenter` event
-   */
   onDrop(event) {
     event.preventDefault();
     if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs

@@ -22,6 +22,8 @@ class FileUpload extends ConfigurableComponent {
     this.$status = void 0;
     this.i18n = void 0;
     this.id = void 0;
+    this.$announcements = void 0;
+    this.enteredAnotherElement = void 0;
     const $input = this.$root.querySelector('input');
     if ($input === null) {
       throw new ElementError({
@@ -111,12 +113,6 @@ class FileUpload extends ConfigurableComponent {
       this.enteredAnotherElement = false;
     });
   }
-
-  /**
-   * Updates the visibility of the dropzone as users enters the various elements on the page
-   *
-   * @param {DragEvent} event - The `dragenter` event
-   */
   updateDropzoneVisibility(event) {
     if (this.$button.disabled) return;
     if (event.target instanceof Node) {
@@ -141,12 +137,6 @@ class FileUpload extends ConfigurableComponent {
   hideDraggingState() {
     this.$button.classList.remove('govuk-file-upload-button--dragging');
   }
-
-  /**
-   * Handles user dropping on the component
-   *
-   * @param {DragEvent} event - The `dragenter` event
-   */
   onDrop(event) {
     event.preventDefault();
     if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {

data/node_modules/govuk-frontend/dist/govuk/components/footer/_index.scss

@@ -1,7 +1,7 @@
 @include govuk-exports("govuk/component/footer") {
-  $govuk-footer-background: $govuk-canvas-background-colour;
-  $govuk-footer-border: $govuk-border-colour;
+  $govuk-footer-background: $govuk-template-background-colour;
   $govuk-footer-text: $govuk-text-colour;
+  $govuk-footer-content-border: $govuk-border-colour;
 
   // Royal Arms image dimensions
   $govuk-footer-crest-image-width: 125px;
@@ -12,9 +12,17 @@
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 
-    border-top: 1px solid $govuk-footer-border;
+    border-top: 10px solid $govuk-brand-colour;
     color: $govuk-footer-text;
-    background: $govuk-footer-background;
+    @include _govuk-rebrand(
+      "background",
+      $from: $govuk-footer-background,
+      $to: $_govuk-rebrand-template-background-colour
+    );
+  }
+
+  .govuk-footer__crown {
+    margin-bottom: govuk-spacing(5);
   }
 
   .govuk-footer__link {
@@ -26,7 +34,12 @@
     margin: 0; // Reset `<hr>` default margins
     @include govuk-responsive-margin(8, "bottom");
     border: 0; // Reset `<hr>` default borders
-    border-bottom: 1px solid $govuk-footer-border;
+    border-bottom: 1px solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-footer-content-border,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
   }
 
   .govuk-footer__meta {
@@ -71,9 +84,10 @@
     text-wrap: balance;
   }
 
-  .govuk-footer__copyright-logo {
-    display: inline-block;
-    min-width: $govuk-footer-crest-image-width;
+  .govuk-footer__copyright-logo::before {
+    content: "";
+    display: block;
+    width: 100%;
     padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
     background-image: govuk-image-url("govuk-crest.svg");
     background-repeat: no-repeat;
@@ -81,6 +95,30 @@
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
     text-align: center;
     white-space: nowrap;
+
+    // Where possible use the crest as a mask instead. This lets us use
+    // currentColor, increasing the contrast of the image and matching the
+    // user's prefered foreground colour in e.g. forced colors mode.
+    // We test for `mask-position` rather than `mask-image` because of a false
+    // positive in Edge 17.
+    @supports ((-webkit-mask-position: initial) or (mask-position: initial)) {
+      background: currentcolor;
+      -webkit-mask-image: govuk-image-url("govuk-crest.svg");
+              mask-image: govuk-image-url("govuk-crest.svg");
+      -webkit-mask-repeat: no-repeat;
+              mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 0%;
+              mask-position: 50% 0%;
+      -webkit-mask-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+              mask-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+
+      // currentcolor doesn't seem to be computed correctly in forced colors
+      // mode so force the background color to match the system link color
+      // (matching the text in the link)
+      @media screen and (forced-colors: active) {
+        background: linktext;
+      }
+    }
   }
 
   .govuk-footer__inline-list {
@@ -106,7 +144,13 @@
     @include govuk-media-query($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
-    border-bottom: 1px solid $govuk-footer-border;
+
+    border-bottom: 1px solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-footer-content-border,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
   }
 
   .govuk-footer__navigation {

data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss

@@ -13,12 +13,31 @@
   $govuk-header-menu-button-height: 24px;
   $govuk-header-menu-button-width: 80px;
 
+  $govuk-header-rebrand-background: $govuk-brand-colour;
+  $govuk-header-rebrand-logo-bottom-margin: 2px;
+
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
 
-    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    // Add a transparent bottom border for forced-colour modes
+    @include _govuk-rebrand(
+      "border-bottom",
+      $from: govuk-spacing(2) solid govuk-colour("white"),
+      $to: 1px solid transparent
+    );
+    @include _govuk-rebrand("background", $from: $govuk-header-background, $to: $govuk-header-rebrand-background);
+
     color: $govuk-header-text;
-    background: $govuk-header-background;
+  }
+
+  .govuk-header--with-js-navigation {
+    @include govuk-media-query($until: desktop) {
+      .govuk-header__logo {
+        // Protect the absolute positioned menu button from overlapping with the
+        // logo with right padding using the button's width
+        padding-right: $govuk-header-menu-button-width;
+      }
+    }
   }
 
   .govuk-header__container--full-width {
@@ -36,8 +55,20 @@
     margin-bottom: -$govuk-header-border-width;
     padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
+
+    @include _govuk-rebrand {
+      // Remove the space allocated to the blue bar
+      margin-bottom: 0;
+
+      // Remove padding as the child elements are now responsible for spacing
+      padding-top: 0;
+
+      // Remove the blue bar
+      border-bottom: none;
+    }
   }
 
+  // TODO: Remove this when _govuk-rebrand becomes the default
   .govuk-header--full-width-border {
     border-bottom-color: $govuk-header-border-color;
 
@@ -69,6 +100,36 @@
     &:last-child {
       margin-right: 0;
     }
+
+    @include _govuk-rebrand {
+      margin-right: govuk-px-to-rem(7px); // 1 'dot'
+      margin-bottom: $govuk-header-rebrand-logo-bottom-margin;
+
+      // Remove right-margin if there's no product name
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  // Colour in the Dot
+  .govuk-logo-dot {
+    fill: #00ffe0;
+
+    // Override Dot colour when printing
+    @include govuk-media-query($media-type: print) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on forced colours mode
+    @media (forced-colors: active) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on focus
+    :focus & {
+      fill: currentcolor;
+    }
   }
 
   .govuk-header__product-name {
@@ -97,6 +158,40 @@
         margin-top: $product-name-offset-tablet - 0.5px;
       }
     }
+
+    @include _govuk-rebrand {
+      // Remove top margin
+      margin-top: 0;
+
+      // Remove 1px from the bottom to account for the font-size being 1px
+      // larger than the logo height.
+      margin-bottom: govuk-px-to-rem(-1px);
+
+      // Magic number font-size that visually aligns with GOV.UK logo.
+      // Also stops reducing the product name size on narrow screens
+      font-size: govuk-px-to-rem(31px);
+
+      // Reduce letter spacing
+      letter-spacing: -0.015em;
+
+      // Prevent forced colour modes from applying a background colour behind
+      // the product name, which cuts off the underline that appears on hover.
+      forced-color-adjust: none;
+
+      @media screen and (forced-colors: active) {
+        color: LinkText;
+        background: transparent;
+      }
+
+      // Remove top margin on the breakpoints too
+      @include govuk-media-query($from: tablet) {
+        margin-top: 0;
+      }
+
+      @include govuk-media-query($from: desktop) {
+        margin-top: 0;
+      }
+    }
   }
 
   .govuk-header__link {
@@ -134,12 +229,6 @@
 
     @include govuk-media-query($from: desktop) {
       display: inline;
-
-      &:focus {
-        // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
-        // This is to stop the logo getting cut off by the box shadow when focused on above a product name
-        box-shadow: 0 0 $govuk-focus-colour;
-      }
     }
 
     &:link,
@@ -159,6 +248,23 @@
       margin-bottom: 0;
       border-bottom: 0;
     }
+
+    @include _govuk-rebrand {
+      display: inline;
+
+      // Remove word-spacing from within the logo so we can ignore
+      // whitespace characters in the HTML
+      word-spacing: govuk-px-to-rem(-6px);
+
+      // Reset word-spacing for child elements
+      > * {
+        word-spacing: 0;
+      }
+
+      &:not(:focus) {
+        background-color: $govuk-header-rebrand-background;
+      }
+    }
   }
 
   .govuk-header__service-name {
@@ -166,6 +272,18 @@
     margin-bottom: govuk-spacing(2);
     @include govuk-font-size($size: 24);
     @include govuk-typography-weight-bold;
+
+    @include _govuk-rebrand {
+      // Apply margins to internal elements to emulate padding
+      margin-bottom: govuk-spacing(3);
+
+      @include govuk-media-query($from: desktop) {
+        // Magic number to align service name baseline with the GOV.UK logo
+        $service-name-offset: 4px;
+
+        margin: (govuk-spacing(3) + $service-name-offset) 0 (govuk-spacing(3) - $service-name-offset);
+      }
+    }
   }
 
   .govuk-header__logo,
@@ -175,9 +293,6 @@
 
   .govuk-header__logo {
     @include govuk-responsive-margin($govuk-header-vertical-spacing-value, "bottom");
-    // Protect the absolute positioned menu button from overlapping with the
-    // logo with right padding using the button's width
-    padding-right: $govuk-header-menu-button-width;
 
     @include govuk-media-query($from: desktop) {
       width: 33.33%;
@@ -192,6 +307,15 @@
         float: none;
       }
     }
+
+    @include _govuk-rebrand {
+      // Apply margins to internal elements to emulate padding
+      margin-bottom: 0;
+
+      // Magic numbers, set padding to vertically centre align the logo
+      padding-top: 16px;
+      padding-bottom: 14px - $govuk-header-rebrand-logo-bottom-margin;
+    }
   }
 
   .govuk-header__content {
@@ -265,8 +389,37 @@
   }
 
   .govuk-header__navigation {
+    @include govuk-media-query($until: mobile) {
+      @include _govuk-rebrand {
+        padding-bottom: govuk-spacing(3);
+      }
+    }
+
     @include govuk-media-query($from: desktop) {
       margin-bottom: govuk-spacing(2);
+
+      @include _govuk-rebrand {
+        // Magic number so that the bottom of the nav links aligns with the
+        // baseline of the GOV.UK logo
+        $navigation-offset: 7px;
+
+        // Apply margins to internal elements to emulate padding
+        margin-bottom: 0;
+        padding: (govuk-spacing(3) + $navigation-offset) 0 (govuk-spacing(3) - $navigation-offset);
+      }
+    }
+  }
+
+  .govuk-header__service-name + .govuk-header__navigation {
+    @include _govuk-rebrand {
+      @include govuk-media-query($from: desktop) {
+        // If there's both a service name and navigation,
+        // remove the extra padding between them on desktop
+        padding-top: 0;
+
+        // Restore the full bottom padding as the navigation isn't standalone
+        padding-bottom: govuk-spacing(3);
+      }
     }
   }
 
@@ -279,6 +432,12 @@
     &[hidden] {
       display: none;
     }
+
+    @include _govuk-rebrand {
+      @include govuk-media-query($from: mobile, $until: desktop) {
+        padding-bottom: govuk-spacing(3);
+      }
+    }
   }
 
   .govuk-header__navigation--end {
@@ -305,14 +464,41 @@
       @include govuk-typography-weight-bold;
       white-space: nowrap;
     }
+
+    @include _govuk-rebrand {
+      // Increase top padding of nav items...
+      padding-top: govuk-spacing(3);
+
+      // ...except on desktop
+      @include govuk-media-query($from: desktop) {
+        padding-top: govuk-spacing(1);
+      }
+
+      // Change the dividing line colour between mobile nav items
+      border-bottom-color: govuk-colour("white");
+
+      // Reduce default weight of links so that we can use bold for active ones
+      a {
+        @include govuk-typography-weight-regular;
+      }
+    }
   }
 
   .govuk-header__navigation-item--active {
     a {
+      @include _govuk-rebrand {
+        // Change active links to use bold text instead of changing colour
+        @include govuk-typography-weight-bold;
+      }
+
       &:link,
       &:hover,
       &:visited {
         color: $govuk-header-link-active;
+
+        @include _govuk-rebrand {
+          color: inherit;
+        }
       }
 
       // When printing, use the normal blue as this contrasts better with the
@@ -325,6 +511,10 @@
       // contrast is still acceptable
       &:focus {
         color: $govuk-focus-text-colour;
+
+        @include _govuk-rebrand {
+          color: $govuk-focus-text-colour;
+        }
       }
     }
   }

data/node_modules/govuk-frontend/dist/govuk/components/header/header.bundle.js

@@ -166,6 +166,7 @@
       if (!$menuButton) {
         return this;
       }
+      this.$root.classList.add('govuk-header--with-js-navigation');
       const menuId = $menuButton.getAttribute('aria-controls');
       if (!menuId) {
         throw new ElementError({

data/node_modules/govuk-frontend/dist/govuk/components/header/header.bundle.mjs

@@ -160,6 +160,7 @@ class Header extends Component {
     if (!$menuButton) {
       return this;
     }
+    this.$root.classList.add('govuk-header--with-js-navigation');
     const menuId = $menuButton.getAttribute('aria-controls');
     if (!menuId) {
       throw new ElementError({

data/node_modules/govuk-frontend/dist/govuk/components/header/header.mjs

@@ -24,6 +24,7 @@ class Header extends Component {
     if (!$menuButton) {
       return this;
     }
+    this.$root.classList.add('govuk-header--with-js-navigation');
     const menuId = $menuButton.getAttribute('aria-controls');
     if (!menuId) {
       throw new ElementError({

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss

@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/service-navigation") {
   $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $govuk-service-navigation-background: $govuk-canvas-background-colour;
+  $govuk-service-navigation-background: govuk-colour("light-grey");
   $govuk-service-navigation-border-colour: $govuk-border-colour;
 
   // We make the link colour a little darker than normal here so that it has
@@ -8,8 +8,18 @@
   $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
 
   .govuk-service-navigation {
-    border-bottom: 1px solid $govuk-service-navigation-border-colour;
-    background-color: $govuk-service-navigation-background;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-service-navigation-border-colour,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
+    @include _govuk-rebrand(
+      "background-color",
+      $from: $govuk-service-navigation-background,
+      $to: $_govuk-rebrand-template-background-colour
+    );
   }
 
   .govuk-service-navigation__container {
@@ -36,6 +46,11 @@
       margin-bottom: 0;
       padding: govuk-spacing(4) 0;
 
+      @include _govuk-rebrand {
+        padding: govuk-spacing(3) 0;
+        line-height: 1.5;
+      }
+
       &:not(:last-child) {
         @include govuk-responsive-margin(6, $direction: right);
       }
@@ -52,7 +67,11 @@
     }
 
     @include govuk-media-query($from: tablet) {
-      padding-bottom: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width;
+      @include _govuk-rebrand(
+        "padding-bottom",
+        $from: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width,
+        $to: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width
+      );
       border-bottom-width: $govuk-service-navigation-active-link-border-width;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss

@@ -1,7 +1,7 @@
 :root {
   // This variable is automatically overwritten during builds and releases.
   // It doesn't need to be updated manually.
-  --govuk-frontend-version: "5.9.0";
+  --govuk-frontend-version: "5.10.2";
 
   // CSS custom property for each breakpoint
   @each $name, $value in $govuk-breakpoints {