govuk_publishing_components 24.2.0 → 24.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js +28 -0
  3. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +52 -8
  4. data/app/assets/javascripts/govuk_publishing_components/components/details.js +1 -1
  5. data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js +108 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/show-password.js +7 -2
  7. data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +6 -2
  8. data/app/assets/stylesheets/component_guide/application.scss +0 -8
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
  10. data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +1 -1
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss +11 -0
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss +8 -1
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_reorderable-list.scss +117 -0
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +17 -13
  15. data/app/models/govuk_publishing_components/audit_applications.rb +1 -1
  16. data/app/models/govuk_publishing_components/audit_comparer.rb +2 -2
  17. data/app/models/govuk_publishing_components/component_example.rb +4 -3
  18. data/app/views/govuk_publishing_components/audit/show.html.erb +211 -199
  19. data/app/views/govuk_publishing_components/components/_accordion.html.erb +3 -3
  20. data/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb +8 -5
  21. data/app/views/govuk_publishing_components/components/_contents_list.html.erb +1 -1
  22. data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb +6 -6
  23. data/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb +1 -1
  24. data/app/views/govuk_publishing_components/components/_image_card.html.erb +1 -1
  25. data/app/views/govuk_publishing_components/components/_list.html.erb +5 -5
  26. data/app/views/govuk_publishing_components/components/_metadata.html.erb +1 -1
  27. data/app/views/govuk_publishing_components/components/_organisation_logo.html.erb +1 -1
  28. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +1 -1
  29. data/app/views/govuk_publishing_components/components/_radio.html.erb +2 -1
  30. data/app/views/govuk_publishing_components/components/_reorderable_list.html.erb +45 -0
  31. data/app/views/govuk_publishing_components/components/_search.html.erb +27 -16
  32. data/app/views/govuk_publishing_components/components/_share_links.html.erb +1 -1
  33. data/app/views/govuk_publishing_components/components/_show_password.html.erb +6 -4
  34. data/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +1 -1
  36. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +1 -1
  37. data/app/views/govuk_publishing_components/components/_summary_list.html.erb +67 -30
  38. data/app/views/govuk_publishing_components/components/_taxonomy_list.html.erb +1 -1
  39. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +1 -1
  40. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +1 -1
  41. data/app/views/govuk_publishing_components/components/docs/accordion.yml +29 -0
  42. data/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml +22 -0
  43. data/app/views/govuk_publishing_components/components/docs/inverse_header.yml +1 -1
  44. data/app/views/govuk_publishing_components/components/docs/radio.yml +14 -1
  45. data/app/views/govuk_publishing_components/components/docs/reorderable_list.yml +85 -0
  46. data/app/views/govuk_publishing_components/components/docs/search.yml +10 -0
  47. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +2 -0
  48. data/app/views/govuk_publishing_components/components/layout_header/_search.html.erb +17 -3
  49. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +2 -2
  50. data/config/locales/en.yml +25 -15
  51. data/lib/govuk_publishing_components/app_helpers/table_helper.rb +2 -1
  52. data/lib/govuk_publishing_components/presenters/machine_readable/faq_page_schema.rb +1 -1
  53. data/lib/govuk_publishing_components/presenters/machine_readable/html_publication_schema.rb +1 -7
  54. data/lib/govuk_publishing_components/presenters/meta_tags.rb +1 -2
  55. data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb +2 -2
  56. data/lib/govuk_publishing_components/version.rb +1 -1
  57. data/lib/tasks/govuk_publishing_components_tasks.rake +1 -1
  58. data/node_modules/sortablejs/LICENSE +21 -0
  59. data/node_modules/sortablejs/README.md +815 -0
  60. data/node_modules/sortablejs/Sortable.js +3721 -0
  61. data/node_modules/sortablejs/Sortable.min.js +2 -0
  62. data/node_modules/sortablejs/modular/sortable.complete.esm.js +3713 -0
  63. data/node_modules/sortablejs/modular/sortable.core.esm.js +3710 -0
  64. data/node_modules/sortablejs/modular/sortable.esm.js +3711 -0
  65. data/node_modules/sortablejs/package.json +56 -0
  66. metadata +19 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9ce32a486835dfd2796501f4cf80d3403ad4074fa1a832678a221fb9b607f3d3
4
- data.tar.gz: 3b67448789550b585b08a3aa96666ac4fdc7a18cd5c6c8621668aa8e5ed91506
3
+ metadata.gz: d3b0fa1ddc43a2e926edce2c1f0417db5cbb0b1924caa41f91b817f3fc0d5647
4
+ data.tar.gz: 9e165fe5648aa0d6be420b8a00517c5295b58d5c6050b4b55646c8924272338f
5
5
  SHA512:
6
- metadata.gz: c3a19281a025aa4f0a0c51a14c06844d4ad67b2de6217fe57cf87bef328ed42a0bc7b959d0c07672d58e68b7e7995d7b2e02a47744723854ad7e3444ee3b748f
7
- data.tar.gz: f866b24a0aa8c7cce2dfe1f3c4bab39aa977d1e40ded6abc218563c365fba0f743efe2a4d1ce47091beb5610b98f2c0acc367b18b11a533cfbe92f9eadb5ece9
6
+ metadata.gz: 75bb0f5311883c23c5b83cfb18cf619acc923fed727d174f4d72ea8cae9aacd99e1a701889b72779cc76d72b2596a2e0d4765fa8c11a150c01c7554f95e76719
7
+ data.tar.gz: 51c83f3aadc86d2ed048e34c739c4d2a976524855152890a392c1f633e8e371914bdf64525c6297c310b2855bd6062dddb80930923f994c61ca469dbbba88953
@@ -405,6 +405,34 @@
405
405
  ],
406
406
  '/eubusiness': [
407
407
  ['Heading', 'Additional help and support']
408
+ ],
409
+ '/coronavirus': [
410
+ ['Percent', 20],
411
+ ['Percent', 40],
412
+ ['Percent', 60],
413
+ ['Percent', 80],
414
+ ['Percent', 100]
415
+ ],
416
+ '/coronavirus/education-and-childcare': [
417
+ ['Percent', 20],
418
+ ['Percent', 40],
419
+ ['Percent', 60],
420
+ ['Percent', 80],
421
+ ['Percent', 100]
422
+ ],
423
+ '/coronavirus/worker-support': [
424
+ ['Percent', 20],
425
+ ['Percent', 40],
426
+ ['Percent', 60],
427
+ ['Percent', 80],
428
+ ['Percent', 100]
429
+ ],
430
+ '/coronavirus/business-support': [
431
+ ['Percent', 20],
432
+ ['Percent', 40],
433
+ ['Percent', 60],
434
+ ['Percent', 80],
435
+ ['Percent', 100]
408
436
  ]
409
437
  }
410
438
 
@@ -11,8 +11,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
11
11
 
12
12
  GemAccordion.prototype.start = function ($module) {
13
13
  this.$module = $module[0]
14
+ this.sectionClass = 'gem-c-accordion__section'
14
15
  this.moduleId = this.$module.getAttribute('id')
15
- this.sections = this.$module.querySelectorAll('.gem-c-accordion__section')
16
+ this.sections = this.$module.querySelectorAll('.' + this.sectionClass)
16
17
  this.openAllButton = ''
17
18
  this.browserSupportsSessionStorage = helper.checkForSessionStorage()
18
19
  this.controlsClass = 'gem-c-accordion__controls'
@@ -36,6 +37,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
36
37
  this.initControls()
37
38
  this.initSectionHeaders()
38
39
 
40
+ // Feature flag for anchor tag navigation used on manuals
41
+ if (this.$module.getAttribute('data-anchor-navigation')) {
42
+ this.openByAnchorOnLoad()
43
+ this.addEventListenersForAnchors()
44
+ }
45
+
39
46
  // See if "Show all sections" button text should be updated
40
47
  var areAllSectionsOpen = this.checkIfAllSectionsOpen()
41
48
  this.updateOpenAllButton(areAllSectionsOpen)
@@ -59,7 +66,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
59
66
  accordionControls.appendChild(this.openAllButton)
60
67
  this.$module.insertBefore(accordionControls, this.$module.firstChild)
61
68
 
62
- // Build addtional wrapper for open all toggle text, place icon after wrapped text.
69
+ // Build additional wrapper for open all toggle text, place icon after wrapped text.
63
70
  var wrapperOpenAllText = document.createElement('span')
64
71
  wrapperOpenAllText.classList.add(this.openAllTextClass)
65
72
  this.openAllButton.insertBefore(wrapperOpenAllText, this.openAllButton.childNodes[0] || null)
@@ -74,6 +81,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
74
81
  nodeListForEach(this.sections, function (section, i) {
75
82
  // Set header attributes
76
83
  var header = section.querySelector('.' + this.sectionHeaderClass)
84
+
77
85
  this.initHeaderAttributes(header, i)
78
86
  this.setExpanded(this.isExpanded(section), section)
79
87
 
@@ -106,12 +114,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
106
114
  srPause.classList.add('govuk-visually-hidden')
107
115
  srPause.innerHTML = ', '
108
116
 
109
- // Build addtional copy for assistive technology
110
- var srAddtionalCopy = document.createElement('span')
111
- srAddtionalCopy.classList.add('govuk-visually-hidden')
112
- srAddtionalCopy.innerHTML = ' this section'
117
+ // Build additional copy for assistive technology
118
+ var srAdditionalCopy = document.createElement('span')
119
+ srAdditionalCopy.classList.add('govuk-visually-hidden')
120
+ srAdditionalCopy.innerHTML = ' this section'
113
121
 
114
- // Build addtional wrapper for toggle text, place icon after wrapped text.
122
+ // Build additional wrapper for toggle text, place icon after wrapped text.
115
123
  var wrapperShowHideIcon = document.createElement('span')
116
124
  var icon = document.createElement('span')
117
125
  icon.classList.add(this.upChevonIconClass)
@@ -138,7 +146,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
138
146
  }
139
147
 
140
148
  button.appendChild(showIcons)
141
- button.appendChild(srAddtionalCopy)
149
+ button.appendChild(srAdditionalCopy)
142
150
  }
143
151
 
144
152
  // When section toggled, set and store state
@@ -283,5 +291,41 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
283
291
  }
284
292
  }
285
293
 
294
+ // Navigate to and open accordions with anchored content on page load if a hash is present
295
+ GemAccordion.prototype.openByAnchorOnLoad = function () {
296
+ if (window.location.hash && this.$module.querySelector(window.location.hash)) {
297
+ this.openForAnchor(window.location.hash)
298
+ }
299
+ }
300
+
301
+ // Add event listeners for links to open accordion sections when navigated to using said anchor links on the page
302
+ // Adding an event listener to all anchor link a tags in an accordion is risky but we circumvent this risk partially by only being a layer of accordion behaviour instead of any sort of change to link behaviour
303
+ GemAccordion.prototype.addEventListenersForAnchors = function () {
304
+ var links = this.$module.querySelectorAll('.' + this.sectionInnerContent + ' a[href*="#"]')
305
+
306
+ links.forEach(function (link) {
307
+ if (link.pathname === window.location.pathname) {
308
+ link.addEventListener('click', this.openForAnchor.bind(this, link.hash))
309
+ }
310
+ }.bind(this))
311
+ }
312
+
313
+ // Find the parent accordion section for the given id and open it
314
+ GemAccordion.prototype.openForAnchor = function (hash) {
315
+ var target = document.querySelector(hash)
316
+ var section = this.getContainingSection(target)
317
+
318
+ this.setExpanded(true, section)
319
+ }
320
+
321
+ // Loop through the given ids ancestors until the parent section class is found
322
+ GemAccordion.prototype.getContainingSection = function (target) {
323
+ while (!target.classList.contains(this.sectionClass)) {
324
+ target = target.parentElement
325
+ }
326
+
327
+ return target
328
+ }
329
+
286
330
  Modules.GemAccordion = GemAccordion
287
331
  })(window.GOVUK.Modules)
@@ -13,7 +13,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
13
13
 
14
14
  // If a custom label has been provided, we can simply call the tracking module
15
15
  if (customTrackLabel) {
16
- var trackDetails = new window.GOVUK.Modules.TrackClick()
16
+ var trackDetails = new window.GOVUK.Modules.GemTrackClick()
17
17
  trackDetails.start($module)
18
18
  } else {
19
19
  // If no custom label is set, we use the open/close status as the label
@@ -0,0 +1,108 @@
1
+ //= require sortablejs/Sortable.js
2
+ window.GOVUK = window.GOVUK || {}
3
+ window.GOVUK.Modules = window.GOVUK.Modules || {};
4
+
5
+ (function (Modules) {
6
+ function ReorderableList () { }
7
+
8
+ ReorderableList.prototype.start = function ($module) {
9
+ this.$module = $module[0]
10
+ this.$upButtons = this.$module.querySelectorAll('.js-reorderable-list-up')
11
+ this.$downButtons = this.$module.querySelectorAll('.js-reorderable-list-down')
12
+
13
+ this.sortable = window.Sortable.create(this.$module, { // eslint-disable-line new-cap
14
+ chosenClass: 'gem-c-reorderable-list__item--chosen',
15
+ dragClass: 'gem-c-reorderable-list__item--drag',
16
+ onSort: function () {
17
+ this.updateOrderIndexes()
18
+ this.triggerEvent(this.$module, 'reorder-drag')
19
+ }.bind(this)
20
+ })
21
+
22
+ if (typeof window.matchMedia === 'function') {
23
+ this.setupResponsiveChecks()
24
+ } else {
25
+ this.sortable.option('disabled', true)
26
+ }
27
+
28
+ var boundOnClickUpButton = this.onClickUpButton.bind(this)
29
+ this.$upButtons.forEach(function (button) {
30
+ button.addEventListener('click', boundOnClickUpButton)
31
+ })
32
+
33
+ var boundOnClickDownButton = this.onClickDownButton.bind(this)
34
+ this.$downButtons.forEach(function (button) {
35
+ button.addEventListener('click', boundOnClickDownButton)
36
+ })
37
+ }
38
+
39
+ ReorderableList.prototype.setupResponsiveChecks = function () {
40
+ var tabletBreakpoint = '40.0625em' // ~640px
41
+ this.mediaQueryList = window.matchMedia('(min-width: ' + tabletBreakpoint + ')')
42
+ this.mediaQueryList.addListener(this.checkMode.bind(this))
43
+ this.checkMode()
44
+ }
45
+
46
+ ReorderableList.prototype.checkMode = function () {
47
+ this.sortable.option('disabled', !this.mediaQueryList.matches)
48
+ }
49
+
50
+ ReorderableList.prototype.onClickUpButton = function (e) {
51
+ var item = e.target.closest('.gem-c-reorderable-list__item')
52
+ var previousItem = item.previousElementSibling
53
+ if (item && previousItem) {
54
+ item.parentNode.insertBefore(item, previousItem)
55
+ this.updateOrderIndexes()
56
+ }
57
+ // if triggered by keyboard preserve focus on button
58
+ if (e.detail === 0) {
59
+ if (item !== item.parentNode.firstElementChild) {
60
+ e.target.focus()
61
+ } else {
62
+ e.target.nextElementSibling.focus()
63
+ }
64
+ }
65
+ this.triggerEvent(e.target, 'reorder-move-up')
66
+ }
67
+
68
+ ReorderableList.prototype.onClickDownButton = function (e) {
69
+ var item = e.target.closest('.gem-c-reorderable-list__item')
70
+ var nextItem = item.nextElementSibling
71
+ if (item && nextItem) {
72
+ item.parentNode.insertBefore(item, nextItem.nextElementSibling)
73
+ this.updateOrderIndexes()
74
+ }
75
+ // if triggered by keyboard preserve focus on button
76
+ if (e.detail === 0) {
77
+ if (item !== item.parentNode.lastElementChild) {
78
+ e.target.focus()
79
+ } else {
80
+ e.target.previousElementSibling.focus()
81
+ }
82
+ }
83
+ this.triggerEvent(e.target, 'reorder-move-down')
84
+ }
85
+
86
+ ReorderableList.prototype.updateOrderIndexes = function () {
87
+ var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
88
+ $orderInputs.forEach(function (input, index) {
89
+ input.setAttribute('value', index + 1)
90
+ })
91
+ }
92
+
93
+ ReorderableList.prototype.triggerEvent = function (element, eventName) {
94
+ var params = { bubbles: true, cancelable: true }
95
+ var event
96
+
97
+ if (typeof window.CustomEvent === 'function') {
98
+ event = new window.CustomEvent(eventName, params)
99
+ } else {
100
+ event = document.createEvent('CustomEvent')
101
+ event.initCustomEvent(eventName, params.bubbles, params.cancelable)
102
+ }
103
+
104
+ element.dispatchEvent(event)
105
+ }
106
+
107
+ Modules.ReorderableList = ReorderableList
108
+ })(window.GOVUK.Modules)
@@ -11,8 +11,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
11
11
  this.$module.revertToPasswordOnFormSubmit = this.revertToPasswordOnFormSubmit.bind(this)
12
12
  this.input.classList.add('gem-c-input--with-password')
13
13
 
14
- this.showPasswordText = this.$module.getAttribute('data-show')
15
- this.hidePasswordText = this.$module.getAttribute('data-hide')
14
+ this.showPasswordText = this.$module.getAttribute('data-show-text')
15
+ this.hidePasswordText = this.$module.getAttribute('data-hide-text')
16
+ this.showPasswordFullText = this.$module.getAttribute('data-show-full-text')
17
+ this.hidePasswordFullText = this.$module.getAttribute('data-hide-full-text')
16
18
  this.shownPassword = this.$module.getAttribute('data-announce-show')
17
19
  this.hiddenPassword = this.$module.getAttribute('data-announce-hide')
18
20
 
@@ -27,6 +29,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
27
29
  this.showHide.className = 'gem-c-show-password__toggle'
28
30
  this.showHide.setAttribute('aria-controls', this.input.getAttribute('id'))
29
31
  this.showHide.setAttribute('type', 'button')
32
+ this.showHide.setAttribute('aria-label', this.showPasswordFullText)
30
33
  this.showHide.innerHTML = this.showPasswordText
31
34
  this.wrapper.insertBefore(this.showHide, this.input.nextSibling)
32
35
 
@@ -50,12 +53,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
50
53
  ShowPassword.prototype.togglePassword = function (event) {
51
54
  event.preventDefault()
52
55
  this.showHide.innerHTML = this.showHide.innerHTML === this.showPasswordText ? this.hidePasswordText : this.showPasswordText
56
+ this.showHide.setAttribute('aria-label', this.showHide.getAttribute('aria-label') === this.showPasswordFullText ? this.hidePasswordFullText : this.showPasswordFullText)
53
57
  this.statusText.innerHTML = this.statusText.innerHTML === this.shownPassword ? this.hiddenPassword : this.shownPassword
54
58
  this.input.setAttribute('type', this.input.getAttribute('type') === 'text' ? 'password' : 'text')
55
59
  }
56
60
 
57
61
  ShowPassword.prototype.revertToPasswordOnFormSubmit = function (event) {
58
62
  this.showHide.innerHTML = this.showPasswordText
63
+ this.showHide.setAttribute('aria-label', this.showPasswordFullText)
59
64
  this.statusText.innerHTML = this.hiddenPassword
60
65
  this.input.setAttribute('type', 'password')
61
66
  }
@@ -1,3 +1,5 @@
1
+ /* eslint-disable no-var */
2
+
1
3
  // used by the header navigation from govuk_template
2
4
 
3
5
  (function () {
@@ -14,6 +16,8 @@
14
16
  var targetClass = target.getAttribute('class') || ''
15
17
  var sourceClass = this.getAttribute('class') || ''
16
18
  var isSearchToggle = sourceClass.match('search-toggle')
19
+ var showText = this.getAttribute('data-show-text') || 'Show search'
20
+ var hideText = this.getAttribute('data-hide-text') || 'Hide search'
17
21
 
18
22
  if (targetClass.indexOf('js-visible') !== -1) {
19
23
  target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
@@ -23,12 +27,12 @@
23
27
  if (sourceClass.indexOf('js-visible') !== -1) {
24
28
  this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
25
29
  if (isSearchToggle) {
26
- this.innerText = 'Show search'
30
+ this.innerText = showText
27
31
  }
28
32
  } else {
29
33
  this.setAttribute('class', sourceClass + ' js-visible')
30
34
  if (isSearchToggle) {
31
- this.innerText = 'Hide search'
35
+ this.innerText = hideText
32
36
  }
33
37
  }
34
38
  this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')
@@ -262,14 +262,6 @@ html {
262
262
  }
263
263
  }
264
264
 
265
- // Hide survey banner
266
- // stylelint-disable selector-max-id
267
- #user-satisfaction-survey-container,
268
- #global-cookie-message {
269
- display: none;
270
- }
271
- // stylelint-enable selector-max-id
272
-
273
265
  // Rouge syntax highlighting
274
266
  // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
275
267
 
@@ -56,6 +56,7 @@
56
56
  @import "components/print-link";
57
57
  @import "components/radio";
58
58
  @import "components/related-navigation";
59
+ @import "components/reorderable-list";
59
60
  @import "components/search";
60
61
  @import "components/select";
61
62
  @import "components/share-links";
@@ -1,7 +1,7 @@
1
1
  // This is the file that the application needs to include in order to use
2
2
  // the components.
3
3
 
4
- @import "components/helpers/govuk-frontend-settings";
4
+ @import "govuk_frontend_support";
5
5
 
6
6
  @import "components/print/accordion";
7
7
  @import "components/print/attachment";
@@ -21,6 +21,17 @@
21
21
  border-color: govuk-colour("white");
22
22
  }
23
23
 
24
+ .gem-c-breadcrumbs--border-bottom {
25
+ border-bottom: 1px solid $govuk-border-colour;
26
+ padding-bottom: govuk-spacing(1);
27
+
28
+ &.govuk-breadcrumbs--collapse-on-mobile {
29
+ @include govuk-media-query($until: tablet) {
30
+ padding-bottom: 0;
31
+ }
32
+ }
33
+ }
34
+
24
35
  .govuk-breadcrumbs--collapse-on-mobile {
25
36
  @include govuk-media-query($until: tablet) {
26
37
  .govuk-breadcrumbs__list-item {
@@ -46,11 +46,18 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
46
46
  }
47
47
  }
48
48
 
49
+ // Override style from design system so we can have consistent
50
+ // padding on the the banner and the confirmation
51
+
52
+ .govuk-cookie-banner {
53
+ padding-top: 0;
54
+ }
55
+
49
56
  // Override the styles from govuk_template
50
57
  // stylelint-disable selector-max-id
51
58
  .gem-c-cookie-banner#global-cookie-message {
52
59
  background-color: $govuk-cookie-banner-background;
53
- padding: 0;
60
+ padding: govuk-spacing(3) 0 0 0;
54
61
  box-sizing: border-box;
55
62
 
56
63
  .gem-c-cookie-banner__message,
@@ -0,0 +1,117 @@
1
+ .gem-c-reorderable-list {
2
+ @include govuk-font(19, bold);
3
+
4
+ list-style-type: none;
5
+ margin-bottom: govuk-spacing(6);
6
+ margin-top: 0;
7
+ padding-left: 0;
8
+ position: relative;
9
+
10
+ .govuk-form-group {
11
+ margin-bottom: 0;
12
+ }
13
+ }
14
+
15
+ .gem-c-reorderable-list__item {
16
+ margin-bottom: govuk-spacing(3);
17
+ border: 1px solid $govuk-border-colour;
18
+ padding: govuk-spacing(3);
19
+ }
20
+
21
+ .gem-c-reorderable-list__item--chosen {
22
+ background-color: govuk-colour('light-grey');
23
+ outline: 2px dotted $govuk-border-colour;
24
+ }
25
+
26
+ .gem-c-reorderable-list__item--drag {
27
+ background-color: govuk-colour('white');
28
+ list-style-type: none;
29
+
30
+ .gem-c-reorderable-list__actions {
31
+ visibility: hidden;
32
+ }
33
+ }
34
+
35
+ .gem-c-reorderable-list__wrapper {
36
+ display: block;
37
+
38
+ @include govuk-media-query($from: desktop) {
39
+ display: inline-flex;
40
+ width: 100%;
41
+ }
42
+ }
43
+
44
+ .gem-c-reorderable-list__content {
45
+ margin-bottom: govuk-spacing(2);
46
+ @include govuk-media-query($from: desktop) {
47
+ margin-bottom: 0;
48
+ flex: 0 1 auto;
49
+ min-width: 65%;
50
+ }
51
+ }
52
+
53
+ .gem-c-reorderable-list__title {
54
+ margin: 0;
55
+ }
56
+
57
+ .gem-c-reorderable-list__description {
58
+ @include govuk-font(16, regular);
59
+ margin: 0;
60
+ }
61
+
62
+ .gem-c-reorderable-list__actions {
63
+ display: block;
64
+
65
+ @include govuk-media-query($from: desktop) {
66
+ flex: 1 0 auto;
67
+ text-align: right;
68
+ }
69
+
70
+ .gem-c-button {
71
+ display: none;
72
+ }
73
+ }
74
+
75
+ .js-enabled {
76
+ .gem-c-reorderable-list__item {
77
+ @include govuk-media-query($from: desktop) {
78
+ cursor: move;
79
+ }
80
+ }
81
+
82
+ .gem-c-reorderable-list__actions .govuk-form-group {
83
+ display: none;
84
+ }
85
+
86
+ .gem-c-reorderable-list__actions .gem-c-button {
87
+ display: inline-block;
88
+ margin-left: govuk-spacing(3);
89
+ width: 80px;
90
+ }
91
+
92
+ .gem-c-reorderable-list__actions .gem-c-button:first-of-type {
93
+ margin-left: 0;
94
+
95
+ @include govuk-media-query($from: desktop) {
96
+ margin-left: govuk-spacing(3);
97
+ }
98
+ }
99
+
100
+ .gem-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
101
+ .gem-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
102
+ display: none;
103
+
104
+ @include govuk-media-query($from: desktop) {
105
+ display: inline-block;
106
+ visibility: hidden;
107
+ }
108
+ }
109
+
110
+ .gem-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
111
+ margin-left: 0;
112
+
113
+ @include govuk-media-query($from: desktop) {
114
+ margin-left: govuk-spacing(3);
115
+ }
116
+ }
117
+ }