govuk_publishing_components 59.2.1 → 60.0.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/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/component_guide/application.scss +15 -16
- data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +0 -12
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +5 -10
- data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss +5 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss +4 -0
- data/app/models/govuk_publishing_components/component_doc.rb +8 -0
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +1 -3
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +34 -15
- data/app/views/govuk_publishing_components/components/_metadata.html.erb +6 -8
- data/app/views/govuk_publishing_components/components/_service_navigation.html.erb +7 -4
- data/app/views/govuk_publishing_components/components/docs/cross_service_header.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/layout_footer.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/layout_header.yml +26 -9
- data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/metadata.yml +7 -14
- data/app/views/govuk_publishing_components/components/docs/service_navigation.yml +35 -1
- data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +9 -1
- data/app/views/layouts/govuk_publishing_components/application.html.erb +8 -6
- 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: d4823d17fd795d6334e13665c4973b75279aa5c233bc230250616aa1978c3b9b
|
|
4
|
+
data.tar.gz: cc0c87bcf4346ad84d1b0637a2b0a3fa6e8ef0af59e91bc0565cf7cfebb0b044
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b03243d92cb8c2d40322a48d91c099db3d3bbb04606fea73087d9cb9d3f0a3238f145f322a57c064c0b737c26a68cda8836edc7738a93333489a181dc1d4bcc6
|
|
7
|
+
data.tar.gz: f23cff517c4d13428ae7a7df05b23cb9d486c2f38812ca918391ffd89ac3a874881c51c52829add3a17c2f6ac14fa264b83743cda05d27d147d4bb5eed575e5e
|
|
@@ -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,
|
|
@@ -121,10 +121,12 @@ $gem-guide-border-width: 1px;
|
|
|
121
121
|
|
|
122
122
|
&.dark-background {
|
|
123
123
|
background-color: govuk-colour("blue");
|
|
124
|
+
padding: govuk-spacing(3);
|
|
124
125
|
}
|
|
125
126
|
|
|
126
127
|
&.black-background {
|
|
127
128
|
background-color: govuk-colour("black");
|
|
129
|
+
padding: govuk-spacing(3);
|
|
128
130
|
}
|
|
129
131
|
|
|
130
132
|
&.component-output {
|
|
@@ -140,7 +142,7 @@ $gem-guide-border-width: 1px;
|
|
|
140
142
|
|
|
141
143
|
.component-guide-preview--simple {
|
|
142
144
|
border: 0;
|
|
143
|
-
padding:
|
|
145
|
+
padding: 0;
|
|
144
146
|
|
|
145
147
|
&::before {
|
|
146
148
|
display: none;
|
|
@@ -237,25 +239,14 @@ html {
|
|
|
237
239
|
font-family: $govuk-font-family;
|
|
238
240
|
}
|
|
239
241
|
|
|
240
|
-
|
|
241
|
-
// stylelint-disable selector-max-id
|
|
242
|
-
#global-header,
|
|
243
|
-
#global-header-bar,
|
|
244
|
-
#global-breadcrumb,
|
|
245
|
-
#footer {
|
|
246
|
-
display: none;
|
|
247
|
-
}
|
|
248
|
-
// stylelint-enable selector-max-id
|
|
249
|
-
}
|
|
250
|
-
|
|
242
|
+
// wraps each component variation on the preview page
|
|
251
243
|
.component-guide-preview-page {
|
|
252
|
-
|
|
253
|
-
position: relative;
|
|
244
|
+
margin-bottom: govuk-spacing(9);
|
|
254
245
|
|
|
255
246
|
.preview-title {
|
|
256
247
|
margin-top: 0;
|
|
257
|
-
margin-bottom:
|
|
258
|
-
@include govuk-font($size:
|
|
248
|
+
margin-bottom: govuk-spacing(4);
|
|
249
|
+
@include govuk-font($size: 19, $weight: bold);
|
|
259
250
|
|
|
260
251
|
a {
|
|
261
252
|
@include govuk-link-common;
|
|
@@ -264,6 +255,14 @@ html {
|
|
|
264
255
|
}
|
|
265
256
|
}
|
|
266
257
|
|
|
258
|
+
// Add spacing to the left of the component title on the preview page
|
|
259
|
+
// when using the full screen width
|
|
260
|
+
.govuk-full-width-container {
|
|
261
|
+
.preview-title {
|
|
262
|
+
padding-left: govuk-spacing(3);
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
267
266
|
// Rouge syntax highlighting
|
|
268
267
|
// Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
|
|
269
268
|
|
|
@@ -61,18 +61,6 @@
|
|
|
61
61
|
right: 0;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
|
|
65
|
-
// Focus styles on IE8 and older include the
|
|
66
|
-
// left margin, creating an odd white box with
|
|
67
|
-
// orange border around the em dash.
|
|
68
|
-
// Use inline-block and vertical alignment to
|
|
69
|
-
// fix focus styles
|
|
70
|
-
//
|
|
71
|
-
// https://github.com/alphagov/government-frontend/pull/420#issuecomment-320632386
|
|
72
|
-
.lte-ie8 & .gem-c-contents-list__link {
|
|
73
|
-
display: inline-block;
|
|
74
|
-
vertical-align: top;
|
|
75
|
-
}
|
|
76
64
|
}
|
|
77
65
|
|
|
78
66
|
.gem-c-contents-list--alternative-line-style {
|
|
@@ -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 {
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.gem-c-metadata--inverse-padded {
|
|
35
|
-
padding: govuk-spacing(2);
|
|
35
|
+
padding: govuk-spacing(2) govuk-spacing(4);
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
padding:
|
|
37
|
+
@include govuk-media-query($from: tablet) {
|
|
38
|
+
padding: govuk-spacing(2) govuk-spacing(5);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.gem-c-metadata__list {
|
|
42
|
-
margin: govuk-spacing(2);
|
|
42
|
+
margin: govuk-spacing(2) 0;
|
|
43
43
|
|
|
44
44
|
@include govuk-media-query($from: tablet) {
|
|
45
|
-
margin: govuk-spacing(3);
|
|
45
|
+
margin: govuk-spacing(3) 0;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
}
|
|
@@ -54,10 +54,18 @@ module GovukPublishingComponents
|
|
|
54
54
|
component[:display_preview].nil? || component[:display_preview]
|
|
55
55
|
end
|
|
56
56
|
|
|
57
|
+
def capture_full_width_screenshot?
|
|
58
|
+
component[:capture_full_width_screenshot]
|
|
59
|
+
end
|
|
60
|
+
|
|
57
61
|
def uses_component_wrapper_helper?
|
|
58
62
|
component[:uses_component_wrapper_helper]
|
|
59
63
|
end
|
|
60
64
|
|
|
65
|
+
def get_govuk_container_class
|
|
66
|
+
capture_full_width_screenshot? ? "govuk-full-width-container" : "govuk-width-container"
|
|
67
|
+
end
|
|
68
|
+
|
|
61
69
|
def html_body
|
|
62
70
|
markdown_to_html(body) if body.present?
|
|
63
71
|
end
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
service_navigation_items ||= []
|
|
17
17
|
omit_feedback_form ||= false
|
|
18
18
|
omit_footer_navigation ||= false
|
|
19
|
-
omit_footer_border ||= false
|
|
20
19
|
omit_header ||= false
|
|
21
20
|
product_name ||= nil
|
|
22
21
|
service_name ||= nil
|
|
@@ -56,8 +55,7 @@
|
|
|
56
55
|
blue_bar_wrapper_classes << "gem-c-layout-for-public__blue-bar-wrapper--#{blue_bar_background_colour}" if blue_bar_background_colour
|
|
57
56
|
-%>
|
|
58
57
|
<!DOCTYPE html>
|
|
59
|
-
|
|
60
|
-
<!--[if gt IE 8]><!--><html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>"><!--<![endif]-->
|
|
58
|
+
<html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>">
|
|
61
59
|
<head>
|
|
62
60
|
<meta charset="utf-8" />
|
|
63
61
|
<title><%= title %></title>
|
|
@@ -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 %>
|
|
@@ -33,14 +33,12 @@
|
|
|
33
33
|
%>
|
|
34
34
|
<%= tag.div(**component_helper.all_attributes) do %>
|
|
35
35
|
<% if title.present? %>
|
|
36
|
-
<%=
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
} %>
|
|
43
|
-
<% end %>
|
|
36
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
37
|
+
text: sanitize(title),
|
|
38
|
+
font_size: "m",
|
|
39
|
+
inverse:,
|
|
40
|
+
margin_bottom: 0,
|
|
41
|
+
} %>
|
|
44
42
|
<% end %>
|
|
45
43
|
<dl class="gem-c-metadata__list">
|
|
46
44
|
<% if from.any? %>
|
|
@@ -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 %>
|
|
@@ -18,6 +18,7 @@ body: |
|
|
|
18
18
|
The header has space to optionally add links to different parts of your service, just as the current ‘service header’ component from the Design System does. Follow the same patterns for internal service navigation links as you do with the Design System service header.
|
|
19
19
|
|
|
20
20
|
Please refer to the [One Login Service Header GitHub repo](https://github.com/govuk-one-login/service-header) for further information
|
|
21
|
+
capture_full_width_screenshot: true
|
|
21
22
|
shared_accessibility_criteria:
|
|
22
23
|
- link
|
|
23
24
|
accessibility_criteria:
|
|
@@ -3,6 +3,7 @@ description: A layout to be used by public-facing applications
|
|
|
3
3
|
body: |
|
|
4
4
|
Because it is an entire HTML document, this component can only be [previewed on a separate page](/public).
|
|
5
5
|
|
|
6
|
+
capture_full_width_screenshot: true
|
|
6
7
|
display_preview: false
|
|
7
8
|
display_html: true
|
|
8
9
|
accessibility_criteria: |
|
|
@@ -6,6 +6,7 @@ body: |
|
|
|
6
6
|
govuk_frontend_components:
|
|
7
7
|
- header
|
|
8
8
|
uses_component_wrapper_helper: true
|
|
9
|
+
capture_full_width_screenshot: true
|
|
9
10
|
accessibility_excluded_rules:
|
|
10
11
|
- landmark-banner-is-top-level # The header element can not be top level in the examples
|
|
11
12
|
- duplicate-id # IDs will be duplicated in component examples list
|
|
@@ -31,17 +32,36 @@ examples:
|
|
|
31
32
|
environment: production
|
|
32
33
|
product_name: Product
|
|
33
34
|
with_navigation:
|
|
35
|
+
description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
|
|
34
36
|
data:
|
|
35
37
|
environment: production
|
|
36
38
|
navigation_items:
|
|
37
|
-
- text:
|
|
39
|
+
- text: Mainstream browse
|
|
38
40
|
href: "item-1"
|
|
39
41
|
active: true
|
|
40
|
-
- text:
|
|
42
|
+
- text: Step by steps
|
|
43
|
+
href: "item-2"
|
|
44
|
+
- text: Some kind of topic page
|
|
45
|
+
href: "item-3"
|
|
46
|
+
- text: Jonathan Doe
|
|
47
|
+
href: "item-4"
|
|
48
|
+
- text: Logout
|
|
49
|
+
href: "item-5"
|
|
50
|
+
with_deprecated_navigation:
|
|
51
|
+
description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
|
|
52
|
+
data:
|
|
53
|
+
environment: production
|
|
54
|
+
deprecated_navigation: true
|
|
55
|
+
navigation_items:
|
|
56
|
+
- text: Mainstream browse
|
|
57
|
+
href: "item-1"
|
|
58
|
+
active: true
|
|
59
|
+
- text: Step by steps
|
|
41
60
|
href: "item-2"
|
|
42
|
-
- text:
|
|
61
|
+
- text: Jonathan Doe
|
|
43
62
|
href: "item-3"
|
|
44
|
-
|
|
63
|
+
- text: Logout
|
|
64
|
+
href: "item-4"
|
|
45
65
|
with_product_name_and_navigation:
|
|
46
66
|
data:
|
|
47
67
|
product_name: Component Guide 999.9.9
|
|
@@ -52,9 +72,8 @@ examples:
|
|
|
52
72
|
active: true
|
|
53
73
|
- text: Navigation item 2
|
|
54
74
|
href: "item-2"
|
|
55
|
-
- text:
|
|
75
|
+
- text: Navigation item 3
|
|
56
76
|
href: "item-3"
|
|
57
|
-
show_only_in_collapsed_menu: true
|
|
58
77
|
with_navigation_link_data_attributes:
|
|
59
78
|
description: Supports adding data attributes i.e for tracking
|
|
60
79
|
data:
|
|
@@ -67,13 +86,11 @@ examples:
|
|
|
67
86
|
- text: Worldwide
|
|
68
87
|
href: "item-2"
|
|
69
88
|
full_width:
|
|
70
|
-
description: |
|
|
71
|
-
This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.
|
|
72
89
|
data:
|
|
73
90
|
environment: production
|
|
74
91
|
full_width: true
|
|
75
92
|
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)
|
|
93
|
+
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
94
|
data:
|
|
78
95
|
remove_bottom_border: true
|
|
79
96
|
with_custom_logo_link:
|
|
@@ -348,8 +348,14 @@ examples:
|
|
|
348
348
|
first_published: 14 June 2014
|
|
349
349
|
other:
|
|
350
350
|
Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
|
|
351
|
+
with_title:
|
|
352
|
+
data:
|
|
353
|
+
last_updated: 10 September 2015
|
|
354
|
+
see_updates_link: true
|
|
355
|
+
title: Title
|
|
351
356
|
on_a_dark_background:
|
|
352
357
|
data:
|
|
358
|
+
title: This is a title
|
|
353
359
|
inverse: true
|
|
354
360
|
from: [
|
|
355
361
|
"<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>",
|
|
@@ -371,6 +377,7 @@ examples:
|
|
|
371
377
|
on_a_dark_background_without_padding:
|
|
372
378
|
description: By default the inverse option includes extra spacing around the component. This option removes this padding. Note that both the `inverse` and `inverse_compress` options must be supplied.
|
|
373
379
|
data:
|
|
380
|
+
title: This is a title
|
|
374
381
|
inverse: true
|
|
375
382
|
inverse_compress: true
|
|
376
383
|
from: [
|
|
@@ -404,17 +411,3 @@ examples:
|
|
|
404
411
|
last_updated: 10 September 2015
|
|
405
412
|
see_updates_link: true
|
|
406
413
|
disable_ga4: true
|
|
407
|
-
with_title:
|
|
408
|
-
data:
|
|
409
|
-
last_updated: 10 September 2015
|
|
410
|
-
see_updates_link: true
|
|
411
|
-
title: Title
|
|
412
|
-
on_a_dark_background_with_title:
|
|
413
|
-
data:
|
|
414
|
-
inverse: true
|
|
415
|
-
other:
|
|
416
|
-
Release date: 23 August 2018 9:30am
|
|
417
|
-
Reason for change: Date of release brought forward from 23 August 2018 to 21 August 2018 as data in its final form is now available to be published on this new date.
|
|
418
|
-
title: The release date has been changed
|
|
419
|
-
context:
|
|
420
|
-
dark_background: true
|
|
@@ -8,6 +8,7 @@ accessibility_excluded_rules:
|
|
|
8
8
|
- duplicate-id-aria
|
|
9
9
|
- landmark-unique
|
|
10
10
|
uses_component_wrapper_helper: true
|
|
11
|
+
capture_full_width_screenshot: true
|
|
11
12
|
govuk_frontend_components:
|
|
12
13
|
- service-navigation
|
|
13
14
|
shared_accessibility_criteria:
|
|
@@ -39,4 +40,37 @@ examples:
|
|
|
39
40
|
- text: Navigation item 2
|
|
40
41
|
href: "#"
|
|
41
42
|
- text: Navigation item 3
|
|
42
|
-
href: "#"
|
|
43
|
+
href: "#"
|
|
44
|
+
with_data_attributes_on_items:
|
|
45
|
+
data:
|
|
46
|
+
navigation_items:
|
|
47
|
+
- text: Navigation item 1
|
|
48
|
+
href: "#"
|
|
49
|
+
active: true
|
|
50
|
+
data:
|
|
51
|
+
module: "example"
|
|
52
|
+
something_else: "hello"
|
|
53
|
+
- text: Navigation item 2
|
|
54
|
+
href: "#"
|
|
55
|
+
active: true
|
|
56
|
+
data:
|
|
57
|
+
module: "example-2"
|
|
58
|
+
something_else: "hello 2"
|
|
59
|
+
with_custom_aria_label_on_the_nav_element:
|
|
60
|
+
data:
|
|
61
|
+
navigation_items:
|
|
62
|
+
- text: Navigation item 1
|
|
63
|
+
href: "#"
|
|
64
|
+
active: true
|
|
65
|
+
- text: Navigation item 2
|
|
66
|
+
href: "#"
|
|
67
|
+
navigation_aria_label: "Custom label"
|
|
68
|
+
full_width:
|
|
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
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
<input type="hidden" name="url" value="<%= url_without_pii %>">
|
|
12
12
|
|
|
13
|
-
<
|
|
13
|
+
<h2 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h2>
|
|
14
14
|
<p id="feedback_explanation" class="gem-c-feedback__form-paragraph"><%= t("components.feedback.dont_include_personal_info") %></p>
|
|
15
15
|
|
|
16
16
|
<% # Added for spam bots only %>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div class="govuk-grid-column-two-thirds" id="survey-wrapper">
|
|
4
4
|
<div class="gem-c-feedback__error-summary js-errors" tabindex="-1" hidden></div>
|
|
5
5
|
|
|
6
|
-
<
|
|
6
|
+
<h2 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h2>
|
|
7
7
|
<p id="survey_explanation" class="gem-c-feedback__form-paragraph">
|
|
8
8
|
<%= t("components.feedback.more_about_visit") %>
|
|
9
9
|
<a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=no-js" class="govuk-link" target="_blank" rel="noopener noreferrer external">Please fill in this survey (opens in a new tab<noscript> and requires JavaScript</noscript>)</a>.
|
|
@@ -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>
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
<% content_for :body do %>
|
|
2
2
|
<% if @preview %>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
<%= tag.div id: "wrapper", class: @component_doc.get_govuk_container_class do %>
|
|
4
|
+
<main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing">
|
|
5
|
+
<%= yield %>
|
|
6
|
+
</main>
|
|
7
|
+
<% end %>
|
|
6
8
|
<% else %>
|
|
7
9
|
<%= render "govuk_publishing_components/components/layout_header", {
|
|
8
10
|
environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
|
|
9
11
|
product_name: "#{GovukPublishingComponents::Config.component_guide_title} #{GovukPublishingComponents::VERSION}",
|
|
10
12
|
href: component_guide_path
|
|
11
13
|
} %>
|
|
12
|
-
<div class="govuk-width-container
|
|
14
|
+
<div id="wrapper" class="govuk-width-container">
|
|
13
15
|
<% if @guide_breadcrumbs %>
|
|
14
16
|
<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs %>
|
|
15
17
|
<% end %>
|
|
16
|
-
<main
|
|
18
|
+
<main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing">
|
|
17
19
|
<%= yield %>
|
|
18
20
|
</main>
|
|
19
21
|
</div>
|
|
@@ -43,7 +45,7 @@
|
|
|
43
45
|
<%= render_component_stylesheets %>
|
|
44
46
|
<%= yield :extra_headers %>
|
|
45
47
|
</head>
|
|
46
|
-
<body class="gem-c-layout-for-admin govuk-template__body
|
|
48
|
+
<body class="gem-c-layout-for-admin govuk-template__body">
|
|
47
49
|
<%= javascript_tag nonce: true do -%>
|
|
48
50
|
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
|
|
49
51
|
<% end -%>
|