govuk_publishing_components 21.38.5 → 21.39.0
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/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"
|