govuk_publishing_components 23.7.6 → 23.9.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1edd09d1efa0a5d378ebd7a13383f7de12dc41f7928e36c3b12194cfb96afe32
-  data.tar.gz: d81001fc9228d15ac67b2b42b7ede030969e0d8b02551e92682aa9737c0a76aa
+  metadata.gz: 5a5c3e567099f08f4b08f708278596cd2501ff02cabe298ab35d006434bd2730
+  data.tar.gz: 8e9ce2a9b09dcec29bbd2c3b6b55a288a4d8e4554a503e40112affc9254fe056
 SHA512:
-  metadata.gz: 896f5562e07f5ccb4d35c35002f03a883941eb92dc3b7e73e594ff6acd50f39416789ee345e25a5ed560469ee308a85a1df7ee084cf23e240ba5c90fa80565cc
-  data.tar.gz: 31e88d2547c8bfb98f70d69e4ec403e9a920a1b6796be51fe9101b1cd77893bca6945339c327ae2726e68c5690caccdbd3497d279b27f84f0f55a89bb9c3a28e
+  metadata.gz: 73fb8d7d1356925b66421fabab0223d8d3b0218cedc6ecb461a957fed3c85b65d271b6e0d92543e00fd59c82fcfe9841693985bb49d5a6122b303d864752f19d
+  data.tar.gz: c9222ffe49f2202771acd31099c680224eebd5b712505580637b0452a69881f95dddd7b6a4aadea33225314301a4a335f33f701a3eb131402a6cb83c64b62a4e

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,64 @@
+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.setAttribute('type', 'button')
+    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/_search.scss

@@ -36,10 +36,10 @@ $large-input-size: 50px;
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include govuk-font($size: 19, $line-height: (28 / 19));
-  padding: 6px;
   margin: 0;
   width: 100%;
-  height: em(34, 16);
+  height: em(40, 16);
+  padding: 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
@@ -47,6 +47,10 @@ $large-input-size: 50px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  @include govuk-media-query($from: tablet) {
+    height: em(40, 19);
+    padding: em(6, 19);
+  }
 
   // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in
   &:focus,

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

@@ -0,0 +1,63 @@
+.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;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &: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/image_card.yml

@@ -70,7 +70,7 @@ examples:
     description: Don't indent the extra links. Used for links to people pages.
     data:
       href: "/government/people/"
-      image_src: "http://placekitten.com/215/140"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       context:
         text: "The Rt Hon"
@@ -85,7 +85,7 @@ examples:
   extra_links_with_no_main_link:
     description: If extra links are included, the main link is not needed. Note that in this configuration the image is not a link as no link has been supplied.
     data:
-      image_src: "http://placekitten.com/215/140"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       heading_text: "John Whiskers MP"
       extra_links: [
@@ -151,7 +151,7 @@ examples:
     data:
       large: true
       href: "/still-not-a-page"
-      image_src: "https://assets.publishing.service.gov.uk/frontend/homepage/uk-leaves-the-eu-d84d2981a9953d8b1261c9d25016223b0a8af3c096fa2d5e03510d73a78e3c60.jpg"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       context:
         date: 2017-06-14 11:30:00
@@ -208,7 +208,7 @@ examples:
   with_lang:
     description: |
       Pass through an appropriate `lang` to set a HTML lang attribute for the component.
-      
+
       The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
     data:
       href: "/not-a-page"

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.6".freeze
+  VERSION = "23.9.2".freeze
 end

metadata

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