govuk_publishing_components 21.12.0 → 21.13.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/views/govuk_publishing_components/components/_search.html.erb +2 -0
- data/app/views/govuk_publishing_components/components/docs/search.yml +6 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/README.md +2 -2
- data/node_modules/govuk-frontend/govuk/all.js +48 -40
- data/node_modules/govuk-frontend/govuk/components/accordion/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/back-link/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/back-link/_back-link.scss +14 -11
- data/node_modules/govuk-frontend/govuk/components/breadcrumbs/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/button/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/button/macro-options.json +3 -3
- data/node_modules/govuk-frontend/govuk/components/character-count/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +19 -38
- data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/checkboxes/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/checkboxes/template.njk +3 -3
- data/node_modules/govuk-frontend/govuk/components/date-input/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/details/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/error-message/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/error-summary/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +29 -2
- data/node_modules/govuk-frontend/govuk/components/fieldset/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/file-upload/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/footer/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/header/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/header/_header.scss +1 -0
- data/node_modules/govuk-frontend/govuk/components/header/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/hint/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/input/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/input/_input.scss +3 -0
- data/node_modules/govuk-frontend/govuk/components/inset-text/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/label/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/panel/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/phase-banner/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/radios/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/radios/template.njk +3 -3
- data/node_modules/govuk-frontend/govuk/components/select/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/select/_select.scss +3 -0
- data/node_modules/govuk-frontend/govuk/components/skip-link/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/summary-list/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/table/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/tabs/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/tag/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/textarea/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/warning-text/README.md +1 -1
- data/node_modules/govuk-frontend/govuk/components/warning-text/_warning-text.scss +10 -9
- data/node_modules/govuk-frontend/govuk/objects/_width-container.scss +23 -5
- data/node_modules/govuk-frontend/govuk/overrides/_display.scss +4 -0
- data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +1 -1
- data/node_modules/govuk-frontend/govuk/template.njk +4 -4
- data/node_modules/govuk-frontend/package.json +18 -18
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6f789d318fa52196b8bdd6fb96916895e930b4dfaa1b4d347e790c88a1544b23
|
4
|
+
data.tar.gz: 024765e4eddecd938233e986488697ad2c6bdb65a2c323d994a5962e41fe1bf5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4d049a4ffe5820827413c4a0e93e1026440f38505c039354f026f480bb727c7021b427fee1f5e43e1cc3381d0ce80fcc1b832a81442b6718572004c698c68a0b
|
7
|
+
data.tar.gz: d2557868656cf64c7f010b724672033176213f111e82a783fc690697c5f7231c3af27d61244ae8f747ccfe56d96179d008591e73aed5203af7a8aff91676ac92
|
@@ -9,6 +9,7 @@
|
|
9
9
|
id ||= "search-main-" + SecureRandom.hex(4)
|
10
10
|
label_text ||= "Search GOV.UK"
|
11
11
|
name ||= 'q'
|
12
|
+
aria_controls ||= nil
|
12
13
|
%>
|
13
14
|
|
14
15
|
<div class="gem-c-search <%= class_name %>" data-module="gem-toggle-input-class-on-focus">
|
@@ -18,6 +19,7 @@
|
|
18
19
|
<div class="gem-c-search__item-wrapper">
|
19
20
|
<input type="search" value="<%= value %>"
|
20
21
|
id="<%= id %>" name="<%= name %>" title="Search"
|
22
|
+
aria-controls="<%= aria_controls %>"
|
21
23
|
class="gem-c-search__item gem-c-search__input js-class-toggle">
|
22
24
|
<div class="gem-c-search__item gem-c-search__submit-wrapper">
|
23
25
|
<button type="submit" class="gem-c-search__submit">Search</button>
|
@@ -42,3 +42,9 @@ examples:
|
|
42
42
|
description: To be used if you need to change the default name 'q'
|
43
43
|
data:
|
44
44
|
name: "my_own_fieldname"
|
45
|
+
with_aria_controls_attribute:
|
46
|
+
description: |
|
47
|
+
The aria-controls attribute is a 'relationship attribute' which denotes which elements in a page an interactive element or set of elements has control over and affects.
|
48
|
+
For places like the finders where the page is updated dynamically after value changes to the input.
|
49
|
+
data:
|
50
|
+
aria_controls: "wrapper"
|
@@ -37,7 +37,7 @@ imports) if you want to override GOV.UK Frontend with your own styles.
|
|
37
37
|
To import add the below to your Sass file:
|
38
38
|
|
39
39
|
```scss
|
40
|
-
@import "node_modules/govuk-frontend/all";
|
40
|
+
@import "node_modules/govuk-frontend/govuk/all";
|
41
41
|
```
|
42
42
|
|
43
43
|
[More details on importing styles](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#importing-styles)
|
@@ -48,7 +48,7 @@ Some of the JavaScript included in GOV.UK Frontend improves the usability and
|
|
48
48
|
accessibility of the components. You should make sure that you are importing and
|
49
49
|
initialising Javascript in your application to ensure that all users can use it successfully.
|
50
50
|
|
51
|
-
You can include Javascript for all components either by copying the `all.js` from `node_modules/govuk-frontend
|
51
|
+
You can include Javascript for all components either by copying the `all.js` from `node_modules/govuk-frontend/govuk/` into your application or referencing the file directly:
|
52
52
|
|
53
53
|
```html
|
54
54
|
<script src="<path-to-govuk-frontend-all-file>/all.js"></script>
|
@@ -1497,6 +1497,9 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
|
|
1497
1497
|
function CharacterCount ($module) {
|
1498
1498
|
this.$module = $module;
|
1499
1499
|
this.$textarea = $module.querySelector('.govuk-js-character-count');
|
1500
|
+
if (this.$textarea) {
|
1501
|
+
this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
|
1502
|
+
}
|
1500
1503
|
}
|
1501
1504
|
|
1502
1505
|
CharacterCount.prototype.defaults = {
|
@@ -1509,10 +1512,16 @@ CharacterCount.prototype.init = function () {
|
|
1509
1512
|
// Check for module
|
1510
1513
|
var $module = this.$module;
|
1511
1514
|
var $textarea = this.$textarea;
|
1512
|
-
|
1515
|
+
var $countMessage = this.$countMessage;
|
1516
|
+
|
1517
|
+
if (!$textarea || !$countMessage) {
|
1513
1518
|
return
|
1514
1519
|
}
|
1515
1520
|
|
1521
|
+
// We move count message right after the field
|
1522
|
+
// Kept for backwards compatibility
|
1523
|
+
$textarea.insertAdjacentElement('afterend', $countMessage);
|
1524
|
+
|
1516
1525
|
// Read options set using dataset ('data-' values)
|
1517
1526
|
this.options = this.getDataset($module);
|
1518
1527
|
|
@@ -1530,23 +1539,16 @@ CharacterCount.prototype.init = function () {
|
|
1530
1539
|
return
|
1531
1540
|
}
|
1532
1541
|
|
1533
|
-
//
|
1534
|
-
|
1535
|
-
this.countMessage = boundCreateCountMessage();
|
1542
|
+
// Remove hard limit if set
|
1543
|
+
$module.removeAttribute('maxlength');
|
1536
1544
|
|
1537
|
-
//
|
1538
|
-
|
1539
|
-
|
1540
|
-
$module.removeAttribute('maxlength');
|
1545
|
+
// Bind event changes to the textarea
|
1546
|
+
var boundChangeEvents = this.bindChangeEvents.bind(this);
|
1547
|
+
boundChangeEvents();
|
1541
1548
|
|
1542
|
-
|
1543
|
-
|
1544
|
-
|
1545
|
-
|
1546
|
-
// Update count message
|
1547
|
-
var boundUpdateCountMessage = this.updateCountMessage.bind(this);
|
1548
|
-
boundUpdateCountMessage();
|
1549
|
-
}
|
1549
|
+
// Update count message
|
1550
|
+
var boundUpdateCountMessage = this.updateCountMessage.bind(this);
|
1551
|
+
boundUpdateCountMessage();
|
1550
1552
|
};
|
1551
1553
|
|
1552
1554
|
// Read data attributes
|
@@ -1577,27 +1579,6 @@ CharacterCount.prototype.count = function (text) {
|
|
1577
1579
|
return length
|
1578
1580
|
};
|
1579
1581
|
|
1580
|
-
// Generate count message and bind it to the input
|
1581
|
-
// returns reference to the generated element
|
1582
|
-
CharacterCount.prototype.createCountMessage = function () {
|
1583
|
-
var countElement = this.$textarea;
|
1584
|
-
var elementId = countElement.id;
|
1585
|
-
// Check for existing info count message
|
1586
|
-
var countMessage = document.getElementById(elementId + '-info');
|
1587
|
-
// If there is no existing info count message we add one right after the field
|
1588
|
-
if (elementId && !countMessage) {
|
1589
|
-
countElement.insertAdjacentHTML('afterend', '<span id="' + elementId + '-info" class="govuk-hint govuk-character-count__message" aria-live="polite"></span>');
|
1590
|
-
this.describedBy = countElement.getAttribute('aria-describedby');
|
1591
|
-
this.describedByInfo = this.describedBy + ' ' + elementId + '-info';
|
1592
|
-
countElement.setAttribute('aria-describedby', this.describedByInfo);
|
1593
|
-
countMessage = document.getElementById(elementId + '-info');
|
1594
|
-
} else {
|
1595
|
-
// If there is an existing info count message we move it right after the field
|
1596
|
-
countElement.insertAdjacentElement('afterend', countMessage);
|
1597
|
-
}
|
1598
|
-
return countMessage
|
1599
|
-
};
|
1600
|
-
|
1601
1582
|
// Bind input propertychange to the elements and update based on the change
|
1602
1583
|
CharacterCount.prototype.bindChangeEvents = function () {
|
1603
1584
|
var $textarea = this.$textarea;
|
@@ -1624,7 +1605,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
|
|
1624
1605
|
CharacterCount.prototype.updateCountMessage = function () {
|
1625
1606
|
var countElement = this.$textarea;
|
1626
1607
|
var options = this.options;
|
1627
|
-
var countMessage = this
|
1608
|
+
var countMessage = this.$countMessage;
|
1628
1609
|
|
1629
1610
|
// Determine the remaining number of characters/words
|
1630
1611
|
var currentLength = this.count(countElement.value);
|
@@ -1873,7 +1854,9 @@ ErrorSummary.prototype.getFragmentFromUrl = function (url) {
|
|
1873
1854
|
*
|
1874
1855
|
* Returns the first element that exists from this list:
|
1875
1856
|
*
|
1876
|
-
* - The `<legend>` associated with the closest `<fieldset>` ancestor
|
1857
|
+
* - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
|
1858
|
+
* as the top of it is no more than half a viewport height away from the
|
1859
|
+
* bottom of the input
|
1877
1860
|
* - The first `<label>` that is associated with the input using for="inputId"
|
1878
1861
|
* - The closest parent `<label>`
|
1879
1862
|
*
|
@@ -1888,7 +1871,32 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
|
|
1888
1871
|
var legends = $fieldset.getElementsByTagName('legend');
|
1889
1872
|
|
1890
1873
|
if (legends.length) {
|
1891
|
-
|
1874
|
+
var $candidateLegend = legends[0];
|
1875
|
+
|
1876
|
+
// If the input type is radio or checkbox, always use the legend if there
|
1877
|
+
// is one.
|
1878
|
+
if ($input.type === 'checkbox' || $input.type === 'radio') {
|
1879
|
+
return $candidateLegend
|
1880
|
+
}
|
1881
|
+
|
1882
|
+
// For other input types, only scroll to the fieldset’s legend (instead of
|
1883
|
+
// the label associated with the input) if the input would end up in the
|
1884
|
+
// top half of the screen.
|
1885
|
+
//
|
1886
|
+
// This should avoid situations where the input either ends up off the
|
1887
|
+
// screen, or obscured by a software keyboard.
|
1888
|
+
var legendTop = $candidateLegend.getBoundingClientRect().top;
|
1889
|
+
var inputRect = $input.getBoundingClientRect();
|
1890
|
+
|
1891
|
+
// If the browser doesn't support Element.getBoundingClientRect().height
|
1892
|
+
// or window.innerHeight (like IE8), bail and just link to the label.
|
1893
|
+
if (inputRect.height && window.innerHeight) {
|
1894
|
+
var inputBottom = inputRect.top + inputRect.height;
|
1895
|
+
|
1896
|
+
if (inputBottom - legendTop < window.innerHeight / 2) {
|
1897
|
+
return $candidateLegend
|
1898
|
+
}
|
1899
|
+
}
|
1892
1900
|
}
|
1893
1901
|
}
|
1894
1902
|
|
@@ -12,4 +12,4 @@ Find out when to use the details component in your service in the [GOV.UK Design
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/accordion/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/accordion/#options-accordion-example) for details.
|
@@ -3,7 +3,7 @@
|
|
3
3
|
"name": "id",
|
4
4
|
"type": "string",
|
5
5
|
"required": true,
|
6
|
-
"description": "Must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`
|
6
|
+
"description": "Must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
|
7
7
|
},
|
8
8
|
{
|
9
9
|
"name": "headingLevel",
|
@@ -12,4 +12,4 @@ Find out when to use the back link component in your service in the [GOV.UK Desi
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/back-link/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/back-link/#options-back-link-example) for details.
|
@@ -17,7 +17,10 @@
|
|
17
17
|
|
18
18
|
// Allow space for the arrow
|
19
19
|
padding-left: 14px;
|
20
|
+
}
|
20
21
|
|
22
|
+
// Only add a custom underline if the component is linkable
|
23
|
+
.govuk-back-link[href] {
|
21
24
|
// Use border-bottom rather than text-decoration so that the arrow is
|
22
25
|
// underlined as well.
|
23
26
|
border-bottom: 1px solid govuk-colour("black");
|
@@ -30,22 +33,22 @@
|
|
30
33
|
&:focus {
|
31
34
|
border-bottom-color: transparent;
|
32
35
|
}
|
36
|
+
}
|
33
37
|
|
34
|
-
|
35
|
-
|
36
|
-
|
38
|
+
// Prepend left pointing arrow
|
39
|
+
.govuk-back-link:before {
|
40
|
+
@include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
|
37
41
|
|
38
|
-
|
42
|
+
content: "";
|
39
43
|
|
40
|
-
|
41
|
-
|
44
|
+
// Vertically align with the parent element
|
45
|
+
position: absolute;
|
42
46
|
|
43
|
-
|
44
|
-
|
45
|
-
|
47
|
+
top: 0;
|
48
|
+
bottom: 0;
|
49
|
+
left: 0;
|
46
50
|
|
47
|
-
|
48
|
-
}
|
51
|
+
margin: auto;
|
49
52
|
}
|
50
53
|
|
51
54
|
@if $govuk-use-legacy-font {
|
@@ -12,4 +12,4 @@ Find out when to use the breadcrumbs component in your service in the [GOV.UK De
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/breadcrumbs/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/breadcrumbs/#options-breadcrumbs-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the button component in your service in the [GOV.UK Design
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/button/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/button/#options-button-example) for details.
|
@@ -20,19 +20,19 @@
|
|
20
20
|
{
|
21
21
|
"name": "name",
|
22
22
|
"type": "string",
|
23
|
-
"required":
|
23
|
+
"required": false,
|
24
24
|
"description": "Name for the `input` or `button`. This has no effect on `a` elements."
|
25
25
|
},
|
26
26
|
{
|
27
27
|
"name": "type",
|
28
28
|
"type": "string",
|
29
|
-
"required":
|
29
|
+
"required": false,
|
30
30
|
"description": "Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements."
|
31
31
|
},
|
32
32
|
{
|
33
33
|
"name": "value",
|
34
34
|
"type": "string",
|
35
|
-
"required":
|
35
|
+
"required": false,
|
36
36
|
"description": "Value for the `button` tag. This has no effect on `a` or `input` elements."
|
37
37
|
},
|
38
38
|
{
|
@@ -12,4 +12,4 @@ Find out when to use the character count component in your service in the [GOV.U
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/character-count/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/character-count/#options-character-count-example) for details.
|
@@ -1017,6 +1017,9 @@ if (detect) return
|
|
1017
1017
|
function CharacterCount ($module) {
|
1018
1018
|
this.$module = $module;
|
1019
1019
|
this.$textarea = $module.querySelector('.govuk-js-character-count');
|
1020
|
+
if (this.$textarea) {
|
1021
|
+
this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
|
1022
|
+
}
|
1020
1023
|
}
|
1021
1024
|
|
1022
1025
|
CharacterCount.prototype.defaults = {
|
@@ -1029,10 +1032,16 @@ CharacterCount.prototype.init = function () {
|
|
1029
1032
|
// Check for module
|
1030
1033
|
var $module = this.$module;
|
1031
1034
|
var $textarea = this.$textarea;
|
1032
|
-
|
1035
|
+
var $countMessage = this.$countMessage;
|
1036
|
+
|
1037
|
+
if (!$textarea || !$countMessage) {
|
1033
1038
|
return
|
1034
1039
|
}
|
1035
1040
|
|
1041
|
+
// We move count message right after the field
|
1042
|
+
// Kept for backwards compatibility
|
1043
|
+
$textarea.insertAdjacentElement('afterend', $countMessage);
|
1044
|
+
|
1036
1045
|
// Read options set using dataset ('data-' values)
|
1037
1046
|
this.options = this.getDataset($module);
|
1038
1047
|
|
@@ -1050,23 +1059,16 @@ CharacterCount.prototype.init = function () {
|
|
1050
1059
|
return
|
1051
1060
|
}
|
1052
1061
|
|
1053
|
-
//
|
1054
|
-
|
1055
|
-
this.countMessage = boundCreateCountMessage();
|
1062
|
+
// Remove hard limit if set
|
1063
|
+
$module.removeAttribute('maxlength');
|
1056
1064
|
|
1057
|
-
//
|
1058
|
-
|
1059
|
-
|
1060
|
-
$module.removeAttribute('maxlength');
|
1065
|
+
// Bind event changes to the textarea
|
1066
|
+
var boundChangeEvents = this.bindChangeEvents.bind(this);
|
1067
|
+
boundChangeEvents();
|
1061
1068
|
|
1062
|
-
|
1063
|
-
|
1064
|
-
|
1065
|
-
|
1066
|
-
// Update count message
|
1067
|
-
var boundUpdateCountMessage = this.updateCountMessage.bind(this);
|
1068
|
-
boundUpdateCountMessage();
|
1069
|
-
}
|
1069
|
+
// Update count message
|
1070
|
+
var boundUpdateCountMessage = this.updateCountMessage.bind(this);
|
1071
|
+
boundUpdateCountMessage();
|
1070
1072
|
};
|
1071
1073
|
|
1072
1074
|
// Read data attributes
|
@@ -1097,27 +1099,6 @@ CharacterCount.prototype.count = function (text) {
|
|
1097
1099
|
return length
|
1098
1100
|
};
|
1099
1101
|
|
1100
|
-
// Generate count message and bind it to the input
|
1101
|
-
// returns reference to the generated element
|
1102
|
-
CharacterCount.prototype.createCountMessage = function () {
|
1103
|
-
var countElement = this.$textarea;
|
1104
|
-
var elementId = countElement.id;
|
1105
|
-
// Check for existing info count message
|
1106
|
-
var countMessage = document.getElementById(elementId + '-info');
|
1107
|
-
// If there is no existing info count message we add one right after the field
|
1108
|
-
if (elementId && !countMessage) {
|
1109
|
-
countElement.insertAdjacentHTML('afterend', '<span id="' + elementId + '-info" class="govuk-hint govuk-character-count__message" aria-live="polite"></span>');
|
1110
|
-
this.describedBy = countElement.getAttribute('aria-describedby');
|
1111
|
-
this.describedByInfo = this.describedBy + ' ' + elementId + '-info';
|
1112
|
-
countElement.setAttribute('aria-describedby', this.describedByInfo);
|
1113
|
-
countMessage = document.getElementById(elementId + '-info');
|
1114
|
-
} else {
|
1115
|
-
// If there is an existing info count message we move it right after the field
|
1116
|
-
countElement.insertAdjacentElement('afterend', countMessage);
|
1117
|
-
}
|
1118
|
-
return countMessage
|
1119
|
-
};
|
1120
|
-
|
1121
1102
|
// Bind input propertychange to the elements and update based on the change
|
1122
1103
|
CharacterCount.prototype.bindChangeEvents = function () {
|
1123
1104
|
var $textarea = this.$textarea;
|
@@ -1144,7 +1125,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
|
|
1144
1125
|
CharacterCount.prototype.updateCountMessage = function () {
|
1145
1126
|
var countElement = this.$textarea;
|
1146
1127
|
var options = this.options;
|
1147
|
-
var countMessage = this
|
1128
|
+
var countMessage = this.$countMessage;
|
1148
1129
|
|
1149
1130
|
// Determine the remaining number of characters/words
|
1150
1131
|
var currentLength = this.count(countElement.value);
|
@@ -11,7 +11,7 @@
|
|
11
11
|
rows: params.rows,
|
12
12
|
value: params.value,
|
13
13
|
formGroup: params.formGroup,
|
14
|
-
classes: 'govuk-js-character-count
|
14
|
+
classes: 'govuk-js-character-count' + (' govuk-textarea--error' if params.errorMessage) + (' ' + params.classes if params.classes),
|
15
15
|
label: {
|
16
16
|
html: params.label.html,
|
17
17
|
text: params.label.text,
|
@@ -12,4 +12,4 @@ Find out when to use the checkboxes component in your service in the [GOV.UK Des
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/checkboxes/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/checkboxes/#options-checkboxes-example) for details.
|
@@ -16,7 +16,7 @@
|
|
16
16
|
|
17
17
|
{% set isConditional = false %}
|
18
18
|
{% for item in params.items %}
|
19
|
-
{% if item.conditional %}
|
19
|
+
{% if item.conditional.html %}
|
20
20
|
{% set isConditional = true %}
|
21
21
|
{% endif %}
|
22
22
|
{% endfor %}
|
@@ -75,7 +75,7 @@
|
|
75
75
|
<input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
|
76
76
|
{{-" checked" if item.checked }}
|
77
77
|
{{-" disabled" if item.disabled }}
|
78
|
-
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
78
|
+
{%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
79
79
|
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
80
80
|
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
81
81
|
{{ govukLabel({
|
@@ -95,7 +95,7 @@
|
|
95
95
|
}) | indent(6) | trim }}
|
96
96
|
{% endif %}
|
97
97
|
</div>
|
98
|
-
{% if item.conditional %}
|
98
|
+
{% if item.conditional.html %}
|
99
99
|
<div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
|
100
100
|
{{ item.conditional.html | safe }}
|
101
101
|
</div>
|
@@ -12,4 +12,4 @@ Find out when to use the date input component in your service in the [GOV.UK Des
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/date-input/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/date-input/#options-date-input-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the details component in your service in the [GOV.UK Design
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/details/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/details/#options-details-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the error message component in your service in the [GOV.UK
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/error-message/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/error-message/#options-error-message-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the error summary component in your service in the [GOV.UK
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/error-summary/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/error-summary/#options-error-summary-example) for details.
|
@@ -798,7 +798,9 @@ ErrorSummary.prototype.getFragmentFromUrl = function (url) {
|
|
798
798
|
*
|
799
799
|
* Returns the first element that exists from this list:
|
800
800
|
*
|
801
|
-
* - The `<legend>` associated with the closest `<fieldset>` ancestor
|
801
|
+
* - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
|
802
|
+
* as the top of it is no more than half a viewport height away from the
|
803
|
+
* bottom of the input
|
802
804
|
* - The first `<label>` that is associated with the input using for="inputId"
|
803
805
|
* - The closest parent `<label>`
|
804
806
|
*
|
@@ -813,7 +815,32 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
|
|
813
815
|
var legends = $fieldset.getElementsByTagName('legend');
|
814
816
|
|
815
817
|
if (legends.length) {
|
816
|
-
|
818
|
+
var $candidateLegend = legends[0];
|
819
|
+
|
820
|
+
// If the input type is radio or checkbox, always use the legend if there
|
821
|
+
// is one.
|
822
|
+
if ($input.type === 'checkbox' || $input.type === 'radio') {
|
823
|
+
return $candidateLegend
|
824
|
+
}
|
825
|
+
|
826
|
+
// For other input types, only scroll to the fieldset’s legend (instead of
|
827
|
+
// the label associated with the input) if the input would end up in the
|
828
|
+
// top half of the screen.
|
829
|
+
//
|
830
|
+
// This should avoid situations where the input either ends up off the
|
831
|
+
// screen, or obscured by a software keyboard.
|
832
|
+
var legendTop = $candidateLegend.getBoundingClientRect().top;
|
833
|
+
var inputRect = $input.getBoundingClientRect();
|
834
|
+
|
835
|
+
// If the browser doesn't support Element.getBoundingClientRect().height
|
836
|
+
// or window.innerHeight (like IE8), bail and just link to the label.
|
837
|
+
if (inputRect.height && window.innerHeight) {
|
838
|
+
var inputBottom = inputRect.top + inputRect.height;
|
839
|
+
|
840
|
+
if (inputBottom - legendTop < window.innerHeight / 2) {
|
841
|
+
return $candidateLegend
|
842
|
+
}
|
843
|
+
}
|
817
844
|
}
|
818
845
|
}
|
819
846
|
|
@@ -12,4 +12,4 @@ Find out when to use the fieldset component in your service in the [GOV.UK Desig
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/fieldset/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/fieldset/#options-fieldset-example) for details.
|
@@ -59,6 +59,6 @@
|
|
59
59
|
"name": "caller",
|
60
60
|
"type": "nunjucks-block",
|
61
61
|
"required": false,
|
62
|
-
"description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block.
|
62
|
+
"description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block."
|
63
63
|
}
|
64
64
|
]
|
@@ -12,4 +12,4 @@ Find out when to use the file upload component in your service in the [GOV.UK De
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/file-upload/#options-file-upload-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the footer component in your service in the [GOV.UK Design
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/footer/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/footer/#options-footer-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the header component in your service in the [GOV.UK Design
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/header/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/header/#options-header-example) for details.
|
@@ -60,7 +60,7 @@
|
|
60
60
|
</a>
|
61
61
|
{% endif %}
|
62
62
|
{% if params.navigation %}
|
63
|
-
<button type="button"
|
63
|
+
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
|
64
64
|
<nav>
|
65
65
|
<ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
|
66
66
|
{% for item in params.navigation %}
|
@@ -12,4 +12,4 @@ The label component is used in other input components, to see an example of it i
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/text-input/#options-text-input-example--hint) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the input component in your service in the [GOV.UK Design S
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/text-input/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/text-input/#options-input-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the inset text component in your service in the [GOV.UK Des
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/inset-text/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/inset-text/#options-inset-text-example) for details.
|
@@ -12,4 +12,4 @@ The label component is used in other input components, to see an example of it i
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/text-input/#options-text-input-example--label) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the panel component in your service in the [GOV.UK Design S
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/panel/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/panel/#options-panel-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the phase banner component in your service in the [GOV.UK D
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/phase-banner/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/phase-banner/#options-phase-banner-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the radios component in your service in the [GOV.UK Design
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/radios/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/radios/#options-radios-example) for details.
|
@@ -13,7 +13,7 @@
|
|
13
13
|
|
14
14
|
{% set isConditional = false %}
|
15
15
|
{% for item in params.items %}
|
16
|
-
{% if item.conditional %}
|
16
|
+
{% if item.conditional.html %}
|
17
17
|
{% set isConditional = true %}
|
18
18
|
{% endif %}
|
19
19
|
{% endfor %}
|
@@ -69,7 +69,7 @@
|
|
69
69
|
<input class="govuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
|
70
70
|
{{-" checked" if item.checked }}
|
71
71
|
{{-" disabled" if item.disabled }}
|
72
|
-
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
72
|
+
{%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
73
73
|
{%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
|
74
74
|
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
75
75
|
{{ govukLabel({
|
@@ -89,7 +89,7 @@
|
|
89
89
|
}) | indent(6) | trim }}
|
90
90
|
{% endif %}
|
91
91
|
</div>
|
92
|
-
{% if item.conditional %}
|
92
|
+
{% if item.conditional.html %}
|
93
93
|
<div class="govuk-radios__conditional{% if not item.checked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
|
94
94
|
{{ item.conditional.html | safe }}
|
95
95
|
</div>
|
@@ -12,4 +12,4 @@ Find out when to use the select component in your service in the [GOV.UK Design
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/select/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/select/#options-select-example) for details.
|
@@ -13,6 +13,9 @@
|
|
13
13
|
box-sizing: border-box; // should this be global?
|
14
14
|
max-width: 100%;
|
15
15
|
height: 40px;
|
16
|
+
@if $govuk-typography-use-rem {
|
17
|
+
height: govuk-px-to-rem(40px);
|
18
|
+
}
|
16
19
|
padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
|
17
20
|
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
|
18
21
|
|
@@ -12,4 +12,4 @@ Find out when to use the skip link component in your service in the [GOV.UK Desi
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/skip-link/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/skip-link/#options-skip-link-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the details component in your service in the [GOV.UK Design
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/summary-list/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/summary-list/#options-summary-list-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the table component in your service in the [GOV.UK Design S
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/table/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/table/#options-table-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/tabs/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/tabs/#options-tabs-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the tag component in your service in the [GOV.UK Design Sys
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/tag/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/tag/#options-tag-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the textarea component in your service in the [GOV.UK Desig
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/textarea/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/textarea/#options-textarea-example) for details.
|
@@ -12,4 +12,4 @@ Find out when to use the warning text component in your service in the [GOV.UK D
|
|
12
12
|
|
13
13
|
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
|
14
14
|
|
15
|
-
See [options table](https://design-system.service.gov.uk/components/warning-text/#options-example
|
15
|
+
See [options table](https://design-system.service.gov.uk/components/warning-text/#options-warning-text-example) for details.
|
@@ -5,9 +5,6 @@
|
|
5
5
|
@include govuk-exports("govuk/component/warning-text") {
|
6
6
|
|
7
7
|
.govuk-warning-text {
|
8
|
-
@include govuk-font($size: 19);
|
9
|
-
@include govuk-text-colour;
|
10
|
-
|
11
8
|
position: relative;
|
12
9
|
@include govuk-responsive-margin(6, "bottom");
|
13
10
|
padding: govuk-spacing(2) 0;
|
@@ -23,13 +20,15 @@
|
|
23
20
|
display: inline-block;
|
24
21
|
|
25
22
|
position: absolute;
|
26
|
-
top: 50%;
|
27
23
|
left: 0;
|
28
24
|
|
29
|
-
min-width:
|
25
|
+
min-width: 29px;
|
30
26
|
min-height: 29px;
|
31
|
-
margin-top: -
|
32
|
-
|
27
|
+
margin-top: -7px;
|
28
|
+
|
29
|
+
@include govuk-media-query($from: tablet) {
|
30
|
+
margin-top: -5px;
|
31
|
+
}
|
33
32
|
|
34
33
|
// When a user customises their colours the background colour will often be removed.
|
35
34
|
// Adding a border to the component keeps it's shape as a circle.
|
@@ -39,7 +38,7 @@
|
|
39
38
|
color: govuk-colour("white");
|
40
39
|
background: govuk-colour("black");
|
41
40
|
|
42
|
-
font-size:
|
41
|
+
font-size: 30px;
|
43
42
|
line-height: 29px;
|
44
43
|
|
45
44
|
text-align: center;
|
@@ -53,7 +52,9 @@
|
|
53
52
|
}
|
54
53
|
|
55
54
|
.govuk-warning-text__text {
|
55
|
+
@include govuk-font($size: 19, $weight: bold);
|
56
|
+
@include govuk-text-colour;
|
56
57
|
display: block;
|
57
|
-
padding-left:
|
58
|
+
padding-left: 45px;
|
58
59
|
}
|
59
60
|
}
|
@@ -2,9 +2,27 @@
|
|
2
2
|
@import "../tools/all";
|
3
3
|
@import "../helpers/all";
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
|
5
|
+
////
|
6
|
+
/// @group objects
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Width container mixin
|
10
|
+
///
|
11
|
+
/// Used to create page width and custom width container classes.
|
12
|
+
///
|
13
|
+
/// @param {String} $width [$govuk-page-width] - Width in pixels
|
14
|
+
///
|
15
|
+
/// @example scss - Creating a 1200px wide container class
|
16
|
+
/// .app-width-container--wide {
|
17
|
+
/// @include govuk-width-container(1200px);
|
18
|
+
/// }
|
19
|
+
///
|
20
|
+
/// @access public
|
21
|
+
|
22
|
+
@mixin govuk-width-container($width: $govuk-page-width) {
|
23
|
+
|
24
|
+
// By default, limit the width of the container to the page width
|
25
|
+
max-width: $width;
|
8
26
|
|
9
27
|
// On mobile, add half width gutters
|
10
28
|
margin: 0 $govuk-gutter-half;
|
@@ -38,7 +56,7 @@
|
|
38
56
|
|
39
57
|
// As soon as the viewport is greater than the width of the page plus the
|
40
58
|
// gutters, just centre the content instead of adding gutters.
|
41
|
-
@include govuk-media-query($and: "(min-width: #{($
|
59
|
+
@include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
|
42
60
|
margin: 0 auto;
|
43
61
|
|
44
62
|
// Since a safe area may have previously been set above,
|
@@ -49,7 +67,7 @@
|
|
49
67
|
}
|
50
68
|
|
51
69
|
@include govuk-if-ie8 {
|
52
|
-
width: $
|
70
|
+
width: $width;
|
53
71
|
// Since media queries are not supported in IE8,
|
54
72
|
// we need to duplicate this margin that centers the page.
|
55
73
|
margin: 0 auto;
|
@@ -7,7 +7,7 @@
|
|
7
7
|
<html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses }}">
|
8
8
|
<head>
|
9
9
|
<meta charset="utf-8" />
|
10
|
-
<title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
|
10
|
+
<title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
|
11
11
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
12
12
|
<meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" /> {# Hardcoded value of $govuk-black #}
|
13
13
|
{# Ensure that older IE versions always render with the correct rendering engine #}
|
@@ -27,7 +27,7 @@
|
|
27
27
|
{# image url needs to be absolute e.g. http://wwww.domain.com/.../govuk-opengraph-image.png #}
|
28
28
|
<meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png">
|
29
29
|
</head>
|
30
|
-
<body class="govuk-template__body {{ bodyClasses }}">
|
30
|
+
<body class="govuk-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
|
31
31
|
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
|
32
32
|
{% block bodyStart %}{% endblock %}
|
33
33
|
|
@@ -43,9 +43,9 @@
|
|
43
43
|
{% endblock %}
|
44
44
|
|
45
45
|
{% block main %}
|
46
|
-
<div class="govuk-width-container">
|
46
|
+
<div class="govuk-width-container {{ containerClasses }}">
|
47
47
|
{% block beforeContent %}{% endblock %}
|
48
|
-
<main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main">
|
48
|
+
<main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
|
49
49
|
{% block content %}{% endblock %}
|
50
50
|
</main>
|
51
51
|
</div>
|
@@ -2,26 +2,26 @@
|
|
2
2
|
"_args": [
|
3
3
|
[
|
4
4
|
{
|
5
|
-
"raw": "govuk-frontend@3.
|
5
|
+
"raw": "govuk-frontend@3.4.0",
|
6
6
|
"scope": null,
|
7
7
|
"escapedName": "govuk-frontend",
|
8
8
|
"name": "govuk-frontend",
|
9
|
-
"rawSpec": "3.
|
10
|
-
"spec": "3.
|
9
|
+
"rawSpec": "3.4.0",
|
10
|
+
"spec": "3.4.0",
|
11
11
|
"type": "version"
|
12
12
|
},
|
13
13
|
"/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ"
|
14
14
|
]
|
15
15
|
],
|
16
|
-
"_from": "govuk-frontend@3.
|
16
|
+
"_from": "govuk-frontend@3.4.0",
|
17
17
|
"_hasShrinkwrap": false,
|
18
|
-
"_id": "govuk-frontend@3.
|
18
|
+
"_id": "govuk-frontend@3.4.0",
|
19
19
|
"_inCache": true,
|
20
20
|
"_location": "/govuk-frontend",
|
21
21
|
"_nodeVersion": "10.15.1",
|
22
22
|
"_npmOperationalInternal": {
|
23
23
|
"host": "s3://npm-registry-packages",
|
24
|
-
"tmp": "tmp/govuk-frontend_3.
|
24
|
+
"tmp": "tmp/govuk-frontend_3.4.0_1574162407134_0.4897900579083776"
|
25
25
|
},
|
26
26
|
"_npmUser": {
|
27
27
|
"name": "govuk-patterns-and-tools",
|
@@ -30,21 +30,21 @@
|
|
30
30
|
"_npmVersion": "6.4.1",
|
31
31
|
"_phantomChildren": {},
|
32
32
|
"_requested": {
|
33
|
-
"raw": "govuk-frontend@3.
|
33
|
+
"raw": "govuk-frontend@3.4.0",
|
34
34
|
"scope": null,
|
35
35
|
"escapedName": "govuk-frontend",
|
36
36
|
"name": "govuk-frontend",
|
37
|
-
"rawSpec": "3.
|
38
|
-
"spec": "3.
|
37
|
+
"rawSpec": "3.4.0",
|
38
|
+
"spec": "3.4.0",
|
39
39
|
"type": "version"
|
40
40
|
},
|
41
41
|
"_requiredBy": [
|
42
42
|
"/"
|
43
43
|
],
|
44
|
-
"_resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.
|
45
|
-
"_shasum": "
|
44
|
+
"_resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.4.0.tgz",
|
45
|
+
"_shasum": "f6694245fbec2dd476d8e161c36be2a4ea785ce3",
|
46
46
|
"_shrinkwrap": null,
|
47
|
-
"_spec": "govuk-frontend@3.
|
47
|
+
"_spec": "govuk-frontend@3.4.0",
|
48
48
|
"_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
|
49
49
|
"author": {
|
50
50
|
"name": "GOV.UK Design System Team",
|
@@ -59,12 +59,12 @@
|
|
59
59
|
"devDependencies": {},
|
60
60
|
"directories": {},
|
61
61
|
"dist": {
|
62
|
-
"integrity": "sha512-
|
63
|
-
"shasum": "
|
64
|
-
"tarball": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.
|
62
|
+
"integrity": "sha512-rmYPtcCtWgz92QBejYwOnfSxbPGYfvSruLwB4CBk/yJtySHRY0whG1e2/iFRRSj0pMx1Bu+zh/IqCTo+84hbFw==",
|
63
|
+
"shasum": "f6694245fbec2dd476d8e161c36be2a4ea785ce3",
|
64
|
+
"tarball": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.4.0.tgz",
|
65
65
|
"fileCount": 247,
|
66
|
-
"unpackedSize":
|
67
|
-
"npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\
|
66
|
+
"unpackedSize": 1026035,
|
67
|
+
"npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd08/nCRA9TVsSAnZWagAA5mMP/i7X9v6HlLJFyBMcd7cC\nXy/CJT8iaevXeyOgV/2OqtjUeu7r05CVGvUfsTx2Z4lvrpbwfiODnogGdK1T\n0DMpYytrDsTmio1A//jryjpeAvjtZKaq+CE8oy3zvtzIfGnOa2UEIWvwNbvz\nmo+aKJy+L19j+y1O3187Cyy6GJZJ7/AQxzDt+E/gWDroZH9I4KJ/ayR63thC\n4VPObAz/37X0/lhRtJzKKcWY2HMwOJV6BSncZu5vCf66De31T+1JO6TciZwl\nDfpgVPl853XmI4e0tsvrxWfQVUZVW4rRPu6o6SP50obrQkWFbbxMUVFqqrfD\np5I2WFvBkUakxFJQaslPNrhGXFumDNF8Sti8R0+IboslhTIiY3FsJHAZMjXW\nZnfq3VbX1EHFE3JLc8TNgchlKCg/K8V02Nweq4kp6dAZ+7IhdtFKyEnGlSBd\nZqcExaJFluZFcngnzQSk6J/clJXi1fjS54GDGWfTkQP3kEBCNK5OiuLe7a2e\nCk5sNyIwv+vcKXma94CEP7bW7eTeL2nbLNUqQsTLQapodwxeB0J8KRwllnm/\nDkJncvRPSW8p1I71czvH8yc1ul2VoZtF5kW0mRAdAkFVQLP02IqEqOSeN9K+\nEyivhhPla6fzW1xt25WCr4+qi5NzrPzyoQHn1MYW9Jdxo6RP0q7EQmWKnAi5\nNJOq\r\n=c6pS\r\n-----END PGP SIGNATURE-----\r\n"
|
68
68
|
},
|
69
69
|
"engines": {
|
70
70
|
"node": ">= 4.2.0"
|
@@ -92,5 +92,5 @@
|
|
92
92
|
"url": "git+https://github.com/alphagov/govuk-frontend.git"
|
93
93
|
},
|
94
94
|
"sass": "govuk/all.scss",
|
95
|
-
"version": "3.
|
95
|
+
"version": "3.4.0"
|
96
96
|
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: govuk_publishing_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 21.
|
4
|
+
version: 21.13.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GOV.UK Dev
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2019-11-
|
11
|
+
date: 2019-11-20 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: gds-api-adapters
|