govuk_publishing_components 34.10.0 → 34.11.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +123 -10
  3. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js +17 -92
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js +12 -0
  5. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js +16 -0
  6. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-smart-answer-results-tracker.js +57 -0
  7. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js +2 -2
  8. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js +1 -0
  9. data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +0 -22
  10. data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js +1 -0
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +42 -94
  12. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +0 -9
  13. data/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb +1 -1
  14. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +207 -221
  15. data/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml +1 -1
  16. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +8 -4
  17. data/lib/govuk_publishing_components/presenters/breadcrumbs.rb +6 -0
  18. data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb +14 -9
  19. data/lib/govuk_publishing_components/version.rb +1 -1
  20. metadata +4 -3
@@ -22,55 +22,57 @@
22
22
  navigation_links_length = navigation_links_length + popular_links.length
23
23
  %>
24
24
  <header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click ga4-event-tracker ga4-link-tracker" data-track-links-only data-ga4-expandable>
25
- <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
26
- <div class="gem-c-layout-super-navigation-header__header-logo">
27
- <a
28
- class="govuk-header__link govuk-header__link--homepage"
29
- data-track-action="logoLink"
30
- data-track-category="headerClicked"
31
- data-track-label="<%= logo_link %>"
32
- data-track-dimension="<%= logo_text %>"
33
- data-track-dimension-index="29"
34
- href="<%= logo_link %>"
35
- id="logo"
36
- title="<%= logo_link_title %>"
37
- data-ga4-link="<%= {
38
- "event_name": "navigation",
39
- "type": "header menu bar",
40
- "external": "false",
41
- "text": "GOV.UK",
42
- "section": "Logo",
43
- "index": 0,
44
- "index_total": navigation_links_length
45
- }.to_json %>"
46
- >
47
- <span class="govuk-header__logotype">
48
- <!--[if gt IE 8]><!-->
49
- <svg
50
- aria-hidden="true"
51
- class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown"
52
- focusable="false"
53
- height="30"
54
- viewBox="0 0 132 97"
55
- width="36"
56
- xmlns="http://www.w3.org/2000/svg"
57
- >
58
- <path
59
- d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
60
- fill="currentColor"
61
- fill-rule="evenodd"
25
+ <div class="gem-c-layout-super-navigation-header__container govuk-clearfix">
26
+ <div class="govuk-width-container">
27
+ <div class="gem-c-layout-super-navigation-header__header-logo">
28
+ <a
29
+ class="govuk-header__link govuk-header__link--homepage"
30
+ data-track-action="logoLink"
31
+ data-track-category="headerClicked"
32
+ data-track-label="<%= logo_link %>"
33
+ data-track-dimension="<%= logo_text %>"
34
+ data-track-dimension-index="29"
35
+ href="<%= logo_link %>"
36
+ id="logo"
37
+ title="<%= logo_link_title %>"
38
+ data-ga4-link="<%= {
39
+ "event_name": "navigation",
40
+ "type": "header menu bar",
41
+ "external": "false",
42
+ "text": "GOV.UK",
43
+ "section": "Logo",
44
+ "index": 0,
45
+ "index_total": navigation_links_length
46
+ }.to_json %>"
47
+ >
48
+ <span class="govuk-header__logotype">
49
+ <!--[if gt IE 8]><!-->
50
+ <svg
51
+ aria-hidden="true"
52
+ class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown"
53
+ focusable="false"
54
+ height="30"
55
+ viewBox="0 0 132 97"
56
+ width="36"
57
+ xmlns="http://www.w3.org/2000/svg"
62
58
  >
63
- </path>
64
- </svg>
65
- <!--<![endif]-->
66
- <!--[if IE 8]>
67
- <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
68
- <![endif]-->
69
- <span class="govuk-header__logotype-text">
70
- <%= logo_text %>
59
+ <path
60
+ d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
61
+ fill="currentColor"
62
+ fill-rule="evenodd"
63
+ >
64
+ </path>
65
+ </svg>
66
+ <!--<![endif]-->
67
+ <!--[if IE 8]>
68
+ <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
69
+ <![endif]-->
70
+ <span class="govuk-header__logotype-text">
71
+ <%= logo_text %>
72
+ </span>
71
73
  </span>
72
- </span>
73
- </a>
74
+ </a>
75
+ </div>
74
76
  </div>
75
77
  <nav
76
78
  aria-labelledby="super-navigation-menu-heading"
@@ -89,188 +91,172 @@
89
91
  tracking_label = link[:label].downcase.gsub(/\s+/, "")
90
92
  %>
91
93
 
92
- <%= link_to link[:href], {
93
- class: "gem-c-layout-super-navigation-header__navigation-item-link",
94
- data: {
95
- track_action: "#{tracking_label}Link",
96
- track_category: "headerClicked",
97
- track_label: link[:href],
98
- track_dimension: link[:label],
99
- track_dimension_index: "29",
100
- }
101
- } do %>
102
- <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
103
- <%= link[:label] %>
104
- </span>
105
- <% end %>
94
+ <div class="govuk-width-container gem-c-layout-super-navigation-header__button-width-container">
95
+ <div class="gem-c-layout-super-navigation-header__button-container">
96
+ <div class="gem-c-layout-super-navigation-header__navigation-item">
97
+ <%= link_to link[:href], {
98
+ class: "gem-c-layout-super-navigation-header__navigation-item-link",
99
+ data: {
100
+ track_action: "#{tracking_label}Link",
101
+ track_category: "headerClicked",
102
+ track_label: link[:href],
103
+ track_dimension: link[:label],
104
+ track_dimension_index: "29",
105
+ }
106
+ } do %>
107
+ <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
108
+ <%= link[:label] %>
109
+ </span>
110
+ <% end %>
106
111
 
107
- <%= content_tag(:button, {
108
- aria: {
109
- controls: "super-navigation-menu-#{unique_id}",
110
- expanded: false,
111
- label: show_menu_text,
112
- },
113
- class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button",
114
- data: {
115
- text_for_hide: hide_menu_text,
116
- text_for_show: show_menu_text,
117
- toggle_desktop_group: "top",
118
- toggle_mobile_group: "top",
119
- tracking_key: tracking_label,
120
- ga4_event: {
121
- event_name: "select_content",
122
- type: "header menu bar",
123
- text: link[:label],
124
- index: 1,
125
- index_total: 2,
126
- section: link[:label]
127
- }
128
- },
129
- hidden: true,
130
- id: "super-navigation-menu-#{unique_id}-toggle",
131
- type: "button",
132
- }) do %>
133
- <%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner" %>
134
- <% end %>
135
- <%= tag.div class: "gem-c-layout-super-navigation-header__navigation-items" do %>
136
- <div
137
- id="super-navigation-menu-<%= unique_id %>" hidden
138
- class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
139
- >
140
- <div class="gem-c-layout-super-navigation-header__width-container">
141
- <div class="govuk-grid-row">
112
+ <%= content_tag(:button, {
113
+ aria: {
114
+ controls: "super-navigation-menu-#{unique_id}",
115
+ expanded: false,
116
+ label: show_menu_text,
117
+ },
118
+ class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button",
119
+ data: {
120
+ text_for_hide: hide_menu_text,
121
+ text_for_show: show_menu_text,
122
+ toggle_desktop_group: "top",
123
+ toggle_mobile_group: "top",
124
+ tracking_key: tracking_label,
125
+ ga4_event: {
126
+ event_name: "select_content",
127
+ type: "header menu bar",
128
+ text: link[:label],
129
+ index: 1,
130
+ index_total: 2,
131
+ section: link[:label]
132
+ }
133
+ },
134
+ hidden: true,
135
+ id: "super-navigation-menu-#{unique_id}-toggle",
136
+ type: "button",
137
+ }) do %>
138
+ <%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner" %>
139
+ <% end %>
140
+ </div>
142
141
 
143
- <% navigation_links_columns.each_with_index do | column, column_index | %>
144
- <%
145
- case column[:size]
146
- when 2
147
- width_class = "govuk-grid-column-two-thirds-from-desktop"
148
- when 3
149
- width_class = "govuk-grid-column-full-from-desktop"
150
- else
151
- width_class = "govuk-grid-column-one-third-from-desktop"
152
- end
153
- %>
142
+ <div class="gem-c-layout-super-navigation-header__search-item">
143
+ <button
144
+ aria-controls="super-search-menu"
145
+ aria-expanded="true"
146
+ aria-label="<%= hide_search_menu_text %>"
147
+ class="gem-c-layout-super-navigation-header__search-toggle-button"
148
+ data-text-for-hide="<%= hide_search_menu_text %>"
149
+ data-text-for-show="<%= show_search_menu_text %>"
150
+ data-toggle-mobile-group="top"
151
+ data-toggle-desktop-group="top"
152
+ data-tracking-key="search"
153
+ hidden
154
+ id="super-search-menu-toggle"
155
+ type="button"
156
+ data-ga4-event="<%= {
157
+ "event_name": "select_content",
158
+ "type": "header menu bar",
159
+ "text": "Search",
160
+ "index": 2,
161
+ "index_total": 2,
162
+ "section": "Search"
163
+ }.to_json %>"
164
+ >
165
+ <span class="govuk-visually-hidden">
166
+ <%= search_text %>
167
+ </span>
168
+ <%=
169
+ render "govuk_publishing_components/components/search/search_icon", {
170
+ classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
171
+ }
172
+ %>
173
+ <span
174
+ aria-hidden="true"
175
+ class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
176
+ focusable="false"
177
+ >
178
+ &times;
179
+ </span>
180
+ </button>
154
181
 
155
- <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.sub(" ", "-") %>">
156
- <h3 class="govuk-heading-m gem-c-layout-super-navigation-header__column-header">
157
- <%= column[:label] %>
158
- </h3>
159
- <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.sub(" ", "-") %>">
160
- <% column[:menu_contents].each_with_index do | item, index | %>
161
- <%
162
- has_description = item[:description].present?
163
- link_classes = %w[govuk-link gem-c-layout-super-navigation-header__navigation-second-item-link]
164
- link_classes << "gem-c-layout-super-navigation-header__navigation-second-item-link--with-description" if has_description
165
- tracking_label = column[:label].downcase.gsub(/\s+/, "")
166
- %>
167
- <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
168
- <%= link_to item[:label], item[:href], {
169
- class: link_classes,
170
- data: {
171
- track_action: "#{tracking_label}Link",
172
- track_category: "headerClicked",
173
- track_label: item[:href],
174
- track_dimension: item[:label],
175
- track_dimension_index: "29",
176
- ga4_link: {
177
- "event_name": "navigation",
178
- "type": "header menu bar",
179
- "index": "1.#{column_index + 1}.#{index + 1}",
180
- "index_total": navigation_links_length,
181
- "section": column[:label],
182
- }
183
- }
184
- } %>
185
- <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
186
- </li>
187
- <% end %>
188
- </ul>
189
- </div>
190
- <% end %>
191
- </div>
192
- </div>
193
- </div>
194
- <% end %>
182
+ <a class="gem-c-layout-super-navigation-header__search-item-link" href="/search">
183
+ <span class="govuk-visually-hidden">
184
+ <%= search_text %>
185
+ </span>
186
+ <%=
187
+ render "govuk_publishing_components/components/search/search_icon", {
188
+ classes: %w[gem-c-layout-super-navigation-header__search-item-link-icon],
189
+ }
190
+ %>
191
+ </a>
192
+ </div>
193
+ </div>
194
+ </div>
195
195
 
196
- <button
197
- aria-controls="super-search-menu"
198
- aria-expanded="true"
199
- aria-label="<%= hide_search_menu_text %>"
200
- class="gem-c-layout-super-navigation-header__search-toggle-button"
201
- data-text-for-hide="<%= hide_search_menu_text %>"
202
- data-text-for-show="<%= show_search_menu_text %>"
203
- data-toggle-mobile-group="top"
204
- data-toggle-desktop-group="top"
205
- data-tracking-key="search"
206
- hidden
207
- id="super-search-menu-toggle"
208
- type="button"
209
- data-ga4-event="<%= {
210
- "event_name": "select_content",
211
- "type": "header menu bar",
212
- "text": "Search",
213
- "index": 2,
214
- "index_total": 2,
215
- "section": "Search"
216
- }.to_json %>"
196
+ <div
197
+ id="super-navigation-menu-<%= unique_id %>" hidden
198
+ class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
217
199
  >
218
- <span class="govuk-visually-hidden">
219
- <%= search_text %>
220
- </span>
221
- <%=
222
- render "govuk_publishing_components/components/search/search_icon", {
223
- classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
224
- }
225
- %>
226
- <span
227
- aria-hidden="true"
228
- class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
229
- focusable="false"
230
- >
231
- &times;
232
- </span>
233
- </button>
200
+ <div class="govuk-width-container">
201
+ <div class="govuk-grid-row gem-c-layout-super-navigation-header__navigation-items">
234
202
 
235
- <div id="super-search-menu" class="gem-c-layout-super-navigation-header__search-items">
236
- <h3 class="govuk-visually-hidden">
237
- <%= navigation_search_subheading %>
238
- </h3>
239
- <div class="gem-c-layout-super-navigation-header__search-item">
240
- <a class="gem-c-layout-super-navigation-header__search-item-link" href="/search">
241
- <span class="govuk-visually-hidden">
242
- <%= search_text %>
243
- </span>
244
- <svg
245
- class="gem-c-layout-super-navigation-header__search-item-link-icon"
246
- width="27"
247
- height="27"
248
- viewBox="0 0 27 27"
249
- fill="none"
250
- xmlns="http://www.w3.org/2000/svg"
251
- aria-hidden="true"
252
- focusable="false"
253
- >
254
- <circle
255
- cx="10.0161"
256
- cy="10.0161"
257
- r="8.51613"
258
- stroke="currentColor"
259
- stroke-width="3"
260
- />
261
- <line
262
- x1="15.8668"
263
- y1="16.3587"
264
- x2="25.4475"
265
- y2="25.9393"
266
- stroke="currentColor"
267
- stroke-width="3"
268
- />
269
- </svg>
270
- </a>
203
+ <% navigation_links_columns.each_with_index do | column, column_index | %>
204
+ <%
205
+ case column[:size]
206
+ when 2
207
+ width_class = "govuk-grid-column-two-thirds-from-desktop"
208
+ when 3
209
+ width_class = "govuk-grid-column-full-from-desktop"
210
+ else
211
+ width_class = "govuk-grid-column-one-third-from-desktop"
212
+ end
213
+ %>
214
+
215
+ <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.sub(" ", "-") %>">
216
+ <h3 class="govuk-heading-m gem-c-layout-super-navigation-header__column-header">
217
+ <%= column[:label] %>
218
+ </h3>
219
+ <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.sub(" ", "-") %>">
220
+ <% column[:menu_contents].each_with_index do | item, index | %>
221
+ <%
222
+ has_description = item[:description].present?
223
+ link_classes = %w[govuk-link gem-c-layout-super-navigation-header__navigation-second-item-link]
224
+ link_classes << "gem-c-layout-super-navigation-header__navigation-second-item-link--with-description" if has_description
225
+ tracking_label = column[:label].downcase.gsub(/\s+/, "")
226
+ %>
227
+ <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
228
+ <%= link_to item[:label], item[:href], {
229
+ class: link_classes,
230
+ data: {
231
+ track_action: "#{tracking_label}Link",
232
+ track_category: "headerClicked",
233
+ track_label: item[:href],
234
+ track_dimension: item[:label],
235
+ track_dimension_index: "29",
236
+ ga4_link: {
237
+ "event_name": "navigation",
238
+ "type": "header menu bar",
239
+ "index": "1.#{column_index + 1}.#{index + 1}",
240
+ "index_total": navigation_links_length,
241
+ "section": column[:label],
242
+ }
243
+ }
244
+ } %>
245
+ <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
246
+ </li>
247
+ <% end %>
248
+ </ul>
249
+ </div>
250
+ <% end %>
251
+ </div>
271
252
  </div>
253
+ </div>
272
254
 
273
- <div class="govuk-width-container gem-c-layout-super-navigation-header__search-and-popular">
255
+ <div id="super-search-menu" hidden class="gem-c-layout-super-navigation-header__navigation-dropdown-menu">
256
+ <div class="govuk-width-container gem-c-layout-super-navigation-header__search-container gem-c-layout-super-navigation-header__search-items">
257
+ <h3 class="govuk-visually-hidden">
258
+ <%= navigation_search_subheading %>
259
+ </h3>
274
260
  <div class="govuk-grid-row">
275
261
  <div class="govuk-grid-column-full">
276
262
  <form
@@ -2,7 +2,7 @@ name: "Breadcrumbs"
2
2
  description: "Navigational breadcrumbs, showing page hierarchy"
3
3
  body: |
4
4
  Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
5
- Links have tracking data but links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.
5
+ Links are tracked, but in Universal Analytics, links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.
6
6
 
7
7
  We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
8
8
  shared_accessibility_criteria:
@@ -4,14 +4,18 @@
4
4
  data-module="gem-toggle">
5
5
 
6
6
  <% if section_title === "related_items" %>
7
- <% heading_text = related_nav_helper.component_title %>
7
+ <%
8
+ heading_text = related_nav_helper.construct_section_text("related_content", true)
9
+ ga4_heading_text = related_nav_helper.construct_ga4_section_text("related_content")
10
+ %>
8
11
  <% else %>
9
12
  <%=
10
13
  heading_class = related_nav_helper.section_css_class("gem-c-related-navigation__sub-heading", section_title)
11
14
  heading_data = { 'track-count' => related_nav_helper.section_data_track_count(:related_item_section) }
12
15
  heading_id = "related-nav-#{section_title}-#{random}"
13
16
  heading_level = related_nav_helper.section_heading_level
14
- heading_text = related_nav_helper.construct_section_heading(section_title)
17
+ heading_text = related_nav_helper.construct_section_text(section_title, true)
18
+ ga4_heading_text = related_nav_helper.construct_ga4_section_text(section_title)
15
19
 
16
20
  content_tag(heading_level, id: heading_id, class: heading_class, data: heading_data) do
17
21
  heading_text
@@ -31,7 +35,7 @@
31
35
  event_name: "navigation",
32
36
  type: "related content",
33
37
  index: "#{section_index}.#{index}",
34
- section: heading_text,
38
+ section: ga4_heading_text,
35
39
  } if ga4_tracking
36
40
  link_element = link_to(
37
41
  link[:text],
@@ -41,7 +45,7 @@
41
45
  lang: shared_helper.t_locale_check(link[:locale]),
42
46
  data: {
43
47
  track_category: 'relatedLinkClicked',
44
- track_action: "#{section_index}.#{index} #{related_nav_helper.construct_section_heading(section_title) || t('components.related_navigation.related_content')}",
48
+ track_action: "#{section_index}.#{index} #{related_nav_helper.construct_section_text(section_title, true) || t('components.related_navigation.related_content')}",
45
49
  track_label: link[:path],
46
50
  track_options: {
47
51
  dimension28: links.length.to_s,
@@ -58,6 +58,12 @@ module GovukPublishingComponents
58
58
  dimension28: breadcrumbs_length.to_s,
59
59
  dimension29: crumb[:title],
60
60
  },
61
+ ga4_link: {
62
+ event_name: "navigation",
63
+ type: "breadcrumbs",
64
+ index: index.to_s,
65
+ index_total: breadcrumbs_length.to_s,
66
+ },
61
67
  }
62
68
 
63
69
  is_homepage = crumb[:url] == "/"
@@ -53,20 +53,25 @@ module GovukPublishingComponents
53
53
  end
54
54
  end
55
55
 
56
- def construct_section_heading(section_title)
57
- unless section_title == "related_items"
56
+ def construct_section_text(section, underscores_to_spaces)
57
+ unless section == "related_items"
58
+ defaults = [I18n.t("components.related_navigation.#{section}")]
59
+ defaults << section.tr("_", " ") if underscores_to_spaces
60
+
58
61
  I18n.t(
59
- "components.related_#{@context}_navigation." + section_title,
60
- default: [
61
- I18n.t("components.related_navigation.#{section_title}"),
62
- section_title.tr("_", " "),
63
- ],
62
+ "components.related_#{@context}_navigation.#{section}",
63
+ default: defaults,
64
64
  )
65
65
  end
66
66
  end
67
67
 
68
- def component_title
69
- I18n.t("components.related_#{@context}_navigation.related_content", default: I18n.t("components.related_navigation.related_content"))
68
+ def construct_ga4_section_text(section)
69
+ # Force English so we can still understand what is being tracked if translated.
70
+ underscores_to_spaces = true
71
+ underscores_to_spaces = false if section == "related_content"
72
+ I18n.with_locale("en") do
73
+ construct_section_text(section, underscores_to_spaces)
74
+ end
70
75
  end
71
76
 
72
77
  def section_css_class(css_class, section_title, link: {}, link_is_inline: false)
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "34.10.0".freeze
2
+ VERSION = "34.11.0".freeze
3
3
  end
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: 34.10.0
4
+ version: 34.11.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: 2023-02-10 00:00:00.000000000 Z
11
+ date: 2023-02-21 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config
@@ -447,6 +447,7 @@ files:
447
447
  - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js
448
448
  - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js
449
449
  - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js
450
+ - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-smart-answer-results-tracker.js
450
451
  - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js
451
452
  - app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js
452
453
  - app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js
@@ -1410,7 +1411,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
1410
1411
  - !ruby/object:Gem::Version
1411
1412
  version: '0'
1412
1413
  requirements: []
1413
- rubygems_version: 3.4.6
1414
+ rubygems_version: 3.4.7
1414
1415
  signing_key:
1415
1416
  specification_version: 4
1416
1417
  summary: A gem to document components in GOV.UK frontend applications