govuk_publishing_components 24.2.0 → 24.3.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/analytics/scroll-tracker.js +28 -0
- data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +52 -8
- data/app/assets/stylesheets/component_guide/application.scss +0 -8
- data/app/views/govuk_publishing_components/audit/show.html.erb +211 -199
- data/app/views/govuk_publishing_components/components/_accordion.html.erb +3 -3
- data/app/views/govuk_publishing_components/components/docs/accordion.yml +29 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 27bbb3cbb2bca8d09be089a66cbbfa710fea05a35e275d9dbd92237b78206f49
|
|
4
|
+
data.tar.gz: 582f39e64a1af7c58a13c01adb9bb8a25e0c2042da02ce81688ce9ad2a74282f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d357fa3acf40c80ff22f1f619f0f412904d60d3d8cbab2279e166a77a02a58be06a15801360e5d3748877ebd6353cebfc402914eba08931b28489256ee7b3048
|
|
7
|
+
data.tar.gz: 82c84f467d4903b1f916af25bc73fd151857db158b5fe84ae3f442d6a7ef5725ca97db85a558132f0ef968f4ef80e67145f94a5c96b2d8e9887f6c3982e35db4
|
|
@@ -405,6 +405,34 @@
|
|
|
405
405
|
],
|
|
406
406
|
'/eubusiness': [
|
|
407
407
|
['Heading', 'Additional help and support']
|
|
408
|
+
],
|
|
409
|
+
'/coronavirus': [
|
|
410
|
+
['Percent', 20],
|
|
411
|
+
['Percent', 40],
|
|
412
|
+
['Percent', 60],
|
|
413
|
+
['Percent', 80],
|
|
414
|
+
['Percent', 100]
|
|
415
|
+
],
|
|
416
|
+
'/coronavirus/education-and-childcare': [
|
|
417
|
+
['Percent', 20],
|
|
418
|
+
['Percent', 40],
|
|
419
|
+
['Percent', 60],
|
|
420
|
+
['Percent', 80],
|
|
421
|
+
['Percent', 100]
|
|
422
|
+
],
|
|
423
|
+
'/coronavirus/worker-support': [
|
|
424
|
+
['Percent', 20],
|
|
425
|
+
['Percent', 40],
|
|
426
|
+
['Percent', 60],
|
|
427
|
+
['Percent', 80],
|
|
428
|
+
['Percent', 100]
|
|
429
|
+
],
|
|
430
|
+
'/coronavirus/business-support': [
|
|
431
|
+
['Percent', 20],
|
|
432
|
+
['Percent', 40],
|
|
433
|
+
['Percent', 60],
|
|
434
|
+
['Percent', 80],
|
|
435
|
+
['Percent', 100]
|
|
408
436
|
]
|
|
409
437
|
}
|
|
410
438
|
|
|
@@ -11,8 +11,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
11
11
|
|
|
12
12
|
GemAccordion.prototype.start = function ($module) {
|
|
13
13
|
this.$module = $module[0]
|
|
14
|
+
this.sectionClass = 'gem-c-accordion__section'
|
|
14
15
|
this.moduleId = this.$module.getAttribute('id')
|
|
15
|
-
this.sections = this.$module.querySelectorAll('.
|
|
16
|
+
this.sections = this.$module.querySelectorAll('.' + this.sectionClass)
|
|
16
17
|
this.openAllButton = ''
|
|
17
18
|
this.browserSupportsSessionStorage = helper.checkForSessionStorage()
|
|
18
19
|
this.controlsClass = 'gem-c-accordion__controls'
|
|
@@ -36,6 +37,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
36
37
|
this.initControls()
|
|
37
38
|
this.initSectionHeaders()
|
|
38
39
|
|
|
40
|
+
// Feature flag for anchor tag navigation used on manuals
|
|
41
|
+
if (this.$module.getAttribute('data-anchor-navigation')) {
|
|
42
|
+
this.openByAnchorOnLoad()
|
|
43
|
+
this.addEventListenersForAnchors()
|
|
44
|
+
}
|
|
45
|
+
|
|
39
46
|
// See if "Show all sections" button text should be updated
|
|
40
47
|
var areAllSectionsOpen = this.checkIfAllSectionsOpen()
|
|
41
48
|
this.updateOpenAllButton(areAllSectionsOpen)
|
|
@@ -59,7 +66,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
59
66
|
accordionControls.appendChild(this.openAllButton)
|
|
60
67
|
this.$module.insertBefore(accordionControls, this.$module.firstChild)
|
|
61
68
|
|
|
62
|
-
// Build
|
|
69
|
+
// Build additional wrapper for open all toggle text, place icon after wrapped text.
|
|
63
70
|
var wrapperOpenAllText = document.createElement('span')
|
|
64
71
|
wrapperOpenAllText.classList.add(this.openAllTextClass)
|
|
65
72
|
this.openAllButton.insertBefore(wrapperOpenAllText, this.openAllButton.childNodes[0] || null)
|
|
@@ -74,6 +81,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
74
81
|
nodeListForEach(this.sections, function (section, i) {
|
|
75
82
|
// Set header attributes
|
|
76
83
|
var header = section.querySelector('.' + this.sectionHeaderClass)
|
|
84
|
+
|
|
77
85
|
this.initHeaderAttributes(header, i)
|
|
78
86
|
this.setExpanded(this.isExpanded(section), section)
|
|
79
87
|
|
|
@@ -106,12 +114,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
106
114
|
srPause.classList.add('govuk-visually-hidden')
|
|
107
115
|
srPause.innerHTML = ', '
|
|
108
116
|
|
|
109
|
-
// Build
|
|
110
|
-
var
|
|
111
|
-
|
|
112
|
-
|
|
117
|
+
// Build additional copy for assistive technology
|
|
118
|
+
var srAdditionalCopy = document.createElement('span')
|
|
119
|
+
srAdditionalCopy.classList.add('govuk-visually-hidden')
|
|
120
|
+
srAdditionalCopy.innerHTML = ' this section'
|
|
113
121
|
|
|
114
|
-
// Build
|
|
122
|
+
// Build additional wrapper for toggle text, place icon after wrapped text.
|
|
115
123
|
var wrapperShowHideIcon = document.createElement('span')
|
|
116
124
|
var icon = document.createElement('span')
|
|
117
125
|
icon.classList.add(this.upChevonIconClass)
|
|
@@ -138,7 +146,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
138
146
|
}
|
|
139
147
|
|
|
140
148
|
button.appendChild(showIcons)
|
|
141
|
-
button.appendChild(
|
|
149
|
+
button.appendChild(srAdditionalCopy)
|
|
142
150
|
}
|
|
143
151
|
|
|
144
152
|
// When section toggled, set and store state
|
|
@@ -283,5 +291,41 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
283
291
|
}
|
|
284
292
|
}
|
|
285
293
|
|
|
294
|
+
// Navigate to and open accordions with anchored content on page load if a hash is present
|
|
295
|
+
GemAccordion.prototype.openByAnchorOnLoad = function () {
|
|
296
|
+
if (window.location.hash && this.$module.querySelector(window.location.hash)) {
|
|
297
|
+
this.openForAnchor(window.location.hash)
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
// Add event listeners for links to open accordion sections when navigated to using said anchor links on the page
|
|
302
|
+
// Adding an event listener to all anchor link a tags in an accordion is risky but we circumvent this risk partially by only being a layer of accordion behaviour instead of any sort of change to link behaviour
|
|
303
|
+
GemAccordion.prototype.addEventListenersForAnchors = function () {
|
|
304
|
+
var links = this.$module.querySelectorAll('.' + this.sectionInnerContent + ' a[href*="#"]')
|
|
305
|
+
|
|
306
|
+
links.forEach(function (link) {
|
|
307
|
+
if (link.pathname === window.location.pathname) {
|
|
308
|
+
link.addEventListener('click', this.openForAnchor.bind(this, link.hash))
|
|
309
|
+
}
|
|
310
|
+
}.bind(this))
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
// Find the parent accordion section for the given id and open it
|
|
314
|
+
GemAccordion.prototype.openForAnchor = function (hash) {
|
|
315
|
+
var target = document.querySelector(hash)
|
|
316
|
+
var section = this.getContainingSection(target)
|
|
317
|
+
|
|
318
|
+
this.setExpanded(true, section)
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
// Loop through the given ids ancestors until the parent section class is found
|
|
322
|
+
GemAccordion.prototype.getContainingSection = function (target) {
|
|
323
|
+
while (!target.classList.contains(this.sectionClass)) {
|
|
324
|
+
target = target.parentElement
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
return target
|
|
328
|
+
}
|
|
329
|
+
|
|
286
330
|
Modules.GemAccordion = GemAccordion
|
|
287
331
|
})(window.GOVUK.Modules)
|
|
@@ -262,14 +262,6 @@ html {
|
|
|
262
262
|
}
|
|
263
263
|
}
|
|
264
264
|
|
|
265
|
-
// Hide survey banner
|
|
266
|
-
// stylelint-disable selector-max-id
|
|
267
|
-
#user-satisfaction-survey-container,
|
|
268
|
-
#global-cookie-message {
|
|
269
|
-
display: none;
|
|
270
|
-
}
|
|
271
|
-
// stylelint-enable selector-max-id
|
|
272
|
-
|
|
273
265
|
// Rouge syntax highlighting
|
|
274
266
|
// Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
|
|
275
267
|
|
|
@@ -39,98 +39,105 @@
|
|
|
39
39
|
</div>
|
|
40
40
|
</details>
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<h2 class="gem-c-accordion__section-heading">
|
|
47
|
-
<span class="gem-c-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
|
|
48
|
-
<%= application[:name] %>
|
|
49
|
-
</span>
|
|
50
|
-
</h2>
|
|
51
|
-
<div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-<%= index %>">
|
|
52
|
-
<% if application[:application_found] %>
|
|
53
|
-
Warnings:
|
|
54
|
-
<% if application[:warning_count] > 0 %>
|
|
55
|
-
<strong class="govuk-tag govuk-tag--red"><%= application[:warning_count] %></strong>
|
|
56
|
-
<% else %>
|
|
57
|
-
<%= application[:warning_count] %>
|
|
58
|
-
<% end %>
|
|
59
|
-
<% else %>
|
|
60
|
-
<strong class="govuk-tag govuk-tag--red">Application not found</strong>
|
|
61
|
-
<% end %>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
<div id="accordion-with-summary-sections-content-<%= index %>" class="gem-c-accordion__section-content" aria-labelledby="accordion-with-summary-sections-heading-<%= index %>">
|
|
65
|
-
<% if application[:application_found] %>
|
|
66
|
-
<% application[:warnings].each do |warning| %>
|
|
67
|
-
<p class="govuk-body">
|
|
68
|
-
<strong class="govuk-tag">Warn</strong>
|
|
69
|
-
<strong><%= warning[:component] %></strong> - <%= warning[:message] %>
|
|
70
|
-
</p>
|
|
71
|
-
<% end %>
|
|
42
|
+
<% #application_items = [] %>
|
|
43
|
+
<% application_items = @applications.map do |application| %>
|
|
44
|
+
<%
|
|
45
|
+
summary = '<strong class="govuk-tag govuk-tag--red">Application not found</strong>'
|
|
72
46
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
47
|
+
if application[:application_found]
|
|
48
|
+
summary = "Warnings: 0"
|
|
49
|
+
if application[:warning_count] > 0
|
|
50
|
+
summary = "Warnings: <strong class=\"govuk-tag govuk-tag--red\">#{application[:warning_count]}</strong>"
|
|
51
|
+
end
|
|
52
|
+
end
|
|
53
|
+
%>
|
|
79
54
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<%= item[:value] %>
|
|
89
|
-
<% else %>
|
|
90
|
-
None
|
|
91
|
-
<% end %>
|
|
92
|
-
</dd>
|
|
93
|
-
</div>
|
|
94
|
-
<% end %>
|
|
95
|
-
</dl>
|
|
55
|
+
<% accordion_content = capture do %>
|
|
56
|
+
<% if application[:application_found] %>
|
|
57
|
+
<% application[:warnings].each do |warning| %>
|
|
58
|
+
<p class="govuk-body">
|
|
59
|
+
<strong class="govuk-tag">Warn</strong>
|
|
60
|
+
<strong><%= warning[:component] %></strong> - <%= warning[:message] %>
|
|
61
|
+
</p>
|
|
62
|
+
<% end %>
|
|
96
63
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
} %>
|
|
64
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
65
|
+
text: "Components used",
|
|
66
|
+
font_size: "m",
|
|
67
|
+
margin_bottom: 4,
|
|
68
|
+
heading_level: 3,
|
|
69
|
+
} %>
|
|
104
70
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
71
|
+
<dl class="govuk-summary-list">
|
|
72
|
+
<% application[:summary].each do |item| %>
|
|
73
|
+
<div class="govuk-summary-list__row">
|
|
74
|
+
<dt class="govuk-summary-list__key">
|
|
75
|
+
<%= item[:name] %>
|
|
76
|
+
</dt>
|
|
77
|
+
<dd class="govuk-summary-list__value">
|
|
78
|
+
<% if item[:value].length > 0 %>
|
|
79
|
+
<%= item[:value] %>
|
|
80
|
+
<% else %>
|
|
81
|
+
None
|
|
109
82
|
<% end %>
|
|
110
|
-
</
|
|
83
|
+
</dd>
|
|
84
|
+
</div>
|
|
85
|
+
<% end %>
|
|
86
|
+
</dl>
|
|
87
|
+
|
|
88
|
+
<% if application[:gem_style_references].any? %>
|
|
89
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
90
|
+
text: "Component references",
|
|
91
|
+
font_size: "m",
|
|
92
|
+
margin_bottom: 4,
|
|
93
|
+
heading_level: 3,
|
|
94
|
+
} %>
|
|
95
|
+
|
|
96
|
+
<p class="govuk-body">This shows instances of `gem-c-` classes found in the application. If a reference is found in a stylesheet or in code a warning is created, as this could be a style override or hard coded component markup.</p>
|
|
97
|
+
<ul class="govuk-list govuk-list--bullet">
|
|
98
|
+
<% application[:gem_style_references].each do |ref| %>
|
|
99
|
+
<li><%= ref %></li>
|
|
111
100
|
<% end %>
|
|
101
|
+
</ul>
|
|
102
|
+
<% end %>
|
|
112
103
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
<% end %>
|
|
125
|
-
</ul>
|
|
104
|
+
<% if application[:jquery_references].any? %>
|
|
105
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
106
|
+
text: "jQuery references",
|
|
107
|
+
font_size: "m",
|
|
108
|
+
margin_bottom: 4,
|
|
109
|
+
heading_level: 3,
|
|
110
|
+
} %>
|
|
111
|
+
<p class="govuk-body">This shows JavaScript files that might contain jQuery, which we are trying to remove our dependency on.</p>
|
|
112
|
+
<ul class="govuk-list govuk-list--bullet">
|
|
113
|
+
<% application[:jquery_references].each do |ref| %>
|
|
114
|
+
<li><%= ref %></li>
|
|
126
115
|
<% end %>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
116
|
+
</ul>
|
|
117
|
+
<% end %>
|
|
118
|
+
<% else %>
|
|
119
|
+
<p class="govuk-body">This application was not found. This could be because you do not have this repository checked out locally.</p>
|
|
120
|
+
<% end %>
|
|
132
121
|
<% end %>
|
|
133
|
-
|
|
122
|
+
|
|
123
|
+
<%
|
|
124
|
+
{
|
|
125
|
+
heading: {
|
|
126
|
+
text: application[:name]
|
|
127
|
+
},
|
|
128
|
+
summary: {
|
|
129
|
+
text: sanitize(summary)
|
|
130
|
+
},
|
|
131
|
+
content: {
|
|
132
|
+
html: sanitize(accordion_content)
|
|
133
|
+
},
|
|
134
|
+
}
|
|
135
|
+
%>
|
|
136
|
+
<% end %>
|
|
137
|
+
|
|
138
|
+
<%= render "govuk_publishing_components/components/accordion", {
|
|
139
|
+
items: application_items
|
|
140
|
+
} %>
|
|
134
141
|
<% else %>
|
|
135
142
|
<p class="govuk-body">No applications found.</p>
|
|
136
143
|
<% end %>
|
|
@@ -144,125 +151,130 @@
|
|
|
144
151
|
} %>
|
|
145
152
|
|
|
146
153
|
<% if @components.any? %>
|
|
147
|
-
|
|
148
|
-
<
|
|
149
|
-
<
|
|
150
|
-
<
|
|
151
|
-
<
|
|
152
|
-
|
|
153
|
-
</
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
</
|
|
158
|
-
</
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
<
|
|
162
|
-
<
|
|
163
|
-
<
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
</
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
<
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
<
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
<% end %>
|
|
196
|
-
</td>
|
|
197
|
-
<td class="govuk-table__cell">
|
|
198
|
-
<% if component[:js_tests] %>
|
|
199
|
-
<strong class="govuk-tag govuk-tag--green">Yes</strong>
|
|
200
|
-
<% end %>
|
|
201
|
-
</td>
|
|
202
|
-
</tr>
|
|
203
|
-
<% end %>
|
|
204
|
-
</tbody>
|
|
205
|
-
</table>
|
|
206
|
-
</div>
|
|
207
|
-
</div>
|
|
154
|
+
<% component_files = capture do %>
|
|
155
|
+
<table class="govuk-table">
|
|
156
|
+
<thead class="govuk-table__head">
|
|
157
|
+
<tr class="govuk-table__row">
|
|
158
|
+
<th scope="col" class="govuk-table__header sticky-table-header">Component</th>
|
|
159
|
+
<th scope="col" class="govuk-table__header sticky-table-header">Stylesheet</th>
|
|
160
|
+
<th scope="col" class="govuk-table__header sticky-table-header">Print stylesheet</th>
|
|
161
|
+
<th scope="col" class="govuk-table__header sticky-table-header">JS</th>
|
|
162
|
+
<th scope="col" class="govuk-table__header sticky-table-header">Test</th>
|
|
163
|
+
<th scope="col" class="govuk-table__header sticky-table-header">JS test</th>
|
|
164
|
+
</tr>
|
|
165
|
+
</thead>
|
|
166
|
+
<tbody class="govuk-table__body">
|
|
167
|
+
<% @components[:component_listing].each do |component| %>
|
|
168
|
+
<tr class="govuk-table__row">
|
|
169
|
+
<th scope="row" class="govuk-table__header">
|
|
170
|
+
<a href="<%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
|
|
171
|
+
</th>
|
|
172
|
+
<td class="govuk-table__cell">
|
|
173
|
+
<% if component[:stylesheet] %>
|
|
174
|
+
<strong class="govuk-tag govuk-tag--green">Yes</strong>
|
|
175
|
+
<% end %>
|
|
176
|
+
</td>
|
|
177
|
+
<td class="govuk-table__cell">
|
|
178
|
+
<% if component[:print_stylesheet] %>
|
|
179
|
+
<strong class="govuk-tag govuk-tag--green">Yes</strong>
|
|
180
|
+
<% end %>
|
|
181
|
+
</td>
|
|
182
|
+
<td class="govuk-table__cell">
|
|
183
|
+
<% if component[:javascript] %>
|
|
184
|
+
<strong class="govuk-tag govuk-tag--green">Yes</strong>
|
|
185
|
+
<% end %>
|
|
186
|
+
</td>
|
|
187
|
+
<td class="govuk-table__cell">
|
|
188
|
+
<% if component[:tests] %>
|
|
189
|
+
<strong class="govuk-tag govuk-tag--green">Yes</strong>
|
|
190
|
+
<% end %>
|
|
191
|
+
</td>
|
|
192
|
+
<td class="govuk-table__cell">
|
|
193
|
+
<% if component[:js_tests] %>
|
|
194
|
+
<strong class="govuk-tag govuk-tag--green">Yes</strong>
|
|
195
|
+
<% end %>
|
|
196
|
+
</td>
|
|
197
|
+
</tr>
|
|
198
|
+
<% end %>
|
|
199
|
+
</tbody>
|
|
200
|
+
</table>
|
|
201
|
+
<% end %>
|
|
208
202
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
</div>
|
|
220
|
-
<div id="accordion-default-content-2" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-2">
|
|
221
|
-
<dl class="govuk-summary-list">
|
|
222
|
-
<% @components[:components_containing_components].each do |component| %>
|
|
223
|
-
<div class="govuk-summary-list__row">
|
|
224
|
-
<dt class="govuk-summary-list__key">
|
|
225
|
-
<a href="<%= component[:link] %>" class="govuk-link"><%= component[:component] %></a>
|
|
226
|
-
</dt>
|
|
227
|
-
<dd class="govuk-summary-list__value">
|
|
228
|
-
<%= component[:sub_components].join(', ') %>
|
|
229
|
-
</dd>
|
|
230
|
-
</div>
|
|
231
|
-
<% end %>
|
|
232
|
-
</dl>
|
|
233
|
-
</div>
|
|
234
|
-
</div>
|
|
235
|
-
<div class="gem-c-accordion__section ">
|
|
236
|
-
<div class="gem-c-accordion__section-header">
|
|
237
|
-
<h2 class="gem-c-accordion__section-heading">
|
|
238
|
-
<span class="gem-c-accordion__section-button" id="accordion-default-heading-2">
|
|
239
|
-
Components by application
|
|
240
|
-
</span>
|
|
241
|
-
</h2>
|
|
242
|
-
<div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
|
|
243
|
-
Shows which applications use each component
|
|
203
|
+
<% components_within_components = capture do %>
|
|
204
|
+
<dl class="govuk-summary-list">
|
|
205
|
+
<% @components[:components_containing_components].each do |component| %>
|
|
206
|
+
<div class="govuk-summary-list__row">
|
|
207
|
+
<dt class="govuk-summary-list__key">
|
|
208
|
+
<a href="<%= component[:link] %>" class="govuk-link"><%= component[:component] %></a>
|
|
209
|
+
</dt>
|
|
210
|
+
<dd class="govuk-summary-list__value">
|
|
211
|
+
<%= component[:sub_components].join(', ') %>
|
|
212
|
+
</dd>
|
|
244
213
|
</div>
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
<p class="govuk-body">Sorry, no applications found.</p>
|
|
214
|
+
<% end %>
|
|
215
|
+
</dl>
|
|
216
|
+
<% end %>
|
|
217
|
+
|
|
218
|
+
<% components_by_application = capture do %>
|
|
219
|
+
<% if @components[:components_by_application].any? %>
|
|
220
|
+
<dl class="govuk-summary-list">
|
|
221
|
+
<% @components[:components_by_application].each do |component| %>
|
|
222
|
+
<div class="govuk-summary-list__row">
|
|
223
|
+
<dt class="govuk-summary-list__key">
|
|
224
|
+
<%= component[:component] %> (<%= component[:count] %>)
|
|
225
|
+
</dt>
|
|
226
|
+
<dd class="govuk-summary-list__value">
|
|
227
|
+
<%= component[:list] %>
|
|
228
|
+
</dd>
|
|
229
|
+
</div>
|
|
262
230
|
<% end %>
|
|
263
|
-
</
|
|
264
|
-
|
|
265
|
-
|
|
231
|
+
</dl>
|
|
232
|
+
<% else %>
|
|
233
|
+
<p class="govuk-body">Sorry, no applications found.</p>
|
|
234
|
+
<% end %>
|
|
235
|
+
<% end %>
|
|
236
|
+
|
|
237
|
+
<%
|
|
238
|
+
component_items = [
|
|
239
|
+
{
|
|
240
|
+
heading: {
|
|
241
|
+
text: "Component files",
|
|
242
|
+
},
|
|
243
|
+
summary: {
|
|
244
|
+
text: "Lists what files each component has",
|
|
245
|
+
},
|
|
246
|
+
content: {
|
|
247
|
+
html: component_files
|
|
248
|
+
},
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
heading: {
|
|
252
|
+
text: "Components containing other components",
|
|
253
|
+
},
|
|
254
|
+
summary: {
|
|
255
|
+
text: "Shows which components contain other components",
|
|
256
|
+
},
|
|
257
|
+
content: {
|
|
258
|
+
html: components_within_components
|
|
259
|
+
},
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
heading: {
|
|
263
|
+
text: "Components by application",
|
|
264
|
+
},
|
|
265
|
+
summary: {
|
|
266
|
+
text: "Shows which applications use each component",
|
|
267
|
+
},
|
|
268
|
+
content: {
|
|
269
|
+
html: components_by_application
|
|
270
|
+
},
|
|
271
|
+
},
|
|
272
|
+
]
|
|
273
|
+
%>
|
|
274
|
+
|
|
275
|
+
<%= render "govuk_publishing_components/components/accordion", {
|
|
276
|
+
items: component_items
|
|
277
|
+
} %>
|
|
266
278
|
<% else %>
|
|
267
279
|
<p class="govuk-body">No components found.</p>
|
|
268
280
|
<% end %>
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
id ||= "default-id-#{SecureRandom.hex(4)}"
|
|
6
6
|
items ||= []
|
|
7
7
|
condensed ||= false
|
|
8
|
+
anchor_navigation ||= false
|
|
8
9
|
|
|
9
10
|
accordion_classes = %w(gem-c-accordion)
|
|
10
11
|
accordion_classes << 'gem-c-accordion--condensed' if condensed
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
|
|
13
14
|
data_attributes ||= {}
|
|
14
15
|
data_attributes[:module] = 'gem-accordion'
|
|
16
|
+
data_attributes[:anchor_navigation] = anchor_navigation
|
|
15
17
|
%>
|
|
16
18
|
<% if items.any? %>
|
|
17
19
|
<%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
|
|
@@ -19,8 +21,6 @@
|
|
|
19
21
|
<%
|
|
20
22
|
index = i + 1
|
|
21
23
|
|
|
22
|
-
item[:data_attributes] ||= nil
|
|
23
|
-
|
|
24
24
|
section_classes = %w(gem-c-accordion__section)
|
|
25
25
|
section_classes << 'gem-c-accordion__section--expanded' if item[:expanded]
|
|
26
26
|
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
|
|
30
30
|
<%= tag.section(class: section_classes) do %>
|
|
31
31
|
<div class="gem-c-accordion__section-header">
|
|
32
|
-
<%= content_tag(shared_helper.get_heading_level, class: 'gem-c-accordion__section-heading') do %>
|
|
32
|
+
<%= content_tag(shared_helper.get_heading_level, class: 'gem-c-accordion__section-heading', id: item[:heading][:id]) do %>
|
|
33
33
|
<%= tag.span(item[:heading][:text], id: "#{id}-heading-#{index}", data: item[:data_attributes], class: 'gem-c-accordion__section-button') %>
|
|
34
34
|
<% end %>
|
|
35
35
|
<%= tag.div(item[:summary][:text], id: "#{id}-summary-#{index}", class: summary_classes) if item[:summary].present? %>
|
|
@@ -274,6 +274,35 @@ examples:
|
|
|
274
274
|
text: "How people read"
|
|
275
275
|
content:
|
|
276
276
|
html: "<p class='govuk-body'>This is the content for How people read.</p>"
|
|
277
|
+
with_the_anchor_link_navigation:
|
|
278
|
+
description: |
|
|
279
|
+
Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
|
|
280
|
+
|
|
281
|
+
This feature automatically opens accordions when an anchor link is clicked within another accordion that links to either the id of an accordion section heading or an id within the content of an accordion. This will also automatically navigate to and open accordions on page load using the same rules.
|
|
282
|
+
|
|
283
|
+
This feature won't be used if the `anchor_navigation` flag isn't passed as true to mitigate performance risk from event listeners on a large number of links.
|
|
284
|
+
|
|
285
|
+
Unlike with the accordion-wide custom id attribute, any ids passed to accordion headings as part of this feature aren't stored in `localStorage` so don't need to be unique across your domain, but **should still be unique in the context of the page**.
|
|
286
|
+
data:
|
|
287
|
+
anchor_navigation: true
|
|
288
|
+
items:
|
|
289
|
+
- heading:
|
|
290
|
+
text: "Writing well for the web"
|
|
291
|
+
id: "writing-well-for-the-web"
|
|
292
|
+
content:
|
|
293
|
+
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
|
|
294
|
+
- heading:
|
|
295
|
+
text: "Writing well for specialists"
|
|
296
|
+
content:
|
|
297
|
+
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
|
|
298
|
+
- heading:
|
|
299
|
+
text: "Know your audience"
|
|
300
|
+
content:
|
|
301
|
+
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
|
|
302
|
+
- heading:
|
|
303
|
+
text: "How people read"
|
|
304
|
+
content:
|
|
305
|
+
html: "<p class='govuk-body'>This is the content for How people read.</p>"
|
|
277
306
|
condensed_layout:
|
|
278
307
|
description: |
|
|
279
308
|
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.
|
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: 24.
|
|
4
|
+
version: 24.3.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: 2021-02-
|
|
11
|
+
date: 2021-02-18 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|