govuk_publishing_components 24.5.0 → 24.8.0
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/component_guide/application.js +3 -0
- data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +7 -5
- data/app/assets/javascripts/govuk_publishing_components/components/details.js +2 -1
- data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js +1 -0
- data/app/assets/javascripts/govuk_publishing_components/modules.js +3 -1
- data/app/assets/stylesheets/component_guide/application.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss +10 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +8 -7
- data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +15 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_summary-list.scss +12 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_title.scss +0 -5
- data/app/controllers/govuk_publishing_components/audit_controller.rb +21 -17
- data/app/controllers/govuk_publishing_components/component_guide_controller.rb +9 -0
- data/app/helpers/govuk_publishing_components/application_helper.rb +3 -0
- data/app/models/govuk_publishing_components/audit_applications.rb +3 -3
- data/app/models/govuk_publishing_components/audit_comparer.rb +16 -8
- data/app/models/govuk_publishing_components/audit_components.rb +6 -3
- data/app/views/govuk_publishing_components/audit/_applications.html.erb +126 -0
- data/app/views/govuk_publishing_components/audit/_components.html.erb +142 -0
- data/app/views/govuk_publishing_components/audit/show.html.erb +22 -277
- data/app/views/govuk_publishing_components/component_guide/index.html.erb +16 -0
- data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +7 -2
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +48 -7
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +15 -12
- data/app/views/govuk_publishing_components/components/_summary_list.html.erb +18 -13
- data/app/views/govuk_publishing_components/components/_title.html.erb +6 -2
- data/app/views/govuk_publishing_components/components/docs/button.yml +7 -6
- data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +3 -0
- data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml +26 -0
- data/app/views/govuk_publishing_components/components/docs/summary_list.yml +50 -19
- data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +8 -1
- data/config/locales/ar.yml +1 -0
- data/config/locales/az.yml +1 -0
- data/config/locales/be.yml +1 -0
- data/config/locales/bg.yml +1 -0
- data/config/locales/bn.yml +1 -0
- data/config/locales/cs.yml +1 -0
- data/config/locales/da.yml +1 -0
- data/config/locales/de.yml +1 -0
- data/config/locales/dr.yml +1 -0
- data/config/locales/el.yml +1 -0
- data/config/locales/es-419.yml +1 -0
- data/config/locales/es.yml +1 -0
- data/config/locales/fa.yml +1 -0
- data/config/locales/fi.yml +1 -0
- data/config/locales/gd.yml +1 -0
- data/config/locales/gu.yml +1 -0
- data/config/locales/he.yml +1 -0
- data/config/locales/hi.yml +1 -0
- data/config/locales/hr.yml +1 -0
- data/config/locales/hu.yml +1 -0
- data/config/locales/hy.yml +1 -0
- data/config/locales/id.yml +1 -0
- data/config/locales/is.yml +1 -0
- data/config/locales/it.yml +1 -0
- data/config/locales/ja.yml +1 -0
- data/config/locales/ka.yml +1 -0
- data/config/locales/kk.yml +1 -0
- data/config/locales/ko.yml +1 -0
- data/config/locales/lt.yml +1 -0
- data/config/locales/lv.yml +1 -0
- data/config/locales/ms.yml +1 -0
- data/config/locales/mt.yml +1 -0
- data/config/locales/nl.yml +1 -0
- data/config/locales/no.yml +1 -0
- data/config/locales/pa-pk.yml +1 -0
- data/config/locales/pa.yml +1 -0
- data/config/locales/pl.yml +1 -0
- data/config/locales/ps.yml +1 -0
- data/config/locales/pt.yml +1 -0
- data/config/locales/ro.yml +1 -0
- data/config/locales/ru.yml +1 -0
- data/config/locales/si.yml +1 -0
- data/config/locales/sk.yml +1 -0
- data/config/locales/sl.yml +1 -0
- data/config/locales/so.yml +1 -0
- data/config/locales/sq.yml +1 -0
- data/config/locales/sr.yml +1 -0
- data/config/locales/sv.yml +1 -0
- data/config/locales/sw.yml +1 -0
- data/config/locales/ta.yml +1 -0
- data/config/locales/th.yml +1 -0
- data/config/locales/tk.yml +1 -0
- data/config/locales/tr.yml +1 -0
- data/config/locales/uk.yml +1 -0
- data/config/locales/ur.yml +1 -0
- data/config/locales/uz.yml +1 -0
- data/config/locales/vi.yml +1 -0
- data/config/locales/zh-hk.yml +1 -0
- data/config/locales/zh-tw.yml +1 -0
- data/config/locales/zh.yml +1 -0
- data/lib/govuk_publishing_components/presenters/button_helper.rb +13 -2
- data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +5 -0
- data/lib/govuk_publishing_components/presenters/public_layout_helper.rb +15 -31
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +68 -6
|
@@ -21,8 +21,13 @@
|
|
|
21
21
|
width_class = "govuk-grid-column-one-third"
|
|
22
22
|
end
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
# If the list has multiple columns and there is only one link.
|
|
25
|
+
# This is to prevent a long link wrapping in a column, which
|
|
26
|
+
# leaves an obvious blank space to the right.
|
|
27
|
+
single_item_list = (( item[:columns] == 2 || item[:columns] == 3 ) && item[:items].length == 1 )
|
|
28
|
+
|
|
29
|
+
list_classes = %w[govuk-footer__list]
|
|
30
|
+
list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns] unless single_item_list
|
|
26
31
|
%>
|
|
27
32
|
<div class="<%= width_class %>">
|
|
28
33
|
<h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>
|
|
@@ -1,10 +1,33 @@
|
|
|
1
1
|
<%
|
|
2
|
-
|
|
3
|
-
html_lang ||= "en"
|
|
2
|
+
emergency_banner ||= nil
|
|
4
3
|
full_width ||= false
|
|
4
|
+
global_bar ||= nil
|
|
5
|
+
html_lang ||= "en"
|
|
6
|
+
layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
|
|
7
|
+
navigation_items ||= []
|
|
5
8
|
omit_header ||= false
|
|
6
9
|
show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
|
|
7
|
-
|
|
10
|
+
title ||= "GOV.UK - The best place to find government services and information"
|
|
11
|
+
|
|
12
|
+
# This is a hack - but it's the only way I can find to not have two blue bars on
|
|
13
|
+
# constrained width layouts.
|
|
14
|
+
#
|
|
15
|
+
# The full width layout hides the blue bar underneath the blar header bar - so
|
|
16
|
+
# full width pages won't see the blue bar unless it's added by another component
|
|
17
|
+
# - and for most pages that component is the global banner.
|
|
18
|
+
#
|
|
19
|
+
# The constrained width layout doesn't hide the blue bar - so having the global
|
|
20
|
+
# banner on a constrained width layout means there are two blue bars.
|
|
21
|
+
#
|
|
22
|
+
# The global banner is shown with JavaScript, so users without JavaScript won't
|
|
23
|
+
# see it. So the constrained width blue bar can't be turned off as then it'll be
|
|
24
|
+
# off for everyone.
|
|
25
|
+
#
|
|
26
|
+
# This booleon adds a CSS class that shifts the banners up by the blue bar's
|
|
27
|
+
# height, making the two blue bars overlap and appear as one. The class is added
|
|
28
|
+
# when a) there's content for the emergency or global banner *and* b) when using
|
|
29
|
+
# the contrained width layout.
|
|
30
|
+
blue_bar_dedupe = !full_width && global_bar.present?
|
|
8
31
|
-%>
|
|
9
32
|
<!DOCTYPE html>
|
|
10
33
|
<!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
|
|
@@ -48,13 +71,31 @@
|
|
|
48
71
|
<% unless omit_header %>
|
|
49
72
|
<%= render "govuk_publishing_components/components/layout_header", {
|
|
50
73
|
search: show_search,
|
|
51
|
-
|
|
52
|
-
|
|
74
|
+
navigation_items: navigation_items,
|
|
75
|
+
|
|
76
|
+
# The (blue) bottom border needs to be underneath the emergency banner -
|
|
77
|
+
# so it has been turned off and added in manually.
|
|
78
|
+
remove_bottom_border: true,
|
|
53
79
|
} %>
|
|
54
80
|
<% end %>
|
|
55
|
-
|
|
81
|
+
|
|
82
|
+
<%= raw(emergency_banner) %>
|
|
83
|
+
|
|
84
|
+
<% unless full_width %>
|
|
85
|
+
<div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
|
|
86
|
+
<% end %>
|
|
87
|
+
|
|
88
|
+
<% if global_bar.present? %>
|
|
89
|
+
<%= content_tag("div", {
|
|
90
|
+
class: blue_bar_dedupe ? "gem-c-layout-for-public__global-banner-wrapper" : nil,
|
|
91
|
+
}) do %>
|
|
92
|
+
<%= raw(global_bar) %>
|
|
93
|
+
<% end %>
|
|
94
|
+
<% end %>
|
|
95
|
+
|
|
96
|
+
<div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
|
|
56
97
|
<%= yield :before_content %>
|
|
57
|
-
<main class="govuk-main-wrapper">
|
|
98
|
+
<main class="govuk-main-wrapper" id="content">
|
|
58
99
|
<%= yield %>
|
|
59
100
|
</main>
|
|
60
101
|
</div>
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
<%
|
|
2
|
-
product_name ||= nil
|
|
3
2
|
environment ||= nil
|
|
4
3
|
full_width ||= false
|
|
5
|
-
search ||= false
|
|
6
|
-
search_left ||= false
|
|
7
|
-
navigation_items ||= []
|
|
8
4
|
navigation_aria_label ||= "Top level"
|
|
5
|
+
navigation_items ||= []
|
|
6
|
+
product_name ||= nil
|
|
9
7
|
remove_bottom_border ||= false
|
|
8
|
+
search ||= false
|
|
10
9
|
search_left ||= false
|
|
11
10
|
width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
|
|
12
11
|
|
|
13
|
-
header_classes = %w
|
|
12
|
+
header_classes = %w[gem-c-layout-header govuk-header]
|
|
14
13
|
header_classes << "gem-c-layout-header--#{environment}" if environment
|
|
15
14
|
header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
|
|
16
15
|
header_classes << "gem-c-layout-header--search-left" if search_left
|
|
@@ -28,18 +27,22 @@
|
|
|
28
27
|
<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
|
|
29
28
|
<%= render "govuk_publishing_components/components/layout_header/search" %>
|
|
30
29
|
</div>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
<% if navigation_items.any? %>
|
|
31
|
+
<div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
|
|
32
|
+
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
|
|
33
|
+
</div>
|
|
34
|
+
<% end %>
|
|
34
35
|
</div>
|
|
35
36
|
<% else %>
|
|
36
|
-
<div class="govuk-grid-row
|
|
37
|
+
<div class="govuk-grid-row">
|
|
37
38
|
<div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
|
|
38
39
|
<%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
|
|
39
40
|
</div>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
<% if navigation_items.any? %>
|
|
42
|
+
<div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
|
|
43
|
+
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
|
|
44
|
+
</div>
|
|
45
|
+
<% end %>
|
|
43
46
|
<% if search %>
|
|
44
47
|
<div class="govuk-grid-column-one-third gem-c-layout-header__search">
|
|
45
48
|
<%= render "govuk_publishing_components/components/layout_header/search" %>
|
|
@@ -10,32 +10,35 @@
|
|
|
10
10
|
delete ||= {}
|
|
11
11
|
items ||= []
|
|
12
12
|
block ||= yield
|
|
13
|
+
wide_title ||= false
|
|
13
14
|
%>
|
|
14
15
|
<% if title || items.any? %>
|
|
15
|
-
<%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless}", id: id do %>
|
|
16
|
+
<%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless} #{"gem-c-summary-list--wide-title" if wide_title}", id: id do %>
|
|
16
17
|
<% if title %>
|
|
17
18
|
<%= content_tag(shared_helper.get_heading_level, title, class: "govuk-heading-#{heading_size} gem-c-summary-list__group-title") %>
|
|
18
19
|
|
|
19
20
|
<% if edit.any? %>
|
|
20
21
|
<% edit_main_link = capture do %>
|
|
21
|
-
<%
|
|
22
|
+
<%
|
|
23
|
+
edit_section_link_text = edit[:link_text] || t("components.summary_list.edit")
|
|
24
|
+
%>
|
|
22
25
|
<%= link_to edit.fetch(:href),
|
|
23
26
|
class: "govuk-link",
|
|
24
|
-
title: "#{edit_section_link_text} #{title}",
|
|
25
27
|
data: edit.fetch(:data_attributes, {}) do %>
|
|
26
|
-
<%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
|
|
28
|
+
<%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless edit[:link_text_no_enhance] -%>
|
|
27
29
|
<% end %>
|
|
28
30
|
<% end %>
|
|
29
31
|
<% end %>
|
|
30
32
|
|
|
31
33
|
<% if delete.any? %>
|
|
32
34
|
<% delete_main_link = capture do %>
|
|
33
|
-
<%
|
|
35
|
+
<%
|
|
36
|
+
delete_section_link_text = delete[:link_text] || t("components.summary_list.delete")
|
|
37
|
+
%>
|
|
34
38
|
<%= link_to delete.fetch(:href),
|
|
35
39
|
class: "govuk-link gem-link--destructive",
|
|
36
|
-
title: "#{delete_section_link_text} #{title}",
|
|
37
40
|
data: delete.fetch(:data_attributes, {}) do %>
|
|
38
|
-
<%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
|
|
41
|
+
<%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless delete[:link_text_no_enhance] -%>
|
|
39
42
|
<% end %>
|
|
40
43
|
<% end %>
|
|
41
44
|
<% end %>
|
|
@@ -72,24 +75,26 @@
|
|
|
72
75
|
|
|
73
76
|
<% if item.fetch(:edit, {}).any? %>
|
|
74
77
|
<% edit_link = capture do %>
|
|
75
|
-
<%
|
|
78
|
+
<%
|
|
79
|
+
edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit")
|
|
80
|
+
%>
|
|
76
81
|
<%= link_to item[:edit].fetch(:href),
|
|
77
82
|
class: "govuk-link",
|
|
78
|
-
title: "#{edit_link_text} #{item[:field]}",
|
|
79
83
|
data: item[:edit].fetch(:data_attributes, {}) do %>
|
|
80
|
-
<%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
|
|
84
|
+
<%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:edit][:link_text_no_enhance] -%>
|
|
81
85
|
<% end %>
|
|
82
86
|
<% end %>
|
|
83
87
|
<% end %>
|
|
84
88
|
|
|
85
89
|
<% if item.fetch(:delete, {}).any? %>
|
|
86
90
|
<% delete_link = capture do %>
|
|
87
|
-
<%
|
|
91
|
+
<%
|
|
92
|
+
delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete")
|
|
93
|
+
%>
|
|
88
94
|
<%= link_to item[:delete].fetch(:href),
|
|
89
95
|
class: "govuk-link gem-link--destructive",
|
|
90
|
-
title: "#{delete_link_text} #{item[:field]}",
|
|
91
96
|
data: item[:delete].fetch(:data_attributes, {}) do %>
|
|
92
|
-
<%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
|
|
97
|
+
<%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:delete][:link_text_no_enhance] -%>
|
|
93
98
|
<% end %>
|
|
94
99
|
<% end %>
|
|
95
100
|
<% end %>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<%
|
|
2
2
|
average_title_length ||= false
|
|
3
|
+
|
|
3
4
|
context ||= false
|
|
4
5
|
context_locale ||= false
|
|
5
6
|
context_text = context.is_a?(Hash) ? context[:text] : context
|
|
@@ -12,10 +13,13 @@
|
|
|
12
13
|
|
|
13
14
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
14
15
|
|
|
15
|
-
classes = %w
|
|
16
|
+
classes = %w[gem-c-title]
|
|
16
17
|
classes << "gem-c-title--inverse" if inverse
|
|
17
18
|
classes << (shared_helper.get_margin_top)
|
|
18
19
|
classes << (shared_helper.get_margin_bottom)
|
|
20
|
+
|
|
21
|
+
heading_classes = %w[gem-c-title__text]
|
|
22
|
+
heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
|
|
19
23
|
%>
|
|
20
24
|
<%= content_tag(:div, class: classes) do %>
|
|
21
25
|
<% if context %>
|
|
@@ -23,7 +27,7 @@
|
|
|
23
27
|
<%= context_href ? link_to(context_text, context_href, class: 'gem-c-title__context-link govuk-link', data: context_data) : context_text %>
|
|
24
28
|
</span>
|
|
25
29
|
<% end %>
|
|
26
|
-
<h1 class="
|
|
30
|
+
<h1 class="<%= heading_classes.join(" ") %>">
|
|
27
31
|
<%= title %>
|
|
28
32
|
</h1>
|
|
29
33
|
<% end %>
|
|
@@ -66,18 +66,19 @@ examples:
|
|
|
66
66
|
href: "#"
|
|
67
67
|
start: true
|
|
68
68
|
info_text: "Sometimes you want to explain where a user is going to."
|
|
69
|
+
with_margin_bottom:
|
|
70
|
+
description: "The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom."
|
|
71
|
+
data:
|
|
72
|
+
text: "Submit"
|
|
73
|
+
margin_bottom: 6
|
|
69
74
|
start_now_button_with_info_text_and_margin_bottom:
|
|
75
|
+
description: "When the component requires margin bottom and has info text, the margin is applied to the info text."
|
|
70
76
|
data:
|
|
71
77
|
text: "Start now"
|
|
72
78
|
href: "#"
|
|
73
79
|
start: true
|
|
74
80
|
info_text: "Sometimes you want to explain where a user is going to and have a margin bottom"
|
|
75
|
-
margin_bottom:
|
|
76
|
-
with_margin_bottom:
|
|
77
|
-
description: "Sometimes it's useful to break up a page, for example if a button is at the bottom of a page."
|
|
78
|
-
data:
|
|
79
|
-
text: "Submit"
|
|
80
|
-
margin_bottom: true
|
|
81
|
+
margin_bottom: 6
|
|
81
82
|
extreme_text:
|
|
82
83
|
data:
|
|
83
84
|
text: "I'm a button with lots of text to test how the component scales at extremes."
|
|
@@ -155,6 +155,7 @@ examples:
|
|
|
155
155
|
content_item:
|
|
156
156
|
title: "Transport news story"
|
|
157
157
|
content_id: "3c402d90-fe77-49b9-a8aa-1800d4fc2b3d"
|
|
158
|
+
locale: "en"
|
|
158
159
|
links:
|
|
159
160
|
ordered_related_items:
|
|
160
161
|
- title: Find an apprenticeship
|
|
@@ -180,6 +181,7 @@ examples:
|
|
|
180
181
|
content_item:
|
|
181
182
|
title: "30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"
|
|
182
183
|
content_id: "c3752802-f091-43a9-ba90-33568fccf391"
|
|
184
|
+
locale: "en"
|
|
183
185
|
links:
|
|
184
186
|
ordered_related_items:
|
|
185
187
|
- title: Find an apprenticeship
|
|
@@ -205,6 +207,7 @@ examples:
|
|
|
205
207
|
content_item:
|
|
206
208
|
title: "Local transport news story"
|
|
207
209
|
content_id: "5c82db20-7631-11e4-a3cb-005056011aef"
|
|
210
|
+
locale: "en"
|
|
208
211
|
links:
|
|
209
212
|
ordered_related_items:
|
|
210
213
|
- title: Find an apprenticeship
|
|
@@ -27,3 +27,29 @@ examples:
|
|
|
27
27
|
description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
|
|
28
28
|
data:
|
|
29
29
|
omit_header: true
|
|
30
|
+
navigation:
|
|
31
|
+
description: Passes the navigation through to the [header component](/component-guide/layout_header/).
|
|
32
|
+
data:
|
|
33
|
+
show_search: false
|
|
34
|
+
navigation_items:
|
|
35
|
+
- text: Navigation item 1
|
|
36
|
+
href: "item-1"
|
|
37
|
+
active: true
|
|
38
|
+
- text: Navigation item 2
|
|
39
|
+
href: "item-2"
|
|
40
|
+
- text: Hidden on desktop
|
|
41
|
+
href: "item-3"
|
|
42
|
+
show_only_in_collapsed_menu: true
|
|
43
|
+
with_global_banner:
|
|
44
|
+
description: This allows the HTML for the global banner to be added to the page. This is only the slot for the global banner - the markup for the banner needs to be passed in.
|
|
45
|
+
data:
|
|
46
|
+
global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
|
|
47
|
+
with_emergency_banner:
|
|
48
|
+
description: This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
|
|
49
|
+
data:
|
|
50
|
+
emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
|
|
51
|
+
with_global_and_emergency_banner:
|
|
52
|
+
description: Both global banner and emergency banner should be usable together.
|
|
53
|
+
data:
|
|
54
|
+
emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
|
|
55
|
+
global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
|
|
@@ -35,6 +35,7 @@ examples:
|
|
|
35
35
|
borderless: true
|
|
36
36
|
|
|
37
37
|
with_edit_on_section:
|
|
38
|
+
description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
|
|
38
39
|
data:
|
|
39
40
|
<<: *default-example-data
|
|
40
41
|
edit:
|
|
@@ -43,6 +44,7 @@ examples:
|
|
|
43
44
|
gtm: "edit-title-summary-body"
|
|
44
45
|
|
|
45
46
|
with_delete_on_section:
|
|
47
|
+
description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
|
|
46
48
|
data:
|
|
47
49
|
<<: *default-example-data
|
|
48
50
|
delete:
|
|
@@ -51,6 +53,7 @@ examples:
|
|
|
51
53
|
gtm: "delete-title-summary-body"
|
|
52
54
|
|
|
53
55
|
with_edit_and_delete_on_section:
|
|
56
|
+
description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
|
|
54
57
|
data:
|
|
55
58
|
<<: *default-example-data
|
|
56
59
|
edit:
|
|
@@ -62,32 +65,45 @@ examples:
|
|
|
62
65
|
data_attributes:
|
|
63
66
|
gtm: "delete-title-summary-body"
|
|
64
67
|
|
|
68
|
+
with_customised_links:
|
|
69
|
+
description: |
|
|
70
|
+
For all links shown in the component, visually hidden text containing the name of the thing it refers to is automatically appended. This offers a better experience for screen reader users by making the link text unique and more explicit. In the example below, the link text would be `Change Title, summary and body`.
|
|
71
|
+
|
|
72
|
+
The text of the link can be customised using the `link_text` option. Take care that the provided `link_text` still makes sense to screen readers when combined with the title. For instance, `Reorder` link text and `Items` title becomes `Reorder Items`, which reads fine, but link text of `Summary` would read as `Summary Items`, which does not make sense.
|
|
73
|
+
|
|
74
|
+
To override this behaviour, use `link_text_no_enhance` on the link in question, as shown. This will remove the visually hidden text, allowing you to add your own. The component will render a `span` element with a class of `govuk-visually-hidden` included in a passed [capture block](https://apidock.com/rails/ActionView/Helpers/CaptureHelper/capture) as the `link_text` parameter.
|
|
75
|
+
data:
|
|
76
|
+
title: "Title, summary and body"
|
|
77
|
+
items:
|
|
78
|
+
- field: "Title"
|
|
79
|
+
value: "Rural conservation techniques"
|
|
80
|
+
edit:
|
|
81
|
+
href: "edit-title"
|
|
82
|
+
text: "Edit"
|
|
83
|
+
data_attributes:
|
|
84
|
+
gtm: "edit-title"
|
|
85
|
+
- field: "Body"
|
|
86
|
+
value: "Following the land use committee change to overreaching rural byelaws in 2009, further policies were adopted."
|
|
87
|
+
edit:
|
|
88
|
+
href: "edit-body"
|
|
89
|
+
link_text: "Edit"
|
|
90
|
+
delete:
|
|
91
|
+
href: "delete-body"
|
|
92
|
+
link_text: "Remove"
|
|
93
|
+
link_text_no_enhance: true
|
|
94
|
+
edit:
|
|
95
|
+
href: "edit-title-summary-body"
|
|
96
|
+
link_text: Edit this document <span class="govuk-visually-hidden">my hidden text for screenreaders</span>
|
|
97
|
+
link_text_no_enhance: true
|
|
98
|
+
|
|
65
99
|
with_custom_section_heading:
|
|
66
100
|
data:
|
|
67
101
|
<<: *default-example-data
|
|
68
102
|
heading_level: 2
|
|
69
103
|
heading_size: l
|
|
70
104
|
|
|
71
|
-
with_custom_link_on_section:
|
|
72
|
-
description: |
|
|
73
|
-
Take care that the provided `link_text` still makes sense to screen readers when combined with the title.
|
|
74
|
-
For instance, `Reorder` link text and `Items` title becomes `Reorder Items`, which reads fine, but link text
|
|
75
|
-
of `Summary` would read as `Summary Items`, which does not make sense.
|
|
76
|
-
data:
|
|
77
|
-
edit:
|
|
78
|
-
href: "custom-link"
|
|
79
|
-
link_text: "Reorder"
|
|
80
|
-
title: "Items"
|
|
81
|
-
items:
|
|
82
|
-
- field: "Item 1"
|
|
83
|
-
value: "Value 2"
|
|
84
|
-
- field: "Item 2"
|
|
85
|
-
value: "Value 2"
|
|
86
|
-
- field: "Item 3"
|
|
87
|
-
value: "Value 3"
|
|
88
|
-
|
|
89
105
|
with_edit_on_individual_items:
|
|
90
|
-
description:
|
|
106
|
+
description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
|
|
91
107
|
data:
|
|
92
108
|
title: "Title, summary and body"
|
|
93
109
|
items:
|
|
@@ -113,6 +129,21 @@ examples:
|
|
|
113
129
|
href: "delete-body"
|
|
114
130
|
link_text: "Remove"
|
|
115
131
|
|
|
132
|
+
wide_title_layout:
|
|
133
|
+
description: Allows a slightly adjusted layout for longer text in the field name.
|
|
134
|
+
data:
|
|
135
|
+
title: Privacy settings
|
|
136
|
+
wide_title: true
|
|
137
|
+
items:
|
|
138
|
+
- field: "GOV.UK can use cookies while you’re signed in"
|
|
139
|
+
value: "No"
|
|
140
|
+
edit:
|
|
141
|
+
href: "edit-cookies"
|
|
142
|
+
- field: "GOV.UK can send you feedback emails"
|
|
143
|
+
value: "Yes"
|
|
144
|
+
edit:
|
|
145
|
+
href: "edit-feedback"
|
|
146
|
+
|
|
116
147
|
with_block:
|
|
117
148
|
description: Use the summary list with a block when you need to show an empty state message or load another component.
|
|
118
149
|
data:
|
data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
<% navigation_aria_label ||= "Top level" %>
|
|
2
2
|
|
|
3
3
|
<% if navigation_items.any? %>
|
|
4
|
-
<button
|
|
4
|
+
<button
|
|
5
|
+
aria-controls="navigation"
|
|
6
|
+
aria-label="Show or hide Top Level Navigation"
|
|
7
|
+
class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button"
|
|
8
|
+
type="button"
|
|
9
|
+
>
|
|
10
|
+
Menu
|
|
11
|
+
</button>
|
|
5
12
|
<%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
|
|
6
13
|
<ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
|
|
7
14
|
<% navigation_items.each_with_index do |item, index| %>
|