govuk_publishing_components 44.7.1 → 44.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +4 -22
- data/app/views/govuk_publishing_components/components/_chart.html.erb +66 -69
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +25 -24
- data/app/views/govuk_publishing_components/components/_summary_card.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_summary_list.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/docs/chart.yml +41 -5
- data/app/views/govuk_publishing_components/components/docs/summary_card.yml +10 -0
- data/app/views/govuk_publishing_components/components/docs/summary_list.yml +11 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6335193c0589b639eb77b5e9c340f94a70c35a54f96e8056b6a4d83a29c6699f
|
|
4
|
+
data.tar.gz: 89a396e84ca1923dc4846ef461b8098b5a7e5fe6c0a1242ba2fff35c873abe77
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 378df079436675db3e0edc071eb541a6a2e5fc5694d834604565c5773169b87d1781ad05ae2cd697943fa3bec818aa50c1705811733257e9ab28e9f14d32da19
|
|
7
|
+
data.tar.gz: c84c7341a07e011d8c2a561e1ae6620d1fce7f6146f95e12974649801fb984aac5e9e3fb1b270acff086f76116b53a634214713342911fa352a9fa5c4f12fabf
|
|
@@ -41,27 +41,9 @@
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
.gem-c-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
width: 100%;
|
|
49
|
-
height: 100%;
|
|
50
|
-
|
|
51
|
-
&:focus {
|
|
52
|
-
background: transparent; // overrides govuk-link background, which obscures the graph
|
|
53
|
-
|
|
54
|
-
&::after {
|
|
55
|
-
content: "";
|
|
56
|
-
position: absolute;
|
|
57
|
-
top: 0;
|
|
58
|
-
left: 0;
|
|
59
|
-
width: 100%;
|
|
60
|
-
height: 100%;
|
|
61
|
-
border-top: solid 1px $govuk-focus-colour;
|
|
62
|
-
border-left: solid 3px $govuk-focus-colour;
|
|
63
|
-
border-right: solid 3px $govuk-focus-colour;
|
|
64
|
-
box-sizing: border-box;
|
|
65
|
-
}
|
|
44
|
+
.gem-c-chart--padding {
|
|
45
|
+
.gem-c-chart__header,
|
|
46
|
+
.gem-c-chart__footer {
|
|
47
|
+
padding: 0 govuk-spacing(4);
|
|
66
48
|
}
|
|
67
49
|
}
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
keys ||= []
|
|
14
14
|
chart_overview ||= nil
|
|
15
15
|
minimal ||= false
|
|
16
|
-
minimal_link ||= nil
|
|
17
16
|
hide_legend ||= minimal
|
|
18
17
|
link ||= false
|
|
19
18
|
height ||= 400
|
|
19
|
+
padding ||= false
|
|
20
20
|
|
|
21
21
|
chart_id = "chart-id-#{SecureRandom.hex(4)}"
|
|
22
22
|
table_id = "table-id-#{SecureRandom.hex(4)}"
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
component_helper.add_class("gem-c-chart")
|
|
29
29
|
component_helper.add_class(shared_helper.get_margin_bottom)
|
|
30
30
|
component_helper.add_class("gem-c-chart--minimal") if minimal
|
|
31
|
+
component_helper.add_class("gem-c-chart--padding") if padding
|
|
31
32
|
|
|
32
33
|
require "chartkick"
|
|
33
34
|
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>'
|
|
@@ -42,9 +43,6 @@
|
|
|
42
43
|
enableInteractivity = false if minimal
|
|
43
44
|
textPosition = nil
|
|
44
45
|
textPosition = 'none' if minimal
|
|
45
|
-
if minimal && !minimal_link
|
|
46
|
-
raise ArgumentError, "Minimal version must include a link"
|
|
47
|
-
end
|
|
48
46
|
|
|
49
47
|
chart_library_options = {
|
|
50
48
|
chartArea: { width: '80%', height: '60%' },
|
|
@@ -85,11 +83,13 @@
|
|
|
85
83
|
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" if @external_script[:loaded] == 1 %>
|
|
86
84
|
<%= tag.div(**component_helper.all_attributes) do %>
|
|
87
85
|
<% if chart_heading && !minimal %>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
<div class="gem-c-chart__header">
|
|
87
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
88
|
+
text: chart_heading,
|
|
89
|
+
heading_level: chart_heading_level,
|
|
90
|
+
margin_bottom: 2,
|
|
91
|
+
} %>
|
|
92
|
+
</div>
|
|
93
93
|
<% end %>
|
|
94
94
|
|
|
95
95
|
<% aria_attributes = { hidden: true } if minimal %>
|
|
@@ -105,76 +105,73 @@
|
|
|
105
105
|
<% end %>
|
|
106
106
|
|
|
107
107
|
<% unless minimal %>
|
|
108
|
-
<div class="gem-c-
|
|
109
|
-
<%=
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<
|
|
117
|
-
<td class="govuk-table__cell"></td>
|
|
118
|
-
<% keys.each do |key| %>
|
|
119
|
-
<th class="govuk-table__header" scope="col">
|
|
120
|
-
<%= key %>
|
|
121
|
-
</th>
|
|
122
|
-
<% end %>
|
|
123
|
-
</tr>
|
|
124
|
-
</thead>
|
|
125
|
-
<tbody class="govuk-table__body">
|
|
126
|
-
<% rows.each do |row| %>
|
|
108
|
+
<div class="gem-c-chart__footer">
|
|
109
|
+
<div class="gem-c-chart__table" id="<%= table_id %>">
|
|
110
|
+
<%= render("govuk_publishing_components/components/details",
|
|
111
|
+
title: t("components.chart.table_dropdown")
|
|
112
|
+
) do %>
|
|
113
|
+
<div tabindex="0" class="gem-c-chart__table-wrapper">
|
|
114
|
+
<table class="govuk-table">
|
|
115
|
+
<% if table_direction == "horizontal" %>
|
|
116
|
+
<thead class="govuk-table__head">
|
|
127
117
|
<tr class="govuk-table__row">
|
|
128
|
-
<
|
|
129
|
-
<%
|
|
130
|
-
<
|
|
131
|
-
<%=
|
|
132
|
-
</
|
|
118
|
+
<td class="govuk-table__cell"></td>
|
|
119
|
+
<% keys.each do |key| %>
|
|
120
|
+
<th class="govuk-table__header" scope="col">
|
|
121
|
+
<%= key %>
|
|
122
|
+
</th>
|
|
133
123
|
<% end %>
|
|
134
124
|
</tr>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
<% else %>
|
|
138
|
-
<thead class="govuk-table__head">
|
|
139
|
-
<tr class="govuk-table__row">
|
|
140
|
-
<td class="govuk-table__cell"></td>
|
|
125
|
+
</thead>
|
|
126
|
+
<tbody class="govuk-table__body">
|
|
141
127
|
<% rows.each do |row| %>
|
|
142
|
-
<
|
|
143
|
-
|
|
144
|
-
|
|
128
|
+
<tr class="govuk-table__row">
|
|
129
|
+
<th class="govuk-table__header" scope="row"><%= row[:label] %></th>
|
|
130
|
+
<% row[:values].each do |value| %>
|
|
131
|
+
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
132
|
+
<%= number_with_delimiter value %>
|
|
133
|
+
</td>
|
|
134
|
+
<% end %>
|
|
135
|
+
</tr>
|
|
145
136
|
<% end %>
|
|
146
|
-
</
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<th class="govuk-table__header" scope="row">
|
|
152
|
-
<%= key %>
|
|
153
|
-
</th>
|
|
137
|
+
</tbody>
|
|
138
|
+
<% else %>
|
|
139
|
+
<thead class="govuk-table__head">
|
|
140
|
+
<tr class="govuk-table__row">
|
|
141
|
+
<td class="govuk-table__cell"></td>
|
|
154
142
|
<% rows.each do |row| %>
|
|
155
|
-
<
|
|
156
|
-
<%=
|
|
157
|
-
</
|
|
143
|
+
<th class="govuk-table__header govuk-table__header--stacked" scope="row">
|
|
144
|
+
<%= row[:label] %>
|
|
145
|
+
</th>
|
|
158
146
|
<% end %>
|
|
159
147
|
</tr>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
148
|
+
</thead>
|
|
149
|
+
<tbody class="govuk-table__body">
|
|
150
|
+
<% keys.each_with_index do |key, index| %>
|
|
151
|
+
<tr>
|
|
152
|
+
<th class="govuk-table__header" scope="row">
|
|
153
|
+
<%= key %>
|
|
154
|
+
</th>
|
|
155
|
+
<% rows.each do |row| %>
|
|
156
|
+
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
157
|
+
<%= number_with_delimiter row[:values][index] %>
|
|
158
|
+
</td>
|
|
159
|
+
<% end %>
|
|
160
|
+
</tr>
|
|
161
|
+
<% end %>
|
|
162
|
+
</tbody>
|
|
163
|
+
<% end %>
|
|
164
|
+
</table>
|
|
165
|
+
</div>
|
|
166
|
+
<% end %>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<% if link %>
|
|
170
|
+
<p class="govuk-body">
|
|
171
|
+
<%= link_to "Download chart data", link, class: "govuk-link" %>
|
|
172
|
+
</p>
|
|
165
173
|
<% end %>
|
|
166
174
|
</div>
|
|
167
|
-
|
|
168
|
-
<% if link %>
|
|
169
|
-
<p class="govuk-body">
|
|
170
|
-
<%= link_to "Download chart data", link, class: "govuk-link" %>
|
|
171
|
-
</p>
|
|
172
|
-
<% end %>
|
|
173
|
-
<% end %>
|
|
174
|
-
<% if minimal %>
|
|
175
|
-
<%= link_to(minimal_link, class: "govuk-link gem-c-chart__minimal-link") do %>
|
|
176
|
-
<span class="govuk-visually-hidden"><%= chart_heading %></span>
|
|
177
|
-
<% end %>
|
|
178
175
|
<% end %>
|
|
179
176
|
<% end %>
|
|
180
177
|
<% end %>
|
data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
CHANGED
|
@@ -299,29 +299,30 @@
|
|
|
299
299
|
</h3>
|
|
300
300
|
<div class="govuk-grid-row">
|
|
301
301
|
<div class="govuk-grid-column-full">
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
302
|
+
<%= tag.form(
|
|
303
|
+
class: "gem-c-layout-super-navigation-header__search-form",
|
|
304
|
+
id: "search",
|
|
305
|
+
data: {
|
|
306
|
+
module: "ga4-form-tracker",
|
|
307
|
+
ga4_form: {
|
|
308
|
+
event_name: "search",
|
|
309
|
+
type: "header menu bar",
|
|
310
|
+
section: "Search GOV.UK",
|
|
311
|
+
action: "search",
|
|
312
|
+
url: "/search/all",
|
|
313
|
+
index_section: 3,
|
|
314
|
+
index_section_count: 3,
|
|
315
|
+
},
|
|
316
|
+
ga4_form_include_text: "",
|
|
317
|
+
ga4_form_no_answer_undefined: "",
|
|
318
|
+
},
|
|
319
|
+
action: absolute_links_helper.make_url_absolute("/search/all"),
|
|
320
|
+
method: "get",
|
|
321
|
+
role: "search",
|
|
322
|
+
aria: {
|
|
323
|
+
label: "Site-wide",
|
|
324
|
+
}
|
|
325
|
+
) do %>
|
|
325
326
|
<%= render "govuk_publishing_components/components/search", {
|
|
326
327
|
inline_label: false,
|
|
327
328
|
label_size: "m",
|
|
@@ -331,7 +332,7 @@
|
|
|
331
332
|
margin_bottom: 0,
|
|
332
333
|
disable_corrections: true,
|
|
333
334
|
} %>
|
|
334
|
-
|
|
335
|
+
<% end %>
|
|
335
336
|
</div>
|
|
336
337
|
</div>
|
|
337
338
|
</div>
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
<%= tag.div class: "govuk-summary-card__content" do %>
|
|
29
29
|
<%= tag.dl class: "govuk-summary-list" do %>
|
|
30
30
|
<% rows.each do |row| %>
|
|
31
|
-
<%= tag.div class: "govuk-summary-list__row" do %>
|
|
31
|
+
<%= tag.div class: "govuk-summary-list__row", data: row[:data] do %>
|
|
32
32
|
<%= tag.dt class: "govuk-summary-list__key" do %>
|
|
33
33
|
<%= row[:key] %>
|
|
34
34
|
<% end %>
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
classes = "govuk-summary-list__row"
|
|
78
78
|
end
|
|
79
79
|
%>
|
|
80
|
-
<%= tag.div class: classes do %>
|
|
80
|
+
<%= tag.div class: classes, data: item[:data] do %>
|
|
81
81
|
|
|
82
82
|
<%= tag.dt item[:field], class: "govuk-summary-list__key" %>
|
|
83
83
|
<%= tag.dd item[:value], class: "govuk-summary-list__value" %>
|
|
@@ -206,6 +206,42 @@ examples:
|
|
|
206
206
|
- 118
|
|
207
207
|
- 85
|
|
208
208
|
- 80
|
|
209
|
+
with_padding:
|
|
210
|
+
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.
|
|
211
|
+
data:
|
|
212
|
+
chart_heading: Page views
|
|
213
|
+
h_axis_title: Day
|
|
214
|
+
v_axis_title: Views
|
|
215
|
+
padding: true
|
|
216
|
+
link: https://www.gov.uk
|
|
217
|
+
chart_overview: This is a graph of views per day
|
|
218
|
+
keys:
|
|
219
|
+
- 1st
|
|
220
|
+
- 2nd
|
|
221
|
+
- 3rd
|
|
222
|
+
- 4th
|
|
223
|
+
- 5th
|
|
224
|
+
- 6th
|
|
225
|
+
- 7th
|
|
226
|
+
rows:
|
|
227
|
+
- label: January 2015
|
|
228
|
+
values:
|
|
229
|
+
- 5
|
|
230
|
+
- 119
|
|
231
|
+
- 74
|
|
232
|
+
- 117
|
|
233
|
+
- 33
|
|
234
|
+
- 89
|
|
235
|
+
- 79
|
|
236
|
+
- label: January 2016
|
|
237
|
+
values:
|
|
238
|
+
- 3
|
|
239
|
+
- 8
|
|
240
|
+
- 37
|
|
241
|
+
- 82
|
|
242
|
+
- 118
|
|
243
|
+
- 85
|
|
244
|
+
- 80
|
|
209
245
|
with_margin_bottom:
|
|
210
246
|
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.
|
|
211
247
|
data:
|
|
@@ -243,10 +279,11 @@ examples:
|
|
|
243
279
|
- 80
|
|
244
280
|
minimal_version:
|
|
245
281
|
description: |
|
|
246
|
-
The minimal version presents a simplified version of the chart
|
|
282
|
+
The minimal version presents a simplified version of the chart. This should only be used where there is not enough space to display a full chart, and the user is then given an option to see more information about the chart, for example by including a link next to the chart component. This must be part of the page, as this is not provided by the component itself.
|
|
247
283
|
|
|
248
|
-
|
|
249
|
-
|
|
284
|
+
Specifically, minimal mode:
|
|
285
|
+
|
|
286
|
+
- hides the chart heading
|
|
250
287
|
- removes the legend and X and Y axis values
|
|
251
288
|
- removes the data table and link to the data (if supplied) beneath the chart
|
|
252
289
|
- removes the part of the visually hidden accessibility message that links to the table
|
|
@@ -257,7 +294,6 @@ examples:
|
|
|
257
294
|
h_axis_title: Day
|
|
258
295
|
v_axis_title: Views
|
|
259
296
|
minimal: true
|
|
260
|
-
minimal_link: "https://www.gov.uk"
|
|
261
297
|
chart_overview: This is a graph of views per day
|
|
262
298
|
keys:
|
|
263
299
|
- 1st
|
|
@@ -296,7 +332,6 @@ examples:
|
|
|
296
332
|
h_axis_title: Day
|
|
297
333
|
v_axis_title: Views
|
|
298
334
|
minimal: true
|
|
299
|
-
minimal_link: "https://www.gov.uk"
|
|
300
335
|
chart_overview: This is a graph of views per day
|
|
301
336
|
height: 200
|
|
302
337
|
keys:
|
|
@@ -326,3 +361,4 @@ examples:
|
|
|
326
361
|
- 118
|
|
327
362
|
- 85
|
|
328
363
|
- 80
|
|
364
|
+
|
|
@@ -91,3 +91,13 @@ examples:
|
|
|
91
91
|
- label: View
|
|
92
92
|
href: "#1"
|
|
93
93
|
opens_in_new_tab: true
|
|
94
|
+
with_row_data_attributes:
|
|
95
|
+
description: |
|
|
96
|
+
Data attributes can be passed to individual rows within the component as shown.
|
|
97
|
+
data:
|
|
98
|
+
title: Title
|
|
99
|
+
rows:
|
|
100
|
+
- key: key one
|
|
101
|
+
value: value1
|
|
102
|
+
data:
|
|
103
|
+
module: "something"
|
|
@@ -139,6 +139,17 @@ examples:
|
|
|
139
139
|
edit:
|
|
140
140
|
href: "edit-feedback"
|
|
141
141
|
|
|
142
|
+
with_data_attributes:
|
|
143
|
+
description: |
|
|
144
|
+
Data attributes can be passed to individual items within the component as shown.
|
|
145
|
+
data:
|
|
146
|
+
title: "Title, summary and body"
|
|
147
|
+
items:
|
|
148
|
+
- field: "Title"
|
|
149
|
+
value: "Ethical standards for public service providers"
|
|
150
|
+
data:
|
|
151
|
+
module: "something"
|
|
152
|
+
|
|
142
153
|
with_block:
|
|
143
154
|
description: Use the summary list with a block when you need to show an empty state message or load another component.
|
|
144
155
|
data:
|
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: 44.
|
|
4
|
+
version: 44.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-10-
|
|
11
|
+
date: 2024-10-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: chartkick
|