govuk_publishing_components 13.6.1 → 13.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js +31 -13
- data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_accessible-autocomplete.scss +6 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +15 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +31 -0
- data/app/views/govuk_publishing_components/components/_accordion.html.erb +45 -0
- data/app/views/govuk_publishing_components/components/_feedback.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/docs/accordion.yml +351 -0
- data/app/views/govuk_publishing_components/components/docs/button.yml +5 -0
- data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb +1 -1
- data/lib/govuk_publishing_components.rb +1 -0
- data/lib/govuk_publishing_components/presenters/accordion_helper.rb +12 -0
- data/lib/govuk_publishing_components/presenters/button_helper.rb +7 -2
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/package.json +8 -8
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 15cf96f125f89a65e28a51450d8a135906d877cdadcca39b2acb0be159879295
|
|
4
|
+
data.tar.gz: a27d8357503ffcae6c47a090b7c43791a63e860f70aebca9dfbe45af11efb01f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: af4fa01ba4e02ad638ecb433d9a5515bdaa399cd93c8d6992f5f9626fda74e40d7ca29680e717ba7c617a73f76dede2f5c2ce88edb072af06e614ea0cdd1e7ef
|
|
7
|
+
data.tar.gz: e83abd9b33797e68a9fff43cb204d501840f8d02b89fb018eb1d568b7ef252c3f76cd288e4dd0843971b697404ff0de5b3fd5b15a5bc99d2ee5119ee1647581e
|
data/app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js
CHANGED
|
@@ -7,8 +7,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
7
7
|
"use strict";
|
|
8
8
|
|
|
9
9
|
Modules.AccessibleAutocomplete = function () {
|
|
10
|
+
var $selectElem;
|
|
11
|
+
|
|
10
12
|
this.start = function ($element) {
|
|
11
|
-
|
|
13
|
+
$selectElem = $element.find('select');
|
|
12
14
|
|
|
13
15
|
var configOptions = {
|
|
14
16
|
selectElement: document.getElementById($selectElem.attr('id')),
|
|
@@ -18,20 +20,36 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
18
20
|
defaultValue: ""
|
|
19
21
|
};
|
|
20
22
|
|
|
21
|
-
configOptions.onConfirm =
|
|
22
|
-
if ($selectElem.data('track-category') !== undefined && $selectElem.data('track-action') !== undefined) {
|
|
23
|
-
track($selectElem.data('track-category'), $selectElem.data('track-action'), label, $selectElem.data('track-options'));
|
|
24
|
-
}
|
|
25
|
-
// This is to compensate for the fact that the accessible-autocomplete library will not
|
|
26
|
-
// update the hidden select if the onConfirm function is supplied
|
|
27
|
-
// https://github.com/alphagov/accessible-autocomplete/issues/322
|
|
28
|
-
var value = $selectElem.children("option").filter(function () { return $(this).html() == label; }).val();
|
|
29
|
-
if (typeof value !== 'undefined') {
|
|
30
|
-
$selectElem.val(value).trigger( "change" );
|
|
31
|
-
}
|
|
32
|
-
};
|
|
23
|
+
configOptions.onConfirm = this.onConfirm;
|
|
33
24
|
|
|
34
25
|
new accessibleAutocomplete.enhanceSelectElement(configOptions);
|
|
26
|
+
//attach the onConfirm function to data attr, to call it in finder-frontend when clearing facet tags
|
|
27
|
+
$selectElem.data('onconfirm', this.onConfirm);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
this.onConfirm = function(label, removeDropDown) {
|
|
31
|
+
if ($selectElem.data('track-category') !== undefined && $selectElem.data('track-action') !== undefined) {
|
|
32
|
+
track($selectElem.data('track-category'), $selectElem.data('track-action'), label, $selectElem.data('track-options'));
|
|
33
|
+
}
|
|
34
|
+
// This is to compensate for the fact that the accessible-autocomplete library will not
|
|
35
|
+
// update the hidden select if the onConfirm function is supplied
|
|
36
|
+
// https://github.com/alphagov/accessible-autocomplete/issues/322
|
|
37
|
+
var value = $selectElem.children("option").filter(function () { return $(this).html() == label; }).val();
|
|
38
|
+
if (typeof value !== 'undefined') {
|
|
39
|
+
$selectElem.val(value).change();
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// used to clear the autocomplete when clicking on a facet tag in finder-frontend
|
|
43
|
+
// very brittle but menu visibility is determined by autocomplete after this function is called
|
|
44
|
+
// setting autocomplete val to '' causes menu to appear, we don't want that, this solves it
|
|
45
|
+
// ideally will rewrite autocomplete to have better hooks in future
|
|
46
|
+
if (removeDropDown) {
|
|
47
|
+
$selectElem.closest('.gem-c-accessible-autocomplete').addClass('gem-c-accessible-autocomplete--hide-menu');
|
|
48
|
+
setTimeout(function() {
|
|
49
|
+
$('.autocomplete__menu').remove(); // this element is recreated every time the user starts typing
|
|
50
|
+
$selectElem.closest('.gem-c-accessible-autocomplete').removeClass('gem-c-accessible-autocomplete--hide-menu');
|
|
51
|
+
}, 100);
|
|
52
|
+
}
|
|
35
53
|
};
|
|
36
54
|
|
|
37
55
|
function track (category, action, label, options) {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@import "govuk-frontend/components/accordion/accordion";
|
|
2
|
+
|
|
3
|
+
.govuk-accordion--condensed {
|
|
4
|
+
.govuk-accordion__section-button {
|
|
5
|
+
@include govuk-media-query($from: tablet) {
|
|
6
|
+
@include govuk-font($size: 19, $weight: bold);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.govuk-accordion__section-summary {
|
|
11
|
+
@include govuk-media-query($from: tablet) {
|
|
12
|
+
@include govuk-font($size: 16);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
// This is in place until a proper fix comes through from GOV.UK Frontend.
|
|
2
|
+
//
|
|
3
|
+
// TODO: Replace with the print styles that will come from GOV.UK Frontend.
|
|
4
|
+
|
|
5
|
+
@import "../accordion";
|
|
6
|
+
|
|
7
|
+
// Open all of the accordion sections.
|
|
8
|
+
.govuk-accordion__section-content {
|
|
9
|
+
display: block !important;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// Change the colour from the blue link colour to black.
|
|
13
|
+
.govuk-accordion__section-button {
|
|
14
|
+
color: govuk-colour('black') !important;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Change the summary subheading size.
|
|
18
|
+
.govuk-accordion__section-summary {
|
|
19
|
+
@include govuk-typography-common();
|
|
20
|
+
@include govuk-typography-responsive($size: 16, $important: true);
|
|
21
|
+
|
|
22
|
+
.govuk-accordion--condensed & {
|
|
23
|
+
@include govuk-typography-responsive($size: 14, $important: true);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Hide the unusable 'Open all' button and the '+' icons.
|
|
28
|
+
.govuk-accordion__open-all,
|
|
29
|
+
.govuk-accordion__icon {
|
|
30
|
+
display: none !important;
|
|
31
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<%
|
|
2
|
+
heading_helper = GovukPublishingComponents::Presenters::AccordionHelper.new(local_assigns)
|
|
3
|
+
|
|
4
|
+
id ||= "default-id-#{SecureRandom.hex(4)}"
|
|
5
|
+
items ||= []
|
|
6
|
+
condensed ||= false
|
|
7
|
+
accordion_classes = %w(gem-c-accordion govuk-accordion)
|
|
8
|
+
accordion_classes << 'govuk-accordion--condensed' if condensed
|
|
9
|
+
|
|
10
|
+
data_attributes ||= {}
|
|
11
|
+
data_attributes[:module] = 'accordion'
|
|
12
|
+
%>
|
|
13
|
+
<% if items.any? %>
|
|
14
|
+
<%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
|
|
15
|
+
<% items.each_with_index do |item, i| %>
|
|
16
|
+
<%
|
|
17
|
+
# Nunjucks starts a loop on 1 and the client side JavaScript also
|
|
18
|
+
# adopts this behaviour. To prevent things from breaking, the index
|
|
19
|
+
# here also need to be increase by one. (Nunjucks is used by GOV.UK
|
|
20
|
+
# Frontend, which this component is based on.)
|
|
21
|
+
index = i + 1
|
|
22
|
+
|
|
23
|
+
item[:data_attributes] ||= nil
|
|
24
|
+
|
|
25
|
+
section_classes = %w(govuk-accordion__section)
|
|
26
|
+
section_classes << 'govuk-accordion__section--expanded' if item[:expanded]
|
|
27
|
+
|
|
28
|
+
summary_classes = %w(govuk-accordion__section-summary govuk-body)
|
|
29
|
+
%>
|
|
30
|
+
<%= tag.div(class: section_classes) do %>
|
|
31
|
+
<div class="govuk-accordion__section-header">
|
|
32
|
+
<%=
|
|
33
|
+
content_tag(
|
|
34
|
+
heading_helper.heading_tag,
|
|
35
|
+
content_tag('span', item[:heading][:text], class: "govuk-accordion__section-button", id: "#{id}-heading-#{index}", data: item[:data_attributes]),
|
|
36
|
+
class: 'govuk-accordion__section-heading'
|
|
37
|
+
)
|
|
38
|
+
%>
|
|
39
|
+
<%= tag.div(item[:summary][:text], id: "#{id}-summary-#{index}", class: summary_classes) if item[:summary].present? %>
|
|
40
|
+
</div>
|
|
41
|
+
<%= tag.div(item[:content][:html], id: "#{id}-content-#{index}", class: "govuk-accordion__section-content", 'aria-labelledby': "#{id}-heading-#{index}") %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
<div class="gem-c-feedback <%= margin_top_class %>" data-module="feedback">
|
|
15
15
|
<%= render "govuk_publishing_components/components/feedback/yes_no_banner" %>
|
|
16
16
|
<%= render "govuk_publishing_components/components/feedback/problem_form", url_without_pii: url_without_pii %>
|
|
17
|
-
<%= render "govuk_publishing_components/components/feedback/survey_signup_form",
|
|
17
|
+
<%= render "govuk_publishing_components/components/feedback/survey_signup_form", path_without_pii: path_without_pii %>
|
|
18
18
|
</div>
|
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
name: Accordion (experimental)
|
|
2
|
+
description: The accordion component lets users show and hide sections of related content on a page.
|
|
3
|
+
govuk_frontend_components:
|
|
4
|
+
- accordion
|
|
5
|
+
body: |
|
|
6
|
+
This component is based on the [design system accordion component](https://design-system.service.gov.uk/components/accordion/) and is currently experimental. If using this component, please feed back any research findings to the design team.
|
|
7
|
+
|
|
8
|
+
accessibility_criteria: |
|
|
9
|
+
The accordion must:
|
|
10
|
+
|
|
11
|
+
* accept focus
|
|
12
|
+
* be usable with a keyboard
|
|
13
|
+
* indicate when they have focus
|
|
14
|
+
* be usable with touch
|
|
15
|
+
* be usable with voice commands
|
|
16
|
+
* have visible text
|
|
17
|
+
* indicate to users that each section can be expanded and collapsed
|
|
18
|
+
* inform the user when a step has been expanded or collapsed
|
|
19
|
+
* be readable when only the text of the page is zoomed in
|
|
20
|
+
|
|
21
|
+
Section headings must use a button element:
|
|
22
|
+
|
|
23
|
+
* so that sections can be toggled with the space and enter keys
|
|
24
|
+
* so that sections can't be opened in a new tab or window
|
|
25
|
+
|
|
26
|
+
When JavaScript is unavailable the component must:
|
|
27
|
+
|
|
28
|
+
* be fully expanded
|
|
29
|
+
* not be marked as expandable
|
|
30
|
+
shared_accessibility_criteria:
|
|
31
|
+
- link
|
|
32
|
+
examples:
|
|
33
|
+
default:
|
|
34
|
+
data:
|
|
35
|
+
items:
|
|
36
|
+
- heading:
|
|
37
|
+
text: "Writing well for the web"
|
|
38
|
+
content:
|
|
39
|
+
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
|
|
40
|
+
- heading:
|
|
41
|
+
text: "Writing well for specialists"
|
|
42
|
+
content:
|
|
43
|
+
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
|
|
44
|
+
- heading:
|
|
45
|
+
text: "Know your audience"
|
|
46
|
+
content:
|
|
47
|
+
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
|
|
48
|
+
- heading:
|
|
49
|
+
text: "How people read"
|
|
50
|
+
content:
|
|
51
|
+
html: "<p class='govuk-body'>This is the content for How people read.</p>"
|
|
52
|
+
with_supplied_identification:
|
|
53
|
+
description: |
|
|
54
|
+
An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
|
|
55
|
+
|
|
56
|
+
The `id` must be **unique** across the domain of your service - this is because as the open / closed state of individual instances of the accordion persists across page loads using `localStorage`.
|
|
57
|
+
|
|
58
|
+
Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes.
|
|
59
|
+
data:
|
|
60
|
+
id: with-supplied-id-thats-unique-across-the-domain
|
|
61
|
+
items:
|
|
62
|
+
- heading:
|
|
63
|
+
text: "Writing well for the web"
|
|
64
|
+
content:
|
|
65
|
+
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
|
|
66
|
+
- heading:
|
|
67
|
+
text: "Writing well for specialists"
|
|
68
|
+
content:
|
|
69
|
+
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
|
|
70
|
+
- heading:
|
|
71
|
+
text: "Know your audience"
|
|
72
|
+
content:
|
|
73
|
+
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
|
|
74
|
+
- heading:
|
|
75
|
+
text: "How people read"
|
|
76
|
+
content:
|
|
77
|
+
html: "<p class='govuk-body'>This is the content for How people read.</p>"
|
|
78
|
+
with_summary:
|
|
79
|
+
description: Adds a subheading below each section heading.
|
|
80
|
+
data:
|
|
81
|
+
items:
|
|
82
|
+
- heading:
|
|
83
|
+
text: "Understanding agile project management"
|
|
84
|
+
summary:
|
|
85
|
+
text: "Introductions, methods, core features."
|
|
86
|
+
content:
|
|
87
|
+
html:
|
|
88
|
+
'<ul class="govuk-list">
|
|
89
|
+
<li>
|
|
90
|
+
<a class="govuk-link" href="#">Agile and government services: an introduction</a>
|
|
91
|
+
</li>
|
|
92
|
+
<li>
|
|
93
|
+
<a class="govuk-link" href="#">Agile methods: an introduction</a>
|
|
94
|
+
</li>
|
|
95
|
+
<li>
|
|
96
|
+
<a class="govuk-link" href="#">Core principles of agile</a>
|
|
97
|
+
</li>
|
|
98
|
+
</ul>'
|
|
99
|
+
- heading:
|
|
100
|
+
text: "Working with agile methods"
|
|
101
|
+
summary:
|
|
102
|
+
text: "Workspaces, tools and techniques, user stories, planning."
|
|
103
|
+
content:
|
|
104
|
+
html:
|
|
105
|
+
'<ul class="govuk-list">
|
|
106
|
+
<li>
|
|
107
|
+
<a class="govuk-link" href="#">Creating an agile working environment</a>
|
|
108
|
+
</li>
|
|
109
|
+
<li>
|
|
110
|
+
<a class="govuk-link" href="#">Agile tools and techniques</a>
|
|
111
|
+
</li>
|
|
112
|
+
<li>
|
|
113
|
+
<a class="govuk-link" href="#">Set up a team wall</a>
|
|
114
|
+
</li>
|
|
115
|
+
<li>
|
|
116
|
+
<a class="govuk-link" href="#">Writing user stories</a>
|
|
117
|
+
</li>
|
|
118
|
+
<li>
|
|
119
|
+
<a class="govuk-link" href="#">Planning in agile</a>
|
|
120
|
+
</li>
|
|
121
|
+
<li>
|
|
122
|
+
<a class="govuk-link" href="#">Deciding on priorities</a>
|
|
123
|
+
</li>
|
|
124
|
+
<li>
|
|
125
|
+
<a class="govuk-link" href="#">Developing a roadmap</a>
|
|
126
|
+
</li>
|
|
127
|
+
</ul>'
|
|
128
|
+
- heading:
|
|
129
|
+
text: "Governing agile services"
|
|
130
|
+
summary:
|
|
131
|
+
text: "Principles, measuring progress, spending money."
|
|
132
|
+
content:
|
|
133
|
+
html:
|
|
134
|
+
'<ul class="govuk-list">
|
|
135
|
+
<li>
|
|
136
|
+
<a class="govuk-link" href="#">Governance principles for agile service delivery</a>
|
|
137
|
+
</li>
|
|
138
|
+
<li>
|
|
139
|
+
<a class="govuk-link" href="#">Measuring and reporting progress</a>
|
|
140
|
+
</li>
|
|
141
|
+
<li>
|
|
142
|
+
<a class="govuk-link" href="#">Spend controls: check if you need approval to spend money on a service</a>
|
|
143
|
+
</li>
|
|
144
|
+
<li>
|
|
145
|
+
<a class="govuk-link" href="#">Spend controls: apply for approval to spend money on a service</a>
|
|
146
|
+
</li>
|
|
147
|
+
<li>
|
|
148
|
+
<a class="govuk-link" href="#">Spend controls: the new pipeline process</a>
|
|
149
|
+
</li>
|
|
150
|
+
<li>
|
|
151
|
+
<a class="govuk-link" href="#">Working across organisational boundaries</a>
|
|
152
|
+
</li>
|
|
153
|
+
</ul>'
|
|
154
|
+
- heading:
|
|
155
|
+
text: "Phases of an agile project"
|
|
156
|
+
summary:
|
|
157
|
+
text: "Discovery, alpha, beta, live and retirement."
|
|
158
|
+
content:
|
|
159
|
+
html:
|
|
160
|
+
'<ul class="govuk-list">
|
|
161
|
+
<li>
|
|
162
|
+
<a class="govuk-link" href="#">How the discovery phase works</a>
|
|
163
|
+
</li>
|
|
164
|
+
<li>
|
|
165
|
+
<a class="govuk-link" href="#">How the alpha phase works</a>
|
|
166
|
+
</li>
|
|
167
|
+
<li>
|
|
168
|
+
<a class="govuk-link" href="#">How the beta phase works</a>
|
|
169
|
+
</li>
|
|
170
|
+
<li>
|
|
171
|
+
<a class="govuk-link" href="#">How the live phase works</a>
|
|
172
|
+
</li>
|
|
173
|
+
<li>
|
|
174
|
+
<a class="govuk-link" href="#">Retiring your service</a>
|
|
175
|
+
</li>
|
|
176
|
+
</ul>'
|
|
177
|
+
with_data_attributes:
|
|
178
|
+
description: |
|
|
179
|
+
Adds custom data attributes to the accordion to each section. Accepts an hash, so multiple attributes can be added.
|
|
180
|
+
|
|
181
|
+
The `data_attributes` hash is for the outermost element in the accordion.
|
|
182
|
+
|
|
183
|
+
Each item can also have a `data_attributes` hash. This is placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
|
|
184
|
+
|
|
185
|
+
data:
|
|
186
|
+
data_attributes:
|
|
187
|
+
gtm: 'gtm-accordion'
|
|
188
|
+
ga: 'ga-accordion'
|
|
189
|
+
items:
|
|
190
|
+
- heading:
|
|
191
|
+
text: "Writing well for the web"
|
|
192
|
+
content:
|
|
193
|
+
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
|
|
194
|
+
data_attributes:
|
|
195
|
+
gtm: 'gtm-accordion-item-1'
|
|
196
|
+
- heading:
|
|
197
|
+
text: "Writing well for specialists"
|
|
198
|
+
content:
|
|
199
|
+
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
|
|
200
|
+
data_attributes:
|
|
201
|
+
gtm: 'gtm-accordion-item-2'
|
|
202
|
+
- heading:
|
|
203
|
+
text: "Know your audience"
|
|
204
|
+
content:
|
|
205
|
+
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
|
|
206
|
+
data_attributes:
|
|
207
|
+
gtm: 'gtm-accordion-item-3'
|
|
208
|
+
- heading:
|
|
209
|
+
text: "How people read"
|
|
210
|
+
content:
|
|
211
|
+
html: "<p class='govuk-body'>This is the content for How people read.</p>"
|
|
212
|
+
data_attributes:
|
|
213
|
+
gtm: 'gtm-accordion-item-4'
|
|
214
|
+
different_heading_level:
|
|
215
|
+
description: This will alter the level of the heading, not the appearance of the heading.
|
|
216
|
+
data:
|
|
217
|
+
heading_level: 5
|
|
218
|
+
items:
|
|
219
|
+
- heading:
|
|
220
|
+
text: "Writing well for the web"
|
|
221
|
+
content:
|
|
222
|
+
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
|
|
223
|
+
- heading:
|
|
224
|
+
text: "Writing well for specialists"
|
|
225
|
+
content:
|
|
226
|
+
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
|
|
227
|
+
- heading:
|
|
228
|
+
text: "Know your audience"
|
|
229
|
+
content:
|
|
230
|
+
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
|
|
231
|
+
- heading:
|
|
232
|
+
text: "How people read"
|
|
233
|
+
content:
|
|
234
|
+
html: "<p class='govuk-body'>This is the content for How people read.</p>"
|
|
235
|
+
with_section_open:
|
|
236
|
+
description: |
|
|
237
|
+
Adding `expanded: true` to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section's default.
|
|
238
|
+
data:
|
|
239
|
+
items:
|
|
240
|
+
- heading:
|
|
241
|
+
text: "Writing well for the web"
|
|
242
|
+
content:
|
|
243
|
+
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
|
|
244
|
+
expanded: true
|
|
245
|
+
- heading:
|
|
246
|
+
text: "Writing well for specialists"
|
|
247
|
+
content:
|
|
248
|
+
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
|
|
249
|
+
- heading:
|
|
250
|
+
text: "Know your audience"
|
|
251
|
+
content:
|
|
252
|
+
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
|
|
253
|
+
- heading:
|
|
254
|
+
text: "How people read"
|
|
255
|
+
content:
|
|
256
|
+
html: "<p class='govuk-body'>This is the content for How people read.</p>"
|
|
257
|
+
condensed_layout:
|
|
258
|
+
description: |
|
|
259
|
+
This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
|
|
260
|
+
data:
|
|
261
|
+
condensed: true
|
|
262
|
+
items:
|
|
263
|
+
- heading:
|
|
264
|
+
text: "Understanding agile project management"
|
|
265
|
+
content:
|
|
266
|
+
html:
|
|
267
|
+
'<ul class="govuk-list">
|
|
268
|
+
<li>
|
|
269
|
+
<a class="govuk-link govuk-body-s" href="#">Agile and government services: an introduction</a>
|
|
270
|
+
</li>
|
|
271
|
+
<li>
|
|
272
|
+
<a class="govuk-link govuk-body-s" href="#">Agile methods: an introduction</a>
|
|
273
|
+
</li>
|
|
274
|
+
<li>
|
|
275
|
+
<a class="govuk-link govuk-body-s" href="#">Core principles of agile</a>
|
|
276
|
+
</li>
|
|
277
|
+
</ul>'
|
|
278
|
+
- heading:
|
|
279
|
+
text: "Working with agile methods"
|
|
280
|
+
summary:
|
|
281
|
+
text: "Workspaces, tools and techniques, user stories, planning."
|
|
282
|
+
content:
|
|
283
|
+
html:
|
|
284
|
+
'<ul class="govuk-list">
|
|
285
|
+
<li>
|
|
286
|
+
<a class="govuk-link govuk-body-s" href="#">Creating an agile working environment</a>
|
|
287
|
+
</li>
|
|
288
|
+
<li>
|
|
289
|
+
<a class="govuk-link govuk-body-s" href="#">Agile tools and techniques</a>
|
|
290
|
+
</li>
|
|
291
|
+
<li>
|
|
292
|
+
<a class="govuk-link govuk-body-s" href="#">Set up a team wall</a>
|
|
293
|
+
</li>
|
|
294
|
+
<li>
|
|
295
|
+
<a class="govuk-link govuk-body-s" href="#">Writing user stories</a>
|
|
296
|
+
</li>
|
|
297
|
+
<li>
|
|
298
|
+
<a class="govuk-link govuk-body-s" href="#">Planning in agile</a>
|
|
299
|
+
</li>
|
|
300
|
+
<li>
|
|
301
|
+
<a class="govuk-link govuk-body-s" href="#">Deciding on priorities</a>
|
|
302
|
+
</li>
|
|
303
|
+
<li>
|
|
304
|
+
<a class="govuk-link govuk-body-s" href="#">Developing a roadmap</a>
|
|
305
|
+
</li>
|
|
306
|
+
</ul>'
|
|
307
|
+
- heading:
|
|
308
|
+
text: "Governing agile services"
|
|
309
|
+
content:
|
|
310
|
+
html:
|
|
311
|
+
'<ul class="govuk-list">
|
|
312
|
+
<li>
|
|
313
|
+
<a class="govuk-link govuk-body-s" href="#">Governance principles for agile service delivery</a>
|
|
314
|
+
</li>
|
|
315
|
+
<li>
|
|
316
|
+
<a class="govuk-link govuk-body-s" href="#">Measuring and reporting progress</a>
|
|
317
|
+
</li>
|
|
318
|
+
<li>
|
|
319
|
+
<a class="govuk-link govuk-body-s" href="#">Spend controls: check if you need approval to spend money on a service</a>
|
|
320
|
+
</li>
|
|
321
|
+
<li>
|
|
322
|
+
<a class="govuk-link govuk-body-s" href="#">Spend controls: apply for approval to spend money on a service</a>
|
|
323
|
+
</li>
|
|
324
|
+
<li>
|
|
325
|
+
<a class="govuk-link govuk-body-s" href="#">Spend controls: the new pipeline process</a>
|
|
326
|
+
</li>
|
|
327
|
+
<li>
|
|
328
|
+
<a class="govuk-link govuk-body-s" href="#">Working across organisational boundaries</a>
|
|
329
|
+
</li>
|
|
330
|
+
</ul>'
|
|
331
|
+
- heading:
|
|
332
|
+
text: "Phases of an agile project"
|
|
333
|
+
content:
|
|
334
|
+
html:
|
|
335
|
+
'<ul class="govuk-list">
|
|
336
|
+
<li>
|
|
337
|
+
<a class="govuk-link govuk-body-s" href="#">How the discovery phase works</a>
|
|
338
|
+
</li>
|
|
339
|
+
<li>
|
|
340
|
+
<a class="govuk-link govuk-body-s" href="#">How the alpha phase works</a>
|
|
341
|
+
</li>
|
|
342
|
+
<li>
|
|
343
|
+
<a class="govuk-link govuk-body-s" href="#">How the beta phase works</a>
|
|
344
|
+
</li>
|
|
345
|
+
<li>
|
|
346
|
+
<a class="govuk-link govuk-body-s" href="#">How the live phase works</a>
|
|
347
|
+
</li>
|
|
348
|
+
<li>
|
|
349
|
+
<a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
|
|
350
|
+
</li>
|
|
351
|
+
</ul>'
|
|
@@ -33,6 +33,11 @@ examples:
|
|
|
33
33
|
text: "I'm really a link sssh"
|
|
34
34
|
href: "http://www.gov.uk"
|
|
35
35
|
target: "_blank"
|
|
36
|
+
with_type:
|
|
37
|
+
description: Buttons default to having a type of submit, but in some cases it may be desirable to have a different type.
|
|
38
|
+
data:
|
|
39
|
+
text: "Button type button"
|
|
40
|
+
type: "button"
|
|
36
41
|
start_now_button:
|
|
37
42
|
data:
|
|
38
43
|
text: "Start now"
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
<div class="gem-c-feedback__error-summary js-hidden js-errors" tabindex="-1"></div>
|
|
18
18
|
|
|
19
19
|
<input name="email_survey_signup[survey_id]" type="hidden" value="footer_satisfaction_survey">
|
|
20
|
-
<input name="email_survey_signup[survey_source]" type="hidden" value="<%=
|
|
20
|
+
<input name="email_survey_signup[survey_source]" type="hidden" value="<%= path_without_pii %>">
|
|
21
21
|
<input name="email_survey_signup[ga_client_id]" type="hidden" value="1627485790.1515403243">
|
|
22
22
|
|
|
23
23
|
<h3 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h3>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
require "govuk_publishing_components/config"
|
|
2
2
|
require "govuk_publishing_components/engine"
|
|
3
|
+
require "govuk_publishing_components/presenters/accordion_helper"
|
|
3
4
|
require "govuk_publishing_components/presenters/breadcrumbs"
|
|
4
5
|
require "govuk_publishing_components/presenters/button_helper"
|
|
5
6
|
require "govuk_publishing_components/presenters/contextual_navigation"
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
module GovukPublishingComponents
|
|
2
|
+
module Presenters
|
|
3
|
+
class AccordionHelper
|
|
4
|
+
attr_reader :heading_tag
|
|
5
|
+
|
|
6
|
+
def initialize(options)
|
|
7
|
+
@heading_tag = "h2"
|
|
8
|
+
@heading_tag = "h#{options[:heading_level]}" if [1, 2, 3, 4, 5, 6].include? options[:heading_level]
|
|
9
|
+
end
|
|
10
|
+
end
|
|
11
|
+
end
|
|
12
|
+
end
|
|
@@ -4,7 +4,7 @@ module GovukPublishingComponents
|
|
|
4
4
|
module Presenters
|
|
5
5
|
class ButtonHelper
|
|
6
6
|
attr_reader :href, :text, :title, :info_text, :rel, :data_attributes,
|
|
7
|
-
:margin_bottom, :target, :start, :secondary, :secondary_quiet, :destructive
|
|
7
|
+
:margin_bottom, :target, :type, :start, :secondary, :secondary_quiet, :destructive
|
|
8
8
|
|
|
9
9
|
def initialize(local_assigns)
|
|
10
10
|
@href = local_assigns[:href]
|
|
@@ -15,6 +15,7 @@ module GovukPublishingComponents
|
|
|
15
15
|
@data_attributes = local_assigns[:data_attributes]
|
|
16
16
|
@margin_bottom = local_assigns[:margin_bottom]
|
|
17
17
|
@target = local_assigns[:target]
|
|
18
|
+
@type = local_assigns[:type]
|
|
18
19
|
@start = local_assigns[:start]
|
|
19
20
|
@secondary = local_assigns[:secondary]
|
|
20
21
|
@secondary_quiet = local_assigns[:secondary_quiet]
|
|
@@ -28,7 +29,7 @@ module GovukPublishingComponents
|
|
|
28
29
|
def html_options
|
|
29
30
|
options = { class: css_classes }
|
|
30
31
|
options[:role] = "button" if link?
|
|
31
|
-
options[:type] =
|
|
32
|
+
options[:type] = button_type
|
|
32
33
|
options[:rel] = rel if rel
|
|
33
34
|
options[:data] = data_attributes if data_attributes
|
|
34
35
|
options[:title] = title if title
|
|
@@ -36,6 +37,10 @@ module GovukPublishingComponents
|
|
|
36
37
|
options
|
|
37
38
|
end
|
|
38
39
|
|
|
40
|
+
def button_type
|
|
41
|
+
type || "submit" unless link?
|
|
42
|
+
end
|
|
43
|
+
|
|
39
44
|
private
|
|
40
45
|
|
|
41
46
|
def css_classes
|
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
"_args": [
|
|
3
3
|
[
|
|
4
4
|
{
|
|
5
|
-
"raw": "govuk-frontend@^2.
|
|
5
|
+
"raw": "govuk-frontend@^2.5.1",
|
|
6
6
|
"scope": null,
|
|
7
7
|
"escapedName": "govuk-frontend",
|
|
8
8
|
"name": "govuk-frontend",
|
|
9
|
-
"rawSpec": "^2.
|
|
10
|
-
"spec": ">=2.
|
|
9
|
+
"rawSpec": "^2.5.1",
|
|
10
|
+
"spec": ">=2.5.1 <3.0.0",
|
|
11
11
|
"type": "range"
|
|
12
12
|
},
|
|
13
13
|
"/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ"
|
|
14
14
|
]
|
|
15
15
|
],
|
|
16
|
-
"_from": "govuk-frontend@>=2.
|
|
16
|
+
"_from": "govuk-frontend@>=2.5.1 <3.0.0",
|
|
17
17
|
"_hasShrinkwrap": false,
|
|
18
18
|
"_id": "govuk-frontend@2.5.1",
|
|
19
19
|
"_inCache": true,
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"_npmVersion": "5.6.0",
|
|
31
31
|
"_phantomChildren": {},
|
|
32
32
|
"_requested": {
|
|
33
|
-
"raw": "govuk-frontend@^2.
|
|
33
|
+
"raw": "govuk-frontend@^2.5.1",
|
|
34
34
|
"scope": null,
|
|
35
35
|
"escapedName": "govuk-frontend",
|
|
36
36
|
"name": "govuk-frontend",
|
|
37
|
-
"rawSpec": "^2.
|
|
38
|
-
"spec": ">=2.
|
|
37
|
+
"rawSpec": "^2.5.1",
|
|
38
|
+
"spec": ">=2.5.1 <3.0.0",
|
|
39
39
|
"type": "range"
|
|
40
40
|
},
|
|
41
41
|
"_requiredBy": [
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"_resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-2.5.1.tgz",
|
|
45
45
|
"_shasum": "96082aedfef23bfce6591c3520b06d803be2d7fa",
|
|
46
46
|
"_shrinkwrap": null,
|
|
47
|
-
"_spec": "govuk-frontend@^2.
|
|
47
|
+
"_spec": "govuk-frontend@^2.5.1",
|
|
48
48
|
"_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
|
|
49
49
|
"author": {
|
|
50
50
|
"name": "GOV.UK Design System Team",
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 13.
|
|
4
|
+
version: 13.7.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2019-01-
|
|
11
|
+
date: 2019-01-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govspeak
|
|
@@ -310,6 +310,7 @@ files:
|
|
|
310
310
|
- app/assets/javascripts/component_guide/visual-regression.js
|
|
311
311
|
- app/assets/javascripts/govuk_publishing_components/all_components.js
|
|
312
312
|
- app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js
|
|
313
|
+
- app/assets/javascripts/govuk_publishing_components/components/accordion.js
|
|
313
314
|
- app/assets/javascripts/govuk_publishing_components/components/character-count.js
|
|
314
315
|
- app/assets/javascripts/govuk_publishing_components/components/checkboxes.js
|
|
315
316
|
- app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js
|
|
@@ -328,6 +329,7 @@ files:
|
|
|
328
329
|
- app/assets/stylesheets/govuk_publishing_components/_all_components.scss
|
|
329
330
|
- app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss
|
|
330
331
|
- app/assets/stylesheets/govuk_publishing_components/components/_accessible-autocomplete.scss
|
|
332
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss
|
|
331
333
|
- app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
|
|
332
334
|
- app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
|
|
333
335
|
- app/assets/stylesheets/govuk_publishing_components/components/_button.scss
|
|
@@ -413,6 +415,7 @@ files:
|
|
|
413
415
|
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss
|
|
414
416
|
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss
|
|
415
417
|
- app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss
|
|
418
|
+
- app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss
|
|
416
419
|
- app/assets/stylesheets/govuk_publishing_components/components/print/_contents-list.scss
|
|
417
420
|
- app/assets/stylesheets/govuk_publishing_components/components/print/_feedback.scss
|
|
418
421
|
- app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak-html-publication.scss
|
|
@@ -437,6 +440,7 @@ files:
|
|
|
437
440
|
- app/views/govuk_publishing_components/component_guide/preview.html.erb
|
|
438
441
|
- app/views/govuk_publishing_components/component_guide/show.html.erb
|
|
439
442
|
- app/views/govuk_publishing_components/components/_accessible_autocomplete.html.erb
|
|
443
|
+
- app/views/govuk_publishing_components/components/_accordion.html.erb
|
|
440
444
|
- app/views/govuk_publishing_components/components/_admin_analytics.html.erb
|
|
441
445
|
- app/views/govuk_publishing_components/components/_back_link.html.erb
|
|
442
446
|
- app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
|
|
@@ -499,6 +503,7 @@ files:
|
|
|
499
503
|
- app/views/govuk_publishing_components/components/_translation-nav.html.erb
|
|
500
504
|
- app/views/govuk_publishing_components/components/_warning_text.html.erb
|
|
501
505
|
- app/views/govuk_publishing_components/components/docs/accessible_autocomplete.yml
|
|
506
|
+
- app/views/govuk_publishing_components/components/docs/accordion.yml
|
|
502
507
|
- app/views/govuk_publishing_components/components/docs/admin_analytics.yml
|
|
503
508
|
- app/views/govuk_publishing_components/components/docs/back_link.yml
|
|
504
509
|
- app/views/govuk_publishing_components/components/docs/breadcrumbs.yml
|
|
@@ -583,6 +588,7 @@ files:
|
|
|
583
588
|
- lib/govuk_publishing_components/config.rb
|
|
584
589
|
- lib/govuk_publishing_components/engine.rb
|
|
585
590
|
- lib/govuk_publishing_components/minitest/component_guide_test.rb
|
|
591
|
+
- lib/govuk_publishing_components/presenters/accordion_helper.rb
|
|
586
592
|
- lib/govuk_publishing_components/presenters/breadcrumbs.rb
|
|
587
593
|
- lib/govuk_publishing_components/presenters/button_helper.rb
|
|
588
594
|
- lib/govuk_publishing_components/presenters/checkboxes_helper.rb
|