govuk_publishing_components 23.7.4 → 23.9.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4a170790240f4967c7bd50f70aadd5d681827a5404aa89118fc31ba8e31172c1
4
- data.tar.gz: 3c1cc8d6330980e3fb50eec03589fadfd25fdec08dffd71f3f3eaa2243c151af
3
+ metadata.gz: 2f3f7a062896026a1d879ee8e13d35d6e123e5deb428e085eb54450494e8e354
4
+ data.tar.gz: 4efbc1f947779c1f589b07aaf93022459d6376963c477cd054f76c0a78bc074b
5
5
  SHA512:
6
- metadata.gz: a52e2d1c9970312f01e2f29a639639d39ab66e50bfd525c85454c037553f3df6817aad71c7ad8854de9d67d865f775944fe2f3ce02e99aa354c42adc573a3cdf
7
- data.tar.gz: 49bbfff1576f9bff66c07908e5564e20efad8ee0e5a635b07cd06494e4962f8203c1f028bf49ba3e4499297cf143f40c8c29ec314208c000559a98dd90c31dd6
6
+ metadata.gz: b8b9bb9042fd8c8091b66d68f47a2a19baf9bda42f4b7d381113aaa33028f6a3c6e4374b65f53647e61e5280a387fa1f02355ac3c78110092cc28a9faf98d85d
7
+ data.tar.gz: b148efd5a2ef726a1d9dc26a478fe43c229b9066a8a96a2bd0cf2eb1ffe6b9d3654cfba6f1f02de4ee25ecccb33a2d2473837a686535cd701075f3bdfd4abc16
@@ -8,6 +8,11 @@
8
8
  var POSTCODE_PATTERN = /[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9][ABD-HJLNPQ-Z]{2}/gi
9
9
  var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
10
10
 
11
+ // specific URL parameters to be redacted from accounts URLs
12
+ var RESET_PASSWORD_TOKEN_PATTERN = /reset_password_token=[a-zA-Z0-9-]+/g
13
+ var UNLOCK_TOKEN_PATTERN = /unlock_token=[a-zA-Z0-9-]+/g
14
+ var STATE_PATTERN = /state=.[^&]+/g
15
+
11
16
  function shouldStripDates () {
12
17
  return ($('meta[name="govuk:static-analytics:strip-dates"]').length > 0)
13
18
  }
@@ -35,6 +40,10 @@
35
40
 
36
41
  pii.prototype.stripPIIFromString = function (string) {
37
42
  var stripped = string.replace(EMAIL_PATTERN, '[email]')
43
+ stripped = stripped.replace(RESET_PASSWORD_TOKEN_PATTERN, 'reset_password_token=[reset_password_token]')
44
+ stripped = stripped.replace(UNLOCK_TOKEN_PATTERN, 'unlock_token=[unlock_token]')
45
+ stripped = stripped.replace(STATE_PATTERN, 'state=[state]')
46
+
38
47
  if (this.stripDatePII === true) {
39
48
  stripped = stripped.replace(DATE_PATTERN, '[date]')
40
49
  }
@@ -0,0 +1,63 @@
1
+ window.GOVUK = window.GOVUK || {}
2
+ window.GOVUK.Modules = window.GOVUK.Modules || {};
3
+
4
+ (function (Modules) {
5
+ function ShowPassword () { }
6
+
7
+ ShowPassword.prototype.start = function ($module) {
8
+ this.$module = $module[0]
9
+ this.input = this.$module.querySelector('.gem-c-input')
10
+ this.$module.togglePassword = this.togglePassword.bind(this)
11
+ this.$module.revertToPasswordOnFormSubmit = this.revertToPasswordOnFormSubmit.bind(this)
12
+ this.input.classList.add('gem-c-input--with-password')
13
+
14
+ this.showPasswordText = this.$module.getAttribute('data-show')
15
+ this.hidePasswordText = this.$module.getAttribute('data-hide')
16
+ this.shownPassword = this.$module.getAttribute('data-announce-show')
17
+ this.hiddenPassword = this.$module.getAttribute('data-announce-hide')
18
+
19
+ // wrap the input in a new div
20
+ this.wrapper = document.createElement('div')
21
+ this.wrapper.classList.add('gem-c-show-password__input-wrapper')
22
+ this.input.parentNode.insertBefore(this.wrapper, this.input)
23
+ this.wrapper.appendChild(this.input)
24
+
25
+ // create and append the button
26
+ this.showHide = document.createElement('button')
27
+ this.showHide.className = 'gem-c-show-password__toggle'
28
+ this.showHide.setAttribute('aria-controls', this.input.getAttribute('id'))
29
+ this.showHide.innerHTML = this.showPasswordText
30
+ this.wrapper.insertBefore(this.showHide, this.input.nextSibling)
31
+
32
+ // create and append the status text for screen readers
33
+ this.statusText = document.createElement('span')
34
+ this.statusText.classList.add('govuk-visually-hidden')
35
+ this.statusText.innerHTML = this.hiddenPassword
36
+ this.statusText.setAttribute('aria-live', 'polite')
37
+ this.wrapper.insertBefore(this.statusText, this.showHide.nextSibling)
38
+
39
+ this.showHide.addEventListener('click', this.$module.togglePassword)
40
+
41
+ this.parentForm = this.input.form
42
+ var disableFormSubmitCheck = this.$module.getAttribute('data-disable-form-submit-check')
43
+
44
+ if (this.parentForm && !disableFormSubmitCheck) {
45
+ this.parentForm.addEventListener('submit', this.$module.revertToPasswordOnFormSubmit)
46
+ }
47
+ }
48
+
49
+ ShowPassword.prototype.togglePassword = function (event) {
50
+ event.preventDefault()
51
+ this.showHide.innerHTML = this.showHide.innerHTML === this.showPasswordText ? this.hidePasswordText : this.showPasswordText
52
+ this.statusText.innerHTML = this.statusText.innerHTML === this.shownPassword ? this.hiddenPassword : this.shownPassword
53
+ this.input.setAttribute('type', this.input.getAttribute('type') === 'text' ? 'password' : 'text')
54
+ }
55
+
56
+ ShowPassword.prototype.revertToPasswordOnFormSubmit = function (event) {
57
+ this.showHide.innerHTML = this.showPasswordText
58
+ this.statusText.innerHTML = this.hiddenPassword
59
+ this.input.setAttribute('type', 'password')
60
+ }
61
+
62
+ Modules.ShowPassword = ShowPassword
63
+ })(window.GOVUK.Modules)
@@ -60,6 +60,7 @@
60
60
  @import "components/search";
61
61
  @import "components/select";
62
62
  @import "components/share-links";
63
+ @import "components/show-password";
63
64
  @import "components/skip-link";
64
65
  @import "components/step-by-step-nav-header";
65
66
  @import "components/step-by-step-nav-related";
@@ -40,7 +40,7 @@ $share-button-height: 32px;
40
40
  left: 0;
41
41
  width: $share-button-width;
42
42
  height: $share-button-height;
43
- vertical-align: top;
43
+ line-height: $share-button-height;
44
44
  }
45
45
 
46
46
  .direction-rtl {
@@ -61,7 +61,7 @@ $share-button-height: 32px;
61
61
  }
62
62
  }
63
63
 
64
- $column-width: 150px;
64
+ $column-width: 9.5em;
65
65
 
66
66
  .gem-c-share-links--columns {
67
67
  .gem-c-share-links__list {
@@ -0,0 +1,61 @@
1
+ .gem-c-show-password__input-wrapper {
2
+ display: table; // IE fallback
3
+ display: flex;
4
+ width: 100%;
5
+ flex-direction: column;
6
+
7
+ @include govuk-media-query($from: mobile) {
8
+ flex-direction: row;
9
+ }
10
+
11
+ .gem-c-input--with-password {
12
+ display: table-cell;
13
+
14
+ &:focus {
15
+ z-index: 1;
16
+ }
17
+ }
18
+ }
19
+
20
+ .gem-c-show-password__toggle {
21
+ @include govuk-font(19);
22
+ z-index: 0;
23
+ display: table-cell; // IE fallback
24
+ padding: govuk-spacing(1) govuk-spacing(3);
25
+ min-width: 5em; // stops the button width jumping when the text changes
26
+ color: $govuk-link-colour;
27
+ text-decoration: underline;
28
+ background: govuk-colour("white");
29
+ border: solid 2px $govuk-input-border-colour;
30
+ white-space: nowrap;
31
+ cursor: pointer;
32
+
33
+ @include govuk-media-query($until: mobile) {
34
+ padding: govuk-spacing(1);
35
+ width: 100%;
36
+ margin-top: -2px;
37
+ white-space: normal;
38
+ }
39
+
40
+ @include govuk-media-query($from: mobile) {
41
+ margin-left: -2px;
42
+ }
43
+
44
+ &:hover {
45
+ color: $govuk-link-hover-colour;
46
+ }
47
+
48
+ &:focus {
49
+ z-index: 1;
50
+ background: $govuk-focus-colour;
51
+ color: $govuk-focus-text-colour;
52
+ outline: 0;
53
+ }
54
+
55
+ &:active {
56
+ z-index: 1;
57
+ background: govuk-colour("white");
58
+ border-color: $govuk-focus-colour;
59
+ color: $govuk-link-active-colour;
60
+ }
61
+ }
@@ -0,0 +1,40 @@
1
+ <%
2
+ disable_form_submit_check ||= false
3
+ label ||= nil
4
+ value ||= nil
5
+ id ||= nil
6
+ name ||= nil
7
+ autocomplete = "off" unless ['new-password', 'current-password'].include?(autocomplete)
8
+ describedby ||= nil
9
+ hint ||= nil
10
+ error_message ||= nil
11
+ error_items ||= nil
12
+
13
+ if !label
14
+ raise ArgumentError, "This component requires a label"
15
+ end
16
+ %>
17
+ <% if label %>
18
+ <%= tag.div class: "gem-c-show-password",
19
+ data: {
20
+ module: "show-password",
21
+ disable_form_submit_check: disable_form_submit_check,
22
+ show: t('components.input.show'),
23
+ hide: t('components.input.hide'),
24
+ announce_show: t('components.input.announce_show'),
25
+ announce_hide: t('components.input.announce_hide')
26
+ } do %>
27
+ <%= render "govuk_publishing_components/components/input", {
28
+ label: label,
29
+ value: value,
30
+ id: id,
31
+ name: name,
32
+ describedby: describedby,
33
+ hint: hint,
34
+ error_message: error_message,
35
+ error_items: error_items,
36
+ type: "password",
37
+ autocomplete: autocomplete,
38
+ } %>
39
+ <% end %>
40
+ <% end %>
@@ -52,6 +52,10 @@ examples:
52
52
  data:
53
53
  text: "Secondary quiet button"
54
54
  secondary_quiet: true
55
+ secondary_solid_button:
56
+ data:
57
+ text: "Secondary solid button"
58
+ secondary_solid: true
55
59
  destructive_button:
56
60
  data:
57
61
  text: "Destructive button"
@@ -0,0 +1,79 @@
1
+ name: Show password input
2
+ description: A password input field that allows the password to be shown.
3
+ body: |
4
+ 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.
5
+
6
+ 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.
7
+ accessibility_criteria: |
8
+ The component must:
9
+
10
+ * indicate to the user that the password has been shown or hidden
11
+
12
+ Inputs in the component must:
13
+
14
+ * accept focus
15
+ * be focusable with a keyboard
16
+ * be usable with a keyboard
17
+ * be usable with touch
18
+ * indicate when they have focus
19
+ * be recognisable as form input elements
20
+ * have correctly associated labels
21
+ * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
22
+
23
+ Buttons in the component must:
24
+
25
+ - accept focus
26
+ - be focusable with a keyboard
27
+ - indicate when it has focus
28
+ - activate when focused and space is pressed
29
+ - activate when focused and enter is pressed
30
+ govuk_frontend_components:
31
+ - text-input
32
+ examples:
33
+ default:
34
+ data:
35
+ label:
36
+ text: Please enter your password
37
+ value: this is my password
38
+ disable_form_submit_check:
39
+ 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.
40
+ data:
41
+ label:
42
+ text: Please enter your password
43
+ value: this is my password
44
+ disable_form_submit_check: true
45
+ set_autocomplete_attribute:
46
+ 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.
47
+ data:
48
+ label:
49
+ text: Please enter your password
50
+ autocomplete: "current-password"
51
+ value: this is my password
52
+ with_attributes:
53
+ 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).
54
+ data:
55
+ label:
56
+ text: Please enter your password
57
+ value: this is my password
58
+ id: custom_id
59
+ name: custom_name
60
+ with_hint:
61
+ data:
62
+ label:
63
+ text: Please enter your password
64
+ value: this is my password
65
+ hint: Your password must be at least twelve thousand characters
66
+ with_error:
67
+ data:
68
+ label:
69
+ text: Please enter your password
70
+ value: this is my password
71
+ error_message: No it isn't
72
+ with_error_items:
73
+ data:
74
+ label:
75
+ text: Please enter your password
76
+ value: this is my password
77
+ error_items:
78
+ - text: Look I keep telling you
79
+ - text: This isn't your password
@@ -1,5 +1,5 @@
1
1
  name: Subscription links
2
- description: Links to ‘Get email alerts’ and ‘Subscribe to feed’
2
+ description: Links to ‘Get emails’ and ‘Subscribe to feed’
3
3
  body: |
4
4
  <strong>NOTE: This component includes a h2 heading by default but can be suppressed by using `hide_heading` option (see below)<strong>
5
5
  accessibility_criteria: |
@@ -54,6 +54,11 @@ en:
54
54
  what_wrong: "What went wrong?"
55
55
  send_me_survey: "Send me the survey"
56
56
  send: "Send"
57
+ input:
58
+ show: Show
59
+ hide: Hide
60
+ announce_show: Your password is shown
61
+ announce_hide: Your password is hidden
57
62
  organisation_schema:
58
63
  all_content_search_description: "Find all content from %{organisation}"
59
64
  radio:
@@ -92,7 +97,7 @@ en:
92
97
  step_by_step_nav_related:
93
98
  part_of: "Part of"
94
99
  subscription_links:
95
- email_signup_link_text: "Get email alerts"
100
+ email_signup_link_text: "Get emails"
96
101
  feed_link_text: "Subscribe to feed"
97
102
  subscriptions: "Subscriptions"
98
103
  summary_list:
@@ -17,6 +17,7 @@ module GovukPublishingComponents
17
17
  :start,
18
18
  :secondary,
19
19
  :secondary_quiet,
20
+ :secondary_solid,
20
21
  :destructive,
21
22
  :name,
22
23
  :value,
@@ -41,6 +42,7 @@ module GovukPublishingComponents
41
42
  @start = local_assigns[:start]
42
43
  @secondary = local_assigns[:secondary]
43
44
  @secondary_quiet = local_assigns[:secondary_quiet]
45
+ @secondary_solid = local_assigns[:secondary_solid]
44
46
  @destructive = local_assigns[:destructive]
45
47
  @name = local_assigns[:name]
46
48
  @value = local_assigns[:value]
@@ -77,6 +79,7 @@ module GovukPublishingComponents
77
79
  css_classes << "govuk-button--start" if start
78
80
  css_classes << "gem-c-button--secondary" if secondary
79
81
  css_classes << "gem-c-button--secondary-quiet" if secondary_quiet
82
+ css_classes << "govuk-button--secondary" if secondary_solid
80
83
  css_classes << "govuk-button--warning" if destructive
81
84
  css_classes << "gem-c-button--bottom-margin" if margin_bottom && !info_text
82
85
  css_classes << "gem-c-button--inline" if inline_layout
@@ -14,13 +14,13 @@ module GovukPublishingComponents
14
14
  def email_signup_link_text
15
15
  return @local_assigns[:email_signup_link_text] if @local_assigns[:email_signup_link_text]
16
16
 
17
- I18n.t("govuk_component.subscription_links.email_signup_link_text", default: "Get email alerts")
17
+ I18n.t("components.subscription_links.email_signup_link_text")
18
18
  end
19
19
 
20
20
  def feed_link_text
21
21
  return @local_assigns[:feed_link_text] if @local_assigns[:feed_link_text]
22
22
 
23
- I18n.t("govuk_component.subscription_links.feed_link_text", default: "Subscribe to feed")
23
+ I18n.t("components.subscription_links.feed_link_text")
24
24
  end
25
25
 
26
26
  def component_data_is_valid?
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "23.7.4".freeze
2
+ VERSION = "23.9.0".freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 23.7.4
4
+ version: 23.9.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-02 00:00:00.000000000 Z
11
+ date: 2020-12-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config
@@ -428,6 +428,7 @@ files:
428
428
  - app/assets/javascripts/govuk_publishing_components/components/modal-dialogue.js
429
429
  - app/assets/javascripts/govuk_publishing_components/components/print-link.js
430
430
  - app/assets/javascripts/govuk_publishing_components/components/radio.js
431
+ - app/assets/javascripts/govuk_publishing_components/components/show-password.js
431
432
  - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
432
433
  - app/assets/javascripts/govuk_publishing_components/components/tabs.js
433
434
  - app/assets/javascripts/govuk_publishing_components/dependencies.js
@@ -510,6 +511,7 @@ files:
510
511
  - app/assets/stylesheets/govuk_publishing_components/components/_search.scss
511
512
  - app/assets/stylesheets/govuk_publishing_components/components/_select.scss
512
513
  - app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
514
+ - app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss
513
515
  - app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss
514
516
  - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss
515
517
  - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
@@ -662,6 +664,7 @@ files:
662
664
  - app/views/govuk_publishing_components/components/_search.html.erb
663
665
  - app/views/govuk_publishing_components/components/_select.html.erb
664
666
  - app/views/govuk_publishing_components/components/_share_links.html.erb
667
+ - app/views/govuk_publishing_components/components/_show_password.html.erb
665
668
  - app/views/govuk_publishing_components/components/_skip_link.html.erb
666
669
  - app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
667
670
  - app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
@@ -741,6 +744,7 @@ files:
741
744
  - app/views/govuk_publishing_components/components/docs/search.yml
742
745
  - app/views/govuk_publishing_components/components/docs/select.yml
743
746
  - app/views/govuk_publishing_components/components/docs/share_links.yml
747
+ - app/views/govuk_publishing_components/components/docs/show_password.yml
744
748
  - app/views/govuk_publishing_components/components/docs/skip_link.yml
745
749
  - app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
746
750
  - app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml