govuk_publishing_components 23.7.5 → 23.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 59c2da5bb82e22d5f69cd19ec1815c5730386dc14fea2ba845e5db185b7d6e58
-  data.tar.gz: a501b486477fc328dc912105f0c97f56a6701bb0af5ae40920dbd803f5b989d1
+  metadata.gz: 4cd0fe20798b2b09a2fdb3859bf4f0ed0bf228b09eff59bcfcd3876040e2ccb3
+  data.tar.gz: bf0634d46d9a7d2d238ab1db63c0501dd137a1caa6ee396b22ad64ebccc2ba3c
 SHA512:
-  metadata.gz: f11647e0aab3acc33a200d52198462955ba7fdbd8a2770ef43456175b8bb442ce30f065710b501a4e437c761a2492b67e98ee18cf2fff5bd6f41446a2abb6670
-  data.tar.gz: 52f80f2f5c35ef50852d3a36dd77409fe15982f7a9ddadf6e93eeabcff4618353765b11145d2416758ebd27b76fe330db84263aa97a0106679af48d99ea02c51
+  metadata.gz: 48ee8d3872e95988f9774f6587471cfd52949d235355d7c9da14f3d08d4d05e81304811840a54ce3a5f6f8a4c0753b2c75285e9d5526659c2dc88415c7a1ee1b
+  data.tar.gz: fc1baafeebbb3cf0c3d9a3d79d782aa4b3e70e115d8b08f9c67594fbde3b9d60824eeadaf485a279620e90273117f00d10530e7c42a071d1bca9e4bdd9a92268

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/_contextual_sidebar.html.erb

@@ -4,7 +4,7 @@
 <div class="gem-c-contextual-sidebar">
   <% if navigation.show_brexit_cta? && navigation.step_by_step_count.zero? %>
     <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta' %>
-  <% elsif navigation.step_by_step_count.zero? %>
+  <% elsif navigation.step_by_step_count.zero? && !navigation.transition_countdown_exception? %>
     <%= render 'govuk_publishing_components/components/transition_countdown', {
       title: t("components.related_navigation.transition.title"),
       url: t("components.related_navigation.transition.link_path"),

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/contextual_sidebar.yml

@@ -144,3 +144,23 @@ examples:
                       - text: Find out what you’ll get
                         href: "/settled-status-eu-citizens-families/what-settled-and-presettled-status-means"
                     optional: false
+  transition_countdown_exception:
+    data:
+      content_item:
+        title: "30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"
+        content_id: "c3752802-f091-43a9-ba90-33568fccf391"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Training and study at work
+            base_path: /training-study-work-your-rights
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection

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/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:

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/contextual_navigation.rb

@@ -113,6 +113,10 @@ module GovukPublishingComponents
         tagged_to_brexit? && (page_content_id != brexit_start_page_content_id)
       end
 
+      def transition_countdown_exception?
+        content_item["content_id"] == "c3752802-f091-43a9-ba90-33568fccf391"
+      end
+
       def step_by_step_count
         step_nav_helper.step_navs.count
       end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.7.5".freeze
+  VERSION = "23.9.1".freeze
 end

metadata

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