govuk_publishing_components 27.9.0 → 27.9.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|