govuk_publishing_components 17.21.0 → 18.0.0

data/node_modules/govuk-frontend/{components → govuk/components}/accordion/_accordion.scss

@@ -5,6 +5,10 @@
 
 @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");
   }
@@ -15,6 +19,7 @@
   }
 
   .govuk-accordion__section-header {
+    padding-top: govuk-spacing(3);
     padding-bottom: govuk-spacing(3);
   }
 
@@ -52,7 +57,6 @@
     // Borders between accordion sections
     .govuk-accordion__section {
       padding-top: 0;
-      border-top: 1px solid $govuk-border-colour;
     }
 
     // Hide the body of collapsed sections
@@ -70,15 +74,23 @@
     // This is styled to look like a link not a button
     .govuk-accordion__open-all {
       @include govuk-font($size: 16);
-      @include govuk-link-common;
-      display: inline;
+      position: relative;
+      z-index: 1;
+      margin: 0;
+      padding: 0;
       border-width: 0;
       color: $govuk-link-colour;
       background: none;
       cursor: pointer;
+      -webkit-appearance: none;
 
-      &:focus {
-        background: none;
+      @include govuk-link-common;
+      @include govuk-link-style-default;
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
       }
     }
 
@@ -87,46 +99,42 @@
       position: relative;
       // 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;
     }
 
-    // Section headers have a grey background on hover as an additional affodance
-    .govuk-accordion__section-header:hover {
-      background-color: govuk-colour("grey-4");
-      // 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) {
-        background-color: initial;
+    // 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;
       }
     }
 
-    // Setting focus styles on header so that summary that is not part of the button is included in focus
-    .govuk-accordion__section-header--focused {
-      // These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus)
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
-    }
-
     // Buttons within the headers don’t need default styling
     .govuk-accordion__section-button {
-      @include govuk-link-common;
-      width: 100%;
+      @include govuk-typography-common;
       margin-top: 0;
       margin-bottom: 0;
       margin-left: 0;
-      padding-top: govuk-spacing(3);
-      padding-bottom: 0;
-      padding-left: 0;
+      padding: 0;
       border-width: 0;
-      // Headings in section headers have link colours as an additional affodance
-      color: $govuk-link-colour;
+      color: inherit;
       background: none;
       text-align: left;
       cursor: pointer;
+      -webkit-appearance: none;
 
       &:focus {
-        outline: none;
-        background: none;
+        @include govuk-focused-text;
+      }
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
       }
     }
 
@@ -140,6 +148,18 @@
       left: 0;
     }
 
+    .govuk-accordion__section-button:hover:not(:focus) {
+      text-decoration: underline;
+    }
+
+    // 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-button:hover {
+        text-decoration: none;
+      }
+    }
+
     .govuk-accordion__controls {
       text-align: right;
     }

data/node_modules/govuk-frontend/{components → govuk/components}/accordion/macro-options.json

@@ -32,13 +32,13 @@
             {
                 "name": "heading.text",
                 "type": "string",
-                "required": false,
+                "required": true,
                 "description": "The title of each section. If `heading.html` is supplied, this is ignored. This is used both as the title for each section, and as the button to open or close each section."
             },
             {
                 "name": "heading.html",
                 "type": "string",
-                "required": false,
+                "required": true,
                 "description": "The HTML content of the header for each section which is used both as the title for each section, and as the button to open or close each section."
             },
             {
@@ -53,6 +53,12 @@
                 "required": false,
                 "description": "HTML content for summary line."
             },
+            {
+                "name": "content.text",
+                "type": "string",
+                "required": true,
+                "description": "The text content of each section, which is hidden when the section is closed. If `content.html` is supplied, this is ignored."
+            },
             {
                 "name": "content.html",
                 "type": "string",

data/node_modules/govuk-frontend/{components → govuk/components}/accordion/template.njk

@@ -1,9 +1,8 @@
 {% set id = params.id %}
 {% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
 
-<div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}"  data-module="accordion" id="{{ id }}"
+<div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}" data-module="govuk-accordion" id="{{ id }}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-
   {% for item in params.items %}
     <div class="govuk-accordion__section {% if item.expanded %}govuk-accordion__section--expanded{% endif %}">
       <div class="govuk-accordion__section-header">
@@ -23,5 +22,4 @@
       </div>
     </div>
   {% endfor %}
-
 </div>

data/node_modules/govuk-frontend/{components → govuk/components}/back-link/_back-link.scss

@@ -25,6 +25,12 @@
     // Underline is provided by a bottom border
     text-decoration: none;
 
+    // When the back link is focused, hide the bottom link border as the
+    // focus styles has a bottom border.
+    &:focus {
+      border-bottom-color: transparent;
+    }
+
     // Prepend left pointing arrow
     &:before {
       @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
@@ -34,21 +40,23 @@
       // Vertically align with the parent element
       position: absolute;
 
-      top: -1px;
-      bottom: 1px;
+      top: 0;
+      bottom: 0;
       left: 0;
 
       margin: auto;
     }
   }
 
-  // Begin adjustments for font baseline offset
-  // These should be removed when the font is updated with the correct baseline
-
-  .govuk-back-link:before {
-    $offset: 1px;
+  @if $govuk-use-legacy-font {
+    // Begin adjustments for font baseline offset
+    // These should be removed when legacy font support is dropped
+    .govuk-back-link:before {
+      $offset: 1px;
 
-    top: $offset * -1;
-    bottom: $offset;
+      top: $offset * -1;
+      bottom: $offset;
+    }
   }
+
 }

data/node_modules/govuk-frontend/{components → govuk/components}/breadcrumbs/_breadcrumbs.scss

@@ -56,17 +56,16 @@
 
       position: absolute;
 
-      // Begin adjustments for font baseline offset
-      // These should be reverted when the font is updated with the correct
-      // baseline
-
-      // top: 0;
-      // bottom: 0;
-
-      top: -1px;
-      bottom: 1px;
-
-      // End adjustments for font baseline offset
+      @if $govuk-use-legacy-font {
+        // Begin adjustments for font baseline offset
+        // These should be removed when legacy font support is dropped
+        top: -1px;
+        bottom: 1px;
+
+      } @else {
+        top: 0;
+        bottom: 0;
+      }
 
       // Offset by the difference between the width of the non-rotated square
       // and its width when rotated

data/node_modules/govuk-frontend/{components → govuk/components}/button/_button.scss

@@ -3,14 +3,13 @@
 @import "../../helpers/all";
 
 @include govuk-exports("govuk/component/button") {
-  // Primary button variables
-  $govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
+  $govuk-button-colour: govuk-colour("green", $legacy: #00823b); // sass-lint:disable no-color-literals
   $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
   $govuk-button-text-colour: govuk-colour("white");
 
   // Secondary button variables
-  $govuk-secondary-button-colour: govuk-colour("grey-3");
+  $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
   $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
   $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
   $govuk-secondary-button-text-colour: govuk-colour("black");
@@ -28,7 +27,6 @@
 
   .govuk-button {
     @include govuk-font($size: 19, $line-height: 19px);
-    @include govuk-focusable;
 
     box-sizing: border-box;
     display: inline-block;
@@ -36,7 +34,7 @@
     width: 100%;
     margin-top: 0;
     @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
-    padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1
+    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;
     border-radius: 0;
     color: $govuk-button-text-colour;
@@ -64,37 +62,49 @@
       text-decoration: none;
     }
 
-    // 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 so
-    // so that unvisited links styled as buttons do not end up with dark blue
-    // text when focussed.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-button-text-colour;
-      }
-    }
-
     // Fix unwanted button padding in Firefox
     &::-moz-focus-inner {
       padding: 0;
       border: 0;
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-button-hover-colour;
     }
 
     &:active {
+      // Bump the button down so it looks like its being pressed in
       top: $button-shadow-size;
-      box-shadow: none;
 
       @include govuk-if-ie8 {
         border-bottom-width: 0;
       }
     }
 
+    &:focus {
+      border-color: $govuk-focus-colour;
+      // When colours are overridden, for example when users have a dark mode,
+      // backgrounds and box-shadows disappear, so we need to ensure there's a
+      // transparent outline which will be set to a visible colour.
+      // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
+      @include govuk-not-ie8 {
+        outline: $govuk-focus-width solid transparent;
+      }
+      // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
+      @include govuk-if-ie8 {
+        color: $govuk-focus-text-colour;
+        background-color: $govuk-focus-colour;
+      }
+      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+    }
+
+    &:focus:not(:active):not(:hover) {
+      border-color: $govuk-focus-colour;
+      color: $govuk-focus-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 2px 0 $govuk-focus-text-colour;
+    }
+
     // The following adjustments do not work for <input type="button"> as
     // non-container elements cannot include pseudo elements (i.e. ::before).
 
@@ -133,7 +143,6 @@
   .govuk-button[disabled="disabled"],
   .govuk-button[disabled] {
     opacity: (.5);
-    background: $govuk-button-colour;
 
     &:hover {
       background-color: $govuk-button-colour;
@@ -176,9 +185,12 @@
       }
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-secondary-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-secondary-button-colour;
+      }
     }
   }
 
@@ -205,9 +217,12 @@
       }
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-warning-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-warning-button-colour;
+      }
     }
   }
 
@@ -215,35 +230,50 @@
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);
 
+    display: -webkit-inline-box;
+
+    display: -webkit-inline-flex;
+
+    display: -ms-inline-flexbox;
+
+    display: inline-flex;
     min-height: auto;
-    padding-top: govuk-spacing(2) - $govuk-border-width-form-element;
-    padding-right: govuk-spacing(7);
-    padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element;
-    padding-left: govuk-spacing(3);
 
-    background-image: govuk-image-url("icon-pointer.png");
-    background-repeat: no-repeat;
-    background-position: 100% 50%;
+    -webkit-box-pack: center;
 
-    @include govuk-device-pixel-ratio {
-      background-image: govuk-image-url("icon-pointer-2x.png");
-      background-size: 30px 19px;
-    }
-  }
+    -webkit-justify-content: center;
 
-  // Begin adjustments for font baseline offset
-  // These should be removed when the font is updated with the correct baseline
-  // For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428
+        -ms-flex-pack: center;
 
-  $offset: 2;
+            justify-content: center;
+  }
 
-  .govuk-button {
-    padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
-    padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+  .govuk-button__start-icon {
+    margin-left: govuk-spacing(1);
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(2);
+    }
+    vertical-align: middle;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center;
   }
 
-  .govuk-button--start {
-    padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
-    padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+  @if $govuk-use-legacy-font {
+    // Begin adjustments for font baseline offset when using v1 of nta
+    $offset: 2;
+
+    .govuk-button {
+      padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
+      padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+    }
+
+    .govuk-button__start-icon {
+      margin-top: -3px;
+    }
   }
 }