govuk_publishing_components 23.7.3 → 23.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75f61bf34f923cb81dd2f54ac1d0b13e57654e901f8e82823adb6752c0bf3039
-  data.tar.gz: 7237262c7552db55b7f73861ec5f81e4c30b7806b9f409e7bbda73ca02ee6cc6
+  metadata.gz: b355f4e112330597b8729fccdf92f6c93cf5fe6a7747085c7cbba64cab1f3ef8
+  data.tar.gz: 955729aea91b01f3b0f1821760171ada7a753a61ccc67d340c1e933a488e82aa
 SHA512:
-  metadata.gz: 0c4ff693cf242a5f6d5bb23d5d95a426bd097ad2e94af4519756b9b91e2af61db15e6ebb9a79de9bb3f569ca77762b052cd07aeeab2e2ca257d5084bc0baaf11
-  data.tar.gz: c0a26d3c76e16881fc348ab176e3cf6c65702b942214435d64e9af22a51cb82cf9e123711e164bd96e1f93f5e4135448f23d033a7560008333638de4661f17a7
+  metadata.gz: 3c73ebd1e6e8891b6bc2cc5f9dfb0a0262fd0c8144c7201722b88bd9bcabafb52cb1af42e00a42295fbf5c370a0813a3ee2a7df3b033415116f65fe0bcfeb489
+  data.tar.gz: a3c007af74d59f71a41a54328d2ee8682dcbf26779b8d366c9f47f96e330d9f21856e242bbef1223cf2d1490fa258ff3e658b84d7ae1c969d9db43a225067374

data/README.md

@@ -22,6 +22,7 @@ Components should be added to this gem if they are required in more than one app
 - [Run the component guide](/docs/run-component-guide.md)
 - [Move a component from an application to the gem](/docs/moving-components-upstream-into-this-gem.md)
 - [Publish/release a new version of the gem](/docs/publishing-to-rubygems.md)
+- [Keep this gem in sync with the Design System](/docs/upgrade-govuk-frontend.md)
 
 ## Architecture / structure
 
@@ -39,13 +40,13 @@ There are 2 types of helper classes in this app:
 GOV.UK Publishing Components also makes [GOV.UK Design System](https://design-system.service.gov.uk/) styles and components available to GOV.UK's frontend applications. This gem consumes [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) via [Yarn](https://classic.yarnpkg.com/).
 
 ## Browser and assistive technology support
+
 GOV.UK Publishing Components shares the same standards in terms of browser and assistive technology support with [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend#browser-and-assistive-technology-support).
 
 ## Documentation
 
 [See the rubydoc.info documentation](http://www.rubydoc.info/gems/govuk_publishing_components)
 
-
 ## Working locally
 
 ### Install dependencies

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/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss

@@ -12,10 +12,10 @@
 
     @for $i from 1 through 30 {
       &:nth-child(#{$i}) {
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Ccircle cx='125' cy='125' r='100' fill='black' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' alignment-baseline='middle' font-family='sans-serif' font-size='100px' fill='white'%3E#{$i}%3C/text%3E%3C/svg%3E");
+        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
         background-repeat: no-repeat;
-        background-position: left 10px;
-        background-size: 35px 35px;
+        background-position: .2em .7em;
+        background-size: 1.4em 1.4em;
       }
     }
   }

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/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/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.3".freeze
+  VERSION = "23.8.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 23.7.3
+  version: 23.8.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-11-27 00:00:00.000000000 Z
+date: 2020-12-07 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