govuk_publishing_components 32.0.0 → 33.0.0

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 (206) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/component_guide/accessibility-test.js +0 -1
  3. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +175 -0
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js +1 -1
  5. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js +5 -13
  6. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js +80 -309
  7. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +2 -2
  8. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js +140 -0
  9. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js +3 -0
  10. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js +1 -0
  11. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +12 -1
  12. data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +13 -4
  13. data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js +24 -8
  14. data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +83 -86
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss +2 -5
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +1 -5
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +3 -5
  18. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +10 -30
  19. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +0 -7
  20. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +0 -6
  21. data/app/views/govuk_publishing_components/components/_accordion.html.erb +14 -1
  22. data/app/views/govuk_publishing_components/components/_error_summary.html.erb +27 -26
  23. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +2 -2
  24. data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +1 -1
  25. data/app/views/govuk_publishing_components/components/_share_links.html.erb +18 -15
  26. data/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb +1 -1
  27. data/app/views/govuk_publishing_components/components/docs/accordion.yml +15 -3
  28. data/app/views/govuk_publishing_components/components/docs/button.yml +10 -0
  29. data/app/views/govuk_publishing_components/components/docs/share_links.yml +59 -30
  30. data/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml +10 -1
  31. data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +3 -3
  32. data/config/locales/ar.yml +4 -1
  33. data/config/locales/az.yml +4 -1
  34. data/config/locales/be.yml +4 -1
  35. data/config/locales/bg.yml +4 -1
  36. data/config/locales/bn.yml +4 -1
  37. data/config/locales/cs.yml +4 -1
  38. data/config/locales/cy.yml +4 -1
  39. data/config/locales/da.yml +4 -1
  40. data/config/locales/de.yml +4 -1
  41. data/config/locales/dr.yml +4 -1
  42. data/config/locales/el.yml +4 -1
  43. data/config/locales/en.yml +20 -17
  44. data/config/locales/es-419.yml +4 -1
  45. data/config/locales/es.yml +4 -1
  46. data/config/locales/et.yml +4 -1
  47. data/config/locales/fa.yml +4 -1
  48. data/config/locales/fi.yml +4 -1
  49. data/config/locales/fr.yml +4 -1
  50. data/config/locales/gd.yml +4 -1
  51. data/config/locales/gu.yml +4 -1
  52. data/config/locales/he.yml +4 -1
  53. data/config/locales/hi.yml +4 -1
  54. data/config/locales/hr.yml +4 -1
  55. data/config/locales/hu.yml +4 -1
  56. data/config/locales/hy.yml +4 -1
  57. data/config/locales/id.yml +4 -1
  58. data/config/locales/is.yml +4 -1
  59. data/config/locales/it.yml +4 -1
  60. data/config/locales/ja.yml +4 -1
  61. data/config/locales/ka.yml +4 -1
  62. data/config/locales/kk.yml +4 -1
  63. data/config/locales/ko.yml +4 -1
  64. data/config/locales/lt.yml +4 -1
  65. data/config/locales/lv.yml +4 -1
  66. data/config/locales/ms.yml +4 -1
  67. data/config/locales/mt.yml +4 -1
  68. data/config/locales/nl.yml +4 -1
  69. data/config/locales/no.yml +4 -1
  70. data/config/locales/pa-pk.yml +4 -1
  71. data/config/locales/pa.yml +4 -1
  72. data/config/locales/pl.yml +4 -1
  73. data/config/locales/ps.yml +4 -1
  74. data/config/locales/pt.yml +4 -1
  75. data/config/locales/ro.yml +4 -1
  76. data/config/locales/ru.yml +4 -1
  77. data/config/locales/si.yml +4 -1
  78. data/config/locales/sk.yml +4 -1
  79. data/config/locales/sl.yml +4 -1
  80. data/config/locales/so.yml +4 -1
  81. data/config/locales/sq.yml +4 -1
  82. data/config/locales/sr.yml +4 -1
  83. data/config/locales/sv.yml +4 -1
  84. data/config/locales/sw.yml +4 -1
  85. data/config/locales/ta.yml +4 -1
  86. data/config/locales/th.yml +4 -1
  87. data/config/locales/tk.yml +4 -1
  88. data/config/locales/tr.yml +4 -1
  89. data/config/locales/uk.yml +4 -1
  90. data/config/locales/ur.yml +4 -1
  91. data/config/locales/uz.yml +4 -1
  92. data/config/locales/vi.yml +4 -1
  93. data/config/locales/zh-hk.yml +4 -1
  94. data/config/locales/zh-tw.yml +4 -1
  95. data/config/locales/zh.yml +4 -1
  96. data/lib/govuk_publishing_components/presenters/button_helper.rb +7 -1
  97. data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb +25 -1
  98. data/lib/govuk_publishing_components/version.rb +1 -1
  99. data/node_modules/axe-core/axe.js +4567 -4678
  100. data/node_modules/axe-core/axe.min.js +2 -2
  101. data/node_modules/axe-core/package.json +2 -2
  102. data/node_modules/axe-core/sri-history.json +8 -0
  103. data/node_modules/govuk-frontend/README.md +1 -2
  104. data/node_modules/govuk-frontend/govuk/all.js +1398 -273
  105. data/node_modules/govuk-frontend/govuk/common/closest-attribute-value.js +70 -0
  106. data/node_modules/govuk-frontend/govuk/common/index.js +172 -0
  107. data/node_modules/govuk-frontend/govuk/common/normalise-dataset.js +373 -0
  108. data/node_modules/govuk-frontend/govuk/common.js +138 -3
  109. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +753 -25
  110. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +54 -22
  111. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +36 -0
  112. data/node_modules/govuk-frontend/govuk/components/accordion/template.njk +7 -1
  113. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -12
  114. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +22 -22
  115. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +23 -5
  116. data/node_modules/govuk-frontend/govuk/components/button/button.js +365 -107
  117. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +85 -66
  118. data/node_modules/govuk-frontend/govuk/components/button/template.njk +1 -1
  119. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +9 -0
  120. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1033 -121
  121. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +112 -36
  122. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +42 -0
  123. data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +27 -3
  124. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +30 -2
  125. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +96 -93
  126. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +46 -46
  127. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +50 -50
  128. data/node_modules/govuk-frontend/govuk/components/details/details.js +43 -13
  129. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +20 -20
  130. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +20 -20
  131. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +268 -6
  132. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +44 -35
  133. data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk +25 -21
  134. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +51 -39
  135. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +26 -26
  136. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +1 -1
  137. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +46 -46
  138. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +2 -2
  139. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +93 -38
  140. data/node_modules/govuk-frontend/govuk/components/header/header.js +6 -0
  141. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +8 -2
  142. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -2
  143. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +12 -12
  144. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +80 -80
  145. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +12 -12
  146. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +34 -34
  147. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +56 -46
  148. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +252 -2
  149. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +1 -1
  150. data/node_modules/govuk-frontend/govuk/components/pagination/_index.scss +10 -7
  151. data/node_modules/govuk-frontend/govuk/components/pagination/fixtures.json +33 -26
  152. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +18 -18
  153. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +14 -14
  154. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +94 -91
  155. data/node_modules/govuk-frontend/govuk/components/radios/radios.js +30 -2
  156. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +32 -32
  157. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +22 -20
  158. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +10 -4
  159. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +50 -50
  160. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +1 -1
  161. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +40 -40
  162. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +29 -29
  163. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +28 -0
  164. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -28
  165. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +34 -34
  166. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +14 -14
  167. data/node_modules/govuk-frontend/govuk/core/_section-break.scss +1 -1
  168. data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +2 -2
  169. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +6 -6
  170. data/node_modules/govuk-frontend/govuk/i18n.js +390 -0
  171. data/node_modules/govuk-frontend/govuk/macros/i18n.njk +15 -0
  172. data/node_modules/govuk-frontend/govuk/settings/_all.scss +1 -0
  173. data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +12 -0
  174. data/node_modules/govuk-frontend/govuk/settings/_compatibility.scss +26 -0
  175. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +23 -0
  176. data/node_modules/govuk-frontend/govuk/settings/_typography-responsive.scss +12 -0
  177. data/node_modules/govuk-frontend/govuk/settings/_warnings.scss +53 -0
  178. data/node_modules/govuk-frontend/govuk/tools/_compatibility.scss +20 -6
  179. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Date/now.js +21 -0
  180. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/dataset.js +300 -0
  181. data/node_modules/govuk-frontend/govuk/vendor/polyfills/String/prototype/trim.js +21 -0
  182. data/node_modules/govuk-frontend/govuk-esm/all.mjs +50 -27
  183. data/node_modules/govuk-frontend/govuk-esm/common/closest-attribute-value.mjs +15 -0
  184. data/node_modules/govuk-frontend/govuk-esm/common/index.mjs +159 -0
  185. data/node_modules/govuk-frontend/govuk-esm/common/normalise-dataset.mjs +58 -0
  186. data/node_modules/govuk-frontend/govuk-esm/common.mjs +6 -28
  187. data/node_modules/govuk-frontend/govuk-esm/components/accordion/accordion.mjs +113 -43
  188. data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs +67 -30
  189. data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs +325 -123
  190. data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs +9 -3
  191. data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs +22 -8
  192. data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs +48 -6
  193. data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs +6 -0
  194. data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs +32 -2
  195. data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs +9 -3
  196. data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs +10 -4
  197. data/node_modules/govuk-frontend/govuk-esm/components/tabs/tabs.mjs +8 -2
  198. data/node_modules/govuk-frontend/govuk-esm/i18n.mjs +380 -0
  199. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Date/now.mjs +13 -0
  200. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/dataset.mjs +68 -0
  201. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/String/prototype/trim.mjs +13 -0
  202. data/node_modules/govuk-frontend/govuk-prototype-kit/init.js +7 -0
  203. data/node_modules/govuk-frontend/govuk-prototype-kit/init.scss +12 -0
  204. data/node_modules/govuk-frontend/govuk-prototype-kit.config.json +138 -7
  205. data/node_modules/govuk-frontend/package.json +1 -1
  206. metadata +22 -3
@@ -1014,10 +1014,24 @@ if (detect) return
1014
1014
 
1015
1015
  }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
1016
1016
 
1017
+ /**
1018
+ * Common helpers which do not require polyfill.
1019
+ *
1020
+ * IMPORTANT: If a helper require a polyfill, please isolate it in its own module
1021
+ * so that the polyfill can be properly tree-shaken and does not burden
1022
+ * the components that do not need that helper
1023
+ *
1024
+ * @module common/index
1025
+ */
1026
+
1017
1027
  /**
1018
1028
  * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
1019
1029
  * This seems to fail in IE8, requires more investigation.
1020
1030
  * See: https://github.com/imagitama/nodelist-foreach-polyfill
1031
+ *
1032
+ * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
1033
+ * @param {nodeListIterator} callback - Callback function to run for each node
1034
+ * @returns {undefined}
1021
1035
  */
1022
1036
  function nodeListForEach (nodes, callback) {
1023
1037
  if (window.NodeList.prototype.forEach) {
@@ -1028,6 +1042,20 @@ function nodeListForEach (nodes, callback) {
1028
1042
  }
1029
1043
  }
1030
1044
 
1045
+ /**
1046
+ * @callback nodeListIterator
1047
+ * @param {Element} value - The current node being iterated on
1048
+ * @param {number} index - The current index in the iteration
1049
+ * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
1050
+ * @returns {undefined}
1051
+ */
1052
+
1053
+ /**
1054
+ * Radios component
1055
+ *
1056
+ * @class
1057
+ * @param {HTMLElement} $module - HTML element to use for radios
1058
+ */
1031
1059
  function Radios ($module) {
1032
1060
  this.$module = $module;
1033
1061
  this.$inputs = $module.querySelectorAll('input[type="radio"]');
@@ -1098,7 +1126,7 @@ Radios.prototype.syncAllConditionalReveals = function () {
1098
1126
  * Synchronise the visibility of the conditional reveal, and its accessible
1099
1127
  * state, with the input's checked state.
1100
1128
  *
1101
- * @param {HTMLInputElement} $input Radio input
1129
+ * @param {HTMLInputElement} $input - Radio input
1102
1130
  */
1103
1131
  Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
1104
1132
  var $target = document.getElementById($input.getAttribute('aria-controls'));
@@ -1119,7 +1147,7 @@ Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
1119
1147
  * with the same name (because checking one radio could have un-checked a radio
1120
1148
  * in another $module)
1121
1149
  *
1122
- * @param {MouseEvent} event Click event
1150
+ * @param {MouseEvent} event - Click event
1123
1151
  */
1124
1152
  Radios.prototype.handleClick = function (event) {
1125
1153
  var $clickedInput = event.target;
@@ -26,8 +26,8 @@
26
26
  }
27
27
  ]
28
28
  },
29
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
30
- "hidden": false
29
+ "hidden": false,
30
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
31
31
  },
32
32
  {
33
33
  "name": "with no items",
@@ -39,8 +39,8 @@
39
39
  },
40
40
  "items": []
41
41
  },
42
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Horse with no name\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n </select>\n</div>",
43
- "hidden": false
42
+ "hidden": false,
43
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Horse with no name\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n </select>\n</div>"
44
44
  },
45
45
  {
46
46
  "name": "with selected value",
@@ -68,8 +68,8 @@
68
68
  ],
69
69
  "value": 3
70
70
  },
71
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" selected disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
72
- "hidden": false
71
+ "hidden": false,
72
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" selected disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
73
73
  },
74
74
  {
75
75
  "name": "with hint text and error message",
@@ -100,8 +100,8 @@
100
100
  }
101
101
  ]
102
102
  },
103
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <p id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
104
- "hidden": false
103
+ "hidden": false,
104
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <p id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
105
105
  },
106
106
  {
107
107
  "name": "with label as page heading",
@@ -130,8 +130,8 @@
130
130
  }
131
131
  ]
132
132
  },
133
- "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"select-3\">\n Label text goes here\n </label>\n </h1>\n\n\n <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
134
- "hidden": false
133
+ "hidden": false,
134
+ "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"select-3\">\n Label text goes here\n </label>\n </h1>\n\n\n <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
135
135
  },
136
136
  {
137
137
  "name": "with full width override",
@@ -159,8 +159,8 @@
159
159
  }
160
160
  ]
161
161
  },
162
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
163
- "hidden": false
162
+ "hidden": false,
163
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
164
164
  },
165
165
  {
166
166
  "name": "with optional form-group classes",
@@ -191,8 +191,8 @@
191
191
  }
192
192
  ]
193
193
  },
194
- "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
195
- "hidden": false
194
+ "hidden": false,
195
+ "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>"
196
196
  },
197
197
  {
198
198
  "name": "with describedBy",
@@ -211,8 +211,8 @@
211
211
  ],
212
212
  "describedBy": "some-id"
213
213
  },
214
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
215
- "hidden": true
214
+ "hidden": true,
215
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>"
216
216
  },
217
217
  {
218
218
  "name": "attributes",
@@ -233,8 +233,8 @@
233
233
  "data-attribute": "my data value"
234
234
  }
235
235
  },
236
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
237
- "hidden": true
236
+ "hidden": true,
237
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>"
238
238
  },
239
239
  {
240
240
  "name": "attributes on items",
@@ -261,8 +261,8 @@
261
261
  }
262
262
  ]
263
263
  },
264
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n \n \n <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n \n \n \n <option value=\"2\" selected data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n \n \n </select>\n</div>",
265
- "hidden": true
264
+ "hidden": true,
265
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n \n \n <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n \n \n \n <option value=\"2\" selected data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n \n \n </select>\n</div>"
266
266
  },
267
267
  {
268
268
  "name": "with falsey values",
@@ -283,8 +283,8 @@
283
283
  }
284
284
  ]
285
285
  },
286
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n \n \n <option value=\"1\">Option 1</option>\n \n \n \n \n \n \n \n \n \n <option value=\"2\">Options 2</option>\n \n \n </select>\n</div>",
287
- "hidden": true
286
+ "hidden": true,
287
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n \n \n <option value=\"1\">Option 1</option>\n \n \n \n \n \n \n \n \n \n <option value=\"2\">Options 2</option>\n \n \n </select>\n</div>"
288
288
  },
289
289
  {
290
290
  "name": "hint",
@@ -295,8 +295,8 @@
295
295
  "text": "Hint text goes here"
296
296
  }
297
297
  },
298
- "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n \n </select>\n</div>",
299
- "hidden": true
298
+ "hidden": true,
299
+ "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n \n </select>\n</div>"
300
300
  },
301
301
  {
302
302
  "name": "hint and describedBy",
@@ -318,8 +318,8 @@
318
318
  }
319
319
  ]
320
320
  },
321
- "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
322
- "hidden": true
321
+ "hidden": true,
322
+ "html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>"
323
323
  },
324
324
  {
325
325
  "name": "error",
@@ -340,8 +340,8 @@
340
340
  }
341
341
  ]
342
342
  },
343
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
344
- "hidden": true
343
+ "hidden": true,
344
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>"
345
345
  },
346
346
  {
347
347
  "name": "error and describedBy",
@@ -363,8 +363,8 @@
363
363
  }
364
364
  ]
365
365
  },
366
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
367
- "hidden": true
366
+ "hidden": true,
367
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>"
368
368
  },
369
369
  {
370
370
  "name": "item selected overrides value",
@@ -388,8 +388,8 @@
388
388
  ],
389
389
  "value": "green"
390
390
  },
391
- "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n \n \n <option value=\"red\">Red</option>\n \n \n \n <option value=\"green\">Green</option>\n \n \n \n <option value=\"blue\">Blue</option>\n \n \n </select>\n</div>",
392
- "hidden": true
391
+ "hidden": true,
392
+ "html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n \n \n <option value=\"red\">Red</option>\n \n \n \n <option value=\"green\">Green</option>\n \n \n \n <option value=\"blue\">Blue</option>\n \n \n </select>\n</div>"
393
393
  }
394
394
  ]
395
395
  }
@@ -7,8 +7,8 @@
7
7
  "text": "Skip to main content",
8
8
  "href": "#content"
9
9
  },
10
- "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to main content</a>",
11
- "hidden": false
10
+ "hidden": false,
11
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to main content</a>"
12
12
  },
13
13
  {
14
14
  "name": "with focus",
@@ -17,14 +17,16 @@
17
17
  "text": "Skip to main content",
18
18
  "href": "#content"
19
19
  },
20
- "html": "<a href=\"#content\" class=\"govuk-skip-link :focus\" data-module=\"govuk-skip-link\">Skip to main content</a>",
21
- "hidden": false
20
+ "hidden": false,
21
+ "html": "<a href=\"#content\" class=\"govuk-skip-link :focus\" data-module=\"govuk-skip-link\">Skip to main content</a>"
22
22
  },
23
23
  {
24
- "name": "default values",
25
- "options": {},
26
- "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\"></a>",
27
- "hidden": true
24
+ "name": "no href",
25
+ "options": {
26
+ "text": "Skip to main content"
27
+ },
28
+ "hidden": true,
29
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to main content</a>"
28
30
  },
29
31
  {
30
32
  "name": "custom href",
@@ -32,32 +34,32 @@
32
34
  "text": "Skip to custom content",
33
35
  "href": "#custom"
34
36
  },
35
- "html": "<a href=\"#custom\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to custom content</a>",
36
- "hidden": true
37
+ "hidden": true,
38
+ "html": "<a href=\"#custom\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to custom content</a>"
37
39
  },
38
40
  {
39
41
  "name": "custom text",
40
42
  "options": {
41
43
  "text": "skip"
42
44
  },
43
- "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">skip</a>",
44
- "hidden": true
45
+ "hidden": true,
46
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">skip</a>"
45
47
  },
46
48
  {
47
49
  "name": "html as text",
48
50
  "options": {
49
51
  "text": "<p>skip</p>"
50
52
  },
51
- "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>",
52
- "hidden": true
53
+ "hidden": true,
54
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">&lt;p&gt;skip&lt;/p&gt;</a>"
53
55
  },
54
56
  {
55
57
  "name": "html",
56
58
  "options": {
57
59
  "html": "<p>skip</p>"
58
60
  },
59
- "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\"><p>skip</p></a>",
60
- "hidden": true
61
+ "hidden": true,
62
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\"><p>skip</p></a>"
61
63
  },
62
64
  {
63
65
  "name": "classes",
@@ -65,8 +67,8 @@
65
67
  "text": "Skip link",
66
68
  "classes": "app-skip-link--custom-class"
67
69
  },
68
- "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\" data-module=\"govuk-skip-link\">Skip link</a>",
69
- "hidden": true
70
+ "hidden": true,
71
+ "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\" data-module=\"govuk-skip-link\">Skip link</a>"
70
72
  },
71
73
  {
72
74
  "name": "attributes",
@@ -77,8 +79,8 @@
77
79
  "aria-label": "Skip to content"
78
80
  }
79
81
  },
80
- "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\" data-module=\"govuk-skip-link\">Skip link</a>",
81
- "hidden": true
82
+ "hidden": true,
83
+ "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\" data-module=\"govuk-skip-link\">Skip link</a>"
82
84
  }
83
85
  ]
84
86
  }
@@ -1014,6 +1014,12 @@ if (detect) return
1014
1014
  })
1015
1015
  .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
1016
1016
 
1017
+ /**
1018
+ * Skip link component
1019
+ *
1020
+ * @class
1021
+ * @param {HTMLElement} $module - HTML element to use for skip link
1022
+ */
1017
1023
  function SkipLink ($module) {
1018
1024
  this.$module = $module;
1019
1025
  this.$linkedElement = null;
@@ -1039,10 +1045,10 @@ SkipLink.prototype.init = function () {
1039
1045
  };
1040
1046
 
1041
1047
  /**
1042
- * Get linked element
1043
- *
1044
- * @returns {HTMLElement} $linkedElement - DOM element linked to from the skip link
1045
- */
1048
+ * Get linked element
1049
+ *
1050
+ * @returns {HTMLElement} $linkedElement - DOM element linked to from the skip link
1051
+ */
1046
1052
  SkipLink.prototype.getLinkedElement = function () {
1047
1053
  var linkedElementId = this.getFragmentFromUrl();
1048
1054