govuk_publishing_components 12.8.0 → 12.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/app/views/govuk_publishing_components/components/_checkboxes.html.erb +1 -0
  3. data/app/views/govuk_publishing_components/components/docs/checkboxes.yml +13 -0
  4. data/lib/govuk_publishing_components/version.rb +1 -1
  5. data/node_modules/govuk-frontend/all.js +161 -1
  6. data/node_modules/govuk-frontend/components/back-link/README.md +3 -77
  7. data/node_modules/govuk-frontend/components/breadcrumbs/README.md +3 -101
  8. data/node_modules/govuk-frontend/components/button/README.md +3 -137
  9. data/node_modules/govuk-frontend/components/character-count/README.md +3 -149
  10. data/node_modules/govuk-frontend/components/character-count/character-count.js +1 -1
  11. data/node_modules/govuk-frontend/components/checkboxes/README.md +3 -257
  12. data/node_modules/govuk-frontend/components/checkboxes/checkboxes.js +1 -1
  13. data/node_modules/govuk-frontend/components/checkboxes/template.njk +5 -0
  14. data/node_modules/govuk-frontend/components/date-input/README.md +3 -173
  15. data/node_modules/govuk-frontend/components/date-input/macro-options.json +14 -0
  16. data/node_modules/govuk-frontend/components/date-input/template.njk +1 -1
  17. data/node_modules/govuk-frontend/components/details/README.md +3 -101
  18. data/node_modules/govuk-frontend/components/error-message/README.md +3 -77
  19. data/node_modules/govuk-frontend/components/error-summary/README.md +3 -125
  20. data/node_modules/govuk-frontend/components/error-summary/error-summary.js +405 -87
  21. data/node_modules/govuk-frontend/components/fieldset/README.md +3 -113
  22. data/node_modules/govuk-frontend/components/file-upload/README.md +3 -125
  23. data/node_modules/govuk-frontend/components/file-upload/macro-options.json +14 -0
  24. data/node_modules/govuk-frontend/components/file-upload/template.njk +1 -1
  25. data/node_modules/govuk-frontend/components/footer/README.md +3 -233
  26. data/node_modules/govuk-frontend/components/header/README.md +3 -197
  27. data/node_modules/govuk-frontend/components/hint/README.md +3 -77
  28. data/node_modules/govuk-frontend/components/input/README.md +3 -137
  29. data/node_modules/govuk-frontend/components/input/macro-options.json +14 -0
  30. data/node_modules/govuk-frontend/components/input/template.njk +1 -1
  31. data/node_modules/govuk-frontend/components/inset-text/README.md +7 -77
  32. data/node_modules/govuk-frontend/components/label/README.md +3 -89
  33. data/node_modules/govuk-frontend/components/panel/README.md +3 -89
  34. data/node_modules/govuk-frontend/components/phase-banner/README.md +3 -77
  35. data/node_modules/govuk-frontend/components/radios/README.md +3 -269
  36. data/node_modules/govuk-frontend/components/radios/radios.js +1 -1
  37. data/node_modules/govuk-frontend/components/select/README.md +3 -185
  38. data/node_modules/govuk-frontend/components/select/macro-options.json +14 -0
  39. data/node_modules/govuk-frontend/components/select/template.njk +1 -1
  40. data/node_modules/govuk-frontend/components/skip-link/README.md +3 -77
  41. data/node_modules/govuk-frontend/components/table/README.md +3 -233
  42. data/node_modules/govuk-frontend/components/tabs/README.md +3 -149
  43. data/node_modules/govuk-frontend/components/tabs/tabs.js +111 -111
  44. data/node_modules/govuk-frontend/components/tag/README.md +3 -65
  45. data/node_modules/govuk-frontend/components/textarea/README.md +3 -149
  46. data/node_modules/govuk-frontend/components/textarea/macro-options.json +14 -0
  47. data/node_modules/govuk-frontend/components/textarea/template.njk +1 -1
  48. data/node_modules/govuk-frontend/components/warning-text/README.md +3 -77
  49. data/node_modules/govuk-frontend/package.json +11 -11
  50. data/node_modules/govuk-frontend/vendor/polyfills/Element/prototype/classList.js +141 -1
  51. data/node_modules/govuk-frontend/vendor/polyfills/Element/prototype/closest.js +54 -0
  52. data/node_modules/govuk-frontend/vendor/polyfills/Element/prototype/matches.js +31 -0
  53. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a387aeb59072c1b6409f0b54132f6468f45065bca13fc551327ccdb1675d42b1
4
- data.tar.gz: c3ffb8f5c1d721e27c44206763cffe6f2f1b7d0885451585ac6f7b6502b1db60
3
+ metadata.gz: df4a59e5bde0deae7a90d8ab6b60b4bc333082241f512a7d391231015f9160aa
4
+ data.tar.gz: 9f8d256520354bcf7aa21cf60e41f430a9ac3bb4b16ae65be7191de75020e544
5
5
  SHA512:
6
- metadata.gz: 0eb5c5f693e7dcf997ee9255300d344c8432941194954a020c67de631b3650f3511715f4feeeb538ea2f614b6e1bb674e4c5e3bcbfa816206d20b4b1c9b01e55
7
- data.tar.gz: 8887d46f6cba2359e83ce7fdc092c9b62b43267d4ad5d25c21b548673fcc2d3fe399614a51e2da85e31eb1428118eadf59732eb24df46b368b3fc6a1797e9786
6
+ metadata.gz: b9484354d62a2985246628f93d405b48f7c21934e9c32570faa84617b44ce132aa516bc0dc8b566da00290606cbb18b3dd4d2cba49dcaa1a0f9e9f511bccf3df
7
+ data.tar.gz: 6612e414febf1e6aadb2c8220b616b616aef4a0ab885b6cc1633f1cd6b801aa0658121620a29b34a3dd6aba26629fd8b6169a5101153174a33e71535b3dbc80f
@@ -35,6 +35,7 @@
35
35
  type: "checkbox",
36
36
  value: item[:value],
37
37
  class: "govuk-checkboxes__input",
38
+ checked: item[:checked].present? ? "checked" : nil,
38
39
  aria: {
39
40
  describedby: item[:hint].present? ? "#{id}-#{index}-item-hint" : nil,
40
41
  controls: item[:conditional].present? ? "#{id}-conditional-#{index}" : nil
@@ -80,3 +80,16 @@ examples:
80
80
  value: "irish"
81
81
  - label: "Other"
82
82
  value: "other"
83
+ checkbox_items_with_checked_items:
84
+ data:
85
+ name: "nationality"
86
+ heading: "What is your nationality?"
87
+ hint_text: "If you have dual nationality, select all options that are relevant to you."
88
+ items:
89
+ - label: "British"
90
+ value: "british"
91
+ checked: true
92
+ - label: "Irish"
93
+ value: "irish"
94
+ - label: "Other"
95
+ value: "other"
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = '12.8.0'.freeze
2
+ VERSION = '12.9.0'.freeze
3
3
  end
@@ -1159,7 +1159,7 @@ Details.prototype.destroy = function (node) {
1159
1159
 
1160
1160
  if (detect) return
1161
1161
 
1162
- // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/polyfill.js
1162
+ // Polyfill from https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList&flags=always
1163
1163
  (function (global) {
1164
1164
  var dpSupport = true;
1165
1165
  var defineGetter = function (object, name, fn, configurable) {
@@ -1470,6 +1470,53 @@ Checkboxes.prototype.handleClick = function (event) {
1470
1470
  }
1471
1471
  };
1472
1472
 
1473
+ (function(undefined) {
1474
+
1475
+ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/matches/detect.js
1476
+ var detect = (
1477
+ 'document' in this && "matches" in document.documentElement
1478
+ );
1479
+
1480
+ if (detect) return
1481
+
1482
+ // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/matches/polyfill.js
1483
+ Element.prototype.matches = Element.prototype.webkitMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || function matches(selector) {
1484
+ var element = this;
1485
+ var elements = (element.document || element.ownerDocument).querySelectorAll(selector);
1486
+ var index = 0;
1487
+
1488
+ while (elements[index] && elements[index] !== element) {
1489
+ ++index;
1490
+ }
1491
+
1492
+ return !!elements[index];
1493
+ };
1494
+
1495
+ }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
1496
+
1497
+ (function(undefined) {
1498
+
1499
+ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/detect.js
1500
+ var detect = (
1501
+ 'document' in this && "closest" in document.documentElement
1502
+ );
1503
+
1504
+ if (detect) return
1505
+
1506
+ // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
1507
+ Element.prototype.closest = function closest(selector) {
1508
+ var node = this;
1509
+
1510
+ while (node) {
1511
+ if (node.matches(selector)) return node;
1512
+ else node = 'SVGElement' in window && node instanceof SVGElement ? node.parentNode : node.parentElement;
1513
+ }
1514
+
1515
+ return null;
1516
+ };
1517
+
1518
+ }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
1519
+
1473
1520
  function ErrorSummary ($module) {
1474
1521
  this.$module = $module;
1475
1522
  }
@@ -1482,6 +1529,119 @@ ErrorSummary.prototype.init = function () {
1482
1529
  window.addEventListener('load', function () {
1483
1530
  $module.focus();
1484
1531
  });
1532
+
1533
+ $module.addEventListener('click', this.handleClick.bind(this));
1534
+ };
1535
+
1536
+ /**
1537
+ * Click event handler
1538
+ *
1539
+ * @param {MouseEvent} event - Click event
1540
+ */
1541
+ ErrorSummary.prototype.handleClick = function (event) {
1542
+ var target = event.target;
1543
+ if (this.focusTarget(target)) {
1544
+ event.preventDefault();
1545
+ }
1546
+ };
1547
+
1548
+ /**
1549
+ * Focus the target element
1550
+ *
1551
+ * By default, the browser will scroll the target into view. Because our labels
1552
+ * or legends appear above the input, this means the user will be presented with
1553
+ * an input without any context, as the label or legend will be off the top of
1554
+ * the screen.
1555
+ *
1556
+ * Manually handling the click event, scrolling the question into view and then
1557
+ * focussing the element solves this.
1558
+ *
1559
+ * This also results in the label and/or legend being announced correctly in
1560
+ * NVDA (as tested in 2018.3.2) - without this only the field type is announced
1561
+ * (e.g. "Edit, has autocomplete").
1562
+ *
1563
+ * @param {HTMLElement} $target - Event target
1564
+ * @returns {boolean} True if the target was able to be focussed
1565
+ */
1566
+ ErrorSummary.prototype.focusTarget = function ($target) {
1567
+ // If the element that was clicked was not a link, return early
1568
+ if ($target.tagName !== 'A' || $target.href === false) {
1569
+ return false
1570
+ }
1571
+
1572
+ var inputId = this.getFragmentFromUrl($target.href);
1573
+ var $input = document.getElementById(inputId);
1574
+ if (!$input) {
1575
+ return false
1576
+ }
1577
+
1578
+ var $legendOrLabel = this.getAssociatedLegendOrLabel($input);
1579
+ if (!$legendOrLabel) {
1580
+ return false
1581
+ }
1582
+
1583
+ // Prefer using the history API where possible, as updating
1584
+ // window.location.hash causes the viewport to jump to the input briefly
1585
+ // before then scrolling to the label/legend in IE10, IE11 and Edge (as tested
1586
+ // in Edge 17).
1587
+ if (window.history.pushState) {
1588
+ window.history.pushState(null, null, '#' + inputId);
1589
+ } else {
1590
+ window.location.hash = inputId;
1591
+ }
1592
+
1593
+ // Scroll the legend or label into view *before* calling focus on the input to
1594
+ // avoid extra scrolling in browsers that don't support `preventScroll` (which
1595
+ // at time of writing is most of them...)
1596
+ $legendOrLabel.scrollIntoView();
1597
+ $input.focus({ preventScroll: true });
1598
+
1599
+ return true
1600
+ };
1601
+
1602
+ /**
1603
+ * Get fragment from URL
1604
+ *
1605
+ * Extract the fragment (everything after the hash) from a URL, but not including
1606
+ * the hash.
1607
+ *
1608
+ * @param {string} url - URL
1609
+ * @returns {string} Fragment from URL, without the hash
1610
+ */
1611
+ ErrorSummary.prototype.getFragmentFromUrl = function (url) {
1612
+ if (url.indexOf('#') === -1) {
1613
+ return false
1614
+ }
1615
+
1616
+ return url.split('#').pop()
1617
+ };
1618
+
1619
+ /**
1620
+ * Get associated legend or label
1621
+ *
1622
+ * Returns the first element that exists from this list:
1623
+ *
1624
+ * - The `<legend>` associated with the closest `<fieldset>` ancestor
1625
+ * - The first `<label>` that is associated with the input using for="inputId"
1626
+ * - The closest parent `<label>`
1627
+ *
1628
+ * @param {HTMLElement} $input - The input
1629
+ * @returns {HTMLElement} Associated legend or label, or null if no associated
1630
+ * legend or label can be found
1631
+ */
1632
+ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
1633
+ var $fieldset = $input.closest('fieldset');
1634
+
1635
+ if ($fieldset) {
1636
+ var legends = $fieldset.getElementsByTagName('legend');
1637
+
1638
+ if (legends.length) {
1639
+ return legends[0]
1640
+ }
1641
+ }
1642
+
1643
+ return document.querySelector("label[for='" + $input.getAttribute('id') + "']") ||
1644
+ $input.closest('label')
1485
1645
  };
1486
1646
 
1487
1647
  function Header ($module) {
@@ -59,85 +59,11 @@ In order to include the images used in the components, you need to configure you
59
59
 
60
60
  app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
61
61
 
62
- ## Component arguments
62
+ ## Component options
63
63
 
64
- If you are using Nunjucks,then macros take the following arguments
64
+ Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
65
65
 
66
- **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
67
-
68
- <table class="govuk-table">
69
-
70
- <thead class="govuk-table__head">
71
-
72
- <tr class="govuk-table__row">
73
-
74
- <th class="govuk-table__header" scope="col">Name</th>
75
-
76
- <th class="govuk-table__header" scope="col">Type</th>
77
-
78
- <th class="govuk-table__header" scope="col">Required</th>
79
-
80
- <th class="govuk-table__header" scope="col">Description</th>
81
-
82
- </tr>
83
-
84
- </thead>
85
-
86
- <tbody class="govuk-table__body">
87
-
88
- <tr class="govuk-table__row">
89
-
90
- <th class="govuk-table__header" scope="row">text (or) html</th>
91
-
92
- <td class="govuk-table__cell">string</td>
93
-
94
- <td class="govuk-table__cell">Yes</td>
95
-
96
- <td class="govuk-table__cell">Text or HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored.</td>
97
-
98
- </tr>
99
-
100
- <tr class="govuk-table__row">
101
-
102
- <th class="govuk-table__header" scope="row">href</th>
103
-
104
- <td class="govuk-table__cell">string</td>
105
-
106
- <td class="govuk-table__cell">Yes</td>
107
-
108
- <td class="govuk-table__cell">The value of the link href attribute</td>
109
-
110
- </tr>
111
-
112
- <tr class="govuk-table__row">
113
-
114
- <th class="govuk-table__header" scope="row">classes</th>
115
-
116
- <td class="govuk-table__cell">string</td>
117
-
118
- <td class="govuk-table__cell">No</td>
119
-
120
- <td class="govuk-table__cell">Optional additional classes to add to the anchor tag.</td>
121
-
122
- </tr>
123
-
124
- <tr class="govuk-table__row">
125
-
126
- <th class="govuk-table__header" scope="row">attributes</th>
127
-
128
- <td class="govuk-table__cell">object</td>
129
-
130
- <td class="govuk-table__cell">No</td>
131
-
132
- <td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the anchor tag.</td>
133
-
134
- </tr>
135
-
136
- </tbody>
137
-
138
- </table>
139
-
140
- **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
66
+ See [options table](https://design-system.service.gov.uk/components/back-link/#options-example-default) for details.
141
67
 
142
68
  ### Setting up Nunjucks views and paths
143
69
 
@@ -224,109 +224,11 @@ In order to include the images used in the components, you need to configure you
224
224
 
225
225
  app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
226
226
 
227
- ## Component arguments
227
+ ## Component options
228
228
 
229
- If you are using Nunjucks,then macros take the following arguments
229
+ Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
230
230
 
231
- **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
232
-
233
- <table class="govuk-table">
234
-
235
- <thead class="govuk-table__head">
236
-
237
- <tr class="govuk-table__row">
238
-
239
- <th class="govuk-table__header" scope="col">Name</th>
240
-
241
- <th class="govuk-table__header" scope="col">Type</th>
242
-
243
- <th class="govuk-table__header" scope="col">Required</th>
244
-
245
- <th class="govuk-table__header" scope="col">Description</th>
246
-
247
- </tr>
248
-
249
- </thead>
250
-
251
- <tbody class="govuk-table__body">
252
-
253
- <tr class="govuk-table__row">
254
-
255
- <th class="govuk-table__header" scope="row">items</th>
256
-
257
- <td class="govuk-table__cell">array</td>
258
-
259
- <td class="govuk-table__cell">Yes</td>
260
-
261
- <td class="govuk-table__cell">Array of breadcrumbs item objects.</td>
262
-
263
- </tr>
264
-
265
- <tr class="govuk-table__row">
266
-
267
- <th class="govuk-table__header" scope="row">items.{}.text (or) items.{}.html</th>
268
-
269
- <td class="govuk-table__cell">string</td>
270
-
271
- <td class="govuk-table__cell">Yes</td>
272
-
273
- <td class="govuk-table__cell">Text or HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.</td>
274
-
275
- </tr>
276
-
277
- <tr class="govuk-table__row">
278
-
279
- <th class="govuk-table__header" scope="row">items.{}.href</th>
280
-
281
- <td class="govuk-table__cell">string</td>
282
-
283
- <td class="govuk-table__cell">no</td>
284
-
285
- <td class="govuk-table__cell">Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item</td>
286
-
287
- </tr>
288
-
289
- <tr class="govuk-table__row">
290
-
291
- <th class="govuk-table__header" scope="row">items.{}.attributes</th>
292
-
293
- <td class="govuk-table__cell">object</td>
294
-
295
- <td class="govuk-table__cell">No</td>
296
-
297
- <td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.</td>
298
-
299
- </tr>
300
-
301
- <tr class="govuk-table__row">
302
-
303
- <th class="govuk-table__header" scope="row">classes</th>
304
-
305
- <td class="govuk-table__cell">string</td>
306
-
307
- <td class="govuk-table__cell">No</td>
308
-
309
- <td class="govuk-table__cell">Optional additional classes to add to the breadcrumbs container.</td>
310
-
311
- </tr>
312
-
313
- <tr class="govuk-table__row">
314
-
315
- <th class="govuk-table__header" scope="row">attributes</th>
316
-
317
- <td class="govuk-table__cell">object</td>
318
-
319
- <td class="govuk-table__cell">No</td>
320
-
321
- <td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the breadcrumbs container.</td>
322
-
323
- </tr>
324
-
325
- </tbody>
326
-
327
- </table>
328
-
329
- **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
231
+ See [options table](https://design-system.service.gov.uk/components/breadcrumbs/#options-example-default) for details.
330
232
 
331
233
  ### Setting up Nunjucks views and paths
332
234
 
@@ -160,145 +160,11 @@ In order to include the images used in the components, you need to configure you
160
160
 
161
161
  app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
162
162
 
163
- ## Component arguments
163
+ ## Component options
164
164
 
165
- If you are using Nunjucks,then macros take the following arguments
165
+ Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
166
166
 
167
- **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
168
-
169
- <table class="govuk-table">
170
-
171
- <thead class="govuk-table__head">
172
-
173
- <tr class="govuk-table__row">
174
-
175
- <th class="govuk-table__header" scope="col">Name</th>
176
-
177
- <th class="govuk-table__header" scope="col">Type</th>
178
-
179
- <th class="govuk-table__header" scope="col">Required</th>
180
-
181
- <th class="govuk-table__header" scope="col">Description</th>
182
-
183
- </tr>
184
-
185
- </thead>
186
-
187
- <tbody class="govuk-table__body">
188
-
189
- <tr class="govuk-table__row">
190
-
191
- <th class="govuk-table__header" scope="row">element</th>
192
-
193
- <td class="govuk-table__cell">string</td>
194
-
195
- <td class="govuk-table__cell">No</td>
196
-
197
- <td class="govuk-table__cell">Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.</td>
198
-
199
- </tr>
200
-
201
- <tr class="govuk-table__row">
202
-
203
- <th class="govuk-table__header" scope="row">text (or) html</th>
204
-
205
- <td class="govuk-table__cell">string</td>
206
-
207
- <td class="govuk-table__cell">Yes</td>
208
-
209
- <td class="govuk-table__cell">Text or HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.</td>
210
-
211
- </tr>
212
-
213
- <tr class="govuk-table__row">
214
-
215
- <th class="govuk-table__header" scope="row">name</th>
216
-
217
- <td class="govuk-table__cell">string</td>
218
-
219
- <td class="govuk-table__cell">Yes</td>
220
-
221
- <td class="govuk-table__cell">Name for the `input` or `button`. This has no effect on `a` elements.</td>
222
-
223
- </tr>
224
-
225
- <tr class="govuk-table__row">
226
-
227
- <th class="govuk-table__header" scope="row">type</th>
228
-
229
- <td class="govuk-table__cell">string</td>
230
-
231
- <td class="govuk-table__cell">Yes</td>
232
-
233
- <td class="govuk-table__cell">Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.</td>
234
-
235
- </tr>
236
-
237
- <tr class="govuk-table__row">
238
-
239
- <th class="govuk-table__header" scope="row">value</th>
240
-
241
- <td class="govuk-table__cell">string</td>
242
-
243
- <td class="govuk-table__cell">Yes</td>
244
-
245
- <td class="govuk-table__cell">Value for the `button` tag. This has no effect on `a` or `input` elements.</td>
246
-
247
- </tr>
248
-
249
- <tr class="govuk-table__row">
250
-
251
- <th class="govuk-table__header" scope="row">disabled</th>
252
-
253
- <td class="govuk-table__cell">boolean</td>
254
-
255
- <td class="govuk-table__cell">No</td>
256
-
257
- <td class="govuk-table__cell">Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.</td>
258
-
259
- </tr>
260
-
261
- <tr class="govuk-table__row">
262
-
263
- <th class="govuk-table__header" scope="row">href</th>
264
-
265
- <td class="govuk-table__cell">string</td>
266
-
267
- <td class="govuk-table__cell">No</td>
268
-
269
- <td class="govuk-table__cell">The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.</td>
270
-
271
- </tr>
272
-
273
- <tr class="govuk-table__row">
274
-
275
- <th class="govuk-table__header" scope="row">classes</th>
276
-
277
- <td class="govuk-table__cell">string</td>
278
-
279
- <td class="govuk-table__cell">No</td>
280
-
281
- <td class="govuk-table__cell">Optional additional classes</td>
282
-
283
- </tr>
284
-
285
- <tr class="govuk-table__row">
286
-
287
- <th class="govuk-table__header" scope="row">attributes</th>
288
-
289
- <td class="govuk-table__cell">object</td>
290
-
291
- <td class="govuk-table__cell">No</td>
292
-
293
- <td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the button component.</td>
294
-
295
- </tr>
296
-
297
- </tbody>
298
-
299
- </table>
300
-
301
- **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
167
+ See [options table](https://design-system.service.gov.uk/components/button/#options-example-default) for details.
302
168
 
303
169
  ### Setting up Nunjucks views and paths
304
170