govuk_publishing_components 35.16.0 → 35.17.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/action-link-arrow--light.png +0 -0
  3. data/app/assets/images/govuk_publishing_components/action-link-arrow--light.svg +7 -0
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +2 -5
  5. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +19 -15
  6. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-video-tracker.js +7 -1
  7. data/app/assets/javascripts/govuk_publishing_components/components/option-select.js +9 -9
  8. data/app/assets/stylesheets/component_guide/application.scss +6 -6
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +33 -15
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss +3 -2
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss +3 -3
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss +2 -2
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_cards.scss +5 -5
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +1 -1
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +1 -1
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +2 -2
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +5 -5
  18. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +40 -35
  19. data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss +1 -1
  20. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +24 -5
  21. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +5 -0
  22. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +23 -19
  23. data/app/assets/stylesheets/govuk_publishing_components/components/_table.scss +6 -6
  24. data/app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss +2 -1
  25. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss +3 -1
  26. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +4 -4
  27. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss +2 -2
  28. data/app/views/govuk_publishing_components/components/_action_link.html.erb +2 -0
  29. data/app/views/govuk_publishing_components/components/_attachment.html.erb +1 -1
  30. data/app/views/govuk_publishing_components/components/_contents_list.html.erb +20 -10
  31. data/app/views/govuk_publishing_components/components/_metadata.html.erb +1 -1
  32. data/app/views/govuk_publishing_components/components/_option_select.html.erb +3 -3
  33. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +6 -6
  34. data/app/views/govuk_publishing_components/components/_search.html.erb +3 -0
  35. data/app/views/govuk_publishing_components/components/_share_links.html.erb +9 -9
  36. data/app/views/govuk_publishing_components/components/docs/action_link.yml +5 -0
  37. data/app/views/govuk_publishing_components/components/docs/contents_list.yml +1 -0
  38. data/app/views/govuk_publishing_components/components/docs/search.yml +11 -0
  39. data/config/locales/ar.yml +1 -0
  40. data/config/locales/az.yml +1 -0
  41. data/config/locales/be.yml +1 -0
  42. data/config/locales/bg.yml +1 -0
  43. data/config/locales/bn.yml +1 -0
  44. data/config/locales/cs.yml +1 -0
  45. data/config/locales/cy.yml +1 -0
  46. data/config/locales/da.yml +1 -0
  47. data/config/locales/de.yml +1 -0
  48. data/config/locales/dr.yml +1 -0
  49. data/config/locales/el.yml +1 -0
  50. data/config/locales/en.yml +2 -1
  51. data/config/locales/es-419.yml +1 -0
  52. data/config/locales/es.yml +1 -0
  53. data/config/locales/et.yml +1 -0
  54. data/config/locales/fa.yml +1 -0
  55. data/config/locales/fi.yml +1 -0
  56. data/config/locales/fr.yml +1 -0
  57. data/config/locales/gd.yml +1 -0
  58. data/config/locales/gu.yml +1 -0
  59. data/config/locales/he.yml +1 -0
  60. data/config/locales/hi.yml +1 -0
  61. data/config/locales/hr.yml +1 -0
  62. data/config/locales/hu.yml +1 -0
  63. data/config/locales/hy.yml +1 -0
  64. data/config/locales/id.yml +1 -0
  65. data/config/locales/is.yml +1 -0
  66. data/config/locales/it.yml +1 -0
  67. data/config/locales/ja.yml +1 -0
  68. data/config/locales/ka.yml +1 -0
  69. data/config/locales/kk.yml +1 -0
  70. data/config/locales/ko.yml +1 -0
  71. data/config/locales/lt.yml +1 -0
  72. data/config/locales/lv.yml +1 -0
  73. data/config/locales/ms.yml +1 -0
  74. data/config/locales/mt.yml +1 -0
  75. data/config/locales/nl.yml +1 -0
  76. data/config/locales/no.yml +1 -0
  77. data/config/locales/pa-pk.yml +1 -0
  78. data/config/locales/pa.yml +1 -0
  79. data/config/locales/pl.yml +1 -0
  80. data/config/locales/ps.yml +1 -0
  81. data/config/locales/pt.yml +1 -0
  82. data/config/locales/ro.yml +1 -0
  83. data/config/locales/ru.yml +1 -0
  84. data/config/locales/si.yml +1 -0
  85. data/config/locales/sk.yml +1 -0
  86. data/config/locales/sl.yml +1 -0
  87. data/config/locales/so.yml +1 -0
  88. data/config/locales/sq.yml +1 -0
  89. data/config/locales/sr.yml +1 -0
  90. data/config/locales/sv.yml +1 -0
  91. data/config/locales/sw.yml +1 -0
  92. data/config/locales/ta.yml +1 -0
  93. data/config/locales/th.yml +1 -0
  94. data/config/locales/tk.yml +1 -0
  95. data/config/locales/tr.yml +1 -0
  96. data/config/locales/uk.yml +1 -0
  97. data/config/locales/ur.yml +1 -0
  98. data/config/locales/uz.yml +1 -0
  99. data/config/locales/vi.yml +1 -0
  100. data/config/locales/zh-hk.yml +1 -0
  101. data/config/locales/zh-tw.yml +1 -0
  102. data/config/locales/zh.yml +1 -0
  103. data/lib/govuk_publishing_components/presenters/contents_list_helper.rb +8 -0
  104. data/lib/govuk_publishing_components/presenters/meta_tags.rb +3 -0
  105. data/lib/govuk_publishing_components/version.rb +1 -1
  106. metadata +5 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d631949b7bdb6aa90aff397986118f929cbae4071ef96b3a623c123c6496224d
4
- data.tar.gz: ef75a103619c27bc964664673a17475579132d0b909e254fce0afcc6316256d9
3
+ metadata.gz: b2ae98a5a0bfe9237ad8666586cf56d55c5f737e03cac016826b577ad6b280e0
4
+ data.tar.gz: 66a94a3ef052fff63ba972df2ad0b39bf48220a42308c1d5bb06ba5343dbf621
5
5
  SHA512:
6
- metadata.gz: '01786b90a26218b6b5dff054852d4e67a77f36d307029ff6fd03f8b15cd005e9264f8719a03f78f05dc776f284c24c972eb6101940e8afd41a44a696c3b404f5'
7
- data.tar.gz: 775eb1304962e2349b3e19c8ce7acfb92dc927443a7a01253692909c174f6b5e196129d40104f773794b2ac8e1674e0c65361e605808910f01163b9d69ad5f6a
6
+ metadata.gz: 0e20d31b9ece60b5bda9387d1b87396dd4089fe10c6c808db6b11201988f7d07e2f23befc0d77a37f7842eda137edf9a200e963766b6971bcea707bfa9300e22
7
+ data.tar.gz: a4e27aeecf3c73c9a105fbe4e307aedc6acd1e489349c917b8341b51f42b5b7bd2d6cab2e6b6ae3f864fdf5da69fa4db68ed1023db15cf73c0910521ff3e2f9a
@@ -0,0 +1,7 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
2
+ <circle cx="13.5" cy="13.5" r="13.5" fill="#EEEFEF"/>
3
+ <g transform="translate(5 3.5) scale(0.85)">
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9429 11.7949L10.4402 7.29222L11.7327 5.99967L17.528 11.7949L11.7327 17.5902L10.4402 16.2976L14.9429 11.7949Z" fill="#000000"/>
5
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M3.95631 10.881L15.4414 10.881L15.4414 12.709L3.95631 12.709L3.95631 10.881Z" fill="#000000"/>
6
+ </g>
7
+ </svg>
@@ -288,11 +288,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
288
288
  return null
289
289
  }
290
290
 
291
- // In order to extract the number of results from resultCount (which is a string at this point (e.g. '12,345 results')), we remove the comma and
292
- // split string at the space character so it can be parsed as an integer
293
- resultCount = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(resultCount.textContent)
294
- resultCount = resultCount.replace(',', '')
295
- resultCount = resultCount.split(' ')[0]
291
+ // Remove anything that isn't a number from the result count heading. E.g. 'Results:' or the comma in '1,234'
292
+ resultCount = resultCount.textContent.replace(/[^0-9]+/g, '')
296
293
 
297
294
  return parseInt(resultCount)
298
295
  },
@@ -28,7 +28,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
28
28
  schema_name: this.getMetaContent('schema-name'),
29
29
  content_id: this.getMetaContent('content-id'),
30
30
 
31
- browse_topic: this.getMetaContent('section'),
31
+ browse_topic: this.getMetaContent('ga4-browse-topic'),
32
32
  navigation_page_type: this.getMetaContent('navigation-page-type'),
33
33
  navigation_list_type: this.getMetaContent('navigation-list-type'),
34
34
  step_navs: this.getMetaContent('stepnavs'),
@@ -57,10 +57,11 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
57
57
  emergency_banner: document.querySelector('[data-ga4-emergency-banner]') ? 'true' : undefined,
58
58
  phase_banner: this.getElementAttribute('data-ga4-phase-banner') || undefined,
59
59
  devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
60
- cookie_banner: document.querySelector('[data-ga4-cookie-banner]') ? 'true' : undefined,
61
- intervention: this.getInterventionPresence(),
60
+ cookie_banner: this.getBannerPresence('[data-ga4-cookie-banner]'),
61
+ intervention: this.getBannerPresence('[data-ga4-intervention-banner]'),
62
62
  query_string: this.getQueryString(),
63
- search_term: this.getSearchTerm()
63
+ search_term: this.getSearchTerm(),
64
+ spelling_suggestion: this.getMetaContent('spelling-suggestion')
64
65
  }
65
66
  }
66
67
  window.GOVUK.analyticsGa4.core.sendData(data)
@@ -68,7 +69,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
68
69
  },
69
70
 
70
71
  getLocation: function () {
71
- return this.PIIRemover.stripPII(this.stripGaParam(document.location.href))
72
+ return this.PIIRemover.stripPIIWithOverride(this.stripGaParam(document.location.href), true, true)
72
73
  },
73
74
 
74
75
  getSearch: function () {
@@ -95,8 +96,8 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
95
96
  getQueryString: function () {
96
97
  var queryString = this.getSearch()
97
98
  if (queryString) {
98
- queryString = this.PIIRemover.stripPIIWithOverride(queryString, true, true)
99
99
  queryString = this.stripGaParam(queryString)
100
+ queryString = this.PIIRemover.stripPIIWithOverride(queryString, true, true)
100
101
  queryString = queryString.substring(1) // removes the '?' character from the start.
101
102
  return queryString
102
103
  }
@@ -115,7 +116,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
115
116
  },
116
117
 
117
118
  getTitle: function () {
118
- return this.PIIRemover.stripPII(document.title)
119
+ return this.PIIRemover.stripPIIWithOverride(document.title, true, true)
119
120
  },
120
121
 
121
122
  // window.httpStatusCode is set in the source of the error page in static
@@ -148,7 +149,10 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
148
149
  var content = document.getElementById('content')
149
150
  var html = document.querySelector('html')
150
151
  if (content) {
151
- return content.getAttribute('lang') || this.nullValue
152
+ var contentLanguage = content.getAttribute('lang')
153
+ if (contentLanguage) {
154
+ return contentLanguage
155
+ }
152
156
  }
153
157
  // html.getAttribute('lang') is untested - Jasmine would not allow lang to be set on <html>.
154
158
  return html.getAttribute('lang') || this.nullValue
@@ -164,18 +168,18 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
164
168
  return (withdrawn === 'withdrawn') ? 'true' : 'false'
165
169
  },
166
170
 
167
- getInterventionPresence: function () {
171
+ getBannerPresence: function (bannerSelector) {
168
172
  /* If the user hides the banner using JS, a cookie is set to hide it on future page loads.
169
- * Therefore we need to start the intervention banner early so that it hides if this cookie exists.
173
+ * Therefore we need to start the banner module early so that it hides if this cookie exists.
170
174
  * Without this, our pageview object will track the banner as visible before it gets hidden. */
171
175
 
172
- var intervention = document.querySelector('[data-ga4-intervention-banner]')
176
+ var banner = document.querySelector(bannerSelector)
173
177
 
174
- if (intervention) {
175
- window.GOVUK.modules.start(intervention)
176
- var interventionHidden = intervention.getAttribute('hidden') === '' || intervention.getAttribute('hidden')
178
+ if (banner) {
179
+ window.GOVUK.modules.start(banner)
180
+ var bannerHidden = banner.getAttribute('hidden') === '' || banner.getAttribute('hidden')
177
181
 
178
- if (interventionHidden) {
182
+ if (bannerHidden) {
179
183
  return undefined
180
184
  }
181
185
  return 'true'
@@ -70,7 +70,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
70
70
  var data = {}
71
71
  data.event_name = 'video_' + event
72
72
  data.type = 'video'
73
- data.url = player.getVideoUrl()
73
+ data.url = this.cleanVideoUrl(player.getVideoUrl())
74
74
  data.text = player.videoTitle
75
75
  data.action = event
76
76
  data.video_current_time = Math.round(player.getCurrentTime())
@@ -81,6 +81,12 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
81
81
  var schema = schemas.mergeProperties(data, 'event_data')
82
82
 
83
83
  window.GOVUK.analyticsGa4.core.sendData(schema)
84
+ },
85
+
86
+ cleanVideoUrl: function (url) {
87
+ url = url.replace(/[?]{1}t=[0-9]+[&]{1}/, '?') // replace ?t=123& with ?
88
+ url = url.replace(/[&]{1}t=[0-9]+/, '') // replace &t=123 with ''
89
+ return url
84
90
  }
85
91
  }
86
92
 
@@ -268,32 +268,32 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
268
268
  return visibleCheckboxes
269
269
  }
270
270
 
271
- OptionSelect.prototype.isFacetsContainerHidden = function isFacetsContainerHidden () {
272
- var facetsContent = this.$optionSelect.parentElement
273
- var isFacetsContentHidden = false
271
+ OptionSelect.prototype.isComponentParentHidden = function isComponentParentHidden () {
272
+ var parentContent = this.$optionSelect.parentElement
273
+ var isparentContentHidden = false
274
274
  // check whether this is hidden by progressive disclosure,
275
275
  // because height calculations won't work
276
276
  // would use offsetParent === null but for IE10+
277
- if (facetsContent) {
278
- isFacetsContentHidden = !(facetsContent.offsetWidth || facetsContent.offsetHeight || facetsContent.getClientRects().length)
277
+ if (parentContent) {
278
+ isparentContentHidden = !(parentContent.offsetWidth || parentContent.offsetHeight || parentContent.getClientRects().length)
279
279
  }
280
280
 
281
- return isFacetsContentHidden
281
+ return isparentContentHidden
282
282
  }
283
283
 
284
284
  OptionSelect.prototype.setupHeight = function setupHeight () {
285
285
  var initialOptionContainerHeight = this.$optionsContainer.clientHeight
286
286
  var height = this.$optionList.offsetHeight
287
287
 
288
- var isFacetsContainerHidden = this.isFacetsContainerHidden()
288
+ var isComponentParentHidden = this.isComponentParentHidden()
289
289
 
290
- if (isFacetsContainerHidden) {
290
+ if (isComponentParentHidden) {
291
291
  initialOptionContainerHeight = 200
292
292
  height = 200
293
293
  }
294
294
 
295
295
  // Resize if the list is only slightly bigger than its container
296
- // If isFacetsContainerHidden is true, then 200 < 250
296
+ // If isComponentParentHidden is true, then 200 < 250
297
297
  // And the container height is always set to 201px
298
298
  if (height < initialOptionContainerHeight + 50) {
299
299
  this.setContainerHeight(height + 1)
@@ -145,7 +145,7 @@ $gem-guide-border-width: 1px;
145
145
  border: 0;
146
146
  padding: govuk-spacing(2);
147
147
 
148
- &:before {
148
+ &::before {
149
149
  display: none;
150
150
  }
151
151
  }
@@ -187,7 +187,7 @@ $gem-guide-border-width: 1px;
187
187
  font-style: italic;
188
188
  }
189
189
 
190
- &:before {
190
+ &::before {
191
191
  @include govuk-font($size: 14);
192
192
  content: attr(data-content);
193
193
  position: absolute;
@@ -201,7 +201,7 @@ $gem-guide-border-width: 1px;
201
201
  .component-guide-preview--warning {
202
202
  border-color: govuk-colour("yellow");
203
203
 
204
- &:before {
204
+ &::before {
205
205
  background-color: govuk-colour("yellow");
206
206
  }
207
207
  }
@@ -209,7 +209,7 @@ $gem-guide-border-width: 1px;
209
209
  .component-guide-preview--violation {
210
210
  border-color: govuk-colour("red");
211
211
 
212
- &:before {
212
+ &::before {
213
213
  background-color: govuk-colour("red");
214
214
  color: govuk-colour("white");
215
215
  }
@@ -516,11 +516,11 @@ $code-delete-bg: #fadddd;
516
516
  }
517
517
 
518
518
  .component__count {
519
- &:before {
519
+ &::before {
520
520
  content: "(";
521
521
  }
522
522
 
523
- &:after {
523
+ &::after {
524
524
  content: ")";
525
525
  }
526
526
  }
@@ -3,7 +3,7 @@
3
3
  .gem-c-action-link {
4
4
  display: table;
5
5
 
6
- &:before {
6
+ &::before {
7
7
  content: "";
8
8
  display: table-cell;
9
9
  width: 60px;
@@ -66,7 +66,7 @@
66
66
  .gem-c-action-link__subtext {
67
67
  padding: 0;
68
68
 
69
- &:before {
69
+ &::before {
70
70
  display: none;
71
71
  }
72
72
  }
@@ -82,7 +82,7 @@
82
82
  position: relative;
83
83
  padding-left: govuk-spacing(4);
84
84
 
85
- &:before {
85
+ &::before {
86
86
  content: "";
87
87
  position: absolute;
88
88
  top: 10%;
@@ -95,14 +95,14 @@
95
95
  }
96
96
 
97
97
  .gem-c-action-link--white-arrow {
98
- &:before {
98
+ &::before {
99
99
  background-image: image-url("govuk_publishing_components/action-link-arrow--white.png");
100
100
  background-image: image-url("govuk_publishing_components/action-link-arrow--white.svg"), linear-gradient(transparent, transparent);
101
101
  }
102
102
  }
103
103
 
104
104
  .gem-c-action-link--blue-arrow {
105
- &:before {
105
+ &::before {
106
106
  width: 36px;
107
107
  height: 28px;
108
108
  background: image-url("govuk_publishing_components/action-link-arrow--blue.png");
@@ -120,7 +120,7 @@
120
120
  }
121
121
 
122
122
  .gem-c-action-link--simple {
123
- &:before {
123
+ &::before {
124
124
  width: 30px;
125
125
  height: 30px;
126
126
  background: image-url("govuk_publishing_components/action-link-arrow--simple.png");
@@ -132,7 +132,7 @@
132
132
  }
133
133
 
134
134
  .gem-c-action-link--simple-light {
135
- &:before {
135
+ &::before {
136
136
  width: 30px;
137
137
  height: 30px;
138
138
  background: image-url("govuk_publishing_components/action-link-arrow--simple-light.png");
@@ -144,14 +144,14 @@
144
144
  }
145
145
 
146
146
  .gem-c-action-link--dark-icon {
147
- &:before {
147
+ &::before {
148
148
  background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
149
149
  background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
150
150
  }
151
151
  }
152
152
 
153
153
  .gem-c-action-link--dark-large-icon {
154
- &:before {
154
+ &::before {
155
155
  background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
156
156
  background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
157
157
  height: 34px;
@@ -166,6 +166,24 @@
166
166
  }
167
167
  }
168
168
 
169
+ .gem-c-action-link--light-icon {
170
+ &::before {
171
+ width: 36px;
172
+ height: 28px;
173
+ background: image-url("govuk_publishing_components/action-link-arrow--light.png");
174
+ background: image-url("govuk_publishing_components/action-link-arrow--light.svg"), linear-gradient(transparent, transparent);
175
+ background-repeat: no-repeat;
176
+ background-size: 28px auto;
177
+ background-position: 0 0;
178
+
179
+ @include govuk-media-query($from: tablet) {
180
+ width: 45px;
181
+ height: 35px;
182
+ background-size: 35px auto;
183
+ }
184
+ }
185
+ }
186
+
169
187
  .gem-c-action-link--dark-icon,
170
188
  .gem-c-action-link--small-icon {
171
189
  max-width: none;
@@ -174,7 +192,7 @@
174
192
  margin-bottom: govuk-spacing(2);
175
193
  }
176
194
 
177
- &:before {
195
+ &::before {
178
196
  height: 30px;
179
197
  width: 35px;
180
198
  background-repeat: no-repeat;
@@ -184,7 +202,7 @@
184
202
  }
185
203
 
186
204
  .gem-c-action-link--transparent-icon {
187
- &:before {
205
+ &::before {
188
206
  background-image: image-url("govuk_publishing_components/action-link-arrow--transparent.svg");
189
207
  }
190
208
  }
@@ -192,7 +210,7 @@
192
210
  .gem-c-action-link--brexit {
193
211
  max-width: none;
194
212
 
195
- &:before {
213
+ &::before {
196
214
  height: 30px;
197
215
  width: 30px;
198
216
  background-image: image-url("govuk_publishing_components/action-link-arrow--brexit.svg");
@@ -208,7 +226,7 @@
208
226
  @include govuk-media-query($from: tablet) {
209
227
  margin-bottom: govuk-spacing(2);
210
228
 
211
- &:before {
229
+ &::before {
212
230
  width: 35px;
213
231
  background-position: 0 4px;
214
232
  background-size: 25px auto;
@@ -217,7 +235,7 @@
217
235
  }
218
236
 
219
237
  .gem-c-action-link--nhs {
220
- &:before {
238
+ &::before {
221
239
  width: 80px;
222
240
  height: 70px;
223
241
  background: image-url("govuk_publishing_components/action-link--nhs.png");
@@ -232,7 +250,7 @@
232
250
  color: govuk-colour("white");
233
251
 
234
252
  .gem-c-action-link__subtext {
235
- &:before {
253
+ &::before {
236
254
  border-color: govuk-colour("white");
237
255
  }
238
256
  }
@@ -16,8 +16,9 @@
16
16
  @include govuk-font($size: 19, $weight: bold);
17
17
 
18
18
  // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
19
- // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element
20
- &:before {
19
+ // What's happening here is that the label and the number technically have an inline relationship
20
+ // but appear to have a block relationship thanks to this element
21
+ &::before {
21
22
  content: "";
22
23
  display: block;
23
24
  }
@@ -18,7 +18,7 @@
18
18
  color: govuk-colour("white");
19
19
  }
20
20
 
21
- .gem-c-breadcrumbs--inverse .govuk-breadcrumbs__list-item:before {
21
+ .gem-c-breadcrumbs--inverse .govuk-breadcrumbs__list-item::before {
22
22
  border-color: govuk-colour("white");
23
23
  }
24
24
 
@@ -40,11 +40,11 @@
40
40
  padding-bottom: 14px;
41
41
  }
42
42
 
43
- .govuk-breadcrumbs__list-item:before {
43
+ .govuk-breadcrumbs__list-item::before {
44
44
  top: 18px;
45
45
  }
46
46
 
47
- .govuk-breadcrumbs__link:after {
47
+ .govuk-breadcrumbs__link::after {
48
48
  content: "";
49
49
  position: absolute;
50
50
  top: 0;
@@ -65,7 +65,7 @@
65
65
  text-decoration: none;
66
66
  }
67
67
 
68
- &:before {
68
+ &::before {
69
69
  content: none;
70
70
  }
71
71
  }
@@ -97,7 +97,7 @@
97
97
  text-decoration: none;
98
98
  }
99
99
 
100
- &:before {
100
+ &::before {
101
101
  content: none;
102
102
  }
103
103
  }
@@ -65,7 +65,7 @@
65
65
 
66
66
  .gem-c-cards__link {
67
67
  // Make the entire list item area clickable
68
- &:after {
68
+ &::after {
69
69
  bottom: 0;
70
70
  content: "";
71
71
  left: 0;
@@ -74,7 +74,7 @@
74
74
  top: 0;
75
75
  }
76
76
 
77
- &:before {
77
+ &::before {
78
78
  $dimension: 7px;
79
79
  $width: 3px;
80
80
 
@@ -90,13 +90,13 @@
90
90
  }
91
91
 
92
92
  &:hover {
93
- &:before {
93
+ &::before {
94
94
  border-color: $govuk-link-hover-colour;
95
95
  }
96
96
  }
97
97
 
98
98
  &:focus {
99
- &:before {
99
+ &::before {
100
100
  border-color: $govuk-focus-text-colour;
101
101
  }
102
102
  }
@@ -120,7 +120,7 @@
120
120
  margin-bottom: govuk-spacing(1);
121
121
  }
122
122
 
123
- .gem-c-cards__link:before {
123
+ .gem-c-cards__link::before {
124
124
  display: none;
125
125
  }
126
126
  }
@@ -50,7 +50,7 @@
50
50
  padding-left: $contents-spacing;
51
51
  padding-right: $contents-spacing;
52
52
 
53
- &:before {
53
+ &::before {
54
54
  content: "—";
55
55
  position: absolute;
56
56
  left: 0;
@@ -37,7 +37,7 @@
37
37
  border-top: 7px solid #fed700;
38
38
  position: relative;
39
39
 
40
- &:before {
40
+ &::before {
41
41
  content: "";
42
42
  position: absolute;
43
43
  left: 0;
@@ -135,7 +135,7 @@
135
135
  padding-left: govuk-spacing(5);
136
136
  padding-top: govuk-spacing(2);
137
137
 
138
- &:before {
138
+ &::before {
139
139
  content: "—";
140
140
  position: absolute;
141
141
  left: 0;
@@ -146,7 +146,7 @@
146
146
  padding: 0;
147
147
  padding-bottom: govuk-spacing(2);
148
148
 
149
- &:before {
149
+ &::before {
150
150
  display: none;
151
151
  }
152
152
  }
@@ -103,7 +103,7 @@
103
103
  // the after element extends the link to cover the image, removing the
104
104
  // need for a duplicate link. Other elements apart from the image are given
105
105
  // position relative and a higher z-index to put them above the after element
106
- &:after {
106
+ &::after {
107
107
  content: "";
108
108
  position: absolute;
109
109
  z-index: 1;
@@ -117,7 +117,7 @@
117
117
  }
118
118
 
119
119
  @include govuk-media-query($from: mobile, $until: tablet) {
120
- &:after {
120
+ &::after {
121
121
  left: govuk-spacing(3);
122
122
  right: govuk-spacing(3);
123
123
  }
@@ -176,7 +176,7 @@
176
176
  .gem-c-image-card__list-item {
177
177
  position: relative;
178
178
 
179
- &:before { // stylelint-disable-line max-nesting-depth
179
+ &::before { // stylelint-disable-line max-nesting-depth
180
180
  content: "-";
181
181
  position: absolute;
182
182
  left: (- govuk-spacing(3));
@@ -226,7 +226,7 @@
226
226
  padding-bottom: govuk-spacing(2);
227
227
  }
228
228
 
229
- .gem-c-image-card__title-link:after {
229
+ .gem-c-image-card__title-link::after {
230
230
  left: 0;
231
231
  right: 0;
232
232
  }
@@ -289,7 +289,7 @@
289
289
  .gem-c-image-card__youtube-thumbnail-image-container {
290
290
  position: relative;
291
291
 
292
- &:before {
292
+ &::before {
293
293
  background: url("govuk_publishing_components/youtube-play-icon.png");
294
294
  background: url("govuk_publishing_components/youtube-play-icon.svg"), linear-gradient(transparent, transparent);
295
295
  background-repeat: no-repeat;