govuk_publishing_components 23.7.7 → 23.8.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: 4bcf906c61bd12c5c7a7eaa0f3a948c0e17cf23b3590e4640ea3b91fd8b20494
4
- data.tar.gz: 367dd5afad155e02d182cb8b4b48dc6740a24b7888111b947c4cc486d963bfad
3
+ metadata.gz: b355f4e112330597b8729fccdf92f6c93cf5fe6a7747085c7cbba64cab1f3ef8
4
+ data.tar.gz: 955729aea91b01f3b0f1821760171ada7a753a61ccc67d340c1e933a488e82aa
5
5
  SHA512:
6
- metadata.gz: 1b5fe1817e673d9d5a2bffcecccf1434d34f1b13643df275fccca45a2f478b4a56f9e27b486713faa6fa5bb48c21a4999b293d5b6aabec468a899a28345bcfef
7
- data.tar.gz: 8086257659e01ac460d9fdf0cde17fc20378bc24bfcb35bfa00cea04247c2ebacc3237d72f4fe1a2e027c1433fb93c2f65be07fc0fbefcfd7d09c9bd499c9b8e
6
+ metadata.gz: 3c73ebd1e6e8891b6bc2cc5f9dfb0a0262fd0c8144c7201722b88bd9bcabafb52cb1af42e00a42295fbf5c370a0813a3ee2a7df3b033415116f65fe0bcfeb489
7
+ data.tar.gz: a3c007af74d59f71a41a54328d2ee8682dcbf26779b8d366c9f47f96e330d9f21856e242bbef1223cf2d1490fa258ff3e658b84d7ae1c969d9db43a225067374
@@ -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";
@@ -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 %>
@@ -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
@@ -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:
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "23.7.7".freeze
2
+ VERSION = "23.8.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.7
4
+ version: 23.8.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-03 00:00:00.000000000 Z
11
+ date: 2020-12-07 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