govuk_publishing_components 27.9.0 → 27.9.1
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/components/layout-super-navigation-header.js +20 -40
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +434 -366
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-super-navigation-header.scss +2 -2
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +81 -55
- data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml +12 -3
- data/config/locales/en.yml +2 -2
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +2 -2
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.gem-c-super-navigation-
|
|
2
|
-
|
|
1
|
+
.gem-c-layout-super-navigation-header__content {
|
|
2
|
+
display: none;
|
|
3
3
|
}
|
data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
CHANGED
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
<header role="banner" class="gem-c-layout-super-navigation-header">
|
|
19
19
|
<div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
|
|
20
20
|
<div class="gem-c-layout-super-navigation-header__header-logo">
|
|
21
|
-
<a
|
|
21
|
+
<a
|
|
22
|
+
class="govuk-header__link govuk-header__link--homepage"
|
|
22
23
|
data-module="gem-track-click"
|
|
23
24
|
data-track-action="logoLink"
|
|
24
25
|
data-track-category="headerClicked"
|
|
@@ -27,26 +28,30 @@
|
|
|
27
28
|
data-track-dimension-index="29"
|
|
28
29
|
href="<%= logo_link %>"
|
|
29
30
|
id="logo"
|
|
30
|
-
title="<%= logo_link_title %>"
|
|
31
|
+
title="<%= logo_link_title %>"
|
|
32
|
+
>
|
|
31
33
|
<span class="govuk-header__logotype">
|
|
32
|
-
|
|
34
|
+
<!--[if gt IE 8]><!-->
|
|
35
|
+
<svg
|
|
36
|
+
aria-hidden="true"
|
|
33
37
|
class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown"
|
|
34
38
|
focusable="false"
|
|
35
39
|
height="30"
|
|
36
40
|
viewBox="0 0 132 97"
|
|
41
|
+
width="36"
|
|
37
42
|
xmlns="http://www.w3.org/2000/svg"
|
|
38
|
-
|
|
39
|
-
<path
|
|
43
|
+
>
|
|
44
|
+
<path
|
|
45
|
+
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"
|
|
46
|
+
fill="currentColor"
|
|
40
47
|
fill-rule="evenodd"
|
|
41
|
-
|
|
48
|
+
>
|
|
42
49
|
</path>
|
|
43
|
-
<image class="govuk-header__logotype-crown-fallback-image"
|
|
44
|
-
height="30"
|
|
45
|
-
src="<%= asset_path('govuk-logotype-crown.png') %>"
|
|
46
|
-
width="36"
|
|
47
|
-
xlink:href="">
|
|
48
|
-
</image>
|
|
49
50
|
</svg>
|
|
51
|
+
<!--<![endif]-->
|
|
52
|
+
<!--[if IE 8]>
|
|
53
|
+
<img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
|
|
54
|
+
<![endif]-->
|
|
50
55
|
<span class="govuk-header__logotype-text">
|
|
51
56
|
<%= logo_text %>
|
|
52
57
|
</span>
|
|
@@ -76,6 +81,13 @@
|
|
|
76
81
|
type="button"
|
|
77
82
|
>
|
|
78
83
|
Menu
|
|
84
|
+
<span
|
|
85
|
+
aria-hidden="true"
|
|
86
|
+
class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
|
|
87
|
+
focusable="false"
|
|
88
|
+
>
|
|
89
|
+
×
|
|
90
|
+
</span>
|
|
79
91
|
</button>
|
|
80
92
|
<ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__navigation-items">
|
|
81
93
|
<% navigation_links.each_with_index do | link, index | %>
|
|
@@ -89,34 +101,34 @@
|
|
|
89
101
|
tracking_label = link[:label].downcase.gsub(/\s+/, "")
|
|
90
102
|
%>
|
|
91
103
|
<%= tag.li class: li_classes do %>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
</
|
|
104
|
+
<div class="gem-c-layout-super-navigation-header__navigation-toggle-wrapper govuk-clearfix">
|
|
105
|
+
<%= link_to link[:label], link[:href], {
|
|
106
|
+
class: "gem-c-layout-super-navigation-header__navigation-item-link",
|
|
107
|
+
data: {
|
|
108
|
+
module: "gem-track-click",
|
|
109
|
+
track_action: "#{tracking_label}Link",
|
|
110
|
+
track_category: "headerClicked",
|
|
111
|
+
track_label: link[:href],
|
|
112
|
+
track_dimension: link[:label],
|
|
113
|
+
track_dimension_index: "29",
|
|
114
|
+
}
|
|
115
|
+
} %>
|
|
116
|
+
<% if has_children %>
|
|
117
|
+
<button
|
|
118
|
+
aria-controls="super-navigation-menu__section-<%= unique_id %>"
|
|
119
|
+
aria-expanded="false"
|
|
120
|
+
aria-label="<%= show_menu_text %>"
|
|
121
|
+
class="gem-c-layout-super-navigation-header__navigation-second-toggle-button"
|
|
122
|
+
data-text-for-hide="<%= hide_menu_text %>"
|
|
123
|
+
data-text-for-show="<%= show_menu_text %>"
|
|
124
|
+
data-toggle-desktop-group="top"
|
|
125
|
+
data-toggle-mobile-group="second"
|
|
126
|
+
data-tracking-key="<%= tracking_label %>"
|
|
127
|
+
hidden
|
|
128
|
+
id="super-navigation-menu__section-<%= unique_id %>-toggle"
|
|
129
|
+
type="button"
|
|
130
|
+
><%= link[:label] %></button>
|
|
131
|
+
</div>
|
|
120
132
|
<div
|
|
121
133
|
hidden
|
|
122
134
|
class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
|
|
@@ -152,7 +164,7 @@
|
|
|
152
164
|
track_dimension_index: "29",
|
|
153
165
|
}
|
|
154
166
|
} %>
|
|
155
|
-
<%= tag.p item[:description], class: "govuk-body govuk-!-margin-0" if has_description %>
|
|
167
|
+
<%= tag.p item[:description], class: "govuk-body govuk-!-margin-0 govuk-!-margin-top-1" if has_description %>
|
|
156
168
|
</li>
|
|
157
169
|
<% end %>
|
|
158
170
|
</ul>
|
|
@@ -214,9 +226,17 @@
|
|
|
214
226
|
<%= search_text %>
|
|
215
227
|
</span>
|
|
216
228
|
<%=
|
|
217
|
-
render "govuk_publishing_components/components/search/search_icon",
|
|
218
|
-
classes: %
|
|
229
|
+
render "govuk_publishing_components/components/search/search_icon", {
|
|
230
|
+
classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
|
|
231
|
+
}
|
|
219
232
|
%>
|
|
233
|
+
<span
|
|
234
|
+
aria-hidden="true"
|
|
235
|
+
class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
|
|
236
|
+
focusable="false"
|
|
237
|
+
>
|
|
238
|
+
×
|
|
239
|
+
</span>
|
|
220
240
|
</button>
|
|
221
241
|
|
|
222
242
|
<div id="super-search-menu" class="gem-c-layout-super-navigation-header__search-items">
|
|
@@ -243,14 +263,16 @@
|
|
|
243
263
|
cy="10.0161"
|
|
244
264
|
r="8.51613"
|
|
245
265
|
stroke="currentColor"
|
|
246
|
-
stroke-width="3"
|
|
266
|
+
stroke-width="3"
|
|
267
|
+
/>
|
|
247
268
|
<line
|
|
248
269
|
x1="15.8668"
|
|
249
270
|
y1="16.3587"
|
|
250
271
|
x2="25.4475"
|
|
251
272
|
y2="25.9393"
|
|
252
273
|
stroke="currentColor"
|
|
253
|
-
stroke-width="3"
|
|
274
|
+
stroke-width="3"
|
|
275
|
+
/>
|
|
254
276
|
</svg>
|
|
255
277
|
</a>
|
|
256
278
|
</div>
|
|
@@ -288,16 +310,20 @@
|
|
|
288
310
|
<ul class="govuk-list">
|
|
289
311
|
<% popular_links.each do | popular_link | %>
|
|
290
312
|
<li class="gem-c-layout-super-navigation-header__popular-item">
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
data
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
313
|
+
<%= link_to popular_link[:label], popular_link[:href], {
|
|
314
|
+
class: [
|
|
315
|
+
"govuk-link",
|
|
316
|
+
"gem-c-layout-super-navigation-header__popular-link",
|
|
317
|
+
],
|
|
318
|
+
data: {
|
|
319
|
+
module: "gem-track-click",
|
|
320
|
+
track_action: "popularLink",
|
|
321
|
+
track_category: "headerClicked",
|
|
322
|
+
track_label: popular_link[:href],
|
|
323
|
+
track_dimension: popular_link[:label],
|
|
324
|
+
track_dimension_index: "29",
|
|
325
|
+
}
|
|
326
|
+
} %>
|
|
301
327
|
</li>
|
|
302
328
|
<% end %>
|
|
303
329
|
</ul>
|
data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml
CHANGED
|
@@ -16,12 +16,21 @@ accessibility_criteria: |
|
|
|
16
16
|
|
|
17
17
|
* have a role of banner at the root of the component (<header>) (ARIA 1.1)
|
|
18
18
|
accessibility_excluded_rules:
|
|
19
|
-
|
|
20
|
-
- landmark-
|
|
19
|
+
# The header element can not be top level in the examples.
|
|
20
|
+
- landmark-banner-is-top-level
|
|
21
|
+
# Banners will be duplicated in component examples list.
|
|
22
|
+
- duplicate-id
|
|
23
|
+
- duplicate-id-active
|
|
24
|
+
- duplicate-id-aria
|
|
25
|
+
- landmark-no-duplicate-banner
|
|
26
|
+
- landmark-unique
|
|
21
27
|
examples:
|
|
22
28
|
default:
|
|
23
29
|
with_custom_logo_link:
|
|
24
|
-
description:
|
|
30
|
+
description: |
|
|
31
|
+
The header logo links to root by default. This option allows us to override that in certain instances.
|
|
32
|
+
|
|
33
|
+
Remember to update the title, as the default is "Go to the GOV.UK homepage".
|
|
25
34
|
data:
|
|
26
35
|
logo_link: "https://www.example.com"
|
|
27
36
|
logo_link_title: "Go to example"
|
data/config/locales/en.yml
CHANGED
|
@@ -94,9 +94,9 @@ en:
|
|
|
94
94
|
account_layout:
|
|
95
95
|
feedback:
|
|
96
96
|
banners:
|
|
97
|
-
phase_intro:
|
|
97
|
+
phase_intro: This is a new service – your
|
|
98
98
|
phase_link: feedback
|
|
99
|
-
phase_outro: will help us improve
|
|
99
|
+
phase_outro: will help us to improve it.
|
|
100
100
|
navigation:
|
|
101
101
|
destroy_user_session: Sign out
|
|
102
102
|
menu_bar:
|
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: 27.9.
|
|
4
|
+
version: 27.9.1
|
|
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: 2021-10-
|
|
11
|
+
date: 2021-10-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|