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 +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
|