govuk_publishing_components 59.2.1 → 60.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-form-tracker.js +19 -0
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js +4 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +5 -10
- data/app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss +4 -0
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +0 -1
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +34 -15
- data/app/views/govuk_publishing_components/components/_service_navigation.html.erb +7 -4
- data/app/views/govuk_publishing_components/components/docs/layout_header.yml +25 -7
- data/app/views/govuk_publishing_components/components/docs/service_navigation.yml +35 -1
- data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +9 -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: 19ec497573718b8b4a1109fdfa230923222ab8dc09f030301e4b9749f4d1a711
|
|
4
|
+
data.tar.gz: 65be7c1ae928f0af8e21678ca5a2af266e76cc41e7d5329f147a97f68b5c5dd4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c80b9e458723516973ad8ea2ecad144012fca098a4d2b3786f31b2c28eef8290b077419f8df0e851d3857092a30bee3bb5cee9e65dcb13a7acb930f22a3a1360
|
|
7
|
+
data.tar.gz: 29828aebcc85908593f5e133329cf8af50208f43c92452d1688e8b7e1abc5680aaf6c81b1bac2a139555d4b2968d76f92789814e242e4f8479e35a145db0c762
|
|
@@ -10,6 +10,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
10
10
|
this.includeTextInputValues = this.module.hasAttribute('data-ga4-form-include-text')
|
|
11
11
|
this.recordJson = this.module.hasAttribute('data-ga4-form-record-json')
|
|
12
12
|
this.useTextCount = this.module.hasAttribute('data-ga4-form-use-text-count')
|
|
13
|
+
this.splitText = this.module.hasAttribute('data-ga4-form-split-response-text')
|
|
13
14
|
this.redacted = false
|
|
14
15
|
this.useFallbackValue = this.module.hasAttribute('data-ga4-form-no-answer-undefined') ? undefined : 'No answer given'
|
|
15
16
|
}
|
|
@@ -52,10 +53,28 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
52
53
|
if (data.action === 'search' && data.text) {
|
|
53
54
|
data.text = window.GOVUK.analyticsGa4.core.trackFunctions.standardiseSearchTerm(data.text)
|
|
54
55
|
}
|
|
56
|
+
|
|
57
|
+
if (data.text && this.splitText) {
|
|
58
|
+
data = this.splitFormResponseText(data)
|
|
59
|
+
}
|
|
60
|
+
|
|
55
61
|
window.GOVUK.analyticsGa4.core.applySchemaAndSendData(data, 'event_data')
|
|
56
62
|
}
|
|
57
63
|
}
|
|
58
64
|
|
|
65
|
+
Ga4FormTracker.prototype.splitFormResponseText = function (data) {
|
|
66
|
+
var text = data.text
|
|
67
|
+
var dimensions = Math.min(Math.ceil(data.text.length / 500), 5)
|
|
68
|
+
|
|
69
|
+
data.text = text.slice(0, 500)
|
|
70
|
+
|
|
71
|
+
for (var i = 1; i < dimensions; i++) {
|
|
72
|
+
data['text_' + (i + 1)] = text.slice(i * 500, i * 500 + 500)
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return data
|
|
76
|
+
}
|
|
77
|
+
|
|
59
78
|
Ga4FormTracker.prototype.getFormInputs = function () {
|
|
60
79
|
var inputs = []
|
|
61
80
|
var labels = this.module.querySelectorAll('label')
|
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
type: this.undefined,
|
|
17
17
|
url: this.undefined,
|
|
18
18
|
text: this.undefined,
|
|
19
|
+
text_2: this.undefined,
|
|
20
|
+
text_3: this.undefined,
|
|
21
|
+
text_4: this.undefined,
|
|
22
|
+
text_5: this.undefined,
|
|
19
23
|
index: {
|
|
20
24
|
index_link: this.undefined,
|
|
21
25
|
index_section: this.undefined,
|
|
@@ -3,14 +3,9 @@
|
|
|
3
3
|
@import "govuk_publishing_components/components/skip-link";
|
|
4
4
|
@import "govuk/components/header/header";
|
|
5
5
|
|
|
6
|
-
.gem-c-layout-header--no-bottom-border,
|
|
7
|
-
.gem-c-layout-header--no-bottom-border .govuk-header__container {
|
|
8
|
-
margin-bottom: 0;
|
|
6
|
+
.gem-c-layout-header.gem-c-layout-header--no-bottom-border,
|
|
7
|
+
.gem-c-layout-header.gem-c-layout-header--no-bottom-border .govuk-header__container {
|
|
9
8
|
border-bottom: 0;
|
|
10
|
-
|
|
11
|
-
@include govuk-media-query($until: tablet) {
|
|
12
|
-
padding-bottom: govuk-spacing(1);
|
|
13
|
-
}
|
|
14
9
|
}
|
|
15
10
|
|
|
16
11
|
.gem-c-layout-header--search-left {
|
|
@@ -64,9 +59,9 @@
|
|
|
64
59
|
}
|
|
65
60
|
|
|
66
61
|
.gem-c-header__logo {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-wrap: wrap;
|
|
64
|
+
row-gap: govuk-spacing(2);
|
|
70
65
|
}
|
|
71
66
|
|
|
72
67
|
.gem-c-header__content.govuk-header__content {
|
|
@@ -7,30 +7,49 @@
|
|
|
7
7
|
navigation_items ||= []
|
|
8
8
|
product_name ||= nil
|
|
9
9
|
remove_bottom_border ||= false
|
|
10
|
+
deprecated_navigation ||= false
|
|
10
11
|
width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
|
|
11
12
|
logo_link ||= "/"
|
|
12
13
|
|
|
13
14
|
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
14
15
|
component_helper.add_class("gem-c-layout-header govuk-header")
|
|
15
|
-
component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border
|
|
16
|
+
component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border || navigation_items
|
|
16
17
|
component_helper.add_data_attribute({ module: "govuk-header" })
|
|
17
18
|
%>
|
|
18
19
|
|
|
19
20
|
<%= tag.header(**component_helper.all_attributes) do %>
|
|
20
|
-
|
|
21
|
-
<div class="govuk-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
21
|
+
<% if !deprecated_navigation %>
|
|
22
|
+
<div class="govuk-header__container <%= width_class %> gem-c-layout-header__logo">
|
|
23
|
+
<%= render "govuk_publishing_components/components/layout_header/header_logo", {
|
|
24
|
+
environment:,
|
|
25
|
+
logo_link:,
|
|
26
|
+
product_name:,
|
|
27
|
+
} %>
|
|
28
|
+
</div>
|
|
29
|
+
<% if navigation_items.any? %>
|
|
30
|
+
<%= render "govuk_publishing_components/components/service_navigation", {
|
|
31
|
+
navigation_items:,
|
|
32
|
+
navigation_aria_label:,
|
|
33
|
+
full_width:,
|
|
34
|
+
} %>
|
|
35
|
+
<% end %>
|
|
36
|
+
<% else %>
|
|
37
|
+
<div class="govuk-header__container <%= width_class %>">
|
|
38
|
+
<div class="govuk-grid-row">
|
|
39
|
+
<div class="gem-c-layout-header__logo govuk-grid-column-one-half">
|
|
40
|
+
<%= render "govuk_publishing_components/components/layout_header/header_logo", {
|
|
41
|
+
environment:,
|
|
42
|
+
logo_link:,
|
|
43
|
+
product_name:,
|
|
44
|
+
deprecated_navigation: true,
|
|
45
|
+
} %>
|
|
32
46
|
</div>
|
|
33
|
-
|
|
47
|
+
<% if navigation_items.any? %>
|
|
48
|
+
<div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
|
|
49
|
+
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
|
|
50
|
+
</div>
|
|
51
|
+
<% end %>
|
|
52
|
+
</div>
|
|
34
53
|
</div>
|
|
35
|
-
|
|
54
|
+
<% end %>
|
|
36
55
|
<% end %>
|
|
@@ -4,15 +4,18 @@
|
|
|
4
4
|
service_name ||= nil
|
|
5
5
|
service_name_url ||= nil
|
|
6
6
|
navigation_items ||= []
|
|
7
|
+
navigation_aria_label ||= t("components.layout_header.menu")
|
|
7
8
|
|
|
8
9
|
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
9
10
|
component_helper.add_class("gem-c-service-navigation govuk-service-navigation")
|
|
10
11
|
component_helper.add_aria_attribute({ label: "Service information" }) if service_name.present?
|
|
11
12
|
component_helper.add_data_attribute({ module: "govuk-service-navigation" })
|
|
13
|
+
|
|
14
|
+
full_width ||= false
|
|
12
15
|
%>
|
|
13
16
|
<% if service_name.present? || navigation_items.present? %>
|
|
14
17
|
<% service_navigation_content = capture do %>
|
|
15
|
-
<div class="govuk-width-container">
|
|
18
|
+
<div class="<%= full_width ? "gem-c-service-navigation--full-width" : "govuk-width-container" %>">
|
|
16
19
|
<div class="govuk-service-navigation__container">
|
|
17
20
|
<% if service_name %>
|
|
18
21
|
<% if service_name_url %>
|
|
@@ -25,7 +28,7 @@
|
|
|
25
28
|
<% end %>
|
|
26
29
|
|
|
27
30
|
<% if navigation_items.present? %>
|
|
28
|
-
<nav aria-label="<%=
|
|
31
|
+
<nav aria-label="<%= navigation_aria_label %>" class="govuk-service-navigation__wrapper">
|
|
29
32
|
<button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
|
|
30
33
|
Menu
|
|
31
34
|
</button>
|
|
@@ -38,11 +41,11 @@
|
|
|
38
41
|
%>
|
|
39
42
|
<%= tag.li nav[:text], class: nav_classes do %>
|
|
40
43
|
<% if nav[:active] %>
|
|
41
|
-
<%= link_to(nav[:href], class: "govuk-service-navigation__link", aria: { current: aria_current }) do %>
|
|
44
|
+
<%= link_to(nav[:href], class: "govuk-service-navigation__link", aria: { current: aria_current }, data: nav[:data]) do %>
|
|
42
45
|
<%= tag.strong(nav[:text], class: "govuk-service-navigation__active-fallback") %>
|
|
43
46
|
<% end %>
|
|
44
47
|
<% else %>
|
|
45
|
-
<%= link_to nav[:text], nav[:href], class: "govuk-service-navigation__link" %>
|
|
48
|
+
<%= link_to nav[:text], nav[:href], class: "govuk-service-navigation__link", data: nav[:data] %>
|
|
46
49
|
<% end %>
|
|
47
50
|
<% end %>
|
|
48
51
|
<% end %>
|
|
@@ -31,17 +31,36 @@ examples:
|
|
|
31
31
|
environment: production
|
|
32
32
|
product_name: Product
|
|
33
33
|
with_navigation:
|
|
34
|
+
description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
|
|
34
35
|
data:
|
|
35
36
|
environment: production
|
|
36
37
|
navigation_items:
|
|
37
|
-
- text:
|
|
38
|
+
- text: Mainstream browse
|
|
38
39
|
href: "item-1"
|
|
39
40
|
active: true
|
|
40
|
-
- text:
|
|
41
|
+
- text: Step by steps
|
|
42
|
+
href: "item-2"
|
|
43
|
+
- text: Some kind of topic page
|
|
44
|
+
href: "item-3"
|
|
45
|
+
- text: Jonathan Doe
|
|
46
|
+
href: "item-4"
|
|
47
|
+
- text: Logout
|
|
48
|
+
href: "item-5"
|
|
49
|
+
with_deprecated_navigation:
|
|
50
|
+
description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
|
|
51
|
+
data:
|
|
52
|
+
environment: production
|
|
53
|
+
deprecated_navigation: true
|
|
54
|
+
navigation_items:
|
|
55
|
+
- text: Mainstream browse
|
|
56
|
+
href: "item-1"
|
|
57
|
+
active: true
|
|
58
|
+
- text: Step by steps
|
|
41
59
|
href: "item-2"
|
|
42
|
-
- text:
|
|
60
|
+
- text: Jonathan Doe
|
|
43
61
|
href: "item-3"
|
|
44
|
-
|
|
62
|
+
- text: Logout
|
|
63
|
+
href: "item-4"
|
|
45
64
|
with_product_name_and_navigation:
|
|
46
65
|
data:
|
|
47
66
|
product_name: Component Guide 999.9.9
|
|
@@ -52,9 +71,8 @@ examples:
|
|
|
52
71
|
active: true
|
|
53
72
|
- text: Navigation item 2
|
|
54
73
|
href: "item-2"
|
|
55
|
-
- text:
|
|
74
|
+
- text: Navigation item 3
|
|
56
75
|
href: "item-3"
|
|
57
|
-
show_only_in_collapsed_menu: true
|
|
58
76
|
with_navigation_link_data_attributes:
|
|
59
77
|
description: Supports adding data attributes i.e for tracking
|
|
60
78
|
data:
|
|
@@ -73,7 +91,7 @@ examples:
|
|
|
73
91
|
environment: production
|
|
74
92
|
full_width: true
|
|
75
93
|
no_bottom_border:
|
|
76
|
-
description: This is useful for pages where a large full-width banner is the first thing to appear on the page, for example, the [GOV.UK homepage](https://www.gov.uk)
|
|
94
|
+
description: This is useful for pages where a large full-width banner is the first thing to appear on the page, for example, the [GOV.UK homepage](https://www.gov.uk). This is also automatically enabled when navigation items exist.
|
|
77
95
|
data:
|
|
78
96
|
remove_bottom_border: true
|
|
79
97
|
with_custom_logo_link:
|
|
@@ -39,4 +39,38 @@ examples:
|
|
|
39
39
|
- text: Navigation item 2
|
|
40
40
|
href: "#"
|
|
41
41
|
- text: Navigation item 3
|
|
42
|
-
href: "#"
|
|
42
|
+
href: "#"
|
|
43
|
+
with_data_attributes_on_items:
|
|
44
|
+
data:
|
|
45
|
+
navigation_items:
|
|
46
|
+
- text: Navigation item 1
|
|
47
|
+
href: "#"
|
|
48
|
+
active: true
|
|
49
|
+
data:
|
|
50
|
+
module: "example"
|
|
51
|
+
something_else: "hello"
|
|
52
|
+
- text: Navigation item 2
|
|
53
|
+
href: "#"
|
|
54
|
+
active: true
|
|
55
|
+
data:
|
|
56
|
+
module: "example-2"
|
|
57
|
+
something_else: "hello 2"
|
|
58
|
+
with_custom_aria_label_on_the_nav_element:
|
|
59
|
+
data:
|
|
60
|
+
navigation_items:
|
|
61
|
+
- text: Navigation item 1
|
|
62
|
+
href: "#"
|
|
63
|
+
active: true
|
|
64
|
+
- text: Navigation item 2
|
|
65
|
+
href: "#"
|
|
66
|
+
navigation_aria_label: "Custom label"
|
|
67
|
+
full_width:
|
|
68
|
+
description: This is difficult to preview because the preview windows are constrained, but nav will stretch to the size of its container. Padding left is added to prevent the first menu item from colliding with the edge of the screen. Right spacing is already provided by the menu items.
|
|
69
|
+
data:
|
|
70
|
+
navigation_items:
|
|
71
|
+
- text: Navigation item 1
|
|
72
|
+
href: "#"
|
|
73
|
+
active: true
|
|
74
|
+
- text: Navigation item 2
|
|
75
|
+
href: "#"
|
|
76
|
+
full_width: true
|
|
@@ -8,12 +8,15 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
environment_exists = !environment.blank?
|
|
11
|
+
deprecated_navigation ||= false
|
|
11
12
|
%>
|
|
12
|
-
|
|
13
|
+
|
|
14
|
+
<% if environment_exists && deprecated_navigation %>
|
|
13
15
|
<div class="gem-c-header__environment">
|
|
14
16
|
<%= render "govuk_publishing_components/components/tag", { text: environment, colour: colour_map[environment.downcase] } %>
|
|
15
17
|
</div>
|
|
16
18
|
<% end %>
|
|
19
|
+
|
|
17
20
|
<div class="govuk-header__logo gem-c-header__logo">
|
|
18
21
|
<a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage">
|
|
19
22
|
<%= render "govuk_publishing_components/components/govuk_logo/govuk_logo" %>
|
|
@@ -23,4 +26,9 @@
|
|
|
23
26
|
</span>
|
|
24
27
|
<% end %>
|
|
25
28
|
</a>
|
|
29
|
+
<% if environment_exists && !deprecated_navigation %>
|
|
30
|
+
<div class="gem-c-header__environment">
|
|
31
|
+
<%= render "govuk_publishing_components/components/tag", { text: environment, colour: colour_map[environment.downcase] } %>
|
|
32
|
+
</div>
|
|
33
|
+
<% end %>
|
|
26
34
|
</div>
|