Merge pull request #2259 from alphagov/release-3.13.0

Release v3.13.0

dist/VERSION.txt

@@ -1 +1 @@
-3.12.0
+3.13.0

package/govuk/all.js

@@ -1751,6 +1751,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
  *
@@ -1762,12 +1803,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);
+  }
 };
 
 (function(undefined) {

package/govuk/components/breadcrumbs/_index.scss

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

package/govuk/components/button/_index.scss

@@ -241,13 +241,17 @@
 
     display: -webkit-inline-box;
 
+    display: -webkit-inline-flex;
+
     display: -ms-inline-flexbox;
 
     display: inline-flex;
     min-height: auto;
 
     -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 {

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

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