govuk_tech_docs 2.3.0 → 2.4.3

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

@@ -129,6 +129,7 @@
 
       .govuk-breadcrumbs__list {
         display: -webkit-box;
+        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
       }

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

@@ -241,6 +241,8 @@
 
     display: -webkit-inline-box;
 
+    display: -webkit-inline-flex;
+
     display: -ms-inline-flexbox;
 
     display: inline-flex;
@@ -248,6 +250,8 @@
 
     -webkit-box-pack: center;
 
+    -webkit-justify-content: center;
+
         -ms-flex-pack: center;
 
             justify-content: center;
@@ -260,10 +264,12 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -ms-flex-item-align: center;
-        align-self: center;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center;
   }
 
   @if $govuk-use-legacy-font {

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

@@ -73,47 +73,49 @@
         touch-action: manipulation;
   }
 
-  // [ ] Check box
-  .govuk-checkboxes__label:before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $govuk-checkboxes-size;
-    height: $govuk-checkboxes-size;
-    border: $govuk-border-width-form-element solid currentColor;
-    background: transparent;
-  }
+  @include govuk-not-ie8 {
+    // [ ] Check box
+    .govuk-checkboxes__label:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $govuk-checkboxes-size;
+      height: $govuk-checkboxes-size;
+      border: $govuk-border-width-form-element solid currentColor;
+      background: transparent;
+    }
 
-  // ✔ Check mark
-  //
-  // The check mark is a box with a border on the left and bottom side (└──),
-  // rotated 45 degrees
-  .govuk-checkboxes__label:after {
-    content: "";
-    box-sizing: border-box;
+    // ✔ Check mark
+    //
+    // The check mark is a box with a border on the left and bottom side (└──),
+    // rotated 45 degrees
+    .govuk-checkboxes__label:after {
+      content: "";
+      box-sizing: border-box;
 
-    position: absolute;
-    top: 11px;
-    left: 9px;
-    width: 23px;
-    height: 12px;
+      position: absolute;
+      top: 11px;
+      left: 9px;
+      width: 23px;
+      height: 12px;
 
-    -webkit-transform: rotate(-45deg);
+      -webkit-transform: rotate(-45deg);
 
-        -ms-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
 
-            transform: rotate(-45deg);
-    border: solid;
-    border-width: 0 0 5px 5px;
-    // Fix bug in IE11 caused by transform rotate (-45deg).
-    // See: alphagov/govuk_elements/issues/518
-    border-top-color: transparent;
+              transform: rotate(-45deg);
+      border: solid;
+      border-width: 0 0 5px 5px;
+      // Fix bug in IE11 caused by transform rotate (-45deg).
+      // See: alphagov/govuk_elements/issues/518
+      border-top-color: transparent;
 
-    opacity: 0;
+      opacity: 0;
 
-    background: transparent;
+      background: transparent;
+    }
   }
 
   .govuk-checkboxes__hint {
@@ -143,6 +145,19 @@
     opacity: .5;
   }
 
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-checkboxes__divider {
+    $govuk-divider-size: $govuk-checkboxes-size !default;
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
   // =========================================================
   // Conditional reveals
   // =========================================================

data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js

@@ -1110,6 +1110,47 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
   }
 };
 
+/**
+ * Uncheck other checkboxes
+ *
+ * Find any other checkbox inputs with the same name value, and uncheck them.
+ * This is useful for when a “None of these" checkbox is checked.
+ */
+Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
+  var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]');
+
+  nodeListForEach(allInputsWithSameName, function ($inputWithSameName) {
+    var hasSameFormOwner = ($input.form === $inputWithSameName.form);
+    if (hasSameFormOwner && $inputWithSameName !== $input) {
+      $inputWithSameName.checked = false;
+    }
+  });
+
+  this.syncAllConditionalReveals();
+};
+
+/**
+ * Uncheck exclusive inputs
+ *
+ * Find any checkbox inputs with the same name value and the 'exclusive' behaviour,
+ * and uncheck them. This helps prevent someone checking both a regular checkbox and a
+ * "None of these" checkbox in the same fieldset.
+ */
+Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
+  var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
+    'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
+  );
+
+  nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, function ($exclusiveInput) {
+    var hasSameFormOwner = ($input.form === $exclusiveInput.form);
+    if (hasSameFormOwner) {
+      $exclusiveInput.checked = false;
+    }
+  });
+
+  this.syncAllConditionalReveals();
+};
+
 /**
  * Click event handler
  *
@@ -1121,12 +1162,29 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
 Checkboxes.prototype.handleClick = function (event) {
   var $target = event.target;
 
-  // If a checkbox with aria-controls, handle click
-  var isCheckbox = $target.getAttribute('type') === 'checkbox';
+  // Ignore clicks on things that aren't checkbox inputs
+  if ($target.type !== 'checkbox') {
+    return
+  }
+
+  // If the checkbox conditionally-reveals some content, sync the state
   var hasAriaControls = $target.getAttribute('aria-controls');
-  if (isCheckbox && hasAriaControls) {
+  if (hasAriaControls) {
     this.syncConditionalRevealWithInputState($target);
   }
+
+  // No further behaviour needed for unchecking
+  if (!$target.checked) {
+    return
+  }
+
+  // Handle 'exclusive' checkbox behaviour (ie "None of these")
+  var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive');
+  if (hasBehaviourExclusive) {
+    this.unCheckAllInputsExcept($target);
+  } else {
+    this.unCheckExclusiveInputs($target);
+  }
 };
 
 return Checkboxes;

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

@@ -68,16 +68,20 @@
 
   .govuk-footer__meta {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
     -webkit-box-align: end;
+    -webkit-align-items: flex-end;
         -ms-flex-align: end;
             align-items: flex-end; // Support: Flexbox
     -webkit-box-pack: center;
+    -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center; // Support: Flexbox
   }
@@ -90,11 +94,13 @@
 
   .govuk-footer__meta-item--grow {
     -webkit-box-flex: 1;
+    -webkit-flex: 1;
         -ms-flex: 1;
             flex: 1; // Support: Flexbox
     @include govuk-media-query ($until: tablet) {
-      -ms-flex-preferred-size: 320px;
-          flex-basis: 320px; // Support: Flexbox
+      -webkit-flex-basis: 320px;
+          -ms-flex-preferred-size: 320px;
+              flex-basis: 320px; // Support: Flexbox
     }
   }
 
@@ -153,12 +159,14 @@
 
   .govuk-footer__navigation {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
   }
 
   .govuk-footer__section {
@@ -169,15 +177,18 @@
     vertical-align: top;
     // Ensure columns take up equal width (typically one-half:one-half)
     -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; // Support: Flexbox
-    -ms-flex-negative: 1;
-        flex-shrink: 1; // Support: Flexbox
+    -webkit-flex-shrink: 1;
+        -ms-flex-negative: 1;
+            flex-shrink: 1; // Support: Flexbox
     @include govuk-media-query ($until: desktop) {
       // Make sure columns do not drop below 200px in width
       // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -ms-flex-preferred-size: 200px;
-          flex-basis: 200px; // Support: Flexbox
+      -webkit-flex-basis: 200px;
+          -ms-flex-preferred-size: 200px;
+              flex-basis: 200px; // Support: Flexbox
     }
   }
 
@@ -187,6 +198,7 @@
     // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
     .govuk-footer__section:first-child:nth-last-child(2) {
       -webkit-box-flex: 2;
+      -webkit-flex-grow: 2;
           -ms-flex-positive: 2;
               flex-grow: 2; // Support: Flexbox
     }

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

@@ -36,15 +36,19 @@
   .govuk-header__logotype {
     display: inline-block;
 
-    // Add a gap between logo and any product name
+    // Add a gap after the logo in case it's followed by a product name. This
+    // gets removed later if the logotype is a :last-child.
     margin-right: govuk-spacing(1);
 
-    // Prevent readability backplate from obscuring underline in Windows
-    // High Contrast Mode
-    forced-color-adjust: none;
+    // Prevent readability backplate from obscuring underline in Windows High
+    // Contrast Mode
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      color: linktext;
+    }
 
-    // But remove it if there's nothing after the logo to keep hover and focus
-    // states neat
+    // Remove the gap after the logo if there's no product name to keep hover
+    // and focus states neat
     &:last-child {
       margin-right: 0;
     }
@@ -62,7 +66,7 @@
     width: 36px;
     height: 32px;
     border: 0;
-    vertical-align: middle;
+    vertical-align: bottom;
   }
 
   .govuk-header__product-name {

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

@@ -95,11 +95,13 @@
 
   .govuk-input__wrapper {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 
     .govuk-input {
       -webkit-box-flex: 0;
+      -webkit-flex: 0 1 auto;
           -ms-flex: 0 1 auto;
               flex: 0 1 auto;
     }
@@ -150,6 +152,8 @@
 
     -webkit-box-flex: 0;
 
+    -webkit-flex: 0 0 auto;
+
         -ms-flex: 0 0 auto;
 
             flex: 0 0 auto;

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

@@ -11,7 +11,9 @@
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (padding: unquote("max(calc(0px))")) {
+      $padding-safe-area-right: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
       $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
+      $padding-safe-area-left: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
       $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
 
       // Use max() to pick largest padding, default or with safe area

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

@@ -43,7 +43,6 @@
     // Prevent the exclamation mark from being included when the warning text
     // is copied, for example.
     -webkit-user-select: none;
-       -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
 

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

@@ -15,7 +15,6 @@
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.
     -webkit-text-size-adjust: 100%;
-       -moz-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
             text-size-adjust: 100%;
 

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

@@ -52,6 +52,12 @@
 @mixin govuk-link-hover-decoration {
   @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
     text-decoration-thickness: $govuk-link-hover-underline-thickness;
+    // Disable ink skipping on underlines on hover. Browsers haven't
+    // standardised on this part of the spec yet, so set both properties
+    -webkit-text-decoration-skip-ink: none;
+            text-decoration-skip-ink: none; // Chromium, Firefox
+    -webkit-text-decoration-skip: none;
+            text-decoration-skip: none; // Safari
   }
 }
 

data/node_modules/govuk-frontend/govuk/objects/_button-group.scss

@@ -30,13 +30,16 @@
     // doesn't play nicely with it
     // (https://github.com/w3c/csswg-drafts/issues/3559)
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-align: center;
+    -webkit-align-items: center;
         -ms-flex-align: center;
             align-items: center;
 
@@ -72,12 +75,16 @@
 
       -webkit-box-direction: normal;
 
+      -webkit-flex-direction: row;
+
           -ms-flex-direction: row;
 
               flex-direction: row;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
+      -webkit-flex-wrap: wrap;
+          -ms-flex-wrap: wrap;
+              flex-wrap: wrap;
       -webkit-box-align: baseline;
+      -webkit-align-items: baseline;
           -ms-flex-align: baseline;
               align-items: baseline;