dxw_govuk_frontend_rails 3.3.1 → 3.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 529c34dd67d14019a27162ddeb0eed821d312520591177bf5a78fac565418aa5
-  data.tar.gz: f9f13780320df3439998c5886b6a95a93934031521b5ed7ba795186b48a95c3a
+  metadata.gz: 24366e1d10fcdffc7d4ce6ab81b1af6bc53a01971488e7dc4d1e3dc82b3edf3c
+  data.tar.gz: 9ef221edb271314433d1944067443cb2500536c98cf89e84e672ffd56c5ccc05
 SHA512:
-  metadata.gz: 483a3f1dd7911a419df9379d07fed9cd4672847c239cfb111ab6d930e16ae792d54cc2d0bdfe4cea17d276f47d4cf47bc36000bd525685eb662ded08e436709b
-  data.tar.gz: 5a7e13c09c472066e4f5dfa0c3bbab1258c6f9b05bbbb3ffe7b3a51bc9efdad26bdd95bdcb20a9c950cd43e63293380d38cd158eff17d290ea2f596db7fcfd21
+  metadata.gz: 5fb712c7e9a7b679f9727b49d57eefe2ca24c0e2b01b0216999ef20ff4ca5c476a63be78d803ff4651b330d5361a4bd13d342dc44118a667cd41b86c1fd44dee
+  data.tar.gz: 3c0f0d0f3d3dd1182d366a2a547345a63ea13ba90d44a7fa0e914201954c7547aafeff04119f64dcdb1db39c9002d922161df2758f5fc1f05a5290ce45312cc4

data/CONTRIBUTING.md

@@ -0,0 +1 @@
+The [dxw standard contributing guide](https://github.com/dxw/.github/blob/main/CONTRIBUTING.md) applies for this repository.

data/Gemfile.lock

@@ -1,20 +1,21 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.3.0)
+    dxw_govuk_frontend_rails (3.8.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    rake (10.5.0)
+    rake (13.0.1)
 
 PLATFORMS
   ruby
+  x86_64-darwin-19
 
 DEPENDENCIES
   bundler (~> 2.0)
   dxw_govuk_frontend_rails!
-  rake (~> 10.0)
+  rake (~> 13.0)
 
 BUNDLED WITH
-   2.0.2
+   2.2.1

data/README.md

@@ -1,88 +1,91 @@
 # GOVUK Frontend for Rails
 
-Adds the GOVUK Frontend for Rails using the asset pipeline.
+## Read this first
+
+Although this gem makes it super easy to add the GOVUK Frontend to your
+Rails applications, we would recommend using it as a guide to add the
+GOVUK Frontend yourself.
+
+## About Adds the GOVUK Frontend for Rails using the asset pipeline.
 
 https://github.com/alphagov/govuk-frontend
 
 ## Breaking Changes in v3.0.0
 
-This release of the GOVUK Frontend has breaking changes! Do not update to this version until you have read and understood:
+This release of the GOVUK Frontend has breaking changes! Do not update to this
+version until you have read and understood:
 
-You will not be required to updated any file paths with govuk as we take care of that for you, all others changes will need to be managed:
+You will not be required to updated any file paths with govuk as we take care of
+that for you, all others changes will need to be managed:
 
 https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
 
 ## Limitations
 
-This gem does not include the ie8 version of GOVUK Frontend, as the service standard no longer requires it:
+This gem does not include the ie8 version of GOVUK Frontend, as the service
+standard no longer requires it:
 
 https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices
 
-This gem and its documentation cannot tell you how to use the GOVUK effectively, see the GOVUK Design System documentation for that:
+This gem and its documentation cannot tell you how to use the GOVUK effectively,
+see the GOVUK Design System documentation for that:
 
-https://design-system.service.gov.uk/
-## Installation
+https://design-system.service.gov.uk/ ## Installation
 
 Add this line to your application's Gemfile:
 
-```ruby
-gem 'dxw_govuk_frontend_rails'
-```
+```ruby gem 'dxw_govuk_frontend_rails' ```
 
 And then execute:
 
     $ bundle
 
-## Usage
-Your Rails app will need to have sass enabled.
+## Usage Your Rails app will need to have sass enabled.
 
 ### Basic usage
 
-If the service you are building does not need to modify or extend the GOVUK Frontend all you need to do is import the main sass and javascript files into your Rails app:
+If the service you are building does not need to modify or extend the GOVUK
+Frontend all you need to do is import the main sass and javascript files into
+your Rails app:
 
-- create a sass file in your application:
-```
-app/assets/stylesheets/govuk_frontend_rails.scss
-```
-- import the styles into `govuk_frontend_rails.scss`:
-```sass
-@import "govuk-frontend-rails";
-```
-- require the `govuk-frontend-rails.scss` file in `application.css` or equivalent:
+- create a sass file in your application: ```
+  app/assets/stylesheets/govuk_frontend_rails.scss ```
+- import the styles into `govuk_frontend_rails.scss`: ```sass @import
+  "govuk-frontend-rails"; ```
+- require the `govuk-frontend-rails.scss` file in `application.css` or
+  equivalent:
 
-```
-*= require govuk_frontend_rails
-```
+``` *= require govuk_frontend_rails ```
 
 - require the javascript into `app/assets/javascripts/application.js`:
 
-```
-//= require govuk_frontend_rails
-```
-- initialise the GOVUK Frontend either in a .js file on in your application layout:
+``` //= require govuk_frontend_rails ```
+- initialise the GOVUK Frontend either in a .js file on in your application
+  layout:
 
-```javascript
-window.onload = function() {
-  window.GOVUKFrontend.initAll()
-};
-```
+```javascript window.onload = function() { window.GOVUKFrontend.initAll() }; ```
 - update your application markup to use the GOVUK Frontend class names
 
-IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you are building is not on GOV.UK, read and understand the guidance here:
+IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you
+are building is not on GOV.UK, read and understand the guidance here:
 
 https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
 
-## Tracking version
-We aim to tracking the version of GOVUK Frontend.
+## Tracking version We aim to tracking the version of GOVUK Frontend.
 
 ## Updating to a new Version of GOVUK Frontend
 
 When a new version of the GOVUK Frontend is released:
 
-- set the new version number in `package.json` and `lib/dxw_govuk_frontend_rails/version.rb`
-- run  `npm update` to get the new release
-- run `bundle rake` to compile the new assets
+- make a new branch with the GOVUK Frontend version number
+- set the new version number in `package.json` and
+  `lib/dxw_govuk_frontend_rails/version.rb`
+- run  `npm update` to get the new release of the GOVUK Frontend
+- run `bundle exec rake` to compile the new assets
 - commit the changes
 - tag with the same release number as GOVUK Frontend
-- push the changes
-- Github acitons will build the gem and push to Rubygems
+- push the change
+- push the tag
+- merge your branch
+- make a new release of the tag on GitHub
+- GitHub acitons will build the gem and push to Rubygems

data/dxw_govuk_frontend_rails.gemspec

@@ -23,5 +23,5 @@ Gem::Specification.new do |spec|
   spec.require_paths = ["lib"]
 
   spec.add_development_dependency "bundler", "~> 2.0"
-  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rake", "~> 13.0"
 end

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.3.1"
+  VERSION = "3.8.0"
 end

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.3.0.tgz",
-      "integrity": "sha512-ncOGTAV6mzz1CPBlr/UGETiG3IO6P3b0CvSI0wxBz7Uo0A/6jttLoxkvuYXju2oNA2yqRh2NjD1zJUOP3Q32CQ=="
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.8.0.tgz",
+      "integrity": "sha512-+vgXzFsh7wpLRGjFSDvDcA2zNA2wOxT6gGs/KUpkTjF1Uop9BerW/1W/YB1BMpeTEJoPlmrkA19+DS1fqJtL9Q=="
     }
   }
 }

data/package.json

@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/mec/dxw_govuk_frontend_rails#readme",
   "dependencies": {
-    "govuk-frontend": "3.3.0"
+    "govuk-frontend": "3.8.0"
   }
 }

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -891,7 +891,7 @@ Accordion.prototype.initHeaderAttributes = function ($headerWrapper, index) {
   icon.className = this.iconClass;
   icon.setAttribute('aria-hidden', 'true');
 
-  $heading.appendChild(icon);
+  $button.appendChild(icon);
 };
 
 // When section toggled, set and store state
@@ -1497,6 +1497,9 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
 function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
+  if (this.$textarea) {
+    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+  }
 }
 
 CharacterCount.prototype.defaults = {
@@ -1509,10 +1512,16 @@ CharacterCount.prototype.init = function () {
   // Check for module
   var $module = this.$module;
   var $textarea = this.$textarea;
-  if (!$textarea) {
+  var $countMessage = this.$countMessage;
+
+  if (!$textarea || !$countMessage) {
     return
   }
 
+  // We move count message right after the field
+  // Kept for backwards compatibility
+  $textarea.insertAdjacentElement('afterend', $countMessage);
+
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module);
 
@@ -1530,23 +1539,25 @@ CharacterCount.prototype.init = function () {
     return
   }
 
-  // Generate and reference message
-  var boundCreateCountMessage = this.createCountMessage.bind(this);
-  this.countMessage = boundCreateCountMessage();
+  // Remove hard limit if set
+  $module.removeAttribute('maxlength');
 
-  // If there's a maximum length defined and the count message exists
-  if (this.countMessage) {
-    // Remove hard limit if set
-    $module.removeAttribute('maxlength');
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of the character count is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.sync.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.sync.bind(this));
+  }
 
-    // Bind event changes to the textarea
-    var boundChangeEvents = this.bindChangeEvents.bind(this);
-    boundChangeEvents();
+  this.sync();
+};
 
-    // Update count message
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-    boundUpdateCountMessage();
-  }
+CharacterCount.prototype.sync = function () {
+  this.bindChangeEvents();
+  this.updateCountMessage();
 };
 
 // Read data attributes
@@ -1577,27 +1588,6 @@ CharacterCount.prototype.count = function (text) {
   return length
 };
 
-// Generate count message and bind it to the input
-// returns reference to the generated element
-CharacterCount.prototype.createCountMessage = function () {
-  var countElement = this.$textarea;
-  var elementId = countElement.id;
-  // Check for existing info count message
-  var countMessage = document.getElementById(elementId + '-info');
-  // If there is no existing info count message we add one right after the field
-  if (elementId && !countMessage) {
-    countElement.insertAdjacentHTML('afterend', '<span id="' + elementId + '-info" class="govuk-hint govuk-character-count__message" aria-live="polite"></span>');
-    this.describedBy = countElement.getAttribute('aria-describedby');
-    this.describedByInfo = this.describedBy + ' ' + elementId + '-info';
-    countElement.setAttribute('aria-describedby', this.describedByInfo);
-    countMessage = document.getElementById(elementId + '-info');
-  } else {
-  // If there is an existing info count message we move it right after the field
-    countElement.insertAdjacentElement('afterend', countMessage);
-  }
-  return countMessage
-};
-
 // Bind input propertychange to the elements and update based on the change
 CharacterCount.prototype.bindChangeEvents = function () {
   var $textarea = this.$textarea;
@@ -1615,8 +1605,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
   if (!this.$textarea.oldValue) this.$textarea.oldValue = '';
   if (this.$textarea.value !== this.$textarea.oldValue) {
     this.$textarea.oldValue = this.$textarea.value;
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-    boundUpdateCountMessage();
+    this.updateCountMessage();
   }
 };
 
@@ -1624,7 +1613,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
 CharacterCount.prototype.updateCountMessage = function () {
   var countElement = this.$textarea;
   var options = this.options;
-  var countMessage = this.countMessage;
+  var countMessage = this.$countMessage;
 
   // Determine the remaining number of characters/words
   var currentLength = this.count(countElement.value);
@@ -1685,44 +1674,91 @@ function Checkboxes ($module) {
   this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
 }
 
+/**
+ * Initialise Checkboxes
+ *
+ * Checkboxes can be associated with a 'conditionally revealed' content block –
+ * for example, a checkbox for 'Phone' could reveal an additional form field for
+ * the user to enter their phone number.
+ *
+ * These associations are made using a `data-aria-controls` attribute, which is
+ * promoted to an aria-controls attribute during initialisation.
+ *
+ * We also need to restore the state of any conditional reveals on the page (for
+ * example if the user has navigated back), and set up event handlers to keep
+ * the reveal in sync with the checkbox state.
+ */
 Checkboxes.prototype.init = function () {
   var $module = this.$module;
   var $inputs = this.$inputs;
 
-  /**
-  * Loop over all items with [data-controls]
-  * Check if they have a matching conditional reveal
-  * If they do, assign attributes.
-  **/
   nodeListForEach($inputs, function ($input) {
-    var controls = $input.getAttribute('data-aria-controls');
+    var target = $input.getAttribute('data-aria-controls');
 
-    // Check if input controls anything
-    // Check if content exists, before setting attributes.
-    if (!controls || !$module.querySelector('#' + controls)) {
+    // Skip checkboxes without data-aria-controls attributes, or where the
+    // target element does not exist.
+    if (!target || !$module.querySelector('#' + target)) {
       return
     }
 
-    // If we have content that is controlled, set attributes.
-    $input.setAttribute('aria-controls', controls);
+    // Promote the data-aria-controls attribute to a aria-controls attribute
+    // so that the relationship is exposed in the AOM
+    $input.setAttribute('aria-controls', target);
     $input.removeAttribute('data-aria-controls');
-    this.setAttributes($input);
-  }.bind(this));
+  });
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
+  }
+
+  // Although we've set up handlers to sync state on the pageshow or
+  // DOMContentLoaded event, init could be called after those events have fired,
+  // for example if they are added to the page dynamically, so sync now too.
+  this.syncAllConditionalReveals();
 
-  // Handle events
   $module.addEventListener('click', this.handleClick.bind(this));
 };
 
-Checkboxes.prototype.setAttributes = function ($input) {
-  var inputIsChecked = $input.checked;
-  $input.setAttribute('aria-expanded', inputIsChecked);
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Checkboxes.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
+};
+
+/**
+ * Sync conditional reveal with the input state
+ *
+ * Synchronise the visibility of the conditional reveal, and its accessible
+ * state, with the input's checked state.
+ *
+ * @param {HTMLInputElement} $input Checkbox input
+ */
+Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
+
+  if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
+    var inputIsChecked = $input.checked;
 
-  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
-  if ($content) {
-    $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+    $input.setAttribute('aria-expanded', inputIsChecked);
+    $target.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
   }
 };
 
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a checkbox, sync
+ * the state of any associated conditional reveal with the checkbox state.
+ *
+ * @param {MouseEvent} event Click event
+ */
 Checkboxes.prototype.handleClick = function (event) {
   var $target = event.target;
 
@@ -1730,7 +1766,7 @@ Checkboxes.prototype.handleClick = function (event) {
   var isCheckbox = $target.getAttribute('type') === 'checkbox';
   var hasAriaControls = $target.getAttribute('aria-controls');
   if (isCheckbox && hasAriaControls) {
-    this.setAttributes($target);
+    this.syncConditionalRevealWithInputState($target);
   }
 };
 
@@ -1767,7 +1803,7 @@ Checkboxes.prototype.handleClick = function (event) {
 
   if (detect) return
 
-    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+  // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
   Element.prototype.closest = function closest(selector) {
     var node = this;
 
@@ -1978,116 +2014,156 @@ Header.prototype.handleClick = function (event) {
 
 function Radios ($module) {
   this.$module = $module;
+  this.$inputs = $module.querySelectorAll('input[type="radio"]');
 }
 
+/**
+ * Initialise Radios
+ *
+ * Radios can be associated with a 'conditionally revealed' content block – for
+ * example, a radio for 'Phone' could reveal an additional form field for the
+ * user to enter their phone number.
+ *
+ * These associations are made using a `data-aria-controls` attribute, which is
+ * promoted to an aria-controls attribute during initialisation.
+ *
+ * We also need to restore the state of any conditional reveals on the page (for
+ * example if the user has navigated back), and set up event handlers to keep
+ * the reveal in sync with the radio state.
+ */
 Radios.prototype.init = function () {
   var $module = this.$module;
-  var $inputs = $module.querySelectorAll('input[type="radio"]');
+  var $inputs = this.$inputs;
 
-  /**
-  * Loop over all items with [data-controls]
-  * Check if they have a matching conditional reveal
-  * If they do, assign attributes.
-  **/
   nodeListForEach($inputs, function ($input) {
-    var controls = $input.getAttribute('data-aria-controls');
+    var target = $input.getAttribute('data-aria-controls');
 
-    // Check if input controls anything
-    // Check if content exists, before setting attributes.
-    if (!controls || !$module.querySelector('#' + controls)) {
+    // Skip radios without data-aria-controls attributes, or where the
+    // target element does not exist.
+    if (!target || !$module.querySelector('#' + target)) {
       return
     }
 
-    // If we have content that is controlled, set attributes.
-    $input.setAttribute('aria-controls', controls);
+    // Promote the data-aria-controls attribute to a aria-controls attribute
+    // so that the relationship is exposed in the AOM
+    $input.setAttribute('aria-controls', target);
     $input.removeAttribute('data-aria-controls');
-    this.setAttributes($input);
-  }.bind(this));
+  });
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
+  }
+
+  // Although we've set up handlers to sync state on the pageshow or
+  // DOMContentLoaded event, init could be called after those events have fired,
+  // for example if they are added to the page dynamically, so sync now too.
+  this.syncAllConditionalReveals();
 
   // Handle events
   $module.addEventListener('click', this.handleClick.bind(this));
 };
 
-Radios.prototype.setAttributes = function ($input) {
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Radios.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
+};
+
+/**
+ * Sync conditional reveal with the input state
+ *
+ * Synchronise the visibility of the conditional reveal, and its accessible
+ * state, with the input's checked state.
+ *
+ * @param {HTMLInputElement} $input Radio input
+ */
+Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = document.querySelector('#' + $input.getAttribute('aria-controls'));
 
-  if ($content && $content.classList.contains('govuk-radios__conditional')) {
+  if ($target && $target.classList.contains('govuk-radios__conditional')) {
     var inputIsChecked = $input.checked;
 
     $input.setAttribute('aria-expanded', inputIsChecked);
-
-    $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+    $target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
   }
 };
 
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a radio, sync
+ * the state of the conditional reveal for all radio buttons in the same form
+ * with the same name (because checking one radio could have un-checked a radio
+ * in another $module)
+ *
+ * @param {MouseEvent} event Click event
+ */
 Radios.prototype.handleClick = function (event) {
   var $clickedInput = event.target;
-  // We only want to handle clicks for radio inputs
+
+  // Ignore clicks on things that aren't radio buttons
   if ($clickedInput.type !== 'radio') {
     return
   }
-  // Because checking one radio can uncheck a radio in another $module,
-  // we need to call set attributes on all radios in the same form, or document if they're not in a form.
-  //
-  // We also only want radios which have aria-controls, as they support conditional reveals.
+
+  // We only need to consider radios with conditional reveals, which will have
+  // aria-controls attributes.
   var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
+
   nodeListForEach($allInputs, function ($input) {
-    // Only inputs with the same form owner should change.
     var hasSameFormOwner = ($input.form === $clickedInput.form);
-
-    // In radios, only radios with the same name will affect each other.
     var hasSameName = ($input.name === $clickedInput.name);
+
     if (hasSameName && hasSameFormOwner) {
-      this.setAttributes($input);
+      this.syncConditionalRevealWithInputState($input);
     }
   }.bind(this));
 };
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/detect.js
     var detect = (
-      'Element' in this && "nextElementSibling" in document.documentElement
+      'document' in this && "nextElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-
-    (function (global) {
-
-      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd
-      Object.defineProperty(Element.prototype, "nextElementSibling", {
-        get: function(){
-          var el = this.nextSibling;
-          while (el && el.nodeType !== 1) { el = el.nextSibling; }
-          return (el.nodeType === 1) ? el : null;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+      get: function(){
+        var el = this.nextSibling;
+        while (el && el.nodeType !== 1) { el = el.nextSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/detect.js
     var detect = (
-      'Element' in this && 'previousElementSibling' in document.documentElement
+      'document' in this && "previousElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-    (function (global) {
-      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739
-      Object.defineProperty(Element.prototype, 'previousElementSibling', {
-        get: function(){
-          var el = this.previousSibling;
-          while (el && el.nodeType !== 1) { el = el.previousSibling; }
-          return (el.nodeType === 1) ? el : null;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, 'previousElementSibling', {
+      get: function(){
+        var el = this.previousSibling;
+        while (el && el.nodeType !== 1) { el = el.previousSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});