katalyst-govuk-formbuilder 1.7.1 → 1.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d500045cb23ba6da9d6df55b1584249c2b95fadb8e44b0e8ea1fe63f58bbb5a1
-  data.tar.gz: 58dce6296ea70daee510c44a9c8bb403a3aed623cefff5496af5ff08cbe5b25c
+  metadata.gz: 8128c90fe1dd5ef017be23e39971ca0d829c7ff6a5b27c9927945711f727f4b1
+  data.tar.gz: 011ad3d671a3b7529f2bf03fa23064e2f91a92de40eaba610b268620dafe8b51
 SHA512:
-  metadata.gz: 37feec9e8a284f7ef6da32ea78543d6c525538485586a13cf7037f8ce8db0f7853111b1becbf8d26f9aeaacf7a164c243803d6adcbac9a4c6773eb5f717ee057
-  data.tar.gz: 956f29c704ddb6f99fe490142560945dc6f5738ec5af99601a7e83d1d1c963345c9720623007c0ca9c6c39215bb653af63e05b38f21d262b1535ddc2bfcf62de
+  metadata.gz: 6ccd164dbd7ed8a716b1d81feecc90b87ef94dda9e6953914f0078127217747b2f34620b3d5932b69874b1327077a9c83da7ea9525a6cdb1f2ec515ca24fa687
+  data.tar.gz: df2561a7bb8d78d45b0932a820e2b951de1bcb8765b960c5f5fac5c967a7262e8d103767bdd6de82ab2ca00231ceeef3aea712b586f7699f7564b601e776e033

data/app/assets/builds/katalyst/govuk/formbuilder.css

@@ -43,7 +43,10 @@
 
 
 :root {
-  --govuk-frontend-version: "5.0.0";
+  --govuk-frontend-version: "5.2.0";
+  --govuk-frontend-breakpoint-mobile: 20rem;
+  --govuk-frontend-breakpoint-tablet: 40.0625rem;
+  --govuk-frontend-breakpoint-desktop: 48.0625rem;
 }
 
 
@@ -1823,12 +1826,10 @@
 
 
 .govuk-checkboxes__item {
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
   position: relative;
-  min-height: 40px;
   margin-bottom: 10px;
-  padding-left: 40px;
-  clear: left;
 }
 
 .govuk-checkboxes__item:last-child,
@@ -1837,10 +1838,7 @@
 }
 
 .govuk-checkboxes__input {
-  position: absolute;
   z-index: 1;
-  top: -2px;
-  left: -2px;
   width: 44px;
   height: 44px;
   margin: 0;
@@ -1849,9 +1847,10 @@
 }
 
 .govuk-checkboxes__label {
-  display: inline-block;
+  align-self: center;
+  max-width: calc(100% - 74px);
   margin-bottom: 0;
-  padding: 8px 15px 5px;
+  padding: 7px 15px;
   cursor: pointer;
   touch-action: manipulation;
 }
@@ -1860,8 +1859,8 @@
   content: "";
   box-sizing: border-box;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 2px;
+  left: 2px;
   width: 40px;
   height: 40px;
   border: 2px solid currentcolor;
@@ -1872,8 +1871,8 @@
   content: "";
   box-sizing: border-box;
   position: absolute;
-  top: 11px;
-  left: 9px;
+  top: 13px;
+  left: 10px;
   width: 23px;
   height: 12px;
   transform: rotate(-45deg);
@@ -1886,8 +1885,14 @@
 
 .govuk-checkboxes__hint {
   display: block;
+  width: 100%;
+  margin-top: -5px;
   padding-right: 15px;
-  padding-left: 15px;
+  padding-left: 59px;
+}
+
+.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-checkboxes__hint {
+  margin-bottom: 0;
 }
 
 .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
@@ -1970,49 +1975,33 @@
 }
 
 .govuk-checkboxes--small .govuk-checkboxes__item {
-  min-height: 0;
   margin-bottom: 0;
-  padding-left: 34px;
-  float: left;
-}
-.govuk-checkboxes--small .govuk-checkboxes__item::after {
-  content: "";
-  display: block;
-  clear: both;
 }
 .govuk-checkboxes--small .govuk-checkboxes__input {
-  left: -10px;
+  margin-left: -10px;
 }
 .govuk-checkboxes--small .govuk-checkboxes__label {
-  margin-top: -2px;
-  padding: 13px 15px 13px 1px;
-  float: left;
-}
-@media (min-width: 40.0625em) {
-  .govuk-checkboxes--small .govuk-checkboxes__label {
-    padding: 11px 15px 10px 1px;
-  }
+  padding-left: 1px;
 }
 .govuk-checkboxes--small .govuk-checkboxes__label::before {
-  top: 8px;
+  top: 10px;
+  left: 0;
   width: 24px;
   height: 24px;
 }
 .govuk-checkboxes--small .govuk-checkboxes__label::after {
-  top: 15px;
+  top: 17px;
   left: 6px;
   width: 12px;
   height: 6.5px;
   border-width: 0 0 3px 3px;
 }
 .govuk-checkboxes--small .govuk-checkboxes__hint {
-  padding: 0;
-  clear: both;
+  padding-left: 34px;
 }
 .govuk-checkboxes--small .govuk-checkboxes__conditional {
   margin-left: 10px;
   padding-left: 20px;
-  clear: both;
 }
 .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
   outline: 3px dashed transparent;
@@ -2105,24 +2094,9 @@
 }
 
 .govuk-input--extra-letter-spacing {
-  font-family: "Open Sans", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: "tnum" 1;
-  font-weight: 400;
+  font-variant-numeric: tabular-nums;
   letter-spacing: 0.05em;
 }
-@media print {
-  .govuk-input--extra-letter-spacing {
-    font-family: sans-serif;
-  }
-}
-@supports (font-variant-numeric: tabular-nums) {
-  .govuk-input--extra-letter-spacing {
-    font-feature-settings: normal;
-    font-variant-numeric: tabular-nums;
-  }
-}
 
 .govuk-input--width-30 {
   max-width: 29.5em;
@@ -2179,7 +2153,9 @@
   font-size: 1rem;
   line-height: 1.25;
   box-sizing: border-box;
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   min-width: 2.5rem;
   height: 2.5rem;
   padding: 5px;
@@ -2210,12 +2186,6 @@
     line-height: 1.15;
   }
 }
-@media (max-width: 40.0525em) {
-  .govuk-input__prefix,
-  .govuk-input__suffix {
-    line-height: 1.6;
-  }
-}
 @media (max-width: 19.99em) {
   .govuk-input__prefix,
   .govuk-input__suffix {
@@ -2476,12 +2446,10 @@
 
 
 .govuk-radios__item {
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
   position: relative;
-  min-height: 40px;
   margin-bottom: 10px;
-  padding-left: 40px;
-  clear: left;
 }
 
 .govuk-radios__item:last-child,
@@ -2490,10 +2458,7 @@
 }
 
 .govuk-radios__input {
-  position: absolute;
   z-index: 1;
-  top: -2px;
-  left: -2px;
   width: 44px;
   height: 44px;
   margin: 0;
@@ -2502,9 +2467,10 @@
 }
 
 .govuk-radios__label {
-  display: inline-block;
+  align-self: center;
+  max-width: calc(100% - 74px);
   margin-bottom: 0;
-  padding: 8px 15px 5px;
+  padding: 7px 15px;
   cursor: pointer;
   touch-action: manipulation;
 }
@@ -2513,8 +2479,8 @@
   content: "";
   box-sizing: border-box;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 2px;
+  left: 2px;
   width: 40px;
   height: 40px;
   border: 2px solid currentcolor;
@@ -2525,8 +2491,8 @@
 .govuk-radios__label::after {
   content: "";
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 12px;
+  left: 12px;
   width: 0;
   height: 0;
   border: 10px solid currentcolor;
@@ -2537,8 +2503,14 @@
 
 .govuk-radios__hint {
   display: block;
+  width: 100%;
+  margin-top: -5px;
   padding-right: 15px;
-  padding-left: 15px;
+  padding-left: 59px;
+}
+
+.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-radios__hint {
+  margin-bottom: 0;
 }
 
 .govuk-radios__input:focus + .govuk-radios__label::before {
@@ -2568,15 +2540,13 @@
 }
 
 @media (min-width: 40.0625em) {
-  .govuk-radios--inline::after {
-    content: "";
-    display: block;
-    clear: both;
+  .govuk-radios--inline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
   }
   .govuk-radios--inline .govuk-radios__item {
     margin-right: 20px;
-    float: left;
-    clear: none;
   }
 }
 
@@ -2634,48 +2604,31 @@
 }
 
 .govuk-radios--small .govuk-radios__item {
-  min-height: 0;
   margin-bottom: 0;
-  padding-left: 34px;
-  float: left;
-}
-.govuk-radios--small .govuk-radios__item::after {
-  content: "";
-  display: block;
-  clear: both;
 }
 .govuk-radios--small .govuk-radios__input {
-  left: -10px;
+  margin-left: -10px;
 }
 .govuk-radios--small .govuk-radios__label {
-  margin-top: -2px;
-  padding: 13px 15px 13px 1px;
-  float: left;
-}
-@media (min-width: 40.0625em) {
-  .govuk-radios--small .govuk-radios__label {
-    padding: 11px 15px 10px 1px;
-  }
+  padding-left: 1px;
 }
 .govuk-radios--small .govuk-radios__label::before {
-  top: 8px;
+  top: 10px;
+  left: 0;
   width: 24px;
   height: 24px;
 }
 .govuk-radios--small .govuk-radios__label::after {
-  top: 15px;
+  top: 17px;
   left: 7px;
   border-width: 5px;
 }
 .govuk-radios--small .govuk-radios__hint {
-  padding: 0;
-  clear: both;
-  pointer-events: none;
+  padding-left: 34px;
 }
 .govuk-radios--small .govuk-radios__conditional {
   margin-left: 10px;
   padding-left: 20px;
-  clear: both;
 }
 .govuk-radios--small .govuk-radios__divider {
   width: 24px;

data/app/assets/builds/katalyst/govuk/formbuilder.js

@@ -43,6 +43,38 @@ function getFragmentFromUrl(url) {
   }
   return url.split('#').pop();
 }
+function getBreakpoint(name) {
+  const property = `--govuk-frontend-breakpoint-${name}`;
+  const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
+  return {
+    property,
+    value: value || undefined
+  };
+}
+function setFocus($element, options = {}) {
+  var _options$onBeforeFocu;
+  const isFocusable = $element.getAttribute('tabindex');
+  if (!isFocusable) {
+    $element.setAttribute('tabindex', '-1');
+  }
+  function onFocus() {
+    $element.addEventListener('blur', onBlur, {
+      once: true
+    });
+  }
+  function onBlur() {
+    var _options$onBlur;
+    (_options$onBlur = options.onBlur) == null || _options$onBlur.call($element);
+    if (!isFocusable) {
+      $element.removeAttribute('tabindex');
+    }
+  }
+  $element.addEventListener('focus', onFocus, {
+    once: true
+  });
+  (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);
+  $element.focus();
+}
 function isSupported($scope = document.body) {
   if (!$scope) {
     return false;
@@ -1138,18 +1170,10 @@ class ErrorSummary extends GOVUKFrontendComponent {
     }
     this.$module = $module;
     this.config = mergeConfigs(ErrorSummary.defaults, config, normaliseDataset($module.dataset));
-    this.setFocus();
-    this.$module.addEventListener('click', event => this.handleClick(event));
-  }
-  setFocus() {
-    if (this.config.disableAutoFocus) {
-      return;
+    if (!this.config.disableAutoFocus) {
+      setFocus(this.$module);
     }
-    this.$module.setAttribute('tabindex', '-1');
-    this.$module.addEventListener('blur', () => {
-      this.$module.removeAttribute('tabindex');
-    });
-    this.$module.focus();
+    this.$module.addEventListener('click', event => this.handleClick(event));
   }
   handleClick(event) {
     const $target = event.target;
@@ -1479,16 +1503,26 @@ class Header extends GOVUKFrontendComponent {
     }
     this.$menu = $menu;
     this.$menuButton = $menuButton;
-    this.mql = window.matchMedia('(min-width: 48.0625em)');
+    this.setupResponsiveChecks();
+    this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
+  }
+  setupResponsiveChecks() {
+    const breakpoint = getBreakpoint('desktop');
+    if (!breakpoint.value) {
+      throw new ElementError({
+        componentName: 'Header',
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
+      });
+    }
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
     if ('addEventListener' in this.mql) {
-      this.mql.addEventListener('change', () => this.syncState());
+      this.mql.addEventListener('change', () => this.checkMode());
     } else {
-      this.mql.addListener(() => this.syncState());
+      this.mql.addListener(() => this.checkMode());
     }
-    this.syncState();
-    this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
+    this.checkMode();
   }
-  syncState() {
+  checkMode() {
     if (!this.mql || !this.$menu || !this.$menuButton) {
       return;
     }
@@ -1507,7 +1541,7 @@ class Header extends GOVUKFrontendComponent {
   }
   handleMenuButtonClick() {
     this.menuIsOpen = !this.menuIsOpen;
-    this.syncState();
+    this.checkMode();
   }
 }
 Header.moduleName = 'govuk-header';
@@ -1535,22 +1569,9 @@ class NotificationBanner extends GOVUKFrontendComponent {
     }
     this.$module = $module;
     this.config = mergeConfigs(NotificationBanner.defaults, config, normaliseDataset($module.dataset));
-    this.setFocus();
-  }
-  setFocus() {
-    if (this.config.disableAutoFocus) {
-      return;
+    if (this.$module.getAttribute('role') === 'alert' && !this.config.disableAutoFocus) {
+      setFocus(this.$module);
     }
-    if (this.$module.getAttribute('role') !== 'alert') {
-      return;
-    }
-    if (!this.$module.getAttribute('tabindex')) {
-      this.$module.setAttribute('tabindex', '-1');
-      this.$module.addEventListener('blur', () => {
-        this.$module.removeAttribute('tabindex');
-      });
-    }
-    this.$module.focus();
   }
 }
 
@@ -1676,8 +1697,6 @@ class SkipLink extends GOVUKFrontendComponent {
     var _this$$module$getAttr;
     super();
     this.$module = void 0;
-    this.$linkedElement = void 0;
-    this.linkedElementListener = false;
     if (!($module instanceof HTMLAnchorElement)) {
       throw new ElementError({
         componentName: 'Skip link',
@@ -1710,29 +1729,14 @@ class SkipLink extends GOVUKFrontendComponent {
         identifier: `Target content (\`id="${linkedElementId}"\`)`
       });
     }
-    this.$linkedElement = $linkedElement;
-    this.$module.addEventListener('click', () => this.focusLinkedElement());
-  }
-  focusLinkedElement() {
-    if (!this.$linkedElement) {
-      return;
-    }
-    if (!this.$linkedElement.getAttribute('tabindex')) {
-      this.$linkedElement.setAttribute('tabindex', '-1');
-      this.$linkedElement.classList.add('govuk-skip-link-focused-element');
-      if (!this.linkedElementListener) {
-        this.$linkedElement.addEventListener('blur', () => this.removeFocusProperties());
-        this.linkedElementListener = true;
+    this.$module.addEventListener('click', () => setFocus($linkedElement, {
+      onBeforeFocus() {
+        $linkedElement.classList.add('govuk-skip-link-focused-element');
+      },
+      onBlur() {
+        $linkedElement.classList.remove('govuk-skip-link-focused-element');
       }
-    }
-    this.$linkedElement.focus();
-  }
-  removeFocusProperties() {
-    if (!this.$linkedElement) {
-      return;
-    }
-    this.$linkedElement.removeAttribute('tabindex');
-    this.$linkedElement.classList.remove('govuk-skip-link-focused-element');
+    }));
   }
 }
 SkipLink.moduleName = 'govuk-skip-link';
@@ -1802,7 +1806,14 @@ class Tabs extends GOVUKFrontendComponent {
     this.setupResponsiveChecks();
   }
   setupResponsiveChecks() {
-    this.mql = window.matchMedia('(min-width: 40.0625em)');
+    const breakpoint = getBreakpoint('tablet');
+    if (!breakpoint.value) {
+      throw new ElementError({
+        componentName: 'Tabs',
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
+      });
+    }
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
     if ('addEventListener' in this.mql) {
       this.mql.addEventListener('change', () => this.checkMode());
     } else {