govuk_publishing_components 44.4.1 → 44.5.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/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +1 -1
- 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
- data/node_modules/axe-core/README.md +3 -3
- data/node_modules/axe-core/axe.d.ts +5 -1
- data/node_modules/axe-core/axe.js +317 -299
- data/node_modules/axe-core/axe.min.js +2 -2
- data/node_modules/axe-core/locales/README.md +3 -3
- data/node_modules/axe-core/locales/_template.json +14 -14
- data/node_modules/axe-core/package.json +2 -1
- data/node_modules/axe-core/sri-history.json +4 -0
- 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
|
|
@@ -333,7 +333,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
|
|
|
333
333
|
var element = data.element
|
|
334
334
|
var resultsId = data.resultsId
|
|
335
335
|
var isClickEvent = data.event !== undefined
|
|
336
|
-
var isSearchResult = element.getAttribute('data-ga4-search-query')
|
|
336
|
+
var isSearchResult = element.getAttribute('data-ga4-search-query') !== null
|
|
337
337
|
|
|
338
338
|
var ecommerceSchema = new window.GOVUK.analyticsGa4.Schemas().ecommerceSchema()
|
|
339
339
|
var DEFAULT_LIST_TITLE = 'Smart answer results'
|
|
@@ -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:
|