govuk_elements_rails 1.2.2 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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: []
|