govuk_tech_docs 3.2.0 → 3.3.0

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

@@ -58,7 +58,7 @@
     position: relative;
     top: -1px;
     margin-right: 1px;
-    fill: currentColor;
+    fill: currentcolor;
     vertical-align: top;
   }
 
@@ -91,7 +91,7 @@
       text-decoration: underline;
       text-decoration-thickness: $govuk-header-link-underline-thickness;
 
-      @if ($govuk-link-underline-offset) {
+      @if $govuk-link-underline-offset {
         text-underline-offset: $govuk-link-underline-offset;
       }
     }
@@ -111,6 +111,16 @@
     font-size: 30px; // We don't have a mixin that produces 30px font size
     line-height: 1;
 
+    @include govuk-media-query($from: tablet) {
+      display: inline;
+
+      &:focus {
+        // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
+        // This is to stop the logo getting cut off by the box shadow when focused on above a product name
+        box-shadow: 0 0 $govuk-focus-colour;
+      }
+    }
+
     &:link,
     &:visited {
       text-decoration: none;
@@ -132,6 +142,9 @@
     }
   }
 
+  // The govuk-header__link--service-name class is deprecated - use
+  // govuk-header__service-name instead.
+  .govuk-header__service-name,
   .govuk-header__link--service-name {
     display: inline-block;
     margin-bottom: govuk-spacing(2);
@@ -180,7 +193,7 @@
       -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
               text-decoration: solid underline $govuk-header-link-underline-thickness;
 
-      @if ($govuk-link-underline-offset) {
+      @if $govuk-link-underline-offset {
         text-underline-offset: $govuk-link-underline-offset;
       }
     }
@@ -195,14 +208,21 @@
       margin-left: govuk-spacing(1);
     }
 
+    &[aria-expanded="true"]:after {
+      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
     @include govuk-media-query ($from: tablet) {
       top: govuk-spacing(3);
     }
-  }
 
-  .govuk-header__menu-button--open {
-    &:after {
-      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    .js-enabled & {
+      display: block;
+    }
+
+    &[hidden],
+    .js-enabled &[hidden] {
+      display: none;
     }
   }
 
@@ -217,25 +237,9 @@
     margin: 0;
     padding: 0;
     list-style: none;
-  }
 
-  .js-enabled {
-    .govuk-header__menu-button {
-      display: block;
-      @include govuk-media-query ($from: desktop) {
-        display: none;
-      }
-    }
-
-    .govuk-header__navigation-list {
+    &[hidden] {
       display: none;
-      @include govuk-media-query ($from: desktop) {
-        display: block;
-      }
-    }
-
-    .govuk-header__navigation-list--open {
-      display: block;
     }
   }
 
@@ -247,6 +251,8 @@
     }
   }
 
+  // The govuk-header__navigation--no-service-name class is deprecated and will
+  // be removed in the next major release.
   .govuk-header__navigation--no-service-name {
     padding-top: govuk-spacing(7);
   }

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

@@ -1014,12 +1014,29 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+/**
+ * Header component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for header
+ */
 function Header ($module) {
   this.$module = $module;
   this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
   this.$menu = this.$menuButton && $module.querySelector(
     '#' + this.$menuButton.getAttribute('aria-controls')
   );
+
+  // Save the opened/closed state for the nav in memory so that we can
+  // accurately maintain state when the screen is changed from small to
+  // big and back to small
+  this.menuIsOpen = false;
+
+  // A global const for storing a matchMedia instance which we'll use to
+  // detect when a screen size change happens. We set this later during the
+  // init function and rely on it being null if the feature isn't available
+  // to initially apply hidden attributes
+  this.mql = null;
 }
 
 /**
@@ -1027,27 +1044,58 @@ function Header ($module) {
  *
  * Check for the presence of the header, menu and menu button – if any are
  * missing then there's nothing to do so return early.
+ * Feature sniff for and apply a matchMedia for desktop which will
+ * trigger a state sync if the browser viewport moves between states. If
+ * matchMedia isn't available, hide the menu button and present the "no js"
+ * version of the menu to the user.
  */
 Header.prototype.init = function () {
   if (!this.$module || !this.$menuButton || !this.$menu) {
     return
   }
 
-  this.syncState(this.$menu.classList.contains('govuk-header__navigation-list--open'));
-  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this));
+  if ('matchMedia' in window) {
+    // Set the matchMedia to the govuk-frontend desktop breakpoint
+    this.mql = window.matchMedia('(min-width: 48.0625em)');
+
+    if ('addEventListener' in this.mql) {
+      this.mql.addEventListener('change', this.syncState.bind(this));
+    } else {
+      // addListener is a deprecated function, however addEventListener
+      // isn't supported by IE or Safari. We therefore add this in as
+      // a fallback for those browsers
+      this.mql.addListener(this.syncState.bind(this));
+    }
+
+    this.syncState();
+    this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this));
+  } else {
+    this.$menuButton.setAttribute('hidden', '');
+  }
 };
 
 /**
  * Sync menu state
  *
- * Sync the menu button class and the accessible state of the menu and the menu
- * button with the visible state of the menu
- *
- * @param {boolean} isVisible Whether the menu is currently visible
+ * Uses the global variable menuIsOpen to correctly set the accessible and
+ * visual states of the menu and the menu button.
+ * Additionally will force the menu to be visible and the menu button to be
+ * hidden if the matchMedia is triggered to desktop.
  */
-Header.prototype.syncState = function (isVisible) {
-  this.$menuButton.classList.toggle('govuk-header__menu-button--open', isVisible);
-  this.$menuButton.setAttribute('aria-expanded', isVisible);
+Header.prototype.syncState = function () {
+  if (this.mql.matches) {
+    this.$menu.removeAttribute('hidden');
+    this.$menuButton.setAttribute('hidden', '');
+  } else {
+    this.$menuButton.removeAttribute('hidden');
+    this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen);
+
+    if (this.menuIsOpen) {
+      this.$menu.removeAttribute('hidden');
+    } else {
+      this.$menu.setAttribute('hidden', '');
+    }
+  }
 };
 
 /**
@@ -1057,8 +1105,8 @@ Header.prototype.syncState = function (isVisible) {
  * sync the accessibility state and menu button state
  */
 Header.prototype.handleMenuButtonClick = function () {
-  var isVisible = this.$menu.classList.toggle('govuk-header__navigation-list--open');
-  this.syncState(isVisible);
+  this.menuIsOpen = !this.menuIsOpen;
+  this.syncState();
 };
 
 return Header;

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

@@ -22,7 +22,6 @@
 
     // Disable inner shadow and remove rounded corners
     -webkit-appearance: none;
-       -moz-appearance: none;
             appearance: none;
 
     &:focus {
@@ -61,49 +60,44 @@
     }
   }
 
-  // The ex measurements are based on the number of W's that can fit inside the input
-  // Extra space is left on the right hand side to allow for the Safari prefill icon
-  // Linear regression estimation based on visual tests: y = 1.76 + 1.81x
+  // em measurements are based on the point size of the typeface
+  // Extra space is added on the right hand side to allow for the Safari prefill icon
 
   .govuk-input--width-30 {
-    max-width: 56ex + 3ex;
+    max-width: 29.5em;
   }
 
   .govuk-input--width-20 {
-    max-width: 38ex + 3ex;
+    max-width: 20.5em;
   }
 
   .govuk-input--width-10 {
-    max-width: 20ex + 3ex;
+    max-width: 11.5em;
   }
 
   .govuk-input--width-5 {
-    max-width: 10.8ex;
+    max-width: 5.5em;
   }
 
   .govuk-input--width-4 {
-    max-width: 9ex;
+    max-width: 4.5em;
   }
 
   .govuk-input--width-3 {
-    max-width: 7.2ex;
+    max-width: 3.75em;
   }
 
   .govuk-input--width-2 {
-    max-width: 5.4ex;
+    max-width: 2.75em;
   }
 
   .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;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto;
     }
 
     .govuk-input:focus {
@@ -150,13 +144,9 @@
     // Emphasise non-editable status of prefixes and suffixes
     cursor: default;
 
-    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
 
-    -webkit-flex: 0 0 auto;
-
-        -ms-flex: 0 0 auto;
-
-            flex: 0 0 auto;
+        flex: 0 0 auto;
 
     // Split prefix/suffix onto separate lines on narrow screens
     @include govuk-media-query($until: mobile) {

data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js

@@ -501,8 +501,247 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
-function NotificationBanner ($module) {
+/**
+ * Common helpers which do not require polyfill.
+ *
+ * IMPORTANT: If a helper require a polyfill, please isolate it in its own module
+ * so that the polyfill can be properly tree-shaken and does not burden
+ * the components that do not need that helper
+ *
+ * @module common/index
+ */
+
+/**
+ * Config flattening function
+ *
+ * Takes any number of objects, flattens them into namespaced key-value pairs,
+ * (e.g. {'i18n.showSection': 'Show section'}) and combines them together, with
+ * greatest priority on the LAST item passed in.
+ *
+ * @returns {object} A flattened object of key-value pairs.
+ */
+function mergeConfigs (/* configObject1, configObject2, ...configObjects */) {
+  /**
+   * Function to take nested objects and flatten them to a dot-separated keyed
+   * object. Doing this means we don't need to do any deep/recursive merging of
+   * each of our objects, nor transform our dataset from a flat list into a
+   * nested object.
+   *
+   * @param {object} configObject - Deeply nested object
+   * @returns {object} Flattened object with dot-separated keys
+   */
+  var flattenObject = function (configObject) {
+    // Prepare an empty return object
+    var flattenedObject = {};
+
+    // Our flattening function, this is called recursively for each level of
+    // depth in the object. At each level we prepend the previous level names to
+    // the key using `prefix`.
+    var flattenLoop = function (obj, prefix) {
+      // Loop through keys...
+      for (var key in obj) {
+        // Check to see if this is a prototypical key/value,
+        // if it is, skip it.
+        if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+          continue
+        }
+        var value = obj[key];
+        var prefixedKey = prefix ? prefix + '.' + key : key;
+        if (typeof value === 'object') {
+          // If the value is a nested object, recurse over that too
+          flattenLoop(value, prefixedKey);
+        } else {
+          // Otherwise, add this value to our return object
+          flattenedObject[prefixedKey] = value;
+        }
+      }
+    };
+
+    // Kick off the recursive loop
+    flattenLoop(configObject);
+    return flattenedObject
+  };
+
+  // Start with an empty object as our base
+  var formattedConfigObject = {};
+
+  // Loop through each of the remaining passed objects and push their keys
+  // one-by-one into configObject. Any duplicate keys will override the existing
+  // key with the new value.
+  for (var i = 0; i < arguments.length; i++) {
+    var obj = flattenObject(arguments[i]);
+    for (var key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        formattedConfigObject[key] = obj[key];
+      }
+    }
+  }
+
+  return formattedConfigObject
+}
+
+/**
+ * @callback nodeListIterator
+ * @param {Element} value - The current node being iterated on
+ * @param {number} index - The current index in the iteration
+ * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+ * @returns {undefined}
+ */
+
+(function(undefined) {
+
+  // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/13cf7c340974d128d557580b5e2dafcd1b1192d1/polyfills/Element/prototype/dataset/detect.js
+  var detect = (function(){
+    if (!document.documentElement.dataset) {
+      return false;
+    }
+    var el = document.createElement('div');
+    el.setAttribute("data-a-b", "c");
+    return el.dataset && el.dataset.aB == "c";
+  }());
+
+  if (detect) return
+
+  // Polyfill derived from  https://raw.githubusercontent.com/Financial-Times/polyfill-library/13cf7c340974d128d557580b5e2dafcd1b1192d1/polyfills/Element/prototype/dataset/polyfill.js
+  Object.defineProperty(Element.prototype, 'dataset', {
+    get: function() {
+      var element = this;
+      var attributes = this.attributes;
+      var map = {};
+  
+      for (var i = 0; i < attributes.length; i++) {
+        var attribute = attributes[i];
+  
+        // This regex has been edited from the original polyfill, to add
+        // support for period (.) separators in data-* attribute names. These
+        // are allowed in the HTML spec, but were not covered by the original
+        // polyfill's regex. We use periods in our i18n implementation.
+        if (attribute && attribute.name && (/^data-\w[.\w-]*$/).test(attribute.name)) {
+          var name = attribute.name;
+          var value = attribute.value;
+  
+          var propName = name.substr(5).replace(/-./g, function (prop) {
+            return prop.charAt(1).toUpperCase();
+          });
+          
+          // If this browser supports __defineGetter__ and __defineSetter__,
+          // continue using defineProperty. If not (like IE 8 and below), we use
+          // a hacky fallback which at least gives an object in the right format
+          if ('__defineGetter__' in Object.prototype && '__defineSetter__' in Object.prototype) {
+            Object.defineProperty(map, propName, {
+              enumerable: true,
+              get: function() {
+                return this.value;
+              }.bind({value: value || ''}),
+              set: function setter(name, value) {
+                if (typeof value !== 'undefined') {
+                  this.setAttribute(name, value);
+                } else {
+                  this.removeAttribute(name);
+                }
+              }.bind(element, name)
+            });
+          } else {
+            map[propName] = value;
+          }
+
+        }
+      }
+  
+      return map;
+    }
+  });
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+    // Detection from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
+    var detect = ('trim' in String.prototype);
+    
+    if (detect) return
+
+    // Polyfill from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
+    String.prototype.trim = function () {
+        return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+    };
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+/**
+ * Normalise string
+ *
+ * 'If it looks like a duck, and it quacks like a duck…' 🦆
+ *
+ * If the passed value looks like a boolean or a number, convert it to a boolean
+ * or number.
+ *
+ * Designed to be used to convert config passed via data attributes (which are
+ * always strings) into something sensible.
+ *
+ * @param {string} value - The value to normalise
+ * @returns {string | boolean | number | undefined} Normalised data
+ */
+function normaliseString (value) {
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  var trimmedValue = value.trim();
+
+  if (trimmedValue === 'true') {
+    return true
+  }
+
+  if (trimmedValue === 'false') {
+    return false
+  }
+
+  // Empty / whitespace-only strings are considered finite so we need to check
+  // the length of the trimmed string as well
+  if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+    return Number(trimmedValue)
+  }
+
+  return value
+}
+
+/**
+ * Normalise dataset
+ *
+ * Loop over an object and normalise each value using normaliseData function
+ *
+ * @param {DOMStringMap} dataset - HTML element dataset
+ * @returns {Object<string, string | boolean | number | undefined>} Normalised dataset
+ */
+function normaliseDataset (dataset) {
+  var out = {};
+
+  for (var key in dataset) {
+    out[key] = normaliseString(dataset[key]);
+  }
+
+  return out
+}
+
+/**
+ * Notification Banner component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for notification banner
+ * @param {NotificationBannerConfig} config - Notification banner config
+ */
+function NotificationBanner ($module, config) {
   this.$module = $module;
+
+  var defaultConfig = {
+    disableAutoFocus: false
+  };
+  this.config = mergeConfigs(
+    defaultConfig,
+    config || {},
+    normaliseDataset($module.dataset)
+  );
 }
 
 /**
@@ -531,7 +770,7 @@ NotificationBanner.prototype.init = function () {
 NotificationBanner.prototype.setFocus = function () {
   var $module = this.$module;
 
-  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+  if (this.config.disableAutoFocus) {
     return
   }
 
@@ -553,6 +792,17 @@ NotificationBanner.prototype.setFocus = function () {
   $module.focus();
 };
 
+/**
+ * Notification banner config
+ *
+ * @typedef {object} NotificationBannerConfig
+ * @property {boolean} [disableAutoFocus = false] -
+ *   If set to `true` the notification banner will not be focussed when the page
+ *   loads. This only applies if the component has a `role` of `alert` – in
+ *   other cases the component will not be focused on page load, regardless of
+ *   this option.
+ */
+
 return NotificationBanner;
 
 })));