govuk_publishing_components 44.4.2 → 44.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/govspeak.js +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +25 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss +2 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss +3 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +3 -3
- data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb +1 -0
- data/app/views/govuk_publishing_components/components/_chart.html.erb +95 -66
- data/app/views/govuk_publishing_components/components/_emergency_banner.html.erb +17 -17
- data/app/views/govuk_publishing_components/components/_error_alert.html.erb +8 -1
- data/app/views/govuk_publishing_components/components/_govspeak.html.erb +11 -11
- data/app/views/govuk_publishing_components/components/docs/chart.yml +92 -2
- data/app/views/govuk_publishing_components/components/docs/emergency_banner.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/error_alert.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/govspeak.yml +1 -0
- data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb +17 -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: a06ccc909d2c5fe51f6a478eedd4876f220cb6849c73a13dfca5b6c29d3090b0
|
|
4
|
+
data.tar.gz: c51dc4c54091b1b563d34fb932fc4a90ade85a44871e1ebeb7ac3af4d529027b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e80f60c13cf467dac01ed345c743ff988e861241bb119519a5809520a38356b64928b066f12a60e6c7c8aa77de66274bbb3497c0281a6d12ebb1760bb54ebddd
|
|
7
|
+
data.tar.gz: 4a773e9819642fa42e050ef4a27fc32a23663a0a6187b4728d034439431442f4c85d895b4d3da1b58f346098deb2d91c60cf315932a5aa74acbf96eeca72721e
|
|
@@ -7,7 +7,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
Govspeak.prototype.init = function () {
|
|
10
|
-
if (this.$module.className.indexOf('disable-youtube') === -1) {
|
|
10
|
+
if (this.$module.className.indexOf('js-disable-youtube') === -1) {
|
|
11
11
|
this.embedYoutube()
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
@import "govuk_publishing_components/individual_component_support";
|
|
2
2
|
|
|
3
3
|
.gem-c-chart {
|
|
4
|
+
position: relative;
|
|
5
|
+
|
|
4
6
|
// slight hack to hide the table automatically added by the charts JS
|
|
5
7
|
// not needed as we already output the table manually in the component
|
|
6
8
|
svg + div:has(table) {
|
|
@@ -39,6 +41,27 @@
|
|
|
39
41
|
}
|
|
40
42
|
}
|
|
41
43
|
|
|
42
|
-
.gem-c-
|
|
43
|
-
|
|
44
|
+
.gem-c-chart__minimal-link {
|
|
45
|
+
position: absolute;
|
|
46
|
+
top: 0;
|
|
47
|
+
left: 0;
|
|
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
|
+
}
|
|
66
|
+
}
|
|
44
67
|
}
|
data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
// is because directly messing with the positioning of the sticky element produces undesirable results.
|
|
12
12
|
// The nested govspeak component handles its own text direction independently, but will
|
|
13
13
|
// coincide with the direction of its parent anyway in all usecases.
|
|
14
|
-
&.direction-rtl {
|
|
14
|
+
&.gem-c-govspeak--direction-rtl {
|
|
15
15
|
direction: rtl;
|
|
16
16
|
text-align: start;
|
|
17
17
|
}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
h6 .number {
|
|
58
58
|
margin-right: .1em;
|
|
59
59
|
|
|
60
|
-
.direction-rtl & {
|
|
60
|
+
.gem-c-govspeak--direction-rtl & {
|
|
61
61
|
margin-right: 0;
|
|
62
62
|
margin-left: .1em;
|
|
63
63
|
}
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
|
|
26
26
|
.gem-c-govspeak {
|
|
27
|
-
&.direction-rtl {
|
|
27
|
+
&.gem-c-govspeak--direction-rtl {
|
|
28
28
|
direction: rtl;
|
|
29
29
|
text-align: start;
|
|
30
30
|
}
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
// Add rtl table styling when `direction: "rtl"` is set
|
|
61
|
-
.govuk-govspeak.direction-rtl,
|
|
62
|
-
.gem-c-govspeak.direction-rtl {
|
|
61
|
+
.govuk-govspeak.gem-c-govspeak--direction-rtl,
|
|
62
|
+
.gem-c-govspeak.gem-c-govspeak--direction-rtl {
|
|
63
63
|
table {
|
|
64
64
|
caption {
|
|
65
65
|
text-align: right;
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
|
|
79
79
|
// Add rtl table styling when `.direction-rtl` is set on a parent element
|
|
80
80
|
// stylelint-disable max-nesting-depth
|
|
81
|
-
.direction-rtl {
|
|
81
|
+
.gem-c-govspeak--direction-rtl {
|
|
82
82
|
.govspeak,
|
|
83
83
|
.gem-c-govspeak {
|
|
84
84
|
table {
|
data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss
CHANGED
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
.gem-c-govspeak {
|
|
16
16
|
@include markdown-typography;
|
|
17
17
|
|
|
18
|
-
&.direction-rtl ol,
|
|
19
|
-
&.direction-rtl ul {
|
|
18
|
+
&.gem-c-govspeak--direction-rtl ol,
|
|
19
|
+
&.gem-c-govspeak--direction-rtl ul {
|
|
20
20
|
margin-left: 0;
|
|
21
21
|
margin-right: govuk-spacing(4);
|
|
22
22
|
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
&.direction-rtl blockquote {
|
|
65
|
+
&.gem-c-govspeak--direction-rtl blockquote {
|
|
66
66
|
padding: 0 govuk-spacing(4) 0 0;
|
|
67
67
|
|
|
68
68
|
@include govuk-media-query($from: desktop) {
|
|
@@ -12,6 +12,7 @@ This component uses the component wrapper helper. It accepts the following optio
|
|
|
12
12
|
- `lang` - accepts a language attribute value
|
|
13
13
|
- `open` - accepts an open attribute value (true or false)
|
|
14
14
|
- `hidden` - accepts an empty string, 'hidden', or 'until-found'
|
|
15
|
+
- `tabindex` - accepts an integer. The integer can also be passed as a string.
|
|
15
16
|
"
|
|
16
17
|
end
|
|
17
18
|
end
|
|
@@ -12,16 +12,22 @@
|
|
|
12
12
|
rows ||= []
|
|
13
13
|
keys ||= []
|
|
14
14
|
chart_overview ||= nil
|
|
15
|
-
|
|
15
|
+
minimal ||= false
|
|
16
|
+
minimal_link ||= nil
|
|
17
|
+
hide_legend ||= minimal
|
|
16
18
|
link ||= false
|
|
19
|
+
height ||= 400
|
|
17
20
|
|
|
18
21
|
chart_id = "chart-id-#{SecureRandom.hex(4)}"
|
|
19
22
|
table_id = "table-id-#{SecureRandom.hex(4)}"
|
|
23
|
+
@external_script ||= OpenStruct.new(loaded: 0)
|
|
24
|
+
@external_script[:loaded] += 1
|
|
20
25
|
|
|
21
26
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
22
27
|
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
23
28
|
component_helper.add_class("gem-c-chart")
|
|
24
29
|
component_helper.add_class(shared_helper.get_margin_bottom)
|
|
30
|
+
component_helper.add_class("gem-c-chart--minimal") if minimal
|
|
25
31
|
|
|
26
32
|
require "chartkick"
|
|
27
33
|
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>'
|
|
@@ -30,26 +36,38 @@
|
|
|
30
36
|
font_19 = { color: '#000', fontName: 'GDS Transport', fontSize: '19', italic: false }
|
|
31
37
|
legend = 'none'
|
|
32
38
|
legend = { position: 'top', textStyle: font_16 } unless hide_legend
|
|
39
|
+
pointSize = 10
|
|
40
|
+
pointSize = 0 if minimal
|
|
41
|
+
enableInteractivity = true
|
|
42
|
+
enableInteractivity = false if minimal
|
|
43
|
+
textPosition = nil
|
|
44
|
+
textPosition = 'none' if minimal
|
|
45
|
+
if minimal && !minimal_link
|
|
46
|
+
raise ArgumentError, "Minimal version must include a link"
|
|
47
|
+
end
|
|
33
48
|
|
|
34
49
|
chart_library_options = {
|
|
35
50
|
chartArea: { width: '80%', height: '60%' },
|
|
36
51
|
crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' },
|
|
37
52
|
curveType: 'none',
|
|
53
|
+
enableInteractivity: enableInteractivity,
|
|
38
54
|
legend: legend,
|
|
39
|
-
pointSize:
|
|
40
|
-
height:
|
|
55
|
+
pointSize: pointSize,
|
|
56
|
+
height: height,
|
|
41
57
|
tooltip: { isHtml: true },
|
|
42
58
|
hAxis: {
|
|
43
59
|
textStyle: font_16,
|
|
44
60
|
format: 'd MMM Y', # https://developers.google.com/chart/interactive/docs/reference#dateformatter
|
|
45
61
|
title: h_axis_title,
|
|
46
62
|
titleTextStyle: font_19,
|
|
63
|
+
textPosition: textPosition,
|
|
47
64
|
},
|
|
48
65
|
vAxis: {
|
|
49
66
|
format: '#,###,###',
|
|
50
67
|
textStyle: font_16,
|
|
51
68
|
title: v_axis_title,
|
|
52
69
|
titleTextStyle: font_19,
|
|
70
|
+
textPosition: textPosition,
|
|
53
71
|
},
|
|
54
72
|
}
|
|
55
73
|
|
|
@@ -64,9 +82,9 @@
|
|
|
64
82
|
end
|
|
65
83
|
%>
|
|
66
84
|
<% if rows.length > 0 && keys.length > 0 %>
|
|
67
|
-
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
|
|
85
|
+
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" if @external_script[:loaded] == 1 %>
|
|
68
86
|
<%= tag.div(**component_helper.all_attributes) do %>
|
|
69
|
-
<% if chart_heading %>
|
|
87
|
+
<% if chart_heading && !minimal %>
|
|
70
88
|
<%= render "govuk_publishing_components/components/heading", {
|
|
71
89
|
text: chart_heading,
|
|
72
90
|
heading_level: chart_heading_level,
|
|
@@ -74,78 +92,89 @@
|
|
|
74
92
|
} %>
|
|
75
93
|
<% end %>
|
|
76
94
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
95
|
+
<% aria_attributes = { hidden: true } if minimal %>
|
|
96
|
+
<%= content_tag :div, id: chart_id, class: "gem-c-chart__chart", aria: aria_attributes do %>
|
|
97
|
+
<% unless minimal %>
|
|
98
|
+
<div class="govuk-visually-hidden">
|
|
99
|
+
<%= content_tag :div, chart_overview, class: "gem-c-chart__a11y-note-1" if chart_overview %>
|
|
100
|
+
<%= content_tag :div, t("components.chart.accessibility_html", table_id: table_id), class: "gem-c-chart__a11y-note-2" %>
|
|
101
|
+
</div>
|
|
102
|
+
<% end %>
|
|
103
|
+
|
|
82
104
|
<%= line_chart(chart_format_data, library: chart_library_options) %>
|
|
83
|
-
|
|
105
|
+
<% end %>
|
|
84
106
|
|
|
85
|
-
|
|
86
|
-
<%=
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
<
|
|
94
|
-
<td class="govuk-table__cell"></td>
|
|
95
|
-
<% keys.each do |key| %>
|
|
96
|
-
<th class="govuk-table__header" scope="col">
|
|
97
|
-
<%= key %>
|
|
98
|
-
</th>
|
|
99
|
-
<% end %>
|
|
100
|
-
</tr>
|
|
101
|
-
</thead>
|
|
102
|
-
<tbody class="govuk-table__body">
|
|
103
|
-
<% rows.each do |row| %>
|
|
107
|
+
<% unless minimal %>
|
|
108
|
+
<div class="gem-c-chart__table" id="<%= table_id %>">
|
|
109
|
+
<%= render("govuk_publishing_components/components/details",
|
|
110
|
+
title: t("components.chart.table_dropdown")
|
|
111
|
+
) do %>
|
|
112
|
+
<div tabindex="0" class="gem-c-chart__table-wrapper">
|
|
113
|
+
<table class="govuk-table">
|
|
114
|
+
<% if table_direction == "horizontal" %>
|
|
115
|
+
<thead class="govuk-table__head">
|
|
104
116
|
<tr class="govuk-table__row">
|
|
105
|
-
<
|
|
106
|
-
<%
|
|
107
|
-
<
|
|
108
|
-
<%=
|
|
109
|
-
</
|
|
117
|
+
<td class="govuk-table__cell"></td>
|
|
118
|
+
<% keys.each do |key| %>
|
|
119
|
+
<th class="govuk-table__header" scope="col">
|
|
120
|
+
<%= key %>
|
|
121
|
+
</th>
|
|
110
122
|
<% end %>
|
|
111
123
|
</tr>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<% else %>
|
|
115
|
-
<thead class="govuk-table__head">
|
|
116
|
-
<tr class="govuk-table__row">
|
|
117
|
-
<td class="govuk-table__cell"></td>
|
|
124
|
+
</thead>
|
|
125
|
+
<tbody class="govuk-table__body">
|
|
118
126
|
<% rows.each do |row| %>
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
127
|
+
<tr class="govuk-table__row">
|
|
128
|
+
<th class="govuk-table__header" scope="row"><%= row[:label] %></th>
|
|
129
|
+
<% row[:values].each do |value| %>
|
|
130
|
+
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
131
|
+
<%= number_with_delimiter value %>
|
|
132
|
+
</td>
|
|
133
|
+
<% end %>
|
|
134
|
+
</tr>
|
|
122
135
|
<% end %>
|
|
123
|
-
</
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
<th class="govuk-table__header" scope="row">
|
|
129
|
-
<%= key %>
|
|
130
|
-
</th>
|
|
136
|
+
</tbody>
|
|
137
|
+
<% else %>
|
|
138
|
+
<thead class="govuk-table__head">
|
|
139
|
+
<tr class="govuk-table__row">
|
|
140
|
+
<td class="govuk-table__cell"></td>
|
|
131
141
|
<% rows.each do |row| %>
|
|
132
|
-
<
|
|
133
|
-
<%=
|
|
134
|
-
</
|
|
142
|
+
<th class="govuk-table__header govuk-table__header--stacked" scope="row">
|
|
143
|
+
<%= row[:label] %>
|
|
144
|
+
</th>
|
|
135
145
|
<% end %>
|
|
136
146
|
</tr>
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
147
|
+
</thead>
|
|
148
|
+
<tbody class="govuk-table__body">
|
|
149
|
+
<% keys.each_with_index do |key, index| %>
|
|
150
|
+
<tr>
|
|
151
|
+
<th class="govuk-table__header" scope="row">
|
|
152
|
+
<%= key %>
|
|
153
|
+
</th>
|
|
154
|
+
<% rows.each do |row| %>
|
|
155
|
+
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
156
|
+
<%= number_with_delimiter row[:values][index] %>
|
|
157
|
+
</td>
|
|
158
|
+
<% end %>
|
|
159
|
+
</tr>
|
|
160
|
+
<% end %>
|
|
161
|
+
</tbody>
|
|
162
|
+
<% end %>
|
|
163
|
+
</table>
|
|
164
|
+
</div>
|
|
165
|
+
<% end %>
|
|
166
|
+
</div>
|
|
144
167
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
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 %>
|
|
149
178
|
<% end %>
|
|
150
179
|
<% end %>
|
|
151
180
|
<% end %>
|
|
@@ -19,33 +19,33 @@
|
|
|
19
19
|
raise ArgumentError, "Emergency type #{campaign_class} is not in list of valid emergency types (#{emergency_banner_helper.emergency_types.join(', ')})"
|
|
20
20
|
end
|
|
21
21
|
|
|
22
|
-
banner_classes = %w[gem-c-emergency-banner]
|
|
23
|
-
banner_classes << "gem-c-emergency-banner--#{campaign_class}"
|
|
24
|
-
banner_classes << "gem-c-emergency-banner--homepage" if homepage
|
|
25
|
-
|
|
26
22
|
heading_classes = %w[gem-c-emergency-banner__heading]
|
|
27
23
|
heading_classes << "gem-c-emergency-banner__heading--homepage" if homepage
|
|
28
24
|
|
|
29
25
|
description_classes = %w[gem-c-emergency-banner__description]
|
|
30
26
|
description_classes << "gem-c-emergency-banner__description--homepage" if homepage
|
|
31
27
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
29
|
+
component_helper.add_class("gem-c-emergency-banner gem-c-emergency-banner--#{campaign_class}")
|
|
30
|
+
component_helper.add_class("gem-c-emergency-banner--homepage") if homepage
|
|
31
|
+
component_helper.add_data_attribute({nosnippet: true})
|
|
32
|
+
component_helper.add_aria_attribute({labelledby: "emergency-banner-heading"})
|
|
35
33
|
|
|
36
34
|
unless disable_ga4
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
component_helper.add_data_attribute({
|
|
36
|
+
ga4_emergency_banner: "",
|
|
37
|
+
module: "ga4-link-tracker",
|
|
38
|
+
ga4_track_links_only: "",
|
|
39
|
+
ga4_set_indexes: "",
|
|
40
|
+
ga4_link: {
|
|
41
|
+
event_name: "navigation",
|
|
42
|
+
type: "emergency banner",
|
|
43
|
+
section: heading,
|
|
44
|
+
}.to_json
|
|
45
|
+
})
|
|
46
46
|
end
|
|
47
47
|
%>
|
|
48
|
-
<%=
|
|
48
|
+
<%= tag.section(**component_helper.all_attributes) do %>
|
|
49
49
|
<div class="govuk-width-container">
|
|
50
50
|
<div class="govuk-grid-row">
|
|
51
51
|
<div class="govuk-grid-column-two-thirds">
|
|
@@ -4,9 +4,16 @@
|
|
|
4
4
|
id ||= nil
|
|
5
5
|
description ||= nil
|
|
6
6
|
data_attributes ||= {}
|
|
7
|
+
|
|
8
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
9
|
+
component_helper.set_id(id)
|
|
10
|
+
component_helper.add_class("gem-c-error-alert govuk-!-display-none-print")
|
|
11
|
+
component_helper.add_data_attribute({ module: "initial-focus" })
|
|
12
|
+
component_helper.add_role("alert")
|
|
13
|
+
component_helper.set_tabindex("-1")
|
|
7
14
|
%>
|
|
8
15
|
|
|
9
|
-
<%= tag.div
|
|
16
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
|
10
17
|
<% if description.present? %>
|
|
11
18
|
<%= tag.h2 message, class: "gem-c-error-summary__title" %>
|
|
12
19
|
<%= tag.div description, class: "gem-c-error-summary__body" %>
|
|
@@ -2,20 +2,20 @@
|
|
|
2
2
|
add_gem_component_stylesheet("govspeak")
|
|
3
3
|
|
|
4
4
|
inverse ||= false
|
|
5
|
-
|
|
5
|
+
local_assigns[:margin_bottom] ||= 0
|
|
6
|
+
direction_class = "gem-c-govspeak--direction-#{direction}" if local_assigns.include?(:direction)
|
|
6
7
|
disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
10
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
11
|
+
component_helper.add_class("gem-c-govspeak govuk-govspeak")
|
|
12
|
+
component_helper.add_class(direction_class) if direction_class
|
|
13
|
+
component_helper.add_class("js-disable-youtube") if disable_youtube_expansions
|
|
14
|
+
component_helper.add_class("gem-c-govspeak--inverse") if inverse
|
|
15
|
+
component_helper.add_class(shared_helper.get_margin_bottom)
|
|
16
|
+
component_helper.add_data_attribute({ module: "govspeak" })
|
|
16
17
|
%>
|
|
17
|
-
|
|
18
|
-
<%= tag.div(class: "gem-c-govspeak govuk-govspeak " + classes.join(" "), data: data_attributes) do %>
|
|
18
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
|
19
19
|
<% if local_assigns.include?(:content) %>
|
|
20
20
|
<% if content.html_safe? %>
|
|
21
21
|
<%= content %>
|
|
@@ -6,7 +6,7 @@ body: |
|
|
|
6
6
|
The chart relies upon chartkick and renders using JavaScript, so the table is provided as a fallback for a lack of JavaScript,
|
|
7
7
|
an accessible view on the data for screenreaders, and a simple view of the raw data for all users.
|
|
8
8
|
|
|
9
|
-
The `
|
|
9
|
+
The `chart_overview` option can be used to provide an explanation for screen reader users of what the graph shows.
|
|
10
10
|
accessibility_criteria: |
|
|
11
11
|
Charts must:
|
|
12
12
|
|
|
@@ -20,7 +20,7 @@ examples:
|
|
|
20
20
|
chart_heading: Page views chart
|
|
21
21
|
h_axis_title: Day
|
|
22
22
|
v_axis_title: Views
|
|
23
|
-
|
|
23
|
+
chart_overview: This chart shows page views for January 2015.
|
|
24
24
|
hide_legend: true
|
|
25
25
|
keys:
|
|
26
26
|
- "2015-01-01"
|
|
@@ -52,6 +52,7 @@ examples:
|
|
|
52
52
|
chart_heading: Page views chart
|
|
53
53
|
h_axis_title: Day
|
|
54
54
|
v_axis_title: Views
|
|
55
|
+
chart_overview: This chart shows page views for January in different years.
|
|
55
56
|
keys:
|
|
56
57
|
- 1st
|
|
57
58
|
- 2nd
|
|
@@ -107,6 +108,7 @@ examples:
|
|
|
107
108
|
table_direction: vertical
|
|
108
109
|
h_axis_title: Day
|
|
109
110
|
v_axis_title: Views
|
|
111
|
+
chart_overview: This chart shows page views for January in different years.
|
|
110
112
|
keys:
|
|
111
113
|
- 1st
|
|
112
114
|
- 2nd
|
|
@@ -141,6 +143,7 @@ examples:
|
|
|
141
143
|
chart_heading_level: 4
|
|
142
144
|
h_axis_title: Day
|
|
143
145
|
v_axis_title: Views
|
|
146
|
+
chart_overview: This chart shows page views for January in different years.
|
|
144
147
|
keys:
|
|
145
148
|
- 1st
|
|
146
149
|
- 2nd
|
|
@@ -175,6 +178,7 @@ examples:
|
|
|
175
178
|
h_axis_title: Day
|
|
176
179
|
v_axis_title: Views
|
|
177
180
|
link: 'https://www.gov.uk'
|
|
181
|
+
chart_overview: This chart shows page views for January in different years.
|
|
178
182
|
keys:
|
|
179
183
|
- 1st
|
|
180
184
|
- 2nd
|
|
@@ -209,6 +213,92 @@ examples:
|
|
|
209
213
|
h_axis_title: Day
|
|
210
214
|
v_axis_title: Views
|
|
211
215
|
margin_bottom: 9
|
|
216
|
+
chart_overview: This chart shows page views for January in different years.
|
|
217
|
+
keys:
|
|
218
|
+
- 1st
|
|
219
|
+
- 2nd
|
|
220
|
+
- 3rd
|
|
221
|
+
- 4th
|
|
222
|
+
- 5th
|
|
223
|
+
- 6th
|
|
224
|
+
- 7th
|
|
225
|
+
rows:
|
|
226
|
+
- label: January 2015
|
|
227
|
+
values:
|
|
228
|
+
- 5
|
|
229
|
+
- 119
|
|
230
|
+
- 74
|
|
231
|
+
- 117
|
|
232
|
+
- 33
|
|
233
|
+
- 89
|
|
234
|
+
- 79
|
|
235
|
+
- label: January 2016
|
|
236
|
+
values:
|
|
237
|
+
- 3
|
|
238
|
+
- 8
|
|
239
|
+
- 37
|
|
240
|
+
- 82
|
|
241
|
+
- 118
|
|
242
|
+
- 85
|
|
243
|
+
- 80
|
|
244
|
+
minimal_version:
|
|
245
|
+
description: |
|
|
246
|
+
The minimal version presents a simplified version of the chart and should only be used where the user is then directed to a more detailed view of the data. Specifically, minimal mode:
|
|
247
|
+
|
|
248
|
+
- turns the chart into a link that should point to a page with a full version of the chart with all data
|
|
249
|
+
- hides the chart heading, but uses the text as the text for the link
|
|
250
|
+
- removes the legend and X and Y axis values
|
|
251
|
+
- removes the data table and link to the data (if supplied) beneath the chart
|
|
252
|
+
- removes the part of the visually hidden accessibility message that links to the table
|
|
253
|
+
- removes the ability to interact with the chart (no hover popups or clicks)
|
|
254
|
+
- sets the size of the points on the chart to zero
|
|
255
|
+
data:
|
|
256
|
+
chart_heading: Page views
|
|
257
|
+
h_axis_title: Day
|
|
258
|
+
v_axis_title: Views
|
|
259
|
+
minimal: true
|
|
260
|
+
minimal_link: "https://www.gov.uk"
|
|
261
|
+
chart_overview: This is a graph of views per day
|
|
262
|
+
keys:
|
|
263
|
+
- 1st
|
|
264
|
+
- 2nd
|
|
265
|
+
- 3rd
|
|
266
|
+
- 4th
|
|
267
|
+
- 5th
|
|
268
|
+
- 6th
|
|
269
|
+
- 7th
|
|
270
|
+
rows:
|
|
271
|
+
- label: January 2015
|
|
272
|
+
values:
|
|
273
|
+
- 5
|
|
274
|
+
- 119
|
|
275
|
+
- 74
|
|
276
|
+
- 117
|
|
277
|
+
- 33
|
|
278
|
+
- 89
|
|
279
|
+
- 79
|
|
280
|
+
- label: January 2016
|
|
281
|
+
values:
|
|
282
|
+
- 3
|
|
283
|
+
- 8
|
|
284
|
+
- 37
|
|
285
|
+
- 82
|
|
286
|
+
- 118
|
|
287
|
+
- 85
|
|
288
|
+
- 80
|
|
289
|
+
with_a_different_height:
|
|
290
|
+
description: |
|
|
291
|
+
Sets a height in pixels for the chart, defaulting to `400`. This is useful where the chart might appear in a narrow column and the default height would be too tall.
|
|
292
|
+
|
|
293
|
+
The component is not currently responsive.
|
|
294
|
+
data:
|
|
295
|
+
chart_heading: Page views
|
|
296
|
+
h_axis_title: Day
|
|
297
|
+
v_axis_title: Views
|
|
298
|
+
minimal: true
|
|
299
|
+
minimal_link: "https://www.gov.uk"
|
|
300
|
+
chart_overview: This is a graph of views per day
|
|
301
|
+
height: 200
|
|
212
302
|
keys:
|
|
213
303
|
- 1st
|
|
214
304
|
- 2nd
|
|
@@ -5,6 +5,7 @@ body: |
|
|
|
5
5
|
|
|
6
6
|
See the [opsmanual](https://docs.publishing.service.gov.uk/manual/emergency-publishing.html#adding-emergency-publishing-banners) for information about what the Emergency Banner is and when it should be deployed.
|
|
7
7
|
|
|
8
|
+
uses_component_wrapper_helper: true
|
|
8
9
|
shared_accessibility_criteria:
|
|
9
10
|
- link
|
|
10
11
|
accessibility_excluded_rules:
|
|
@@ -19,6 +19,7 @@ shared_accessibility_criteria:
|
|
|
19
19
|
- link
|
|
20
20
|
accessibility_excluded_rules:
|
|
21
21
|
- landmark-complementary-is-top-level # Statistic headlines are generating an aside element which can not be a top level in the examples
|
|
22
|
+
uses_component_wrapper_helper: true
|
|
22
23
|
examples:
|
|
23
24
|
basic_content:
|
|
24
25
|
data:
|
|
@@ -12,6 +12,7 @@ module GovukPublishingComponents
|
|
|
12
12
|
check_lang_is_valid(@options[:lang]) if @options.include?(:lang)
|
|
13
13
|
check_open_is_valid(@options[:open]) if @options.include?(:open)
|
|
14
14
|
check_hidden_is_valid(@options[:hidden]) if @options.include?(:hidden)
|
|
15
|
+
check_tabindex_is_valid(@options[:tabindex]) if @options.include?(:tabindex)
|
|
15
16
|
end
|
|
16
17
|
|
|
17
18
|
def all_attributes
|
|
@@ -25,6 +26,7 @@ module GovukPublishingComponents
|
|
|
25
26
|
attributes[:lang] = @options[:lang] unless @options[:lang].blank?
|
|
26
27
|
attributes[:open] = @options[:open] unless @options[:open].blank?
|
|
27
28
|
attributes[:hidden] = @options[:hidden] unless @options[:hidden].nil?
|
|
29
|
+
attributes[:tabindex] = @options[:tabindex] unless @options[:tabindex].blank?
|
|
28
30
|
|
|
29
31
|
attributes
|
|
30
32
|
end
|
|
@@ -69,6 +71,11 @@ module GovukPublishingComponents
|
|
|
69
71
|
@options[:hidden] = hidden_attribute
|
|
70
72
|
end
|
|
71
73
|
|
|
74
|
+
def set_tabindex(tabindex_attribute)
|
|
75
|
+
check_tabindex_is_valid(tabindex_attribute)
|
|
76
|
+
@options[:tabindex] = tabindex_attribute
|
|
77
|
+
end
|
|
78
|
+
|
|
72
79
|
private
|
|
73
80
|
|
|
74
81
|
def check_id_is_valid(id)
|
|
@@ -146,6 +153,16 @@ module GovukPublishingComponents
|
|
|
146
153
|
end
|
|
147
154
|
end
|
|
148
155
|
|
|
156
|
+
def check_tabindex_is_valid(tabindex_attribute)
|
|
157
|
+
return if tabindex_attribute.blank?
|
|
158
|
+
|
|
159
|
+
tabindex_attribute = tabindex_attribute.to_s
|
|
160
|
+
|
|
161
|
+
unless /^-?[0-9]+$/.match?(tabindex_attribute)
|
|
162
|
+
raise(ArgumentError, "tabindex_attribute attribute (#{tabindex_attribute}) is not recognised")
|
|
163
|
+
end
|
|
164
|
+
end
|
|
165
|
+
|
|
149
166
|
def extend_string(option, string)
|
|
150
167
|
((@options[option] ||= "") << " #{string}").strip!
|
|
151
168
|
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: 44.
|
|
4
|
+
version: 44.5.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-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: chartkick
|