govuk_publishing_components 45.7.0 → 45.9.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1f666e85d9ff44b241dd92ecedaac2816dffcfd44c50b85f206bc5a0c209529b
4
- data.tar.gz: c87b274a6e3bb1170ab2144ad3cfe21f22602381406edad542f03fbde9caa00c
3
+ metadata.gz: 14c4af4e8ba4264803e67952e87624883f62f6f079fa8e2b0b24a7d989dc496c
4
+ data.tar.gz: 74a997044718a86a19b65b099a85f8e38f3e86d6416416917e8ea929742e8bb5
5
5
  SHA512:
6
- metadata.gz: 7062f9f8179dabef8ce3d70b4aca757f257c62e69a19486d095ae8fcfcddd8cce3b3405fddc663bce7e368d2272b89b80a921fa777c9adca32e3624c4d989953
7
- data.tar.gz: ec90e23e9b1c953bc687b1abd5b5850336053a86c5f03a251eef0d05aab6747a280888f4c65672eddb965355e22a73402590e78844d6b0d0e3ce71b5cfe59d3b
6
+ metadata.gz: ae66caf2ec9b4ba8692fab56ebf482ca9a410818e48c8c0c6e82e832dd11d809370c9a9cf2f1e87ae9fc63e3df943cd47a54650abe4bffbe0b158f6614d0450d
7
+ data.tar.gz: f78eb8ed3333b259bdcbe86a7b24f7e7e762f6bd212085fcb9af9d9229147f9285d845142a1918dd748f90a8d87e3abbebad04c7709d78ae18273058dd44685e
@@ -116,15 +116,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
116
116
  // Set tracking attributes on the input field. These can be used by the containing form's
117
117
  // analytics module to track the user's interaction with the autocomplete component.
118
118
  setTrackingAttributes (query, results) {
119
- // Only set the suggestions attribute when results actually come back (so this attribute
120
- // tracks the last seen non-empty suggestions, even if the user then amends their query to one
121
- // that doesn't generate any)
119
+ // Only set the suggestions and trigger input attributes when results actually come back (so
120
+ // these attributes track the last seen non-empty suggestions and input used to trigger them,
121
+ // even if the user then amends their query to one that doesn't generate any)
122
122
  if (results.length > 0) {
123
123
  const formattedResults = results.slice(0, 5).join('|')
124
124
  this.$autocompleteInput.dataset.autocompleteSuggestions = formattedResults
125
+ this.$autocompleteInput.dataset.autocompleteTriggerInput = query
125
126
  }
126
127
 
127
- this.$autocompleteInput.dataset.autocompleteTriggerInput = query
128
128
  this.$autocompleteInput.dataset.autocompleteSuggestionsCount = results.length
129
129
  this.$autocompleteInput.dataset.autocompleteAccepted = false
130
130
  }
@@ -41,13 +41,6 @@
41
41
  }
42
42
  }
43
43
 
44
- .gem-c-chart--padding {
45
- .gem-c-chart__header,
46
- .gem-c-chart__footer {
47
- padding: 0 govuk-spacing(4);
48
- }
49
- }
50
-
51
44
  .gem-c-chart .gem-c-chart__a11y-note-link {
52
45
  display: none;
53
46
  margin-bottom: govuk-spacing(2);
@@ -14,7 +14,6 @@
14
14
  minimal ||= false
15
15
  hide_heading ||= minimal
16
16
  link ||= false
17
- padding ||= false
18
17
 
19
18
  chart_id = "chart-id-#{SecureRandom.hex(4)}"
20
19
  table_id = "table-id-#{SecureRandom.hex(4)}"
@@ -27,7 +26,6 @@
27
26
  component_helper.add_class("gem-c-chart")
28
27
  component_helper.add_class(shared_helper.get_margin_bottom)
29
28
  component_helper.add_class("gem-c-chart--minimal") if minimal
30
- component_helper.add_class("gem-c-chart--padding") if padding
31
29
 
32
30
  require "chartkick"
33
31
  Chartkick.options[:html] = '<div id="%{id}"><noscript><p class="govuk-body">Our charts are built using JavaScript but all the data is also available in the table below.</p></noscript></div>'
@@ -40,12 +38,14 @@
40
38
  <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" if @external_script[:loaded] == 1 %>
41
39
  <%= tag.div(**component_helper.all_attributes) do %>
42
40
  <% if chart_heading && !hide_heading %>
43
- <div class="gem-c-chart__header">
44
- <%= render "govuk_publishing_components/components/heading", {
45
- text: chart_heading,
46
- heading_level: chart_heading_level,
47
- margin_bottom: 2,
48
- } %>
41
+ <div class="govuk-grid-row">
42
+ <div class="govuk-grid-column-two-thirds">
43
+ <%= render "govuk_publishing_components/components/heading", {
44
+ text: chart_heading,
45
+ heading_level: chart_heading_level,
46
+ margin_bottom: 2,
47
+ } %>
48
+ </div>
49
49
  </div>
50
50
  <% end %>
51
51
 
@@ -74,76 +74,74 @@
74
74
  <% end %>
75
75
 
76
76
  <% unless minimal %>
77
- <div class="gem-c-chart__footer">
78
- <div class="gem-c-chart__table" id="<%= table_id %>">
79
- <%= render("govuk_publishing_components/components/details",
80
- title: t("components.chart.table_dropdown")
81
- ) do %>
82
- <div tabindex="0" class="gem-c-chart__table-wrapper">
83
- <table class="govuk-table">
84
- <caption class="govuk-visually-hidden" id="<%= "data-table-caption-#{SecureRandom.hex(4)}" %>">
85
- <%= t("components.chart.accessibility_heading", chart_heading: chart_heading) %>
86
- </caption>
87
- <% if table_direction == "horizontal" %>
88
- <thead class="govuk-table__head">
77
+ <div class="gem-c-chart__table" id="<%= table_id %>">
78
+ <%= render("govuk_publishing_components/components/details",
79
+ title: t("components.chart.table_dropdown")
80
+ ) do %>
81
+ <div tabindex="0" class="gem-c-chart__table-wrapper">
82
+ <table class="govuk-table">
83
+ <caption class="govuk-visually-hidden" id="<%= "data-table-caption-#{SecureRandom.hex(4)}" %>">
84
+ <%= t("components.chart.accessibility_heading", chart_heading: chart_heading) %>
85
+ </caption>
86
+ <% if table_direction == "horizontal" %>
87
+ <thead class="govuk-table__head">
88
+ <tr class="govuk-table__row">
89
+ <td class="govuk-table__cell"></td>
90
+ <% keys.each do |key| %>
91
+ <th class="govuk-table__header" scope="col">
92
+ <%= key %>
93
+ </th>
94
+ <% end %>
95
+ </tr>
96
+ </thead>
97
+ <tbody class="govuk-table__body">
98
+ <% rows.each do |row| %>
89
99
  <tr class="govuk-table__row">
90
- <td class="govuk-table__cell"></td>
91
- <% keys.each do |key| %>
92
- <th class="govuk-table__header" scope="col">
93
- <%= key %>
94
- </th>
100
+ <th class="govuk-table__header" scope="row"><%= row[:label] %></th>
101
+ <% row[:values].each do |value| %>
102
+ <td class="govuk-table__cell govuk-table__cell--numeric">
103
+ <%= number_with_delimiter value %>
104
+ </td>
95
105
  <% end %>
96
106
  </tr>
97
- </thead>
98
- <tbody class="govuk-table__body">
107
+ <% end %>
108
+ </tbody>
109
+ <% else %>
110
+ <thead class="govuk-table__head">
111
+ <tr class="govuk-table__row">
112
+ <td class="govuk-table__cell"></td>
99
113
  <% rows.each do |row| %>
100
- <tr class="govuk-table__row">
101
- <th class="govuk-table__header" scope="row"><%= row[:label] %></th>
102
- <% row[:values].each do |value| %>
103
- <td class="govuk-table__cell govuk-table__cell--numeric">
104
- <%= number_with_delimiter value %>
105
- </td>
106
- <% end %>
107
- </tr>
114
+ <th class="govuk-table__header govuk-table__header--stacked" scope="row">
115
+ <%= row[:label] %>
116
+ </th>
108
117
  <% end %>
109
- </tbody>
110
- <% else %>
111
- <thead class="govuk-table__head">
112
- <tr class="govuk-table__row">
113
- <td class="govuk-table__cell"></td>
118
+ </tr>
119
+ </thead>
120
+ <tbody class="govuk-table__body">
121
+ <% keys.each_with_index do |key, index| %>
122
+ <tr>
123
+ <th class="govuk-table__header" scope="row">
124
+ <%= key %>
125
+ </th>
114
126
  <% rows.each do |row| %>
115
- <th class="govuk-table__header govuk-table__header--stacked" scope="row">
116
- <%= row[:label] %>
117
- </th>
127
+ <td class="govuk-table__cell govuk-table__cell--numeric">
128
+ <%= number_with_delimiter row[:values][index] %>
129
+ </td>
118
130
  <% end %>
119
131
  </tr>
120
- </thead>
121
- <tbody class="govuk-table__body">
122
- <% keys.each_with_index do |key, index| %>
123
- <tr>
124
- <th class="govuk-table__header" scope="row">
125
- <%= key %>
126
- </th>
127
- <% rows.each do |row| %>
128
- <td class="govuk-table__cell govuk-table__cell--numeric">
129
- <%= number_with_delimiter row[:values][index] %>
130
- </td>
131
- <% end %>
132
- </tr>
133
- <% end %>
134
- </tbody>
135
- <% end %>
136
- </table>
137
- </div>
138
- <% end %>
139
- </div>
140
-
141
- <% if link %>
142
- <p class="govuk-body">
143
- <%= link_to "Download chart data", link, class: "govuk-link" %>
144
- </p>
132
+ <% end %>
133
+ </tbody>
134
+ <% end %>
135
+ </table>
136
+ </div>
145
137
  <% end %>
146
138
  </div>
139
+
140
+ <% if link %>
141
+ <p class="govuk-body">
142
+ <%= link_to "Download chart data", link, class: "govuk-link" %>
143
+ </p>
144
+ <% end %>
147
145
  <% end %>
148
146
  <% end %>
149
147
  <% end %>
@@ -4,25 +4,26 @@
4
4
  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
5
5
 
6
6
  hint_text ||= ""
7
- id ||= nil
8
7
  is_radio_label ||= false
9
8
  bold ||= false
10
9
  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
11
10
  is_page_heading ||= false
12
11
  right_to_left ||= false
13
12
 
14
- css_classes = %w[gem-c-label govuk-label]
15
- css_classes << "govuk-label--s" if bold
16
- css_classes << "govuk-radios__label" if is_radio_label
17
- css_classes << "govuk-label--#{heading_size}" if heading_size
13
+ component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
14
+ component_helper.add_class("gem-c-label govuk-label")
15
+ component_helper.add_class("govuk-label--s") if bold
16
+ component_helper.add_class("govuk-radios__label") if is_radio_label
17
+ component_helper.add_class("govuk-label--#{heading_size}") if heading_size
18
+ component_helper.set_dir("rtl") if right_to_left
18
19
  %>
19
20
 
20
21
  <% if is_page_heading %>
21
22
  <%= tag.h1 text, class: "govuk-label-wrapper" do %>
22
- <%= tag.label text, id: id, for: html_for, class: css_classes, dir: right_to_left ? "rtl" : nil %>
23
+ <%= tag.label text, for: html_for, **component_helper.all_attributes %>
23
24
  <% end %>
24
25
  <% else %>
25
- <%= tag.label text, id: id, for: html_for, class: css_classes, dir: right_to_left ? "rtl" : nil %>
26
+ <%= tag.label text, for: html_for, **component_helper.all_attributes %>
26
27
  <% end %>
27
28
 
28
29
  <% if hint_text.present? %>
@@ -4,6 +4,7 @@
4
4
  meta ||= []
5
5
  navigation ||= []
6
6
  with_border ||= false
7
+ hide_licence ||= false
7
8
  layout_footer_helper = GovukPublishingComponents::Presenters::LayoutFooterHelper.new(navigation, meta)
8
9
  absolute_links_helper = GovukPublishingComponents::Presenters::AbsoluteLinksHelper.new()
9
10
 
@@ -95,29 +96,31 @@
95
96
  <% end %>
96
97
  </ul>
97
98
  <% end %>
98
- <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
99
- <path
100
- fill="currentColor"
101
- d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
102
- />
103
- </svg>
104
- <% # this is to avoid having hardcoded data attributes in locale files %>
105
- <span
106
- class="govuk-footer__licence-description"
107
- data-ga4-track-links-only
108
- data-ga4-link="<%= {
109
- "event_name": "navigation",
110
- "section": "Licence",
111
- "index_section": layout_footer_helper.ga4_ogl_link_index_section.to_s,
112
- "index_link": "1",
113
- "index_section_count": layout_footer_helper.ga4_index_section_count.to_s,
114
- "text": "Open Government Licence v3.0",
115
- "index_total": "1",
116
- "type": "footer",
117
- }.to_json %>"
118
- >
119
- <%= t("components.layout_footer.licence_html") %>
120
- </span>
99
+ <% unless hide_licence %>
100
+ <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
101
+ <path
102
+ fill="currentColor"
103
+ d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
104
+ />
105
+ </svg>
106
+ <% # this is to avoid having hardcoded data attributes in locale files %>
107
+ <span
108
+ class="govuk-footer__licence-description"
109
+ data-ga4-track-links-only
110
+ data-ga4-link="<%= {
111
+ "event_name": "navigation",
112
+ "section": "Licence",
113
+ "index_section": layout_footer_helper.ga4_ogl_link_index_section.to_s,
114
+ "index_link": "1",
115
+ "index_section_count": layout_footer_helper.ga4_index_section_count.to_s,
116
+ "text": "Open Government Licence v3.0",
117
+ "index_total": "1",
118
+ "type": "footer",
119
+ }.to_json %>"
120
+ >
121
+ <%= t("components.layout_footer.licence_html") %>
122
+ </span>
123
+ <% end %>
121
124
  </div>
122
125
  <% # this is to avoid having hardcoded data attributes in locale files %>
123
126
  <div
@@ -5,12 +5,13 @@
5
5
  inverse ||= false
6
6
  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
7
7
 
8
- custom_margin_bottom_class = shared_helper.get_margin_bottom if [*0..9].include?(local_assigns[:margin_bottom])
9
-
10
- classes = %w(gem-c-lead-paragraph)
11
- classes << "gem-c-lead-paragraph--inverse" if inverse
12
- classes << custom_margin_bottom_class if local_assigns[:margin_bottom]
8
+ component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
9
+ component_helper.add_class("gem-c-lead-paragraph")
10
+ component_helper.add_class("gem-c-lead-paragraph--inverse") if inverse
11
+ component_helper.add_class(shared_helper.get_margin_bottom) if [*0..9].include?(local_assigns[:margin_bottom])
13
12
  %>
14
13
  <% if text.present? %>
15
- <%= content_tag :p, text, class: classes %>
14
+ <%= tag.p(**component_helper.all_attributes) do %>
15
+ <%= text %>
16
+ <% end %>
16
17
  <% end %>
@@ -18,7 +18,7 @@ uses_component_wrapper_helper: true
18
18
  examples:
19
19
  default:
20
20
  data:
21
- chart_heading: Page views chart
21
+ chart_heading: Chart showing page views on the website in January 2015
22
22
  h_axis_title: Day
23
23
  v_axis_title: Views
24
24
  chart_overview: This chart shows page views for January 2015.
@@ -208,12 +208,20 @@ examples:
208
208
  - 1
209
209
  - 2
210
210
  format_axis_labels:
211
- description: Sometimes if there are a lot of labels on the axes the chart can do strange truncation on the labels. If they are meant to be dates, the `h_axis_format` and `v_axis_format` will force a familiar date format to get around this problem.
211
+ description: |
212
+ Axis labels can be forced into date or currency format as shown.
213
+
214
+ 'currency' will add a currency symbol (£) at the start of the labels.
215
+
216
+ 'percent' will add a percent (%) to the end of the labels.
217
+
218
+ 'date' will force a standard date format of `YYYY-MM-DD` to the labels, where they are in an undesirable date format. This can be useful if there are a lot of labels on the axes because the chart can do strange truncation sometimes.
212
219
  data:
213
- chart_heading: Page views chart
220
+ chart_heading: Cost per day
214
221
  h_axis_title: Day
215
- v_axis_title: Views
216
- chart_overview: This chart shows page views for January.
222
+ v_axis_title: Cost
223
+ chart_overview: This chart shows cost per day.
224
+ v_axis_format: currency
217
225
  h_axis_format: date
218
226
  keys:
219
227
  - 2024 Jan 1
@@ -223,14 +231,14 @@ examples:
223
231
  - 2024 Jan 5
224
232
  - 2024 Jan 6
225
233
  rows:
226
- - label: January 2015
234
+ - label: Cost
227
235
  values:
228
- - 110
229
- - 119
230
- - 105
231
- - 109
232
- - 130
233
- - 131
236
+ - 14
237
+ - 29
238
+ - 45
239
+ - 63
240
+ - 54
241
+ - 22
234
242
  vertical table:
235
243
  description: Reorient the table to better suit the output of some data sets.
236
244
  data:
@@ -410,42 +418,6 @@ examples:
410
418
  - 118
411
419
  - 85
412
420
  - 80
413
- with_padding:
414
- description: Moves the heading and items beneath the chart inwards. Useful where the chart is contained in an element where these items would otherwise touch the sides.
415
- data:
416
- chart_heading: Page views
417
- h_axis_title: Day
418
- v_axis_title: Views
419
- padding: true
420
- link: https://www.gov.uk
421
- chart_overview: This is a graph of views per day
422
- keys:
423
- - 1st
424
- - 2nd
425
- - 3rd
426
- - 4th
427
- - 5th
428
- - 6th
429
- - 7th
430
- rows:
431
- - label: January 2015
432
- values:
433
- - 5
434
- - 119
435
- - 74
436
- - 117
437
- - 33
438
- - 89
439
- - 79
440
- - label: January 2016
441
- values:
442
- - 3
443
- - 8
444
- - 37
445
- - 82
446
- - 118
447
- - 85
448
- - 80
449
421
  with_margin_bottom:
450
422
  description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a bottom margin of 15px.
451
423
  data:
@@ -2,6 +2,7 @@ name: Form label
2
2
  description: Use labels for all form fields.
3
3
  body: |
4
4
  For use with other form inputs e.g. [Radio buttons](/component-guide/radio)
5
+ uses_component_wrapper_helper: true
5
6
  accessibility_criteria: |
6
7
  All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
7
8
 
@@ -169,3 +169,10 @@ examples:
169
169
  text: Rhestr o Wasanaethau Cymraeg
170
170
  - href: '/government/organisations/government-digital-service'
171
171
  text: Government Digital Service
172
+
173
+ without_licence_details:
174
+ description: |
175
+ In some limited circumstances (for example, in backend-facing admin systems) it doesn't make
176
+ sense to show the licence information. This can be hidden by setting `hide_licence` to `true`.
177
+ data:
178
+ hide_licence: true
@@ -1,5 +1,6 @@
1
1
  name: Lead paragraph
2
2
  description: The opening paragraph of content. Typically a content item’s description field.
3
+ uses_component_wrapper_helper: true
3
4
  accessibility_criteria: |
4
5
  The lead paragraph must be visually distinct from other paragraphs.
5
6
 
@@ -10,6 +11,7 @@ examples:
10
11
  text: 'UK Visas and Immigration is making changes to the Immigration Rules affecting various categories.'
11
12
  right_to_left:
12
13
  data:
14
+ dir: 'rtl'
13
15
  text: 'قرارات تحقيقات وزارة الدفاع في الانتهاكات المزعومة للمادة ٢ والمادة ٣ من المعاهدة الاوروبية لحقوق الانسان خلال العمليات العسكرية في العراق.'
14
16
  context:
15
17
  right_to_left: true
@@ -19,8 +19,14 @@ module GovukPublishingComponents
19
19
  @y_axis_view_window_min = "auto" if options[:y_axis_auto_adjust]
20
20
  @line_colours = options[:line_colours]
21
21
  @line_styles = options[:line_styles]
22
+
22
23
  @h_axis_format = "YYYY-MM-dd" if options[:h_axis_format] == "date"
24
+ @h_axis_format = "£#" if options[:h_axis_format] == "currency"
25
+ @h_axis_format = "#'\%'" if options[:h_axis_format] == "percent"
26
+
23
27
  @v_axis_format = "YYYY-MM-dd" if options[:v_axis_format] == "date"
28
+ @v_axis_format = "£#" if options[:v_axis_format] == "currency"
29
+ @v_axis_format = "#'\%'" if options[:v_axis_format] == "percent"
24
30
  end
25
31
 
26
32
  # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "45.7.0".freeze
2
+ VERSION = "45.9.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: 45.7.0
4
+ version: 45.9.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: 2024-11-22 00:00:00.000000000 Z
11
+ date: 2024-11-26 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: chartkick