govuk_publishing_components 24.9.4 → 24.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2bd078802da71df0c44ec962126f7ee3df520df0dd8a656d48ee356b993dcb02
-  data.tar.gz: 7a418d59b3d7ee4663cf711c01dfffe9af817f38c67d5c5e4a3d4c037a652eb9
+  metadata.gz: da7ab3cbd89ef8a20000b0a9d6ffad43c92532e787106e6821cccd7c8d9f90b2
+  data.tar.gz: 1362df93036bb10322e881d5136a0303be0d96a745541afc122ad79949d36820
 SHA512:
-  metadata.gz: bed7da741ac9e3b4542179b46e5a63a1ca18b82c2a17bd24b29943c112f7f6a8bb6d0d1c93ee9adb2461c8e62cf182ff1527178d0b9a064eb1b061c6b0bb01be
-  data.tar.gz: 41ed5cf47472133919e3f995e989b9b137ee76465b2ec7e5626fd627f74b4113febb664ea76065faac782dcfd202721d0f7468be0ced18303d532d25e2636036
+  metadata.gz: a50d991265471b7c0025b59f50c2a51f4599c6fc5e629ad8c0f64158af0570812224938e08ad36193587b46c03a8bf37200def0167d47537868d1a9b31839305
+  data.tar.gz: a3104340ed6d431791b48ebf1fc9c8b2d89563c608cbe050082efdafc68a949d13bf5f198be9c39b7ad7b1e1d2b18de1556a9f21c9a9c89e65c1b52db02942ba

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -326,8 +326,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   // Adding an event listener to all anchor link a tags in an accordion is risky but we circumvent this risk partially by only being a layer of accordion behaviour instead of any sort of change to link behaviour
   GemAccordion.prototype.addEventListenersForAnchors = function () {
     var links = this.$module.querySelectorAll('.' + this.sectionInnerContent + ' a[href*="#"]')
-
-    links.forEach(function (link) {
+    nodeListForEach(links, function (link) {
       if (link.pathname === window.location.pathname) {
         link.addEventListener('click', this.openForAnchor.bind(this, link.hash.split('#')[1]))
       }

data/app/assets/javascripts/govuk_publishing_components/components/show-password.js

@@ -41,6 +41,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.wrapper.insertBefore(this.statusText, this.showHide.nextSibling)
 
     this.showHide.addEventListener('click', this.$module.togglePassword)
+    this.moveDataAttributesToButton()
 
     this.parentForm = this.input.form
     var disableFormSubmitCheck = this.$module.getAttribute('data-disable-form-submit-check')
@@ -65,5 +66,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.input.setAttribute('type', 'password')
   }
 
+  ShowPassword.prototype.moveDataAttributesToButton = function () {
+    var attrs = this.input.attributes
+    for (var i = attrs.length; i >= 0; i--) {
+      var attr = attrs[i]
+      if (attr && /^data-button/.test(attr.name)) {
+        this.showHide.setAttribute(attr.name.replace('-button', ''), attr.value)
+        this.input.removeAttribute(attr.name)
+      }
+    }
+  }
+
   Modules.ShowPassword = ShowPassword
 })(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss

@@ -68,17 +68,17 @@ $gem-c-accordion-bottom-border-width: 1px;
     display: inline-block;
     box-sizing: border-box;
     position: relative;
-    width: em(20, 14);
-    height: em(20, 14);
-    margin-left: em(5, 14);
-    border: em(1, 14) solid;
-    border-radius: em(100, 14);
+    width: govuk-em(20, 14);
+    height: govuk-em(20, 14);
+    margin-left: govuk-em(5, 14);
+    border: govuk-em(1, 14) solid;
+    border-radius: govuk-em(100, 14);
     // Main icon size across views, yet keep responsive for zoom
     @include govuk-media-query($from: tablet) {
-      width: em(20, 16);
-      height: em(20, 16);
-      margin-left: em(5, 16);
-      border: em(1, 16) solid;
+      width: govuk-em(20, 16);
+      height: govuk-em(20, 16);
+      margin-left: govuk-em(5, 16);
+      border: govuk-em(1, 16) solid;
     }
 
     &:after {
@@ -87,20 +87,20 @@ $gem-c-accordion-bottom-border-width: 1px;
       box-sizing: border-box;
       position: absolute;
       overflow: visible;
-      width: em(6, 14);
-      height: em(6, 14);
-      border-top: em(2, 14) solid;
-      border-right: em(2, 14) solid;
+      width: govuk-em(6, 14);
+      height: govuk-em(6, 14);
+      border-top: govuk-em(2, 14) solid;
+      border-right: govuk-em(2, 14) solid;
       transform: rotate(-45deg);
-      left: em(6, 14);
-      bottom: em(5, 14);
+      left: govuk-em(6, 14);
+      bottom: govuk-em(5, 14);
       @include govuk-media-query($from: tablet) {
-        width: em(6, 16);
-        height: em(6, 16);
-        border-top: em(2, 16) solid;
-        border-right: em(2, 16) solid;
-        left: em(6, 16);
-        bottom: em(5, 16);
+        width: govuk-em(6, 16);
+        height: govuk-em(6, 16);
+        border-top: govuk-em(2, 16) solid;
+        border-right: govuk-em(2, 16) solid;
+        left: govuk-em(6, 16);
+        bottom: govuk-em(5, 16);
       }
     }
   }
@@ -227,12 +227,12 @@ $gem-c-accordion-bottom-border-width: 1px;
 
   // Setting width of the text, so the icon doesn't shift (left / right) when toggled
   .gem-c-accordion__toggle-text {
-    min-width: em(40, 16);
+    min-width: govuk-em(40, 16);
     display: inline-block;
   }
 
   .gem-c-accordion__open-all-text {
-    min-width: em(120, 16);
+    min-width: govuk-em(120, 16);
     display: inline-block;
     text-align: left;
   }
@@ -277,20 +277,20 @@ $gem-c-accordion-bottom-border-width: 1px;
 
     // Reduce Chevron size
     .gem-c-accordion-nav__chevron {
-      width: em(20, 14);
-      height: em(20, 14);
-      margin-left: em(5, 14);
-      border: em(1, 14) solid;
-      border-radius: em(100, 14);
+      width: govuk-em(20, 14);
+      height: govuk-em(20, 14);
+      margin-left: govuk-em(5, 14);
+      border: govuk-em(1, 14) solid;
+      border-radius: govuk-em(100, 14);
       transform: scale(.875);
 
       &:after {
-        width: em(6, 14);
-        height: em(6, 14);
-        border-top: em(2, 14) solid;
-        border-right: em(2, 14) solid;
-        left: em(6, 14);
-        bottom: em(5, 14);
+        width: govuk-em(6, 14);
+        height: govuk-em(6, 14);
+        border-top: govuk-em(2, 14) solid;
+        border-right: govuk-em(2, 14) solid;
+        left: govuk-em(6, 14);
+        bottom: govuk-em(5, 14);
       }
     }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_notice.scss

@@ -6,7 +6,7 @@
   clear: both;
   border: $govuk-border-width solid govuk-colour("blue");
 
-  .govuk-govspeak, {
+  .govuk-govspeak {
     p:last-child {
       margin-bottom: 0;
     }
@@ -27,7 +27,9 @@
   }
 
   a {
-    @extend %govuk-link;
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+    @include govuk-link-print-friendly;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -53,8 +53,8 @@ $large-input-size: 50px;
   @include govuk-font($size: 19, $line-height: (28 / 19));
   margin: 0;
   width: 100%;
-  height: em(40, 16);
-  padding: em(6, 16);
+  height: govuk-em(40, 16);
+  padding: govuk-em(6, 16);
   border: $govuk-border-width-form-element solid $govuk-input-border-colour;
   background: govuk-colour("white");
   border-radius: 0; //otherwise iphones apply an automatic border radius
@@ -63,8 +63,8 @@ $large-input-size: 50px;
   -moz-appearance: none;
   appearance: none;
   @include govuk-media-query($from: tablet) {
-    height: em(40, 19);
-    padding: em(6, 19);
+    height: govuk-em(40, 19);
+    padding: govuk-em(6, 19);
   }
 
   // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -15,12 +15,12 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 @mixin step-nav-line-position {
   left: 0;
-  margin-left: em(($number-circle-size / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(($number-circle-size / 2) - ($stroke-width / 2), 16);
 }
 
 @mixin step-nav-line-position-large {
   left: 0;
-  margin-left: em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
 }
 
 // custom mixin as govuk-font does undesirable things at different breakpoints
@@ -136,10 +136,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__chevron {
   display: inline-block;
   vertical-align: middle;
-  margin-left: em(5, 14);
+  margin-left: govuk-em(5, 14);
 
   .gem-c-step-nav--large & {
-    margin-left: em(5, 16);
+    margin-left: govuk-em(5, 16);
   }
 
   svg {
@@ -150,18 +150,18 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__button-text {
   display: inline-block;
   text-align: left;
-  min-width: em(35, 14);
+  min-width: govuk-em(35, 14);
 
   .gem-c-step-nav--large & {
-    min-width: em(40, 16);
+    min-width: govuk-em(40, 16);
   }
 }
 
 .gem-c-step-nav__button-text--all {
-  min-width: em(87, 14);
+  min-width: govuk-em(87, 14);
 
   .gem-c-step-nav--large & {
-    min-width: em(100, 16);
+    min-width: govuk-em(100, 16);
   }
 }
 
@@ -172,23 +172,23 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__step {
   position: relative;
-  padding-left: em(govuk-spacing(6) + govuk-spacing(3), 16);
+  padding-left: govuk-em(govuk-spacing(6) + govuk-spacing(3), 16);
   list-style: none;
 
   // line down the side of a step
   &:after {
     @include step-nav-vertical-line;
     @include step-nav-line-position;
-    top: em(govuk-spacing(3), 16);
+    top: govuk-em(govuk-spacing(3), 16);
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      padding-left: em(govuk-spacing(9), 16);
+      padding-left: govuk-em(govuk-spacing(9), 16);
 
       &:after { // stylelint-disable-line max-nesting-depth
         @include step-nav-line-position-large;
-        top: em(govuk-spacing(6), 16);
+        top: govuk-em(govuk-spacing(6), 16);
       }
     }
   }
@@ -246,8 +246,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   z-index: 5;
   top: 3px;
   left: 0;
-  width: em($number-circle-size, 16);
-  height: em($number-circle-size, 16);
+  width: govuk-em($number-circle-size, 16);
+  height: govuk-em($number-circle-size, 16);
   color: govuk-colour("black");
   background: govuk-colour("white");
   border-radius: 100px;
@@ -256,8 +256,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
       top: 11px;
-      width: em($number-circle-size-large, 19);
-      height: em($number-circle-size-large, 19);
+      width: govuk-em($number-circle-size-large, 19);
+      height: govuk-em($number-circle-size-large, 19);
     }
   }
 }
@@ -283,15 +283,15 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__circle--logic {
   @include step-nav-font(19, $weight: bold, $line-height: 28px);
   left: 3px;
-  width: em($number-circle-size, 19);
-  height: em($number-circle-size, 19);
+  width: govuk-em($number-circle-size, 19);
+  height: govuk-em($number-circle-size, 19);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
 
     @include govuk-media-query($from: tablet) {
-      width: em($number-circle-size-large, 24);
-      height: em($number-circle-size-large, 24);
+      width: govuk-em($number-circle-size-large, 24);
+      height: govuk-em($number-circle-size-large, 24);
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_px-to-em.scss

@@ -1,5 +1,7 @@
 // Convert pixels to em
 @function em($value, $gem-context-font-size) {
+  @warn "This function is deprecated and will be removed in the next major version release - use GOV.UK Frontend's `govuk-em()` instead.";
+
   @if (unitless($value)) {
     $value: $value * 1px;
   }

data/app/views/govuk_publishing_components/components/_notice.html.erb

@@ -10,7 +10,7 @@
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  css_classes = %w(gem-c-notice)
+  css_classes = %w[gem-c-notice]
   css_classes << (shared_helper.get_margin_bottom)
 
   aria_attributes = aria_live ? {label: 'Notice', live: 'polite'} : {label: 'Notice'}

data/app/views/govuk_publishing_components/components/_show_password.html.erb

@@ -9,6 +9,7 @@
   hint ||= nil
   error_message ||= nil
   error_items ||= nil
+  data ||= nil
 
   if !label
     raise ArgumentError, "This component requires a label"
@@ -37,6 +38,7 @@
         error_items: error_items,
         type: "password",
         autocomplete: autocomplete,
+        data: data,
       } %>
   <% end %>
 <% end %>

data/app/views/govuk_publishing_components/components/docs/show_password.yml

@@ -79,3 +79,13 @@ examples:
       error_items:
       - text: Look I keep telling you
       - text: This isn't your password
+  with_data_attributes:
+    description: Data attributes can be passed to add to the input element. If the data attribute starts with `data-button-` this attribute will be applied to the show/hide button, instead of the input. Note that if JS is disabled, all attributes are added to the input.
+    data:
+      label:
+        text: Your password
+      data:
+        example_1: value
+        example_2: thing
+        button_example_1: wotsit
+        button_example_2: doodad

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.9.4".freeze
+  VERSION = "24.10.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.9.4
+  version: 24.10.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-22 00:00:00.000000000 Z
+date: 2021-04-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -416,7 +416,6 @@ files:
 - app/assets/javascripts/component_guide/filter-components.js
 - app/assets/javascripts/component_guide/vendor/bind-polyfill.js
 - app/assets/javascripts/component_guide/vendor/matches-polyfill.min.js
-- app/assets/javascripts/component_guide/visual-regression.js
 - app/assets/javascripts/govuk_publishing_components/all_components.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
 - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js

data/app/assets/javascripts/component_guide/visual-regression.js

@@ -1,71 +0,0 @@
-(function (window, document) {
-  window.GOVUK = window.GOVUK || {}
-
-  window.GOVUK.VisualDiffTool = function (currentWindowLocation) {
-    var visualDiffSelector = 'visual-diff'
-    var existingIframe = document.getElementById(visualDiffSelector)
-    var windowLocation = currentWindowLocation || window.location
-
-    if (existingIframe) {
-      existingIframe.parentNode.removeChild(existingIframe)
-      document.body.style.filter = null
-    } else {
-      var iframe = document.createElement('iframe')
-      iframe.id = visualDiffSelector
-      iframe.setAttribute('scrolling', 'no')
-      _setElementStyles(iframe, {
-        width: '100%',
-        height: document.body.scrollHeight + 'px',
-        position: 'absolute',
-        top: '0',
-        'pointer-events': 'none',
-        border: '0'
-      })
-      iframe.style.setProperty('z-index', '999', 'important')
-
-      // For browsers that support it, do mix-blend-mode diff
-      if ('mix-blend-mode' in document.body.style) {
-        _setElementStyles(iframe, { 'mix-blend-mode': 'difference' })
-        document.body.style.filter = 'invert(100%)'
-      } else {
-        // Else do a simple overlay of the live page for comparison (IE and Edge)
-        _setElementStyles(iframe, { opacity: '0.7' })
-      }
-
-      iframe.src = _processComparisonURL(windowLocation)
-
-      if (iframe.src) {
-        document.body.appendChild(iframe)
-        console.log('comparing to ' + iframe.src)
-      }
-    }
-  }
-
-  var _processComparisonURL = function (url) {
-    var appName
-    var href = url.href
-    var host = url.host
-
-    if (href.includes('dev.gov.uk/component-guide')) {
-      appName = host.split('.')[0]
-      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'))
-    } else if (href.includes('dev.gov.uk')) {
-      return _forceHTTPS(href.replace(host, 'www.gov.uk'))
-    } else if (href.includes('-pr-')) {
-      appName = host.split('-pr')[0]
-      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'))
-    } else {
-      throw new Error('Visual Diff Tool: You need to run this tool against a page running on your local dev environment')
-    }
-  }
-
-  var _forceHTTPS = function (href) {
-    return href.replace('http://', 'https://')
-  }
-
-  var _setElementStyles = function (element, styles) {
-    for (var style in styles) {
-      element.style[style] = styles[style]
-    }
-  }
-})(window, document)