govuk_publishing_components 50.0.1 → 51.0.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/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-search-tracker.js +19 -10
- data/app/assets/javascripts/govuk_publishing_components/components/add-another.js +7 -5
- data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -3
- data/app/assets/javascripts/govuk_publishing_components/components/global-banner.js +62 -0
- data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss +38 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss +2 -9
- data/app/assets/stylesheets/govuk_publishing_components/components/_title.scss +6 -0
- data/app/views/govuk_publishing_components/audit/show.html.erb +7 -1
- data/app/views/govuk_publishing_components/component_guide/example.html.erb +8 -1
- data/app/views/govuk_publishing_components/component_guide/index.html.erb +7 -1
- data/app/views/govuk_publishing_components/component_guide/show.html.erb +8 -1
- data/app/views/govuk_publishing_components/components/_add_another.html.erb +20 -12
- data/app/views/govuk_publishing_components/components/_global_banner.html.erb +43 -0
- data/app/views/govuk_publishing_components/components/_inverse_header.html.erb +7 -1
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +6 -6
- data/app/views/govuk_publishing_components/components/_title.html.erb +0 -3
- data/app/views/govuk_publishing_components/components/docs/add_another.yml +12 -0
- data/app/views/govuk_publishing_components/components/docs/global_banner.yml +30 -0
- data/app/views/govuk_publishing_components/components/docs/inverse_header.yml +25 -1
- data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml +2 -2
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a0dc0b51ee041e20e4493a37b5b3cf50bf68a846ce49cc00489e9a0931645dc9
|
4
|
+
data.tar.gz: 8159d5f355df3530e323096ebb5db5a512c64d70b9fcf814d4608c862d4e38c2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bbb3bf9e41287521dfeb5e1ec18fa4d0f6527efcbb1824883ea49ac530f4704a6415433318eaa7dfaf064e80341ba98381e2b1b6701fdcf39ad3fe262d715fa2
|
7
|
+
data.tar.gz: c5cc280a31b9c759199d499a480132e4c799482015affa43deda585a2daa9467d0c13f1e439b8b7b470a15909eac0f909ae85a99d79a525be39e66a8318b7b40
|
@@ -61,7 +61,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
|
|
61
61
|
devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
|
62
62
|
cookie_banner: this.getBannerPresence('[data-ga4-cookie-banner]'),
|
63
63
|
intervention: this.getBannerPresence('[data-ga4-intervention-banner]'),
|
64
|
-
global_bar: this.getBannerPresence('[data-ga4-global-
|
64
|
+
global_bar: this.getBannerPresence('[data-ga4-global-banner]'),
|
65
65
|
query_string: this.getQueryString(),
|
66
66
|
search_term: this.getSearchTerm(),
|
67
67
|
tool_name: this.getToolName(),
|
@@ -14,6 +14,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
14
14
|
this.section = this.$module.dataset.ga4SearchSection
|
15
15
|
this.indexSection = this.$module.dataset.ga4SearchIndexSection
|
16
16
|
this.indexSectionCount = this.$module.dataset.ga4SearchIndexSectionCount
|
17
|
+
|
18
|
+
// At the beginning, the user has not yet interacted with any form fields
|
19
|
+
this.triggeredAction = 'unchanged'
|
17
20
|
}
|
18
21
|
|
19
22
|
init () {
|
@@ -22,7 +25,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
22
25
|
return
|
23
26
|
}
|
24
27
|
|
25
|
-
|
28
|
+
// These event handlers do not send any tracking data, they only set internal state. They are
|
29
|
+
// added here so if the user hasn't given consent yet but does so later, we do not end up with
|
30
|
+
// inconsistent module state.
|
31
|
+
this.$module.addEventListener('change', event => this.setTriggeredAction(event))
|
32
|
+
this.$module.addEventListener('input', event => this.setTriggeredAction(event))
|
26
33
|
|
27
34
|
if (window.GOVUK.getConsentCookie() && window.GOVUK.getConsentCookie().usage) {
|
28
35
|
this.startModule()
|
@@ -35,16 +42,24 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
35
42
|
this.$module.addEventListener('submit', event => this.trackSearch(event))
|
36
43
|
}
|
37
44
|
|
45
|
+
setTriggeredAction (event) {
|
46
|
+
if (event.target.type === 'search') {
|
47
|
+
this.triggeredAction = 'search'
|
48
|
+
} else if (this.triggeredAction !== 'search') {
|
49
|
+
// The 'search' action always takes precedence over the 'filter' action, so only set the
|
50
|
+
// action to 'filter' if it is not already 'search'.
|
51
|
+
this.triggeredAction = 'filter'
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
38
55
|
trackSearch () {
|
39
56
|
// The original search input may have been removed from the DOM by the autocomplete component
|
40
57
|
// if it is used, so make sure we are tracking the correct input
|
41
58
|
this.$searchInput = this.$module.querySelector('input[type="search"]')
|
42
59
|
|
43
|
-
if (this.skipTracking()) return
|
44
|
-
|
45
60
|
const data = {
|
46
61
|
event_name: 'search',
|
47
|
-
action:
|
62
|
+
action: this.triggeredAction,
|
48
63
|
|
49
64
|
type: this.type,
|
50
65
|
section: this.section,
|
@@ -80,12 +95,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
80
95
|
window.GOVUK.analyticsGa4.core.applySchemaAndSendData(data, 'event_data')
|
81
96
|
}
|
82
97
|
|
83
|
-
skipTracking () {
|
84
|
-
// Skip tracking for those events that we do not want to track: where the search term is
|
85
|
-
// present, but has not changed from its initial value
|
86
|
-
return this.searchTerm() !== '' && this.searchTerm() === this.initialKeywords
|
87
|
-
}
|
88
|
-
|
89
98
|
searchTerm () {
|
90
99
|
const { standardiseSearchTerm } = window.GOVUK.analyticsGa4.core.trackFunctions
|
91
100
|
|
@@ -49,7 +49,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
49
49
|
|
50
50
|
AddAnother.prototype.createRemoveButtons = function () {
|
51
51
|
var fieldsets =
|
52
|
-
|
52
|
+
this.module.querySelectorAll('.js-add-another__fieldset')
|
53
53
|
fieldsets.forEach(function (fieldset) {
|
54
54
|
this.createRemoveButton(fieldset, this.removeExistingFieldset.bind(this))
|
55
55
|
fieldset.querySelector('.js-add-another__destroy-checkbox').hidden = true
|
@@ -67,10 +67,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
67
67
|
legend.textContent = this.module.dataset.fieldsetLegend + ' ' + (index + 1)
|
68
68
|
}.bind(this))
|
69
69
|
|
70
|
-
this.module.
|
71
|
-
'js-add-another__remove-button
|
72
|
-
|
73
|
-
|
70
|
+
if (this.module.dataset.emptyFields === 'false') {
|
71
|
+
this.module.querySelector('.js-add-another__remove-button').classList.toggle(
|
72
|
+
'js-add-another__remove-button--hidden',
|
73
|
+
this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])').length === 1
|
74
|
+
)
|
75
|
+
}
|
74
76
|
}
|
75
77
|
|
76
78
|
AddAnother.prototype.addNewFieldset = function (event) {
|
@@ -95,9 +95,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
95
95
|
this.$module.showConfirmationMessage()
|
96
96
|
this.$module.cookieBannerConfirmationMessage.focus()
|
97
97
|
|
98
|
-
if (window.GOVUK.globalBarInit) {
|
99
|
-
window.GOVUK.globalBarInit.init()
|
100
|
-
}
|
101
98
|
if (!window.GOVUK.useSingleConsentApi) {
|
102
99
|
window.GOVUK.triggerEvent(window, 'cookie-consent')
|
103
100
|
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
//= require govuk_publishing_components/lib/cookie-functions
|
2
|
+
window.GOVUK = window.GOVUK || {}
|
3
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
4
|
+
|
5
|
+
(function (Modules) {
|
6
|
+
function GlobalBanner ($module) {
|
7
|
+
this.$module = $module
|
8
|
+
this.GLOBAL_BANNER_SEEN_COOKIE = 'global_banner_seen'
|
9
|
+
this.alwaysOn = this.$module.getAttribute('data-global-banner-permanent') === 'true'
|
10
|
+
this.bannerVersion = parseInt(this.$module.getAttribute('data-banner-version'))
|
11
|
+
}
|
12
|
+
|
13
|
+
GlobalBanner.prototype.init = function () {
|
14
|
+
// if no cookie consent just show the banner
|
15
|
+
// if there is cookie consent...
|
16
|
+
// if there's no global banner cookie or the banner should always be shown, set the cookie and show the banner
|
17
|
+
// if there is a global banner cookie, check to see if the version number matches
|
18
|
+
// if it doesn't, set the global banner cookie and count to zero, show the banner
|
19
|
+
// if it does, check the count, if less than 3 increment, show the banner
|
20
|
+
var cookieCategory = window.GOVUK.getCookieCategory(this.GLOBAL_BANNER_SEEN_COOKIE)
|
21
|
+
var cookieConsent = window.GOVUK.getConsentCookie()
|
22
|
+
|
23
|
+
if (cookieConsent && cookieConsent[cookieCategory]) {
|
24
|
+
var currentCookie = window.GOVUK.getCookie(this.GLOBAL_BANNER_SEEN_COOKIE)
|
25
|
+
|
26
|
+
if (currentCookie === null) {
|
27
|
+
this.setBannerCookie(0)
|
28
|
+
this.makeBannerVisible()
|
29
|
+
} else {
|
30
|
+
var currentCookieContents = JSON.parse(currentCookie)
|
31
|
+
var currentCookieVersion = currentCookieContents.version
|
32
|
+
|
33
|
+
if (currentCookieVersion !== this.bannerVersion) {
|
34
|
+
this.setBannerCookie(0)
|
35
|
+
this.makeBannerVisible()
|
36
|
+
} else {
|
37
|
+
var count = currentCookieContents.count
|
38
|
+
if (this.alwaysOn) {
|
39
|
+
this.makeBannerVisible()
|
40
|
+
} else if (count < 3) {
|
41
|
+
this.setBannerCookie(count + 1)
|
42
|
+
this.makeBannerVisible()
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
46
|
+
} else {
|
47
|
+
this.makeBannerVisible()
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
GlobalBanner.prototype.setBannerCookie = function (count) {
|
52
|
+
var value = JSON.stringify({ count: count, version: this.bannerVersion })
|
53
|
+
window.GOVUK.setCookie(this.GLOBAL_BANNER_SEEN_COOKIE, value, { days: 84 })
|
54
|
+
}
|
55
|
+
|
56
|
+
GlobalBanner.prototype.makeBannerVisible = function () {
|
57
|
+
this.$module.classList.add('gem-c-global-banner--visible')
|
58
|
+
this.$module.setAttribute('data-ga4-global-banner', '')
|
59
|
+
}
|
60
|
+
|
61
|
+
Modules.GlobalBanner = GlobalBanner
|
62
|
+
})(window.GOVUK.Modules)
|
@@ -22,7 +22,7 @@
|
|
22
22
|
govuk_contact_referrer: 'essential',
|
23
23
|
multivariatetest_cohort_coronavirus_extremely_vulnerable_rate_limit: 'essential',
|
24
24
|
dgu_beta_banner_dismissed: 'settings',
|
25
|
-
|
25
|
+
global_banner_seen: 'settings',
|
26
26
|
user_nation: 'settings',
|
27
27
|
'JS-Detection': 'usage',
|
28
28
|
TLSversion: 'usage',
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@import "govuk_publishing_components/individual_component_support";
|
2
|
+
|
3
|
+
.gem-c-global-banner {
|
4
|
+
background-color: #d9e7f2;
|
5
|
+
border-top: govuk-spacing(2) solid govuk-colour("blue");
|
6
|
+
display: none;
|
7
|
+
@include govuk-font(19);
|
8
|
+
|
9
|
+
.govuk-link,
|
10
|
+
.govuk-link:link {
|
11
|
+
color: govuk-colour("black");
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
.gem-c-global-banner--visible {
|
16
|
+
display: block;
|
17
|
+
}
|
18
|
+
|
19
|
+
.gem-c-global-banner__message {
|
20
|
+
margin-bottom: 0;
|
21
|
+
margin-top: 0;
|
22
|
+
padding: govuk-spacing(4) 0;
|
23
|
+
}
|
24
|
+
|
25
|
+
.gem-c-global-banner__title {
|
26
|
+
font-weight: 700;
|
27
|
+
margin-right: govuk-spacing(2);
|
28
|
+
margin-bottom: govuk-spacing(1);
|
29
|
+
|
30
|
+
&:only-child {
|
31
|
+
margin: 0;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
.gem-c-global-banner__title,
|
36
|
+
.gem-c-global-banner__text {
|
37
|
+
color: govuk-colour("black");
|
38
|
+
}
|
@@ -5,16 +5,13 @@
|
|
5
5
|
background-color: govuk-colour("blue");
|
6
6
|
color: govuk-colour("white");
|
7
7
|
margin-bottom: govuk-spacing(6);
|
8
|
-
padding:
|
8
|
+
padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
|
9
9
|
box-sizing: border-box;
|
10
10
|
}
|
11
11
|
|
12
|
-
.gem-c-inverse-
|
13
|
-
.gem-c-inverse-header .publication-header__last-changed {
|
12
|
+
.gem-c-inverse-header__subtext {
|
14
13
|
color: govuk-colour("white");
|
15
14
|
margin: 0;
|
16
|
-
// This publication-header class is injected on publication pages, really
|
17
|
-
// it should be a component class or be a component in it's own right.
|
18
15
|
@include govuk-font($size: 16, $line-height: 1.5);
|
19
16
|
}
|
20
17
|
|
@@ -24,10 +21,6 @@
|
|
24
21
|
padding-bottom: govuk-spacing(3);
|
25
22
|
}
|
26
23
|
|
27
|
-
.gem-c-inverse-header--padding-top {
|
28
|
-
padding-top: govuk-spacing(3);
|
29
|
-
}
|
30
|
-
|
31
24
|
@include govuk-media-query($media-type: print) {
|
32
25
|
.gem-c-inverse-header {
|
33
26
|
background: none;
|
@@ -5,7 +5,13 @@
|
|
5
5
|
%>
|
6
6
|
|
7
7
|
<% content_for :title, "Component audit" %>
|
8
|
-
<%= render 'govuk_publishing_components/components/
|
8
|
+
<%= render 'govuk_publishing_components/components/heading', {
|
9
|
+
text: "Components audit",
|
10
|
+
heading_level: 1,
|
11
|
+
font_size: "xl",
|
12
|
+
margin_bottom: 8
|
13
|
+
}
|
14
|
+
%>
|
9
15
|
|
10
16
|
<% applications = capture do %>
|
11
17
|
<%= render "applications" %>
|
@@ -5,7 +5,14 @@
|
|
5
5
|
<% end %>
|
6
6
|
<% end %>
|
7
7
|
|
8
|
-
<%= render 'govuk_publishing_components/components/
|
8
|
+
<%= render 'govuk_publishing_components/components/heading', {
|
9
|
+
text: @component_example.name,
|
10
|
+
context: "#{@component_doc.name} example",
|
11
|
+
heading_level: 1,
|
12
|
+
font_size: "xl",
|
13
|
+
margin_bottom: 8
|
14
|
+
}
|
15
|
+
%>
|
9
16
|
|
10
17
|
<% code_example = capture do %>
|
11
18
|
<%= render partial: "govuk_publishing_components/component_guide/component_doc/call", locals: { component_doc: @component_doc, example: @component_example } %>
|
@@ -1,4 +1,10 @@
|
|
1
|
-
<%= render 'govuk_publishing_components/components/
|
1
|
+
<%= render 'govuk_publishing_components/components/heading', {
|
2
|
+
text: GovukPublishingComponents::Config.component_guide_title,
|
3
|
+
heading_level: 1,
|
4
|
+
font_size: "xl",
|
5
|
+
margin_bottom: 8
|
6
|
+
}
|
7
|
+
%>
|
2
8
|
|
3
9
|
<div class="component-markdown">
|
4
10
|
<p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
|
@@ -5,7 +5,14 @@
|
|
5
5
|
<% end %>
|
6
6
|
<% end %>
|
7
7
|
|
8
|
-
<%= render 'govuk_publishing_components/components/
|
8
|
+
<%= render 'govuk_publishing_components/components/heading', {
|
9
|
+
text: @component_doc.name,
|
10
|
+
context: "Component",
|
11
|
+
heading_level: 1,
|
12
|
+
font_size: "xl",
|
13
|
+
margin_bottom: 8
|
14
|
+
}
|
15
|
+
%>
|
9
16
|
|
10
17
|
<div class="component-show">
|
11
18
|
<div class="govuk-grid-row">
|
@@ -4,19 +4,27 @@
|
|
4
4
|
empty ||= ""
|
5
5
|
fieldset_legend ||= ""
|
6
6
|
add_button_text ||= "Add another"
|
7
|
+
empty_fields ||= false
|
7
8
|
%>
|
8
9
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
10
|
+
<%= tag.div class: "gem-c-add-another", data: {
|
11
|
+
module: "add-another",
|
12
|
+
"add-button-text": add_button_text,
|
13
|
+
"fieldset-legend": fieldset_legend,
|
14
|
+
"empty-fields": empty_fields
|
15
|
+
} do %>
|
16
|
+
<% unless empty_fields && items.count == 0 %>
|
17
|
+
<% items.each_with_index do |item, index| %>
|
18
|
+
<%= render "govuk_publishing_components/components/fieldset", {
|
19
|
+
classes: "js-add-another__fieldset",
|
20
|
+
legend_text: "#{fieldset_legend} #{index + 1}",
|
21
|
+
heading_size: "m"
|
22
|
+
} do %>
|
23
|
+
<div class="js-add-another__destroy-checkbox">
|
24
|
+
<%= item[:destroy_checkbox] %>
|
25
|
+
</div>
|
26
|
+
<%= item[:fields] %>
|
27
|
+
<% end %>
|
20
28
|
<% end %>
|
21
29
|
<% end %>
|
22
30
|
<%= render "govuk_publishing_components/components/fieldset", {
|
@@ -26,4 +34,4 @@
|
|
26
34
|
} do %>
|
27
35
|
<%= empty %>
|
28
36
|
<% end %>
|
29
|
-
|
37
|
+
<% end %>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
<%
|
2
|
+
add_gem_component_stylesheet("global-banner")
|
3
|
+
|
4
|
+
title ||= nil
|
5
|
+
title_href ||= nil
|
6
|
+
text ||= nil
|
7
|
+
banner_version ||= nil
|
8
|
+
always_visible ||= false # if true banner is always visible & does not disappear automatically after 3 pageviews
|
9
|
+
|
10
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
11
|
+
component_helper.add_class("gem-c-global-banner govuk-!-display-none-print")
|
12
|
+
component_helper.set_id("global-banner")
|
13
|
+
component_helper.add_data_attribute({ module: "global-banner", nosnippet: "" })
|
14
|
+
component_helper.add_data_attribute({ banner_version: banner_version }) if banner_version
|
15
|
+
component_helper.add_data_attribute({ global_banner_permanent: true }) if always_visible
|
16
|
+
|
17
|
+
title_classes = %w(gem-c-global-banner__title)
|
18
|
+
title_classes << "js-call-to-action" if title_href
|
19
|
+
title_classes << "govuk-link govuk-link--no-visited-state" if title_href
|
20
|
+
|
21
|
+
ga4_data = {
|
22
|
+
event_name: "navigation",
|
23
|
+
type: "global bar",
|
24
|
+
section: title,
|
25
|
+
}.to_json
|
26
|
+
%>
|
27
|
+
<% if title && banner_version %>
|
28
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
29
|
+
<p class="gem-c-global-banner__message govuk-width-container">
|
30
|
+
<% if title_href %>
|
31
|
+
<a class="<%= title_classes.join(' ') %>" href="<%= title_href %>" data-module="ga4-link-tracker" data-ga4-link="<%= ga4_data %>"><%= title %></a>
|
32
|
+
<% else %>
|
33
|
+
<span class="<%= title_classes.join(' ') %>"><%= title %></span>
|
34
|
+
<% end %>
|
35
|
+
|
36
|
+
<% if text %>
|
37
|
+
<span class="gem-c-global-banner__text">
|
38
|
+
<%= text %>
|
39
|
+
</span>
|
40
|
+
<% end %>
|
41
|
+
</p>
|
42
|
+
<% end %>
|
43
|
+
<% end %>
|
@@ -1,14 +1,20 @@
|
|
1
1
|
<%
|
2
2
|
add_gem_component_stylesheet("inverse-header")
|
3
3
|
|
4
|
+
padding_top ||= nil
|
5
|
+
padding_bottom ||= nil
|
6
|
+
subtext ||= nil
|
7
|
+
|
4
8
|
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
5
9
|
component_helper.add_class("gem-c-inverse-header")
|
6
10
|
component_helper.add_class("gem-c-inverse-header--full-width") if local_assigns[:full_width]
|
7
|
-
component_helper.add_class("
|
11
|
+
component_helper.add_class("govuk-!-padding-top-#{padding_top}") if [*0..9].include?(padding_top)
|
12
|
+
component_helper.add_class("govuk-!-padding-bottom-#{padding_bottom}") if [*0..9].include?(padding_bottom)
|
8
13
|
%>
|
9
14
|
<% block = yield %>
|
10
15
|
<% unless block.empty? %>
|
11
16
|
<%= tag.header(**component_helper.all_attributes) do %>
|
12
17
|
<%= block %>
|
18
|
+
<%= content_tag(:p, subtext, class: "gem-c-inverse-header__subtext") if subtext %>
|
13
19
|
<% end %>
|
14
20
|
<% end %>
|
@@ -5,7 +5,7 @@
|
|
5
5
|
emergency_banner ||= nil
|
6
6
|
full_width ||= false
|
7
7
|
blue_bar ||= local_assigns.include?(:blue_bar) ? local_assigns[:blue_bar] : !full_width
|
8
|
-
|
8
|
+
global_banner ||= nil
|
9
9
|
html_lang ||= "en"
|
10
10
|
homepage ||= false
|
11
11
|
layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
|
@@ -49,10 +49,10 @@
|
|
49
49
|
# height, making the two blue bars overlap and appear as one. The class is added
|
50
50
|
# when a) there's content for the emergency or global banner *and* b) when using
|
51
51
|
# the contrained width layout.
|
52
|
-
blue_bar_dedupe = !full_width &&
|
52
|
+
blue_bar_dedupe = !full_width && global_banner.present?
|
53
53
|
body_css_classes = %w(gem-c-layout-for-public govuk-template__body)
|
54
54
|
body_css_classes << "draft" if draft_watermark
|
55
|
-
body_css_classes << "global-
|
55
|
+
body_css_classes << "global-banner-present" if global_banner.present?
|
56
56
|
|
57
57
|
blue_bar_wrapper_classes = %w()
|
58
58
|
blue_bar_wrapper_classes << "gem-c-layout-for-public__blue-bar-wrapper--#{blue_bar_background_colour}" if blue_bar_background_colour
|
@@ -137,17 +137,17 @@
|
|
137
137
|
|
138
138
|
<%= raw(emergency_banner) %>
|
139
139
|
|
140
|
-
<% if (blue_bar && !
|
140
|
+
<% if (blue_bar && !global_banner.present? && !homepage) || (blue_bar_dedupe) %>
|
141
141
|
<%= content_tag(:div, class: blue_bar_wrapper_classes) do %>
|
142
142
|
<div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
|
143
143
|
<% end %>
|
144
144
|
<% end %>
|
145
145
|
|
146
|
-
<% if
|
146
|
+
<% if global_banner.present? %>
|
147
147
|
<%= content_tag("div", {
|
148
148
|
class: blue_bar_dedupe ? "gem-c-layout-for-public__global-banner-wrapper" : nil,
|
149
149
|
}) do %>
|
150
|
-
<%= raw(
|
150
|
+
<%= raw(global_banner) %>
|
151
151
|
<% end %>
|
152
152
|
<% end %>
|
153
153
|
|
@@ -8,20 +8,17 @@
|
|
8
8
|
context_inside ||= false
|
9
9
|
|
10
10
|
inverse ||= false
|
11
|
-
local_assigns[:margin_top] ||= 8
|
12
11
|
local_assigns[:margin_bottom] ||= 8
|
13
12
|
|
14
13
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
15
14
|
|
16
15
|
classes = %w[gem-c-title]
|
17
16
|
classes << "gem-c-title--inverse" if inverse
|
18
|
-
classes << shared_helper.get_margin_top
|
19
17
|
classes << shared_helper.get_margin_bottom
|
20
18
|
|
21
19
|
heading_classes = %w[gem-c-title__text]
|
22
20
|
heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
|
23
21
|
%>
|
24
|
-
|
25
22
|
<% @context_block = capture do %>
|
26
23
|
<span class="govuk-caption-xl gem-c-title__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
|
27
24
|
<%= context %>
|
@@ -46,3 +46,15 @@ examples:
|
|
46
46
|
<label for="person_1_name" class="gem-c-label govuk-label">Full name</label>
|
47
47
|
<input class="gem-c-input govuk-input" id="person_1_name" name="person[1]name">
|
48
48
|
</div>
|
49
|
+
start_empty:
|
50
|
+
description: By default no form fields are displayed when the component loads if no content is specified
|
51
|
+
data:
|
52
|
+
fieldset_legend: "Employee"
|
53
|
+
add_button_text: "Add an employee"
|
54
|
+
empty_fields: true
|
55
|
+
items: null
|
56
|
+
empty:
|
57
|
+
<div class="govuk-form-group">
|
58
|
+
<label for="employee_1_name" class="gem-c-label govuk-label">Full name</label>
|
59
|
+
<input class="gem-c-input govuk-input" id="employee_1_name" name="employee[1]name">
|
60
|
+
</div>
|
@@ -0,0 +1,30 @@
|
|
1
|
+
name: Global banner
|
2
|
+
description: A site-wide banner used to convey important information
|
3
|
+
body: |
|
4
|
+
If a user has consented to cookies the banner will disappear after three page views, unless the `always_visible` option is used. If no cookie consent is given the banner is always shown.
|
5
|
+
|
6
|
+
The [dev docs](https://docs.publishing.service.gov.uk/manual/global-banner.html) contains further information about this component and when it should be used.
|
7
|
+
shared_accessibility_criteria:
|
8
|
+
- link
|
9
|
+
examples:
|
10
|
+
default:
|
11
|
+
data:
|
12
|
+
title: Bring photo ID to vote
|
13
|
+
banner_version: 1
|
14
|
+
with_a_link:
|
15
|
+
data:
|
16
|
+
title: Bring photo ID to vote
|
17
|
+
title_href: "https://www.gov.uk"
|
18
|
+
banner_version: 1
|
19
|
+
with_a_link_and_text:
|
20
|
+
data:
|
21
|
+
title: Bring photo ID to vote
|
22
|
+
title_href: "https://www.gov.uk"
|
23
|
+
text: Check what photo ID you'll need to vote in person in the General Election on 4 July.
|
24
|
+
banner_version: 1
|
25
|
+
always_visible:
|
26
|
+
description: With this option set the banner appears regardless of how many times it has been seen before.
|
27
|
+
data:
|
28
|
+
title: Bring photo ID to vote
|
29
|
+
banner_version: 1
|
30
|
+
always_visible: true
|
@@ -1,7 +1,7 @@
|
|
1
1
|
name: Inverse header
|
2
2
|
description: A wrapper to contain header content in white text
|
3
3
|
body: |
|
4
|
-
This component can be passed a block of template code and will wrap it in a blue header.
|
4
|
+
This component can be passed a block of template code and will wrap it in a blue header. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings but unopinionated about its contents.
|
5
5
|
|
6
6
|
If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/links/#links-on-dark-backgrounds).
|
7
7
|
uses_component_wrapper_helper: true
|
@@ -19,6 +19,19 @@ examples:
|
|
19
19
|
inverse: true
|
20
20
|
} %>
|
21
21
|
<!-- end of example content -->
|
22
|
+
with_custom_padding:
|
23
|
+
description: Custom padding can be applied as shown, using the [Design System spacing scale](https://design-system.service.gov.uk/styles/spacing/).
|
24
|
+
data:
|
25
|
+
padding_top: 6
|
26
|
+
padding_bottom: 1
|
27
|
+
block: |
|
28
|
+
<!-- example content -->
|
29
|
+
<%= render "govuk_publishing_components/components/heading", {
|
30
|
+
text: "Education, Training and Skills",
|
31
|
+
inverse: true,
|
32
|
+
margin_bottom: 0
|
33
|
+
} %>
|
34
|
+
<!-- end of example content -->
|
22
35
|
for_full_page_width:
|
23
36
|
description: "Used when the header covers the full width of the page, but it's content is in the grid layout. The left-right padding is removed to make the contents line up with the other items on the page."
|
24
37
|
data:
|
@@ -30,6 +43,17 @@ examples:
|
|
30
43
|
inverse: true
|
31
44
|
} %>
|
32
45
|
<!-- end of example content -->
|
46
|
+
with_subtext:
|
47
|
+
data:
|
48
|
+
subtext: This is some text
|
49
|
+
block: |
|
50
|
+
<!-- example content -->
|
51
|
+
<%= render "govuk_publishing_components/components/heading", {
|
52
|
+
text: "Education, Training and Skills",
|
53
|
+
inverse: true,
|
54
|
+
margin_bottom: 0
|
55
|
+
} %>
|
56
|
+
<!-- end of example content -->
|
33
57
|
html_publication_header:
|
34
58
|
description: "The inverse header component is used on HTML publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
|
35
59
|
data:
|
@@ -73,7 +73,7 @@ examples:
|
|
73
73
|
with_global_banner:
|
74
74
|
description: This allows the HTML for the global banner to be added to the page. This is only the slot for the global banner - the markup for the banner needs to be passed in.
|
75
75
|
data:
|
76
|
-
|
76
|
+
global_banner: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global banner slot</div>
|
77
77
|
with_emergency_banner:
|
78
78
|
description: This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
|
79
79
|
data:
|
@@ -82,7 +82,7 @@ examples:
|
|
82
82
|
description: Both global banner and emergency banner should be usable together.
|
83
83
|
data:
|
84
84
|
emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
|
85
|
-
|
85
|
+
global_banner: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global banner slot</div>
|
86
86
|
with_account_layout_enabled:
|
87
87
|
description: Adds account layout wrapper around the content passed in to the component
|
88
88
|
data:
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: govuk_publishing_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 51.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GOV.UK Dev
|
8
8
|
bindir: bin
|
9
9
|
cert_chain: []
|
10
|
-
date: 2025-01-
|
10
|
+
date: 2025-01-28 00:00:00.000000000 Z
|
11
11
|
dependencies:
|
12
12
|
- !ruby/object:Gem::Dependency
|
13
13
|
name: govuk_app_config
|
@@ -472,6 +472,7 @@ files:
|
|
472
472
|
- app/assets/javascripts/govuk_publishing_components/components/cross-service-header.js
|
473
473
|
- app/assets/javascripts/govuk_publishing_components/components/error-summary.js
|
474
474
|
- app/assets/javascripts/govuk_publishing_components/components/feedback.js
|
475
|
+
- app/assets/javascripts/govuk_publishing_components/components/global-banner.js
|
475
476
|
- app/assets/javascripts/govuk_publishing_components/components/govspeak.js
|
476
477
|
- app/assets/javascripts/govuk_publishing_components/components/image-card.js
|
477
478
|
- app/assets/javascripts/govuk_publishing_components/components/intervention.js
|
@@ -545,6 +546,7 @@ files:
|
|
545
546
|
- app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss
|
546
547
|
- app/assets/stylesheets/govuk_publishing_components/components/_file-upload.scss
|
547
548
|
- app/assets/stylesheets/govuk_publishing_components/components/_glance-metric.scss
|
549
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss
|
548
550
|
- app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss
|
549
551
|
- app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss
|
550
552
|
- app/assets/stylesheets/govuk_publishing_components/components/_heading.scss
|
@@ -686,6 +688,7 @@ files:
|
|
686
688
|
- app/views/govuk_publishing_components/components/_fieldset.html.erb
|
687
689
|
- app/views/govuk_publishing_components/components/_file_upload.html.erb
|
688
690
|
- app/views/govuk_publishing_components/components/_glance_metric.html.erb
|
691
|
+
- app/views/govuk_publishing_components/components/_global_banner.html.erb
|
689
692
|
- app/views/govuk_publishing_components/components/_google_tag_manager_script.html.erb
|
690
693
|
- app/views/govuk_publishing_components/components/_govspeak.html.erb
|
691
694
|
- app/views/govuk_publishing_components/components/_govspeak_html_publication.html.erb
|
@@ -781,6 +784,7 @@ files:
|
|
781
784
|
- app/views/govuk_publishing_components/components/docs/fieldset.yml
|
782
785
|
- app/views/govuk_publishing_components/components/docs/file_upload.yml
|
783
786
|
- app/views/govuk_publishing_components/components/docs/glance_metric.yml
|
787
|
+
- app/views/govuk_publishing_components/components/docs/global_banner.yml
|
784
788
|
- app/views/govuk_publishing_components/components/docs/google_tag_manager_script.yml
|
785
789
|
- app/views/govuk_publishing_components/components/docs/govspeak.yml
|
786
790
|
- app/views/govuk_publishing_components/components/docs/govspeak_html_publication.yml
|