govuk_elements_rails 1.2.2 → 2.0.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/vendor/assets/javascripts/details.polyfill.js +69 -72
- data/vendor/assets/stylesheets/elements/_buttons.scss +1 -0
- data/vendor/assets/stylesheets/elements/_govuk-template-base.scss +4 -0
- data/vendor/assets/stylesheets/elements/_helpers.scss +0 -6
- data/vendor/assets/stylesheets/elements/forms/_form-validation.scss +9 -16
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ff0b5d69ff3f0dc99c8a0634520709386b4c708c
|
4
|
+
data.tar.gz: 2e97f6f64df81c1c8e86116161f40ca858162022
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8ab3a4e9f00e32ce1b905ed1303ff72e987d8d857c46e7d16b341462c7a30908c42b2d83bba94a5bf92e81ce4b6601ca0c1b82d5821d2c60a174cd1122643a32
|
7
|
+
data.tar.gz: ed00c112b3ae7273d6c8ed6eb8ceb4b459aa2f454942e79c9924008c38610393b3c0422d1745761d85af3cb1f2db3d245f21ca7b37bf6dd3b34bf4231411a8d4
|
@@ -6,188 +6,185 @@
|
|
6
6
|
|
7
7
|
// http://www.sitepoint.com/fixing-the-details-element/
|
8
8
|
|
9
|
-
(function () {
|
10
|
-
'use strict'
|
9
|
+
;(function () {
|
10
|
+
'use strict'
|
11
11
|
|
12
|
-
var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean'
|
12
|
+
var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean'
|
13
13
|
|
14
14
|
// Add event construct for modern browsers or IE
|
15
15
|
// which fires the callback with a pre-converted target reference
|
16
|
-
function addEvent(node, type, callback) {
|
16
|
+
function addEvent (node, type, callback) {
|
17
17
|
if (node.addEventListener) {
|
18
18
|
node.addEventListener(type, function (e) {
|
19
|
-
callback(e, e.target)
|
20
|
-
}, false)
|
19
|
+
callback(e, e.target)
|
20
|
+
}, false)
|
21
21
|
} else if (node.attachEvent) {
|
22
22
|
node.attachEvent('on' + type, function (e) {
|
23
|
-
callback(e, e.srcElement)
|
24
|
-
})
|
23
|
+
callback(e, e.srcElement)
|
24
|
+
})
|
25
25
|
}
|
26
26
|
}
|
27
27
|
|
28
28
|
// Handle cross-modal click events
|
29
|
-
function addClickEvent(node, callback) {
|
29
|
+
function addClickEvent (node, callback) {
|
30
30
|
// Prevent space(32) from scrolling the page
|
31
31
|
addEvent(node, 'keypress', function (e, target) {
|
32
32
|
if (target.nodeName === 'SUMMARY') {
|
33
33
|
if (e.keyCode === 32) {
|
34
34
|
if (e.preventDefault) {
|
35
|
-
e.preventDefault()
|
35
|
+
e.preventDefault()
|
36
36
|
} else {
|
37
|
-
e.returnValue = false
|
37
|
+
e.returnValue = false
|
38
38
|
}
|
39
39
|
}
|
40
40
|
}
|
41
|
-
})
|
41
|
+
})
|
42
42
|
// When the key comes up - check if it is enter(13) or space(32)
|
43
43
|
addEvent(node, 'keyup', function (e, target) {
|
44
|
-
if (e.keyCode === 13 || e.keyCode === 32) { callback(e, target)
|
45
|
-
})
|
44
|
+
if (e.keyCode === 13 || e.keyCode === 32) { callback(e, target) }
|
45
|
+
})
|
46
46
|
addEvent(node, 'mouseup', function (e, target) {
|
47
|
-
callback(e, target)
|
48
|
-
})
|
47
|
+
callback(e, target)
|
48
|
+
})
|
49
49
|
}
|
50
50
|
|
51
51
|
// Get the nearest ancestor element of a node that matches a given tag name
|
52
|
-
function getAncestor(node, match) {
|
52
|
+
function getAncestor (node, match) {
|
53
53
|
do {
|
54
54
|
if (!node || node.nodeName.toLowerCase() === match) {
|
55
|
-
break
|
55
|
+
break
|
56
56
|
}
|
57
|
-
|
57
|
+
node = node.parentNode
|
58
|
+
} while (node)
|
58
59
|
|
59
|
-
return node
|
60
|
+
return node
|
60
61
|
}
|
61
62
|
|
62
63
|
// Create a started flag so we can prevent the initialisation
|
63
64
|
// function firing from both DOMContentLoaded and window.onload
|
64
|
-
var started = false
|
65
|
+
var started = false
|
65
66
|
|
66
67
|
// Initialisation function
|
67
|
-
function addDetailsPolyfill(list) {
|
68
|
-
|
68
|
+
function addDetailsPolyfill (list) {
|
69
69
|
// If this has already happened, just return
|
70
70
|
// else set the flag so it doesn't happen again
|
71
71
|
if (started) {
|
72
|
-
return
|
72
|
+
return
|
73
73
|
}
|
74
|
-
started = true
|
74
|
+
started = true
|
75
75
|
|
76
76
|
// Get the collection of details elements, but if that's empty
|
77
77
|
// then we don't need to bother with the rest of the scripting
|
78
78
|
if ((list = document.getElementsByTagName('details')).length === 0) {
|
79
|
-
return
|
79
|
+
return
|
80
80
|
}
|
81
81
|
|
82
82
|
// else iterate through them to apply their initial state
|
83
|
-
var n = list.length
|
83
|
+
var n = list.length
|
84
|
+
var i = 0
|
84
85
|
for (i; i < n; i++) {
|
85
|
-
var details = list[i]
|
86
|
+
var details = list[i]
|
86
87
|
|
87
88
|
// Save shortcuts to the inner summary and content elements
|
88
|
-
details.__summary = details.getElementsByTagName('summary').item(0)
|
89
|
-
details.__content = details.getElementsByTagName('div').item(0)
|
89
|
+
details.__summary = details.getElementsByTagName('summary').item(0)
|
90
|
+
details.__content = details.getElementsByTagName('div').item(0)
|
90
91
|
|
91
92
|
// If the content doesn't have an ID, assign it one now
|
92
93
|
// which we'll need for the summary's aria-controls assignment
|
93
94
|
if (!details.__content.id) {
|
94
|
-
details.__content.id = 'details-content-' + i
|
95
|
+
details.__content.id = 'details-content-' + i
|
95
96
|
}
|
96
97
|
|
97
98
|
// Add ARIA role="group" to details
|
98
|
-
details.setAttribute('role', 'group')
|
99
|
+
details.setAttribute('role', 'group')
|
99
100
|
|
100
101
|
// Add role=button to summary
|
101
|
-
details.__summary.setAttribute('role', 'button')
|
102
|
+
details.__summary.setAttribute('role', 'button')
|
102
103
|
|
103
104
|
// Add aria-controls
|
104
|
-
details.__summary.setAttribute('aria-controls', details.__content.id)
|
105
|
+
details.__summary.setAttribute('aria-controls', details.__content.id)
|
105
106
|
|
106
107
|
// Set tabIndex so the summary is keyboard accessible for non-native elements
|
107
108
|
// http://www.saliences.com/browserBugs/tabIndex.html
|
108
109
|
if (!NATIVE_DETAILS) {
|
109
|
-
details.__summary.tabIndex = 0
|
110
|
+
details.__summary.tabIndex = 0
|
110
111
|
}
|
111
112
|
|
112
113
|
// Detect initial open state
|
113
|
-
var openAttr = details.getAttribute('open') !== null
|
114
|
+
var openAttr = details.getAttribute('open') !== null
|
114
115
|
if (openAttr === true) {
|
115
|
-
details.__summary.setAttribute('aria-expanded', 'true')
|
116
|
-
details.__content.setAttribute('aria-hidden', 'false')
|
116
|
+
details.__summary.setAttribute('aria-expanded', 'true')
|
117
|
+
details.__content.setAttribute('aria-hidden', 'false')
|
117
118
|
} else {
|
118
|
-
details.__summary.setAttribute('aria-expanded', 'false')
|
119
|
-
details.__content.setAttribute('aria-hidden', 'true')
|
119
|
+
details.__summary.setAttribute('aria-expanded', 'false')
|
120
|
+
details.__content.setAttribute('aria-hidden', 'true')
|
120
121
|
if (!NATIVE_DETAILS) {
|
121
|
-
details.__content.style.display = 'none'
|
122
|
+
details.__content.style.display = 'none'
|
122
123
|
}
|
123
124
|
}
|
124
125
|
|
125
126
|
// Create a circular reference from the summary back to its
|
126
127
|
// parent details element, for convenience in the click handler
|
127
|
-
details.__summary.__details = details
|
128
|
+
details.__summary.__details = details
|
128
129
|
|
129
130
|
// If this is not a native implementation, create an arrow
|
130
131
|
// inside the summary
|
131
132
|
if (!NATIVE_DETAILS) {
|
132
|
-
|
133
|
-
var twisty = document.createElement('i');
|
133
|
+
var twisty = document.createElement('i')
|
134
134
|
|
135
135
|
if (openAttr === true) {
|
136
|
-
twisty.className = 'arrow arrow-open'
|
137
|
-
twisty.appendChild(document.createTextNode('\u25bc'))
|
136
|
+
twisty.className = 'arrow arrow-open'
|
137
|
+
twisty.appendChild(document.createTextNode('\u25bc'))
|
138
138
|
} else {
|
139
|
-
twisty.className = 'arrow arrow-closed'
|
140
|
-
twisty.appendChild(document.createTextNode('\u25ba'))
|
139
|
+
twisty.className = 'arrow arrow-closed'
|
140
|
+
twisty.appendChild(document.createTextNode('\u25ba'))
|
141
141
|
}
|
142
142
|
|
143
|
-
details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild)
|
144
|
-
details.__summary.__twisty.setAttribute('aria-hidden', 'true')
|
145
|
-
|
143
|
+
details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild)
|
144
|
+
details.__summary.__twisty.setAttribute('aria-hidden', 'true')
|
146
145
|
}
|
147
146
|
}
|
148
147
|
|
149
148
|
// Define a statechange function that updates aria-expanded and style.display
|
150
149
|
// Also update the arrow position
|
151
|
-
function statechange(summary) {
|
150
|
+
function statechange (summary) {
|
151
|
+
var expanded = summary.__details.__summary.getAttribute('aria-expanded') === 'true'
|
152
|
+
var hidden = summary.__details.__content.getAttribute('aria-hidden') === 'true'
|
152
153
|
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
summary.__details.__summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'));
|
157
|
-
summary.__details.__content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'));
|
154
|
+
summary.__details.__summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'))
|
155
|
+
summary.__details.__content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'))
|
158
156
|
|
159
157
|
if (!NATIVE_DETAILS) {
|
160
|
-
summary.__details.__content.style.display = (expanded ? 'none' : '')
|
158
|
+
summary.__details.__content.style.display = (expanded ? 'none' : '')
|
161
159
|
|
162
|
-
var hasOpenAttr = summary.__details.getAttribute('open') !== null
|
160
|
+
var hasOpenAttr = summary.__details.getAttribute('open') !== null
|
163
161
|
if (!hasOpenAttr) {
|
164
|
-
summary.__details.setAttribute('open', 'open')
|
162
|
+
summary.__details.setAttribute('open', 'open')
|
165
163
|
} else {
|
166
|
-
summary.__details.removeAttribute('open')
|
164
|
+
summary.__details.removeAttribute('open')
|
167
165
|
}
|
168
166
|
}
|
169
167
|
|
170
168
|
if (summary.__twisty) {
|
171
|
-
summary.__twisty.firstChild.nodeValue = (expanded ? '\u25ba' : '\u25bc')
|
172
|
-
summary.__twisty.setAttribute('class', (expanded ? 'arrow arrow-closed' : 'arrow arrow-open'))
|
169
|
+
summary.__twisty.firstChild.nodeValue = (expanded ? '\u25ba' : '\u25bc')
|
170
|
+
summary.__twisty.setAttribute('class', (expanded ? 'arrow arrow-closed' : 'arrow arrow-open'))
|
173
171
|
}
|
174
172
|
|
175
|
-
return true
|
173
|
+
return true
|
176
174
|
}
|
177
175
|
|
178
176
|
// Bind a click event to handle summary elements
|
179
|
-
addClickEvent(document, function(e, summary) {
|
177
|
+
addClickEvent(document, function (e, summary) {
|
180
178
|
if (!(summary = getAncestor(summary, 'summary'))) {
|
181
|
-
return true
|
179
|
+
return true
|
182
180
|
}
|
183
|
-
return statechange(summary)
|
184
|
-
})
|
181
|
+
return statechange(summary)
|
182
|
+
})
|
185
183
|
}
|
186
184
|
|
187
185
|
// Bind two load events for modern and older browsers
|
188
186
|
// If the first one fires it will set a flag to block the second one
|
189
187
|
// but if it's not supported then the second one will fire
|
190
|
-
addEvent(document, 'DOMContentLoaded', addDetailsPolyfill)
|
191
|
-
addEvent(window, 'load', addDetailsPolyfill)
|
192
|
-
|
193
|
-
})();
|
188
|
+
addEvent(document, 'DOMContentLoaded', addDetailsPolyfill)
|
189
|
+
addEvent(window, 'load', addDetailsPolyfill)
|
190
|
+
})()
|
@@ -125,6 +125,10 @@ a:active {
|
|
125
125
|
}
|
126
126
|
|
127
127
|
// External link styles
|
128
|
+
// These are currently deprecated and are liable to be removed in a future release.
|
129
|
+
// If your service has user research that indicates that external links are useful
|
130
|
+
// (or not) then we’d like to hear from you either on Slack,
|
131
|
+
// digital-service-designers or opening an issue.
|
128
132
|
a[rel="external"] {
|
129
133
|
@include external-link-default;
|
130
134
|
@include external-link-16;
|
@@ -1,12 +1,6 @@
|
|
1
1
|
// Helpers
|
2
2
|
// ==========================================================================
|
3
3
|
|
4
|
-
// If image-url is not defined (if we are not in a Rails environment)
|
5
|
-
// Set a path to /public/images
|
6
|
-
@if not(function-exists(image-url)) {
|
7
|
-
$path: "/public/images/";
|
8
|
-
}
|
9
|
-
|
10
4
|
// Return ems from a pixel value
|
11
5
|
// This assumes a base of 19px
|
12
6
|
@function em($px, $base: 19) {
|
@@ -1,30 +1,19 @@
|
|
1
1
|
// Form validation
|
2
2
|
// ==========================================================================
|
3
3
|
|
4
|
-
//
|
4
|
+
// Use error to add a red border to the left of a .form-group
|
5
5
|
.error {
|
6
6
|
|
7
|
-
// Ensure the .error class is applied to .form-group,
|
7
|
+
// Ensure the .error class is applied to .form-group, otherwise box-sizing(border-box) will need to be used
|
8
8
|
// @include box-sizing(border-box);
|
9
9
|
margin-right: 15px;
|
10
10
|
|
11
|
-
// Error messages should be red and bold
|
12
|
-
.error-message {
|
13
|
-
color: $error-colour;
|
14
|
-
font-weight: bold;
|
15
|
-
}
|
16
|
-
|
17
11
|
// Form inputs should have a red border
|
18
|
-
.form-
|
12
|
+
// Add a red border to .form-controls that are direct descendants
|
13
|
+
> .form-control {
|
19
14
|
border: 4px solid $error-colour;
|
20
15
|
}
|
21
16
|
|
22
|
-
}
|
23
|
-
|
24
|
-
.error,
|
25
|
-
.error-summary {
|
26
|
-
|
27
|
-
// Add a red border to the left of the field
|
28
17
|
border-left: 4px solid $error-colour;
|
29
18
|
padding-left: 10px;
|
30
19
|
|
@@ -32,10 +21,14 @@
|
|
32
21
|
border-left: 5px solid $error-colour;
|
33
22
|
padding-left: $gutter-half;
|
34
23
|
}
|
24
|
+
|
35
25
|
}
|
36
26
|
|
27
|
+
// Error messages should be red and bold
|
37
28
|
.error-message {
|
38
|
-
@include
|
29
|
+
@include bold-19;
|
30
|
+
color: $error-colour;
|
31
|
+
|
39
32
|
|
40
33
|
display: block;
|
41
34
|
clear: both;
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: govuk_elements_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Rob McKinnon
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2016-08-
|
12
|
+
date: 2016-08-25 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
@@ -54,8 +54,8 @@ dependencies:
|
|
54
54
|
- !ruby/object:Gem::Version
|
55
55
|
version: 4.14.1
|
56
56
|
description: |-
|
57
|
-
A gem wrapper around govuk_elements
|
58
|
-
that pulls stylesheet and javascript files into a Rails app. Changelog: https://github.com/alphagov/govuk_elements/blob/
|
57
|
+
A gem wrapper around govuk_elements v2.0.0
|
58
|
+
that pulls stylesheet and javascript files into a Rails app. Changelog: https://github.com/alphagov/govuk_elements/blob/58e2b5e3a6a219999b814760023aaa1df1308d83
|
59
59
|
/CHANGELOG.md
|
60
60
|
email: robin.whittleton@digital.cabinet-office.gov.uk
|
61
61
|
executables: []
|