govuk_publishing_components 20.5.1 → 20.5.2

Sign up to get free protection for your applications and to get access to all the features.
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