govuk_publishing_components 23.7.7 → 23.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/show-password.js +63 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss +61 -0
- data/app/views/govuk_publishing_components/components/_show_password.html.erb +40 -0
- data/app/views/govuk_publishing_components/components/docs/show_password.yml +79 -0
- data/config/locales/en.yml +5 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b355f4e112330597b8729fccdf92f6c93cf5fe6a7747085c7cbba64cab1f3ef8
|
|
4
|
+
data.tar.gz: 955729aea91b01f3b0f1821760171ada7a753a61ccc67d340c1e933a488e82aa
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
data/config/locales/en.yml
CHANGED
|
@@ -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:
|
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.
|
|
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-
|
|
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
|