govuk_publishing_components 23.7.4 → 23.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a170790240f4967c7bd50f70aadd5d681827a5404aa89118fc31ba8e31172c1
-  data.tar.gz: 3c1cc8d6330980e3fb50eec03589fadfd25fdec08dffd71f3f3eaa2243c151af
+  metadata.gz: 2f3f7a062896026a1d879ee8e13d35d6e123e5deb428e085eb54450494e8e354
+  data.tar.gz: 4efbc1f947779c1f589b07aaf93022459d6376963c477cd054f76c0a78bc074b
 SHA512:
-  metadata.gz: a52e2d1c9970312f01e2f29a639639d39ab66e50bfd525c85454c037553f3df6817aad71c7ad8854de9d67d865f775944fe2f3ce02e99aa354c42adc573a3cdf
-  data.tar.gz: 49bbfff1576f9bff66c07908e5564e20efad8ee0e5a635b07cd06494e4962f8203c1f028bf49ba3e4499297cf143f40c8c29ec314208c000559a98dd90c31dd6
+  metadata.gz: b8b9bb9042fd8c8091b66d68f47a2a19baf9bda42f4b7d381113aaa33028f6a3c6e4374b65f53647e61e5280a387fa1f02355ac3c78110092cc28a9faf98d85d
+  data.tar.gz: b148efd5a2ef726a1d9dc26a478fe43c229b9066a8a96a2bd0cf2eb1ffe6b9d3654cfba6f1f02de4ee25ecccb33a2d2473837a686535cd701075f3bdfd4abc16

data/app/assets/javascripts/govuk_publishing_components/analytics/pii.js

@@ -8,6 +8,11 @@
   var POSTCODE_PATTERN = /[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9][ABD-HJLNPQ-Z]{2}/gi
   var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
 
+  // specific URL parameters to be redacted from accounts URLs
+  var RESET_PASSWORD_TOKEN_PATTERN = /reset_password_token=[a-zA-Z0-9-]+/g
+  var UNLOCK_TOKEN_PATTERN = /unlock_token=[a-zA-Z0-9-]+/g
+  var STATE_PATTERN = /state=.[^&]+/g
+
   function shouldStripDates () {
     return ($('meta[name="govuk:static-analytics:strip-dates"]').length > 0)
   }
@@ -35,6 +40,10 @@
 
   pii.prototype.stripPIIFromString = function (string) {
     var stripped = string.replace(EMAIL_PATTERN, '[email]')
+    stripped = stripped.replace(RESET_PASSWORD_TOKEN_PATTERN, 'reset_password_token=[reset_password_token]')
+    stripped = stripped.replace(UNLOCK_TOKEN_PATTERN, 'unlock_token=[unlock_token]')
+    stripped = stripped.replace(STATE_PATTERN, 'state=[state]')
+
     if (this.stripDatePII === true) {
       stripped = stripped.replace(DATE_PATTERN, '[date]')
     }

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

@@ -0,0 +1,63 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ShowPassword () { }
+
+  ShowPassword.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.input = this.$module.querySelector('.gem-c-input')
+    this.$module.togglePassword = this.togglePassword.bind(this)
+    this.$module.revertToPasswordOnFormSubmit = this.revertToPasswordOnFormSubmit.bind(this)
+    this.input.classList.add('gem-c-input--with-password')
+
+    this.showPasswordText = this.$module.getAttribute('data-show')
+    this.hidePasswordText = this.$module.getAttribute('data-hide')
+    this.shownPassword = this.$module.getAttribute('data-announce-show')
+    this.hiddenPassword = this.$module.getAttribute('data-announce-hide')
+
+    // wrap the input in a new div
+    this.wrapper = document.createElement('div')
+    this.wrapper.classList.add('gem-c-show-password__input-wrapper')
+    this.input.parentNode.insertBefore(this.wrapper, this.input)
+    this.wrapper.appendChild(this.input)
+
+    // create and append the button
+    this.showHide = document.createElement('button')
+    this.showHide.className = 'gem-c-show-password__toggle'
+    this.showHide.setAttribute('aria-controls', this.input.getAttribute('id'))
+    this.showHide.innerHTML = this.showPasswordText
+    this.wrapper.insertBefore(this.showHide, this.input.nextSibling)
+
+    // create and append the status text for screen readers
+    this.statusText = document.createElement('span')
+    this.statusText.classList.add('govuk-visually-hidden')
+    this.statusText.innerHTML = this.hiddenPassword
+    this.statusText.setAttribute('aria-live', 'polite')
+    this.wrapper.insertBefore(this.statusText, this.showHide.nextSibling)
+
+    this.showHide.addEventListener('click', this.$module.togglePassword)
+
+    this.parentForm = this.input.form
+    var disableFormSubmitCheck = this.$module.getAttribute('data-disable-form-submit-check')
+
+    if (this.parentForm && !disableFormSubmitCheck) {
+      this.parentForm.addEventListener('submit', this.$module.revertToPasswordOnFormSubmit)
+    }
+  }
+
+  ShowPassword.prototype.togglePassword = function (event) {
+    event.preventDefault()
+    this.showHide.innerHTML = this.showHide.innerHTML === this.showPasswordText ? this.hidePasswordText : this.showPasswordText
+    this.statusText.innerHTML = this.statusText.innerHTML === this.shownPassword ? this.hiddenPassword : this.shownPassword
+    this.input.setAttribute('type', this.input.getAttribute('type') === 'text' ? 'password' : 'text')
+  }
+
+  ShowPassword.prototype.revertToPasswordOnFormSubmit = function (event) {
+    this.showHide.innerHTML = this.showPasswordText
+    this.statusText.innerHTML = this.hiddenPassword
+    this.input.setAttribute('type', 'password')
+  }
+
+  Modules.ShowPassword = ShowPassword
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -60,6 +60,7 @@
 @import "components/search";
 @import "components/select";
 @import "components/share-links";
+@import "components/show-password";
 @import "components/skip-link";
 @import "components/step-by-step-nav-header";
 @import "components/step-by-step-nav-related";

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -40,7 +40,7 @@ $share-button-height: 32px;
   left: 0;
   width: $share-button-width;
   height: $share-button-height;
-  vertical-align: top;
+  line-height: $share-button-height;
 }
 
 .direction-rtl {
@@ -61,7 +61,7 @@ $share-button-height: 32px;
   }
 }
 
-$column-width: 150px;
+$column-width: 9.5em;
 
 .gem-c-share-links--columns {
   .gem-c-share-links__list {

data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss

@@ -0,0 +1,61 @@
+.gem-c-show-password__input-wrapper {
+  display: table; // IE fallback
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+  @include govuk-media-query($from: mobile) {
+    flex-direction: row;
+  }
+
+  .gem-c-input--with-password {
+    display: table-cell;
+
+    &:focus {
+      z-index: 1;
+    }
+  }
+}
+
+.gem-c-show-password__toggle {
+  @include govuk-font(19);
+  z-index: 0;
+  display: table-cell; // IE fallback
+  padding: govuk-spacing(1) govuk-spacing(3);
+  min-width: 5em; // stops the button width jumping when the text changes
+  color: $govuk-link-colour;
+  text-decoration: underline;
+  background: govuk-colour("white");
+  border: solid 2px $govuk-input-border-colour;
+  white-space: nowrap;
+  cursor: pointer;
+
+  @include govuk-media-query($until: mobile) {
+    padding: govuk-spacing(1);
+    width: 100%;
+    margin-top: -2px;
+    white-space: normal;
+  }
+
+  @include govuk-media-query($from: mobile) {
+    margin-left: -2px;
+  }
+
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  &:focus {
+    z-index: 1;
+    background: $govuk-focus-colour;
+    color: $govuk-focus-text-colour;
+    outline: 0;
+  }
+
+  &:active {
+    z-index: 1;
+    background: govuk-colour("white");
+    border-color: $govuk-focus-colour;
+    color: $govuk-link-active-colour;
+  }
+}

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

@@ -0,0 +1,40 @@
+<%
+  disable_form_submit_check ||= false
+  label ||= nil
+  value ||= nil
+  id ||= nil
+  name ||= nil
+  autocomplete = "off" unless ['new-password', 'current-password'].include?(autocomplete)
+  describedby ||= nil
+  hint ||= nil
+  error_message ||= nil
+  error_items ||= nil
+
+  if !label
+    raise ArgumentError, "This component requires a label"
+  end
+%>
+<% if label %>
+  <%= tag.div class: "gem-c-show-password",
+    data: {
+      module: "show-password",
+      disable_form_submit_check: disable_form_submit_check,
+      show: t('components.input.show'),
+      hide: t('components.input.hide'),
+      announce_show: t('components.input.announce_show'),
+      announce_hide: t('components.input.announce_hide')
+    } do %>
+      <%= render "govuk_publishing_components/components/input", {
+        label: label,
+        value: value,
+        id: id,
+        name: name,
+        describedby: describedby,
+        hint: hint,
+        error_message: error_message,
+        error_items: error_items,
+        type: "password",
+        autocomplete: autocomplete,
+      } %>
+  <% end %>
+<% end %>

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

@@ -52,6 +52,10 @@ examples:
     data:
       text: "Secondary quiet button"
       secondary_quiet: true
+  secondary_solid_button:
+    data:
+      text: "Secondary solid button"
+      secondary_solid: true
   destructive_button:
     data:
       text: "Destructive button"

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

@@ -0,0 +1,79 @@
+name: Show password input
+description: A password input field that allows the password to be shown.
+body: |
+  Adds a password reveal button to an input that toggles its type from password to text, revealing the password. Does not appear if JavaScript is disabled.
+
+  Uses a visually hidden bit of text to inform screen reader users of the state of the input rather than announcing the content of the password input when toggled.
+accessibility_criteria: |
+  The component must:
+
+  * indicate to the user that the password has been shown or hidden
+
+  Inputs in the component must:
+
+  * accept focus
+  * be focusable with a keyboard
+  * be usable with a keyboard
+  * be usable with touch
+  * indicate when they have focus
+  * be recognisable as form input elements
+  * have correctly associated labels
+  * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
+
+  Buttons in the component must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - indicate when it has focus
+  - activate when focused and space is pressed
+  - activate when focused and enter is pressed
+govuk_frontend_components:
+  - text-input
+examples:
+  default:
+    data:
+      label:
+        text: Please enter your password
+      value: this is my password
+  disable_form_submit_check:
+    description: The component sets the `autocomplete` attribute on the input to "off" so that browsers don't remember the password. This isn't reliable, so the component reverts the input type back to a password when its parent form is submitted. If this is causing conflicts with other JavaScript on your form, you can set `disable-form-submit-check` to `true` to disable this functionality and implement it yourself.
+    data:
+      label:
+        text: Please enter your password
+      value: this is my password
+      disable_form_submit_check: true
+  set_autocomplete_attribute:
+    description: By default, autocomplete is set to `off`. This can be set to `new-password` or `current-password` to help browsers differentiate between new and current passwords.
+    data:
+      label:
+        text: Please enter your password
+      autocomplete: "current-password"
+      value: this is my password
+  with_attributes:
+    description: The component accepts many but not all of the options that can be passed to a regular input, including `id`, `name` and `describedby` (not shown).
+    data:
+      label:
+        text: Please enter your password
+      value: this is my password
+      id: custom_id
+      name: custom_name
+  with_hint:
+    data:
+      label:
+        text: Please enter your password
+      value: this is my password
+      hint: Your password must be at least twelve thousand characters
+  with_error:
+    data:
+      label:
+        text: Please enter your password
+      value: this is my password
+      error_message: No it isn't
+  with_error_items:
+    data:
+      label:
+        text: Please enter your password
+      value: this is my password
+      error_items:
+      - text: Look I keep telling you
+      - text: This isn't your password

data/app/views/govuk_publishing_components/components/docs/subscription-links.yml

@@ -1,5 +1,5 @@
 name: Subscription links
-description: Links to ‘Get email alerts’ and ‘Subscribe to feed’
+description: Links to ‘Get emails’ and ‘Subscribe to feed’
 body: |
   <strong>NOTE: This component includes a h2 heading by default but can be suppressed by using `hide_heading` option (see below)<strong>
 accessibility_criteria: |

data/config/locales/en.yml

@@ -54,6 +54,11 @@ en:
       what_wrong: "What went wrong?"
       send_me_survey: "Send me the survey"
       send: "Send"
+    input:
+      show: Show
+      hide: Hide
+      announce_show: Your password is shown
+      announce_hide: Your password is hidden
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:
@@ -92,7 +97,7 @@ en:
     step_by_step_nav_related:
       part_of: "Part of"
     subscription_links:
-      email_signup_link_text: "Get email alerts"
+      email_signup_link_text: "Get emails"
       feed_link_text: "Subscribe to feed"
       subscriptions: "Subscriptions"
     summary_list:

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -17,6 +17,7 @@ module GovukPublishingComponents
                   :start,
                   :secondary,
                   :secondary_quiet,
+                  :secondary_solid,
                   :destructive,
                   :name,
                   :value,
@@ -41,6 +42,7 @@ module GovukPublishingComponents
         @start = local_assigns[:start]
         @secondary = local_assigns[:secondary]
         @secondary_quiet = local_assigns[:secondary_quiet]
+        @secondary_solid = local_assigns[:secondary_solid]
         @destructive = local_assigns[:destructive]
         @name = local_assigns[:name]
         @value = local_assigns[:value]
@@ -77,6 +79,7 @@ module GovukPublishingComponents
         css_classes << "govuk-button--start" if start
         css_classes << "gem-c-button--secondary" if secondary
         css_classes << "gem-c-button--secondary-quiet" if secondary_quiet
+        css_classes << "govuk-button--secondary" if secondary_solid
         css_classes << "govuk-button--warning" if destructive
         css_classes << "gem-c-button--bottom-margin" if margin_bottom && !info_text
         css_classes << "gem-c-button--inline" if inline_layout

data/lib/govuk_publishing_components/presenters/subscription_links_helper.rb

@@ -14,13 +14,13 @@ module GovukPublishingComponents
       def email_signup_link_text
         return @local_assigns[:email_signup_link_text] if @local_assigns[:email_signup_link_text]
 
-        I18n.t("govuk_component.subscription_links.email_signup_link_text", default: "Get email alerts")
+        I18n.t("components.subscription_links.email_signup_link_text")
       end
 
       def feed_link_text
         return @local_assigns[:feed_link_text] if @local_assigns[:feed_link_text]
 
-        I18n.t("govuk_component.subscription_links.feed_link_text", default: "Subscribe to feed")
+        I18n.t("components.subscription_links.feed_link_text")
       end
 
       def component_data_is_valid?

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.7.4".freeze
+  VERSION = "23.9.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 23.7.4
+  version: 23.9.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-02 00:00:00.000000000 Z
+date: 2020-12-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -428,6 +428,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/modal-dialogue.js
 - app/assets/javascripts/govuk_publishing_components/components/print-link.js
 - app/assets/javascripts/govuk_publishing_components/components/radio.js
+- app/assets/javascripts/govuk_publishing_components/components/show-password.js
 - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
 - app/assets/javascripts/govuk_publishing_components/components/tabs.js
 - app/assets/javascripts/govuk_publishing_components/dependencies.js
@@ -510,6 +511,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_search.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_select.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
@@ -662,6 +664,7 @@ files:
 - app/views/govuk_publishing_components/components/_search.html.erb
 - app/views/govuk_publishing_components/components/_select.html.erb
 - app/views/govuk_publishing_components/components/_share_links.html.erb
+- app/views/govuk_publishing_components/components/_show_password.html.erb
 - app/views/govuk_publishing_components/components/_skip_link.html.erb
 - app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
 - app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
@@ -741,6 +744,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/search.yml
 - app/views/govuk_publishing_components/components/docs/select.yml
 - app/views/govuk_publishing_components/components/docs/share_links.yml
+- app/views/govuk_publishing_components/components/docs/show_password.yml
 - app/views/govuk_publishing_components/components/docs/skip_link.yml
 - app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
 - app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml