govuk_publishing_components 21.66.1 → 21.67.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -1
- data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +7 -2
- data/app/assets/javascripts/govuk_publishing_components/lib/select.js +48 -45
- data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +55 -21
- data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +34 -0
- data/app/views/govuk_publishing_components/components/_contents_list.html.erb +10 -3
- data/app/views/govuk_publishing_components/components/_document_list.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_government_navigation.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_image_card.html.erb +20 -20
- data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +9 -7
- data/app/views/govuk_publishing_components/components/docs/contents_list.yml +28 -5
- data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb +5 -4
- data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb +5 -4
- data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +10 -43
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +4 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4c205c5ca67e71e1e72ae01d1f991b29e89da02f4c830db86f6c4f73952ee1c3
|
|
4
|
+
data.tar.gz: e3773261a647b5f701bd3f675c29ad678d9cee292b1e25614657a41133418d01
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d96e9b56a38d2a5b2613d99e823c7e6c420295626865093dcbb8a142bcfb16738de9d6f0c1858368c62a8c236b129a3a513b9d61215251ee182b632d4bd3156e
|
|
7
|
+
data.tar.gz: 62925d4b3f203e1e8edfb5f631846e1a816fc6a2cc29e7c19615a5661720a4059abc291cac7eea09e34776a74e990cddd315b42594f15437fcf57ce987715af6
|
data/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
GOV.UK Publishing Components
|
|
1
|
+
GOV.UK Publishing Components
|
|
2
2
|
[](https://ci.integration.publishing.service.gov.uk/job/govuk_publishing_components/job/master/)
|
|
3
3
|
[](https://standardjs.com)
|
|
4
|
+
[](https://github.com/alphagov/stylelint-config-gds/)
|
|
4
5
|
=====================
|
|
5
6
|
|
|
6
7
|
GOV.UK Publishing Components is a Ruby gem to document and distribute components for GOV.UK applications.
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
var target = this.getAttribute('href') ? document.getElementById(this.getAttribute('href').substr(1)) : document.getElementById(this.getAttribute('data-search-toggle-for'))
|
|
14
14
|
var targetClass = target.getAttribute('class') || ''
|
|
15
15
|
var sourceClass = this.getAttribute('class') || ''
|
|
16
|
+
var isSearchToggle = sourceClass.match('search-toggle')
|
|
16
17
|
|
|
17
18
|
if (targetClass.indexOf('js-visible') !== -1) {
|
|
18
19
|
target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
|
|
@@ -21,10 +22,14 @@
|
|
|
21
22
|
}
|
|
22
23
|
if (sourceClass.indexOf('js-visible') !== -1) {
|
|
23
24
|
this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
|
|
24
|
-
|
|
25
|
+
if (isSearchToggle) {
|
|
26
|
+
this.innerText = 'Show search'
|
|
27
|
+
}
|
|
25
28
|
} else {
|
|
26
29
|
this.setAttribute('class', sourceClass + ' js-visible')
|
|
27
|
-
|
|
30
|
+
if (isSearchToggle) {
|
|
31
|
+
this.innerText = 'Hide search'
|
|
32
|
+
}
|
|
28
33
|
}
|
|
29
34
|
this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')
|
|
30
35
|
target.setAttribute('aria-hidden', target.getAttribute('aria-hidden') === 'false')
|
|
@@ -1,52 +1,55 @@
|
|
|
1
|
-
/* eslint-env jquery */
|
|
2
|
-
|
|
3
1
|
window.GOVUK = window.GOVUK || {}
|
|
4
2
|
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
5
3
|
|
|
6
4
|
(function (Modules) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
this
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
var options = { transport: 'beacon' }
|
|
22
|
-
var category = element.attr('data-track-category')
|
|
23
|
-
var action = element.attr('data-track-action')
|
|
24
|
-
var label = element.attr('data-track-label')
|
|
25
|
-
var value = element.attr('data-track-value')
|
|
26
|
-
var dimension = element.attr('data-track-dimension')
|
|
27
|
-
var dimensionIndex = element.attr('data-track-dimension-index')
|
|
28
|
-
var extraOptions = element.attr('data-track-options')
|
|
29
|
-
|
|
30
|
-
if (label) {
|
|
31
|
-
options.label = label
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
if (value) {
|
|
35
|
-
options.value = value
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
if (dimension && dimensionIndex) {
|
|
39
|
-
options['dimension' + dimensionIndex] = dimension
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
if (extraOptions) {
|
|
43
|
-
$.extend(options, JSON.parse(extraOptions))
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
|
|
47
|
-
window.GOVUK.analytics.trackEvent(category, action, options)
|
|
48
|
-
}
|
|
49
|
-
};
|
|
5
|
+
function TrackSelectChange () { }
|
|
6
|
+
|
|
7
|
+
TrackSelectChange.prototype.start = function ($module) {
|
|
8
|
+
this.$module = $module[0]
|
|
9
|
+
this.$module.trackChange = this.trackChange.bind(this)
|
|
10
|
+
this.$module.fireTrackingChange = this.fireTrackingChange.bind(this)
|
|
11
|
+
this.$module.addEventListener('change', this.trackChange)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
TrackSelectChange.prototype.trackChange = function () {
|
|
15
|
+
var selectedOption = this.options[this.selectedIndex]
|
|
16
|
+
|
|
17
|
+
if (selectedOption.hasAttribute('data-track-category') && selectedOption.hasAttribute('data-track-action')) {
|
|
18
|
+
this.fireTrackingChange(selectedOption)
|
|
50
19
|
}
|
|
51
20
|
}
|
|
21
|
+
|
|
22
|
+
TrackSelectChange.prototype.fireTrackingChange = function (selectedOption) {
|
|
23
|
+
var options = { transport: 'beacon' }
|
|
24
|
+
var category = selectedOption.getAttribute('data-track-category')
|
|
25
|
+
var action = selectedOption.getAttribute('data-track-action')
|
|
26
|
+
var label = selectedOption.getAttribute('data-track-label')
|
|
27
|
+
var value = selectedOption.getAttribute('data-track-value')
|
|
28
|
+
var dimension = selectedOption.getAttribute('data-track-dimension')
|
|
29
|
+
var dimensionIndex = selectedOption.getAttribute('data-track-dimension-index')
|
|
30
|
+
var extraOptions = selectedOption.getAttribute('data-track-options')
|
|
31
|
+
|
|
32
|
+
if (label) {
|
|
33
|
+
options.label = label
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
if (value) {
|
|
37
|
+
options.value = value
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (dimension && dimensionIndex) {
|
|
41
|
+
options['dimension' + dimensionIndex] = dimension
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (extraOptions) {
|
|
45
|
+
extraOptions = JSON.parse(extraOptions)
|
|
46
|
+
for (var k in extraOptions) options[k] = extraOptions[k]
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
|
|
50
|
+
window.GOVUK.analytics.trackEvent(category, action, options)
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
Modules.TrackSelectChange = TrackSelectChange
|
|
52
55
|
})(window.GOVUK.Modules)
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
// hide without js
|
|
12
12
|
// show with js, unless also has the js-hidden class
|
|
13
13
|
.gem-c-feedback__js-show,
|
|
14
|
-
.gem-c-feedback__form,
|
|
15
14
|
.gem-c-feedback__prompt-success,
|
|
16
15
|
.gem-c-feedback__prompt-questions,
|
|
17
16
|
.gem-c-feedback__error-summary {
|
|
@@ -26,6 +25,24 @@
|
|
|
26
25
|
}
|
|
27
26
|
}
|
|
28
27
|
|
|
28
|
+
// maintain table display for prompt and prompt-questions
|
|
29
|
+
.js-enabled .gem-c-feedback__prompt {
|
|
30
|
+
@include govuk-media-query($from: tablet) {
|
|
31
|
+
display: table;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.js-enabled .gem-c-feedback__prompt-questions {
|
|
36
|
+
@include govuk-media-query($from: tablet) {
|
|
37
|
+
display: table-cell;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// show the default feedback form without js
|
|
42
|
+
.js-enabled .gem-c-feedback__form.js-hidden {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
29
46
|
.gem-c-feedback__prompt-questions {
|
|
30
47
|
text-align: center;
|
|
31
48
|
border-bottom: 1px solid govuk-colour("white");
|
|
@@ -34,7 +51,7 @@
|
|
|
34
51
|
|
|
35
52
|
@include govuk-media-query($from: tablet) {
|
|
36
53
|
width: 50%;
|
|
37
|
-
|
|
54
|
+
display: table-cell;
|
|
38
55
|
text-align: left;
|
|
39
56
|
border-bottom: 0;
|
|
40
57
|
}
|
|
@@ -45,6 +62,8 @@
|
|
|
45
62
|
|
|
46
63
|
@include govuk-media-query($from: tablet) {
|
|
47
64
|
text-align: right;
|
|
65
|
+
vertical-align: bottom;
|
|
66
|
+
float: none;
|
|
48
67
|
}
|
|
49
68
|
}
|
|
50
69
|
|
|
@@ -53,6 +72,12 @@
|
|
|
53
72
|
background-color: govuk-colour("blue");
|
|
54
73
|
color: govuk-colour("white");
|
|
55
74
|
outline: 0;
|
|
75
|
+
|
|
76
|
+
@include govuk-media-query($from: tablet) {
|
|
77
|
+
@include govuk-font(16, $weight: bold);
|
|
78
|
+
display: table;
|
|
79
|
+
width: 100%;
|
|
80
|
+
}
|
|
56
81
|
}
|
|
57
82
|
|
|
58
83
|
.gem-c-feedback__prompt-question,
|
|
@@ -65,13 +90,9 @@
|
|
|
65
90
|
}
|
|
66
91
|
|
|
67
92
|
.gem-c-feedback__prompt-question {
|
|
93
|
+
vertical-align: text-top;
|
|
68
94
|
display: inline-block;
|
|
69
|
-
|
|
70
|
-
// There's a global h3 rule in some layouts that interferes with this component
|
|
71
|
-
margin: 0;
|
|
72
|
-
|
|
73
|
-
margin-left: govuk-spacing(4);
|
|
74
|
-
margin-right: govuk-spacing(4);
|
|
95
|
+
margin: govuk-spacing(2) govuk-spacing(4);
|
|
75
96
|
|
|
76
97
|
&:focus {
|
|
77
98
|
outline: 0;
|
|
@@ -79,13 +100,26 @@
|
|
|
79
100
|
|
|
80
101
|
@include govuk-media-query($from: tablet) {
|
|
81
102
|
margin-left: 0;
|
|
103
|
+
margin-top: 0;
|
|
104
|
+
display: block;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// This custom media-query is to account for some awkward positioning where the yes and no buttons are too big to sit inline with the prompt question
|
|
108
|
+
@include govuk-media-query($from: 950px) {
|
|
109
|
+
display: inline-block;
|
|
110
|
+
margin-top: govuk-spacing(2);
|
|
82
111
|
}
|
|
83
112
|
}
|
|
84
113
|
|
|
85
114
|
.gem-c-feedback__prompt-link {
|
|
86
|
-
@include govuk-link-common;
|
|
87
115
|
@include govuk-font(19);
|
|
88
|
-
|
|
116
|
+
box-shadow: 0 2px 0 govuk-colour("black");
|
|
117
|
+
min-width: 100%;
|
|
118
|
+
|
|
119
|
+
@include govuk-media-query($from: mobile) {
|
|
120
|
+
min-width: 100px;
|
|
121
|
+
margin-bottom: 0;
|
|
122
|
+
}
|
|
89
123
|
|
|
90
124
|
@include govuk-media-query($from: tablet) {
|
|
91
125
|
@include govuk-font(16);
|
|
@@ -116,24 +150,31 @@
|
|
|
116
150
|
}
|
|
117
151
|
|
|
118
152
|
.gem-c-feedback__option-list {
|
|
119
|
-
display: inline-block;
|
|
120
153
|
list-style-type: none;
|
|
121
154
|
margin: 0;
|
|
122
155
|
padding: 0;
|
|
123
|
-
margin-right: govuk-spacing(2);
|
|
124
156
|
margin-top: govuk-spacing(2);
|
|
125
157
|
|
|
158
|
+
@include govuk-media-query($from: mobile) {
|
|
159
|
+
display: inline-block;
|
|
160
|
+
margin-right: govuk-spacing(2);
|
|
161
|
+
}
|
|
162
|
+
|
|
126
163
|
@include govuk-media-query($from: tablet) {
|
|
127
164
|
margin-top: 0;
|
|
128
165
|
}
|
|
129
166
|
}
|
|
130
167
|
|
|
131
168
|
.gem-c-feedback__option-list-item {
|
|
132
|
-
|
|
169
|
+
@include govuk-media-query($from: mobile) {
|
|
170
|
+
display: inline-block;
|
|
171
|
+
}
|
|
133
172
|
}
|
|
134
173
|
|
|
135
174
|
.gem-c-feedback__option-list-item:first-child {
|
|
136
|
-
|
|
175
|
+
@include govuk-media-query($from: mobile) {
|
|
176
|
+
margin-right: govuk-spacing(4);
|
|
177
|
+
}
|
|
137
178
|
}
|
|
138
179
|
|
|
139
180
|
// Feedback form styles
|
|
@@ -206,15 +247,8 @@
|
|
|
206
247
|
}
|
|
207
248
|
|
|
208
249
|
.gem-c-feedback__close {
|
|
209
|
-
@include govuk-link-common;
|
|
210
|
-
@include govuk-link-style-default;
|
|
211
|
-
@include govuk-font(19);
|
|
212
250
|
float: right;
|
|
213
251
|
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
|
|
214
|
-
|
|
215
|
-
@include govuk-media-query($from: tablet) {
|
|
216
|
-
padding-top: 0;
|
|
217
|
-
}
|
|
218
252
|
}
|
|
219
253
|
|
|
220
254
|
.gem-c-feedback__email-link {
|
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
@include govuk-text-colour;
|
|
4
4
|
position: relative;
|
|
5
5
|
margin-bottom: govuk-spacing(6);
|
|
6
|
+
display: flex;
|
|
7
|
+
display: -ms-flexbox;
|
|
8
|
+
flex-direction: column-reverse;
|
|
9
|
+
-ms-flex-direction: column-reverse;
|
|
10
|
+
|
|
11
|
+
@include govuk-media-query($from: mobile, $until: tablet) {
|
|
12
|
+
display: block;
|
|
13
|
+
|
|
14
|
+
.gem-c-image-card__text-wrapper {
|
|
15
|
+
float: right;
|
|
16
|
+
padding-left: 0;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.gem-c-image-card__header-and-context-wrapper {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column-reverse;
|
|
24
|
+
-ms-flex-direction: column-reverse;
|
|
6
25
|
}
|
|
7
26
|
|
|
8
27
|
.gem-c-image-card__image-wrapper {
|
|
@@ -10,6 +29,7 @@
|
|
|
10
29
|
|
|
11
30
|
@include govuk-media-query($from: tablet) {
|
|
12
31
|
margin-bottom: govuk-spacing(2);
|
|
32
|
+
height: 100%;
|
|
13
33
|
}
|
|
14
34
|
|
|
15
35
|
+ .gem-c-image-card__text-wrapper {
|
|
@@ -135,7 +155,11 @@
|
|
|
135
155
|
}
|
|
136
156
|
|
|
137
157
|
.gem-c-image-card--large.gem-c-image-card {
|
|
158
|
+
display: flex;
|
|
138
159
|
margin: 0 0 govuk-spacing(6) 0;
|
|
160
|
+
@include govuk-media-query($from: tablet) {
|
|
161
|
+
display: block;
|
|
162
|
+
}
|
|
139
163
|
}
|
|
140
164
|
|
|
141
165
|
.gem-c-image-card--large {
|
|
@@ -161,6 +185,7 @@
|
|
|
161
185
|
overflow: hidden;
|
|
162
186
|
|
|
163
187
|
@include govuk-media-query($from: tablet) {
|
|
188
|
+
float: right;
|
|
164
189
|
padding: 0 govuk-spacing(3);
|
|
165
190
|
margin-bottom: 0;
|
|
166
191
|
}
|
|
@@ -180,3 +205,12 @@
|
|
|
180
205
|
@include govuk-font(19);
|
|
181
206
|
}
|
|
182
207
|
}
|
|
208
|
+
|
|
209
|
+
.gem-c-image-card--no-image {
|
|
210
|
+
.gem-c-image-card__text-wrapper {
|
|
211
|
+
@include govuk-media-query($from: mobile, $until: tablet) {
|
|
212
|
+
float: left;
|
|
213
|
+
padding: 0 govuk-spacing(3);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<%-
|
|
2
2
|
cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
|
|
3
|
-
aria_label ||=
|
|
3
|
+
aria_label ||= "Contents"
|
|
4
4
|
format_numbers ||= false
|
|
5
|
+
title_lang ||= false
|
|
6
|
+
title = local_assigns[:title].presence || t("components.contents_list.contents")
|
|
5
7
|
hide_title ||= false
|
|
6
|
-
|
|
7
8
|
brand ||= false
|
|
8
9
|
brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
|
|
9
10
|
|
|
@@ -21,7 +22,13 @@
|
|
|
21
22
|
}
|
|
22
23
|
) do %>
|
|
23
24
|
<% unless hide_title %>
|
|
24
|
-
|
|
25
|
+
<%= content_tag(
|
|
26
|
+
:h2,
|
|
27
|
+
class: "gem-c-contents-list__title",
|
|
28
|
+
lang: title_lang.presence
|
|
29
|
+
) do %>
|
|
30
|
+
<%= title %>
|
|
31
|
+
<% end %>
|
|
25
32
|
<% end %>
|
|
26
33
|
|
|
27
34
|
<ol class="gem-c-contents-list__list">
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
%>
|
|
16
16
|
<% if items.any? %>
|
|
17
17
|
<% unless within_multitype_list %>
|
|
18
|
-
<
|
|
18
|
+
<ul class="<%= classes %>">
|
|
19
19
|
<% end %>
|
|
20
20
|
<% items.each do |item| %>
|
|
21
21
|
<% highlight_class = " gem-c-document-list__item--highlight" if item[:highlight] %>
|
|
@@ -112,6 +112,6 @@
|
|
|
112
112
|
</li>
|
|
113
113
|
<% end %>
|
|
114
114
|
<% unless within_multitype_list %>
|
|
115
|
-
</
|
|
115
|
+
</ul>
|
|
116
116
|
<% end %>
|
|
117
117
|
<% end %>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
active ||= nil
|
|
3
3
|
%>
|
|
4
4
|
|
|
5
|
-
<nav id="proposition-menu" class="no-proposition-name gem-c-government-navigation">
|
|
5
|
+
<nav id="proposition-menu" class="no-proposition-name gem-c-government-navigation" aria-label="Departments and policy navigation">
|
|
6
6
|
<ul id="proposition-links">
|
|
7
7
|
<li>
|
|
8
8
|
<a class="<%= 'active' if active == 'departments' %>" href="/government/organisations">
|
|
@@ -3,32 +3,32 @@
|
|
|
3
3
|
brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
|
|
4
4
|
card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
|
|
5
5
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
6
|
+
classes = "gem-c-image-card"
|
|
7
|
+
classes << " gem-c-image-card--large" if card_helper.large
|
|
8
|
+
classes << " gem-c-image-card--no-image" unless defined?(image_src)
|
|
6
9
|
%>
|
|
7
10
|
<% if card_helper.href || card_helper.extra_links.any? %>
|
|
8
|
-
<div class="
|
|
11
|
+
<div class="<%= classes %> <%= brand_helper.brand_class %>"
|
|
9
12
|
<%= "data-module=track-click" if card_helper.is_tracking? %>
|
|
10
13
|
<%= "lang=#{card_helper.lang}" if card_helper.lang %>>
|
|
11
|
-
<%= card_helper.image %>
|
|
12
|
-
|
|
13
14
|
<div class="gem-c-image-card__text-wrapper">
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
%>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
15
|
+
<div class="gem-c-image-card__header-and-context-wrapper">
|
|
16
|
+
<% if card_helper.heading_text %>
|
|
17
|
+
<%= content_tag(shared_helper.get_heading_level,
|
|
18
|
+
class: "gem-c-image-card__title") do %>
|
|
19
|
+
<% if card_helper.href %>
|
|
20
|
+
<%= link_to card_helper.heading_text, card_helper.href,
|
|
21
|
+
class: "gem-c-image-card__title-link #{brand_helper.color_class}",
|
|
22
|
+
data: card_helper.href_data_attributes
|
|
23
|
+
%>
|
|
24
|
+
<% else %>
|
|
25
|
+
<%= card_helper.heading_text %>
|
|
26
|
+
<% end %>
|
|
27
|
+
<% end %>
|
|
27
28
|
<% end %>
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
<%= card_helper.context %>
|
|
30
|
+
</div>
|
|
30
31
|
<%= card_helper.description %>
|
|
31
|
-
|
|
32
32
|
<% if card_helper.extra_links.any? %>
|
|
33
33
|
<ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_links_no_indent %>">
|
|
34
34
|
<% card_helper.extra_links.each do |link| %>
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
<% end %>
|
|
42
42
|
</ul>
|
|
43
43
|
<% end %>
|
|
44
|
-
|
|
45
44
|
<% if card_helper.metadata %>
|
|
46
45
|
<p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
|
|
47
46
|
<% end %>
|
|
48
47
|
</div>
|
|
48
|
+
<%= card_helper.image %>
|
|
49
49
|
</div>
|
|
50
50
|
<% end %>
|
|
@@ -56,13 +56,15 @@
|
|
|
56
56
|
<% if sl_helper.feed_link_box_value %>
|
|
57
57
|
<div class="gem-c-subscription-links__feed-box js-hidden" id="<%= sl_helper.feed_box_id %>">
|
|
58
58
|
<p class="gem-c-subscription-links__feed-hidden-description visuallyhidden"><%= sl_helper.feed_link_text %></p>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
<div lang="en">
|
|
60
|
+
<%= render "govuk_publishing_components/components/input", {
|
|
61
|
+
label: {
|
|
62
|
+
text: "Copy and paste this URL into your feed reader"
|
|
63
|
+
},
|
|
64
|
+
name: "feed-reader-box",
|
|
65
|
+
value: feed_link_box_value
|
|
66
|
+
} %>
|
|
67
|
+
</div>
|
|
66
68
|
</div>
|
|
67
69
|
<% end %>
|
|
68
70
|
<% end %>
|
|
@@ -17,9 +17,7 @@ accessibility_criteria: |
|
|
|
17
17
|
- inform the user how many items are in the list
|
|
18
18
|
- convey the content structure
|
|
19
19
|
- indicate the current page when contents span different pages, and not link to itself
|
|
20
|
-
|
|
21
|
-
The contents list may:
|
|
22
|
-
- include an aria-label to contextualise the list if helpful
|
|
20
|
+
- include an aria-label to contextualise the list
|
|
23
21
|
|
|
24
22
|
Links with formatted numbers must separate the number and text with a space for correct screen reader pronunciation. This changes pronunciation from "1 dot Item" to "1 Item".
|
|
25
23
|
shared_accessibility_criteria:
|
|
@@ -67,8 +65,8 @@ examples:
|
|
|
67
65
|
active: true
|
|
68
66
|
- href: "#third-thing"
|
|
69
67
|
text: Third thing
|
|
70
|
-
|
|
71
|
-
description: 'An aria-label string
|
|
68
|
+
with_custom_aria_label:
|
|
69
|
+
description: 'An aria-label string should be used to contextualise the navigation for assistive technology. Defaults to "Contents" if aria-label is not passed.'
|
|
72
70
|
data:
|
|
73
71
|
aria_label: "Pages in this guide"
|
|
74
72
|
contents:
|
|
@@ -217,3 +215,28 @@ examples:
|
|
|
217
215
|
text: Guidance and regulation
|
|
218
216
|
- href: "#third-thing"
|
|
219
217
|
text: Consultations
|
|
218
|
+
with_a_custom_title:
|
|
219
|
+
description: Override the default title of "Contents" with a custom title
|
|
220
|
+
data:
|
|
221
|
+
title: "On this page"
|
|
222
|
+
contents:
|
|
223
|
+
- href: "#first-thing"
|
|
224
|
+
text: First thing
|
|
225
|
+
- href: "#second-thing"
|
|
226
|
+
text: Second thing
|
|
227
|
+
- href: "#third-thing"
|
|
228
|
+
text: Third thing
|
|
229
|
+
with_a_custom_title_locale:
|
|
230
|
+
description: |
|
|
231
|
+
This component is often used on translated pages that don’t have a translation for the title of the contents list. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.
|
|
232
|
+
|
|
233
|
+
The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.
|
|
234
|
+
data:
|
|
235
|
+
title_lang: "cy"
|
|
236
|
+
contents:
|
|
237
|
+
- href: "#first-thing"
|
|
238
|
+
text: First thing
|
|
239
|
+
- href: "#second-thing"
|
|
240
|
+
text: Second thing
|
|
241
|
+
- href: "#third-thing"
|
|
242
|
+
text: Third thing
|
|
@@ -4,13 +4,14 @@
|
|
|
4
4
|
data-track-category="Onsite Feedback"
|
|
5
5
|
data-track-action="GOV.UK Send Form"
|
|
6
6
|
method="post">
|
|
7
|
-
<
|
|
8
|
-
class="gem-c-feedback__close gem-c-feedback__js-show js-close-form"
|
|
7
|
+
<button
|
|
8
|
+
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
|
|
9
9
|
data-track-category="Onsite Feedback"
|
|
10
10
|
data-track-action="GOV.UK Close Form"
|
|
11
11
|
aria-controls="something-is-wrong"
|
|
12
|
-
aria-expanded="true"
|
|
13
|
-
|
|
12
|
+
aria-expanded="true">
|
|
13
|
+
<%= t("components.feedback.close", default: "Close") %>
|
|
14
|
+
</button>
|
|
14
15
|
|
|
15
16
|
<div class="govuk-grid-row">
|
|
16
17
|
<div class="govuk-grid-column-two-thirds">
|
|
@@ -4,13 +4,14 @@
|
|
|
4
4
|
data-track-category="yesNoFeedbackForm"
|
|
5
5
|
data-track-action="Send Form"
|
|
6
6
|
method="post">
|
|
7
|
-
<
|
|
8
|
-
class="gem-c-feedback__close js-close-form"
|
|
7
|
+
<button
|
|
8
|
+
class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
|
|
9
9
|
data-track-category="yesNoFeedbackForm"
|
|
10
10
|
data-track-action="ffFormClose"
|
|
11
11
|
aria-controls="page-is-not-useful"
|
|
12
|
-
aria-expanded="true"
|
|
13
|
-
|
|
12
|
+
aria-expanded="true">
|
|
13
|
+
<%= t("components.feedback.close", default: "Close") %>
|
|
14
|
+
</button>
|
|
14
15
|
|
|
15
16
|
<div class="govuk-grid-row">
|
|
16
17
|
<div class="govuk-grid-column-two-thirds" id="survey-wrapper">
|
|
@@ -6,44 +6,20 @@
|
|
|
6
6
|
<div class="gem-c-feedback__prompt-questions js-prompt-questions">
|
|
7
7
|
<h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful", default: "Is this page useful?") %></h2>
|
|
8
8
|
<!-- Maybe button exists only to try and capture clicks by bots -->
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
'track-action' => 'ffMaybeClick'
|
|
14
|
-
},
|
|
15
|
-
'aria-expanded': false,
|
|
16
|
-
role: 'button',
|
|
17
|
-
style: 'display: none;',
|
|
18
|
-
hidden: 'hidden',
|
|
19
|
-
'aria-hidden': 'true',
|
|
20
|
-
} %>
|
|
9
|
+
<button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link" data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" style="display: none" hidden="hidden" aria-hidden="true">
|
|
10
|
+
<%= t("components.feedback.maybe", default: "Maybe") %>
|
|
11
|
+
</button>
|
|
12
|
+
|
|
21
13
|
<ul class="gem-c-feedback__option-list">
|
|
22
14
|
<li class="gem-c-feedback__option-list-item">
|
|
23
|
-
|
|
24
|
-
class: 'gem-c-feedback__prompt-link js-page-is-useful',
|
|
25
|
-
data: {
|
|
26
|
-
'track-category' => 'yesNoFeedbackForm',
|
|
27
|
-
'track-action' => 'ffYesClick'
|
|
28
|
-
},
|
|
29
|
-
role: 'button',
|
|
30
|
-
} do %>
|
|
15
|
+
<button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick">
|
|
31
16
|
<%= t("components.feedback.yes", default: "Yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful", default: "this page is useful") %></span>
|
|
32
|
-
|
|
17
|
+
</button>
|
|
33
18
|
</li>
|
|
34
19
|
<li class="gem-c-feedback__option-list-item">
|
|
35
|
-
|
|
36
|
-
class: 'gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful',
|
|
37
|
-
data: {
|
|
38
|
-
'track-category' => 'yesNoFeedbackForm',
|
|
39
|
-
'track-action' => 'ffNoClick'
|
|
40
|
-
},
|
|
41
|
-
'aria-controls': 'page-is-not-useful',
|
|
42
|
-
'aria-expanded': false,
|
|
43
|
-
role: 'button',
|
|
44
|
-
} do %>
|
|
20
|
+
<button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false">
|
|
45
21
|
<%= t("components.feedback.no", default: "No") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful", default: "this page is not useful") %></span>
|
|
46
|
-
|
|
22
|
+
</button>
|
|
47
23
|
</li>
|
|
48
24
|
</ul>
|
|
49
25
|
</div>
|
|
@@ -51,17 +27,8 @@
|
|
|
51
27
|
<%= t("components.feedback.thank_you_for_feedback", default: "Thank you for your feedback") %>
|
|
52
28
|
</div>
|
|
53
29
|
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions">
|
|
54
|
-
|
|
55
|
-
class: 'gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong',
|
|
56
|
-
data: {
|
|
57
|
-
'track-category' => 'Onsite Feedback',
|
|
58
|
-
'track-action' => 'GOV.UK Open Form'
|
|
59
|
-
},
|
|
60
|
-
'aria-controls': 'something-is-wrong',
|
|
61
|
-
'aria-expanded': false,
|
|
62
|
-
role: 'button',
|
|
63
|
-
} do %>
|
|
30
|
+
<button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
|
|
64
31
|
<%= t("components.feedback.anything_wrong", default: "Is there anything wrong with this page?") %>
|
|
65
|
-
|
|
32
|
+
</button>
|
|
66
33
|
</div>
|
|
67
34
|
</div>
|
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: 21.
|
|
4
|
+
version: 21.67.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: 2020-09-
|
|
11
|
+
date: 2020-09-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|
|
@@ -156,14 +156,14 @@ dependencies:
|
|
|
156
156
|
requirements:
|
|
157
157
|
- - "~>"
|
|
158
158
|
- !ruby/object:Gem::Version
|
|
159
|
-
version: '
|
|
159
|
+
version: '2'
|
|
160
160
|
type: :development
|
|
161
161
|
prerelease: false
|
|
162
162
|
version_requirements: !ruby/object:Gem::Requirement
|
|
163
163
|
requirements:
|
|
164
164
|
- - "~>"
|
|
165
165
|
- !ruby/object:Gem::Version
|
|
166
|
-
version: '
|
|
166
|
+
version: '2'
|
|
167
167
|
- !ruby/object:Gem::Dependency
|
|
168
168
|
name: jasmine
|
|
169
169
|
requirement: !ruby/object:Gem::Requirement
|