govuk_publishing_components 24.10.1 → 24.12.0

data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk

@@ -1,6 +1,6 @@
 {% from "../button/macro.njk" import govukButton -%}
 
-<div class="govuk-cookie-banner {{ params.classes if params.classes }}" role="region" aria-label="{{ params.ariaLabel | default("Cookie banner") }}"
+<div class="govuk-cookie-banner {{ params.classes if params.classes }}" data-nosnippet role="region" aria-label="{{ params.ariaLabel | default("Cookie banner") }}"
   {%- if params.hidden %} hidden{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
 
@@ -40,11 +40,21 @@
       <div class="govuk-button-group">
         {% for action in message.actions %}
           {% if action.href %}
-            {% set linkClasses = "govuk-link" %}
-            {% if action.classes %}
-              {% set linkClasses = linkClasses + " " + action.classes %}
+            {% if action.type == "button" %}
+              {{ govukButton({
+                "text": action.text,
+                "type": "button",
+                "classes": action.classes,
+                "href": action.href,
+                "attributes": action.attributes
+              }) | indent(12) | trim }}
+            {% else %}
+              {% set linkClasses = "govuk-link" %}
+              {% if action.classes %}
+                {% set linkClasses = linkClasses + " " + action.classes %}
+              {% endif %}
+              <a class="{{ linkClasses }}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ action.text }}</a>
             {% endif %}
-            <a class="{{ linkClasses }}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ action.text }}</a>
           {% else %}
             {{ govukButton({
               "text": action.text,

data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json

@@ -91,7 +91,7 @@
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)"
             }
         ]
     },
@@ -99,7 +99,7 @@
         "name": "fieldset",
         "type": "object",
         "required": false,
-        "description": "Options for the fieldset component (e.g. legend).",
+        "description": "Options for the fieldset component (for example legend).",
         "isComponent": true
     },
     {

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

@@ -34,7 +34,11 @@
 
   // ...but only underline the text, not the arrow
   .govuk-details__summary-text {
-    text-decoration: underline;
+    @include govuk-link-decoration;
+  }
+
+  .govuk-details__summary:hover .govuk-details__summary-text {
+    @include govuk-link-hover-decoration;
   }
 
   // Remove the underline when focussed to avoid duplicate borders

data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss

@@ -8,17 +8,21 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    padding-top: $component-padding;
-    padding-bottom: $component-padding;
+    margin-left: -$component-padding;
+    padding: $component-padding;
+
+    // The default file upload button in Safari does not
+    // support setting a custom font-size. Set `-webkit-appearance`
+    // to `button` to drop out of the native appearance so the
+    // font-size is set to 19px
+    // https://bugs.webkit.org/show_bug.cgi?id=224746
+    &::-webkit-file-upload-button {
+      -webkit-appearance: button;
+      color: inherit;
+      font: inherit;
+    }
 
     &:focus {
-      // "Yank" the padding with negative margin to avoid a jump
-      // when element is focused
-      margin-right: -$component-padding;
-      margin-left: -$component-padding;
-      padding-right: $component-padding;
-      padding-left: $component-padding;
-
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Use `box-shadow` to add border instead of changing `border-width`
       // (which changes element size) and since `outline` is already used for the
@@ -37,11 +41,6 @@
     // to recognise `focus-within` and don't set any styles from the block
     // when it's a selector.
     &:focus-within {
-      margin-right: -$component-padding;
-      margin-left: -$component-padding;
-      padding-right: $component-padding;
-      padding-left: $component-padding;
-
       outline: $govuk-focus-width solid $govuk-focus-colour;
 
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;

data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json

@@ -54,7 +54,7 @@
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)"
             }
         ]
     },

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

@@ -6,17 +6,13 @@
   // as it'll just be the same as $govuk-footer-border.
   $govuk-footer-border-top: $govuk-border-colour;
   $govuk-footer-text: $govuk-text-colour;
-  $govuk-footer-link: $govuk-footer-text;
-  $govuk-footer-link-hover: false;
+  $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
 
   @if ($govuk-use-legacy-palette) {
     $govuk-footer-border-top: #a1acb2;
     $govuk-footer-border: govuk-colour("grey-2");
     $govuk-footer-text: #454a4c;
-    $govuk-footer-link: $govuk-footer-text;
-
-    // Only used with the legacy palette
-    $govuk-footer-link-hover: #171819;
+    $govuk-footer-link-hover-colour: #171819;
   }
 
   // Based on the govuk-crest-2x.png image dimensions.
@@ -37,27 +33,20 @@
   }
 
   .govuk-footer__link {
+    @include govuk-link-common;
+
     @if ($govuk-use-legacy-palette) {
       &:link,
       &:visited {
-        color: $govuk-footer-link;
+        color: $govuk-footer-text;
       }
 
       &:hover,
       &:active {
-        color: $govuk-footer-link-hover;
+        color: $govuk-footer-link-hover-colour;
       }
     } @else {
-      &:link,
-      &:visited,
-      &:hover,
-      &:active {
-        color: $govuk-footer-link;
-      }
-    }
-
-    &:focus {
-      @include govuk-focused-text;
+      @include govuk-link-style-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -134,7 +123,6 @@
     background-position: 50% 0%;
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
     text-align: center;
-    text-decoration: none;
     white-space: nowrap;
   }
 
@@ -210,6 +198,13 @@
     list-style: none;
     -webkit-column-gap: $govuk-gutter;
             column-gap: $govuk-gutter; // Support: Columns
+
+    // Disable thicker underlines on hover because of a bug in Chromium
+    // affecting links within columns
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
+    .govuk-footer__link:hover {
+      text-decoration-thickness: auto;
+    }
   }
 
   @include govuk-media-query ($from: desktop) {

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

@@ -4,10 +4,9 @@
   $govuk-header-border-color: $govuk-brand-colour;
   $govuk-header-border-width: govuk-spacing(2);
   $govuk-header-text: govuk-colour("white");
-  $govuk-header-link: govuk-colour("white");
-  $govuk-header-link-hover: govuk-colour("white");
   $govuk-header-link-active: #1d8feb;
   $govuk-header-nav-item-border-color: #2e3133;
+  $govuk-header-link-underline-thickness: 3px;
 
   .govuk-header {
     @include govuk-font($size: 16);
@@ -36,7 +35,19 @@
 
   .govuk-header__logotype {
     display: inline-block;
+
+    // Add a gap between logo and any product name
     margin-right: govuk-spacing(1);
+
+    // Prevent readability backplate from obscuring underline in Windows
+    // High Contrast Mode
+    forced-color-adjust: none;
+
+    // But remove it if there's nothing after the logo to keep hover and focus
+    // states neat
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   .govuk-header__logotype-crown {
@@ -57,33 +68,33 @@
   .govuk-header__product-name {
     @include govuk-font($size: 24, $line-height: 1);
     display: inline-table;
-    padding-right: govuk-spacing(2);
   }
 
   .govuk-header__link {
-    text-decoration: none;
+    // Avoid using the `govuk-link-common` mixin because the links in the header
+    // get a special treatment, because:
+    //
+    // - underlines are only visible on hover
+    // - all links get a 3px underline regardless of text size, as there are
+    //   multiple grouped elements close to one another and having slightly
+    //   different underline widths looks unbalanced
+    @include govuk-typography-common;
+    @include govuk-link-style-inverse;
 
-    &:link,
-    &:visited {
-      color: $govuk-header-link;
-    }
+    text-decoration: none;
 
     &:hover {
       text-decoration: underline;
+      text-decoration-thickness: $govuk-header-link-underline-thickness;
+
+      @if ($govuk-link-underline-offset) {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
     }
 
     &:focus {
       @include govuk-focused-text;
     }
-
-    // alphagov/govuk_template includes a specific a:link:focus selector
-    // designed to make unvisited links a slightly darker blue when focussed, so
-    // we need to override the text colour for that combination of selectors.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        @include govuk-text-colour;
-      }
-    }
   }
 
   .govuk-header__link--homepage {
@@ -92,6 +103,7 @@
     @include govuk-font($size: false, $weight: bold);
 
     display: inline-block;
+    margin-right: govuk-spacing(2);
     font-size: 30px; // We don't have a mixin that produces 30px font size
     line-height: 1;
 
@@ -103,10 +115,10 @@
     &:hover,
     &:active {
       // Negate the added border
-      margin-bottom: -1px;
+      margin-bottom: $govuk-header-link-underline-thickness * -1;
       // Omitting colour will use default value of currentColor – if we
       // specified currentColor explicitly IE8 would ignore this rule.
-      border-bottom: 1px solid;
+      border-bottom: $govuk-header-link-underline-thickness solid;
     }
 
     // Remove any borders that show when focused and hovered.
@@ -156,11 +168,17 @@
     margin: 0;
     padding: 0;
     border: 0;
-    color: $govuk-header-link;
+    color: govuk-colour("white");
     background: none;
+    cursor: pointer;
 
     &:hover {
-      text-decoration: underline;
+      -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
+              text-decoration: solid underline $govuk-header-link-underline-thickness;
+
+      @if ($govuk-link-underline-offset) {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
     }
 
     &:focus {

data/node_modules/govuk-frontend/govuk/components/input/macro-options.json

@@ -130,7 +130,7 @@
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)"
             }
         ]
     },

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

@@ -22,6 +22,6 @@
 
   .govuk-phase-banner__text {
     display: table-cell;
-    vertical-align: baseline;
+    vertical-align: middle;
   }
 }

data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json

@@ -3,14 +3,14 @@
         "name": "fieldset",
         "type": "object",
         "required": false,
-        "description": "Options for the fieldset component (e.g. legend).",
+        "description": "Options for the fieldset component (for example legend).",
         "isComponent": true
     },
     {
         "name": "hint",
         "type": "object",
         "required": false,
-        "description": "Options for the hint component (e.g. text).",
+        "description": "Options for the hint component (for example text).",
         "isComponent": true
     },
     {
@@ -30,7 +30,7 @@
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)"
             }
         ]
     },

data/node_modules/govuk-frontend/govuk/components/select/macro-options.json

@@ -86,7 +86,7 @@
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)"
             }
         ]
     },

data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss

@@ -2,6 +2,7 @@
   .govuk-skip-link {
     @include govuk-visually-hidden-focusable;
     @include govuk-typography-common;
+    @include govuk-link-decoration;
     @include govuk-link-style-text;
     @include govuk-typography-responsive($size: 16);
 
@@ -27,7 +28,6 @@
       // Undo unwanted changes when global styles are enabled
       @if ($govuk-global-styles) {
         box-shadow: none;
-        text-decoration: underline;
       }
     }
   }

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

@@ -30,16 +30,11 @@
   }
 
   .govuk-tabs__tab {
+    @include govuk-link-common;
     @include govuk-link-style-default;
 
     display: inline-block;
     margin-bottom: govuk-spacing(2);
-
-    // Focus state for mobile and when JavaScript is disabled
-    // It is removed for JS-enabled desktop styles
-    &:focus {
-      @include govuk-focused-text;
-    }
   }
 
   .govuk-tabs__panel {

data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json

@@ -66,7 +66,7 @@
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)"
             }
         ]
     },

data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss

@@ -46,6 +46,16 @@
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
+
+    // Improve rendering in Windows High Contrast Mode (Edge), where a
+    // readability backplate behind the exclamation mark obscures the circle
+    forced-color-adjust: none;
+
+    @media screen and (forced-colors: active) {
+      border-color: windowText;
+      color: windowText;
+      background: transparent;
+    }
   }
 
   .govuk-warning-text__text {

data/node_modules/govuk-frontend/govuk/core/_links.scss

@@ -27,6 +27,14 @@
     @include govuk-link-style-text;
   }
 
+  .govuk-link--inverse {
+    @include govuk-link-style-inverse;
+  }
+
+  .govuk-link--no-underline {
+    @include govuk-link-style-no-underline;
+  }
+
   .govuk-link--no-visited-state {
     @include govuk-link-style-no-visited-state;
   }