govuk_publishing_components 37.10.0 → 38.0.1
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/README.md +29 -15
- data/app/assets/config/govuk_publishing_components_sassc-rails_manifest.js +0 -1
- data/app/assets/images/govuk_publishing_components/crests/hmrc_crest_13px.png +0 -0
- data/app/assets/images/govuk_publishing_components/crests/hmrc_crest_13px_x2.png +0 -0
- data/app/assets/images/govuk_publishing_components/crests/hmrc_crest_18px.png +0 -0
- data/app/assets/images/govuk_publishing_components/crests/hmrc_crest_18px_x2.png +0 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
- data/app/models/govuk_publishing_components/component_docs.rb +1 -3
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +12 -1
- data/app/views/govuk_publishing_components/components/docs/contextual_footer.yml +6 -12
- data/app/views/govuk_publishing_components/components/docs/related_navigation.yml +9 -49
- data/config/locales/ar.yml +0 -7
- data/config/locales/az.yml +0 -7
- data/config/locales/be.yml +0 -7
- data/config/locales/bg.yml +0 -7
- data/config/locales/bn.yml +0 -7
- data/config/locales/cs.yml +0 -7
- data/config/locales/cy.yml +0 -7
- data/config/locales/da.yml +0 -7
- data/config/locales/de.yml +0 -7
- data/config/locales/dr.yml +0 -7
- data/config/locales/el.yml +0 -7
- data/config/locales/en.yml +0 -7
- data/config/locales/es-419.yml +0 -7
- data/config/locales/es.yml +0 -7
- data/config/locales/et.yml +0 -7
- data/config/locales/fa.yml +0 -7
- data/config/locales/fi.yml +0 -7
- data/config/locales/fr.yml +0 -7
- data/config/locales/gd.yml +0 -7
- data/config/locales/gu.yml +0 -7
- data/config/locales/he.yml +0 -7
- data/config/locales/hi.yml +0 -7
- data/config/locales/hr.yml +0 -7
- data/config/locales/hu.yml +0 -7
- data/config/locales/hy.yml +0 -7
- data/config/locales/id.yml +0 -7
- data/config/locales/is.yml +0 -7
- data/config/locales/it.yml +0 -7
- data/config/locales/ja.yml +0 -7
- data/config/locales/ka.yml +0 -7
- data/config/locales/kk.yml +0 -7
- data/config/locales/ko.yml +0 -7
- data/config/locales/lt.yml +0 -7
- data/config/locales/lv.yml +0 -7
- data/config/locales/ms.yml +0 -7
- data/config/locales/mt.yml +0 -7
- data/config/locales/nl.yml +0 -7
- data/config/locales/no.yml +0 -7
- data/config/locales/pa-pk.yml +0 -7
- data/config/locales/pa.yml +0 -7
- data/config/locales/pl.yml +0 -7
- data/config/locales/ps.yml +0 -7
- data/config/locales/pt.yml +0 -7
- data/config/locales/ro.yml +0 -7
- data/config/locales/ru.yml +0 -7
- data/config/locales/si.yml +0 -7
- data/config/locales/sk.yml +0 -7
- data/config/locales/sl.yml +0 -7
- data/config/locales/so.yml +0 -7
- data/config/locales/sq.yml +0 -7
- data/config/locales/sr.yml +0 -7
- data/config/locales/sv.yml +0 -7
- data/config/locales/sw.yml +0 -7
- data/config/locales/ta.yml +0 -7
- data/config/locales/th.yml +0 -7
- data/config/locales/tk.yml +0 -7
- data/config/locales/tr.yml +0 -7
- data/config/locales/uk.yml +0 -7
- data/config/locales/ur.yml +0 -7
- data/config/locales/uz.yml +0 -7
- data/config/locales/vi.yml +0 -7
- data/config/locales/zh-hk.yml +0 -7
- data/config/locales/zh-tw.yml +0 -7
- data/config/locales/zh.yml +0 -7
- data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb +1 -1
- data/lib/govuk_publishing_components/presenters/content_item.rb +0 -4
- data/lib/govuk_publishing_components/presenters/intervention_helper.rb +6 -4
- data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb +6 -20
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/lib/govuk_publishing_components.rb +1 -0
- metadata +2 -6
- data/app/assets/javascripts/govuk_publishing_components/components/show-password.js +0 -82
- data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss +0 -70
- data/app/views/govuk_publishing_components/components/_show_password.html.erb +0 -46
- data/app/views/govuk_publishing_components/components/docs/show_password.yml +0 -91
|
@@ -27,10 +27,12 @@ module GovukPublishingComponents
|
|
|
27
27
|
end
|
|
28
28
|
|
|
29
29
|
def security_attr
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
# Link is external unless it begins with "/" (but not "//") or it's on gov.uk.
|
|
31
|
+
if %r{\A(/[^/]|https://(www\.)?gov\.uk(/|\z))}.match?(@suggestion_link_url)
|
|
32
|
+
"noopener noreferrer"
|
|
33
|
+
else
|
|
34
|
+
"noopener noreferrer external"
|
|
35
|
+
end
|
|
34
36
|
end
|
|
35
37
|
|
|
36
38
|
def show?
|
|
@@ -32,7 +32,7 @@ module GovukPublishingComponents
|
|
|
32
32
|
}
|
|
33
33
|
when :footer
|
|
34
34
|
{
|
|
35
|
-
"topics" =>
|
|
35
|
+
"topics" => related_browse_topics_or_taxons,
|
|
36
36
|
"topical_events" => related_topical_events,
|
|
37
37
|
"world_locations" => related_world_locations,
|
|
38
38
|
"statistical_data_sets" => related_statistical_data_sets,
|
|
@@ -44,7 +44,7 @@ module GovukPublishingComponents
|
|
|
44
44
|
"related_items" => related_items,
|
|
45
45
|
"related_guides" => related_guides,
|
|
46
46
|
"collections" => related_document_collections,
|
|
47
|
-
"topics" =>
|
|
47
|
+
"topics" => related_browse_topics_or_taxons,
|
|
48
48
|
"topical_events" => related_topical_events,
|
|
49
49
|
"world_locations" => related_world_locations,
|
|
50
50
|
"statistical_data_sets" => related_statistical_data_sets,
|
|
@@ -142,26 +142,12 @@ module GovukPublishingComponents
|
|
|
142
142
|
@related_taxons ||= content_item_links_for("taxons", only: "taxon")
|
|
143
143
|
end
|
|
144
144
|
|
|
145
|
-
def
|
|
146
|
-
|
|
147
|
-
return related_taxons if related_taxons.any?
|
|
148
|
-
|
|
149
|
-
[]
|
|
145
|
+
def related_browse_topics_or_taxons
|
|
146
|
+
related_browse_topics.presence || related_taxons.presence || []
|
|
150
147
|
end
|
|
151
148
|
|
|
152
|
-
def
|
|
153
|
-
@
|
|
154
|
-
mainstream_browse_page_links = content_item_links_for("mainstream_browse_pages", only: "mainstream_browse_page")
|
|
155
|
-
topic_links = content_item_links_for("topics", only: "topic")
|
|
156
|
-
|
|
157
|
-
return topic_links if topic_links.present? && mainstream_browse_page_links.empty?
|
|
158
|
-
|
|
159
|
-
mainstream_browse_page_links + topic_links.find_all do |topic_link|
|
|
160
|
-
mainstream_browse_page_links.none? do |mainstream_browse_page_link|
|
|
161
|
-
mainstream_browse_page_link[:text] == topic_link[:text]
|
|
162
|
-
end
|
|
163
|
-
end
|
|
164
|
-
end
|
|
149
|
+
def related_browse_topics
|
|
150
|
+
@related_browse_topics ||= content_item_links_for("mainstream_browse_pages", only: "mainstream_browse_page")
|
|
165
151
|
end
|
|
166
152
|
|
|
167
153
|
def related_topical_events
|
|
@@ -2,6 +2,7 @@ require "active_support"
|
|
|
2
2
|
require "action_controller"
|
|
3
3
|
require "action_view"
|
|
4
4
|
require "govuk_personalisation"
|
|
5
|
+
require "ostruct"
|
|
5
6
|
require "govuk_publishing_components/config"
|
|
6
7
|
require "govuk_publishing_components/engine"
|
|
7
8
|
require "govuk_publishing_components/version"
|
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:
|
|
4
|
+
version: 38.0.1
|
|
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: 2024-
|
|
11
|
+
date: 2024-04-09 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|
|
@@ -511,7 +511,6 @@ files:
|
|
|
511
511
|
- app/assets/javascripts/govuk_publishing_components/components/print-link.js
|
|
512
512
|
- app/assets/javascripts/govuk_publishing_components/components/radio.js
|
|
513
513
|
- app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js
|
|
514
|
-
- app/assets/javascripts/govuk_publishing_components/components/show-password.js
|
|
515
514
|
- app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
|
|
516
515
|
- app/assets/javascripts/govuk_publishing_components/components/skip-link.js
|
|
517
516
|
- app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
|
|
@@ -608,7 +607,6 @@ files:
|
|
|
608
607
|
- app/assets/stylesheets/govuk_publishing_components/components/_search.scss
|
|
609
608
|
- app/assets/stylesheets/govuk_publishing_components/components/_select.scss
|
|
610
609
|
- app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
|
|
611
|
-
- app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss
|
|
612
610
|
- app/assets/stylesheets/govuk_publishing_components/components/_signup-link.scss
|
|
613
611
|
- app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss
|
|
614
612
|
- app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss
|
|
@@ -748,7 +746,6 @@ files:
|
|
|
748
746
|
- app/views/govuk_publishing_components/components/_search.html.erb
|
|
749
747
|
- app/views/govuk_publishing_components/components/_select.html.erb
|
|
750
748
|
- app/views/govuk_publishing_components/components/_share_links.html.erb
|
|
751
|
-
- app/views/govuk_publishing_components/components/_show_password.html.erb
|
|
752
749
|
- app/views/govuk_publishing_components/components/_signup_link.html.erb
|
|
753
750
|
- app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
|
|
754
751
|
- app/views/govuk_publishing_components/components/_skip_link.html.erb
|
|
@@ -836,7 +833,6 @@ files:
|
|
|
836
833
|
- app/views/govuk_publishing_components/components/docs/search.yml
|
|
837
834
|
- app/views/govuk_publishing_components/components/docs/select.yml
|
|
838
835
|
- app/views/govuk_publishing_components/components/docs/share_links.yml
|
|
839
|
-
- app/views/govuk_publishing_components/components/docs/show_password.yml
|
|
840
836
|
- app/views/govuk_publishing_components/components/docs/signup_link.yml
|
|
841
837
|
- app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml
|
|
842
838
|
- app/views/govuk_publishing_components/components/docs/skip_link.yml
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
window.GOVUK = window.GOVUK || {}
|
|
2
|
-
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
3
|
-
|
|
4
|
-
(function (Modules) {
|
|
5
|
-
function ShowPassword ($module) {
|
|
6
|
-
this.$module = $module
|
|
7
|
-
this.input = this.$module.querySelector('.gem-c-input')
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
ShowPassword.prototype.init = function () {
|
|
11
|
-
this.$module.togglePassword = this.togglePassword.bind(this)
|
|
12
|
-
this.$module.revertToPasswordOnFormSubmit = this.revertToPasswordOnFormSubmit.bind(this)
|
|
13
|
-
this.input.classList.add('gem-c-input--with-password')
|
|
14
|
-
|
|
15
|
-
this.showPasswordText = this.$module.getAttribute('data-show-text')
|
|
16
|
-
this.hidePasswordText = this.$module.getAttribute('data-hide-text')
|
|
17
|
-
this.showPasswordFullText = this.$module.getAttribute('data-show-full-text')
|
|
18
|
-
this.hidePasswordFullText = this.$module.getAttribute('data-hide-full-text')
|
|
19
|
-
this.shownPassword = this.$module.getAttribute('data-announce-show')
|
|
20
|
-
this.hiddenPassword = this.$module.getAttribute('data-announce-hide')
|
|
21
|
-
|
|
22
|
-
// wrap the input in a new div
|
|
23
|
-
this.wrapper = document.createElement('div')
|
|
24
|
-
this.wrapper.classList.add('gem-c-show-password__input-wrapper')
|
|
25
|
-
this.input.parentNode.insertBefore(this.wrapper, this.input)
|
|
26
|
-
this.wrapper.appendChild(this.input)
|
|
27
|
-
|
|
28
|
-
// create and append the button
|
|
29
|
-
this.showHide = document.createElement('button')
|
|
30
|
-
this.showHide.className = 'gem-c-show-password__toggle'
|
|
31
|
-
this.showHide.setAttribute('aria-controls', this.input.getAttribute('id'))
|
|
32
|
-
this.showHide.setAttribute('type', 'button')
|
|
33
|
-
this.showHide.setAttribute('aria-label', this.showPasswordFullText)
|
|
34
|
-
this.showHide.innerHTML = this.showPasswordText
|
|
35
|
-
this.wrapper.insertBefore(this.showHide, this.input.nextSibling)
|
|
36
|
-
|
|
37
|
-
// create and append the status text for screen readers
|
|
38
|
-
this.statusText = document.createElement('span')
|
|
39
|
-
this.statusText.classList.add('govuk-visually-hidden')
|
|
40
|
-
this.statusText.innerHTML = this.hiddenPassword
|
|
41
|
-
this.statusText.setAttribute('aria-live', 'polite')
|
|
42
|
-
this.wrapper.insertBefore(this.statusText, this.showHide.nextSibling)
|
|
43
|
-
|
|
44
|
-
this.showHide.addEventListener('click', this.$module.togglePassword)
|
|
45
|
-
this.moveDataAttributesToButton()
|
|
46
|
-
|
|
47
|
-
this.parentForm = this.input.form
|
|
48
|
-
var disableFormSubmitCheck = this.$module.getAttribute('data-disable-form-submit-check')
|
|
49
|
-
|
|
50
|
-
if (this.parentForm && !disableFormSubmitCheck) {
|
|
51
|
-
this.parentForm.addEventListener('submit', this.$module.revertToPasswordOnFormSubmit)
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
ShowPassword.prototype.togglePassword = function (event) {
|
|
56
|
-
event.preventDefault()
|
|
57
|
-
this.showHide.innerHTML = this.showHide.innerHTML === this.showPasswordText ? this.hidePasswordText : this.showPasswordText
|
|
58
|
-
this.showHide.setAttribute('aria-label', this.showHide.getAttribute('aria-label') === this.showPasswordFullText ? this.hidePasswordFullText : this.showPasswordFullText)
|
|
59
|
-
this.statusText.innerHTML = this.statusText.innerHTML === this.shownPassword ? this.hiddenPassword : this.shownPassword
|
|
60
|
-
this.input.setAttribute('type', this.input.getAttribute('type') === 'text' ? 'password' : 'text')
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
ShowPassword.prototype.revertToPasswordOnFormSubmit = function (event) {
|
|
64
|
-
this.showHide.innerHTML = this.showPasswordText
|
|
65
|
-
this.showHide.setAttribute('aria-label', this.showPasswordFullText)
|
|
66
|
-
this.statusText.innerHTML = this.hiddenPassword
|
|
67
|
-
this.input.setAttribute('type', 'password')
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
ShowPassword.prototype.moveDataAttributesToButton = function () {
|
|
71
|
-
var attrs = this.input.attributes
|
|
72
|
-
for (var i = attrs.length; i >= 0; i--) {
|
|
73
|
-
var attr = attrs[i]
|
|
74
|
-
if (attr && /^data-button/.test(attr.name)) {
|
|
75
|
-
this.showHide.setAttribute(attr.name.replace('-button', ''), attr.value)
|
|
76
|
-
this.input.removeAttribute(attr.name)
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
Modules.ShowPassword = ShowPassword
|
|
82
|
-
})(window.GOVUK.Modules)
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
@import "govuk_publishing_components/individual_component_support";
|
|
2
|
-
|
|
3
|
-
.gem-c-show-password__input-wrapper {
|
|
4
|
-
display: table; // IE fallback
|
|
5
|
-
display: flex;
|
|
6
|
-
width: 100%;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
|
|
9
|
-
@include govuk-media-query($from: mobile) {
|
|
10
|
-
flex-direction: row;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.gem-c-input--with-password {
|
|
14
|
-
display: table-cell;
|
|
15
|
-
|
|
16
|
-
&:focus {
|
|
17
|
-
z-index: 1;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&::-ms-reveal {
|
|
21
|
-
display: none;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.gem-c-show-password__toggle {
|
|
27
|
-
@include govuk-font(19);
|
|
28
|
-
z-index: 0;
|
|
29
|
-
display: table-cell; // IE fallback
|
|
30
|
-
padding: govuk-spacing(1) govuk-spacing(3);
|
|
31
|
-
min-width: 5em; // stops the button width jumping when the text changes
|
|
32
|
-
color: $govuk-link-colour;
|
|
33
|
-
text-decoration: underline;
|
|
34
|
-
background: govuk-colour("white");
|
|
35
|
-
border: solid 2px $govuk-input-border-colour;
|
|
36
|
-
white-space: nowrap;
|
|
37
|
-
cursor: pointer;
|
|
38
|
-
|
|
39
|
-
@include govuk-media-query($until: mobile) {
|
|
40
|
-
padding: govuk-spacing(1);
|
|
41
|
-
width: 100%;
|
|
42
|
-
margin-top: -2px;
|
|
43
|
-
white-space: normal;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@include govuk-media-query($from: mobile) {
|
|
47
|
-
margin-left: -2px;
|
|
48
|
-
margin-top: 0;
|
|
49
|
-
margin-bottom: 0;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
&:hover {
|
|
53
|
-
color: $govuk-link-hover-colour;
|
|
54
|
-
@include govuk-link-hover-decoration;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&:focus {
|
|
58
|
-
z-index: 1;
|
|
59
|
-
background: $govuk-focus-colour;
|
|
60
|
-
color: $govuk-focus-text-colour;
|
|
61
|
-
outline: 0;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
&:active {
|
|
65
|
-
z-index: 1;
|
|
66
|
-
background: govuk-colour("white");
|
|
67
|
-
border-color: $govuk-focus-colour;
|
|
68
|
-
color: $govuk-link-active-colour;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
add_gem_component_stylesheet("show-password")
|
|
3
|
-
|
|
4
|
-
disable_form_submit_check ||= false
|
|
5
|
-
label ||= nil
|
|
6
|
-
value ||= nil
|
|
7
|
-
id ||= nil
|
|
8
|
-
name ||= nil
|
|
9
|
-
autocomplete = "off" unless ['new-password', 'current-password'].include?(autocomplete)
|
|
10
|
-
describedby ||= nil
|
|
11
|
-
hint ||= nil
|
|
12
|
-
error_message ||= nil
|
|
13
|
-
error_items ||= nil
|
|
14
|
-
data ||= nil
|
|
15
|
-
|
|
16
|
-
if !label
|
|
17
|
-
raise ArgumentError, "This component requires a label"
|
|
18
|
-
end
|
|
19
|
-
%>
|
|
20
|
-
<% if label %>
|
|
21
|
-
<%= tag.div class: "gem-c-show-password",
|
|
22
|
-
data: {
|
|
23
|
-
module: "show-password",
|
|
24
|
-
disable_form_submit_check: disable_form_submit_check,
|
|
25
|
-
show_text: t('components.show_password.show'),
|
|
26
|
-
hide_text: t('components.show_password.hide'),
|
|
27
|
-
show_full_text: t('components.show_password.show_password'),
|
|
28
|
-
hide_full_text: t('components.show_password.hide_password'),
|
|
29
|
-
announce_show: t('components.show_password.announce_show'),
|
|
30
|
-
announce_hide: t('components.show_password.announce_hide')
|
|
31
|
-
} do %>
|
|
32
|
-
<%= render "govuk_publishing_components/components/input", {
|
|
33
|
-
label: label,
|
|
34
|
-
value: value,
|
|
35
|
-
id: id,
|
|
36
|
-
name: name,
|
|
37
|
-
describedby: describedby,
|
|
38
|
-
hint: hint,
|
|
39
|
-
error_message: error_message,
|
|
40
|
-
error_items: error_items,
|
|
41
|
-
type: "password",
|
|
42
|
-
autocomplete: autocomplete,
|
|
43
|
-
data: data,
|
|
44
|
-
} %>
|
|
45
|
-
<% end %>
|
|
46
|
-
<% end %>
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
name: Show password input (experimental)
|
|
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
|
-
|
|
8
|
-
This component is currently experimental. If you are using it, please feed back any research findings to the Accounts team.
|
|
9
|
-
accessibility_criteria: |
|
|
10
|
-
The component must:
|
|
11
|
-
|
|
12
|
-
* indicate to the user that the password has been shown or hidden
|
|
13
|
-
|
|
14
|
-
Inputs in the component must:
|
|
15
|
-
|
|
16
|
-
* accept focus
|
|
17
|
-
* be focusable with a keyboard
|
|
18
|
-
* be usable with a keyboard
|
|
19
|
-
* be usable with touch
|
|
20
|
-
* indicate when they have focus
|
|
21
|
-
* be recognisable as form input elements
|
|
22
|
-
* have correctly associated labels
|
|
23
|
-
* be of the appropriate type for their use, e.g. password inputs should be of type 'password'
|
|
24
|
-
|
|
25
|
-
Buttons in the component must:
|
|
26
|
-
|
|
27
|
-
- accept focus
|
|
28
|
-
- be focusable with a keyboard
|
|
29
|
-
- indicate when it has focus
|
|
30
|
-
- activate when focused and space is pressed
|
|
31
|
-
- activate when focused and enter is pressed
|
|
32
|
-
govuk_frontend_components:
|
|
33
|
-
- text-input
|
|
34
|
-
examples:
|
|
35
|
-
default:
|
|
36
|
-
data:
|
|
37
|
-
label:
|
|
38
|
-
text: Please enter your password
|
|
39
|
-
value: this is my password
|
|
40
|
-
disable_form_submit_check:
|
|
41
|
-
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.
|
|
42
|
-
data:
|
|
43
|
-
label:
|
|
44
|
-
text: Please enter your password
|
|
45
|
-
value: this is my password
|
|
46
|
-
disable_form_submit_check: true
|
|
47
|
-
set_autocomplete_attribute:
|
|
48
|
-
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.
|
|
49
|
-
data:
|
|
50
|
-
label:
|
|
51
|
-
text: Please enter your password
|
|
52
|
-
autocomplete: "current-password"
|
|
53
|
-
value: this is my password
|
|
54
|
-
with_attributes:
|
|
55
|
-
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).
|
|
56
|
-
data:
|
|
57
|
-
label:
|
|
58
|
-
text: Please enter your password
|
|
59
|
-
value: this is my password
|
|
60
|
-
id: custom_id
|
|
61
|
-
name: custom_name
|
|
62
|
-
with_hint:
|
|
63
|
-
data:
|
|
64
|
-
label:
|
|
65
|
-
text: Please enter your password
|
|
66
|
-
value: this is my password
|
|
67
|
-
hint: Your password must be at least twelve thousand characters
|
|
68
|
-
with_error:
|
|
69
|
-
data:
|
|
70
|
-
label:
|
|
71
|
-
text: Please enter your password
|
|
72
|
-
value: this is my password
|
|
73
|
-
error_message: No it isn't
|
|
74
|
-
with_error_items:
|
|
75
|
-
data:
|
|
76
|
-
label:
|
|
77
|
-
text: Please enter your password
|
|
78
|
-
value: this is my password
|
|
79
|
-
error_items:
|
|
80
|
-
- text: Look I keep telling you
|
|
81
|
-
- text: This isn't your password
|
|
82
|
-
with_data_attributes:
|
|
83
|
-
description: Data attributes can be passed to add to the input element. If the data attribute starts with `data-button-` this attribute will be applied to the show/hide button, instead of the input. Note that if JavaScript disabled, all attributes are added to the input.
|
|
84
|
-
data:
|
|
85
|
-
label:
|
|
86
|
-
text: Your password
|
|
87
|
-
data:
|
|
88
|
-
example_1: value
|
|
89
|
-
example_2: thing
|
|
90
|
-
button_example_1: wotsit
|
|
91
|
-
button_example_2: doodad
|