govuk_publishing_components 35.4.0 → 35.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -0
  3. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-auto-tracker.js +0 -3
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +30 -35
  5. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js +0 -1
  6. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js +1 -1
  7. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js +4 -3
  8. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +1 -1
  9. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js +3 -0
  10. data/app/assets/stylesheets/component_guide/application.scss +0 -4
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_select.scss +0 -8
  12. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +3 -2
  13. data/app/views/govuk_publishing_components/components/_contents_list.html.erb +17 -2
  14. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +2 -0
  15. data/app/views/govuk_publishing_components/components/_metadata.html.erb +12 -1
  16. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +20 -1
  17. data/app/views/govuk_publishing_components/components/_share_links.html.erb +2 -2
  18. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -1
  19. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +1 -1
  20. data/app/views/govuk_publishing_components/components/docs/contents_list.yml +19 -0
  21. data/app/views/govuk_publishing_components/components/docs/contextual_guidance.yml +11 -4
  22. data/app/views/govuk_publishing_components/components/docs/fieldset.yml +75 -30
  23. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +43 -0
  24. data/app/views/govuk_publishing_components/components/docs/inverse_header.yml +42 -32
  25. data/app/views/govuk_publishing_components/components/docs/metadata.yml +7 -0
  26. data/app/views/govuk_publishing_components/components/docs/modal_dialogue.yml +35 -5
  27. data/app/views/govuk_publishing_components/components/docs/previous_and_next_navigation.yml +12 -0
  28. data/app/views/govuk_publishing_components/components/docs/textarea.yml +8 -2
  29. data/lib/govuk_publishing_components/version.rb +1 -1
  30. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6777fd07172bb10deb9d4087b7f6b94bcb82bd663cd2564c255ac045505d5fbf
4
- data.tar.gz: 810d01deb18dbc67502d07d713235aa85f1c957a986fd3f2d1eb52c12aeade34
3
+ metadata.gz: 61fa79cdba028670638393c805fd3cb9ebff6ea2d03f4b4fdff7e973e1b86aae
4
+ data.tar.gz: 2c82ee33f9cfaf8e920777530ad7da376b113fca3b02f741eb993712fac4a4aa
5
5
  SHA512:
6
- metadata.gz: 7e5c31dd4a6e7e0a0ab01ba19c522a78ea71a734fc194c233d7f3a54d3085cc73280511674d6105b7c398357273ba14434d7eaced2caa852c6f731a2a10dd364
7
- data.tar.gz: 8d20c9fbf569404e1ce5fdda22509982efd598cdfaba95382f615715e7144f2eeb461b3cc9385eaaabe35c73e89cd95130589fe2c1d5a52e1f710fd0f64442f6
6
+ metadata.gz: 0d766ce3ff5f8236b098a2ce61b6c0ccdd4039393168bf25c0128919563f8113792da9adcef6e0edbec2af19382f4db18f405edb402fa2598c2df49ff4288335
7
+ data.tar.gz: 6c13cdf892754b1b55834d950e3dad1aeceb138cdb76e509b785d381721e78747db2c51070859829d9d8e348a0f2fa4fe7beb4498f55a761a397d0659206a94a
data/README.md CHANGED
@@ -58,6 +58,7 @@ yarn run jasmine:ci
58
58
  - [Testing a component](docs/testing-components.md)
59
59
  - [Component auditing](docs/auditing.md)
60
60
  - [Code documentation on rubydoc.info](http://www.rubydoc.info/gems/govuk_publishing_components)
61
+ - [Our analytics approach](docs/analytics-ga4/analytics.md)
61
62
 
62
63
  More documentation can be found in the [docs directory](docs/).
63
64
 
@@ -35,9 +35,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
35
35
  return
36
36
  }
37
37
 
38
- if (data.index) {
39
- data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
40
- }
41
38
  var schemas = new window.GOVUK.analyticsGa4.Schemas()
42
39
  var schema = schemas.mergeProperties(data, 'event_data')
43
40
 
@@ -30,7 +30,32 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
30
30
  firstScript.parentNode.insertBefore(newScript, firstScript)
31
31
  },
32
32
 
33
+ ensureIndexesArePopulated: function (data) {
34
+ if (!data.event_data) {
35
+ return data
36
+ }
37
+
38
+ if (!data.event_data.index) {
39
+ return data
40
+ }
41
+
42
+ var indexKeys = ['index_link', 'index_section', 'index_section_count']
43
+
44
+ for (var i = 0; i < indexKeys.length; i++) {
45
+ var indexKey = indexKeys[i]
46
+
47
+ // If the index key isn't in the object, populate it. However if it's set to 0, leave it as 0. 0 is falsy so we have to add this extra check.
48
+ if (!data.event_data.index[indexKey] && data.event_data.index[indexKey] !== 0) {
49
+ data.event_data.index[indexKey] = undefined
50
+ }
51
+ }
52
+
53
+ return data
54
+ },
55
+
33
56
  sendData: function (data) {
57
+ data = this.ensureIndexesArePopulated(data)
58
+
34
59
  data.govuk_gem_version = this.getGemVersion()
35
60
  // set this in the console as a debugging aid
36
61
  if (window.GOVUK.analyticsGa4.showDebug) {
@@ -231,11 +256,12 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
231
256
  var totalLinks = 0
232
257
  for (var i = 0; i < links.length; i++) {
233
258
  var link = links[i]
234
- // Only index links that are not search results
235
- if (!link.getAttribute('data-ga4-ecommerce-path')) {
236
- totalLinks++
237
- link.setAttribute('data-ga4-index', '{"index_link": ' + totalLinks + '}')
259
+ // Only index links that are not search results or do not have a data-ga4-do-not-index attribute
260
+ if (link.getAttribute('data-ga4-ecommerce-path') || link.getAttribute('data-ga4-do-not-index') !== null) {
261
+ continue
238
262
  }
263
+ totalLinks++
264
+ link.setAttribute('data-ga4-index', '{"index_link": ' + totalLinks + '}')
239
265
  }
240
266
 
241
267
  try {
@@ -248,37 +274,6 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
248
274
  }
249
275
  },
250
276
 
251
- // index is given as a string of the form 1.2.3 or 1.2
252
- // split this into named sub-parameters
253
- createIndexObject: function (index) {
254
- if (typeof index === 'undefined') {
255
- return undefined
256
- }
257
- if (typeof index === 'object') {
258
- return index
259
- }
260
-
261
- index = index.toString().split('.')
262
- // this will soon include 'index_section_count'
263
- // number of sections overall in the thing being tracked (but not yet in use)
264
- switch (index.length) {
265
- case 1:
266
- return {
267
- index_section: parseInt(index[0])
268
- }
269
- case 2:
270
- return {
271
- index_section: parseInt(index[0]),
272
- index_link: parseInt(index[1])
273
- }
274
- case 3:
275
- return {
276
- index_section: parseInt(index[1]),
277
- index_link: parseInt(index[2])
278
- }
279
- }
280
- },
281
-
282
277
  addAttributesToElements: function (selector, dataAttributes) {
283
278
  var targetElements = document.querySelectorAll(selector)
284
279
 
@@ -42,7 +42,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
42
42
 
43
43
  var text = data.text || event.target.textContent
44
44
  data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
45
- data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
46
45
 
47
46
  var schemas = new window.GOVUK.analyticsGa4.Schemas()
48
47
  var schema = schemas.mergeProperties(data, 'event_data')
@@ -43,7 +43,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
43
43
 
44
44
  var formInputs = this.getFormInputs()
45
45
  var formData = this.getInputValues(formInputs)
46
- data.text = this.combineGivenAnswers(formData) || 'No answer given'
46
+ data.text = data.text || (this.combineGivenAnswers(formData) || 'No answer given')
47
47
 
48
48
  var schemas = new window.GOVUK.analyticsGa4.Schemas()
49
49
  var schema = schemas.mergeProperties(data, 'event_data')
@@ -82,6 +82,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
82
82
  var text = data.text || event.target.textContent
83
83
  data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
84
84
  data.text = this.PIIRemover.stripPIIWithOverride(data.text, true, true)
85
+ if (!data.text && (element.querySelector('img') || element.querySelector('svg'))) {
86
+ data.text = 'image'
87
+ }
85
88
  var url = data.url || this.findLink(event.target).getAttribute('href')
86
89
  data.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(this.PIIRemover.stripPIIWithOverride(url, true, true))
87
90
  data.link_domain = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkDomain(data.url)
@@ -108,9 +111,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
108
111
  }
109
112
  }
110
113
 
111
- Ga4LinkTracker.prototype.setIndex = function (indexData, target) {
112
- var index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(indexData)
113
-
114
+ Ga4LinkTracker.prototype.setIndex = function (index, target) {
114
115
  if (target.getAttribute('data-ga4-index')) {
115
116
  try {
116
117
  var indexLink = JSON.parse(target.getAttribute('data-ga4-index'))
@@ -17,7 +17,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
17
17
  location: this.getLocation(),
18
18
  /* If the init() function receives a referrer parameter, this indicates that it has been called as a part of an AJAX request and
19
19
  this.getReferrer() will not return the correct value. Therefore we need to rely on the referrer parameter. */
20
- referrer: referrer || this.getReferrer(),
20
+ referrer: referrer ? this.PIIRemover.stripPIIWithOverride(referrer, true, true) : this.getReferrer(),
21
21
  title: this.getTitle(),
22
22
  status_code: this.getStatusCode(),
23
23
 
@@ -77,6 +77,9 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
77
77
 
78
78
  data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(element.textContent)
79
79
  data.text = mailToLink ? data.text : this.PIIRemover.stripPIIWithOverride(data.text, true, true)
80
+ if (!data.text && (element.querySelector('img') || element.querySelector('svg'))) {
81
+ data.text = 'image'
82
+ }
80
83
  data.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)
81
84
 
82
85
  var schemas = new window.GOVUK.analyticsGa4.Schemas()
@@ -31,10 +31,6 @@ $govuk-new-link-styles: true;
31
31
  @import "govuk_publishing_components/components/layout-header";
32
32
  @import "govuk_publishing_components/components/layout-super-navigation-header";
33
33
 
34
- // Imported to ensure inverse-header component examples render correctly
35
- // this helps avoid any issues with visual regressions tests
36
- @import "govuk_publishing_components/components/lead-paragraph";
37
-
38
34
  // Include required helpers
39
35
  @import "../../stylesheets/govuk_publishing_components/components/helpers/markdown-typography";
40
36
 
@@ -4,11 +4,3 @@
4
4
  .gem-c-select__select--full-width {
5
5
  width: 100%;
6
6
  }
7
-
8
- // Solution to text inside selects becoming unreadable if font size in
9
- // the browser is increased. This is currently a problem in govuk-frontend
10
- .gem-c-select {
11
- .govuk-select {
12
- height: 2.14em;
13
- }
14
- }
@@ -87,7 +87,9 @@
87
87
 
88
88
  ol,
89
89
  ul {
90
- list-style: decimal;
90
+ // we intentionally don't set list-style for ol elements, so that they can
91
+ // utilise the type attribute for the formatting. Browsers default to a
92
+ // style of decimal.
91
93
  list-style-position: outside;
92
94
  margin-left: $gutter-two-thirds;
93
95
  padding: 0;
@@ -102,7 +104,6 @@
102
104
 
103
105
  ul {
104
106
  list-style: disc;
105
- list-style-position: outside;
106
107
  }
107
108
 
108
109
  li {
@@ -12,10 +12,21 @@
12
12
  link_classes << brand_helper.color_class
13
13
  link_classes << "govuk-link--no-underline" unless underline_links
14
14
 
15
+ ga4_tracking ||= false
16
+ ga4_data = nil
17
+ if ga4_tracking
18
+ ga4_data = {
19
+ event_name: "navigation",
20
+ type: "content",
21
+ section: t("components.contents_list.contents", locale: :en) || ""
22
+ }.to_json
23
+ end
15
24
  local_assigns[:aria] ||= {}
16
25
  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
17
26
  component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}")
18
27
  component_helper.add_data_attribute({ module: "gem-track-click" })
28
+ component_helper.add_data_attribute({ module: "ga4-link-tracker" }) if ga4_tracking
29
+ component_helper.add_data_attribute({ ga4_link: ga4_data, ga4_track_links_only: "" }) if ga4_tracking
19
30
  component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
20
31
  component_helper.add_role("navigation")
21
32
  -%>
@@ -32,7 +43,10 @@
32
43
  <ol class="gem-c-contents-list__list">
33
44
  <% contents.each.with_index(1) do |contents_item, position| %>
34
45
  <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
35
- <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text] %>
46
+ <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
47
+ ga4_link_data = nil
48
+ ga4_link_data = { "index": { "index_link": position }, "index_total": contents.length }.to_json if ga4_tracking
49
+ %>
36
50
  <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
37
51
  class: link_classes,
38
52
  data: {
@@ -41,7 +55,8 @@
41
55
  track_label: contents_item[:href],
42
56
  track_options: {
43
57
  dimension29: contents_item[:text]
44
- }
58
+ },
59
+ ga4_link: ga4_link_data
45
60
  }
46
61
  %>
47
62
 
@@ -38,7 +38,9 @@
38
38
  "text": "GOV.UK",
39
39
  "section": "Logo",
40
40
  "index": {
41
+ "index_link": 1,
41
42
  "index_section": 0,
43
+ "index_section_count": 2,
42
44
  },
43
45
  "index_total": 1
44
46
  }.to_json %>"
@@ -18,6 +18,8 @@
18
18
  classes << "direction-#{direction}" if local_assigns.include?(:direction)
19
19
  classes << "gem-c-metadata--inverse" if inverse
20
20
  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
21
+
22
+ ga4_tracking ||= false
21
23
  %>
22
24
  <%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>
23
25
  <dl class="gem-c-metadata__list" data-module="gem-track-click">
@@ -49,7 +51,16 @@
49
51
  &#8212; <a href="#full-publication-update-history" class="gem-c-metadata__definition-link govuk-!-display-none-print js-see-all-updates-link"
50
52
  data-track-category="content-history"
51
53
  data-track-action="see-all-updates-link-clicked"
52
- data-track-label="history">
54
+ data-track-label="history"
55
+ <% if ga4_tracking %>
56
+ data-module="ga4-link-tracker"
57
+ data-ga4-link="<%= {
58
+ event_name: "navigation",
59
+ type: "content",
60
+ section: "Top"
61
+ }.to_json %>"
62
+ <% end%>
63
+ >
53
64
  <%= t("components.metadata.see_all_updates") %>
54
65
  </a>
55
66
  <% end %>
@@ -1,13 +1,16 @@
1
1
  <%
2
2
  add_gem_component_stylesheet("previous-and-next-navigation")
3
+ ga4_tracking ||= false
3
4
 
4
5
  if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page)
5
6
  %>
6
-
7
7
  <nav
8
8
  class="govuk-pagination govuk-pagination--block"
9
9
  role="navigation"
10
10
  aria-label="<%= t("components.previous_and_next_navigation.pagination") %>"
11
+ <% if ga4_tracking %>
12
+ data-module="ga4-link-tracker"
13
+ <% end %>
11
14
  >
12
15
  <% if local_assigns.include?(:previous_page) %>
13
16
  <%
@@ -24,6 +27,14 @@
24
27
  data-track-label="<%= previous_page[:url] %>"
25
28
  data-track-dimension="previous"
26
29
  data-track-dimension-index="29"
30
+ <% if ga4_tracking %>
31
+ data-ga4-link = "<%= {
32
+ event_name: "navigation",
33
+ type: "content",
34
+ text: previous_page[:label] || title,
35
+ section: "Previous",
36
+ }.to_json %>"
37
+ <% end %>
27
38
  >
28
39
  <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
29
40
  <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
@@ -52,6 +63,14 @@
52
63
  data-track-label="<%= next_page[:url] %>"
53
64
  data-track-dimension="next"
54
65
  data-track-dimension-index="29"
66
+ <% if ga4_tracking %>
67
+ data-ga4-link = "<%= {
68
+ event_name: "navigation",
69
+ type: "content",
70
+ text: next_page[:label] || title,
71
+ section: "Next",
72
+ }.to_json %>"
73
+ <% end %>
55
74
  >
56
75
  <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
57
76
  <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
@@ -52,8 +52,8 @@
52
52
  'socialTarget': link[:href]
53
53
  }
54
54
  ga4_link_data = {
55
- 'event_name': 'share',
56
- 'type': 'share this page',
55
+ 'event_name': 'navigation',
56
+ 'type': 'share page',
57
57
  'index': {
58
58
  'index_link': index + 1,
59
59
  },
@@ -85,7 +85,8 @@
85
85
  "event_name": "navigation",
86
86
  "type": "step by step",
87
87
  "index": {
88
- "index_section": step_index + 1
88
+ "index_section": step_index + 1,
89
+ "index_section_count": steps.length
89
90
  },
90
91
  "section": step[:title]
91
92
  }.to_json
@@ -61,7 +61,7 @@
61
61
  "index_link": (index + 1).to_s
62
62
  },
63
63
  index_total: (links.length).to_s,
64
- section: "Part of",
64
+ section: pretitle,
65
65
  }.to_json
66
66
  %>
67
67
  data-ga4-link="<%= ga4_attributes %>"
@@ -192,3 +192,22 @@ examples:
192
192
  text: 2. Numbers not parsed
193
193
  - href: "#third-thing"
194
194
  text: 3. Numbers are just text
195
+ with_ga4_tracking:
196
+ description: Enables the GA4 link tracker on the list.
197
+ data:
198
+ ga4_tracking: true
199
+ contents:
200
+ - href: "#first-thing"
201
+ text: 1. First thing
202
+ items:
203
+ - href: "#second-thing"
204
+ text: 1. Nested Item
205
+ - href: "#third-thing"
206
+ text: 2. Nested Item
207
+ - href: "#first-thing"
208
+ text: 2. Second thing
209
+ items:
210
+ - href: "#second-thing"
211
+ text: 1. Nested Item
212
+ - href: "#third-thing"
213
+ text: 2. Nested Item
@@ -23,7 +23,14 @@ examples:
23
23
  content: |
24
24
  <p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
25
25
  block: |
26
- <div class="govuk-form-group">
27
- <label class="gem-c-label govuk-label" for="news-title">News title</label>
28
- <input id="news-title" type="text" class="gem-c-input govuk-input" aria-describedby="news-title-guidance">
29
- </div>
26
+ <!-- example content -->
27
+ <%= render "govuk_publishing_components/components/input", {
28
+ label: {
29
+ text: "News title"
30
+ },
31
+ name: "news-title",
32
+ id: "news-title",
33
+ describedby: "news-title-guidance"
34
+ }
35
+ %>
36
+ <!-- end of example content -->
@@ -11,23 +11,41 @@ examples:
11
11
  data:
12
12
  legend_text: 'Do you have a passport?'
13
13
  block: |
14
- <!-- Use the radio component, this is hardcoded only for this example -->
15
- <input type="radio" id="default-yes" name="default">
16
- <label for="default-yes">Yes</label>
17
-
18
- <input type="radio" id="default-no" name="default">
19
- <label for="default-no">No</label>
14
+ <!-- example content -->
15
+ <%= render "govuk_publishing_components/components/radio", {
16
+ name: "default",
17
+ items: [
18
+ {
19
+ value: "default-yes",
20
+ text: "Yes"
21
+ },
22
+ {
23
+ value: "default-no",
24
+ text: "No"
25
+ }
26
+ ]
27
+ } %>
28
+ <!-- end of example content -->
20
29
  with_id_attribute:
21
30
  data:
22
31
  legend_text: 'Do you have a passport?'
23
32
  id: passports
24
33
  block: |
25
- <!-- Use the radio component, this is hardcoded only for this example -->
26
- <input type="radio" id="passport-yes" name="default">
27
- <label for="passport-yes">Yes</label>
28
-
29
- <input type="radio" id="passport-no" name="default">
30
- <label for="passport-no">No</label>
34
+ <!-- example content -->
35
+ <%= render "govuk_publishing_components/components/radio", {
36
+ name: "passport",
37
+ items: [
38
+ {
39
+ value: "passport-yes",
40
+ text: "Yes"
41
+ },
42
+ {
43
+ value: "passport-no",
44
+ text: "No"
45
+ }
46
+ ]
47
+ } %>
48
+ <!-- end of example content -->
31
49
  with_heading:
32
50
  description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
33
51
  data:
@@ -35,33 +53,60 @@ examples:
35
53
  heading_level: 2
36
54
  heading_size: 'm'
37
55
  block: |
38
- <!-- Use the radio component, this is hardcoded only for this example -->
39
- <input type="radio" id="level-yes" name="default">
40
- <label for="level-yes">Yes</label>
41
-
42
- <input type="radio" id="level-no" name="default">
43
- <label for="level-no">No</label>
56
+ <!-- example content -->
57
+ <%= render "govuk_publishing_components/components/radio", {
58
+ name: "level",
59
+ items: [
60
+ {
61
+ value: "level-yes",
62
+ text: "Yes"
63
+ },
64
+ {
65
+ value: "level-no",
66
+ text: "No"
67
+ }
68
+ ]
69
+ } %>
70
+ <!-- end of example content -->
44
71
  with_custom_legend_size:
45
72
  description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
46
73
  data:
47
74
  legend_text: 'Do you have a driving license?'
48
75
  heading_size: 'l'
49
76
  block: |
50
- <!-- Use the radio component, this is hardcoded only for this example -->
51
- <input type="radio" id="size-yes" name="default">
52
- <label for="size-yes">Yes</label>
53
-
54
- <input type="radio" id="size-no" name="default">
55
- <label for="size-no">No</label>
77
+ <!-- example content -->
78
+ <%= render "govuk_publishing_components/components/radio", {
79
+ name: "size",
80
+ items: [
81
+ {
82
+ value: "size-yes",
83
+ text: "Yes"
84
+ },
85
+ {
86
+ value: "size-no",
87
+ text: "No"
88
+ }
89
+ ]
90
+ } %>
91
+ <!-- end of example content -->
56
92
  with_error_message:
57
93
  description: The component also accepts an `error_id`, or generates one automatically.
58
94
  data:
59
95
  legend_text: 'Do you have a passport?'
60
96
  error_message: 'Please choose an option'
61
97
  block: |
62
- <!-- Use the radio component, this is hardcoded only for this example -->
63
- <input type="radio" id="default2-yes" name="default2">
64
- <label for="default2-yes">Yes</label>
65
-
66
- <input type="radio" id="default2-no" name="default2">
67
- <label for="default2-no">No</label>
98
+ <!-- example content -->
99
+ <%= render "govuk_publishing_components/components/radio", {
100
+ name: "default2",
101
+ items: [
102
+ {
103
+ value: "default2-yes",
104
+ text: "Yes"
105
+ },
106
+ {
107
+ value: "default2-no",
108
+ text: "No"
109
+ }
110
+ ]
111
+ } %>
112
+ <!-- end of example content -->
@@ -80,6 +80,49 @@ examples:
80
80
  </li>
81
81
  <li>three</li>
82
82
  </ul>
83
+ ordered_lists_types:
84
+ description: |
85
+ Govspeak/markdown does not generate HTML with type and start attributes,
86
+ however we still provide support for them as some advanced users write
87
+ HTML directly to achieve the list formatting.
88
+ data:
89
+ block: |
90
+ <h2>Lowercase alphabetical list</h2>
91
+ <ol type="a">
92
+ <li>one</li>
93
+ <li>two</li>
94
+ </ol>
95
+
96
+ <h2>Uppercase alphabetical list</h2>
97
+ <ol type="A">
98
+ <li>one</li>
99
+ <li>two</li>
100
+ </ol>
101
+
102
+ <h2>Lowercase Roman numeral list</h2>
103
+ <ol type="i">
104
+ <li>one</li>
105
+ <li>two</li>
106
+ </ol>
107
+
108
+ <h2>Uppercase Roman numberal list</h2>
109
+ <ol type="I">
110
+ <li>one</li>
111
+ <li>two</li>
112
+ </ol>
113
+
114
+ <h2>Numerical list starting at 3</h2>
115
+ <ol start="3">
116
+ <li>three</li>
117
+ <li>four</li>
118
+ </ol>
119
+
120
+ <h2>Lowercase alphabetical list, starting at 3</h2>
121
+ <ol type="a" start="3">
122
+ <li>three</li>
123
+ <li>four</li>
124
+ </ol>
125
+
83
126
  legislative_lists:
84
127
  data:
85
128
  block: |
@@ -16,49 +16,59 @@ examples:
16
16
  default:
17
17
  data:
18
18
  block: |
19
- <div class="gem-c-title gem-c-title--inverse">
20
- <h1 class="gem-c-title__text govuk-heading-l">
21
- Education, Training and Skills
22
- </h1>
23
- </div>
19
+ <!-- example content -->
20
+ <%= render "govuk_publishing_components/components/title", {
21
+ title: "Education, Training and Skills",
22
+ inverse: true
23
+ } %>
24
+ <!-- end of example content -->
24
25
  for_full_page_width:
25
26
  description: "Used when the header covers the full width of the page, but it's content is in the grid layout. The left-right padding is removed to make the contents line up with the other items on the page."
26
27
  data:
27
- full_width: true
28
- block: |
29
- <div class="gem-c-title gem-c-title--inverse">
30
- <h1 class="gem-c-title__text govuk-heading-l">
31
- Education, Training and Skills
32
- </h1>
33
- </div>
28
+ full_width: true
29
+ block: |
30
+ <!-- example content -->
31
+ <%= render "govuk_publishing_components/components/title", {
32
+ title: "Education, Training and Skills",
33
+ inverse: true
34
+ } %>
35
+ <!-- end of example content -->
34
36
  html_publication_header:
35
37
  description: "The inverse header component is used on HTML publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
36
38
  data:
37
39
  block: |
38
- <div class="gem-c-title gem-c-title--inverse gem-c-title--bottom-margin">
39
- <p class="gem-c-title__context govuk-caption-m">Notice</p>
40
- <h1 class="gem-c-title__text govuk-heading-l">
41
- LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application
42
- </h1>
43
- </div>
44
- <p class="publication-header__last-changed">Published 22 April 2016</p>
40
+ <!-- example content -->
41
+ <%= render "govuk_publishing_components/components/title", {
42
+ title: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
43
+ inverse: true,
44
+ context: "Notice",
45
+ } %>
46
+ <p class="publication-header__last-changed">Published 22 April 2016</p>
47
+ <!-- end of example content -->
45
48
  with_breadcrumbs_and_paragraph:
46
49
  data:
47
50
  padding_top: false
48
51
  block: |
49
- <div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile gem-c-breadcrumbs--inverse">
50
- <ol class="govuk-breadcrumbs__list">
51
- <li class="govuk-breadcrumbs__list-item">
52
- <a href="/section" class="govuk-breadcrumbs__link">Section</a>
53
- </li>
54
- <li class="govuk-breadcrumbs__list-item">
55
- <a href="/section/sub-section" class="govuk-breadcrumbs__link">Education of disadvantaged children</a>
56
- </li>
57
- </ol>
58
- </div>
59
- <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
60
- Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.
61
- </p>
52
+ <!-- example content -->
53
+ <%= render "govuk_publishing_components/components/breadcrumbs", {
54
+ collapse_on_mobile: true,
55
+ breadcrumbs: [
56
+ {
57
+ title: "Section",
58
+ url: "/section"
59
+ },
60
+ {
61
+ title: "Education of disadvantaged children",
62
+ url: "/section/sub-section"
63
+ }
64
+ ],
65
+ inverse: true
66
+ } %>
67
+ <%= render "govuk_publishing_components/components/lead_paragraph", {
68
+ text: "Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.",
69
+ inverse: true
70
+ } %>
71
+ <!-- end of example content -->
62
72
  with_link:
63
73
  data:
64
74
  block: |
@@ -362,3 +362,10 @@ examples:
362
362
  first_published: 14 June 2014
363
363
  last_updated: 10 September 2015
364
364
  margin_bottom: 2
365
+ with_ga4_tracking:
366
+ description: |
367
+ Enables the GA4 link tracker on the 'See all updates' link.
368
+ data:
369
+ last_updated: 10 September 2015
370
+ see_updates_link: true
371
+ ga4_tracking: true
@@ -27,7 +27,13 @@ display_preview: false
27
27
  examples:
28
28
  default:
29
29
  embed: |
30
- <button class="govuk-button" data-toggle="modal" data-target="modal-default">Open modal</button>
30
+ <%= render "govuk_publishing_components/components/button", {
31
+ text: "Open modal",
32
+ data_attributes: {
33
+ toggle: "modal",
34
+ target: "modal-default"
35
+ }
36
+ } %>
31
37
  <%= component %>
32
38
  data:
33
39
  id: modal-default
@@ -38,7 +44,13 @@ examples:
38
44
  description: |
39
45
  A wide version of the modal dialogue will provide the same width with the main container
40
46
  embed: |
41
- <button class="govuk-button" data-toggle="modal" data-target="modal-wide">Open wide modal</button>
47
+ <%= render "govuk_publishing_components/components/button", {
48
+ text: "Open wide modal",
49
+ data_attributes: {
50
+ toggle: "modal",
51
+ target: "modal-wide"
52
+ }
53
+ } %>
42
54
  <%= component %>
43
55
  data:
44
56
  id: modal-wide
@@ -50,7 +62,13 @@ examples:
50
62
  description: |
51
63
  Modal dialogue with form elements inside to show how it prevents tabbing to outside the dialogue when open while preserving the tabindex on focusable elements
52
64
  embed: |
53
- <button class="govuk-button" data-toggle="modal" data-target="modal-with-form">Open modal with form</button>
65
+ <%= render "govuk_publishing_components/components/button", {
66
+ text: "Open modal with form",
67
+ data_attributes: {
68
+ toggle: "modal",
69
+ target: "modal-with-form"
70
+ }
71
+ } %>
54
72
  <%= component %>
55
73
  data:
56
74
  id: modal-with-form
@@ -65,7 +83,13 @@ examples:
65
83
  description: |
66
84
  Modal dialogue with a large block content to show how the modal scrolls withing the page and how it prevents scrolling the page while the dialogue is open
67
85
  embed: |
68
- <button class="govuk-button" data-toggle="modal" data-target="modal-with-large-content">Open modal with large content</button>
86
+ <%= render "govuk_publishing_components/components/button", {
87
+ text: "Open modal with large content",
88
+ data_attributes: {
89
+ toggle: "modal",
90
+ target: "modal-with-large-content"
91
+ }
92
+ } %>
69
93
  <%= component %>
70
94
  data:
71
95
  id: modal-with-large-content
@@ -78,7 +102,13 @@ examples:
78
102
  <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
79
103
  with_data_attributes:
80
104
  embed: |
81
- <button class="govuk-button" data-toggle="modal" data-target="modal-with-data-attributes">Open modal with data attributes</button>
105
+ <%= render "govuk_publishing_components/components/button", {
106
+ text: "Open modal with data attributes",
107
+ data_attributes: {
108
+ toggle: "modal",
109
+ target: "modal-with-data-attributes"
110
+ }
111
+ } %>
82
112
  <%= component %>
83
113
  data:
84
114
  id: modal-with-data-attributes
@@ -64,3 +64,15 @@ examples:
64
64
  url: next-page
65
65
  title: Next
66
66
  label: 'Driver CPC part 1 test: theory'
67
+ with_ga4_tracking:
68
+ description: Enables the GA4 link tracker on the links.
69
+ data:
70
+ ga4_tracking: true
71
+ previous_page:
72
+ url: previous-page
73
+ title: Previous
74
+ label: Applying for a provisional lorry or bus licence
75
+ next_page:
76
+ url: next-page
77
+ title: Next
78
+ label: 'Driver CPC part 1 test: theory'
@@ -94,9 +94,15 @@ examples:
94
94
  with_aria_attributes:
95
95
  description: Use `describedby` when the textarea is described by an element outside the component; for example, when used in conjunction with a [contextual guidance](/component-guide/contextual_guidance).
96
96
  embed: |
97
- <%= component %>
98
- <p class="govuk-body" id="contextual-guidance">The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
97
+ <%= render "govuk_publishing_components/components/contextual_guidance", {
98
+ html_for: "contextual-guidance-id",
99
+ guidance_id: "contextual-guidance",
100
+ content: sanitize("<p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>")
101
+ } do %>
102
+ <%= component %>
103
+ <% end %>
99
104
  data:
105
+ id: "contextual-guidance-id"
100
106
  label:
101
107
  text: "Title"
102
108
  bold: true
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "35.4.0".freeze
2
+ VERSION = "35.6.0".freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 35.4.0
4
+ version: 35.6.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-05-18 00:00:00.000000000 Z
11
+ date: 2023-06-08 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config