govuk_publishing_components 21.38.5 → 21.39.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/stylesheets/govuk_publishing_components/components/_cookie-banner.scss +24 -0
- data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb +43 -24
- data/app/views/govuk_publishing_components/components/docs/cookie_banner.yml +21 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ff2fe73b82ef71aeb0ce329e0fb6ab6bb3df3fa73fd537fb0e536d957bb87092
|
|
4
|
+
data.tar.gz: 5340063122d7e758adf2d00c68812b79857aa5964b31d22d44ff584da4358018
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8c04af35d200c2d4b9c0c62f478e0e412972213fc2d68ba5419903bfc822cea426c5e77f4ddf88c58685c38493cffbf222ec80007978108e7045030d684715ff
|
|
7
|
+
data.tar.gz: 47ece57365deebe9c156b22564477c982d5733414ecbfba42923eff8c7aed42dc38d0c6ddaa5279bf956170ad92266acd2a8751a05888716c1967751c425f7bc
|
|
@@ -77,6 +77,7 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
|
|
|
77
77
|
|
|
78
78
|
@include govuk-media-query($from: desktop) {
|
|
79
79
|
max-width: 90%;
|
|
80
|
+
margin-bottom: 0;
|
|
80
81
|
}
|
|
81
82
|
}
|
|
82
83
|
|
|
@@ -106,6 +107,24 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
|
|
|
106
107
|
}
|
|
107
108
|
}
|
|
108
109
|
|
|
110
|
+
.gem-c-cookie-banner__buttons--flex {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-wrap: wrap;
|
|
113
|
+
align-items: baseline;
|
|
114
|
+
|
|
115
|
+
.govuk-button {
|
|
116
|
+
flex-grow: 1;
|
|
117
|
+
flex-basis: 10rem;
|
|
118
|
+
margin-right: govuk-spacing(3);
|
|
119
|
+
margin-bottom: govuk-spacing(3);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.gem-c-cookie-banner__link {
|
|
123
|
+
flex-grow: 1;
|
|
124
|
+
display: inline-block;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
109
128
|
// Override the styles from govuk_template
|
|
110
129
|
// scss-lint:disable IdSelector
|
|
111
130
|
// sass-lint:disable no-ids
|
|
@@ -130,6 +149,11 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
|
|
|
130
149
|
margin: 0 0 govuk-spacing(2) 0;
|
|
131
150
|
}
|
|
132
151
|
|
|
152
|
+
.gem-c-cookie-banner__confirmation-message {
|
|
153
|
+
@include govuk-media-query($from: desktop) {
|
|
154
|
+
margin-bottom: 0;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
133
157
|
}
|
|
134
158
|
// sass-lint:enable no-ids
|
|
135
159
|
// scss-lint:enable IdSelector
|
|
@@ -1,51 +1,70 @@
|
|
|
1
1
|
<%
|
|
2
2
|
id ||= 'global-cookie-message'
|
|
3
|
+
title ||= "Tell us whether you accept cookies"
|
|
3
4
|
text ||= raw("We use <a class='govuk-link' href='/help/cookies'>cookies to collect information</a> about how you use GOV.UK. We use this information to make the website work as well as possible and improve government services.")
|
|
4
5
|
cookie_preferences_href ||= "/help/cookies"
|
|
6
|
+
confirmation_message ||= raw("You’ve accepted all cookies. You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
|
|
7
|
+
services_cookies ||= nil
|
|
5
8
|
%>
|
|
6
9
|
|
|
7
10
|
<div id="<%= id %>" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
|
|
8
11
|
<div class="gem-c-cookie-banner__wrapper govuk-width-container">
|
|
9
12
|
<div class="govuk-grid-row">
|
|
10
|
-
<div class="
|
|
13
|
+
<div class="govuk-grid-column-two-thirds">
|
|
11
14
|
<div class="gem-c-cookie-banner__message">
|
|
12
|
-
<
|
|
15
|
+
<h2 class="govuk-heading-m"><%= title %></h2>
|
|
13
16
|
<p class="govuk-body"><%= text %></p>
|
|
14
17
|
</div>
|
|
15
|
-
|
|
16
|
-
<div class="gem-c-cookie-
|
|
18
|
+
<% if services_cookies %>
|
|
19
|
+
<div class="gem-c-cookie-banner__buttons gem-c-cookie-banner__buttons--flex">
|
|
17
20
|
<%= render "govuk_publishing_components/components/button", {
|
|
18
|
-
text:
|
|
21
|
+
text: services_cookies.dig(:yes, :text) || "Yes",
|
|
19
22
|
inline_layout: true,
|
|
20
|
-
data_attributes: {
|
|
21
|
-
module: "track-click",
|
|
22
|
-
"accept-cookies": "true",
|
|
23
|
-
"track-category": "cookieBanner",
|
|
24
|
-
"track-action": "Cookie banner accepted"
|
|
25
|
-
}
|
|
23
|
+
data_attributes: { module: "track-click", "accept-cookies": "true", }.merge(services_cookies.dig(:yes, :data_attributes) || {})
|
|
26
24
|
} %>
|
|
27
|
-
</div>
|
|
28
|
-
<div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-settings govuk-grid-column-full govuk-grid-column-one-half-from-desktop">
|
|
29
25
|
<%= render "govuk_publishing_components/components/button", {
|
|
30
|
-
text:
|
|
31
|
-
href: cookie_preferences_href,
|
|
26
|
+
text: services_cookies.dig(:no, :text) || "No",
|
|
32
27
|
inline_layout: true,
|
|
33
|
-
data_attributes: {
|
|
34
|
-
module: "track-click",
|
|
35
|
-
"track-category": "cookieBanner",
|
|
36
|
-
"track-action": "Cookie banner settings clicked"
|
|
37
|
-
}
|
|
28
|
+
data_attributes: { module: "track-click", "hide-cookie-banner": "true", }.merge(services_cookies.dig(:no, :data_attributes) || {})
|
|
38
29
|
} %>
|
|
30
|
+
<% if services_cookies[:cookie_preferences] %>
|
|
31
|
+
<%= link_to services_cookies.dig(:cookie_preferences, :text), services_cookies.dig(:cookie_preferences, :href), class: "gem-c-cookie-banner__link govuk-link" %>
|
|
32
|
+
<% end %>
|
|
39
33
|
</div>
|
|
40
|
-
|
|
34
|
+
<% else %>
|
|
35
|
+
<div class="gem-c-cookie-banner__buttons">
|
|
36
|
+
<div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-accept govuk-grid-column-full govuk-grid-column-one-half-from-desktop">
|
|
37
|
+
<%= render "govuk_publishing_components/components/button", {
|
|
38
|
+
text: "Accept all cookies",
|
|
39
|
+
inline_layout: true,
|
|
40
|
+
data_attributes: {
|
|
41
|
+
module: "track-click",
|
|
42
|
+
"accept-cookies": "true",
|
|
43
|
+
"track-category": "cookieBanner",
|
|
44
|
+
"track-action": "Cookie banner accepted"
|
|
45
|
+
}
|
|
46
|
+
} %>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-settings govuk-grid-column-full govuk-grid-column-one-half-from-desktop">
|
|
49
|
+
<%= render "govuk_publishing_components/components/button", {
|
|
50
|
+
text: "Set cookie preferences",
|
|
51
|
+
href: cookie_preferences_href,
|
|
52
|
+
inline_layout: true,
|
|
53
|
+
data_attributes: {
|
|
54
|
+
module: "track-click",
|
|
55
|
+
"track-category": "cookieBanner",
|
|
56
|
+
"track-action": "Cookie banner settings clicked"
|
|
57
|
+
}
|
|
58
|
+
} %>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<% end %>
|
|
41
62
|
</div>
|
|
42
63
|
</div>
|
|
43
64
|
</div>
|
|
44
65
|
|
|
45
66
|
<div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1">
|
|
46
|
-
<p class="gem-c-cookie-banner__confirmation-message">
|
|
47
|
-
You’ve accepted all cookies. You can <a class="govuk-link" href="<%= cookie_preferences_href %>" data-module="track-click" data-track-category="cookieBanner" data-track-action="Cookie banner settings clicked from confirmation">change your cookie settings</a> at any time.
|
|
48
|
-
</p>
|
|
67
|
+
<p class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></p>
|
|
49
68
|
<button class="gem-c-cookie-banner__hide-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide</button>
|
|
50
69
|
</div>
|
|
51
70
|
</div>
|
|
@@ -13,9 +13,29 @@ accessibility_excluded_rules:
|
|
|
13
13
|
examples:
|
|
14
14
|
default:
|
|
15
15
|
data: {}
|
|
16
|
-
|
|
16
|
+
with_custom_content:
|
|
17
17
|
data:
|
|
18
|
+
title: "Can we store analytics cookies on your device?"
|
|
18
19
|
text: "This is some custom text in my cookie banner which lets users know what we're using cookies for. I can also include a link to the <a class='govuk-link' href='/cookies'>cookies page</a>"
|
|
20
|
+
confirmation_message: "You’ve accepted all cookies."
|
|
19
21
|
with_custom_cookie_preferences_href:
|
|
20
22
|
data:
|
|
21
23
|
cookie_preferences_href: "/cookies"
|
|
24
|
+
in_services_asking_for_analytics_only:
|
|
25
|
+
description: Use this type of banner in your service if it only uses cookies for analytics.
|
|
26
|
+
data:
|
|
27
|
+
title: Can we store analytics cookies on your device?
|
|
28
|
+
text: Analytics cookies help us understand how our website is being used.
|
|
29
|
+
confirmation_message: You’ve accepted all cookies. You can <a class='govuk-link' href='/cookies'>change your cookie settings</a> at any time.
|
|
30
|
+
services_cookies:
|
|
31
|
+
"yes":
|
|
32
|
+
text: "Yes"
|
|
33
|
+
data_attributes:
|
|
34
|
+
"track-category": "cookieBanner"
|
|
35
|
+
"no":
|
|
36
|
+
text: "No"
|
|
37
|
+
data_attributes:
|
|
38
|
+
"track-category": "cookieBanner"
|
|
39
|
+
cookie_preferences:
|
|
40
|
+
text: How we use cookies
|
|
41
|
+
href: "/cookies"
|