govuk_publishing_components 21.66.3 → 21.68.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +6 -1
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +15 -3
- data/app/assets/javascripts/govuk_publishing_components/lib/select.js +48 -45
- data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +63 -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 +9 -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 +25 -0
- data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml +0 -9
- 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 +11 -44
- data/config/locales/en.yml +1 -1
- data/lib/govuk_publishing_components/presenters/organisation_logo_helper.rb +1 -2
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +5 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c5472741da244e97899f84ef1a0e35c9aee688ae1f7f2f02f8090dc74c92b6b1
|
|
4
|
+
data.tar.gz: 936ca8437c60e546170a29792520431d7498d05198063d06d4181885b8db001c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 479712e62c490344d7c916961ca9ec6416e614aef2d8012a680f6df4da57f92aa4d3045e042e7b359d032505c365187bdd8889a67d046b2849d6af53717cc757
|
|
7
|
+
data.tar.gz: 07fff22879ff514527f9d1da0162826060a1d671428d3bec15c75c629e99edb920c70c6986071220b41e97ca02786765bcd16894ebe67868081c132022b70e08
|
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.
|
|
@@ -58,6 +59,10 @@ bundle install
|
|
|
58
59
|
yarn install
|
|
59
60
|
```
|
|
60
61
|
|
|
62
|
+
### Running a local app with a local gem
|
|
63
|
+
|
|
64
|
+
The GDS Developer Docs has a [guide on local frontend development](https://docs.publishing.service.gov.uk/manual/local-frontend-development.html) that covers setting up a local app to use the local version of the components gem in Docker and using the `./startup.sh` script.
|
|
65
|
+
|
|
61
66
|
### Running tests
|
|
62
67
|
|
|
63
68
|
The default rake task runs all the linting and test tasks:
|
|
@@ -80,9 +80,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
80
80
|
|
|
81
81
|
if (!thisel.querySelectorAll('.js-toggle-link').length) {
|
|
82
82
|
var span = document.createElement('span')
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
var showHideSpan = document.createElement('span')
|
|
84
|
+
var commaSpan = document.createElement('span')
|
|
85
|
+
var thisSectionSpan = document.createElement('span')
|
|
86
|
+
|
|
87
|
+
showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link'
|
|
88
|
+
commaSpan.className = 'govuk-visually-hidden'
|
|
89
|
+
thisSectionSpan.className = 'govuk-visually-hidden'
|
|
90
|
+
|
|
91
|
+
commaSpan.innerHTML = ', '
|
|
92
|
+
thisSectionSpan.innerHTML = ' this section'
|
|
93
|
+
|
|
94
|
+
span.appendChild(commaSpan)
|
|
95
|
+
span.appendChild(showHideSpan)
|
|
96
|
+
span.appendChild(thisSectionSpan)
|
|
97
|
+
|
|
86
98
|
thisel.querySelectorAll('.js-step-title-button')[0].appendChild(span)
|
|
87
99
|
}
|
|
88
100
|
}
|
|
@@ -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: 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,34 @@
|
|
|
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
|
+
background: transparent;
|
|
117
|
+
box-shadow: 0 2px 0 govuk-colour("white");
|
|
118
|
+
border: 1px govuk-colour("white") solid;
|
|
119
|
+
min-width: 100%;
|
|
120
|
+
|
|
121
|
+
&:hover {
|
|
122
|
+
// backup style for browsers that don't support rgba
|
|
123
|
+
background: govuk-colour("black");
|
|
124
|
+
background: rgba(govuk-colour("black"), .2);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@include govuk-media-query($from: mobile) {
|
|
128
|
+
min-width: 100px;
|
|
129
|
+
margin-bottom: 0;
|
|
130
|
+
}
|
|
89
131
|
|
|
90
132
|
@include govuk-media-query($from: tablet) {
|
|
91
133
|
@include govuk-font(16);
|
|
@@ -116,24 +158,31 @@
|
|
|
116
158
|
}
|
|
117
159
|
|
|
118
160
|
.gem-c-feedback__option-list {
|
|
119
|
-
display: inline-block;
|
|
120
161
|
list-style-type: none;
|
|
121
162
|
margin: 0;
|
|
122
163
|
padding: 0;
|
|
123
|
-
margin-right: govuk-spacing(2);
|
|
124
164
|
margin-top: govuk-spacing(2);
|
|
125
165
|
|
|
166
|
+
@include govuk-media-query($from: mobile) {
|
|
167
|
+
display: inline-block;
|
|
168
|
+
margin-right: govuk-spacing(2);
|
|
169
|
+
}
|
|
170
|
+
|
|
126
171
|
@include govuk-media-query($from: tablet) {
|
|
127
172
|
margin-top: 0;
|
|
128
173
|
}
|
|
129
174
|
}
|
|
130
175
|
|
|
131
176
|
.gem-c-feedback__option-list-item {
|
|
132
|
-
|
|
177
|
+
@include govuk-media-query($from: mobile) {
|
|
178
|
+
display: inline-block;
|
|
179
|
+
}
|
|
133
180
|
}
|
|
134
181
|
|
|
135
182
|
.gem-c-feedback__option-list-item:first-child {
|
|
136
|
-
|
|
183
|
+
@include govuk-media-query($from: mobile) {
|
|
184
|
+
margin-right: govuk-spacing(4);
|
|
185
|
+
}
|
|
137
186
|
}
|
|
138
187
|
|
|
139
188
|
// Feedback form styles
|
|
@@ -206,15 +255,8 @@
|
|
|
206
255
|
}
|
|
207
256
|
|
|
208
257
|
.gem-c-feedback__close {
|
|
209
|
-
@include govuk-link-common;
|
|
210
|
-
@include govuk-link-style-default;
|
|
211
|
-
@include govuk-font(19);
|
|
212
258
|
float: right;
|
|
213
259
|
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
|
|
214
|
-
|
|
215
|
-
@include govuk-media-query($from: tablet) {
|
|
216
|
-
padding-top: 0;
|
|
217
|
-
}
|
|
218
260
|
}
|
|
219
261
|
|
|
220
262
|
.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
|
+
}
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
|
|
3
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">
|
|
@@ -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 %>
|
|
@@ -215,3 +215,28 @@ examples:
|
|
|
215
215
|
text: Guidance and regulation
|
|
216
216
|
- href: "#third-thing"
|
|
217
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
|
|
@@ -191,12 +191,3 @@ examples:
|
|
|
191
191
|
brand: cabinet-office
|
|
192
192
|
crest: 'single-identity'
|
|
193
193
|
inline: true
|
|
194
|
-
with-explicit-language:
|
|
195
|
-
description: The language attribute on the name of the organisation can be set if required. If this option is not passed, no lang attribute is set.
|
|
196
|
-
data:
|
|
197
|
-
organisation:
|
|
198
|
-
name: Tŷ'r Cwmnïau
|
|
199
|
-
url: '/government/organisations/companies-house.cy'
|
|
200
|
-
brand: department-for-business-innovation-skills
|
|
201
|
-
crest: 'single-identity'
|
|
202
|
-
lang: "cy"
|
|
@@ -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 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 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 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
|
-
|
|
56
|
-
|
|
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 %>
|
|
64
|
-
<%= t("components.feedback.anything_wrong", default: "Is there anything wrong with this page?") %>
|
|
65
|
-
<% end %>
|
|
30
|
+
<button class="govuk-button 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">
|
|
31
|
+
<%= t("components.feedback.something_wrong", default: "There is something wrong with this page") %>
|
|
32
|
+
</button>
|
|
66
33
|
</div>
|
|
67
34
|
</div>
|
data/config/locales/en.yml
CHANGED
|
@@ -44,7 +44,7 @@ en:
|
|
|
44
44
|
is_useful: "this page is useful"
|
|
45
45
|
is_not_useful: "this page is not useful"
|
|
46
46
|
thank_you_for_feedback: "Thank you for your feedback"
|
|
47
|
-
|
|
47
|
+
something_wrong: "There is something wrong with this page"
|
|
48
48
|
close: "Close"
|
|
49
49
|
help_us_improve_govuk: "Help us improve GOV.UK"
|
|
50
50
|
more_about_visit: "To help us improve GOV.UK, we’d like to know more about your visit today. We’ll send you a link to a feedback form. It will take only 2 minutes to fill in. Don’t worry we won’t send you spam or share your email address with anyone."
|
|
@@ -11,7 +11,6 @@ module GovukPublishingComponents
|
|
|
11
11
|
@url = local_assigns[:organisation][:url]
|
|
12
12
|
@crest = local_assigns[:organisation][:crest]
|
|
13
13
|
@image = local_assigns[:organisation][:image] || false
|
|
14
|
-
@lang = local_assigns[:lang] || nil
|
|
15
14
|
if @image
|
|
16
15
|
@logo_image_src = local_assigns[:organisation][:image][:url] || false
|
|
17
16
|
@logo_image_alt = local_assigns[:organisation][:image][:alt_text] || false
|
|
@@ -22,7 +21,7 @@ module GovukPublishingComponents
|
|
|
22
21
|
if image
|
|
23
22
|
image_tag(logo_image_src, alt: logo_image_alt, class: "gem-c-organisation-logo__image")
|
|
24
23
|
else
|
|
25
|
-
content_tag("span", name, class: "gem-c-organisation-logo__name"
|
|
24
|
+
content_tag("span", name, class: "gem-c-organisation-logo__name")
|
|
26
25
|
end
|
|
27
26
|
end
|
|
28
27
|
|
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.68.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-
|
|
11
|
+
date: 2020-10-08 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
|
|
@@ -1803,7 +1803,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
1803
1803
|
- !ruby/object:Gem::Version
|
|
1804
1804
|
version: '0'
|
|
1805
1805
|
requirements: []
|
|
1806
|
-
rubygems_version: 3.
|
|
1806
|
+
rubygems_version: 3.1.4
|
|
1807
1807
|
signing_key:
|
|
1808
1808
|
specification_version: 4
|
|
1809
1809
|
summary: A gem to document components in GOV.UK frontend applications
|