govuk_publishing_components 20.5.1 → 20.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +1 -7
  3. data/lib/govuk_publishing_components/version.rb +1 -1
  4. data/node_modules/govuk-frontend/govuk/all.js +56 -63
  5. data/node_modules/govuk-frontend/govuk/components/accordion/README.md +0 -2
  6. data/node_modules/govuk-frontend/govuk/components/accordion/template.njk +18 -16
  7. data/node_modules/govuk-frontend/govuk/components/button/_button.scss +11 -0
  8. data/node_modules/govuk-frontend/govuk/components/button/macro-options.json +6 -0
  9. data/node_modules/govuk-frontend/govuk/components/button/template.njk +3 -3
  10. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +14 -0
  11. data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +1 -0
  12. data/node_modules/govuk-frontend/govuk/components/checkboxes/template.njk +47 -45
  13. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +2 -3
  14. data/node_modules/govuk-frontend/govuk/components/details/details.js +56 -63
  15. data/node_modules/govuk-frontend/govuk/components/fieldset/_fieldset.scss +0 -2
  16. data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +6 -0
  17. data/node_modules/govuk-frontend/govuk/components/fieldset/template.njk +1 -0
  18. data/node_modules/govuk-frontend/govuk/components/footer/_footer.scss +4 -2
  19. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +6 -0
  20. data/node_modules/govuk-frontend/govuk/components/input/template.njk +1 -0
  21. data/node_modules/govuk-frontend/govuk/components/radios/template.njk +48 -46
  22. data/node_modules/govuk-frontend/govuk/components/select/template.njk +6 -4
  23. data/node_modules/govuk-frontend/govuk/components/summary-list/macro-options.json +7 -1
  24. data/node_modules/govuk-frontend/govuk/components/summary-list/template.njk +27 -25
  25. data/node_modules/govuk-frontend/govuk/components/table/template.njk +20 -18
  26. data/node_modules/govuk-frontend/govuk/components/tabs/template.njk +15 -11
  27. data/node_modules/govuk-frontend/govuk/helpers/_font-faces.scss +20 -18
  28. data/node_modules/govuk-frontend/package.json +18 -18
  29. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 61857d26e044f6ba061ca180fefbd746ba4a1bf5ff90d08a1b642a6b0a8df3d3
4
- data.tar.gz: 300fcb426e7c8ff4d689fbbab7e9ab336140665ebbbe8bed34a850e049ee472b
3
+ metadata.gz: 38f751bcc662ac5194c82e962eddca8edd4b0fa27c1af17f1cb59dc2d9c19e4a
4
+ data.tar.gz: 4c87626b816dd2bebc14ab205f8cb5752c6010b07ebc1e08dd80b7e4c9465039
5
5
  SHA512:
6
- metadata.gz: f5e7d05af79294734c1ad83cf39334347043edb9986c8fbecda43be0b1999493f4d18129778bc1e5ae76bacae896c8270c0621827fca22ecc532c20000ee2fb2
7
- data.tar.gz: c8ff056961514d1838e4548f97bf875b7a4567400576d3572f477282074d38105452a9580f6a0ddf6f0a811f3a1723db937dbba1ade34f51d8cef2b16d4b1f31
6
+ metadata.gz: b53285bb7fe7369a290e2cb0d40ca82edf0e54c5131dbec6611b14e548026f34f1baf39cdd2b7dc20b3a60f6a122cae9eae202ecca70411d6039038ae6ac64b6
7
+ data.tar.gz: 502a6b3a0650938848b4cd46cb16f6de1e43157e215073297578ce1400b21533e4e735ca6ac0a983a53ac091216fc7b47a3031383d07a969693a62488dac5260
@@ -262,7 +262,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
262
262
  }
263
263
 
264
264
  &:hover {
265
- .gem-c-step-nav__button,
265
+ .gem-c-step-nav__button:not(:focus),
266
266
  .gem-c-step-nav__circle {
267
267
  color: $govuk-link-colour;
268
268
  }
@@ -272,12 +272,6 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
272
272
  }
273
273
  }
274
274
 
275
- &:focus {
276
- .gem-c-step-nav__button {
277
- color: $govuk-focus-text-colour;
278
- }
279
- }
280
-
281
275
  .gem-c-step-nav--large & {
282
276
  @include govuk-media-query($from: tablet) {
283
277
  padding: govuk-spacing(6) 0;
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = '20.5.1'.freeze
2
+ VERSION = '20.5.2'.freeze
3
3
  end
@@ -1361,58 +1361,28 @@ Button.prototype.init = function () {
1361
1361
  var KEY_ENTER = 13;
1362
1362
  var KEY_SPACE$1 = 32;
1363
1363
 
1364
- // Create a flag to know if the browser supports navtive details
1365
- var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean';
1366
-
1367
1364
  function Details ($module) {
1368
1365
  this.$module = $module;
1369
1366
  }
1370
1367
 
1371
- /**
1372
- * Handle cross-modal click events
1373
- * @param {object} node element
1374
- * @param {function} callback function
1375
- */
1376
- Details.prototype.handleInputs = function (node, callback) {
1377
- node.addEventListener('keypress', function (event) {
1378
- var target = event.target;
1379
- // When the key gets pressed - check if it is enter or space
1380
- if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE$1) {
1381
- if (target.nodeName.toLowerCase() === 'summary') {
1382
- // Prevent space from scrolling the page
1383
- // and enter from submitting a form
1384
- event.preventDefault();
1385
- // Click to let the click event do all the necessary action
1386
- if (target.click) {
1387
- target.click();
1388
- } else {
1389
- // except Safari 5.1 and under don't support .click() here
1390
- callback(event);
1391
- }
1392
- }
1393
- }
1394
- });
1368
+ Details.prototype.init = function () {
1369
+ if (!this.$module) {
1370
+ return
1371
+ }
1395
1372
 
1396
- // Prevent keyup to prevent clicking twice in Firefox when using space key
1397
- node.addEventListener('keyup', function (event) {
1398
- var target = event.target;
1399
- if (event.keyCode === KEY_SPACE$1) {
1400
- if (target.nodeName.toLowerCase() === 'summary') {
1401
- event.preventDefault();
1402
- }
1403
- }
1404
- });
1373
+ // If there is native details support, we want to avoid running code to polyfill native behaviour.
1374
+ var hasNativeDetails = typeof this.$module.open === 'boolean';
1405
1375
 
1406
- node.addEventListener('click', callback);
1376
+ if (hasNativeDetails) {
1377
+ return
1378
+ }
1379
+
1380
+ this.polyfillDetails();
1407
1381
  };
1408
1382
 
1409
- Details.prototype.init = function () {
1383
+ Details.prototype.polyfillDetails = function () {
1410
1384
  var $module = this.$module;
1411
1385
 
1412
- if (!$module) {
1413
- return
1414
- }
1415
-
1416
1386
  // Save shortcuts to the inner summary and content elements
1417
1387
  var $summary = this.$summary = $module.getElementsByTagName('summary').item(0);
1418
1388
  var $content = this.$content = $module.getElementsByTagName('div').item(0);
@@ -1442,9 +1412,7 @@ Details.prototype.init = function () {
1442
1412
  //
1443
1413
  // We have to use the camelcase `tabIndex` property as there is a bug in IE6/IE7 when we set the correct attribute lowercase:
1444
1414
  // See http://web.archive.org/web/20170120194036/http://www.saliences.com/browserBugs/tabIndex.html for more information.
1445
- if (!NATIVE_DETAILS) {
1446
- $summary.tabIndex = 0;
1447
- }
1415
+ $summary.tabIndex = 0;
1448
1416
 
1449
1417
  // Detect initial open state
1450
1418
  var openAttr = $module.getAttribute('open') !== null;
@@ -1454,20 +1422,18 @@ Details.prototype.init = function () {
1454
1422
  } else {
1455
1423
  $summary.setAttribute('aria-expanded', 'false');
1456
1424
  $content.setAttribute('aria-hidden', 'true');
1457
- if (!NATIVE_DETAILS) {
1458
- $content.style.display = 'none';
1459
- }
1425
+ $content.style.display = 'none';
1460
1426
  }
1461
1427
 
1462
1428
  // Bind an event to handle summary elements
1463
- this.handleInputs($summary, this.setAttributes.bind(this));
1429
+ this.polyfillHandleInputs($summary, this.polyfillSetAttributes.bind(this));
1464
1430
  };
1465
1431
 
1466
1432
  /**
1467
1433
  * Define a statechange function that updates aria-expanded and style.display
1468
1434
  * @param {object} summary element
1469
1435
  */
1470
- Details.prototype.setAttributes = function () {
1436
+ Details.prototype.polyfillSetAttributes = function () {
1471
1437
  var $module = this.$module;
1472
1438
  var $summary = this.$summary;
1473
1439
  var $content = this.$content;
@@ -1478,27 +1444,54 @@ Details.prototype.setAttributes = function () {
1478
1444
  $summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'));
1479
1445
  $content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'));
1480
1446
 
1481
- if (!NATIVE_DETAILS) {
1482
- $content.style.display = (expanded ? 'none' : '');
1447
+ $content.style.display = (expanded ? 'none' : '');
1483
1448
 
1484
- var hasOpenAttr = $module.getAttribute('open') !== null;
1485
- if (!hasOpenAttr) {
1486
- $module.setAttribute('open', 'open');
1487
- } else {
1488
- $module.removeAttribute('open');
1489
- }
1449
+ var hasOpenAttr = $module.getAttribute('open') !== null;
1450
+ if (!hasOpenAttr) {
1451
+ $module.setAttribute('open', 'open');
1452
+ } else {
1453
+ $module.removeAttribute('open');
1490
1454
  }
1455
+
1491
1456
  return true
1492
1457
  };
1493
1458
 
1494
1459
  /**
1495
- * Remove the click event from the node element
1460
+ * Handle cross-modal click events
1496
1461
  * @param {object} node element
1462
+ * @param {function} callback function
1497
1463
  */
1498
- Details.prototype.destroy = function (node) {
1499
- node.removeEventListener('keypress');
1500
- node.removeEventListener('keyup');
1501
- node.removeEventListener('click');
1464
+ Details.prototype.polyfillHandleInputs = function (node, callback) {
1465
+ node.addEventListener('keypress', function (event) {
1466
+ var target = event.target;
1467
+ // When the key gets pressed - check if it is enter or space
1468
+ if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE$1) {
1469
+ if (target.nodeName.toLowerCase() === 'summary') {
1470
+ // Prevent space from scrolling the page
1471
+ // and enter from submitting a form
1472
+ event.preventDefault();
1473
+ // Click to let the click event do all the necessary action
1474
+ if (target.click) {
1475
+ target.click();
1476
+ } else {
1477
+ // except Safari 5.1 and under don't support .click() here
1478
+ callback(event);
1479
+ }
1480
+ }
1481
+ }
1482
+ });
1483
+
1484
+ // Prevent keyup to prevent clicking twice in Firefox when using space key
1485
+ node.addEventListener('keyup', function (event) {
1486
+ var target = event.target;
1487
+ if (event.keyCode === KEY_SPACE$1) {
1488
+ if (target.nodeName.toLowerCase() === 'summary') {
1489
+ event.preventDefault();
1490
+ }
1491
+ }
1492
+ });
1493
+
1494
+ node.addEventListener('click', callback);
1502
1495
  };
1503
1496
 
1504
1497
  function CharacterCount ($module) {
@@ -12,6 +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
- `id` option given to instances of the component 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)).
16
-
17
15
  See [options table](https://design-system.service.gov.uk/components/accordion/#options-example-default) for details.
@@ -4,22 +4,24 @@
4
4
  <div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}" data-module="govuk-accordion" id="{{ id }}"
5
5
  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
6
6
  {% for item in params.items %}
7
- <div class="govuk-accordion__section {% if item.expanded %}govuk-accordion__section--expanded{% endif %}">
8
- <div class="govuk-accordion__section-header">
9
- <h{{ headingLevel }} class="govuk-accordion__section-heading">
10
- <span class="govuk-accordion__section-button" id="{{ id }}-heading-{{ loop.index }}">
11
- {{ item.heading.html | safe if item.heading.html else item.heading.text }}
12
- </span>
13
- </h{{ headingLevel }}>
14
- {% if item.summary.html or item.summary.text %}
15
- <div class="govuk-accordion__section-summary govuk-body" id="{{ id }}-summary-{{ loop.index }}">
16
- {{ item.summary.html | safe if item.summary.html else item.summary.text }}
17
- </div>
18
- {% endif %}
7
+ {% if item %}
8
+ <div class="govuk-accordion__section {% if item.expanded %}govuk-accordion__section--expanded{% endif %}">
9
+ <div class="govuk-accordion__section-header">
10
+ <h{{ headingLevel }} class="govuk-accordion__section-heading">
11
+ <span class="govuk-accordion__section-button" id="{{ id }}-heading-{{ loop.index }}">
12
+ {{ item.heading.html | safe if item.heading.html else item.heading.text }}
13
+ </span>
14
+ </h{{ headingLevel }}>
15
+ {% if item.summary.html or item.summary.text %}
16
+ <div class="govuk-accordion__section-summary govuk-body" id="{{ id }}-summary-{{ loop.index }}">
17
+ {{ item.summary.html | safe if item.summary.html else item.summary.text }}
18
+ </div>
19
+ {% endif %}
20
+ </div>
21
+ <div id="{{ id }}-content-{{ loop.index }}" class="govuk-accordion__section-content" aria-labelledby="{{ id }}-heading-{{ loop.index }}">
22
+ {{ item.content.html | safe if item.content.html else item.content.text }}
23
+ </div>
19
24
  </div>
20
- <div id="{{ id }}-content-{{ loop.index }}" class="govuk-accordion__section-content" aria-labelledby="{{ id }}-heading-{{ loop.index }}">
21
- {{ item.content.html | safe if item.content.html else item.content.text }}
22
- </div>
23
- </div>
25
+ {% endif %}
24
26
  {% endfor %}
25
27
  </div>
@@ -98,6 +98,17 @@
98
98
  box-shadow: inset 0 0 0 1px $govuk-focus-colour;
99
99
  }
100
100
 
101
+ // alphagov/govuk_template includes a specific a:link:focus selector
102
+ // designed to make unvisited links a slightly darker blue when focussed, so
103
+ // we need to override the text colour for that combination of selectors so
104
+ // so that unvisited links styled as buttons do not end up with dark blue
105
+ // text when focussed.
106
+ @include govuk-compatibility(govuk_template) {
107
+ &:link:focus {
108
+ color: $govuk-button-text-colour;
109
+ }
110
+ }
111
+
101
112
  &:focus:not(:active):not(:hover) {
102
113
  border-color: $govuk-focus-colour;
103
114
  color: $govuk-focus-text-colour;
@@ -64,5 +64,11 @@
64
64
  "type": "boolean",
65
65
  "required": false,
66
66
  "description": "Prevent accidental double clicks on submit buttons from submitting forms multiple times"
67
+ },
68
+ {
69
+ "name": "isStartButton",
70
+ "type": "boolean",
71
+ "required": false,
72
+ "description": "Use for the main call to action on your service's start page."
67
73
  }
68
74
  ]
@@ -37,7 +37,7 @@ treat it as an interactive element - without this it will be
37
37
 
38
38
  {#- Define common attributes we can use for both button and input types #}
39
39
 
40
- {%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
40
+ {%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
41
41
 
42
42
  {#- Actually create a button... or a link! #}
43
43
 
@@ -49,12 +49,12 @@ treat it as an interactive element - without this it will be
49
49
  </a>
50
50
 
51
51
  {%- elseif element == 'button' %}
52
- <button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
52
+ <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
53
53
  {{ params.html | safe if params.html else params.text }}
54
54
  {# Indentation is intentional to output HTML nicely #}
55
55
  {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
56
56
  </button>
57
57
 
58
58
  {%- elseif element == 'input' %}
59
- <input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
59
+ <input value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
60
60
  {%- endif %}
@@ -62,6 +62,20 @@
62
62
  "description": "Options for the errorMessage component (e.g. text).",
63
63
  "isComponent": true
64
64
  },
65
+ {
66
+ "name": "formGroup",
67
+ "type": "object",
68
+ "required": false,
69
+ "description": "Options for the form-group wrapper",
70
+ "params": [
71
+ {
72
+ "name": "classes",
73
+ "type": "string",
74
+ "required": false,
75
+ "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
76
+ }
77
+ ]
78
+ },
65
79
  {
66
80
  "name": "classes",
67
81
  "type": "string",
@@ -10,6 +10,7 @@
10
10
  describedBy: params.id + '-info',
11
11
  rows: params.rows,
12
12
  value: params.value,
13
+ formGroup: params.formGroup,
13
14
  classes: 'govuk-js-character-count ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes),
14
15
  label: {
15
16
  html: params.label.html,
@@ -53,52 +53,54 @@
53
53
  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
54
54
  {%- if isConditional %} data-module="govuk-checkboxes"{% endif -%}>
55
55
  {% for item in params.items %}
56
- {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
57
- {%- if item.id -%}
58
- {%- set id = item.id -%}
59
- {%- else -%}
60
- {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
61
- {%- if loop.first -%}
62
- {%- set id = idPrefix %}
63
- {% else %}
64
- {%- set id = idPrefix + "-" + loop.index -%}
65
- {%- endif -%}
66
- {%- endif -%}
67
- {% set name = item.name if item.name else params.name %}
68
- {% set conditionalId = "conditional-" + id %}
69
- {% set hasHint = true if item.hint.text or item.hint.html %}
70
- {% set itemHintId = id + "-item-hint" if hasHint else "" %}
71
- {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
72
- {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
73
- <div class="govuk-checkboxes__item">
74
- <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
75
- {{-" checked" if item.checked }}
76
- {{-" disabled" if item.disabled }}
77
- {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
78
- {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
79
- {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
80
- {{ govukLabel({
81
- html: item.html,
82
- text: item.text,
83
- classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
84
- attributes: item.label.attributes,
85
- for: id
86
- }) | indent(6) | trim }}
87
- {% if hasHint %}
88
- {{ govukHint({
89
- id: itemHintId,
90
- classes: 'govuk-checkboxes__hint',
91
- attributes: item.hint.attributes,
92
- html: item.hint.html,
93
- text: item.hint.text
94
- }) | indent(6) | trim }}
56
+ {% if item %}
57
+ {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
58
+ {%- if item.id -%}
59
+ {%- set id = item.id -%}
60
+ {%- else -%}
61
+ {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
62
+ {%- if loop.first -%}
63
+ {%- set id = idPrefix %}
64
+ {% else %}
65
+ {%- set id = idPrefix + "-" + loop.index -%}
66
+ {%- endif -%}
67
+ {%- endif -%}
68
+ {% set name = item.name if item.name else params.name %}
69
+ {% set conditionalId = "conditional-" + id %}
70
+ {% set hasHint = true if item.hint.text or item.hint.html %}
71
+ {% set itemHintId = id + "-item-hint" if hasHint else "" %}
72
+ {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
73
+ {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
74
+ <div class="govuk-checkboxes__item">
75
+ <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
76
+ {{-" checked" if item.checked }}
77
+ {{-" disabled" if item.disabled }}
78
+ {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
79
+ {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
80
+ {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
81
+ {{ govukLabel({
82
+ html: item.html,
83
+ text: item.text,
84
+ classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
85
+ attributes: item.label.attributes,
86
+ for: id
87
+ }) | indent(6) | trim }}
88
+ {% if hasHint %}
89
+ {{ govukHint({
90
+ id: itemHintId,
91
+ classes: 'govuk-checkboxes__hint',
92
+ attributes: item.hint.attributes,
93
+ html: item.hint.html,
94
+ text: item.hint.text
95
+ }) | indent(6) | trim }}
96
+ {% endif %}
97
+ </div>
98
+ {% if item.conditional %}
99
+ <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
100
+ {{ item.conditional.html | safe }}
101
+ </div>
102
+ {% endif %}
95
103
  {% endif %}
96
- </div>
97
- {% if item.conditional %}
98
- <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
99
- {{ item.conditional.html | safe }}
100
- </div>
101
- {% endif %}
102
104
  {% endfor %}
103
105
  </div>
104
106
  {% endset -%}
@@ -84,9 +84,8 @@
84
84
  {% call govukFieldset({
85
85
  describedBy: describedBy,
86
86
  classes: params.fieldset.classes,
87
- attributes: {
88
- role: "group"
89
- },
87
+ role: 'group',
88
+ attributes: params.fieldset.attributes,
90
89
  legend: params.fieldset.legend
91
90
  }) %}
92
91
  {{ innerHtml | trim | safe }}
@@ -690,58 +690,28 @@ function generateUniqueID () {
690
690
  var KEY_ENTER = 13;
691
691
  var KEY_SPACE = 32;
692
692
 
693
- // Create a flag to know if the browser supports navtive details
694
- var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean';
695
-
696
693
  function Details ($module) {
697
694
  this.$module = $module;
698
695
  }
699
696
 
700
- /**
701
- * Handle cross-modal click events
702
- * @param {object} node element
703
- * @param {function} callback function
704
- */
705
- Details.prototype.handleInputs = function (node, callback) {
706
- node.addEventListener('keypress', function (event) {
707
- var target = event.target;
708
- // When the key gets pressed - check if it is enter or space
709
- if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
710
- if (target.nodeName.toLowerCase() === 'summary') {
711
- // Prevent space from scrolling the page
712
- // and enter from submitting a form
713
- event.preventDefault();
714
- // Click to let the click event do all the necessary action
715
- if (target.click) {
716
- target.click();
717
- } else {
718
- // except Safari 5.1 and under don't support .click() here
719
- callback(event);
720
- }
721
- }
722
- }
723
- });
697
+ Details.prototype.init = function () {
698
+ if (!this.$module) {
699
+ return
700
+ }
724
701
 
725
- // Prevent keyup to prevent clicking twice in Firefox when using space key
726
- node.addEventListener('keyup', function (event) {
727
- var target = event.target;
728
- if (event.keyCode === KEY_SPACE) {
729
- if (target.nodeName.toLowerCase() === 'summary') {
730
- event.preventDefault();
731
- }
732
- }
733
- });
702
+ // If there is native details support, we want to avoid running code to polyfill native behaviour.
703
+ var hasNativeDetails = typeof this.$module.open === 'boolean';
734
704
 
735
- node.addEventListener('click', callback);
705
+ if (hasNativeDetails) {
706
+ return
707
+ }
708
+
709
+ this.polyfillDetails();
736
710
  };
737
711
 
738
- Details.prototype.init = function () {
712
+ Details.prototype.polyfillDetails = function () {
739
713
  var $module = this.$module;
740
714
 
741
- if (!$module) {
742
- return
743
- }
744
-
745
715
  // Save shortcuts to the inner summary and content elements
746
716
  var $summary = this.$summary = $module.getElementsByTagName('summary').item(0);
747
717
  var $content = this.$content = $module.getElementsByTagName('div').item(0);
@@ -771,9 +741,7 @@ Details.prototype.init = function () {
771
741
  //
772
742
  // We have to use the camelcase `tabIndex` property as there is a bug in IE6/IE7 when we set the correct attribute lowercase:
773
743
  // See http://web.archive.org/web/20170120194036/http://www.saliences.com/browserBugs/tabIndex.html for more information.
774
- if (!NATIVE_DETAILS) {
775
- $summary.tabIndex = 0;
776
- }
744
+ $summary.tabIndex = 0;
777
745
 
778
746
  // Detect initial open state
779
747
  var openAttr = $module.getAttribute('open') !== null;
@@ -783,20 +751,18 @@ Details.prototype.init = function () {
783
751
  } else {
784
752
  $summary.setAttribute('aria-expanded', 'false');
785
753
  $content.setAttribute('aria-hidden', 'true');
786
- if (!NATIVE_DETAILS) {
787
- $content.style.display = 'none';
788
- }
754
+ $content.style.display = 'none';
789
755
  }
790
756
 
791
757
  // Bind an event to handle summary elements
792
- this.handleInputs($summary, this.setAttributes.bind(this));
758
+ this.polyfillHandleInputs($summary, this.polyfillSetAttributes.bind(this));
793
759
  };
794
760
 
795
761
  /**
796
762
  * Define a statechange function that updates aria-expanded and style.display
797
763
  * @param {object} summary element
798
764
  */
799
- Details.prototype.setAttributes = function () {
765
+ Details.prototype.polyfillSetAttributes = function () {
800
766
  var $module = this.$module;
801
767
  var $summary = this.$summary;
802
768
  var $content = this.$content;
@@ -807,27 +773,54 @@ Details.prototype.setAttributes = function () {
807
773
  $summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'));
808
774
  $content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'));
809
775
 
810
- if (!NATIVE_DETAILS) {
811
- $content.style.display = (expanded ? 'none' : '');
776
+ $content.style.display = (expanded ? 'none' : '');
812
777
 
813
- var hasOpenAttr = $module.getAttribute('open') !== null;
814
- if (!hasOpenAttr) {
815
- $module.setAttribute('open', 'open');
816
- } else {
817
- $module.removeAttribute('open');
818
- }
778
+ var hasOpenAttr = $module.getAttribute('open') !== null;
779
+ if (!hasOpenAttr) {
780
+ $module.setAttribute('open', 'open');
781
+ } else {
782
+ $module.removeAttribute('open');
819
783
  }
784
+
820
785
  return true
821
786
  };
822
787
 
823
788
  /**
824
- * Remove the click event from the node element
789
+ * Handle cross-modal click events
825
790
  * @param {object} node element
791
+ * @param {function} callback function
826
792
  */
827
- Details.prototype.destroy = function (node) {
828
- node.removeEventListener('keypress');
829
- node.removeEventListener('keyup');
830
- node.removeEventListener('click');
793
+ Details.prototype.polyfillHandleInputs = function (node, callback) {
794
+ node.addEventListener('keypress', function (event) {
795
+ var target = event.target;
796
+ // When the key gets pressed - check if it is enter or space
797
+ if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
798
+ if (target.nodeName.toLowerCase() === 'summary') {
799
+ // Prevent space from scrolling the page
800
+ // and enter from submitting a form
801
+ event.preventDefault();
802
+ // Click to let the click event do all the necessary action
803
+ if (target.click) {
804
+ target.click();
805
+ } else {
806
+ // except Safari 5.1 and under don't support .click() here
807
+ callback(event);
808
+ }
809
+ }
810
+ }
811
+ });
812
+
813
+ // Prevent keyup to prevent clicking twice in Firefox when using space key
814
+ node.addEventListener('keyup', function (event) {
815
+ var target = event.target;
816
+ if (event.keyCode === KEY_SPACE) {
817
+ if (target.nodeName.toLowerCase() === 'summary') {
818
+ event.preventDefault();
819
+ }
820
+ }
821
+ });
822
+
823
+ node.addEventListener('click', callback);
831
824
  };
832
825
 
833
826
  return Details;
@@ -32,8 +32,6 @@
32
32
  max-width: 100%; // 1
33
33
  margin-bottom: govuk-spacing(2);
34
34
  padding: 0;
35
- // Hack to let legends or elements within legends have margins in webkit browsers
36
- overflow: hidden;
37
35
 
38
36
  white-space: normal; // 1
39
37
  }
@@ -43,6 +43,12 @@
43
43
  "required": false,
44
44
  "description": "Classes to add to the fieldset container."
45
45
  },
46
+ {
47
+ "name": "role",
48
+ "type": "string",
49
+ "required": false,
50
+ "description": "Optional ARIA role attribute."
51
+ },
46
52
  {
47
53
  "name": "attributes",
48
54
  "type": "object",
@@ -1,5 +1,6 @@
1
1
  <fieldset class="govuk-fieldset
2
2
  {%- if params.classes %} {{ params.classes }}{% endif %}"
3
+ {%- if params.role %} role="{{ params.role }}"{% endif %}
3
4
  {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
4
5
  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
5
6
  {% if params.legend.html or params.legend.text %}
@@ -224,9 +224,11 @@
224
224
  }
225
225
  }
226
226
 
227
- // Sections two-third:one-third on desktop
227
+ // If there are only two sections, set the layout to be two-third:one-third on desktop
228
228
  @include mq ($from: desktop) {
229
- .govuk-footer__section:first-child {
229
+ // We match the first section with `:first-child`.
230
+ // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
231
+ .govuk-footer__section:first-child:nth-last-child(2) {
230
232
  -webkit-box-flex: 2;
231
233
  -webkit-flex-grow: 2;
232
234
  -ms-flex-positive: 2;
@@ -17,6 +17,12 @@
17
17
  "required": false,
18
18
  "description": "Type of input control to render. Defaults to \"text\"."
19
19
  },
20
+ {
21
+ "name": "inputmode",
22
+ "type": "string",
23
+ "require": false,
24
+ "description": "Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)."
25
+ },
20
26
  {
21
27
  "name": "value",
22
28
  "type": "string",
@@ -42,5 +42,6 @@
42
42
  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
43
43
  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
44
44
  {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
45
+ {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
45
46
  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
46
47
  </div>
@@ -47,53 +47,55 @@
47
47
  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
48
48
  {%- if isConditional %} data-module="govuk-radios"{% endif -%}>
49
49
  {% for item in params.items %}
50
- {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
51
- {%- if item.id -%}
52
- {%- set id = item.id -%}
53
- {%- else -%}
54
- {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
55
- {%- if loop.first -%}
56
- {%- set id = idPrefix %}
57
- {% else %}
58
- {%- set id = idPrefix + "-" + loop.index -%}
59
- {%- endif -%}
60
- {%- endif -%}
61
- {% set conditionalId = "conditional-" + id %}
62
- {%- if item.divider %}
63
- <div class="govuk-radios__divider">{{ item.divider }}</div>
64
- {%- else %}
65
- {% set hasHint = true if item.hint.text or item.hint.html %}
66
- {% set itemHintId = id + '-item-hint' %}
67
- <div class="govuk-radios__item">
68
- <input class="govuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
69
- {{-" checked" if item.checked }}
70
- {{-" disabled" if item.disabled }}
71
- {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
72
- {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
73
- {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
74
- {{ govukLabel({
75
- html: item.html,
76
- text: item.text,
77
- classes: 'govuk-radios__label' + (' ' + item.label.classes if item.label.classes),
78
- attributes: item.label.attributes,
79
- for: id
80
- }) | indent(6) | trim }}
81
- {% if hasHint %}
82
- {{ govukHint({
83
- id: itemHintId,
84
- classes: 'govuk-radios__hint',
85
- attributes: item.hint.attributes,
86
- html: item.hint.html,
87
- text: item.hint.text
88
- }) | indent(6) | trim }}
50
+ {% if item %}
51
+ {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
52
+ {%- if item.id -%}
53
+ {%- set id = item.id -%}
54
+ {%- else -%}
55
+ {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
56
+ {%- if loop.first -%}
57
+ {%- set id = idPrefix %}
58
+ {% else %}
59
+ {%- set id = idPrefix + "-" + loop.index -%}
60
+ {%- endif -%}
61
+ {%- endif -%}
62
+ {% set conditionalId = "conditional-" + id %}
63
+ {%- if item.divider %}
64
+ <div class="govuk-radios__divider">{{ item.divider }}</div>
65
+ {%- else %}
66
+ {% set hasHint = true if item.hint.text or item.hint.html %}
67
+ {% set itemHintId = id + '-item-hint' %}
68
+ <div class="govuk-radios__item">
69
+ <input class="govuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
70
+ {{-" checked" if item.checked }}
71
+ {{-" disabled" if item.disabled }}
72
+ {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
73
+ {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
74
+ {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
75
+ {{ govukLabel({
76
+ html: item.html,
77
+ text: item.text,
78
+ classes: 'govuk-radios__label' + (' ' + item.label.classes if item.label.classes),
79
+ attributes: item.label.attributes,
80
+ for: id
81
+ }) | indent(6) | trim }}
82
+ {% if hasHint %}
83
+ {{ govukHint({
84
+ id: itemHintId,
85
+ classes: 'govuk-radios__hint',
86
+ attributes: item.hint.attributes,
87
+ html: item.hint.html,
88
+ text: item.hint.text
89
+ }) | indent(6) | trim }}
90
+ {% endif %}
91
+ </div>
92
+ {% if item.conditional %}
93
+ <div class="govuk-radios__conditional{% if not item.checked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
94
+ {{ item.conditional.html | safe }}
95
+ </div>
96
+ {% endif %}
97
+ {% endif %}
89
98
  {% endif %}
90
- </div>
91
- {% if item.conditional %}
92
- <div class="govuk-radios__conditional{% if not item.checked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
93
- {{ item.conditional.html | safe }}
94
- </div>
95
- {% endif %}
96
- {% endif %}
97
99
  {% endfor %}
98
100
  </div>
99
101
  {% endset -%}
@@ -40,10 +40,12 @@
40
40
  <select class="govuk-select
41
41
  {%- if params.classes %} {{ params.classes }}{% endif %}{%- if params.errorMessage %} govuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
42
42
  {% for item in params.items %}
43
- <option value="{{ item.value }}"
44
- {{-" selected" if item.selected }}
45
- {{-" disabled" if item.disabled }}
46
- {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
43
+ {% if item %}
44
+ <option value="{{ item.value }}"
45
+ {{-" selected" if item.selected }}
46
+ {{-" disabled" if item.disabled }}
47
+ {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
48
+ {% endif %}
47
49
  {% endfor %}
48
50
  </select>
49
51
  </div>
@@ -3,8 +3,14 @@
3
3
  "name": "rows",
4
4
  "type": "array",
5
5
  "required": true,
6
- "description": "Array of row item objects",
6
+ "description": "Array of row item objects.",
7
7
  "params": [
8
+ {
9
+ "name": "classes",
10
+ "type": "string",
11
+ "required": false,
12
+ "description": "Classes to add to the row `div`"
13
+ },
8
14
  {
9
15
  "name": "key.text",
10
16
  "type": "string",
@@ -15,31 +15,33 @@
15
15
 
16
16
  <dl class="govuk-summary-list {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
17
17
  {% for row in params.rows %}
18
- <div class="govuk-summary-list__row {%- if row.classes %} {{ row.classes }}{% endif %}">
19
- <dt class="govuk-summary-list__key {%- if row.key.classes %} {{ row.key.classes }}{% endif %}">
20
- {{ row.key.html | safe if row.key.html else row.key.text }}
21
- </dt>
22
- <dd class="govuk-summary-list__value {%- if row.value.classes %} {{ row.value.classes }}{% endif %}">
23
- {{ row.value.html | indent(8) | trim | safe if row.value.html else row.value.text }}
24
- </dd>
25
- {% if row.actions.items.length %}
26
- <dd class="govuk-summary-list__actions {%- if row.actions.classes %} {{ row.actions.classes }}{% endif %}">
27
- {% if row.actions.items.length == 1 %}
28
- {{ _actionLink(row.actions.items[0]) | indent(12) | trim }}
29
- {% else %}
30
- <ul class="govuk-summary-list__actions-list">
31
- {% for action in row.actions.items %}
32
- <li class="govuk-summary-list__actions-list-item">
33
- {{ _actionLink(action) | indent(18) | trim }}
34
- </li>
35
- {% endfor %}
36
- </ul>
37
- {% endif %}
18
+ {% if row %}
19
+ <div class="govuk-summary-list__row {%- if row.classes %} {{ row.classes }}{% endif %}">
20
+ <dt class="govuk-summary-list__key {%- if row.key.classes %} {{ row.key.classes }}{% endif %}">
21
+ {{ row.key.html | safe if row.key.html else row.key.text }}
22
+ </dt>
23
+ <dd class="govuk-summary-list__value {%- if row.value.classes %} {{ row.value.classes }}{% endif %}">
24
+ {{ row.value.html | indent(8) | trim | safe if row.value.html else row.value.text }}
38
25
  </dd>
39
- {% elseif anyRowHasActions %}
40
- {# Add dummy column to extend border #}
41
- <span class="govuk-summary-list__actions"></span>
42
- {% endif %}
43
- </div>
26
+ {% if row.actions.items.length %}
27
+ <dd class="govuk-summary-list__actions {%- if row.actions.classes %} {{ row.actions.classes }}{% endif %}">
28
+ {% if row.actions.items.length == 1 %}
29
+ {{ _actionLink(row.actions.items[0]) | indent(12) | trim }}
30
+ {% else %}
31
+ <ul class="govuk-summary-list__actions-list">
32
+ {% for action in row.actions.items %}
33
+ <li class="govuk-summary-list__actions-list-item">
34
+ {{ _actionLink(action) | indent(18) | trim }}
35
+ </li>
36
+ {% endfor %}
37
+ </ul>
38
+ {% endif %}
39
+ </dd>
40
+ {% elseif anyRowHasActions %}
41
+ {# Add dummy column to extend border #}
42
+ <span class="govuk-summary-list__actions"></span>
43
+ {% endif %}
44
+ </div>
45
+ {% endif %}
44
46
  {% endfor %}
45
47
  </dl>
@@ -19,25 +19,27 @@
19
19
  {% endif %}
20
20
  <tbody class="govuk-table__body">
21
21
  {% for row in params.rows %}
22
- <tr class="govuk-table__row">
23
- {% for cell in row %}
24
- {% set commonAttributes %}
25
- {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
26
- {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
27
- {% endset %}
28
- {% if loop.first and params.firstCellIsHeader %}
29
- <th scope="row" class="govuk-table__header{%- if cell.classes %} {{ cell.classes }}{% endif %}"
30
- {{- commonAttributes | safe -}}
31
- >{{ cell.html | safe if cell.html else cell.text }}</th>
32
- {% else %}
33
- <td class="govuk-table__cell
34
- {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
35
- {%- if cell.classes %} {{ cell.classes }}{% endif %}"
36
- {{- commonAttributes | safe -}}
37
- >{{ cell.html | safe if cell.html else cell.text }}</td>
22
+ {% if row %}
23
+ <tr class="govuk-table__row">
24
+ {% for cell in row %}
25
+ {% set commonAttributes %}
26
+ {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
27
+ {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
28
+ {% endset %}
29
+ {% if loop.first and params.firstCellIsHeader %}
30
+ <th scope="row" class="govuk-table__header{%- if cell.classes %} {{ cell.classes }}{% endif %}"
31
+ {{- commonAttributes | safe -}}
32
+ >{{ cell.html | safe if cell.html else cell.text }}</th>
33
+ {% else %}
34
+ <td class="govuk-table__cell
35
+ {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
36
+ {%- if cell.classes %} {{ cell.classes }}{% endif %}"
37
+ {{- commonAttributes | safe -}}
38
+ >{{ cell.html | safe if cell.html else cell.text }}</td>
39
+ {% endif %}
40
+ {% endfor %}
41
+ </tr>
38
42
  {% endif %}
39
43
  {% endfor %}
40
- </tr>
41
- {% endfor %}
42
44
  </tbody>
43
45
  </table>
@@ -9,20 +9,24 @@
9
9
  {% if(params.items) %}
10
10
  <ul class="govuk-tabs__list">
11
11
  {% for item in params.items %}
12
- {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
13
- <li class="govuk-tabs__list-item{% if loop.index == 1 %} govuk-tabs__list-item--selected{% endif %}">
14
- <a class="govuk-tabs__tab" href="#{{ id }}"
15
- {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
16
- {{ item.label }}
17
- </a>
18
- </li>
12
+ {% if item %}
13
+ {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
14
+ <li class="govuk-tabs__list-item{% if loop.index == 1 %} govuk-tabs__list-item--selected{% endif %}">
15
+ <a class="govuk-tabs__tab" href="#{{ id }}"
16
+ {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
17
+ {{ item.label }}
18
+ </a>
19
+ </li>
20
+ {% endif %}
19
21
  {% endfor %}
20
22
  </ul>
21
23
  {% endif %}
22
24
  {% for item in params.items %}
23
- {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
24
- <section class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
25
- {{ item.panel.html | safe if item.panel.html else item.panel.text }}
26
- </section>
25
+ {% if item %}
26
+ {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
27
+ <section class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
28
+ {{ item.panel.html | safe if item.panel.html else item.panel.text }}
29
+ </section>
30
+ {% endif %}
27
31
  {% endfor %}
28
32
  </div>
@@ -15,26 +15,28 @@
15
15
  /// @access private
16
16
 
17
17
  @mixin _govuk-font-face-gds-transport {
18
- @include govuk-exports("govuk/helpers/font-faces") {
19
- @at-root {
20
- /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
18
+ @include govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
19
+ @include govuk-exports("govuk/helpers/font-faces") {
20
+ @at-root {
21
+ /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
21
22
 
22
- @font-face {
23
- font-family: "GDS Transport";
24
- src: govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
25
- govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
26
- font-weight: normal;
27
- font-style: normal;
28
- font-display: fallback;
29
- }
23
+ @font-face {
24
+ font-family: "GDS Transport";
25
+ src: govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
26
+ govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
27
+ font-weight: normal;
28
+ font-style: normal;
29
+ font-display: fallback;
30
+ }
30
31
 
31
- @font-face {
32
- font-family: "GDS Transport";
33
- src: govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
34
- govuk-font-url("bold-affa96571d-v2.woff") format("woff");
35
- font-weight: bold;
36
- font-style: normal;
37
- font-display: fallback;
32
+ @font-face {
33
+ font-family: "GDS Transport";
34
+ src: govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
35
+ govuk-font-url("bold-affa96571d-v2.woff") format("woff");
36
+ font-weight: bold;
37
+ font-style: normal;
38
+ font-display: fallback;
39
+ }
38
40
  }
39
41
  }
40
42
  }
@@ -2,26 +2,26 @@
2
2
  "_args": [
3
3
  [
4
4
  {
5
- "raw": "govuk-frontend@3.0.0",
5
+ "raw": "govuk-frontend@3.2.0",
6
6
  "scope": null,
7
7
  "escapedName": "govuk-frontend",
8
8
  "name": "govuk-frontend",
9
- "rawSpec": "3.0.0",
10
- "spec": "3.0.0",
9
+ "rawSpec": "3.2.0",
10
+ "spec": "3.2.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.0.0",
16
+ "_from": "govuk-frontend@3.2.0",
17
17
  "_hasShrinkwrap": false,
18
- "_id": "govuk-frontend@3.0.0",
18
+ "_id": "govuk-frontend@3.2.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.0.0_1564404268017_0.7992759014736304"
24
+ "tmp": "tmp/govuk-frontend_3.2.0_1568198961302_0.8446682726447414"
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.0.0",
33
+ "raw": "govuk-frontend@3.2.0",
34
34
  "scope": null,
35
35
  "escapedName": "govuk-frontend",
36
36
  "name": "govuk-frontend",
37
- "rawSpec": "3.0.0",
38
- "spec": "3.0.0",
37
+ "rawSpec": "3.2.0",
38
+ "spec": "3.2.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.0.0.tgz",
45
- "_shasum": "27e4751592c0587ec925c637dcd1a2582429afe4",
44
+ "_resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.2.0.tgz",
45
+ "_shasum": "0f935bee092929455bf7ed08bba40ab07ea72769",
46
46
  "_shrinkwrap": null,
47
- "_spec": "govuk-frontend@3.0.0",
47
+ "_spec": "govuk-frontend@3.2.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-GCrEeaQZEnsthNtfmOUFlgsieNjHOeoamSWMdD4Gdq0RPxCA9uzfrT2i3jVnlBORekKjOL0C8eFZQBSNnjtz2A==",
63
- "shasum": "27e4751592c0587ec925c637dcd1a2582429afe4",
64
- "tarball": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.0.0.tgz",
62
+ "integrity": "sha512-OtJozAGMEKFu195fNVVrQHUX7+znCkA4cXDKs4lgFlRQOTzN1ogT9010GBARuoTwbeL0VqQ8nerZYjVxH/wafA==",
63
+ "shasum": "0f935bee092929455bf7ed08bba40ab07ea72769",
64
+ "tarball": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.2.0.tgz",
65
65
  "fileCount": 247,
66
- "unpackedSize": 1022483,
67
- "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPuosCRA9TVsSAnZWagAAw6UP+QH4uM6CmEDwGBSA0XNA\nh9wCoKl99eF3hvMS+GagfFMLNreazhlJ6ZpsRhTZD3cgMxw6rbZcUQa8k4Ld\nEsxVMjR72VASIvFLnq96msj0cJYTs8bxzH4D3K4l5kjCepnnJSa0p0L3Yy1c\nwmx5XsQv9FtSAkd/nVSFsucN7agMPniknf2X9DGWFcoOivL0//Hstc3QuKcn\nwZIArS9NO/eALqysMnEKPr1MPLQ3ZI36LfzSSFSnYSJdiuT16QLRaAj8NNop\n6mta61mIZ20RFHgP6zWc99aFqf1c7+V5mb1XoNIDeg36Euw3cVE/YgR2NXYJ\ng7u9dbYRtkcDsdXlustKRged+MRPq36qLX4K6Ex6W8mLQhgJta2Weg/7wQ6j\njcmpPmeghIWvJ1bcLYZlKtizzyuLkbULD1PMm122yxUbHJywDSgMVkScDUOh\nB/FmF74zLwzrYOdzYvaJuCby9gb0rpOmpZYb4mx0YFTALGDwoSw03lUize4s\nSxXtopO4rfzSCzwr5sTEYNCvd8y/KRiD7oYl6gyS3mpjXOcg2mF3MaKx9buZ\n7GdHv3QCvaLoJEwaz+ms8LIrgz2P2DE6kE9fLTd5sARhbL4SuNkRYfOTFR+v\npJzEEiw3yL9i6IhUTZoZ2W+JWacGLtnDX9MWhOjcRfRq17Y5/K7VCM5AemE2\ntPQd\r\n=HHmt\r\n-----END PGP SIGNATURE-----\r\n"
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"
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.0.0"
95
+ "version": "3.2.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: 20.5.1
4
+ version: 20.5.2
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-09-13 00:00:00.000000000 Z
11
+ date: 2019-09-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: gds-api-adapters