govuk_publishing_components 44.4.2 → 44.6.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/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/_share-links.scss +26 -5
- 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/_share_links.html.erb +2 -0
- 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 +9 -1
- data/app/views/govuk_publishing_components/components/docs/share_links.yml +37 -2
- 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: 82f64e3191afbeb2850a910360ef1d52d51d4c20e3da6af8c876b95e5118f267
|
|
4
|
+
data.tar.gz: 4611f6340457666face57e7ae9b0625c7b30c8432b881c88db7d474f41191c32
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6c183fbef201a31897b2394602aa1eff29773cd15ee22730da0e4232300ca9b13ae391c430852d7679a4979132f0ca9f510647526235a58f1b142693b940f593
|
|
7
|
+
data.tar.gz: f975cd4193f22ccdd364f4a77a4dbf0429ebc2b87d2c273f9e6b973e524f5150a28caa8454b8c2a4512e0079abebd002d2460738c002d3c459eb297d16fd6421
|
|
@@ -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
|
}
|
|
@@ -84,18 +84,39 @@ $column-width: 9.5em;
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
.gem-c-share-links--
|
|
87
|
+
.gem-c-share-links--flexbox {
|
|
88
|
+
.gem-c-share-links__list {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-wrap: wrap;
|
|
91
|
+
}
|
|
92
|
+
|
|
88
93
|
.gem-c-share-links__list-item {
|
|
89
|
-
padding-left:
|
|
90
|
-
padding-
|
|
91
|
-
|
|
94
|
+
padding-left: 0;
|
|
95
|
+
padding-right: 0;
|
|
96
|
+
min-width: 180px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.gem-c-share-links__link-icon {
|
|
100
|
+
display: inline-flex;
|
|
101
|
+
position: relative;
|
|
102
|
+
vertical-align: middle;
|
|
103
|
+
margin-right: govuk-spacing(2);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.gem-c-share-links__label {
|
|
107
|
+
vertical-align: middle;
|
|
92
108
|
}
|
|
93
109
|
|
|
110
|
+
.gem-c-share-links__link {
|
|
111
|
+
display: inline-block;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.gem-c-share-links--square-icons {
|
|
94
116
|
.gem-c-share-links__link-icon {
|
|
95
117
|
background-color: govuk-colour("dark-blue");
|
|
96
118
|
color: govuk-colour("white");
|
|
97
119
|
padding: govuk-spacing(2);
|
|
98
|
-
margin-right: govuk-spacing(2);
|
|
99
120
|
}
|
|
100
121
|
|
|
101
122
|
.gem-c-share-links__link:hover {
|
|
@@ -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 %>
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
ga4_extra_data ||= {}
|
|
9
9
|
stacked ||= false
|
|
10
10
|
columns ||= false
|
|
11
|
+
flexbox ||= false
|
|
11
12
|
square_icons ||= false
|
|
12
13
|
|
|
13
14
|
brand ||= false
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
classes = %w(gem-c-share-links govuk-!-display-none-print)
|
|
17
18
|
classes << "gem-c-share-links--stacked" if stacked
|
|
18
19
|
classes << "gem-c-share-links--columns" if columns
|
|
20
|
+
classes << "gem-c-share-links--flexbox" if flexbox
|
|
19
21
|
classes << "gem-c-share-links--square-icons" if square_icons
|
|
20
22
|
|
|
21
23
|
classes << brand_helper.brand_class
|
|
@@ -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:
|
|
@@ -31,9 +32,16 @@ examples:
|
|
|
31
32
|
inverse: true
|
|
32
33
|
block: |
|
|
33
34
|
<h2>This is a title</h2>
|
|
34
|
-
|
|
35
|
+
<p>This is some body text with <a href="https://example.com">a link</a>.</p>
|
|
35
36
|
context:
|
|
36
37
|
dark_background: true
|
|
38
|
+
with_margin_bottom:
|
|
39
|
+
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 no margin bottom, as spacing below is normally provided by elements within the component.
|
|
40
|
+
data:
|
|
41
|
+
margin_bottom: 9
|
|
42
|
+
block: |
|
|
43
|
+
<h2>This is a title</h2>
|
|
44
|
+
<p>This is some body text with <a href="https://example.com">a link</a>.</p>
|
|
37
45
|
heading_levels:
|
|
38
46
|
data:
|
|
39
47
|
block: |
|
|
@@ -256,10 +256,45 @@ examples:
|
|
|
256
256
|
icon: 'youtube'
|
|
257
257
|
}
|
|
258
258
|
]
|
|
259
|
-
|
|
259
|
+
with_flexbox:
|
|
260
|
+
data:
|
|
261
|
+
flexbox: true
|
|
262
|
+
links: [
|
|
263
|
+
{
|
|
264
|
+
href: '/twitter-share-link',
|
|
265
|
+
text: 'Twitter',
|
|
266
|
+
icon: 'twitter'
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
href: '/instagram-share-link',
|
|
270
|
+
text: 'Instagram',
|
|
271
|
+
icon: 'instagram'
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
href: '/flickr-share-link',
|
|
275
|
+
text: 'Flickr',
|
|
276
|
+
icon: 'flickr'
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
href: '/facebook-share-link',
|
|
280
|
+
text: 'Facebook',
|
|
281
|
+
icon: 'facebook'
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
href: '/youtube-share-link',
|
|
285
|
+
text: 'YouTube',
|
|
286
|
+
icon: 'youtube'
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
href: '/other-share-link',
|
|
290
|
+
text: 'Anything else that might be included that could have quite a long name',
|
|
291
|
+
icon: 'other'
|
|
292
|
+
},
|
|
293
|
+
]
|
|
294
|
+
with_square_icons_and_flexbox:
|
|
260
295
|
data:
|
|
261
296
|
square_icons: true
|
|
262
|
-
|
|
297
|
+
flexbox: true
|
|
263
298
|
links: [
|
|
264
299
|
{
|
|
265
300
|
href: '/twitter-share-link',
|
|
@@ -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.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: 2024-10-
|
|
11
|
+
date: 2024-10-23 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: chartkick
|