govuk_publishing_components 9.4.0 → 9.5.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/govuk_publishing_components/admin_scripts.js +4 -0
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +57 -86
- data/app/assets/stylesheets/component_guide/application.scss +0 -10
- data/app/assets/stylesheets/govuk_publishing_components/admin_styles.scss +3 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +30 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss +11 -31
- data/app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +1 -70
- data/app/views/govuk_publishing_components/component_guide/show.html.erb +3 -6
- data/app/views/govuk_publishing_components/components/_contextual_breadcrumbs.html.erb +23 -21
- data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +22 -20
- data/app/views/govuk_publishing_components/components/_government_navigation.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_layout_for_admin.html.erb +5 -2
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +48 -0
- data/app/views/govuk_publishing_components/components/_notice.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +6 -2
- data/app/views/govuk_publishing_components/components/_skip_link.html.erb +4 -0
- data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +0 -7
- data/app/views/govuk_publishing_components/components/docs/layout_for_admin.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/layout_header.yml +57 -0
- data/app/views/govuk_publishing_components/components/docs/notice.yml +4 -0
- data/app/views/govuk_publishing_components/components/docs/skip_link.yml +16 -0
- data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml +1 -190
- data/app/views/layouts/govuk_publishing_components/application.html.erb +3 -0
- data/config/initializers/assets.rb +2 -0
- data/lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb +0 -26
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +9 -3
- data/app/assets/javascripts/govuk_publishing_components/lib/history-support.js +0 -8
|
@@ -2,12 +2,9 @@
|
|
|
2
2
|
<%= render 'govuk_publishing_components/components/title', title: @component_doc.name, context: "Component" %>
|
|
3
3
|
|
|
4
4
|
<% if @component_doc.part_of_admin_layout? %>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
This component uses the Design System, so only works inside the <%= link_to "admin layout", "/component-guide/layout_for_admin" %>
|
|
9
|
-
</p>
|
|
10
|
-
</div>
|
|
5
|
+
<%= render "govuk_publishing_components/components/notice", title: "Admin layout only" do %>
|
|
6
|
+
<p>This component only works inside the <%= link_to "layout for admin component", "/component-guide/layout_for_admin" %>.</p>
|
|
7
|
+
<% end %>
|
|
11
8
|
<% end %>
|
|
12
9
|
|
|
13
10
|
<div class="component-show">
|
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request.path) %>
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
3
|
+
<div class='gem-c-contextual-breadcrumbs'>
|
|
4
|
+
<% if navigation.content_tagged_to_single_step_by_step? %>
|
|
5
|
+
<!-- Rendering step by step nav breadcrumbs because there's 1 step by step -->
|
|
6
|
+
<%= render 'govuk_publishing_components/components/step_by_step_nav_header',
|
|
7
|
+
navigation.step_nav_helper.header %>
|
|
8
|
+
<% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
|
|
9
|
+
<!-- Rendering parent-based breadcrumbs because the page is tagged to mainstream browse -->
|
|
10
|
+
<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs %>
|
|
11
|
+
<% elsif navigation.content_has_curated_related_items? %>
|
|
12
|
+
<!-- Rendering parent-based breadcrumbs because the page has curated related links -->
|
|
13
|
+
<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs %>
|
|
14
|
+
<% elsif navigation.content_is_tagged_to_a_live_taxon? %>
|
|
15
|
+
<!-- Rendering taxonomy breadcrumbs because the page is tagged to live taxons -->
|
|
16
|
+
<%= render 'govuk_publishing_components/components/breadcrumbs',
|
|
17
|
+
breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
|
|
18
|
+
collapse_on_mobile: true %>
|
|
19
|
+
<% elsif navigation.breadcrumbs.any? %>
|
|
20
|
+
<!-- Rendering parent-based breadcrumbs because no browse, no related links, no live taxons -->
|
|
21
|
+
<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs %>
|
|
22
|
+
<% else %>
|
|
23
|
+
<!-- Not rendering any breadcrumbs because there aren't any -->
|
|
24
|
+
<% end %>
|
|
25
|
+
</div>
|
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request.path) %>
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
<div class="gem-c-contextual-sidebar">
|
|
4
|
+
<% if navigation.content_tagged_to_a_reasonable_number_of_step_by_steps? %>
|
|
5
|
+
<!-- Rendering step by step related items because there are a few but not too many of them -->
|
|
6
|
+
<%= render 'govuk_publishing_components/components/step_by_step_nav_related', links: navigation.step_nav_helper.related_links %>
|
|
7
|
+
<% end %>
|
|
7
8
|
|
|
8
|
-
<% if navigation.content_tagged_to_single_step_by_step? %>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<% elsif navigation.content_has_curated_related_items? %>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<% elsif navigation.content_is_tagged_to_a_live_taxon? %>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<% else %>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<% end %>
|
|
9
|
+
<% if navigation.content_tagged_to_single_step_by_step? %>
|
|
10
|
+
<!-- Rendering step by step sidebar because there's 1 step by step list -->
|
|
11
|
+
<%= render 'govuk_publishing_components/components/step_by_step_nav', navigation.step_nav_helper.sidebar %>
|
|
12
|
+
<% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
|
|
13
|
+
<!-- Rendering related navigation sidebar because the page is tagged to mainstream browse -->
|
|
14
|
+
<%= render 'govuk_publishing_components/components/related_navigation', content_item %>
|
|
15
|
+
<% elsif navigation.content_has_curated_related_items? %>
|
|
16
|
+
<!-- Rendering related navigation sidebar because the page has curated related links -->
|
|
17
|
+
<%= render 'govuk_publishing_components/components/related_navigation', content_item %>
|
|
18
|
+
<% elsif navigation.content_is_tagged_to_a_live_taxon? %>
|
|
19
|
+
<!-- Rendering taxonomy sidebar because the page is tagged to live taxons -->
|
|
20
|
+
<%= render 'govuk_publishing_components/components/taxonomy_navigation', navigation.taxonomy_sidebar %>
|
|
21
|
+
<% else %>
|
|
22
|
+
<!-- Rendering related navigation sidebar because no browse, no related links, no live taxons -->
|
|
23
|
+
<%= render 'govuk_publishing_components/components/related_navigation', content_item %>
|
|
24
|
+
<% end %>
|
|
25
|
+
</div>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
active ||= nil
|
|
3
3
|
%>
|
|
4
4
|
|
|
5
|
-
<nav id="proposition-menu" class="no-proposition-name">
|
|
5
|
+
<nav id="proposition-menu" class="no-proposition-name gem-c-government-navigation">
|
|
6
6
|
<ul id="proposition-links">
|
|
7
7
|
<li>
|
|
8
8
|
<a class="<%= 'active' if active == 'departments' %>" href="/government/organisations">
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
2
|
+
<html lang="en" class="govuk-template">
|
|
3
3
|
<head>
|
|
4
|
+
<meta name="robots" content="noindex,nofollow,noimageindex">
|
|
5
|
+
<%= csrf_meta_tags %>
|
|
4
6
|
<title><%= browser_title %></title>
|
|
5
|
-
<%= stylesheet_link_tag
|
|
7
|
+
<%= stylesheet_link_tag "govuk_publishing_components/admin_styles" %>
|
|
6
8
|
</head>
|
|
7
9
|
<body class="govuk-template__body">
|
|
8
10
|
<%= yield %>
|
|
11
|
+
<%= javascript_include_tag "govuk_publishing_components/admin_scripts" %>
|
|
9
12
|
</body>
|
|
10
13
|
</html>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<%
|
|
2
|
+
product_name ||= false
|
|
3
|
+
navigation_items ||= []
|
|
4
|
+
%>
|
|
5
|
+
<header class="gem-c-layout-header govuk-header gem-c-layout-header--<%= environment %>" role="banner" data-module="header">
|
|
6
|
+
<div class="govuk-header__container govuk-width-container">
|
|
7
|
+
|
|
8
|
+
<div class="govuk-header__logo">
|
|
9
|
+
<a href="/" class="govuk-header__link govuk-header__link--homepage">
|
|
10
|
+
<span class="govuk-header__logotype">
|
|
11
|
+
<svg role="presentation" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
|
|
12
|
+
<path fill="currentColor" fill-rule="evenodd"
|
|
13
|
+
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"
|
|
14
|
+
></path>
|
|
15
|
+
<image src="<%= asset_path('govuk-logotype-crown.png') %>" class="govuk-header__logotype-crown-fallback-image"></image>
|
|
16
|
+
</svg>
|
|
17
|
+
<span class="govuk-header__logotype-text">
|
|
18
|
+
GOV.UK
|
|
19
|
+
</span>
|
|
20
|
+
</span>
|
|
21
|
+
<% if product_name %>
|
|
22
|
+
<span class="govuk-header__product-name">
|
|
23
|
+
<%= product_name %>
|
|
24
|
+
</span>
|
|
25
|
+
<% end %>
|
|
26
|
+
</a>
|
|
27
|
+
</div><div class="govuk-header__content">
|
|
28
|
+
|
|
29
|
+
<% if navigation_items.any? %>
|
|
30
|
+
<button role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
|
|
31
|
+
<nav>
|
|
32
|
+
<ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
|
|
33
|
+
<% navigation_items.each_with_index do |item, index| %>
|
|
34
|
+
<li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>">
|
|
35
|
+
<%= link_to(
|
|
36
|
+
item[:text],
|
|
37
|
+
item[:href],
|
|
38
|
+
class: 'govuk-header__link',
|
|
39
|
+
) %>
|
|
40
|
+
</li>
|
|
41
|
+
<% end %>
|
|
42
|
+
</ul>
|
|
43
|
+
</nav>
|
|
44
|
+
<% end %>
|
|
45
|
+
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</header>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<% if defined?(title) %>
|
|
2
2
|
<%
|
|
3
3
|
description_text ||= false
|
|
4
|
-
description_govspeak ||= false
|
|
4
|
+
description_govspeak ||= yield || false
|
|
5
5
|
margin_bottom_class = " gem-c-notice--bottom-margin" unless local_assigns[:margin_bottom]
|
|
6
6
|
%>
|
|
7
7
|
<section class="gem-c-notice<%= margin_bottom_class %>" aria-label="Notice" role="region">
|
|
8
|
-
<% if description_text || description_govspeak %>
|
|
8
|
+
<% if description_text.present? || description_govspeak.present? %>
|
|
9
9
|
<h2 class="gem-c-notice__title"><%= title %></h2>
|
|
10
10
|
<% else %>
|
|
11
11
|
<span class="gem-c-notice__title"><%= title %></span>
|
data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb
CHANGED
|
@@ -20,7 +20,9 @@
|
|
|
20
20
|
<svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
|
|
21
21
|
<path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
|
|
22
22
|
</svg>
|
|
23
|
-
|
|
23
|
+
<span class="gem-c-pagination__link-text">
|
|
24
|
+
<%= previous_page[:title] %>
|
|
25
|
+
</span>
|
|
24
26
|
</span>
|
|
25
27
|
<% if previous_page[:label].present? %>
|
|
26
28
|
<span class="visually-hidden">:</span>
|
|
@@ -41,10 +43,12 @@
|
|
|
41
43
|
data-track-dimension-index="29"
|
|
42
44
|
>
|
|
43
45
|
<span class="gem-c-pagination__link-title">
|
|
44
|
-
<%= next_page[:title] %>
|
|
45
46
|
<svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
|
|
46
47
|
<path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
|
|
47
48
|
</svg>
|
|
49
|
+
<span class="gem-c-pagination__link-text">
|
|
50
|
+
<%= next_page[:title] %>
|
|
51
|
+
</span>
|
|
48
52
|
</span>
|
|
49
53
|
<% if next_page[:label].present? %>
|
|
50
54
|
<span class="visually-hidden">:</span>
|
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
show_step ||= false
|
|
8
8
|
remember_last_step ||= false
|
|
9
9
|
step_nav_url ||= false
|
|
10
|
-
step_nav_link_text ||= "Get help completing this step"
|
|
11
10
|
highlight_step ||= false
|
|
12
11
|
tracking_id ||= false
|
|
13
12
|
|
|
@@ -85,12 +84,6 @@
|
|
|
85
84
|
end
|
|
86
85
|
%>
|
|
87
86
|
<% end %>
|
|
88
|
-
|
|
89
|
-
<% if step_nav_url && step[:show_help_link] %>
|
|
90
|
-
<div class="gem-c-step-nav__help">
|
|
91
|
-
<a href="<%= step_nav_url %>#<%= id %>" class="gem-c-step-nav__help-link js-link" data-position="get-help"><%= step_nav_link_text %></a>
|
|
92
|
-
</div>
|
|
93
|
-
<% end %>
|
|
94
87
|
</div>
|
|
95
88
|
|
|
96
89
|
</li>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
name: Layout header (experimental)
|
|
2
|
+
description: The header provides the crown logo, product or service name and navigation
|
|
3
|
+
body: |
|
|
4
|
+
Requires the specification of the environment (development, integration,
|
|
5
|
+
staging or production).
|
|
6
|
+
part_of_admin_layout: true
|
|
7
|
+
govuk_frontend_components:
|
|
8
|
+
- header
|
|
9
|
+
examples:
|
|
10
|
+
default:
|
|
11
|
+
data:
|
|
12
|
+
environment: production
|
|
13
|
+
staging_environment:
|
|
14
|
+
data:
|
|
15
|
+
environment: staging
|
|
16
|
+
integration_environment:
|
|
17
|
+
data:
|
|
18
|
+
environment: integration
|
|
19
|
+
development_environment:
|
|
20
|
+
data:
|
|
21
|
+
environment: development
|
|
22
|
+
with_product_name:
|
|
23
|
+
data:
|
|
24
|
+
environment: production
|
|
25
|
+
product_name: Product
|
|
26
|
+
with_navigation:
|
|
27
|
+
data:
|
|
28
|
+
environment: production
|
|
29
|
+
navigation_items:
|
|
30
|
+
- text: Navigation item 1
|
|
31
|
+
href: "#1"
|
|
32
|
+
active: true
|
|
33
|
+
- text: Navigation item 2
|
|
34
|
+
href: "#2"
|
|
35
|
+
|
|
36
|
+
accessibility_criteria: |
|
|
37
|
+
The component must:
|
|
38
|
+
|
|
39
|
+
- have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
|
|
40
|
+
|
|
41
|
+
Links in the Header must:
|
|
42
|
+
|
|
43
|
+
- accept focus
|
|
44
|
+
- be focusable with a keyboard
|
|
45
|
+
- be usable with a keyboard
|
|
46
|
+
- indicate when they have focus
|
|
47
|
+
- change in appearance when touched (in the touch-down state)
|
|
48
|
+
- change in appearance when hovered
|
|
49
|
+
- have visible text
|
|
50
|
+
|
|
51
|
+
Images in the Header must:
|
|
52
|
+
|
|
53
|
+
- be presentational when linked to from accompanying text (crown icon).
|
|
54
|
+
|
|
55
|
+
Landmarks and Roles in the Header should:
|
|
56
|
+
|
|
57
|
+
- have a role of `banner` at the root of the component (<header>) ([ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/#banner))
|
|
@@ -21,6 +21,10 @@ examples:
|
|
|
21
21
|
data:
|
|
22
22
|
title: 'Statistics release update'
|
|
23
23
|
description_govspeak: '<p>The Oil & Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.</p><p>This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to <a rel="external" href="https://www.ogauthority.co.uk/news-publications/announcements/2015/establishment-of-the-oil-and-gas-authority-1/">www.ogauthority.co.uk</a></p>'
|
|
24
|
+
with_govspeak_from_a_block:
|
|
25
|
+
data:
|
|
26
|
+
title: 'Statistics release update'
|
|
27
|
+
block: '<p>The Oil & Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.</p><p>This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to <a rel="external" href="https://www.ogauthority.co.uk/news-publications/announcements/2015/establishment-of-the-oil-and-gas-authority-1/">www.ogauthority.co.uk</a></p>'
|
|
24
28
|
with_markup_in_the_title:
|
|
25
29
|
description: In some circumstances it may be necessary to include simple markup in the title, such as a link. Note that this will be wrapped in a H2 tag if there is no description included, so be sure that any markup inserted is valid inside that tag (e.g. another heading tag inside a H2 would be invalid).
|
|
26
30
|
data:
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
name: Skip link (experimental)
|
|
2
|
+
description: Skip link component helps keyboard-only users skip to the main content on a page
|
|
3
|
+
part_of_admin_layout: true
|
|
4
|
+
govuk_frontend_components:
|
|
5
|
+
- skip-link
|
|
6
|
+
accessibility_criteria: |
|
|
7
|
+
- accept focus
|
|
8
|
+
- be focusable with a keyboard
|
|
9
|
+
- be usable with a keyboard
|
|
10
|
+
- indicate when they have focus
|
|
11
|
+
- becomes visible when pressing tab
|
|
12
|
+
- is the first items that screen readers hear and that keyboard users tab to
|
|
13
|
+
examples:
|
|
14
|
+
default:
|
|
15
|
+
data:
|
|
16
|
+
href: '#content'
|
|
@@ -164,9 +164,7 @@ examples:
|
|
|
164
164
|
]
|
|
165
165
|
remember_last_opened_step:
|
|
166
166
|
description: |
|
|
167
|
-
If
|
|
168
|
-
|
|
169
|
-
This behaviour is used with the 'links to more information' option.
|
|
167
|
+
If steps are opened their IDs are added to an array in sessionStorage, so that if the user returns to this page in the same session, those steps will be opened on page load. This option can technically be used together with the option to open a step by default, but this is not recommended as it could confuse users.
|
|
170
168
|
data:
|
|
171
169
|
remember_last_step: true
|
|
172
170
|
steps: [
|
|
@@ -282,49 +280,6 @@ examples:
|
|
|
282
280
|
]
|
|
283
281
|
}
|
|
284
282
|
]
|
|
285
|
-
with_headings:
|
|
286
|
-
description: Headings can be included to break up complex content within steps. Headings are intended to be used to highlight 'Get help completing this step' information, but can be used in other contexts. The heading level is automatically determined based on the heading level of the step titles.
|
|
287
|
-
data:
|
|
288
|
-
show_step: 1
|
|
289
|
-
heading_level: 3
|
|
290
|
-
steps: [
|
|
291
|
-
{
|
|
292
|
-
title: "Do something complicated",
|
|
293
|
-
contents: [
|
|
294
|
-
{
|
|
295
|
-
type: 'paragraph',
|
|
296
|
-
text: 'This is an example of a step containing a heading. A section has been used with the heading to demonstrate the intended appearance of a Get Help section.'
|
|
297
|
-
},
|
|
298
|
-
{
|
|
299
|
-
type: 'substep',
|
|
300
|
-
optional: true,
|
|
301
|
-
contents: [
|
|
302
|
-
{
|
|
303
|
-
type: 'heading',
|
|
304
|
-
text: 'Get help completing this step'
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
type: 'list',
|
|
308
|
-
contents: [
|
|
309
|
-
{
|
|
310
|
-
href: '#',
|
|
311
|
-
text: 'Apply online'
|
|
312
|
-
},
|
|
313
|
-
{
|
|
314
|
-
href: '#',
|
|
315
|
-
text: 'Talk to one of our advisers'
|
|
316
|
-
},
|
|
317
|
-
{
|
|
318
|
-
href: '#',
|
|
319
|
-
text: 'Search our website'
|
|
320
|
-
}
|
|
321
|
-
]
|
|
322
|
-
}
|
|
323
|
-
]
|
|
324
|
-
}
|
|
325
|
-
]
|
|
326
|
-
}
|
|
327
|
-
]
|
|
328
283
|
or_then:
|
|
329
284
|
description: Some of the more complex things in a step by step navigation require an option for laying out links in a clear structure. If a link in a list is not given a href, only the text is displayed, allowing for structures like the one shown below.
|
|
330
285
|
data:
|
|
@@ -512,150 +467,6 @@ examples:
|
|
|
512
467
|
]
|
|
513
468
|
}
|
|
514
469
|
]
|
|
515
|
-
with_sub_steps:
|
|
516
|
-
description: Steps can also contain sub steps, which act either as a way to break up content or to indicate that some tasks are optional. Whenever a step or sub step is optional this should be made clear in the written content. Optional steps are styled differently but this should support the meaning, not convey it.
|
|
517
|
-
data:
|
|
518
|
-
highlight_step: 2
|
|
519
|
-
show_step: 2
|
|
520
|
-
steps: [
|
|
521
|
-
{
|
|
522
|
-
title: "A required step",
|
|
523
|
-
contents: [
|
|
524
|
-
{
|
|
525
|
-
type: 'paragraph',
|
|
526
|
-
text: 'This step ends with an optional sub step.'
|
|
527
|
-
},
|
|
528
|
-
{
|
|
529
|
-
type: 'substep',
|
|
530
|
-
optional: true,
|
|
531
|
-
contents: [
|
|
532
|
-
{
|
|
533
|
-
type: 'paragraph',
|
|
534
|
-
text: 'This paragraph is inside the sub step.'
|
|
535
|
-
},
|
|
536
|
-
{
|
|
537
|
-
type: 'list',
|
|
538
|
-
contents: [
|
|
539
|
-
{
|
|
540
|
-
href: '/test6',
|
|
541
|
-
text: 'This link is also inside the sub step'
|
|
542
|
-
}
|
|
543
|
-
]
|
|
544
|
-
}
|
|
545
|
-
]
|
|
546
|
-
}
|
|
547
|
-
]
|
|
548
|
-
},
|
|
549
|
-
{
|
|
550
|
-
title: "An optional step",
|
|
551
|
-
optional: true,
|
|
552
|
-
contents: [
|
|
553
|
-
{
|
|
554
|
-
type: 'paragraph',
|
|
555
|
-
text: 'This optional step contains multiple sub steps.'
|
|
556
|
-
},
|
|
557
|
-
{
|
|
558
|
-
type: 'substep',
|
|
559
|
-
optional: false,
|
|
560
|
-
contents: [
|
|
561
|
-
{
|
|
562
|
-
type: 'paragraph',
|
|
563
|
-
text: 'This paragraph is inside a required sub step.'
|
|
564
|
-
}
|
|
565
|
-
]
|
|
566
|
-
},
|
|
567
|
-
{
|
|
568
|
-
type: 'substep',
|
|
569
|
-
optional: true,
|
|
570
|
-
contents: [
|
|
571
|
-
{
|
|
572
|
-
type: 'paragraph',
|
|
573
|
-
text: 'This paragraph is inside an optional sub step.'
|
|
574
|
-
},
|
|
575
|
-
{
|
|
576
|
-
type: 'list',
|
|
577
|
-
contents: [
|
|
578
|
-
{
|
|
579
|
-
href: '/test7',
|
|
580
|
-
text: 'This link is inside an optional sub step as well',
|
|
581
|
-
active: true
|
|
582
|
-
}
|
|
583
|
-
]
|
|
584
|
-
},
|
|
585
|
-
]
|
|
586
|
-
},
|
|
587
|
-
{
|
|
588
|
-
type: 'substep',
|
|
589
|
-
optional: false,
|
|
590
|
-
contents: [
|
|
591
|
-
{
|
|
592
|
-
type: 'paragraph',
|
|
593
|
-
text: 'This paragraph is inside a required sub step.'
|
|
594
|
-
}
|
|
595
|
-
]
|
|
596
|
-
},
|
|
597
|
-
]
|
|
598
|
-
},
|
|
599
|
-
{
|
|
600
|
-
title: "Another required step",
|
|
601
|
-
contents: [
|
|
602
|
-
{
|
|
603
|
-
type: 'paragraph',
|
|
604
|
-
text: 'Um. Hello.'
|
|
605
|
-
}
|
|
606
|
-
]
|
|
607
|
-
}
|
|
608
|
-
]
|
|
609
|
-
get_help_links:
|
|
610
|
-
description: |
|
|
611
|
-
Where step by step navigations are long, content can be substituted with a link back to the main step by step navigation page. This link will open that page with that step shown. The link text defaults to "Get help completing this step" but can be overridden.
|
|
612
|
-
|
|
613
|
-
Get help links will only appear if the step_nav_url global parameter is set and the step itself has the optional show_help_link parameter set to true.
|
|
614
|
-
|
|
615
|
-
Note that this option does not remove any content - it is left to developers to simply pass less content to the component in this situation.
|
|
616
|
-
data:
|
|
617
|
-
step_nav_url: "/learn-to-do-something"
|
|
618
|
-
step_nav_url_link_text: "Get more information"
|
|
619
|
-
show_step: 1
|
|
620
|
-
steps: [
|
|
621
|
-
{
|
|
622
|
-
title: "A link back to the main step by step navigation",
|
|
623
|
-
show_help_link: true,
|
|
624
|
-
contents: [
|
|
625
|
-
{
|
|
626
|
-
type: 'list',
|
|
627
|
-
contents: [
|
|
628
|
-
{
|
|
629
|
-
href: '/test7',
|
|
630
|
-
text: 'This is a link'
|
|
631
|
-
},
|
|
632
|
-
{
|
|
633
|
-
href: '/test7',
|
|
634
|
-
text: 'This is another link'
|
|
635
|
-
}
|
|
636
|
-
]
|
|
637
|
-
}
|
|
638
|
-
]
|
|
639
|
-
},
|
|
640
|
-
{
|
|
641
|
-
title: "No help link here",
|
|
642
|
-
contents: [
|
|
643
|
-
{
|
|
644
|
-
type: 'list',
|
|
645
|
-
contents: [
|
|
646
|
-
{
|
|
647
|
-
href: '/test7',
|
|
648
|
-
text: 'This is yet another link'
|
|
649
|
-
},
|
|
650
|
-
{
|
|
651
|
-
href: '/test7',
|
|
652
|
-
text: 'This is a further link'
|
|
653
|
-
},
|
|
654
|
-
]
|
|
655
|
-
}
|
|
656
|
-
]
|
|
657
|
-
}
|
|
658
|
-
]
|
|
659
470
|
test_all_the_things:
|
|
660
471
|
description: This component is very complicated so here is an example containing as many of the options available as possible.
|
|
661
472
|
data:
|