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.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/app/views/govuk_publishing_components/components/_search.html.erb +2 -0
  3. data/app/views/govuk_publishing_components/components/docs/search.yml +6 -0
  4. data/lib/govuk_publishing_components/version.rb +1 -1
  5. data/node_modules/govuk-frontend/README.md +2 -2
  6. data/node_modules/govuk-frontend/govuk/all.js +48 -40
  7. data/node_modules/govuk-frontend/govuk/components/accordion/README.md +1 -1
  8. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +1 -1
  9. data/node_modules/govuk-frontend/govuk/components/back-link/README.md +1 -1
  10. data/node_modules/govuk-frontend/govuk/components/back-link/_back-link.scss +14 -11
  11. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/README.md +1 -1
  12. data/node_modules/govuk-frontend/govuk/components/button/README.md +1 -1
  13. data/node_modules/govuk-frontend/govuk/components/button/macro-options.json +3 -3
  14. data/node_modules/govuk-frontend/govuk/components/character-count/README.md +1 -1
  15. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +19 -38
  16. data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +1 -1
  17. data/node_modules/govuk-frontend/govuk/components/checkboxes/README.md +1 -1
  18. data/node_modules/govuk-frontend/govuk/components/checkboxes/template.njk +3 -3
  19. data/node_modules/govuk-frontend/govuk/components/date-input/README.md +1 -1
  20. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  21. data/node_modules/govuk-frontend/govuk/components/details/README.md +1 -1
  22. data/node_modules/govuk-frontend/govuk/components/error-message/README.md +1 -1
  23. data/node_modules/govuk-frontend/govuk/components/error-summary/README.md +1 -1
  24. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +29 -2
  25. data/node_modules/govuk-frontend/govuk/components/fieldset/README.md +1 -1
  26. data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +1 -1
  27. data/node_modules/govuk-frontend/govuk/components/file-upload/README.md +1 -1
  28. data/node_modules/govuk-frontend/govuk/components/footer/README.md +1 -1
  29. data/node_modules/govuk-frontend/govuk/components/header/README.md +1 -1
  30. data/node_modules/govuk-frontend/govuk/components/header/_header.scss +1 -0
  31. data/node_modules/govuk-frontend/govuk/components/header/template.njk +1 -1
  32. data/node_modules/govuk-frontend/govuk/components/hint/README.md +1 -1
  33. data/node_modules/govuk-frontend/govuk/components/input/README.md +1 -1
  34. data/node_modules/govuk-frontend/govuk/components/input/_input.scss +3 -0
  35. data/node_modules/govuk-frontend/govuk/components/inset-text/README.md +1 -1
  36. data/node_modules/govuk-frontend/govuk/components/label/README.md +1 -1
  37. data/node_modules/govuk-frontend/govuk/components/panel/README.md +1 -1
  38. data/node_modules/govuk-frontend/govuk/components/phase-banner/README.md +1 -1
  39. data/node_modules/govuk-frontend/govuk/components/radios/README.md +1 -1
  40. data/node_modules/govuk-frontend/govuk/components/radios/template.njk +3 -3
  41. data/node_modules/govuk-frontend/govuk/components/select/README.md +1 -1
  42. data/node_modules/govuk-frontend/govuk/components/select/_select.scss +3 -0
  43. data/node_modules/govuk-frontend/govuk/components/skip-link/README.md +1 -1
  44. data/node_modules/govuk-frontend/govuk/components/summary-list/README.md +1 -1
  45. data/node_modules/govuk-frontend/govuk/components/table/README.md +1 -1
  46. data/node_modules/govuk-frontend/govuk/components/tabs/README.md +1 -1
  47. data/node_modules/govuk-frontend/govuk/components/tag/README.md +1 -1
  48. data/node_modules/govuk-frontend/govuk/components/textarea/README.md +1 -1
  49. data/node_modules/govuk-frontend/govuk/components/warning-text/README.md +1 -1
  50. data/node_modules/govuk-frontend/govuk/components/warning-text/_warning-text.scss +10 -9
  51. data/node_modules/govuk-frontend/govuk/objects/_width-container.scss +23 -5
  52. data/node_modules/govuk-frontend/govuk/overrides/_display.scss +4 -0
  53. data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +1 -1
  54. data/node_modules/govuk-frontend/govuk/template.njk +4 -4
  55. data/node_modules/govuk-frontend/package.json +18 -18
  56. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 60ff27fe702ec5247205b706912d3df2b971f15c3ccda7ec96222b2929a028e5
4
- data.tar.gz: 68485d1017605434db50a0c0488ff8eaa80d867a9509e4ce3b234c24d894a1bf
3
+ metadata.gz: 6f789d318fa52196b8bdd6fb96916895e930b4dfaa1b4d347e790c88a1544b23
4
+ data.tar.gz: 024765e4eddecd938233e986488697ad2c6bdb65a2c323d994a5962e41fe1bf5
5
5
  SHA512:
6
- metadata.gz: 83b69b499d668533e01f55ffcf0c524f0de904bea20c3c1fe669aa484a8ad028548c27b874e44655c636fc43c1e5c807ee8a819ab01697644fbdeae3aeca2679
7
- data.tar.gz: f75e729bf18d87c846e13d2bb9048cd1822dab68838228a9b500d5a57185d99acd71106612c5655a4deaf6c2c384d7fd400c5e121f761a8ad2eba394ae5b6dd1
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"
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = '21.12.0'.freeze
2
+ VERSION = '21.13.0'.freeze
3
3
  end
@@ -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` into your application or referencing the file directly:
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
- if (!$textarea) {
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
- // Generate and reference message
1534
- var boundCreateCountMessage = this.createCountMessage.bind(this);
1535
- this.countMessage = boundCreateCountMessage();
1542
+ // Remove hard limit if set
1543
+ $module.removeAttribute('maxlength');
1536
1544
 
1537
- // If there's a maximum length defined and the count message exists
1538
- if (this.countMessage) {
1539
- // Remove hard limit if set
1540
- $module.removeAttribute('maxlength');
1545
+ // Bind event changes to the textarea
1546
+ var boundChangeEvents = this.bindChangeEvents.bind(this);
1547
+ boundChangeEvents();
1541
1548
 
1542
- // Bind event changes to the textarea
1543
- var boundChangeEvents = this.bindChangeEvents.bind(this);
1544
- boundChangeEvents();
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.countMessage;
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
- return legends[0]
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-default) for details.
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 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)). 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."
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-default) for details.
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
- // Prepend left pointing arrow
35
- &:before {
36
- @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
38
+ // Prepend left pointing arrow
39
+ .govuk-back-link:before {
40
+ @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
37
41
 
38
- content: "";
42
+ content: "";
39
43
 
40
- // Vertically align with the parent element
41
- position: absolute;
44
+ // Vertically align with the parent element
45
+ position: absolute;
42
46
 
43
- top: 0;
44
- bottom: 0;
45
- left: 0;
47
+ top: 0;
48
+ bottom: 0;
49
+ left: 0;
46
50
 
47
- margin: auto;
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-default) for details.
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-default) for details.
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": true,
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": true,
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": true,
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-default) for details.
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
- if (!$textarea) {
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
- // Generate and reference message
1054
- var boundCreateCountMessage = this.createCountMessage.bind(this);
1055
- this.countMessage = boundCreateCountMessage();
1062
+ // Remove hard limit if set
1063
+ $module.removeAttribute('maxlength');
1056
1064
 
1057
- // If there's a maximum length defined and the count message exists
1058
- if (this.countMessage) {
1059
- // Remove hard limit if set
1060
- $module.removeAttribute('maxlength');
1065
+ // Bind event changes to the textarea
1066
+ var boundChangeEvents = this.bindChangeEvents.bind(this);
1067
+ boundChangeEvents();
1061
1068
 
1062
- // Bind event changes to the textarea
1063
- var boundChangeEvents = this.bindChangeEvents.bind(this);
1064
- boundChangeEvents();
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.countMessage;
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 ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes),
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-default) for details.
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-default) for details.
15
+ See [options table](https://design-system.service.gov.uk/components/date-input/#options-date-input-example) for details.
@@ -14,7 +14,7 @@
14
14
  {
15
15
  "name": "items",
16
16
  "type": "array",
17
- "required": true,
17
+ "required": false,
18
18
  "description": "An array of input objects with name, value and classes.",
19
19
  "params": [
20
20
  {
@@ -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-default) for details.
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-default) for details.
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-default) for details.
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
- return legends[0]
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-default) for details.
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. See [checkboxes component](https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/template.njk#L86) for an example."
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-default) for details.
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-default) for details.
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-default) for details.
15
+ See [options table](https://design-system.service.gov.uk/components/header/#options-header-example) for details.
@@ -42,6 +42,7 @@
42
42
  }
43
43
 
44
44
  .govuk-header__logotype {
45
+ display: inline-block;
45
46
  margin-right: govuk-spacing(1);
46
47
  }
47
48
 
@@ -60,7 +60,7 @@
60
60
  </a>
61
61
  {% endif %}
62
62
  {% if params.navigation %}
63
- <button type="button" role="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</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/file-upload/#options-example-default--hint) for details.
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-default) for details.
15
+ See [options table](https://design-system.service.gov.uk/components/text-input/#options-input-example) for details.
@@ -13,6 +13,9 @@
13
13
  box-sizing: border-box;
14
14
  width: 100%;
15
15
  height: 40px;
16
+ @if $govuk-typography-use-rem {
17
+ height: govuk-px-to-rem(40px);
18
+ }
16
19
  margin-top: 0;
17
20
 
18
21
  padding: govuk-spacing(1);
@@ -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-default) for details.
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/file-upload/#options-example-default--label) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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-default) for details.
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: 32px;
25
+ min-width: 29px;
30
26
  min-height: 29px;
31
- margin-top: -20px; // Half the height of the circle (adjusted for NTA)
32
- padding-top: 3px;
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: 1.6em;
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: 50px;
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
- @mixin govuk-width-container {
6
- // Limit the width of the container to the page width
7
- max-width: $govuk-page-width;
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: #{($govuk-page-width + $govuk-gutter * 2)})") {
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: $govuk-page-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;
@@ -15,4 +15,8 @@
15
15
  .govuk-\!-display-block {
16
16
  display: block !important;
17
17
  }
18
+
19
+ .govuk-\!-display-none {
20
+ display: none !important;
21
+ }
18
22
  }
@@ -70,7 +70,7 @@ $_govuk-colour-palette-modern: (
70
70
  "purple": #4c2c92,
71
71
 
72
72
  "black": #0b0c0c,
73
- "dark-grey": #6f777b,
73
+ "dark-grey": #626a6e,
74
74
  "mid-grey": #b1b4b6,
75
75
  "light-grey": #f3f2f1,
76
76
  "white": #ffffff,
@@ -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.2.0",
5
+ "raw": "govuk-frontend@3.4.0",
6
6
  "scope": null,
7
7
  "escapedName": "govuk-frontend",
8
8
  "name": "govuk-frontend",
9
- "rawSpec": "3.2.0",
10
- "spec": "3.2.0",
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.2.0",
16
+ "_from": "govuk-frontend@3.4.0",
17
17
  "_hasShrinkwrap": false,
18
- "_id": "govuk-frontend@3.2.0",
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.2.0_1568198961302_0.8446682726447414"
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.2.0",
33
+ "raw": "govuk-frontend@3.4.0",
34
34
  "scope": null,
35
35
  "escapedName": "govuk-frontend",
36
36
  "name": "govuk-frontend",
37
- "rawSpec": "3.2.0",
38
- "spec": "3.2.0",
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.2.0.tgz",
45
- "_shasum": "0f935bee092929455bf7ed08bba40ab07ea72769",
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.2.0",
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-OtJozAGMEKFu195fNVVrQHUX7+znCkA4cXDKs4lgFlRQOTzN1ogT9010GBARuoTwbeL0VqQ8nerZYjVxH/wafA==",
63
- "shasum": "0f935bee092929455bf7ed08bba40ab07ea72769",
64
- "tarball": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.2.0.tgz",
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": 1024849,
67
- "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdeNEyCRA9TVsSAnZWagAAvgEP/1HO7jFF0rLInQ94X27S\nRAfPVJBV5YE6jlwZfTU7SEXph6KTVCP5WSW9MI1gunkU0EX2KnxT9Pn4Q5/L\nzs9+8dy/R5ejDQKi1ftwaO7MwGOnrOC81TSKPiOL0c3hib3ipfyD5Fqozh/k\nxtHvmQYJ8CwcVE7EK8GbFo9/Qe8MWulQtcd4hsNe+umdd+SyY7I67ysYvV2k\nFD+P5gvwqpPWEyEJ00TjG3YjJAXzE7zcqT6HNVIz3XwC2FH8mmKHatX+n8Mp\nWj/76If933/nG2VvO11uma+T6/buFie/MljkziM2fduc5IUxE/hl1qJegtrq\naWZzAjVU/H+ysrrWfF5rSPTQx866iQUzKd1IQ4Cm68Ativd21JFhEtnJYNhn\n43PF9virumnJoQWCXktOWFpH6/WuPsd2btnLlT3RBRM7Lb5MIsAtloLmE00b\n1qYgaXqnoP41N1HAC/jhXTN9qh33zI4NHX+sJUbjbQLXShQs8V6dq1QoVj2l\nN3MtS8rvIpwaG8Iy2jmy/84dGNh+WguSDv5RipLomWSAY+dGY8Cw4NNpldLm\nG4AUL9bnORIL4tj3zoHoRURI8COe+kDgG5hqpLv44LOFMM8sOrBxEUKqKd4T\nYpEHZ+CFF3bFZOH/80WhKOjy+XJCQIGtL/Lmge2yKNB88rqD66LGweCfjxbt\nXApr\r\n=T15p\r\n-----END PGP SIGNATURE-----\r\n"
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.2.0"
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.12.0
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-19 00:00:00.000000000 Z
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