govuk_publishing_components 4.1.1 → 5.0.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/current-location.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/{task-list.js → step-by-step-nav.js} +42 -45
- data/app/assets/javascripts/history-support.js +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +3 -3
- data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +2 -2
- data/app/assets/stylesheets/govuk_publishing_components/component_guide_print.scss +3 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/{_task-list-header.scss → _step-by-step-nav-header.scss} +4 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/{_task-list-related.scss → _step-by-step-nav-related.scss} +7 -7
- data/app/assets/stylesheets/govuk_publishing_components/components/{_task-list.scss → _step-by-step-nav.scss} +118 -131
- data/app/assets/stylesheets/govuk_publishing_components/components/print/{_task-list-header.scss → _step-by-step-nav-header.scss} +3 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/print/{_task-list.scss → _step-by-step-nav.scss} +20 -20
- data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +100 -0
- data/app/views/govuk_publishing_components/components/{_task_list_header.html.erb → _step_by_step_nav_header.html.erb} +7 -7
- data/app/views/govuk_publishing_components/components/{_task_list_related.html.erb → _step_by_step_nav_related.html.erb} +10 -10
- data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml +1041 -0
- data/app/views/govuk_publishing_components/components/docs/{task_list_header.yml → step_by_step_nav_header.yml} +7 -7
- data/app/views/govuk_publishing_components/components/docs/{task_list_related.yml → step_by_step_nav_related.yml} +5 -5
- data/config/locales/en.yml +2 -0
- data/lib/govuk_publishing_components.rb +1 -1
- data/lib/govuk_publishing_components/components/{task_list_helper.rb → step_by_step_nav_helper.rb} +13 -13
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +15 -15
- data/app/views/govuk_publishing_components/components/_task_list.html.erb +0 -105
- data/app/views/govuk_publishing_components/components/docs/task_list.yml +0 -1085
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
// scss-lint:disable SelectorFormat
|
|
2
2
|
|
|
3
|
-
.gem-c-
|
|
3
|
+
.gem-c-step-nav-header__part-of {
|
|
4
4
|
display: block;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.gem-c-
|
|
7
|
+
.gem-c-step-nav-header__title {
|
|
8
8
|
@include bold-24;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.gem-c-
|
|
11
|
+
.gem-c-step-nav-header__skip-link {
|
|
12
12
|
display: none;
|
|
13
13
|
}
|
|
14
14
|
|
|
@@ -5,14 +5,14 @@ $white: #ffffff;
|
|
|
5
5
|
$number-circle-size: 35px;
|
|
6
6
|
$stroke-width: 3px;
|
|
7
7
|
|
|
8
|
-
.gem-c-
|
|
9
|
-
.gem-c-
|
|
10
|
-
.gem-c-
|
|
11
|
-
.gem-c-
|
|
8
|
+
.gem-c-step-nav:not(.gem-c-step-nav--large),
|
|
9
|
+
.gem-c-step-nav__controls,
|
|
10
|
+
.gem-c-step-nav__toggle-link,
|
|
11
|
+
.gem-c-step-nav__help {
|
|
12
12
|
display: none;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.gem-c-
|
|
15
|
+
.gem-c-step-nav {
|
|
16
16
|
position: relative;
|
|
17
17
|
|
|
18
18
|
&:before {
|
|
@@ -39,16 +39,16 @@ $stroke-width: 3px;
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
.gem-c-
|
|
42
|
+
.gem-c-step-nav__step {
|
|
43
43
|
position: relative;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
.gem-c-
|
|
46
|
+
.gem-c-step-nav__steps {
|
|
47
47
|
padding: 0;
|
|
48
48
|
list-style: none;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.gem-c-
|
|
51
|
+
.gem-c-step-nav__circle {
|
|
52
52
|
@include _core-font-generator(19px, 16px, 19px, 30px, 23px, false, bold);
|
|
53
53
|
box-sizing: border-box;
|
|
54
54
|
position: absolute;
|
|
@@ -61,56 +61,56 @@ $stroke-width: 3px;
|
|
|
61
61
|
text-align: center;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
.gem-c-
|
|
64
|
+
.gem-c-step-nav__circle--number {
|
|
65
65
|
border: solid 3px $grey-2;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.gem-c-
|
|
69
|
-
.gem-c-
|
|
70
|
-
.gem-c-
|
|
68
|
+
.gem-c-step-nav__step,
|
|
69
|
+
.gem-c-step-nav__paragraph,
|
|
70
|
+
.gem-c-step-nav__links {
|
|
71
71
|
@include core-16;
|
|
72
72
|
padding-bottom: 1em;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
.gem-c-
|
|
75
|
+
.gem-c-step-nav__step {
|
|
76
76
|
position: relative;
|
|
77
77
|
padding-left: 60px;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
.gem-c-
|
|
80
|
+
.gem-c-step-nav__title {
|
|
81
81
|
@include bold-19;
|
|
82
82
|
margin: 0 0 0.5em 0;
|
|
83
83
|
padding: 0;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
.gem-c-
|
|
86
|
+
.gem-c-step-nav__button--title {
|
|
87
87
|
@include bold-19;
|
|
88
88
|
padding: 0;
|
|
89
89
|
border: 0;
|
|
90
90
|
background: none;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.gem-c-
|
|
93
|
+
.gem-c-step-nav__context {
|
|
94
94
|
&:before {
|
|
95
95
|
content: " \2013 ";
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
.gem-c-
|
|
99
|
+
.gem-c-step-nav__panel-link--active {
|
|
100
100
|
font-weight: bold;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
.gem-c-
|
|
103
|
+
.gem-c-step-nav__links {
|
|
104
104
|
padding-left: 0;
|
|
105
105
|
list-style: none;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.gem-c-
|
|
108
|
+
.gem-c-step-nav__links--choice {
|
|
109
109
|
padding-left: 30px;
|
|
110
110
|
list-style: disc;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
.gem-c-
|
|
113
|
+
.gem-c-step-nav__link {
|
|
114
114
|
margin-bottom: 0.3em;
|
|
115
115
|
}
|
|
116
116
|
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = {}
|
|
3
|
+
options[:heading_level] = heading_level ||= 2
|
|
4
|
+
|
|
5
|
+
steps ||= false
|
|
6
|
+
small ||= false
|
|
7
|
+
show_step ||= false
|
|
8
|
+
remember_last_step ||= false
|
|
9
|
+
step_nav_url ||= false
|
|
10
|
+
step_nav_link_text ||= "Get help completing this step"
|
|
11
|
+
highlight_step ||= false
|
|
12
|
+
|
|
13
|
+
step_count = 0
|
|
14
|
+
step_number = 0
|
|
15
|
+
%>
|
|
16
|
+
<% if steps %>
|
|
17
|
+
<div
|
|
18
|
+
data-module="gemstepnav"
|
|
19
|
+
class="gem-c-step-nav js-hidden <% unless small %>gem-c-step-nav--large<% end %>"
|
|
20
|
+
<% if remember_last_step %>data-remember<% end %>
|
|
21
|
+
>
|
|
22
|
+
<ol class="gem-c-step-nav__steps">
|
|
23
|
+
<% steps.each_with_index do |step, step_index| %>
|
|
24
|
+
<%
|
|
25
|
+
step_is_active = step_index + 1 == highlight_step
|
|
26
|
+
step_count += 1
|
|
27
|
+
id = StepNavHelper.new.generate_step_nav_id(step[:title])
|
|
28
|
+
|
|
29
|
+
logic = false
|
|
30
|
+
logic = step[:logic] if ["and", "or"].include? step[:logic]
|
|
31
|
+
circle_class = "gem-c-step-nav__circle--number"
|
|
32
|
+
circle_class = "gem-c-step-nav__circle--logic" if logic
|
|
33
|
+
%>
|
|
34
|
+
<li class="gem-c-step-nav__step js-step
|
|
35
|
+
<%= "gem-c-step-nav__step--optional" if step[:optional] %>
|
|
36
|
+
<%= "gem-c-step-nav__step--active" if step_is_active %>"
|
|
37
|
+
<% if step_is_active %>aria-current="step"<% end %>
|
|
38
|
+
<%= "data-show" if step_count == show_step %>
|
|
39
|
+
id="<%= id %>"
|
|
40
|
+
data-track-count="stepNavSection"
|
|
41
|
+
>
|
|
42
|
+
<div class="gem-c-step-nav__circle <%= circle_class %>">
|
|
43
|
+
<span class="gem-c-step-nav__circle-inner">
|
|
44
|
+
<span class="gem-c-step-nav__circle-background">
|
|
45
|
+
<% if logic %>
|
|
46
|
+
<%= logic %>
|
|
47
|
+
<% else %>
|
|
48
|
+
<%
|
|
49
|
+
step_number += 1
|
|
50
|
+
%>
|
|
51
|
+
<span class="visuallyhidden">Step</span> <%= step_number %>
|
|
52
|
+
<% end %>
|
|
53
|
+
</span>
|
|
54
|
+
</span>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div class="gem-c-step-nav__header js-toggle-panel" data-position="<%= "#{step_index + 1}" %>">
|
|
58
|
+
<%= content_tag("h#{heading_level}", step[:title], class: 'gem-c-step-nav__title js-step-title') %>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="gem-c-step-nav__panel js-panel" id="step-panel-<%= id %>-<%= step_index + 1 %>">
|
|
62
|
+
<%
|
|
63
|
+
in_substep = false
|
|
64
|
+
options[:step_index] = step_index
|
|
65
|
+
options[:link_index] = 0
|
|
66
|
+
%>
|
|
67
|
+
<% step[:contents].each do |element| %>
|
|
68
|
+
<%= StepNavHelper.new.render_step_nav_element(element, options) %>
|
|
69
|
+
<%
|
|
70
|
+
if element[:type] == 'list'
|
|
71
|
+
options[:link_index] += element[:contents].length
|
|
72
|
+
end
|
|
73
|
+
%>
|
|
74
|
+
|
|
75
|
+
<% if element[:type] == 'substep' %>
|
|
76
|
+
<% if in_substep %>
|
|
77
|
+
</div>
|
|
78
|
+
<% in_substep = false %>
|
|
79
|
+
<% end %>
|
|
80
|
+
<div class="gem-c-step-nav__substep <% if element[:optional] %>gem-c-step-nav__substep--optional<% end %>">
|
|
81
|
+
<% in_substep = true %>
|
|
82
|
+
<% end %>
|
|
83
|
+
<% end %>
|
|
84
|
+
|
|
85
|
+
<% if in_substep %>
|
|
86
|
+
</div>
|
|
87
|
+
<% 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
|
+
</div>
|
|
95
|
+
|
|
96
|
+
</li>
|
|
97
|
+
<% end %>
|
|
98
|
+
</ol>
|
|
99
|
+
</div>
|
|
100
|
+
<% end %>
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
skip_link_text ||= "Skip content"
|
|
6
6
|
%>
|
|
7
7
|
<% if title %>
|
|
8
|
-
<div class="gem-c-
|
|
9
|
-
<span class="gem-c-
|
|
8
|
+
<div class="gem-c-step-nav-header" data-module="track-click">
|
|
9
|
+
<span class="gem-c-step-nav-header__part-of">Part of</span>
|
|
10
10
|
<% if path %>
|
|
11
11
|
<a href="<%= path %>"
|
|
12
|
-
class="gem-c-
|
|
13
|
-
data-track-category="
|
|
12
|
+
class="gem-c-step-nav-header__title"
|
|
13
|
+
data-track-category="stepNavHeaderClicked"
|
|
14
14
|
data-track-action="top"
|
|
15
15
|
data-track-label="<%= path %>"
|
|
16
16
|
data-track-dimension="<%= title %>"
|
|
@@ -18,15 +18,15 @@
|
|
|
18
18
|
<%= title %>
|
|
19
19
|
</a>
|
|
20
20
|
<% else %>
|
|
21
|
-
<span class="gem-c-
|
|
21
|
+
<span class="gem-c-step-nav-header__title">
|
|
22
22
|
<%= title %>
|
|
23
23
|
</span>
|
|
24
24
|
<% end %>
|
|
25
25
|
|
|
26
26
|
<% if skip_link %>
|
|
27
27
|
<a href="<%= skip_link %>"
|
|
28
|
-
class="gem-c-
|
|
29
|
-
data-track-category="
|
|
28
|
+
class="gem-c-step-nav-header__skip-link"
|
|
29
|
+
data-track-category="stepNavHeaderClicked"
|
|
30
30
|
data-track-action="top"
|
|
31
31
|
data-track-label="<%= skip_link %>"
|
|
32
32
|
data-track-dimension="<%= skip_link_text %>"
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<%
|
|
2
2
|
links ||= false
|
|
3
|
-
pretitle ||= t("govuk_component.
|
|
3
|
+
pretitle ||= t("govuk_component.step_by_step_nav_related.part_of", default: "Part of")
|
|
4
4
|
%>
|
|
5
5
|
<% if links %>
|
|
6
|
-
<div class="gem-c-
|
|
7
|
-
<h2 class="gem-c-
|
|
8
|
-
<span class="gem-c-
|
|
6
|
+
<div class="gem-c-step-nav-related" data-module="track-click">
|
|
7
|
+
<h2 class="gem-c-step-nav-related__heading">
|
|
8
|
+
<span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
|
|
9
9
|
<% if links.length == 1 %>
|
|
10
10
|
<a href="<%= links[0][:href] %>"
|
|
11
|
-
class="gem-c-
|
|
12
|
-
data-track-category="
|
|
11
|
+
class="gem-c-step-nav-related__link"
|
|
12
|
+
data-track-category="stepNavPartOfClicked"
|
|
13
13
|
data-track-action="<%= pretitle %>"
|
|
14
14
|
data-track-label="<%= links[0][:href] %>"
|
|
15
15
|
data-track-dimension="<%= links[0][:text] %>"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
</h2>
|
|
20
20
|
<% else %>
|
|
21
21
|
</h2>
|
|
22
|
-
<ul class="gem-c-
|
|
22
|
+
<ul class="gem-c-step-nav-related__links">
|
|
23
23
|
<% links.each do |link| %>
|
|
24
|
-
<li class="gem-c-
|
|
24
|
+
<li class="gem-c-step-nav-related__link-item">
|
|
25
25
|
<a href="<%= link[:href] %>"
|
|
26
|
-
class="gem-c-
|
|
27
|
-
data-track-category="
|
|
26
|
+
class="gem-c-step-nav-related__link"
|
|
27
|
+
data-track-category="stepNavPartOfClicked"
|
|
28
28
|
data-track-action="<%= pretitle %>"
|
|
29
29
|
data-track-label="<%= link[:href] %>"
|
|
30
30
|
data-track-dimension="<%= link[:text] %>"
|
|
@@ -0,0 +1,1041 @@
|
|
|
1
|
+
name: Step by step navigation
|
|
2
|
+
description: A series of expanding/collapsing steps designed to navigate a user through a process
|
|
3
|
+
body: |
|
|
4
|
+
Step by step navigations show a sequence of steps towards a specific goal, such as 'learning to drive'. Each step can contain one or more links to pages. User research suggested that each step should be collapsed by default so that users are not overwhelmed with information.
|
|
5
|
+
|
|
6
|
+
If JavaScript is disabled the step by step navigation expands fully. All of the functionality (including the icons and aria attributes) are added using JavaScript.
|
|
7
|
+
|
|
8
|
+
This component is based on the accordion component in collections, but has been altered. This is for two reasons.
|
|
9
|
+
|
|
10
|
+
- step by step navigations are needed throughout GOV.UK and extending the accordion to be this component would require it to be moved out of that application, which would break integration testing
|
|
11
|
+
- creating a new component allows further iteration without impacting the accordion
|
|
12
|
+
accessibility_criteria: |
|
|
13
|
+
The step by step navigation must:
|
|
14
|
+
|
|
15
|
+
- indicate to users that each step can be expanded and collapsed
|
|
16
|
+
- inform the user when a step has been expanded or collapsed
|
|
17
|
+
- be usable with a keyboard
|
|
18
|
+
- allow users to show or hide all steps at once
|
|
19
|
+
- inform the user which step a link belongs to
|
|
20
|
+
- inform the user which step the current page is in
|
|
21
|
+
- be readable when only the text of the page is zoomed - achieved for the numbers and logic elements by their text being wrapped in several elements that give them a white background and ensure the text when zoomed expands to the left, not to the right, where it would obscure the step titles
|
|
22
|
+
|
|
23
|
+
The show/hide all button only needs to list the first panel id in the aria-controls attribute, rather than all of them.
|
|
24
|
+
|
|
25
|
+
Step headings must use a button element:
|
|
26
|
+
|
|
27
|
+
- so that steps can be toggled with the space and enter keys
|
|
28
|
+
- so that steps can't be opened in a new tab or window
|
|
29
|
+
|
|
30
|
+
When JavaScript is unavailable the component must:
|
|
31
|
+
|
|
32
|
+
- be fully expanded
|
|
33
|
+
- not be marked as expandable
|
|
34
|
+
shared_accessibility_criteria:
|
|
35
|
+
- link
|
|
36
|
+
examples:
|
|
37
|
+
default:
|
|
38
|
+
data:
|
|
39
|
+
steps: [
|
|
40
|
+
{
|
|
41
|
+
title: "Do a thing",
|
|
42
|
+
contents: [
|
|
43
|
+
{
|
|
44
|
+
type: 'paragraph',
|
|
45
|
+
text: 'This is a paragraph of text.'
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
type: 'paragraph',
|
|
49
|
+
text: 'This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth.'
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
title: "Do another thing",
|
|
55
|
+
logic: "and",
|
|
56
|
+
contents: [
|
|
57
|
+
{
|
|
58
|
+
type: 'paragraph',
|
|
59
|
+
text: 'Some more text.'
|
|
60
|
+
},
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
title: "Do something else",
|
|
65
|
+
contents: [
|
|
66
|
+
{
|
|
67
|
+
type: 'paragraph',
|
|
68
|
+
text: 'This is yet another paragraph.'
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
with_a_different_heading_level:
|
|
74
|
+
description: Steps have a H2 by default, but this can be changed. The heading level does not change any styling.
|
|
75
|
+
data:
|
|
76
|
+
heading_level: 3
|
|
77
|
+
steps: [
|
|
78
|
+
{
|
|
79
|
+
title: 'This is a heading 3',
|
|
80
|
+
contents: [
|
|
81
|
+
{
|
|
82
|
+
type: 'paragraph',
|
|
83
|
+
text: 'This is yet another paragraph.'
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
title: 'This is also a heading 3',
|
|
89
|
+
contents: [
|
|
90
|
+
{
|
|
91
|
+
type: 'paragraph',
|
|
92
|
+
text: 'This is yet another paragraph.'
|
|
93
|
+
}
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
open_a_step_by_default:
|
|
98
|
+
description: Pass the index of the step to open by default. This is the nth step in the list, regardless of the number shown next to the step. Note that in the example below, the third step is open by default, not the step numbered '3'.
|
|
99
|
+
data:
|
|
100
|
+
show_step: 3
|
|
101
|
+
steps: [
|
|
102
|
+
{
|
|
103
|
+
title: 'Closed by default',
|
|
104
|
+
contents: [
|
|
105
|
+
{
|
|
106
|
+
type: 'paragraph',
|
|
107
|
+
text: 'Well, open now, obviously.'
|
|
108
|
+
}
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
title: 'Also closed by default',
|
|
113
|
+
contents: [
|
|
114
|
+
{
|
|
115
|
+
type: 'paragraph',
|
|
116
|
+
text: 'Hello.'
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
title: 'Open by default',
|
|
122
|
+
logic: "and",
|
|
123
|
+
contents: [
|
|
124
|
+
{
|
|
125
|
+
type: 'paragraph',
|
|
126
|
+
text: 'Hello!'
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
title: 'And again closed by default',
|
|
132
|
+
contents: [
|
|
133
|
+
{
|
|
134
|
+
type: 'paragraph',
|
|
135
|
+
text: 'Goodbye...'
|
|
136
|
+
}
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
]
|
|
140
|
+
remember_last_opened_step:
|
|
141
|
+
description: |
|
|
142
|
+
If a step is opened its ID is appended to the end of the URL, so that if the URL is shared or the 'back' button is used, that step will be opened on page load. This was historically part of the behaviour of the accordion. By default this is turned off and cannot be used together with the option to open a step by default.
|
|
143
|
+
|
|
144
|
+
This behaviour is used with the 'links to more information' option.
|
|
145
|
+
data:
|
|
146
|
+
remember_last_step: true
|
|
147
|
+
steps: [
|
|
148
|
+
{
|
|
149
|
+
title: 'Remember this',
|
|
150
|
+
contents: [
|
|
151
|
+
{
|
|
152
|
+
type: 'paragraph',
|
|
153
|
+
text: 'Hello!'
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
title: 'Or this',
|
|
159
|
+
contents: [
|
|
160
|
+
{
|
|
161
|
+
type: 'paragraph',
|
|
162
|
+
text: 'Hello!'
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
with_links:
|
|
168
|
+
description: |
|
|
169
|
+
Links can have the following attributes:
|
|
170
|
+
|
|
171
|
+
- style, an attribute on the parent list that controls its appearance, either required (bold), optional (not bold) or choice (not bold, with bullets on the list). The default is optional.
|
|
172
|
+
- context, an optional text field to show some extra information after the link, usually a monetary value
|
|
173
|
+
- active, whether to make the link highlighted (to indicate the current page)
|
|
174
|
+
- highlight_step, a general option to highlight the step. Usually the active link would be in the active step, but in some circumstances there might be an active step but no highlighted link.
|
|
175
|
+
data:
|
|
176
|
+
highlight_step: 2
|
|
177
|
+
show_step: 2
|
|
178
|
+
steps: [
|
|
179
|
+
{
|
|
180
|
+
title: 'Links and paragraphs',
|
|
181
|
+
contents: [
|
|
182
|
+
{
|
|
183
|
+
type: 'paragraph',
|
|
184
|
+
text: 'These links represent tasks that are required.'
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
type: 'paragraph',
|
|
188
|
+
text: 'Spacing between a paragraph and a list of links should be smaller than the spacing between two paragraphs, in order to visually connect the two.'
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
type: 'list',
|
|
192
|
+
style: 'required',
|
|
193
|
+
contents: [
|
|
194
|
+
{
|
|
195
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
196
|
+
text: 'Obtain a driving licence prior to driving a car',
|
|
197
|
+
active: true
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
201
|
+
text: 'Acquire food before attempting to cook',
|
|
202
|
+
context: '1p to £20',
|
|
203
|
+
active: true
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
207
|
+
text: 'Maintain contact with the ground at all times',
|
|
208
|
+
active: true
|
|
209
|
+
}
|
|
210
|
+
]
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
type: 'paragraph',
|
|
214
|
+
text: 'These links represent tasks that are optional.'
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
type: 'list',
|
|
218
|
+
contents: [
|
|
219
|
+
{
|
|
220
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
221
|
+
text: 'Learn to play the saxophone',
|
|
222
|
+
active: true
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
226
|
+
text: 'Develop a new method of extracting juice from oranges',
|
|
227
|
+
context: '£0 to £300',
|
|
228
|
+
active: true
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
232
|
+
text: 'Buy a race car',
|
|
233
|
+
active: true
|
|
234
|
+
}
|
|
235
|
+
]
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
type: 'paragraph',
|
|
239
|
+
text: 'These links represent a choice:'
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
type: 'list',
|
|
243
|
+
style: 'choice',
|
|
244
|
+
contents: [
|
|
245
|
+
{
|
|
246
|
+
href: '/component-guide/step_by_step_navigation/',
|
|
247
|
+
text: 'Leave school at sixteen',
|
|
248
|
+
active: true
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
href: '/component-guide/step_by_step_navigation/',
|
|
252
|
+
text: 'Continue into higher education',
|
|
253
|
+
context: '£9,500',
|
|
254
|
+
active: true
|
|
255
|
+
}
|
|
256
|
+
]
|
|
257
|
+
}
|
|
258
|
+
]
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
title: 'Active step and links',
|
|
262
|
+
contents: [
|
|
263
|
+
{
|
|
264
|
+
type: 'list',
|
|
265
|
+
style: 'required',
|
|
266
|
+
contents: [
|
|
267
|
+
{
|
|
268
|
+
href: '/component-guide/step_by_step_navigation/',
|
|
269
|
+
text: 'Check the reasons'
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
273
|
+
text: 'Make the decisions based on available data and the reasonable assumptions that are possible at the time',
|
|
274
|
+
context: '1p to £20',
|
|
275
|
+
active: true
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
279
|
+
text: 'Do the things',
|
|
280
|
+
active: true
|
|
281
|
+
}
|
|
282
|
+
]
|
|
283
|
+
},
|
|
284
|
+
]
|
|
285
|
+
}
|
|
286
|
+
]
|
|
287
|
+
with_headings:
|
|
288
|
+
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.
|
|
289
|
+
data:
|
|
290
|
+
show_step: 1
|
|
291
|
+
heading_level: 3
|
|
292
|
+
steps: [
|
|
293
|
+
{
|
|
294
|
+
title: "Do something complicated",
|
|
295
|
+
contents: [
|
|
296
|
+
{
|
|
297
|
+
type: 'paragraph',
|
|
298
|
+
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.'
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
type: 'substep',
|
|
302
|
+
optional: true
|
|
303
|
+
},
|
|
304
|
+
{
|
|
305
|
+
type: 'heading',
|
|
306
|
+
text: 'Get help completing this step'
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
type: 'list',
|
|
310
|
+
contents: [
|
|
311
|
+
{
|
|
312
|
+
href: '#',
|
|
313
|
+
text: 'Apply online'
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
href: '#',
|
|
317
|
+
text: 'Talk to one of our advisers'
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
href: '#',
|
|
321
|
+
text: 'Search our website'
|
|
322
|
+
}
|
|
323
|
+
]
|
|
324
|
+
}
|
|
325
|
+
]
|
|
326
|
+
}
|
|
327
|
+
]
|
|
328
|
+
or_then:
|
|
329
|
+
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
|
+
data:
|
|
331
|
+
show_step: 1
|
|
332
|
+
steps: [
|
|
333
|
+
{
|
|
334
|
+
title: "Get a court to decide your child arrangements",
|
|
335
|
+
contents: [
|
|
336
|
+
{
|
|
337
|
+
type: 'paragraph',
|
|
338
|
+
text: "You can only apply for a court to make a decision if you've tried mediation or your family are at risk, for example domestic abuse."
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
type: 'list',
|
|
342
|
+
style: 'required',
|
|
343
|
+
contents: [
|
|
344
|
+
{
|
|
345
|
+
href: 'http://solicitors.lawsociety.org.uk/',
|
|
346
|
+
text: 'Hire a lawyer to represent you',
|
|
347
|
+
context: '£110 to £410 per hour'
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
text: 'or',
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
href: 'http://localhost:3000/represent-yourself-in-court',
|
|
354
|
+
text: 'Represent yourself in court'
|
|
355
|
+
}
|
|
356
|
+
]
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
type: 'paragraph',
|
|
360
|
+
text: 'then'
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
type: 'list',
|
|
364
|
+
style: 'required',
|
|
365
|
+
contents: [
|
|
366
|
+
{
|
|
367
|
+
href: '/looking-after-children-divorce/apply-for-court-order',
|
|
368
|
+
text: 'Apply for a court order',
|
|
369
|
+
context: '£215'
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
href: 'https://courttribunalfinder.service.gov.uk/search/',
|
|
373
|
+
text: 'Find the right court to send your application'
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
href: '/get-help-with-court-fees',
|
|
377
|
+
text: 'Get help with court fees'
|
|
378
|
+
}
|
|
379
|
+
]
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
type: 'paragraph',
|
|
383
|
+
text: "The court will send you a date for your first hearing 4 to 6 weeks after your application. You'll be told when and where your hearing will take place."
|
|
384
|
+
}
|
|
385
|
+
]
|
|
386
|
+
}
|
|
387
|
+
]
|
|
388
|
+
solve_the_double_dot_problem:
|
|
389
|
+
description: |
|
|
390
|
+
If a page is in a step by step navigation more than once and a user is viewing that URL, both links to it will be highlighted as the site has no way to know which link the user is currently viewing (highlighted links should only occur when the step by step navigation is in the sidebar).
|
|
391
|
+
|
|
392
|
+
JavaScript is included in the component to solve this. It uses sessionStorage to capture the data-position attribute of non-external links when clicked, and then uses this value to decide which link to highlight when the new page loads. This session storage data is immediately deleted after it is read on page load, mainly to prevent problems with highlighting if the user were to move between different step by step navigations.
|
|
393
|
+
|
|
394
|
+
If a user has not clicked a link (i.e. has visited the page without first clicking on a step by step navigation) the first active link in the first active step will be highlighted. If there is no active step, the first active link will be highlighted (but there should always be an active step).
|
|
395
|
+
|
|
396
|
+
The current page in the step by step navigation is an anchor link to the top of the page. If there are more than one of these and the user clicks one that is not currently highlighted, that one will be highlighted.
|
|
397
|
+
|
|
398
|
+
The example below will show all links highlighted if JS is disabled, in the real world no more than two or three links are likely to be highlighted at once.
|
|
399
|
+
data:
|
|
400
|
+
highlight_step: 2
|
|
401
|
+
show_step: 2
|
|
402
|
+
steps: [
|
|
403
|
+
{
|
|
404
|
+
title: "Not the active step",
|
|
405
|
+
contents: [
|
|
406
|
+
{
|
|
407
|
+
type: 'list',
|
|
408
|
+
style: 'required',
|
|
409
|
+
contents: [
|
|
410
|
+
{
|
|
411
|
+
href: 'http://google.com',
|
|
412
|
+
text: 'External link not set to active'
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
416
|
+
text: 'Internal link set to active',
|
|
417
|
+
active: true
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
421
|
+
text: 'Internal link set to active',
|
|
422
|
+
active: true
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
href: 'http://google.com',
|
|
426
|
+
text: 'External link not set to active'
|
|
427
|
+
}
|
|
428
|
+
]
|
|
429
|
+
}
|
|
430
|
+
]
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
title: "The active step",
|
|
434
|
+
contents: [
|
|
435
|
+
{
|
|
436
|
+
type: 'list',
|
|
437
|
+
style: 'required',
|
|
438
|
+
contents: [
|
|
439
|
+
{
|
|
440
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
441
|
+
text: 'Internal link set to active - in the active step, should be set by default until another link is clicked',
|
|
442
|
+
active: true
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
href: '/component-guide/step_by_step_navigation/with_links/preview',
|
|
446
|
+
text: 'Internal link set to active',
|
|
447
|
+
active: true
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
href: 'http://google.com',
|
|
451
|
+
text: 'External link not set to active'
|
|
452
|
+
}
|
|
453
|
+
]
|
|
454
|
+
}
|
|
455
|
+
]
|
|
456
|
+
}
|
|
457
|
+
]
|
|
458
|
+
with_optional_steps:
|
|
459
|
+
description: |
|
|
460
|
+
Steps can be optional. This is controlled by two parameters for maximum flexibility, 'optional' (which causes the step to have a dotted line down the side) and 'logic', which defaults to showing the word 'and' alongside the step title, but also accepts 'or'.
|
|
461
|
+
|
|
462
|
+
If a step is optional this should be conveyed by the text within that step.
|
|
463
|
+
data:
|
|
464
|
+
steps: [
|
|
465
|
+
{
|
|
466
|
+
title: "Drive to work",
|
|
467
|
+
contents: [
|
|
468
|
+
{
|
|
469
|
+
type: paragraph,
|
|
470
|
+
text: 'If you do not have a car, you will need to choose an alternative.'
|
|
471
|
+
}
|
|
472
|
+
]
|
|
473
|
+
},
|
|
474
|
+
{
|
|
475
|
+
title: "Walk to work",
|
|
476
|
+
optional: true,
|
|
477
|
+
logic: 'or',
|
|
478
|
+
contents: [
|
|
479
|
+
{
|
|
480
|
+
type: 'paragraph',
|
|
481
|
+
text: 'Walking is healthy but may not be practical where large distances are concerned.'
|
|
482
|
+
}
|
|
483
|
+
]
|
|
484
|
+
},
|
|
485
|
+
{
|
|
486
|
+
title: "Get public transport to work",
|
|
487
|
+
optional: true,
|
|
488
|
+
logic: 'or',
|
|
489
|
+
contents: [
|
|
490
|
+
{
|
|
491
|
+
type: 'paragraph',
|
|
492
|
+
text: 'Public transport includes buses, trains and boats.'
|
|
493
|
+
}
|
|
494
|
+
]
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
title: "Do work",
|
|
498
|
+
contents: [
|
|
499
|
+
{
|
|
500
|
+
type: 'paragraph',
|
|
501
|
+
text: 'Once you have reached your destination you should be able to start work.'
|
|
502
|
+
}
|
|
503
|
+
]
|
|
504
|
+
},
|
|
505
|
+
{
|
|
506
|
+
title: "Get paid",
|
|
507
|
+
logic: 'and',
|
|
508
|
+
contents: [
|
|
509
|
+
{
|
|
510
|
+
type: 'paragraph',
|
|
511
|
+
text: 'Your employer should pay you for hours worked.'
|
|
512
|
+
}
|
|
513
|
+
]
|
|
514
|
+
}
|
|
515
|
+
]
|
|
516
|
+
with_sub_steps:
|
|
517
|
+
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.
|
|
518
|
+
data:
|
|
519
|
+
highlight_step: 2
|
|
520
|
+
show_step: 2
|
|
521
|
+
steps: [
|
|
522
|
+
{
|
|
523
|
+
title: "A required step",
|
|
524
|
+
contents: [
|
|
525
|
+
{
|
|
526
|
+
type: 'paragraph',
|
|
527
|
+
text: 'This step ends with an optional sub step.'
|
|
528
|
+
},
|
|
529
|
+
{
|
|
530
|
+
type: 'substep',
|
|
531
|
+
optional: true
|
|
532
|
+
},
|
|
533
|
+
{
|
|
534
|
+
type: 'paragraph',
|
|
535
|
+
text: 'This paragraph is inside the sub step.'
|
|
536
|
+
},
|
|
537
|
+
{
|
|
538
|
+
type: 'list',
|
|
539
|
+
contents: [
|
|
540
|
+
{
|
|
541
|
+
href: '/test6',
|
|
542
|
+
text: 'This link is also inside the sub step'
|
|
543
|
+
}
|
|
544
|
+
]
|
|
545
|
+
}
|
|
546
|
+
]
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
title: "An optional step",
|
|
550
|
+
optional: true,
|
|
551
|
+
contents: [
|
|
552
|
+
{
|
|
553
|
+
type: 'paragraph',
|
|
554
|
+
text: 'This optional step contains multiple sub steps.'
|
|
555
|
+
},
|
|
556
|
+
{
|
|
557
|
+
type: 'substep',
|
|
558
|
+
optional: false
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
type: 'paragraph',
|
|
562
|
+
text: 'This paragraph is inside a required sub step.'
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
type: 'substep',
|
|
566
|
+
optional: true
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
type: 'paragraph',
|
|
570
|
+
text: 'This paragraph is inside an optional sub step.'
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
type: 'list',
|
|
574
|
+
contents: [
|
|
575
|
+
{
|
|
576
|
+
href: '/test7',
|
|
577
|
+
text: 'This link is inside an optional sub step as well',
|
|
578
|
+
active: true
|
|
579
|
+
}
|
|
580
|
+
]
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
type: 'substep',
|
|
584
|
+
optional: false
|
|
585
|
+
},
|
|
586
|
+
{
|
|
587
|
+
type: 'paragraph',
|
|
588
|
+
text: 'This paragraph is inside a required sub step.'
|
|
589
|
+
}
|
|
590
|
+
]
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
title: "Another required step",
|
|
594
|
+
contents: [
|
|
595
|
+
{
|
|
596
|
+
type: 'paragraph',
|
|
597
|
+
text: 'Um. Hello.'
|
|
598
|
+
}
|
|
599
|
+
]
|
|
600
|
+
}
|
|
601
|
+
]
|
|
602
|
+
get_help_links:
|
|
603
|
+
description: |
|
|
604
|
+
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.
|
|
605
|
+
|
|
606
|
+
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.
|
|
607
|
+
|
|
608
|
+
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.
|
|
609
|
+
data:
|
|
610
|
+
step_nav_url: "/learn-to-do-something"
|
|
611
|
+
step_nav_url_link_text: "Get more information"
|
|
612
|
+
show_step: 1
|
|
613
|
+
steps: [
|
|
614
|
+
{
|
|
615
|
+
title: "A link back to the main step by step navigation",
|
|
616
|
+
show_help_link: true,
|
|
617
|
+
contents: [
|
|
618
|
+
{
|
|
619
|
+
type: 'list',
|
|
620
|
+
contents: [
|
|
621
|
+
{
|
|
622
|
+
href: '/test7',
|
|
623
|
+
text: 'This is a link'
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
href: '/test7',
|
|
627
|
+
text: 'This is another link'
|
|
628
|
+
}
|
|
629
|
+
]
|
|
630
|
+
}
|
|
631
|
+
]
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
title: "No help link here",
|
|
635
|
+
contents: [
|
|
636
|
+
{
|
|
637
|
+
type: 'list',
|
|
638
|
+
contents: [
|
|
639
|
+
{
|
|
640
|
+
href: '/test7',
|
|
641
|
+
text: 'This is yet another link'
|
|
642
|
+
},
|
|
643
|
+
{
|
|
644
|
+
href: '/test7',
|
|
645
|
+
text: 'This is a further link'
|
|
646
|
+
},
|
|
647
|
+
]
|
|
648
|
+
}
|
|
649
|
+
]
|
|
650
|
+
}
|
|
651
|
+
]
|
|
652
|
+
test_all_the_things:
|
|
653
|
+
description: This component is very complicated so here is an example containing as many of the options available as possible.
|
|
654
|
+
data:
|
|
655
|
+
step_nav_url: "/learn-to-setup-standup"
|
|
656
|
+
highlight_step: 3
|
|
657
|
+
steps: [
|
|
658
|
+
{
|
|
659
|
+
title: 'Get the TV ready',
|
|
660
|
+
contents: [
|
|
661
|
+
{
|
|
662
|
+
type: 'paragraph',
|
|
663
|
+
text: 'Configure the television so it is ready for the standup. You will also need a laptop.'
|
|
664
|
+
},
|
|
665
|
+
{
|
|
666
|
+
type: 'list',
|
|
667
|
+
style: 'required',
|
|
668
|
+
contents: [
|
|
669
|
+
{
|
|
670
|
+
href: 'https://en.wikipedia.org/wiki/HDMI',
|
|
671
|
+
text: 'Remove the Chromebit from HDMI 1 on the TV'
|
|
672
|
+
}
|
|
673
|
+
]
|
|
674
|
+
}
|
|
675
|
+
]
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
title: 'Plug everything in',
|
|
679
|
+
logic: "and",
|
|
680
|
+
contents: [
|
|
681
|
+
{
|
|
682
|
+
type: 'paragraph',
|
|
683
|
+
text: 'Connect the relevant cables between the various devices.'
|
|
684
|
+
},
|
|
685
|
+
{
|
|
686
|
+
type: 'list',
|
|
687
|
+
style: 'required',
|
|
688
|
+
contents: [
|
|
689
|
+
{
|
|
690
|
+
href: 'https://www.google.co.uk/',
|
|
691
|
+
text: 'Run the HDMI - MINI DVI cable from the TV to the facilitators laptop'
|
|
692
|
+
},
|
|
693
|
+
{
|
|
694
|
+
href: 'https://www.jabra.co.uk/',
|
|
695
|
+
text: 'Plug the Jabra into the facilitators laptop'
|
|
696
|
+
}
|
|
697
|
+
]
|
|
698
|
+
}
|
|
699
|
+
]
|
|
700
|
+
},
|
|
701
|
+
{
|
|
702
|
+
title: 'Configure the catchbox',
|
|
703
|
+
contents: [
|
|
704
|
+
{
|
|
705
|
+
type: 'paragraph',
|
|
706
|
+
text: 'These steps are required.'
|
|
707
|
+
},
|
|
708
|
+
{
|
|
709
|
+
type: 'list',
|
|
710
|
+
style: 'required',
|
|
711
|
+
contents: [
|
|
712
|
+
{
|
|
713
|
+
href: 'http://www.google.com',
|
|
714
|
+
text: 'Ensure the catchbox transmitter is plugged in at the mains wall'
|
|
715
|
+
},
|
|
716
|
+
{
|
|
717
|
+
href: 'http://www.google.com',
|
|
718
|
+
text: 'Turn on the transmitter and wait for the switch to blink green'
|
|
719
|
+
},
|
|
720
|
+
{
|
|
721
|
+
href: 'http://www.google.com',
|
|
722
|
+
text: 'Plug the transmitter USB cable into the facilitators laptop',
|
|
723
|
+
active: true
|
|
724
|
+
},
|
|
725
|
+
{
|
|
726
|
+
href: 'http://www.google.com',
|
|
727
|
+
text: 'Twist and pull the black piece of foam out of the catchbox'
|
|
728
|
+
},
|
|
729
|
+
{
|
|
730
|
+
href: 'http://www.google.com',
|
|
731
|
+
text: 'Turn on the catchbox and wait for the LED to turn green'
|
|
732
|
+
},
|
|
733
|
+
{
|
|
734
|
+
href: 'http://www.google.com',
|
|
735
|
+
text: 'Wait for the transmitter light to turn solid green'
|
|
736
|
+
}
|
|
737
|
+
]
|
|
738
|
+
},
|
|
739
|
+
{
|
|
740
|
+
type: 'substep',
|
|
741
|
+
optional: true
|
|
742
|
+
},
|
|
743
|
+
{
|
|
744
|
+
type: 'heading',
|
|
745
|
+
text: 'Optional steps'
|
|
746
|
+
},
|
|
747
|
+
{
|
|
748
|
+
type: 'paragraph',
|
|
749
|
+
text: 'These steps are not required.'
|
|
750
|
+
},
|
|
751
|
+
{
|
|
752
|
+
type: 'list',
|
|
753
|
+
style: 'choice',
|
|
754
|
+
contents: [
|
|
755
|
+
{
|
|
756
|
+
href: 'https://www.google.co.uk/',
|
|
757
|
+
text: "Get annoyed when it doesn't work"
|
|
758
|
+
},
|
|
759
|
+
{
|
|
760
|
+
href: 'http://www.google.com',
|
|
761
|
+
text: 'Try to find someone else who knows how to do it',
|
|
762
|
+
context: '1 to 10 minutes'
|
|
763
|
+
}
|
|
764
|
+
]
|
|
765
|
+
}
|
|
766
|
+
]
|
|
767
|
+
},
|
|
768
|
+
{
|
|
769
|
+
title: 'Join and configure the standup',
|
|
770
|
+
show_help_link: true,
|
|
771
|
+
contents: [
|
|
772
|
+
{
|
|
773
|
+
type: 'paragraph',
|
|
774
|
+
text: 'Join the hangout and present to those on it.'
|
|
775
|
+
},
|
|
776
|
+
{
|
|
777
|
+
type: 'list',
|
|
778
|
+
style: 'required',
|
|
779
|
+
contents: [
|
|
780
|
+
{
|
|
781
|
+
href: 'http://www.google.com',
|
|
782
|
+
text: 'Connect to standup hangout via the calendar invite'
|
|
783
|
+
},
|
|
784
|
+
{
|
|
785
|
+
text: 'or'
|
|
786
|
+
},
|
|
787
|
+
{
|
|
788
|
+
href: 'http://www.google.com',
|
|
789
|
+
text: 'Connect to standup hangout via the link in the team slack'
|
|
790
|
+
}
|
|
791
|
+
]
|
|
792
|
+
},
|
|
793
|
+
{
|
|
794
|
+
type: 'paragraph',
|
|
795
|
+
text: 'then'
|
|
796
|
+
},
|
|
797
|
+
{
|
|
798
|
+
type: 'list',
|
|
799
|
+
style: 'required',
|
|
800
|
+
contents: [
|
|
801
|
+
{
|
|
802
|
+
href: 'http://www.google.com',
|
|
803
|
+
text: 'Click the three dots in the bottom hand corner to open settings'
|
|
804
|
+
},
|
|
805
|
+
{
|
|
806
|
+
href: 'http://www.google.com',
|
|
807
|
+
text: 'Set speaker to "Jabra"'
|
|
808
|
+
},
|
|
809
|
+
{
|
|
810
|
+
href: 'http://www.google.com',
|
|
811
|
+
text: 'Set microphone to "C Media USB"'
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
href: 'http://www.google.com',
|
|
815
|
+
text: 'Click "present to meeting"'
|
|
816
|
+
},
|
|
817
|
+
]
|
|
818
|
+
}
|
|
819
|
+
]
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
title: 'Clear up',
|
|
823
|
+
contents: [
|
|
824
|
+
{
|
|
825
|
+
type: 'paragraph',
|
|
826
|
+
text: 'Disconnect from the hangout and disconnect any cables.'
|
|
827
|
+
},
|
|
828
|
+
{
|
|
829
|
+
type: 'paragraph',
|
|
830
|
+
text: 'Most importantly, remember to switch off the catchbox to save the battery.'
|
|
831
|
+
}
|
|
832
|
+
]
|
|
833
|
+
},
|
|
834
|
+
{
|
|
835
|
+
title: 'Get someone else to clear up',
|
|
836
|
+
logic: 'or',
|
|
837
|
+
optional: true,
|
|
838
|
+
contents: [
|
|
839
|
+
{
|
|
840
|
+
type: 'paragraph',
|
|
841
|
+
text: 'Schedule another meeting for right after the standup and force someone else to sort everything out.'
|
|
842
|
+
}
|
|
843
|
+
]
|
|
844
|
+
}
|
|
845
|
+
]
|
|
846
|
+
small:
|
|
847
|
+
description: Designed to fit in the sidebar of a page. Note that the small version of the component should not become smaller on mobile, and the large version on mobile should be the same size as the small version. This example is a copy of the one above for comparison.
|
|
848
|
+
data:
|
|
849
|
+
small: true
|
|
850
|
+
remember_last_step: true
|
|
851
|
+
step_nav_url: "/learn-to-setup-standup"
|
|
852
|
+
highlight_step: 3
|
|
853
|
+
steps: [
|
|
854
|
+
{
|
|
855
|
+
title: 'Get the TV ready (small)',
|
|
856
|
+
contents: [
|
|
857
|
+
{
|
|
858
|
+
type: 'paragraph',
|
|
859
|
+
text: 'Configure the television so it is ready for the standup. You will also need a laptop.'
|
|
860
|
+
},
|
|
861
|
+
{
|
|
862
|
+
type: 'list',
|
|
863
|
+
style: 'required',
|
|
864
|
+
contents: [
|
|
865
|
+
{
|
|
866
|
+
href: 'https://en.wikipedia.org/wiki/HDMI',
|
|
867
|
+
text: 'Remove the Chromebit from HDMI 1 on the TV'
|
|
868
|
+
}
|
|
869
|
+
]
|
|
870
|
+
}
|
|
871
|
+
]
|
|
872
|
+
},
|
|
873
|
+
{
|
|
874
|
+
title: 'Plug everything in (small)',
|
|
875
|
+
logic: "and",
|
|
876
|
+
contents: [
|
|
877
|
+
{
|
|
878
|
+
type: 'paragraph',
|
|
879
|
+
text: 'Connect the relevant cables between the various devices.'
|
|
880
|
+
},
|
|
881
|
+
{
|
|
882
|
+
type: 'list',
|
|
883
|
+
style: 'required',
|
|
884
|
+
contents: [
|
|
885
|
+
{
|
|
886
|
+
href: 'https://www.google.co.uk/',
|
|
887
|
+
text: 'Run the HDMI - MINI DVI cable from the TV to the facilitators laptop'
|
|
888
|
+
},
|
|
889
|
+
{
|
|
890
|
+
href: 'https://www.jabra.co.uk/',
|
|
891
|
+
text: 'Plug the Jabra into the facilitators laptop'
|
|
892
|
+
}
|
|
893
|
+
]
|
|
894
|
+
}
|
|
895
|
+
]
|
|
896
|
+
},
|
|
897
|
+
{
|
|
898
|
+
title: 'Configure the catchbox (small)',
|
|
899
|
+
contents: [
|
|
900
|
+
{
|
|
901
|
+
type: 'paragraph',
|
|
902
|
+
text: 'These steps are required.'
|
|
903
|
+
},
|
|
904
|
+
{
|
|
905
|
+
type: 'list',
|
|
906
|
+
style: 'required',
|
|
907
|
+
contents: [
|
|
908
|
+
{
|
|
909
|
+
href: 'http://www.google.com',
|
|
910
|
+
text: 'Ensure the catchbox transmitter is plugged in at the mains wall'
|
|
911
|
+
},
|
|
912
|
+
{
|
|
913
|
+
href: 'http://www.google.com',
|
|
914
|
+
text: 'Turn on the transmitter and wait for the switch to blink green'
|
|
915
|
+
},
|
|
916
|
+
{
|
|
917
|
+
href: 'http://www.google.com',
|
|
918
|
+
text: 'Plug the transmitter USB cable into the facilitators laptop',
|
|
919
|
+
active: true
|
|
920
|
+
},
|
|
921
|
+
{
|
|
922
|
+
href: 'http://www.google.com',
|
|
923
|
+
text: 'Twist and pull the black piece of foam out of the catchbox'
|
|
924
|
+
},
|
|
925
|
+
{
|
|
926
|
+
href: 'http://www.google.com',
|
|
927
|
+
text: 'Turn on the catchbox and wait for the LED to turn green'
|
|
928
|
+
},
|
|
929
|
+
{
|
|
930
|
+
href: 'http://www.google.com',
|
|
931
|
+
text: 'Wait for the transmitter light to turn solid green'
|
|
932
|
+
}
|
|
933
|
+
]
|
|
934
|
+
},
|
|
935
|
+
{
|
|
936
|
+
type: 'substep',
|
|
937
|
+
optional: true
|
|
938
|
+
},
|
|
939
|
+
{
|
|
940
|
+
type: 'heading',
|
|
941
|
+
text: 'Optional steps'
|
|
942
|
+
},
|
|
943
|
+
{
|
|
944
|
+
type: 'paragraph',
|
|
945
|
+
text: 'These steps are not required.'
|
|
946
|
+
},
|
|
947
|
+
{
|
|
948
|
+
type: 'list',
|
|
949
|
+
style: 'choice',
|
|
950
|
+
contents: [
|
|
951
|
+
{
|
|
952
|
+
href: 'https://www.google.co.uk/',
|
|
953
|
+
text: "Get annoyed when it doesn't work"
|
|
954
|
+
},
|
|
955
|
+
{
|
|
956
|
+
href: 'http://www.google.com',
|
|
957
|
+
text: 'Try to find someone else who knows how to do it',
|
|
958
|
+
context: '1 to 10 minutes'
|
|
959
|
+
}
|
|
960
|
+
]
|
|
961
|
+
}
|
|
962
|
+
]
|
|
963
|
+
},
|
|
964
|
+
{
|
|
965
|
+
title: 'Join and configure the standup (small)',
|
|
966
|
+
show_help_link: true,
|
|
967
|
+
contents: [
|
|
968
|
+
{
|
|
969
|
+
type: 'paragraph',
|
|
970
|
+
text: 'Join the hangout and present to those on it.'
|
|
971
|
+
},
|
|
972
|
+
{
|
|
973
|
+
type: 'list',
|
|
974
|
+
style: 'required',
|
|
975
|
+
contents: [
|
|
976
|
+
{
|
|
977
|
+
href: 'http://www.google.com',
|
|
978
|
+
text: 'Connect to standup hangout via the calendar invite'
|
|
979
|
+
},
|
|
980
|
+
{
|
|
981
|
+
text: 'or'
|
|
982
|
+
},
|
|
983
|
+
{
|
|
984
|
+
href: 'http://www.google.com',
|
|
985
|
+
text: 'Connect to standup hangout via the link in the team slack'
|
|
986
|
+
}
|
|
987
|
+
]
|
|
988
|
+
},
|
|
989
|
+
{
|
|
990
|
+
type: 'paragraph',
|
|
991
|
+
text: 'then'
|
|
992
|
+
},
|
|
993
|
+
{
|
|
994
|
+
type: 'list',
|
|
995
|
+
style: 'required',
|
|
996
|
+
contents: [
|
|
997
|
+
{
|
|
998
|
+
href: 'http://www.google.com',
|
|
999
|
+
text: 'Click the three dots in the bottom hand corner to open settings'
|
|
1000
|
+
},
|
|
1001
|
+
{
|
|
1002
|
+
href: 'http://www.google.com',
|
|
1003
|
+
text: 'Set speaker to "Jabra"'
|
|
1004
|
+
},
|
|
1005
|
+
{
|
|
1006
|
+
href: 'http://www.google.com',
|
|
1007
|
+
text: 'Set microphone to "C Media USB"'
|
|
1008
|
+
},
|
|
1009
|
+
{
|
|
1010
|
+
href: 'http://www.google.com',
|
|
1011
|
+
text: 'Click "present to meeting"'
|
|
1012
|
+
},
|
|
1013
|
+
]
|
|
1014
|
+
}
|
|
1015
|
+
]
|
|
1016
|
+
},
|
|
1017
|
+
{
|
|
1018
|
+
title: 'Clear up (small)',
|
|
1019
|
+
contents: [
|
|
1020
|
+
{
|
|
1021
|
+
type: 'paragraph',
|
|
1022
|
+
text: 'Disconnect from the hangout and disconnect any cables.'
|
|
1023
|
+
},
|
|
1024
|
+
{
|
|
1025
|
+
type: 'paragraph',
|
|
1026
|
+
text: 'Most importantly, remember to switch off the catchbox to save the battery.'
|
|
1027
|
+
}
|
|
1028
|
+
]
|
|
1029
|
+
},
|
|
1030
|
+
{
|
|
1031
|
+
title: 'Get someone else to clear up (small)',
|
|
1032
|
+
logic: 'or',
|
|
1033
|
+
optional: true,
|
|
1034
|
+
contents: [
|
|
1035
|
+
{
|
|
1036
|
+
type: 'paragraph',
|
|
1037
|
+
text: 'Schedule another meeting for right after the standup and force someone else to sort everything out.'
|
|
1038
|
+
}
|
|
1039
|
+
]
|
|
1040
|
+
}
|
|
1041
|
+
]
|