govuk_frontend_toolkit 4.17.0 → 4.18.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/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
|