govuk_publishing_components 23.12.1 → 23.14.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (103) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/take-action-amber.svg +4 -0
  3. data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
  4. data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
  5. data/app/assets/javascripts/govuk_publishing_components/components/header.js +3 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +5 -0
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +32 -36
  8. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +66 -14
  9. data/app/assets/javascripts/govuk_publishing_components/modules.js +1 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +8 -8
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss +5 -0
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss +4 -0
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +19 -7
  16. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +17 -6
  17. data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +5 -0
  18. data/app/views/govuk_publishing_components/components/_button.html.erb +1 -0
  19. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  20. data/app/views/govuk_publishing_components/components/_document_list.html.erb +1 -1
  21. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +4 -2
  22. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +3 -2
  23. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  24. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +3 -0
  25. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +82 -0
  26. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +3 -0
  27. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +30 -0
  28. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  29. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +60 -1
  30. data/app/views/govuk_publishing_components/components/docs/document_list.yml +8 -0
  31. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +21 -0
  32. data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +99 -1
  33. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +3 -0
  34. data/app/views/govuk_publishing_components/components/docs/subscription_links.yml +100 -0
  35. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +3 -1
  36. data/app/views/govuk_publishing_components/components/docs/translation_nav.yml +137 -0
  37. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +3 -3
  38. data/config/initializers/assets.rb +3 -0
  39. data/config/locales/cy.yml +6 -1
  40. data/config/locales/en.yml +8 -3
  41. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +124 -2
  42. data/lib/govuk_publishing_components/presenters/meta_tags.rb +2 -0
  43. data/lib/govuk_publishing_components/version.rb +1 -1
  44. data/node_modules/govuk-frontend/govuk/all.js +57 -0
  45. data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
  46. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  47. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  48. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  49. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  50. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  51. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  52. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +72 -15
  53. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  54. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  55. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  56. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  57. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  58. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  59. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +34 -14
  60. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  61. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  62. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  63. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  64. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  65. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  66. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  67. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  68. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  69. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  70. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  71. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  72. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  73. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  74. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  75. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  76. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  77. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  78. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  79. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  80. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  81. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  82. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  83. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  84. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  85. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  86. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  87. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  88. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  89. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  90. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  91. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  92. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  93. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  94. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  95. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  96. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  97. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  98. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  99. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  100. data/node_modules/govuk-frontend/package.json +1 -1
  101. metadata +18 -4
  102. data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss +0 -125
  103. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f576e3d439679c36e70503acbdd7b7ae2bed87c9d2dea7a5bbdd11743e8f8161
4
- data.tar.gz: f4b49a21872957da107631f6dc2d0f3ff38d624cde346e2f30ac9f0b4b26e572
3
+ metadata.gz: 514faef62ff7e90f5416a3913ef0202014791feedb92f8b3d1fa87700a43f36f
4
+ data.tar.gz: 695af8e204a2f19992c470e6a0b71d497cc153d486008565631ab13cb1d66f72
5
5
  SHA512:
6
- metadata.gz: d26821d9c8fc386600981d8173bdd6e7cac6d9a4dc8a03c9c64128dc9ce5c66ecfbfcc079a7e03070dd81d5be4eaf9f9547becbafe148f7de1b1c2f38ee76a52
7
- data.tar.gz: 544cdceba43441a149e1770abeb5074d1a8c40c4d87d023a0d47cd0b42c94a8d142a1a51b7e022293483f5ea9f6f54d64aba2cd63e121c33ea9ee5c6948c4296
6
+ metadata.gz: 6cbdcdcd0b26eb0bc9985027ca172a595db96fd3b37189e8195bc5d7519763d909da2391b7ff011c223e581b9d5f2c4b0e30bf01c2a2f6c36b32d1ff99638225
7
+ data.tar.gz: e5666ac4e86a4f3382cc8b8d21296e3664303e075cb5886199d1e04477db04b2186eb5aebba26f213df1e7978012607e8cf48a088871a5110be8c901bb2f2e23
@@ -0,0 +1,4 @@
1
+ <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="17.5" cy="17.5" r="17.5" fill="#FF5800"/>
3
+ <path d="M28.5 10L13.6739 24L6.5 17.2258" stroke="white" stroke-width="3"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="17.5" cy="17.5" r="17.5" fill="#0EBA72"/>
3
+ <path d="M28.5 10L13.6739 24L6.5 17.2258" stroke="white" stroke-width="3"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="17.5" cy="17.5" r="17.5" fill="#FF003B"/>
3
+ <path d="M28.5 10.5L13.6739 24.5L6.5 17.7258" stroke="white" stroke-width="3"/>
4
+ </svg>
@@ -1,3 +1,6 @@
1
+ // DO NOT MAKE CHANGES TO THIS FILE
2
+ // It is a temporary copy of layout-header.js and will be deleted shortly
3
+
1
4
  // This component relies on JavaScript from GOV.UK Frontend
2
5
  // = require govuk/components/header/header.js
3
6
  window.GOVUK = window.GOVUK || {}
@@ -0,0 +1,5 @@
1
+ // This component relies on JavaScript from GOV.UK Frontend
2
+ // = require govuk/components/header/header.js
3
+ window.GOVUK = window.GOVUK || {}
4
+ window.GOVUK.Modules = window.GOVUK.Modules || {}
5
+ window.GOVUK.Modules.Header = window.GOVUKFrontend
@@ -40,6 +40,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
40
40
  this.$module.sessionStoreLink = this.$module.sessionStoreLink + '_' + this.$module.uniqueId
41
41
  }
42
42
 
43
+ this.$module.upChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="gem-c-step-nav__chevron">' +
44
+ '<path d="M19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499998 10C0.499999 4.7533 4.7533 0.500001 10 0.500002C15.2467 0.500003 19.5 4.7533 19.5 10Z" stroke="#1D70B8"/>' +
45
+ '<path d="M6.32617 12.3262L10 8.65234L13.6738 12.3262" stroke="#1D70B8" stroke-width="2"/>' +
46
+ '</svg>'
47
+ this.$module.downChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="gem-c-step-nav__chevron">' +
48
+ '<path d="M0.499997 10C0.499998 4.75329 4.75329 0.499999 10 0.499999C15.2467 0.5 19.5 4.75329 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499997 10Z" stroke="#1D70B8"/>' +
49
+ '<path d="M13.6738 8.67383L10 12.3477L6.32617 8.67383" stroke="#1D70B8" stroke-width="2"/>' +
50
+ '</svg>'
51
+
43
52
  var stepNavTracker = new this.StepNavTracker(this.$module.uniqueId, this.$module.totalSteps, this.$module.totalLinks)
44
53
 
45
54
  this.getTextForInsertedElements()
@@ -66,7 +75,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
66
75
  Gemstepnav.prototype.addShowHideAllButton = function () {
67
76
  var showall = document.createElement('div')
68
77
  showall.className = 'gem-c-step-nav__controls'
69
- showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' + this.$module.actions.showAllText + '</button>'
78
+ showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
79
+ this.$module.downChevronSvg +
80
+ this.$module.actions.showAllText +
81
+ '</button>'
70
82
 
71
83
  var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
72
84
  this.$module.insertBefore(showall, steps)
@@ -114,7 +126,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
114
126
  var data = []
115
127
 
116
128
  for (var i = 0; i < this.$module.steps.length; i++) {
117
- var stepView = new this.StepView(this.$module.steps[i], this.$module.actions.showText, this.$module.actions.hideText)
129
+ var stepView = new this.StepView(this.$module.steps[i], this.$module)
118
130
  stepView.setIsShown(isShown)
119
131
 
120
132
  if (isShown) {
@@ -136,7 +148,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
136
148
  for (var i = 0; i < this.$module.steps.length; i++) {
137
149
  var thisel = this.$module.steps[i]
138
150
  var id = thisel.getAttribute('id')
139
- var stepView = new this.StepView(thisel, this.$module.actions.showText, this.$module.actions.hideText)
151
+ var stepView = new this.StepView(thisel, this.$module)
140
152
  var shouldBeShown = thisel.hasAttribute('data-show')
141
153
 
142
154
  // show the step if it has been remembered or if it has the 'data-show' attribute
@@ -165,7 +177,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
165
177
  '<button ' +
166
178
  'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
167
179
  'aria-expanded="false" aria-controls="' + contentId + '">' +
168
- '<span class="js-step-title-text">' + titleText + '</span>' +
180
+ '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
169
181
  '</button>' +
170
182
  '</span>'
171
183
  }
@@ -177,7 +189,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
177
189
 
178
190
  for (var i = 0; i < togglePanels.length; i++) {
179
191
  togglePanels[i].addEventListener('click', function (event) {
180
- var stepView = new that.StepView(this.parentNode, that.$module.actions.showText, that.$module.actions.hideText)
192
+ var stepView = new that.StepView(this.parentNode, that.$module)
181
193
  stepView.toggle()
182
194
 
183
195
  var stepIsOptional = this.parentNode.hasAttribute('data-optional')
@@ -321,34 +333,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
321
333
  var that = this
322
334
 
323
335
  this.$module.showOrHideAllButton.addEventListener('click', function (event) {
324
- var shouldshowAll
325
- var showHideTexts = that.$module.querySelectorAll('.js-toggle-link')
326
336
  var textContent = this.textContent || this.innerText
337
+ var shouldShowAll = textContent === that.$module.actions.showAllText
327
338
 
328
- if (textContent === that.$module.actions.showAllText) {
329
- that.$module.showOrHideAllButton.textContent = that.$module.actions.hideAllText
330
- for (var i = 0; i < showHideTexts.length; i++) {
331
- showHideTexts[i].innerHTML = that.$module.actions.hideText
332
- }
333
- shouldshowAll = true
334
-
335
- stepNavTracker.trackClick('pageElementInteraction', 'stepNavAllShown', {
336
- label: that.$module.actions.showAllText + ': ' + that.$module.stepNavSize
337
- })
338
- } else {
339
- that.$module.showOrHideAllButton.textContent = that.$module.actions.showAllText
340
- for (var j = 0; j < showHideTexts.length; j++) {
341
- showHideTexts[j].innerHTML = that.$module.actions.showText
342
- }
343
- shouldshowAll = false
344
-
345
- stepNavTracker.trackClick('pageElementInteraction', 'stepNavAllHidden', {
346
- label: that.$module.actions.hideAllText + ': ' + that.$module.stepNavSize
347
- })
348
- }
339
+ // Fire GA click tracking
340
+ stepNavTracker.trackClick('pageElementInteraction', (shouldShowAll ? 'stepNavAllShown' : 'stepNavAllHidden'), {
341
+ label: (shouldShowAll ? that.$module.actions.showAllText : that.$module.actions.hideAllText) + ': ' + that.$module.stepNavSize
342
+ })
349
343
 
350
- that.setAllStepsShownState(shouldshowAll)
351
- that.$module.showOrHideAllButton.setAttribute('aria-expanded', shouldshowAll)
344
+ that.setAllStepsShownState(shouldShowAll)
345
+ that.$module.showOrHideAllButton.setAttribute('aria-expanded', shouldShowAll)
352
346
  that.setShowHideAllText()
353
347
 
354
348
  return false
@@ -359,21 +353,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
359
353
  var shownSteps = this.$module.querySelectorAll('.step-is-shown').length
360
354
  // Find out if the number of is-opens == total number of steps
361
355
  if (shownSteps === this.$module.totalSteps) {
362
- this.$module.showOrHideAllButton.textContent = this.$module.actions.hideAllText
356
+ this.$module.showOrHideAllButton.innerHTML = this.$module.upChevronSvg + this.$module.actions.hideAllText
363
357
  } else {
364
- this.$module.showOrHideAllButton.textContent = this.$module.actions.showAllText
358
+ this.$module.showOrHideAllButton.innerHTML = this.$module.downChevronSvg + this.$module.actions.showAllText
365
359
  }
366
360
  }
367
361
 
368
- Gemstepnav.prototype.StepView = function (stepElement, showText, hideText) {
362
+ Gemstepnav.prototype.StepView = function (stepElement, $module) {
369
363
  this.stepElement = stepElement
370
364
  this.stepContent = this.stepElement.querySelectorAll('.js-panel')[0]
371
365
  this.titleButton = this.stepElement.querySelectorAll('.js-step-title-button')[0]
372
366
  var textElement = this.stepElement.querySelectorAll('.js-step-title-text')[0]
373
367
  this.title = textElement.textContent || textElement.innerText
374
368
  this.title = this.title.replace(/^\s+|\s+$/g, '') // this is 'trim' but supporting IE8
375
- this.showText = showText
376
- this.hideText = hideText
369
+ this.showText = $module.actions.showText
370
+ this.hideText = $module.actions.hideText
371
+ this.upChevronSvg = $module.upChevronSvg
372
+ this.downChevronSvg = $module.downChevronSvg
377
373
 
378
374
  this.show = function () {
379
375
  this.setIsShown(true)
@@ -398,7 +394,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
398
394
 
399
395
  this.titleButton.setAttribute('aria-expanded', isShown)
400
396
  var showHideText = this.stepElement.querySelectorAll('.js-toggle-link')[0]
401
- showHideText.innerHTML = isShown ? this.hideText : this.showText
397
+ showHideText.innerHTML = isShown ? this.upChevronSvg + this.hideText : this.downChevronSvg + this.showText
402
398
  }
403
399
 
404
400
  this.isShown = function () {
@@ -11,9 +11,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
11
11
  this.options = {
12
12
  outOf: 65,
13
13
  applyOnInit: true,
14
- toggleText: 'Toggle between chart and table',
15
14
  autoOutdent: false,
16
15
  outdentAll: false,
16
+ chartVisibleText: 'Change to table and accessible view',
17
+ tableVisibleText: 'Change to chart view',
18
+ chartAlertText: 'Chart visible',
19
+ tableAlertText: 'Table visible',
17
20
  toggleAfter: false, // BOOL set TRUE to append the toggle link
18
21
  returnReference: false // for testing purposes
19
22
  }
@@ -27,6 +30,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
27
30
  // store a reference to the table in the object
28
31
  this.$table = $module
29
32
 
33
+ // a container around the graph element so that it can be targeted by screen readers, allowing us to inform screen reader users that the graph isn't accessible
34
+ this.$graphContainer = document.createElement('div')
35
+ this.$graphContainer.className = 'mc-chart-container'
36
+
30
37
  // lets make what will become the new graph
31
38
  this.$graph = document.createElement('div')
32
39
 
@@ -39,6 +46,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
39
46
  this.$graph.setAttribute('class', this.$table.className)
40
47
  this.$graph.classList.add('mc-chart')
41
48
 
49
+ // get the id of the current chart within the page so that it can be used during the generation of the toggleLink
50
+ this.chartId = this.getChartId($module)
51
+
42
52
  // set the stacked option based on
43
53
  // giving the table a class of mc-stacked
44
54
  this.options.stacked = this.$table.classList.contains('mc-stacked')
@@ -102,7 +112,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
102
112
  this.addClassesToHeader()
103
113
  this.applyWidths()
104
114
  this.insert()
105
- this.$table.classList.add('visually-hidden')
115
+ this.$table.classList.add('mc-hidden')
106
116
  this.applyOutdent()
107
117
  }
108
118
  }
@@ -164,24 +174,42 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
164
174
  }
165
175
 
166
176
  // construct a link to allow the user to toggle between chart and table
167
- MagnaCharta.prototype.construct.toggleLink = function (toggleText) {
168
- var link = document.createElement('a')
169
- link.setAttribute('href', '#')
170
- link.classList.add('mc-toggle-link')
171
- link.innerHTML = toggleText
172
- link.setAttribute('aria-hidden', 'true')
177
+ MagnaCharta.prototype.construct.toggleLink = function (chartVisibleText) {
178
+ var link = document.createElement('button')
179
+
180
+ // These spans are for managing the content within the button
181
+ // toggleText is the public facing content whilst toggleStatus is visually hidden content that we use to let screen reader users know that the toggle link has been clicked
182
+ var toggleText = document.createElement('span')
183
+ var toggleStatus = document.createElement('span')
184
+
185
+ toggleText.classList.add('mc-toggle-text')
186
+ toggleText.innerHTML = chartVisibleText
187
+
188
+ toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status')
189
+ toggleStatus.setAttribute('role', 'alert')
190
+
191
+ link.classList.add('mc-toggle-button')
192
+ link.appendChild(toggleText)
193
+ link.appendChild(toggleStatus)
173
194
 
174
195
  return link
175
196
  }
176
197
 
177
198
  // toggles between showing the table and showing the chart
178
- MagnaCharta.prototype.addToggleClick = function () {
199
+ MagnaCharta.prototype.addToggleClick = function (chartVisible, tableVisible, chartAlert, tableAlert) {
179
200
  var that = this
180
201
 
181
202
  this.toggleLink.addEventListener('click', function (e) {
182
203
  e.preventDefault()
183
- that.$graph.classList.toggle('visually-hidden')
184
- that.$table.classList.toggle('visually-hidden')
204
+
205
+ var toggleText = that.toggleLink.querySelector('.mc-toggle-text')
206
+ var toggleStatus = that.toggleLink.querySelector('.mc-toggle-status')
207
+
208
+ that.$graphContainer.classList.toggle('mc-hidden')
209
+ that.$table.classList.toggle('mc-hidden')
210
+
211
+ toggleText.innerHTML = toggleText.innerHTML === tableVisible ? chartVisible : tableVisible
212
+ toggleStatus.innerHTML = toggleStatus.innerHTML === tableAlert ? chartAlert : tableAlert
185
213
  })
186
214
  }
187
215
 
@@ -191,8 +219,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
191
219
  // get at options and properties
192
220
  var thead = this.construct.thead.call(this)
193
221
  var tbody = this.construct.tbody.call(this)
194
- this.toggleLink = this.construct.toggleLink(this.options.toggleText)
195
- this.addToggleClick(this.toggleLink)
222
+ this.toggleLink = this.construct.toggleLink(this.options.chartVisibleText)
223
+ this.addToggleClick(this.options.chartVisibleText, this.options.tableVisibleText, this.options.chartAlertText, this.options.tableAlertText)
196
224
 
197
225
  if (this.options.hasCaption) {
198
226
  var caption = this.construct.caption.call(this)
@@ -379,7 +407,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
379
407
  }
380
408
 
381
409
  MagnaCharta.prototype.insert = function () {
382
- this.$table.insertAdjacentElement('afterend', this.$graph)
410
+ var label = document.createElement('span')
411
+ var labelId = 'mc-chart-not-accessible-' + this.chartId
412
+
413
+ label.innerHTML = 'This content is not accessible - switch to table'
414
+ label.className = 'mc-hidden'
415
+ label.id = labelId
416
+
417
+ this.$graphContainer.setAttribute('aria-labelledby', labelId)
418
+ this.$graphContainer.appendChild(this.$graph)
419
+ this.$graphContainer.appendChild(label)
420
+
421
+ this.$table.insertAdjacentElement('afterend', this.$graphContainer)
383
422
  }
384
423
 
385
424
  MagnaCharta.prototype.applyOutdent = function () {
@@ -419,5 +458,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
419
458
  }
420
459
  }
421
460
 
461
+ MagnaCharta.prototype.getChartId = function (module) {
462
+ var allCharts = document.querySelectorAll('table.js-barchart-table')
463
+ var id = null
464
+
465
+ allCharts.forEach(function (chart, i) {
466
+ if (chart === module) {
467
+ id = i
468
+ }
469
+ })
470
+
471
+ return id
472
+ }
473
+
422
474
  Modules.MagnaCharta = MagnaCharta
423
475
  })(window.GOVUK.Modules)
@@ -7,7 +7,7 @@
7
7
 
8
8
  GOVUK.modules = {
9
9
  find: function (container) {
10
- container = container || $('body')
10
+ container = container || $(document)
11
11
 
12
12
  var modules
13
13
  var moduleSelector = '[data-module]'
@@ -74,5 +74,4 @@
74
74
  @import "components/textarea";
75
75
  @import "components/title";
76
76
  @import "components/translation-nav";
77
- @import "components/transition-countdown";
78
77
  @import "components/warning-text";
@@ -3,45 +3,38 @@ $transition-campaign-dark-blue: #1e1348;
3
3
 
4
4
  .gem-c-contextual-sidebar__brexit-related-links {
5
5
  border-top: 2px solid $govuk-brand-colour;
6
+ }
6
7
 
7
- .gem-c-contextual-sidebar__brexit-heading {
8
- @include govuk-font(19, $weight: bold);
9
- padding-top: govuk-spacing(3);
10
- margin-bottom: govuk-spacing(2);
11
- }
8
+ .gem-c-contextual-sidebar__brexit-heading {
9
+ @extend %govuk-heading-s;
10
+ margin-top: govuk-spacing(3);
11
+ margin-bottom: govuk-spacing(2);
12
12
  }
13
13
 
14
14
  .gem-c-contextual-sidebar__brexit-cta {
15
- @include govuk-font(19);
16
15
  margin-bottom: govuk-spacing(6);
17
16
  background-color: govuk-colour('light-grey', $legacy: 'grey-4');
18
- border-top: 4px solid $transition-campaign-red;
17
+ border-top: 2px solid $transition-campaign-red;
19
18
  display: block;
20
- padding: govuk-spacing(3);
19
+ padding: 0 govuk-spacing(3) govuk-spacing(3);
21
20
  text-decoration: none;
22
21
 
23
22
  .gem-c-contextual-sidebar__brexit-heading {
24
- @extend %govuk-heading-m;
25
- color: $transition-campaign-dark-blue;
23
+ color: $govuk-text-colour;
26
24
  }
27
25
 
28
26
  .gem-c-contextual-sidebar__brexit-text {
29
27
  @extend %govuk-link;
28
+ @include govuk-font(16);
30
29
 
31
30
  margin-top: 0;
32
- margin-bottom: 0;
31
+ margin-bottom: govuk-spacing(1);
33
32
  text-decoration: underline;
34
33
 
35
34
  @include govuk-media-query($from: tablet) {
36
35
  margin-bottom: govuk-spacing(2);
37
36
  }
38
37
  }
39
-
40
- @include govuk-compatibility(govuk_template) {
41
- .gem-c-contextual-sidebar__brexit-title {
42
- margin-bottom: govuk-spacing(3);
43
- }
44
- }
45
38
  }
46
39
 
47
40
  .gem-c-contextual-sidebar__brexit-cta:focus {
@@ -49,3 +42,27 @@ $transition-campaign-dark-blue: #1e1348;
49
42
  text-decoration: none;
50
43
  }
51
44
  }
45
+
46
+ .gem-c-contextual-sidebar__take-action-traffic-lights {
47
+ text-align: left;
48
+ margin-bottom: govuk-spacing(2);
49
+ }
50
+
51
+ .gem-c-contextual-sidebar__take-action-traffic-lights > li {
52
+ white-space: nowrap;
53
+ display: inline;
54
+ margin-right: 7px;
55
+ margin-bottom: govuk-spacing(1);
56
+ }
57
+
58
+ .gem-c-contextual-sidebar__take-action-traffic-lists-icon {
59
+ vertical-align: middle;
60
+ margin-top: -2px;
61
+ width: 22px;
62
+ margin-right: 2px;
63
+ }
64
+
65
+ .gem-c-contextual-sidebar__take-action-traffic-lists-text {
66
+ @include govuk-font($size: 19, $weight: bold, $line-height: 2);
67
+ vertical-align: middle;
68
+ }
@@ -7,14 +7,10 @@
7
7
 
8
8
  .gem-c-document-list__item {
9
9
  overflow: hidden;
10
- margin-bottom: govuk-spacing(4);
11
- padding-bottom: govuk-spacing(4);
12
- border-bottom: 1px solid $govuk-border-colour;
10
+ margin-bottom: govuk-spacing(5);
11
+ padding-top: govuk-spacing(2);
12
+ border-top: 1px solid $govuk-border-colour;
13
13
  list-style: none;
14
-
15
- &:last-child {
16
- border-bottom: 0;
17
- }
18
14
  }
19
15
 
20
16
  .gem-c-document-list__item-title {
@@ -52,7 +48,7 @@
52
48
  }
53
49
 
54
50
  .gem-c-document-list__subtext {
55
- margin: govuk-spacing(1) 0 0 0;
51
+ margin: 0;
56
52
  }
57
53
 
58
54
  .gem-c-document-list__item-description,
@@ -60,6 +56,10 @@
60
56
  @include govuk-font($size: 16, $line-height: 1.5);
61
57
  }
62
58
 
59
+ .gem-c-document-list__item-description--full-size {
60
+ @include govuk-font($size: 19);
61
+ }
62
+
63
63
  .gem-c-document-list__item-metadata {
64
64
  padding: 0;
65
65
  }