Release v3.12.0

dist/VERSION.txt

@@ -1 +1 @@
-3.11.0
+3.12.0

package/govuk/components/accordion/_index.scss

@@ -1,9 +1,4 @@
 @include govuk-exports("govuk/component/accordion") {
-
-  $govuk-accordion-link-colour: $govuk-link-colour;
-  $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
-  $govuk-accordion-border-width: 3px;
-
   .govuk-accordion {
     @include govuk-responsive-margin(6, "bottom");
   }
@@ -98,19 +93,9 @@
       // Safe area on the right to avoid clashing with icon
       padding-right: 40px;
       border-top: 1px solid $govuk-border-colour;
-      color: $govuk-accordion-link-colour;
       cursor: pointer;
     }
 
-    // For devices that can't hover such as touch devices,
-    // remove hover state as it can be stuck in that state (iOS).
-    @media (hover: none) {
-      .govuk-accordion__section-header:hover {
-        border-top-color: $govuk-accordion-link-colour;
-        box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
-      }
-    }
-
     // Buttons within the headers don’t need default styling
     .govuk-accordion__section-button {
       @include govuk-typography-common;
@@ -119,7 +104,7 @@
       margin-left: 0;
       padding: 0;
       border-width: 0;
-      color: inherit;
+      color: $govuk-link-colour;
       background: none;
       text-align: left;
       cursor: pointer;
@@ -147,7 +132,13 @@
     }
 
     .govuk-accordion__section-button:hover:not(:focus) {
+      color: $govuk-link-hover-colour;
       text-decoration: underline;
+
+      // This needs to come after the text-decoration property otherwise
+      // text-decoration, as a shorthand property, resets it to auto
+      @include govuk-link-hover-decoration;
+      text-underline-offset: $govuk-link-underline-offset;
     }
 
     // For devices that can't hover such as touch devices,

package/govuk/components/back-link/_index.scss

@@ -24,21 +24,6 @@
     padding-left: 14px;
   }
 
-  // Only underline if the component is linkable
-  .govuk-back-link[href] {
-    text-decoration: underline;
-
-    // When the back link is focused, hide the bottom link border as the
-    // focus styles has a bottom border.
-    &:focus {
-      text-decoration: none;
-
-      &:before {
-        border-color: $govuk-text-colour;
-      }
-    }
-  }
-
   // Prepend left pointing chevron
   .govuk-back-link:before {
     content: "";
@@ -88,6 +73,10 @@
     }
   }
 
+  .govuk-back-link:focus:before {
+    border-color: $govuk-focus-text-colour;
+  }
+
   .govuk-back-link:after {
     content: "";
     position: absolute;

package/govuk/components/character-count/macro-options.json

@@ -72,7 +72,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)"
             }
         ]
     },

package/govuk/components/checkboxes/macro-options.json

@@ -9,14 +9,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
     },
     {
@@ -36,7 +36,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)"
             }
         ]
     },

package/govuk/components/cookie-banner/README.md

@@ -0,0 +1,15 @@
+# Cookie banner
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the cookie banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/cookie-banner).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/cookie-banner/#options-default-cookie-banner-example) for details.

package/govuk/components/cookie-banner/macro-options.json

@@ -3,7 +3,7 @@
         "name": "ariaLabel",
         "type": "string",
         "required": false,
-        "description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the replacement message. Defaults to \"Cookie banner\"."
+        "description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to \"Cookie banner\"."
     },
     {
         "name": "hidden",
@@ -27,7 +27,7 @@
         "name": "messages",
         "type": "array",
         "required": true,
-        "description": "The different messages you can pass into the cookie banner. For example, the cookie message and the replacement message.",
+        "description": "The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.",
         "params": [
             {
                 "name": "headingText",
@@ -69,13 +69,13 @@
                         "name": "type",
                         "type": "string",
                         "required": false,
-                        "description": "The type of button. Does not apply if you set `href`, which renders a link. You can choose `button` or `submit`."
+                        "description": "The type of button. You can set `button` or `submit`. Set `button` and `href` to render a link styled as a button. If you set `href`, it overrides `submit`."
                     },
                     {
                         "name": "href",
                         "type": "string",
                         "required": false,
-                        "description": "The `href` for a link. If you set `href`, users will see a link instead of a button."
+                        "description": "The `href` for a link. Set `button` and `href` to render a link styled as a button."
                     },
                     {
                         "name": "name",
@@ -107,13 +107,13 @@
                 "name": "hidden",
                 "type": "boolean",
                 "required": false,
-                "description": "Defaults to `false`. If you set it to `true`, the message is hidden. You can use `hidden` for client-side implementations where the replacement message HTML is present, but hidden on the page."
+                "description": "Defaults to `false`. If you set it to `true`, the message is hidden. You can use `hidden` for client-side implementations where the confirmation message HTML is present, but hidden on the page."
             },
             {
                 "name": "role",
                 "type": "string",
                 "required": false,
-                "description": "Set `role` to `alert` on replacement messages to allow assistive tech to automatically read the message. You will also need to move focus to the replacement message using JavaScript you have written yourself."
+                "description": "Set `role` to `alert` on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself."
             },
             {
                 "name": "classes",

package/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,

package/govuk/components/date-input/macro-options.json

@@ -91,15 +91,15 @@
                 "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)"
             }
         ]
     },
     {
         "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
     },
     {

package/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

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

package/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)"
             }
         ]
     },

package/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) {