dxw_govuk_frontend_rails 2.13.0 → 3.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +9 -9
- data/Rakefile +8 -8
- data/dxw_govuk_frontend_rails.gemspec +3 -3
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +3 -3
- data/package.json +1 -1
- data/vendor/assets/fonts/bold-affa96571d-v2.woff +0 -0
- data/vendor/assets/fonts/bold-b542beb274-v2.woff2 +0 -0
- data/vendor/assets/fonts/light-94a07e06a1-v2.woff2 +0 -0
- data/vendor/assets/fonts/light-f591b13f7d-v2.woff +0 -0
- data/vendor/assets/javascripts/govuk_frontend_rails.js +116 -63
- data/vendor/assets/stylesheets/components/accordion/_accordion.scss +48 -28
- data/vendor/assets/stylesheets/components/back-link/_back-link.scss +17 -9
- data/vendor/assets/stylesheets/components/breadcrumbs/_breadcrumbs.scss +10 -11
- data/vendor/assets/stylesheets/components/button/_button.scss +70 -47
- data/vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss +4 -6
- data/vendor/assets/stylesheets/components/details/_details.scss +12 -13
- data/vendor/assets/stylesheets/components/error-summary/_error-summary.scss +4 -17
- data/vendor/assets/stylesheets/components/file-upload/_file-upload.scss +63 -1
- data/vendor/assets/stylesheets/components/footer/_footer.scss +47 -16
- data/vendor/assets/stylesheets/components/header/_header.scss +34 -20
- data/vendor/assets/stylesheets/components/input/_input.scss +24 -1
- data/vendor/assets/stylesheets/components/panel/_panel.scss +1 -1
- data/vendor/assets/stylesheets/components/radios/_radios.scss +7 -9
- data/vendor/assets/stylesheets/components/select/_select.scss +23 -1
- data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss +6 -1
- data/vendor/assets/stylesheets/components/table/_table.scss +1 -0
- data/vendor/assets/stylesheets/components/tabs/_tabs.scss +63 -51
- data/vendor/assets/stylesheets/components/tag/_tag.scss +18 -7
- data/vendor/assets/stylesheets/components/textarea/_textarea.scss +24 -1
- data/vendor/assets/stylesheets/helpers/_all.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_colour.scss +23 -1
- data/vendor/assets/stylesheets/helpers/_focused.scss +28 -0
- data/vendor/assets/stylesheets/helpers/_font-faces.scss +10 -36
- data/vendor/assets/stylesheets/helpers/_grid.scss +11 -58
- data/vendor/assets/stylesheets/helpers/_links.scss +15 -1
- data/vendor/assets/stylesheets/helpers/_typography.scss +22 -4
- data/vendor/assets/stylesheets/helpers/_visually-hidden.scss +4 -2
- data/vendor/assets/stylesheets/objects/_grid.scss +2 -2
- data/vendor/assets/stylesheets/objects/_main-wrapper.scss +15 -1
- data/vendor/assets/stylesheets/settings/_colours-applied.scss +9 -8
- data/vendor/assets/stylesheets/settings/_colours-palette.scss +70 -6
- data/vendor/assets/stylesheets/settings/_compatibility.scss +31 -7
- data/vendor/assets/stylesheets/settings/_measurements.scss +2 -2
- data/vendor/assets/stylesheets/settings/_typography-font-families.scss +11 -1
- data/vendor/assets/stylesheets/settings/_typography-font.scss +27 -7
- data/vendor/assets/stylesheets/settings/_typography-responsive.scss +9 -10
- metadata +10 -22
- data/vendor/assets/fonts/bold-a2452cb66f-v1.woff2 +0 -0
- data/vendor/assets/fonts/bold-f38c792ac2-v1.woff +0 -0
- data/vendor/assets/fonts/bold-fb2676462a-v1.eot +0 -0
- data/vendor/assets/fonts/bold-tabular-357fdfbcc3-v1.eot +0 -0
- data/vendor/assets/fonts/bold-tabular-784c21afb8-v1.woff +0 -0
- data/vendor/assets/fonts/bold-tabular-b89238d840-v1.woff2 +0 -0
- data/vendor/assets/fonts/light-2c037cf7e1-v1.eot +0 -0
- data/vendor/assets/fonts/light-458f8ea81c-v1.woff +0 -0
- data/vendor/assets/fonts/light-f38ad40456-v1.woff2 +0 -0
- data/vendor/assets/fonts/light-tabular-498ea8ffe2-v1.eot +0 -0
- data/vendor/assets/fonts/light-tabular-62cc6f0a28-v1.woff +0 -0
- data/vendor/assets/fonts/light-tabular-851b10ccdd-v1.woff2 +0 -0
- data/vendor/assets/images/icon-arrow-left.png +0 -0
- data/vendor/assets/images/icon-important.png +0 -0
- data/vendor/assets/images/icon-pointer-2x.png +0 -0
- data/vendor/assets/images/icon-pointer.png +0 -0
- data/vendor/assets/stylesheets/helpers/_focusable.scss +0 -34
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e8b0ce31fa95a92870c71c1bad7cc7946fc4d7df301c729032a20ff6eb5088e5
|
4
|
+
data.tar.gz: 8a8b382053a24f041f7716e114821a2775c57c15451530780f2cec1092f634ae
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d50b314466a962dc265ce444796b56967f51e6535cf409b18f0e4470396cb81222a37e9045cd21dafd16f2dcfaf6eacd68f042aa1c03e24f9ffbb42fb8568cd5
|
7
|
+
data.tar.gz: 619f339b61e8d545969408f465ad269924555d74a3d6bfe74f55928a142482619cba8cc8f70715d1d15c04679cca6c4cd84e43581bf0d34aa0ab45dcdbf40dcc
|
data/README.md
CHANGED
@@ -65,14 +65,14 @@ https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-
|
|
65
65
|
## Tracking version
|
66
66
|
We aim to tracking the version of GOVUK Frontend.
|
67
67
|
|
68
|
-
##
|
68
|
+
## Updating to a new Version of GOVUK Frontend
|
69
69
|
|
70
|
-
|
70
|
+
When a new version of the GOVUK Frontend is released:
|
71
71
|
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
72
|
+
- set the new version number in `package.json` and `lib/dxw_govuk_frontend_rails/version.rb`
|
73
|
+
- run `npm update` to get the new release
|
74
|
+
- run `bundle rake` to compile the new assets
|
75
|
+
- commit the changes
|
76
|
+
- tag with the same release number as GOVUK Frontend
|
77
|
+
- push the changes
|
78
|
+
- CircleCI will build the gem and push to Rubygems
|
data/Rakefile
CHANGED
@@ -13,8 +13,8 @@ task 'assets' do
|
|
13
13
|
end
|
14
14
|
|
15
15
|
task 'stylesheets' do
|
16
|
-
Rake::FileList['node_modules/govuk-frontend/**/*.scss'].each do |source|
|
17
|
-
target = source.sub('node_modules/govuk-frontend', 'vendor/assets/stylesheets')
|
16
|
+
Rake::FileList['node_modules/govuk-frontend/govuk/**/*.scss'].each do |source|
|
17
|
+
target = source.sub('node_modules/govuk-frontend/govuk', 'vendor/assets/stylesheets')
|
18
18
|
mkdir_p(File.dirname(target))
|
19
19
|
copy_file source, target
|
20
20
|
end
|
@@ -22,9 +22,9 @@ end
|
|
22
22
|
|
23
23
|
task 'fonts' do
|
24
24
|
Rake::FileList[
|
25
|
-
'node_modules/govuk-frontend/assets/fonts/*.{eot,woff,woff2,ico,svg}'
|
25
|
+
'node_modules/govuk-frontend/govuk/assets/fonts/*.{eot,woff,woff2,ico,svg}'
|
26
26
|
].each do |source|
|
27
|
-
target = source.sub('node_modules/govuk-frontend', 'vendor')
|
27
|
+
target = source.sub('node_modules/govuk-frontend/govuk', 'vendor')
|
28
28
|
mkdir_p(File.dirname(target))
|
29
29
|
copy_file source, target
|
30
30
|
end
|
@@ -32,17 +32,17 @@ task 'fonts' do
|
|
32
32
|
|
33
33
|
task 'images' do
|
34
34
|
Rake::FileList[
|
35
|
-
'node_modules/govuk-frontend/assets/images/*.{png,gif,jpg,ico,svg}'
|
35
|
+
'node_modules/govuk-frontend/govuk/assets/images/*.{png,gif,jpg,ico,svg}'
|
36
36
|
].each do |source|
|
37
|
-
target = source.sub('node_modules/govuk-frontend', 'vendor')
|
37
|
+
target = source.sub('node_modules/govuk-frontend/govuk', 'vendor')
|
38
38
|
mkdir_p(File.dirname(target))
|
39
39
|
copy_file source, target
|
40
40
|
end
|
41
41
|
end
|
42
42
|
|
43
43
|
task 'javascripts' do
|
44
|
-
files = Rake::FileList['node_modules/govuk-frontend/all.js'].each do |source|
|
45
|
-
target = source.sub('node_modules/govuk-frontend', 'vendor/assets/javascripts')
|
44
|
+
files = Rake::FileList['node_modules/govuk-frontend/govuk/all.js'].each do |source|
|
45
|
+
target = source.sub('node_modules/govuk-frontend/govuk', 'vendor/assets/javascripts')
|
46
46
|
target = target.sub('all.js', 'govuk_frontend_rails.js')
|
47
47
|
mkdir_p(File.dirname(target))
|
48
48
|
copy_file source, target
|
@@ -8,9 +8,9 @@ Gem::Specification.new do |spec|
|
|
8
8
|
spec.version = DxwGovukFrontendRails::VERSION
|
9
9
|
spec.authors = ["mec", "pezholio"]
|
10
10
|
|
11
|
-
spec.summary = %q{Adds the GOVUK frontend to a Rails application.}
|
12
|
-
spec.description = %q{Adds the GOVUK frontend to a Rails application.}
|
13
|
-
spec.homepage = "https://github.com/
|
11
|
+
spec.summary = %q{Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.}
|
12
|
+
spec.description = %q{Adds the GOVUK frontend to a Rails application that uses the Asset Pipeline.}
|
13
|
+
spec.homepage = "https://github.com/dxw/dxw_govuk_frontend_rails"
|
14
14
|
spec.license = "MIT"
|
15
15
|
|
16
16
|
# Specify which files should be added to the gem when it is released.
|
data/package-lock.json
CHANGED
@@ -5,9 +5,9 @@
|
|
5
5
|
"requires": true,
|
6
6
|
"dependencies": {
|
7
7
|
"govuk-frontend": {
|
8
|
-
"version": "
|
9
|
-
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-
|
10
|
-
"integrity": "sha512-
|
8
|
+
"version": "3.0.0",
|
9
|
+
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.0.0.tgz",
|
10
|
+
"integrity": "sha512-GCrEeaQZEnsthNtfmOUFlgsieNjHOeoamSWMdD4Gdq0RPxCA9uzfrT2i3jVnlBORekKjOL0C8eFZQBSNnjtz2A=="
|
11
11
|
}
|
12
12
|
}
|
13
13
|
}
|
data/package.json
CHANGED
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1291,28 +1291,21 @@ if (detect) return
|
|
1291
1291
|
})
|
1292
1292
|
.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
|
1293
1293
|
|
1294
|
-
/**
|
1295
|
-
* JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
|
1296
|
-
*
|
1297
|
-
* Created since some Assistive Technologies (for example some Screenreaders)
|
1298
|
-
* will tell a user to press space on a 'button', so this functionality needs to be shimmed
|
1299
|
-
* See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
|
1300
|
-
*
|
1301
|
-
* Usage instructions:
|
1302
|
-
* the 'shim' will be automatically initialised
|
1303
|
-
*/
|
1304
|
-
|
1305
1294
|
var KEY_SPACE = 32;
|
1306
1295
|
var DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
|
1307
|
-
var debounceFormSubmitTimer = null;
|
1308
1296
|
|
1309
1297
|
function Button ($module) {
|
1310
1298
|
this.$module = $module;
|
1299
|
+
this.debounceFormSubmitTimer = null;
|
1311
1300
|
}
|
1312
1301
|
|
1313
1302
|
/**
|
1314
|
-
*
|
1315
|
-
*
|
1303
|
+
* JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
|
1304
|
+
*
|
1305
|
+
* Created since some Assistive Technologies (for example some Screenreaders)
|
1306
|
+
* will tell a user to press space on a 'button', so this functionality needs to be shimmed
|
1307
|
+
* See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
|
1308
|
+
*
|
1316
1309
|
* @param {object} event event
|
1317
1310
|
*/
|
1318
1311
|
Button.prototype.handleKeyDown = function (event) {
|
@@ -1339,14 +1332,14 @@ Button.prototype.debounce = function (event) {
|
|
1339
1332
|
}
|
1340
1333
|
|
1341
1334
|
// If the timer is still running then we want to prevent the click from submitting the form
|
1342
|
-
if (debounceFormSubmitTimer) {
|
1335
|
+
if (this.debounceFormSubmitTimer) {
|
1343
1336
|
event.preventDefault();
|
1344
1337
|
return false
|
1345
1338
|
}
|
1346
1339
|
|
1347
|
-
debounceFormSubmitTimer = setTimeout(function () {
|
1348
|
-
debounceFormSubmitTimer = null;
|
1349
|
-
}, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
|
1340
|
+
this.debounceFormSubmitTimer = setTimeout(function () {
|
1341
|
+
this.debounceFormSubmitTimer = null;
|
1342
|
+
}.bind(this), DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
|
1350
1343
|
};
|
1351
1344
|
|
1352
1345
|
/**
|
@@ -1363,9 +1356,6 @@ Button.prototype.init = function () {
|
|
1363
1356
|
* and 'shim' to add accessiblity enhancements for all browsers
|
1364
1357
|
*
|
1365
1358
|
* http://caniuse.com/#feat=details
|
1366
|
-
*
|
1367
|
-
* Usage instructions:
|
1368
|
-
* the 'polyfill' will be automatically initialised
|
1369
1359
|
*/
|
1370
1360
|
|
1371
1361
|
var KEY_ENTER = 13;
|
@@ -1449,7 +1439,9 @@ Details.prototype.init = function () {
|
|
1449
1439
|
$summary.setAttribute('aria-controls', $content.id);
|
1450
1440
|
|
1451
1441
|
// Set tabIndex so the summary is keyboard accessible for non-native elements
|
1452
|
-
//
|
1442
|
+
//
|
1443
|
+
// We have to use the camelcase `tabIndex` property as there is a bug in IE6/IE7 when we set the correct attribute lowercase:
|
1444
|
+
// See http://web.archive.org/web/20170120194036/http://www.saliences.com/browserBugs/tabIndex.html for more information.
|
1453
1445
|
if (!NATIVE_DETAILS) {
|
1454
1446
|
$summary.tabIndex = 0;
|
1455
1447
|
}
|
@@ -1511,7 +1503,7 @@ Details.prototype.destroy = function (node) {
|
|
1511
1503
|
|
1512
1504
|
function CharacterCount ($module) {
|
1513
1505
|
this.$module = $module;
|
1514
|
-
this.$textarea = $module.querySelector('.js-character-count');
|
1506
|
+
this.$textarea = $module.querySelector('.govuk-js-character-count');
|
1515
1507
|
}
|
1516
1508
|
|
1517
1509
|
CharacterCount.prototype.defaults = {
|
@@ -1651,8 +1643,12 @@ CharacterCount.prototype.updateCountMessage = function () {
|
|
1651
1643
|
var thresholdValue = maxLength * thresholdPercent / 100;
|
1652
1644
|
if (thresholdValue > currentLength) {
|
1653
1645
|
countMessage.classList.add('govuk-character-count__message--disabled');
|
1646
|
+
// Ensure threshold is hidden for users of assistive technologies
|
1647
|
+
countMessage.setAttribute('aria-hidden', true);
|
1654
1648
|
} else {
|
1655
1649
|
countMessage.classList.remove('govuk-character-count__message--disabled');
|
1650
|
+
// Ensure threshold is visible for users of assistive technologies
|
1651
|
+
countMessage.removeAttribute('aria-hidden');
|
1656
1652
|
}
|
1657
1653
|
|
1658
1654
|
// Update styles
|
@@ -1853,16 +1849,6 @@ ErrorSummary.prototype.focusTarget = function ($target) {
|
|
1853
1849
|
return false
|
1854
1850
|
}
|
1855
1851
|
|
1856
|
-
// Prefer using the history API where possible, as updating
|
1857
|
-
// window.location.hash causes the viewport to jump to the input briefly
|
1858
|
-
// before then scrolling to the label/legend in IE10, IE11 and Edge (as tested
|
1859
|
-
// in Edge 17).
|
1860
|
-
if (window.history.pushState) {
|
1861
|
-
window.history.pushState(null, null, '#' + inputId);
|
1862
|
-
} else {
|
1863
|
-
window.location.hash = inputId;
|
1864
|
-
}
|
1865
|
-
|
1866
1852
|
// Scroll the legend or label into view *before* calling focus on the input to
|
1867
1853
|
// avoid extra scrolling in browsers that don't support `preventScroll` (which
|
1868
1854
|
// at time of writing is most of them...)
|
@@ -1929,7 +1915,7 @@ Header.prototype.init = function () {
|
|
1929
1915
|
}
|
1930
1916
|
|
1931
1917
|
// Check for button
|
1932
|
-
var $toggleButton = $module.querySelector('.js-header-toggle');
|
1918
|
+
var $toggleButton = $module.querySelector('.govuk-js-header-toggle');
|
1933
1919
|
if (!$toggleButton) {
|
1934
1920
|
return
|
1935
1921
|
}
|
@@ -1972,12 +1958,11 @@ Header.prototype.handleClick = function (event) {
|
|
1972
1958
|
|
1973
1959
|
function Radios ($module) {
|
1974
1960
|
this.$module = $module;
|
1975
|
-
this.$inputs = $module.querySelectorAll('input[type="radio"]');
|
1976
1961
|
}
|
1977
1962
|
|
1978
1963
|
Radios.prototype.init = function () {
|
1979
1964
|
var $module = this.$module;
|
1980
|
-
var $inputs =
|
1965
|
+
var $inputs = $module.querySelectorAll('input[type="radio"]');
|
1981
1966
|
|
1982
1967
|
/**
|
1983
1968
|
* Loop over all items with [data-controls]
|
@@ -2004,26 +1989,88 @@ Radios.prototype.init = function () {
|
|
2004
1989
|
};
|
2005
1990
|
|
2006
1991
|
Radios.prototype.setAttributes = function ($input) {
|
2007
|
-
var
|
2008
|
-
|
1992
|
+
var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
|
1993
|
+
|
1994
|
+
if ($content && $content.classList.contains('govuk-radios__conditional')) {
|
1995
|
+
var inputIsChecked = $input.checked;
|
1996
|
+
|
1997
|
+
$input.setAttribute('aria-expanded', inputIsChecked);
|
2009
1998
|
|
2010
|
-
var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
|
2011
|
-
if ($content) {
|
2012
1999
|
$content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
|
2013
2000
|
}
|
2014
2001
|
};
|
2015
2002
|
|
2016
2003
|
Radios.prototype.handleClick = function (event) {
|
2017
|
-
|
2018
|
-
|
2019
|
-
|
2020
|
-
|
2021
|
-
|
2004
|
+
var $clickedInput = event.target;
|
2005
|
+
// We only want to handle clicks for radio inputs
|
2006
|
+
if ($clickedInput.type !== 'radio') {
|
2007
|
+
return
|
2008
|
+
}
|
2009
|
+
// Because checking one radio can uncheck a radio in another $module,
|
2010
|
+
// we need to call set attributes on all radios in the same form, or document if they're not in a form.
|
2011
|
+
//
|
2012
|
+
// We also only want radios which have aria-controls, as they support conditional reveals.
|
2013
|
+
var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
|
2014
|
+
nodeListForEach($allInputs, function ($input) {
|
2015
|
+
// Only inputs with the same form owner should change.
|
2016
|
+
var hasSameFormOwner = ($input.form === $clickedInput.form);
|
2017
|
+
|
2018
|
+
// In radios, only radios with the same name will affect each other.
|
2019
|
+
var hasSameName = ($input.name === $clickedInput.name);
|
2020
|
+
if (hasSameName && hasSameFormOwner) {
|
2022
2021
|
this.setAttributes($input);
|
2023
2022
|
}
|
2024
2023
|
}.bind(this));
|
2025
2024
|
};
|
2026
2025
|
|
2026
|
+
(function(undefined) {
|
2027
|
+
|
2028
|
+
// Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
|
2029
|
+
var detect = (
|
2030
|
+
'Element' in this && "nextElementSibling" in document.documentElement
|
2031
|
+
);
|
2032
|
+
|
2033
|
+
if (detect) return
|
2034
|
+
|
2035
|
+
|
2036
|
+
(function (global) {
|
2037
|
+
|
2038
|
+
// Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd
|
2039
|
+
Object.defineProperty(Element.prototype, "nextElementSibling", {
|
2040
|
+
get: function(){
|
2041
|
+
var el = this.nextSibling;
|
2042
|
+
while (el && el.nodeType !== 1) { el = el.nextSibling; }
|
2043
|
+
return (el.nodeType === 1) ? el : null;
|
2044
|
+
}
|
2045
|
+
});
|
2046
|
+
|
2047
|
+
}(this));
|
2048
|
+
|
2049
|
+
}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
|
2050
|
+
|
2051
|
+
(function(undefined) {
|
2052
|
+
|
2053
|
+
// Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
|
2054
|
+
var detect = (
|
2055
|
+
'Element' in this && 'previousElementSibling' in document.documentElement
|
2056
|
+
);
|
2057
|
+
|
2058
|
+
if (detect) return
|
2059
|
+
|
2060
|
+
(function (global) {
|
2061
|
+
// Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739
|
2062
|
+
Object.defineProperty(Element.prototype, 'previousElementSibling', {
|
2063
|
+
get: function(){
|
2064
|
+
var el = this.previousSibling;
|
2065
|
+
while (el && el.nodeType !== 1) { el = el.previousSibling; }
|
2066
|
+
return (el.nodeType === 1) ? el : null;
|
2067
|
+
}
|
2068
|
+
});
|
2069
|
+
|
2070
|
+
}(this));
|
2071
|
+
|
2072
|
+
}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
|
2073
|
+
|
2027
2074
|
function Tabs ($module) {
|
2028
2075
|
this.$module = $module;
|
2029
2076
|
this.$tabs = $module.querySelectorAll('.govuk-tabs__tab');
|
@@ -2165,6 +2212,7 @@ Tabs.prototype.setAttributes = function ($tab) {
|
|
2165
2212
|
$tab.setAttribute('id', 'tab_' + panelId);
|
2166
2213
|
$tab.setAttribute('role', 'tab');
|
2167
2214
|
$tab.setAttribute('aria-controls', panelId);
|
2215
|
+
$tab.setAttribute('aria-selected', 'false');
|
2168
2216
|
$tab.setAttribute('tabindex', '-1');
|
2169
2217
|
|
2170
2218
|
// set panel attributes
|
@@ -2179,6 +2227,7 @@ Tabs.prototype.unsetAttributes = function ($tab) {
|
|
2179
2227
|
$tab.removeAttribute('id');
|
2180
2228
|
$tab.removeAttribute('role');
|
2181
2229
|
$tab.removeAttribute('aria-controls');
|
2230
|
+
$tab.removeAttribute('aria-selected');
|
2182
2231
|
$tab.removeAttribute('tabindex');
|
2183
2232
|
|
2184
2233
|
// unset panel attributes
|
@@ -2189,6 +2238,10 @@ Tabs.prototype.unsetAttributes = function ($tab) {
|
|
2189
2238
|
};
|
2190
2239
|
|
2191
2240
|
Tabs.prototype.onTabClick = function (e) {
|
2241
|
+
if (!e.target.classList.contains('govuk-tabs__tab')) {
|
2242
|
+
// Allow events on child DOM elements to bubble up to tab parent
|
2243
|
+
return false
|
2244
|
+
}
|
2192
2245
|
e.preventDefault();
|
2193
2246
|
var $newTab = e.target;
|
2194
2247
|
var $currentTab = this.getCurrentTab();
|
@@ -2228,7 +2281,7 @@ Tabs.prototype.activateNextTab = function () {
|
|
2228
2281
|
var currentTab = this.getCurrentTab();
|
2229
2282
|
var nextTabListItem = currentTab.parentNode.nextElementSibling;
|
2230
2283
|
if (nextTabListItem) {
|
2231
|
-
var nextTab = nextTabListItem.
|
2284
|
+
var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab');
|
2232
2285
|
}
|
2233
2286
|
if (nextTab) {
|
2234
2287
|
this.hideTab(currentTab);
|
@@ -2242,7 +2295,7 @@ Tabs.prototype.activatePreviousTab = function () {
|
|
2242
2295
|
var currentTab = this.getCurrentTab();
|
2243
2296
|
var previousTabListItem = currentTab.parentNode.previousElementSibling;
|
2244
2297
|
if (previousTabListItem) {
|
2245
|
-
var previousTab = previousTabListItem.
|
2298
|
+
var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab');
|
2246
2299
|
}
|
2247
2300
|
if (previousTab) {
|
2248
2301
|
this.hideTab(currentTab);
|
@@ -2269,18 +2322,18 @@ Tabs.prototype.hidePanel = function (tab) {
|
|
2269
2322
|
|
2270
2323
|
Tabs.prototype.unhighlightTab = function ($tab) {
|
2271
2324
|
$tab.setAttribute('aria-selected', 'false');
|
2272
|
-
$tab.classList.remove('govuk-
|
2325
|
+
$tab.parentNode.classList.remove('govuk-tabs__list-item--selected');
|
2273
2326
|
$tab.setAttribute('tabindex', '-1');
|
2274
2327
|
};
|
2275
2328
|
|
2276
2329
|
Tabs.prototype.highlightTab = function ($tab) {
|
2277
2330
|
$tab.setAttribute('aria-selected', 'true');
|
2278
|
-
$tab.classList.add('govuk-
|
2331
|
+
$tab.parentNode.classList.add('govuk-tabs__list-item--selected');
|
2279
2332
|
$tab.setAttribute('tabindex', '0');
|
2280
2333
|
};
|
2281
2334
|
|
2282
2335
|
Tabs.prototype.getCurrentTab = function () {
|
2283
|
-
return this.$module.querySelector('.govuk-
|
2336
|
+
return this.$module.querySelector('.govuk-tabs__list-item--selected .govuk-tabs__tab')
|
2284
2337
|
};
|
2285
2338
|
|
2286
2339
|
// this is because IE doesn't always return the actual value but a relative full path
|
@@ -2300,45 +2353,45 @@ function initAll (options) {
|
|
2300
2353
|
// Defaults to the entire document if nothing is set.
|
2301
2354
|
var scope = typeof options.scope !== 'undefined' ? options.scope : document;
|
2302
2355
|
|
2303
|
-
|
2304
|
-
|
2356
|
+
var $buttons = scope.querySelectorAll('[data-module="govuk-button"]');
|
2357
|
+
nodeListForEach($buttons, function ($button) {
|
2358
|
+
new Button($button).init();
|
2359
|
+
});
|
2305
2360
|
|
2306
|
-
|
2307
|
-
var $accordions = scope.querySelectorAll('[data-module="accordion"]');
|
2361
|
+
var $accordions = scope.querySelectorAll('[data-module="govuk-accordion"]');
|
2308
2362
|
nodeListForEach($accordions, function ($accordion) {
|
2309
2363
|
new Accordion($accordion).init();
|
2310
2364
|
});
|
2311
2365
|
|
2312
|
-
|
2313
|
-
var $details = scope.querySelectorAll('details');
|
2366
|
+
var $details = scope.querySelectorAll('[data-module="govuk-details"]');
|
2314
2367
|
nodeListForEach($details, function ($detail) {
|
2315
2368
|
new Details($detail).init();
|
2316
2369
|
});
|
2317
2370
|
|
2318
|
-
var $
|
2319
|
-
nodeListForEach($
|
2371
|
+
var $characterCounts = scope.querySelectorAll('[data-module="govuk-character-count"]');
|
2372
|
+
nodeListForEach($characterCounts, function ($characterCount) {
|
2320
2373
|
new CharacterCount($characterCount).init();
|
2321
2374
|
});
|
2322
2375
|
|
2323
|
-
var $checkboxes = scope.querySelectorAll('[data-module="checkboxes"]');
|
2376
|
+
var $checkboxes = scope.querySelectorAll('[data-module="govuk-checkboxes"]');
|
2324
2377
|
nodeListForEach($checkboxes, function ($checkbox) {
|
2325
2378
|
new Checkboxes($checkbox).init();
|
2326
2379
|
});
|
2327
2380
|
|
2328
2381
|
// Find first error summary module to enhance.
|
2329
|
-
var $errorSummary = scope.querySelector('[data-module="error-summary"]');
|
2382
|
+
var $errorSummary = scope.querySelector('[data-module="govuk-error-summary"]');
|
2330
2383
|
new ErrorSummary($errorSummary).init();
|
2331
2384
|
|
2332
2385
|
// Find first header module to enhance.
|
2333
|
-
var $toggleButton = scope.querySelector('[data-module="header"]');
|
2386
|
+
var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
|
2334
2387
|
new Header($toggleButton).init();
|
2335
2388
|
|
2336
|
-
var $radios = scope.querySelectorAll('[data-module="radios"]');
|
2389
|
+
var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
|
2337
2390
|
nodeListForEach($radios, function ($radio) {
|
2338
2391
|
new Radios($radio).init();
|
2339
2392
|
});
|
2340
2393
|
|
2341
|
-
var $tabs = scope.querySelectorAll('[data-module="tabs"]');
|
2394
|
+
var $tabs = scope.querySelectorAll('[data-module="govuk-tabs"]');
|
2342
2395
|
nodeListForEach($tabs, function ($tabs) {
|
2343
2396
|
new Tabs($tabs).init();
|
2344
2397
|
});
|
@@ -5,6 +5,10 @@
|
|
5
5
|
|
6
6
|
@include govuk-exports("govuk/component/accordion") {
|
7
7
|
|
8
|
+
$govuk-accordion-link-colour: $govuk-link-colour;
|
9
|
+
$govuk-accordion-link-hover-colour: govuk-colour("light-blue");
|
10
|
+
$govuk-accordion-border-width: 3px;
|
11
|
+
|
8
12
|
.govuk-accordion {
|
9
13
|
@include govuk-responsive-margin(6, "bottom");
|
10
14
|
}
|
@@ -15,6 +19,7 @@
|
|
15
19
|
}
|
16
20
|
|
17
21
|
.govuk-accordion__section-header {
|
22
|
+
padding-top: govuk-spacing(3);
|
18
23
|
padding-bottom: govuk-spacing(3);
|
19
24
|
}
|
20
25
|
|
@@ -52,7 +57,6 @@
|
|
52
57
|
// Borders between accordion sections
|
53
58
|
.govuk-accordion__section {
|
54
59
|
padding-top: 0;
|
55
|
-
border-top: 1px solid $govuk-border-colour;
|
56
60
|
}
|
57
61
|
|
58
62
|
// Hide the body of collapsed sections
|
@@ -70,15 +74,23 @@
|
|
70
74
|
// This is styled to look like a link not a button
|
71
75
|
.govuk-accordion__open-all {
|
72
76
|
@include govuk-font($size: 16);
|
73
|
-
|
74
|
-
|
77
|
+
position: relative;
|
78
|
+
z-index: 1;
|
79
|
+
margin: 0;
|
80
|
+
padding: 0;
|
75
81
|
border-width: 0;
|
76
82
|
color: $govuk-link-colour;
|
77
83
|
background: none;
|
78
84
|
cursor: pointer;
|
85
|
+
-webkit-appearance: none;
|
79
86
|
|
80
|
-
|
81
|
-
|
87
|
+
@include govuk-link-common;
|
88
|
+
@include govuk-link-style-default;
|
89
|
+
|
90
|
+
// Remove default button focus outline in Firefox
|
91
|
+
&::-moz-focus-inner {
|
92
|
+
padding: 0;
|
93
|
+
border: 0;
|
82
94
|
}
|
83
95
|
}
|
84
96
|
|
@@ -87,46 +99,42 @@
|
|
87
99
|
position: relative;
|
88
100
|
// Safe area on the right to avoid clashing with icon
|
89
101
|
padding-right: 40px;
|
102
|
+
border-top: 1px solid $govuk-border-colour;
|
103
|
+
color: $govuk-accordion-link-colour;
|
90
104
|
cursor: pointer;
|
91
105
|
}
|
92
106
|
|
93
|
-
//
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
background-color: initial;
|
107
|
+
// For devices that can't hover such as touch devices,
|
108
|
+
// remove hover state as it can be stuck in that state (iOS).
|
109
|
+
@media (hover: none) {
|
110
|
+
.govuk-accordion__section-header:hover {
|
111
|
+
border-top-color: $govuk-accordion-link-colour;
|
112
|
+
box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
|
100
113
|
}
|
101
114
|
}
|
102
115
|
|
103
|
-
// Setting focus styles on header so that summary that is not part of the button is included in focus
|
104
|
-
.govuk-accordion__section-header--focused {
|
105
|
-
// These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus)
|
106
|
-
outline: $govuk-focus-width solid $govuk-focus-colour;
|
107
|
-
outline-offset: 0;
|
108
|
-
}
|
109
|
-
|
110
116
|
// Buttons within the headers don’t need default styling
|
111
117
|
.govuk-accordion__section-button {
|
112
|
-
@include govuk-
|
113
|
-
width: 100%;
|
118
|
+
@include govuk-typography-common;
|
114
119
|
margin-top: 0;
|
115
120
|
margin-bottom: 0;
|
116
121
|
margin-left: 0;
|
117
|
-
padding
|
118
|
-
padding-bottom: 0;
|
119
|
-
padding-left: 0;
|
122
|
+
padding: 0;
|
120
123
|
border-width: 0;
|
121
|
-
|
122
|
-
color: $govuk-link-colour;
|
124
|
+
color: inherit;
|
123
125
|
background: none;
|
124
126
|
text-align: left;
|
125
127
|
cursor: pointer;
|
128
|
+
-webkit-appearance: none;
|
126
129
|
|
127
130
|
&:focus {
|
128
|
-
|
129
|
-
|
131
|
+
@include govuk-focused-text;
|
132
|
+
}
|
133
|
+
|
134
|
+
// Remove default button focus outline in Firefox
|
135
|
+
&::-moz-focus-inner {
|
136
|
+
padding: 0;
|
137
|
+
border: 0;
|
130
138
|
}
|
131
139
|
}
|
132
140
|
|
@@ -140,6 +148,18 @@
|
|
140
148
|
left: 0;
|
141
149
|
}
|
142
150
|
|
151
|
+
.govuk-accordion__section-button:hover:not(:focus) {
|
152
|
+
text-decoration: underline;
|
153
|
+
}
|
154
|
+
|
155
|
+
// For devices that can't hover such as touch devices,
|
156
|
+
// remove hover state as it can be stuck in that state (iOS).
|
157
|
+
@media (hover: none) {
|
158
|
+
.govuk-accordion__section-button:hover {
|
159
|
+
text-decoration: none;
|
160
|
+
}
|
161
|
+
}
|
162
|
+
|
143
163
|
.govuk-accordion__controls {
|
144
164
|
text-align: right;
|
145
165
|
}
|