govuk_frontend_toolkit 4.17.0 → 4.18.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/CHANGELOG.md +4 -0
- data/app/assets/README.md +1 -0
- data/app/assets/VERSION.txt +1 -1
- data/app/assets/docs/javascript.md +38 -0
- data/app/assets/javascripts/govuk/show-hide-content.js +171 -0
- data/app/assets/spec/manifest.js +5 -3
- data/app/assets/spec/support/LocalTestRunner.html +4 -4
- data/app/assets/spec/unit/show-hide-content.spec.js +245 -0
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1d26d1ef89d6ab3d92647088449fddf4cf9a2093
|
|
4
|
+
data.tar.gz: 30f1b2893d74986e0ecb3ec56ce9f33539a58a62
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fe26e2f049d3b8bf9e205cdfb1e7b9629d587c5a1cc3cb455ff8b1c91c47a3113c4b06a1422e267fb04989eee5cc93d83905b00eda9f5ba0ea3279eb0e6ed2c0
|
|
7
|
+
data.tar.gz: 3e8616187fce2571b99ed181412bf9743c0bf60c9402232970b6c3bc2b9db2d1736821692bc6da0aa1aec142c3d8d9ae93fc6138f2dbdc7d0b2d114d4dff98ec
|
data/app/assets/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
# 4.18.0
|
|
2
|
+
|
|
3
|
+
- Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR #315](https://github.com/alphagov/govuk_frontend_toolkit/pull/315)).
|
|
4
|
+
|
|
1
5
|
# 4.17.0
|
|
2
6
|
|
|
3
7
|
- SelectionButtons will add a class to the label with the type of the child input ([PR #317](https://github.com/alphagov/govuk_frontend_toolkit/pull/317))
|
data/app/assets/README.md
CHANGED
|
@@ -142,6 +142,7 @@ In production:
|
|
|
142
142
|
* [Stick at top when scrolling](/docs/javascript.md#stick-at-top-when-scrolling)
|
|
143
143
|
* [Selection buttons](/docs/javascript.md#selection-buttons)
|
|
144
144
|
* [Shim links with button role](/docs/javascript.md#shim-links-with-button-role)
|
|
145
|
+
* [Show/Hide content](/docs/javascript.md#showhide-content)
|
|
145
146
|
* [Analytics](/docs/analytics.md)
|
|
146
147
|
* [Create an analytics tracker](/docs/analytics.md#create-an-analytics-tracker)
|
|
147
148
|
* [Virtual pageviews](/docs/analytics.md#virtual-pageviews)
|
data/app/assets/VERSION.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
4.
|
|
1
|
+
4.18.0
|
|
@@ -431,3 +431,41 @@ GOVUK.shimLinksWithButtonRole.init({
|
|
|
431
431
|
keycodes: [32, 114]
|
|
432
432
|
});
|
|
433
433
|
```
|
|
434
|
+
|
|
435
|
+
## Show/Hide content
|
|
436
|
+
|
|
437
|
+
Script to support show/hide content, toggled by radio buttons and checkboxes. This allows for progressive disclosure of question and answer forms based on selected values:
|
|
438
|
+
|
|
439
|
+
<label class="block-label" data-target="show-me">
|
|
440
|
+
<input type="radio" name="enabled" value="yes" /> Yes
|
|
441
|
+
</label>
|
|
442
|
+
|
|
443
|
+
<label class="block-label">
|
|
444
|
+
<input type="radio" name="enabled" value="no" /> No
|
|
445
|
+
</label>
|
|
446
|
+
|
|
447
|
+
<div id="show-me" class="panel js-hidden">
|
|
448
|
+
<p>Show/Hide content to be toggled</p>
|
|
449
|
+
</div>
|
|
450
|
+
|
|
451
|
+
When the input's `checked` attribute is set, the show/hide content's `.js-hidden` class is removed and ARIA attributes are added to enable it. Note the sample `show-me` id attribute used to link the label to show/hide content.
|
|
452
|
+
|
|
453
|
+
### Usage
|
|
454
|
+
|
|
455
|
+
#### GOVUK.ShowHideContent
|
|
456
|
+
|
|
457
|
+
To apply this behaviour to elements with the above HTML pattern, call the `GOVUK.ShowHideContent` constructor:
|
|
458
|
+
|
|
459
|
+
```
|
|
460
|
+
var showHideContent = new GOVUK.ShowHideContent();
|
|
461
|
+
showHideContent.init();
|
|
462
|
+
```
|
|
463
|
+
|
|
464
|
+
This will bind two event handlers to $(document.body), one for radio inputs and one for checkboxes. By listening for events bubbling up to the `body` tag, additional show/hide content added to the page will still be picked up after `.init()` is called.
|
|
465
|
+
|
|
466
|
+
Alternatively, pass in your own selector. In the example below, event handlers are bound to the form instead.
|
|
467
|
+
|
|
468
|
+
```
|
|
469
|
+
var showHideContent = new GOVUK.ShowHideContent();
|
|
470
|
+
showHideContent.init($('form.example'));
|
|
471
|
+
```
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
;(function (global) {
|
|
2
|
+
'use strict'
|
|
3
|
+
|
|
4
|
+
var $ = global.jQuery
|
|
5
|
+
var GOVUK = global.GOVUK || {}
|
|
6
|
+
|
|
7
|
+
function ShowHideContent () {
|
|
8
|
+
var self = this
|
|
9
|
+
|
|
10
|
+
// Radio and Checkbox selectors
|
|
11
|
+
var selectors = {
|
|
12
|
+
namespace: 'ShowHideContent',
|
|
13
|
+
radio: '.block-label[data-target] input[type="radio"]',
|
|
14
|
+
checkbox: '.block-label[data-target] input[type="checkbox"]'
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Escape name attribute for use in DOM selector
|
|
18
|
+
function escapeElementName (str) {
|
|
19
|
+
var result = str.replace('[', '\\[').replace(']', '\\]')
|
|
20
|
+
return result
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Adds ARIA attributes to control + associated content
|
|
24
|
+
function initToggledContent () {
|
|
25
|
+
var $control = $(this)
|
|
26
|
+
var $content = getToggledContent($control)
|
|
27
|
+
|
|
28
|
+
// Set aria-controls and defaults
|
|
29
|
+
if ($content.length) {
|
|
30
|
+
$control.attr('aria-controls', $content.attr('id'))
|
|
31
|
+
$control.attr('aria-expanded', 'false')
|
|
32
|
+
$content.attr('aria-hidden', 'true')
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Return toggled content for control
|
|
37
|
+
function getToggledContent ($control) {
|
|
38
|
+
var id = $control.attr('aria-controls')
|
|
39
|
+
|
|
40
|
+
// ARIA attributes aren't set before init
|
|
41
|
+
if (!id) {
|
|
42
|
+
id = $control.closest('label').data('target')
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Find show/hide content by id
|
|
46
|
+
return $('#' + id)
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Show toggled content for control
|
|
50
|
+
function showToggledContent ($control, $content) {
|
|
51
|
+
// Show content
|
|
52
|
+
if ($content.hasClass('js-hidden')) {
|
|
53
|
+
$content.removeClass('js-hidden')
|
|
54
|
+
$content.attr('aria-hidden', 'false')
|
|
55
|
+
|
|
56
|
+
// If the controlling input, update aria-expanded
|
|
57
|
+
if ($control.attr('aria-controls')) {
|
|
58
|
+
$control.attr('aria-expanded', 'true')
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Hide toggled content for control
|
|
64
|
+
function hideToggledContent ($control, $content) {
|
|
65
|
+
$content = $content || getToggledContent($control)
|
|
66
|
+
|
|
67
|
+
// Hide content
|
|
68
|
+
if (!$content.hasClass('js-hidden')) {
|
|
69
|
+
$content.addClass('js-hidden')
|
|
70
|
+
$content.attr('aria-hidden', 'true')
|
|
71
|
+
|
|
72
|
+
// If the controlling input, update aria-expanded
|
|
73
|
+
if ($control.attr('aria-controls')) {
|
|
74
|
+
$control.attr('aria-expanded', 'false')
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Handle radio show/hide
|
|
80
|
+
function handleRadioContent ($control, $content) {
|
|
81
|
+
// All radios in this group which control content
|
|
82
|
+
var selector = selectors.radio + '[name=' + escapeElementName($control.attr('name')) + '][aria-controls]'
|
|
83
|
+
var $radios = $control.closest('form').find(selector)
|
|
84
|
+
|
|
85
|
+
// Hide content for radios in group
|
|
86
|
+
$radios.each(function () {
|
|
87
|
+
hideToggledContent($(this))
|
|
88
|
+
})
|
|
89
|
+
|
|
90
|
+
// Select content for this control
|
|
91
|
+
if ($control.is('[aria-controls]')) {
|
|
92
|
+
showToggledContent($control, $content)
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Handle checkbox show/hide
|
|
97
|
+
function handleCheckboxContent ($control, $content) {
|
|
98
|
+
// Show checkbox content
|
|
99
|
+
if ($control.is(':checked')) {
|
|
100
|
+
showToggledContent($control, $content)
|
|
101
|
+
} else { // Hide checkbox content
|
|
102
|
+
hideToggledContent($control, $content)
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Set up event handlers etc
|
|
107
|
+
function init ($container, elementSelector, eventSelectors, handler) {
|
|
108
|
+
$container = $container || $(document.body)
|
|
109
|
+
|
|
110
|
+
// Handle control clicks
|
|
111
|
+
function deferred () {
|
|
112
|
+
var $control = $(this)
|
|
113
|
+
handler($control, getToggledContent($control))
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Prepare ARIA attributes
|
|
117
|
+
var $controls = $(elementSelector)
|
|
118
|
+
$controls.each(initToggledContent)
|
|
119
|
+
|
|
120
|
+
// Handle events
|
|
121
|
+
$.each(eventSelectors, function (idx, eventSelector) {
|
|
122
|
+
$container.on('click.' + selectors.namespace, eventSelector, deferred)
|
|
123
|
+
})
|
|
124
|
+
|
|
125
|
+
// Any already :checked on init?
|
|
126
|
+
if ($controls.is(':checked')) {
|
|
127
|
+
$controls.filter(':checked').each(deferred)
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// Get event selectors for all radio groups
|
|
132
|
+
function getEventSelectorsForRadioGroups () {
|
|
133
|
+
var radioGroups = []
|
|
134
|
+
|
|
135
|
+
// Build an array of radio group selectors
|
|
136
|
+
return $(selectors.radio).map(function () {
|
|
137
|
+
var groupName = $(this).attr('name')
|
|
138
|
+
|
|
139
|
+
if ($.inArray(groupName, radioGroups) === -1) {
|
|
140
|
+
radioGroups.push(groupName)
|
|
141
|
+
return 'input[type="radio"][name="' + $(this).attr('name') + '"]'
|
|
142
|
+
}
|
|
143
|
+
return null
|
|
144
|
+
})
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// Set up radio show/hide content for container
|
|
148
|
+
self.showHideRadioToggledContent = function ($container) {
|
|
149
|
+
init($container, selectors.radio, getEventSelectorsForRadioGroups(), handleRadioContent)
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// Set up checkbox show/hide content for container
|
|
153
|
+
self.showHideCheckboxToggledContent = function ($container) {
|
|
154
|
+
init($container, selectors.checkbox, [selectors.checkbox], handleCheckboxContent)
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// Remove event handlers
|
|
158
|
+
self.destroy = function ($container) {
|
|
159
|
+
$container = $container || $(document.body)
|
|
160
|
+
$container.off('.' + selectors.namespace)
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
ShowHideContent.prototype.init = function ($container) {
|
|
165
|
+
this.showHideRadioToggledContent($container)
|
|
166
|
+
this.showHideCheckboxToggledContent($container)
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
GOVUK.ShowHideContent = ShowHideContent
|
|
170
|
+
global.GOVUK = GOVUK
|
|
171
|
+
})(window)
|
data/app/assets/spec/manifest.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
// Paths are relative to the /spec/support folder
|
|
2
2
|
var manifest = {
|
|
3
|
-
support
|
|
3
|
+
support: [
|
|
4
4
|
'../../node_modules/jquery/dist/jquery.js',
|
|
5
5
|
'../../javascripts/govuk/modules.js',
|
|
6
6
|
'../../javascripts/govuk/modules/auto-track-event.js',
|
|
7
7
|
'../../javascripts/govuk/multivariate-test.js',
|
|
8
8
|
'../../javascripts/govuk/primary-links.js',
|
|
9
9
|
'../../javascripts/govuk/shim-links-with-button-role.js',
|
|
10
|
+
'../../javascripts/govuk/show-hide-content.js',
|
|
10
11
|
'../../javascripts/govuk/stick-at-top-when-scrolling.js',
|
|
11
12
|
'../../javascripts/govuk/stop-scrolling-at-footer.js',
|
|
12
13
|
'../../javascripts/govuk/selection-buttons.js',
|
|
@@ -17,12 +18,13 @@ var manifest = {
|
|
|
17
18
|
'../../javascripts/govuk/analytics/download-link-tracker.js',
|
|
18
19
|
'../../javascripts/govuk/analytics/mailto-link-tracker.js'
|
|
19
20
|
],
|
|
20
|
-
test
|
|
21
|
+
test: [
|
|
21
22
|
'../unit/modules.spec.js',
|
|
22
23
|
'../unit/Modules/auto-track-event.spec.js',
|
|
23
24
|
'../unit/multivariate-test.spec.js',
|
|
24
25
|
'../unit/primary-links.spec.js',
|
|
25
26
|
'../unit/shim-links-with-button-role.spec.js',
|
|
27
|
+
'../unit/show-hide-content.spec.js',
|
|
26
28
|
'../unit/stick-at-top-when-scrolling.spec.js',
|
|
27
29
|
'../unit/selection-button.spec.js',
|
|
28
30
|
'../unit/analytics/google-analytics-universal-tracker.spec.js',
|
|
@@ -32,4 +34,4 @@ var manifest = {
|
|
|
32
34
|
'../unit/analytics/download-link-tracker.spec.js',
|
|
33
35
|
'../unit/analytics/mailto-link-tracker.spec.js'
|
|
34
36
|
]
|
|
35
|
-
}
|
|
37
|
+
}
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Jasmine Test Runner</title>
|
|
5
5
|
|
|
6
|
-
<link rel="stylesheet" type="text/css" href="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="../../node_modules/grunt-contrib-jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
|
|
7
7
|
<style>
|
|
8
8
|
#wrapper { display: none; }
|
|
9
9
|
</style>
|
|
10
10
|
|
|
11
11
|
<!-- JASMINE FILES -->
|
|
12
|
-
<script type="text/javascript" src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
|
|
13
|
-
<script type="text/javascript" src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
|
|
12
|
+
<script type="text/javascript" src="../../node_modules/grunt-contrib-jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
|
|
13
|
+
<script type="text/javascript" src="../../node_modules/grunt-contrib-jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
|
|
14
14
|
|
|
15
|
-
<script type="text/javascript" src="../../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
|
|
15
|
+
<script type="text/javascript" src="../../node_modules/grunt-contrib-jasmine/node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
|
|
16
16
|
<script type="text/javascript" src="./load.js"></script>
|
|
17
17
|
</head>
|
|
18
18
|
<body>
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
describe('show-hide-content', function () {
|
|
2
|
+
'use strict'
|
|
3
|
+
|
|
4
|
+
beforeEach(function () {
|
|
5
|
+
|
|
6
|
+
// Sample markup
|
|
7
|
+
this.$content = $(
|
|
8
|
+
|
|
9
|
+
// Radio buttons (yes/no)
|
|
10
|
+
'<form>' +
|
|
11
|
+
'<label class="block-label" data-target="show-hide-radios">' +
|
|
12
|
+
'<input type="radio" name="single" value="no">' +
|
|
13
|
+
'Yes' +
|
|
14
|
+
'</label>' +
|
|
15
|
+
'<label class="block-label">' +
|
|
16
|
+
'<input type="radio" name="single" value="yes">' +
|
|
17
|
+
'No' +
|
|
18
|
+
'</label>' +
|
|
19
|
+
'<div id="show-hide-radios" class="panel js-hidden" />' +
|
|
20
|
+
'</form>' +
|
|
21
|
+
|
|
22
|
+
// Checkboxes (multiple values)
|
|
23
|
+
'<form>' +
|
|
24
|
+
'<label class="block-label" data-target="show-hide-checkboxes">' +
|
|
25
|
+
'<input type="checkbox" name="multiple[option1]">' +
|
|
26
|
+
'Option 1' +
|
|
27
|
+
'</label>' +
|
|
28
|
+
'<label class="block-label">' +
|
|
29
|
+
'<input type="checkbox" name="multiple[option2]">' +
|
|
30
|
+
'Option 2' +
|
|
31
|
+
'</label>' +
|
|
32
|
+
'<label class="block-label">' +
|
|
33
|
+
'<input type="checkbox" name="multiple[option3]">' +
|
|
34
|
+
'Option 3' +
|
|
35
|
+
'</label>' +
|
|
36
|
+
'<div id="show-hide-checkboxes" class="panel js-hidden" />' +
|
|
37
|
+
'</form>'
|
|
38
|
+
)
|
|
39
|
+
|
|
40
|
+
// Find radios/checkboxes
|
|
41
|
+
var $radios = this.$content.find('input[type=radio]')
|
|
42
|
+
var $checkboxes = this.$content.find('input[type=checkbox]')
|
|
43
|
+
|
|
44
|
+
// Two radios
|
|
45
|
+
this.$radio1 = $radios.eq(0)
|
|
46
|
+
this.$radio2 = $radios.eq(1)
|
|
47
|
+
|
|
48
|
+
// Three checkboxes
|
|
49
|
+
this.$checkbox1 = $checkboxes.eq(0)
|
|
50
|
+
this.$checkbox2 = $checkboxes.eq(1)
|
|
51
|
+
this.$checkbox3 = $checkboxes.eq(2)
|
|
52
|
+
|
|
53
|
+
// Add to page
|
|
54
|
+
$(document.body).append(this.$content)
|
|
55
|
+
|
|
56
|
+
// Show/Hide content
|
|
57
|
+
this.$radioShowHide = $('#show-hide-radios')
|
|
58
|
+
this.$checkboxShowHide = $('#show-hide-checkboxes')
|
|
59
|
+
|
|
60
|
+
// Add show/hide content support
|
|
61
|
+
this.showHideContent = new GOVUK.ShowHideContent()
|
|
62
|
+
this.showHideContent.init()
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
afterEach(function () {
|
|
66
|
+
if (this.showHideContent) {
|
|
67
|
+
this.showHideContent.destroy()
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
this.$content.remove()
|
|
71
|
+
})
|
|
72
|
+
|
|
73
|
+
describe('when this.showHideContent = new GOVUK.ShowHideContent() is called', function () {
|
|
74
|
+
it('should add the aria attributes to inputs with show/hide content', function () {
|
|
75
|
+
expect(this.$radio1.attr('aria-expanded')).toBe('false')
|
|
76
|
+
expect(this.$radio1.attr('aria-controls')).toBe('show-hide-radios')
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
it('should add the aria attributes to show/hide content', function () {
|
|
80
|
+
expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
|
|
81
|
+
expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
|
|
82
|
+
})
|
|
83
|
+
|
|
84
|
+
it('should hide the show/hide content visually', function () {
|
|
85
|
+
expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
|
|
86
|
+
})
|
|
87
|
+
|
|
88
|
+
it('should do nothing if no radios are checked', function () {
|
|
89
|
+
expect(this.$radio1.attr('aria-expanded')).toBe('false')
|
|
90
|
+
expect(this.$radio2.attr('aria-expanded')).toBe(undefined)
|
|
91
|
+
})
|
|
92
|
+
|
|
93
|
+
it('should do nothing if no checkboxes are checked', function () {
|
|
94
|
+
expect(this.$radio1.attr('aria-expanded')).toBe('false')
|
|
95
|
+
expect(this.$radio2.attr('aria-expanded')).toBe(undefined)
|
|
96
|
+
})
|
|
97
|
+
|
|
98
|
+
describe('with non-default markup', function () {
|
|
99
|
+
beforeEach(function () {
|
|
100
|
+
this.showHideContent.destroy()
|
|
101
|
+
})
|
|
102
|
+
|
|
103
|
+
it('should do nothing if a radio without show/hide content is checked', function () {
|
|
104
|
+
this.$radio2.prop('checked', true)
|
|
105
|
+
|
|
106
|
+
// Defaults changed, initialise again
|
|
107
|
+
this.showHideContent = new GOVUK.ShowHideContent().init()
|
|
108
|
+
expect(this.$radio1.attr('aria-expanded')).toBe('false')
|
|
109
|
+
expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
|
|
110
|
+
expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
|
|
111
|
+
})
|
|
112
|
+
|
|
113
|
+
it('should do nothing if a checkbox without show/hide content is checked', function () {
|
|
114
|
+
this.$checkbox2.prop('checked', true)
|
|
115
|
+
|
|
116
|
+
// Defaults changed, initialise again
|
|
117
|
+
this.showHideContent = new GOVUK.ShowHideContent().init()
|
|
118
|
+
expect(this.$checkbox1.attr('aria-expanded')).toBe('false')
|
|
119
|
+
expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('true')
|
|
120
|
+
expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(true)
|
|
121
|
+
})
|
|
122
|
+
|
|
123
|
+
it('should do nothing if checkboxes without show/hide content is checked', function () {
|
|
124
|
+
this.$checkbox2.prop('checked', true)
|
|
125
|
+
this.$checkbox3.prop('checked', true)
|
|
126
|
+
|
|
127
|
+
// Defaults changed, initialise again
|
|
128
|
+
this.showHideContent = new GOVUK.ShowHideContent().init()
|
|
129
|
+
expect(this.$checkbox1.attr('aria-expanded')).toBe('false')
|
|
130
|
+
expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('true')
|
|
131
|
+
expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(true)
|
|
132
|
+
})
|
|
133
|
+
|
|
134
|
+
it('should make the show/hide content visible if its radio is checked', function () {
|
|
135
|
+
this.$radio1.prop('checked', true)
|
|
136
|
+
|
|
137
|
+
// Defaults changed, initialise again
|
|
138
|
+
this.showHideContent = new GOVUK.ShowHideContent().init()
|
|
139
|
+
expect(this.$radio1.attr('aria-expanded')).toBe('true')
|
|
140
|
+
expect(this.$radioShowHide.attr('aria-hidden')).toBe('false')
|
|
141
|
+
expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
|
|
142
|
+
})
|
|
143
|
+
|
|
144
|
+
it('should make the show/hide content visible if its checkbox is checked', function () {
|
|
145
|
+
this.$checkbox1.prop('checked', true)
|
|
146
|
+
|
|
147
|
+
// Defaults changed, initialise again
|
|
148
|
+
this.showHideContent = new GOVUK.ShowHideContent().init()
|
|
149
|
+
expect(this.$checkbox1.attr('aria-expanded')).toBe('true')
|
|
150
|
+
expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('false')
|
|
151
|
+
expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(false)
|
|
152
|
+
})
|
|
153
|
+
})
|
|
154
|
+
|
|
155
|
+
describe('and a show/hide radio receives a click', function () {
|
|
156
|
+
it('should make the show/hide content visible', function () {
|
|
157
|
+
this.$radio1.click()
|
|
158
|
+
expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
|
|
159
|
+
})
|
|
160
|
+
|
|
161
|
+
it('should add the aria attributes to show/hide content', function () {
|
|
162
|
+
this.$radio1.click()
|
|
163
|
+
expect(this.$radio1.attr('aria-expanded')).toBe('true')
|
|
164
|
+
expect(this.$radioShowHide.attr('aria-hidden')).toBe('false')
|
|
165
|
+
expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(false)
|
|
166
|
+
})
|
|
167
|
+
})
|
|
168
|
+
|
|
169
|
+
describe('and a show/hide checkbox receives a click', function () {
|
|
170
|
+
it('should make the show/hide content visible', function () {
|
|
171
|
+
this.$checkbox1.click()
|
|
172
|
+
expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(false)
|
|
173
|
+
})
|
|
174
|
+
|
|
175
|
+
it('should add the aria attributes to show/hide content', function () {
|
|
176
|
+
this.$checkbox1.click()
|
|
177
|
+
expect(this.$checkbox1.attr('aria-expanded')).toBe('true')
|
|
178
|
+
expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('false')
|
|
179
|
+
expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(false)
|
|
180
|
+
})
|
|
181
|
+
})
|
|
182
|
+
|
|
183
|
+
describe('and a show/hide radio receives a click, but another group radio is clicked afterwards', function () {
|
|
184
|
+
it('should make the show/hide content hidden', function () {
|
|
185
|
+
this.$radio1.click()
|
|
186
|
+
this.$radio2.click()
|
|
187
|
+
expect(this.$radioShowHide.hasClass('js-hidden')).toEqual(true)
|
|
188
|
+
})
|
|
189
|
+
|
|
190
|
+
it('should add the aria attributes to show/hide content', function () {
|
|
191
|
+
this.$radio1.click()
|
|
192
|
+
this.$radio2.click()
|
|
193
|
+
expect(this.$radio1.attr('aria-expanded')).toBe('false')
|
|
194
|
+
expect(this.$radioShowHide.attr('aria-hidden')).toBe('true')
|
|
195
|
+
})
|
|
196
|
+
})
|
|
197
|
+
|
|
198
|
+
describe('and a show/hide checkbox receives a click, but another checkbox is clicked afterwards', function () {
|
|
199
|
+
it('should keep the show/hide content visible', function () {
|
|
200
|
+
this.$checkbox1.click()
|
|
201
|
+
this.$checkbox2.click()
|
|
202
|
+
expect(this.$checkboxShowHide.hasClass('js-hidden')).toEqual(false)
|
|
203
|
+
})
|
|
204
|
+
|
|
205
|
+
it('should keep the aria attributes to show/hide content', function () {
|
|
206
|
+
this.$checkbox1.click()
|
|
207
|
+
this.$checkbox2.click()
|
|
208
|
+
expect(this.$checkbox1.attr('aria-expanded')).toBe('true')
|
|
209
|
+
expect(this.$checkboxShowHide.attr('aria-hidden')).toBe('false')
|
|
210
|
+
})
|
|
211
|
+
})
|
|
212
|
+
})
|
|
213
|
+
|
|
214
|
+
describe('before this.showHideContent.destroy() is called', function () {
|
|
215
|
+
it('document.body should have show/hide event handlers', function () {
|
|
216
|
+
var events = $._data(document.body, 'events')
|
|
217
|
+
expect(events && events.click).toContain(jasmine.objectContaining({
|
|
218
|
+
namespace: 'ShowHideContent',
|
|
219
|
+
selector: 'input[type="radio"][name="single"]'
|
|
220
|
+
}))
|
|
221
|
+
expect(events && events.click).toContain(jasmine.objectContaining({
|
|
222
|
+
namespace: 'ShowHideContent',
|
|
223
|
+
selector: '.block-label[data-target] input[type="checkbox"]'
|
|
224
|
+
}))
|
|
225
|
+
})
|
|
226
|
+
})
|
|
227
|
+
|
|
228
|
+
describe('when this.showHideContent.destroy() is called', function () {
|
|
229
|
+
beforeEach(function () {
|
|
230
|
+
this.showHideContent.destroy()
|
|
231
|
+
})
|
|
232
|
+
|
|
233
|
+
it('should have no show/hide event handlers', function () {
|
|
234
|
+
var events = $._data(document.body, 'events')
|
|
235
|
+
expect(events && events.click).not.toContain(jasmine.objectContaining({
|
|
236
|
+
namespace: 'ShowHideContent',
|
|
237
|
+
selector: 'input[type="radio"][name="single"]'
|
|
238
|
+
}))
|
|
239
|
+
expect(events && events.click).not.toContain(jasmine.objectContaining({
|
|
240
|
+
namespace: 'ShowHideContent',
|
|
241
|
+
selector: '.block-label[data-target] input[type="checkbox"]'
|
|
242
|
+
}))
|
|
243
|
+
})
|
|
244
|
+
})
|
|
245
|
+
})
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_frontend_toolkit
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 4.
|
|
4
|
+
version: 4.18.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Government Digital Service
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-09-
|
|
11
|
+
date: 2016-09-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -241,6 +241,7 @@ files:
|
|
|
241
241
|
- app/assets/javascripts/govuk/primary-links.js
|
|
242
242
|
- app/assets/javascripts/govuk/selection-buttons.js
|
|
243
243
|
- app/assets/javascripts/govuk/shim-links-with-button-role.js
|
|
244
|
+
- app/assets/javascripts/govuk/show-hide-content.js
|
|
244
245
|
- app/assets/javascripts/govuk/stick-at-top-when-scrolling.js
|
|
245
246
|
- app/assets/javascripts/govuk/stop-scrolling-at-footer.js
|
|
246
247
|
- app/assets/javascripts/govuk_toolkit.js
|
|
@@ -266,6 +267,7 @@ files:
|
|
|
266
267
|
- app/assets/spec/unit/primary-links.spec.js
|
|
267
268
|
- app/assets/spec/unit/selection-button.spec.js
|
|
268
269
|
- app/assets/spec/unit/shim-links-with-button-role.spec.js
|
|
270
|
+
- app/assets/spec/unit/show-hide-content.spec.js
|
|
269
271
|
- app/assets/spec/unit/stick-at-top-when-scrolling.spec.js
|
|
270
272
|
- app/assets/stylesheets/.gitkeep
|
|
271
273
|
- app/assets/stylesheets/_colours.scss
|