govuk_publishing_components 29.15.0 → 29.15.1
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/accordion.js +17 -22
- data/app/models/govuk_publishing_components/audit_applications.rb +31 -9
- data/app/models/govuk_publishing_components/audit_comparer.rb +15 -9
- data/app/views/govuk_publishing_components/audit/_components.html.erb +20 -2
- data/app/views/govuk_publishing_components/components/_table.html.erb +3 -2
- data/app/views/govuk_publishing_components/components/docs/back_link.yml +1 -1
- data/app/views/govuk_publishing_components/components/docs/big_number.yml +2 -2
- data/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml +2 -2
- data/app/views/govuk_publishing_components/components/docs/button.yml +41 -40
- data/app/views/govuk_publishing_components/components/docs/cards.yml +2 -0
- data/app/views/govuk_publishing_components/components/docs/checkboxes.yml +216 -216
- data/app/views/govuk_publishing_components/components/docs/cookie_banner.yml +2 -1
- data/app/views/govuk_publishing_components/components/docs/copy_to_clipboard.yml +2 -2
- data/app/views/govuk_publishing_components/components/docs/details.yml +5 -1
- data/app/views/govuk_publishing_components/components/docs/document_list.yml +1 -2
- data/app/views/govuk_publishing_components/components/docs/error_alert.yml +4 -0
- data/app/views/govuk_publishing_components/components/docs/error_summary.yml +4 -6
- data/app/views/govuk_publishing_components/components/docs/image_card.yml +2 -1
- data/app/views/govuk_publishing_components/components/docs/intervention.yml +25 -25
- data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml +1 -2
- data/app/views/govuk_publishing_components/components/docs/print_link.yml +5 -1
- data/app/views/govuk_publishing_components/components/docs/select.yml +101 -98
- data/app/views/govuk_publishing_components/components/docs/table.yml +6 -1
- data/app/views/govuk_publishing_components/components/docs/tabs.yml +4 -0
- data/lib/govuk_publishing_components/app_helpers/table_helper.rb +4 -2
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +3 -3
@@ -23,16 +23,14 @@ examples:
|
|
23
23
|
items:
|
24
24
|
- text: Descriptive link to the question with an error 1
|
25
25
|
href: '#example-error-1'
|
26
|
-
data_attributes:
|
27
|
-
tracking: GTM-123AA
|
28
26
|
- text: Descriptive link to the question with an error 2
|
29
27
|
href: '#example-error-2'
|
30
|
-
data_attributes:
|
31
|
-
tracking: GTM-123AB
|
32
28
|
- text: Description of error without link
|
33
|
-
data_attributes:
|
34
|
-
tracking: GTM-123AC
|
35
29
|
with_data_attributes:
|
30
|
+
description: |
|
31
|
+
The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
|
32
|
+
|
33
|
+
Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
|
36
34
|
data:
|
37
35
|
title: Message to alert the user to a problem goes here
|
38
36
|
description: Optional description of the errors and how to correct them
|
@@ -195,7 +195,8 @@ examples:
|
|
195
195
|
text: "Announcement"
|
196
196
|
heading_text: "Something has happened nearby possibly"
|
197
197
|
description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
|
198
|
-
|
198
|
+
with_data_attributes:
|
199
|
+
description: Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
|
199
200
|
data:
|
200
201
|
href: "/i-am-not-a-valid-link"
|
201
202
|
href_data_attributes: {
|
@@ -20,31 +20,31 @@ shared_accessibility_criteria:
|
|
20
20
|
examples:
|
21
21
|
default:
|
22
22
|
data:
|
23
|
-
suggestion_text:
|
23
|
+
suggestion_text: You should renew your permit every 6 months.
|
24
24
|
|
25
25
|
with_suggestion_link:
|
26
26
|
data:
|
27
|
-
suggestion_text:
|
27
|
+
suggestion_text: Based on your browsing you might be interested in
|
28
28
|
suggestion_link_text: "Travel abroad: step by step"
|
29
|
-
suggestion_link_url:
|
29
|
+
suggestion_link_url: /travel-abroad
|
30
30
|
|
31
31
|
with_dismiss_link:
|
32
32
|
data:
|
33
|
-
suggestion_text:
|
34
|
-
dismiss_text:
|
33
|
+
suggestion_text: You should renew your permit every 6 months.
|
34
|
+
dismiss_text: Hide this suggestion
|
35
35
|
|
36
36
|
with_suggestion_link_only:
|
37
37
|
data:
|
38
|
-
suggestion_link_text:
|
39
|
-
suggestion_link_url:
|
38
|
+
suggestion_link_text: You can now apply for a permit online.
|
39
|
+
suggestion_link_url: /permit
|
40
40
|
|
41
41
|
with_hide:
|
42
42
|
description: |
|
43
43
|
This example is for when we want to hide by default and display to the user based on some logic,
|
44
44
|
either in the backend or with Javascript.
|
45
45
|
data:
|
46
|
-
suggestion_link_text:
|
47
|
-
suggestion_link_url:
|
46
|
+
suggestion_link_text: You may be invited to fill in a questionnaire
|
47
|
+
suggestion_link_url: /questionnaire
|
48
48
|
hide: true
|
49
49
|
|
50
50
|
open_suggestion_link_in_new_tab:
|
@@ -54,30 +54,30 @@ examples:
|
|
54
54
|
Link text should tell the user that the link opens in a new tab.
|
55
55
|
Note: "(opens in a new tab)" is added to link text if the phrase isn't included.
|
56
56
|
data:
|
57
|
-
suggestion_link_text:
|
58
|
-
suggestion_link_url:
|
57
|
+
suggestion_link_text: You can now apply for a permit online
|
58
|
+
suggestion_link_url: www.google.com/permit
|
59
59
|
new_tab: true
|
60
60
|
|
61
61
|
with_data_attributes:
|
62
62
|
description: |
|
63
63
|
This example shows the use of `suggestion_data_attributes` and
|
64
64
|
`dismiss_data_attributes` for click tracking.
|
65
|
+
|
66
|
+
Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
|
65
67
|
data:
|
66
|
-
suggestion_text:
|
68
|
+
suggestion_text: Based on your browsing you might be interested in
|
67
69
|
suggestion_link_text: "Travel abroad: step by step"
|
68
|
-
suggestion_link_url:
|
70
|
+
suggestion_link_url: /travel-abroad
|
69
71
|
suggestion_data_attributes:
|
70
|
-
|
71
|
-
track-
|
72
|
-
track-action: "interventionClicked"
|
72
|
+
track-category: interventionBanner
|
73
|
+
track-action: interventionClicked
|
73
74
|
track-dimension: "Travel abroad: step by step"
|
74
|
-
track-dimension-index:
|
75
|
-
track-label:
|
76
|
-
dismiss_text:
|
75
|
+
track-dimension-index: 29
|
76
|
+
track-label: clicked suggestion
|
77
|
+
dismiss_text: Hide this suggestion
|
77
78
|
dismiss_data_attributes:
|
78
|
-
|
79
|
-
track-
|
80
|
-
track-
|
81
|
-
track-dimension:
|
82
|
-
track-
|
83
|
-
track-label: "hid the intervention"
|
79
|
+
track-category: interventionBanner
|
80
|
+
track-action: interventionDismissed
|
81
|
+
track-dimension: Hide this suggestion
|
82
|
+
track-dimension-index: 29
|
83
|
+
track-label: hide the intervention
|
@@ -6,8 +6,6 @@ body: |
|
|
6
6
|
|
7
7
|
Alternatively a custom organisation logo can be provided as an image.
|
8
8
|
|
9
|
-
Data tracking attributes can be provided to add tracking to each organisation logo. This will only apply to organisations with a link. Example here: [with_data_attributes](/component-guide/organisation_logo/with_data_attributes)
|
10
|
-
|
11
9
|
The logo can optionally be wrapped in a heading.
|
12
10
|
|
13
11
|
The logo can be set to not take up the full width of the parent container with the `inline` option.
|
@@ -147,6 +145,7 @@ examples:
|
|
147
145
|
url: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/321/HMPS.jpg'
|
148
146
|
alt_text: 'HM Prison Service'
|
149
147
|
with_data_attributes:
|
148
|
+
description: Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
|
150
149
|
data:
|
151
150
|
organisation:
|
152
151
|
name: Cabinet Office
|
@@ -8,7 +8,7 @@ shared_accessibility_criteria:
|
|
8
8
|
- link
|
9
9
|
examples:
|
10
10
|
default:
|
11
|
-
description: This component calls `print()` via the browser's DOM API. By default it relies on JavaScript and is not shown in environments where JavaScript is disabled. The \"link\" here is actually a button tag because this is not a navigation event.
|
11
|
+
description: This component calls `print()` via the browser's DOM API. By default it relies on JavaScript and is not shown in environments where JavaScript is disabled. The \"link\" here is actually a button tag because this is not a navigation event.
|
12
12
|
with_different_text:
|
13
13
|
data:
|
14
14
|
text: "Print this manual"
|
@@ -17,6 +17,10 @@ examples:
|
|
17
17
|
data:
|
18
18
|
href: "/print"
|
19
19
|
with_data_attributes:
|
20
|
+
description: |
|
21
|
+
Data attributes can be passed to the component as shown.
|
22
|
+
|
23
|
+
Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
|
20
24
|
data:
|
21
25
|
data_attributes:
|
22
26
|
track-category: "printButton"
|
@@ -10,160 +10,163 @@ accessibility_criteria: |
|
|
10
10
|
examples:
|
11
11
|
default:
|
12
12
|
data:
|
13
|
-
id:
|
14
|
-
label:
|
13
|
+
id: dropdown1
|
14
|
+
label: My Dropdown
|
15
15
|
options:
|
16
|
-
- text:
|
17
|
-
value:
|
18
|
-
- text:
|
19
|
-
value:
|
20
|
-
- text:
|
21
|
-
value:
|
16
|
+
- text: Option one
|
17
|
+
value: option1
|
18
|
+
- text: Option two
|
19
|
+
value: option2
|
20
|
+
- text: Option three
|
21
|
+
value: option3
|
22
22
|
with_different_id_and_name:
|
23
23
|
description: If no name is provided, name defaults to the (required) value of id.
|
24
24
|
data:
|
25
|
-
id:
|
26
|
-
label:
|
27
|
-
name:
|
25
|
+
id: dropdown1-1
|
26
|
+
label: My Dropdown
|
27
|
+
name: dropdown[1]
|
28
28
|
options:
|
29
|
-
- text:
|
30
|
-
value:
|
31
|
-
- text:
|
32
|
-
value:
|
29
|
+
- text: Option one
|
30
|
+
value: option1
|
31
|
+
- text: Option two
|
32
|
+
value: option2
|
33
33
|
with_preselect:
|
34
34
|
data:
|
35
|
-
id:
|
36
|
-
label:
|
35
|
+
id: dropdown2
|
36
|
+
label: Option 2 preselected
|
37
37
|
options:
|
38
|
-
- text:
|
39
|
-
value:
|
40
|
-
- text:
|
41
|
-
value:
|
38
|
+
- text: Option one
|
39
|
+
value: option1
|
40
|
+
- text: Option two
|
41
|
+
value: option2
|
42
42
|
selected: true
|
43
|
-
- text:
|
44
|
-
value:
|
43
|
+
- text: Option three
|
44
|
+
value: option3
|
45
45
|
with_hint:
|
46
46
|
description: When a hint is included the `aria-describedby` attribute of the select is included to point to the hint. When an error and a hint are present, that attribute includes the IDs of both the hint and the error.
|
47
47
|
data:
|
48
|
-
id:
|
49
|
-
label:
|
50
|
-
hint:
|
51
|
-
hint_id:
|
48
|
+
id: dropdown2-1
|
49
|
+
label: Choose your preferred thing
|
50
|
+
hint: You might need some more information here
|
51
|
+
hint_id: optional-hint-id
|
52
52
|
options:
|
53
|
-
- text:
|
54
|
-
value:
|
55
|
-
- text:
|
56
|
-
value:
|
53
|
+
- text: Something
|
54
|
+
value: option1
|
55
|
+
- text: Something else
|
56
|
+
value: option2
|
57
57
|
with_tracking:
|
58
|
-
description:
|
58
|
+
description: |
|
59
|
+
Tracking can be enabled on the select component by passing a minimum of `data_track_category` and `data_track_action`. Other tracking attributes are optional. Tracking is provided by the [track-select-change](https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/javascripts/govuk_publishing_components/analytics/track-select-change.js) module.
|
60
|
+
|
61
|
+
Note: tracking events do not fire within the component guide.
|
59
62
|
data:
|
60
|
-
id:
|
61
|
-
label:
|
63
|
+
id: dropdown3
|
64
|
+
label: With tracking enabled
|
62
65
|
options:
|
63
|
-
- text:
|
64
|
-
value:
|
66
|
+
- text: Option one
|
67
|
+
value: option1
|
65
68
|
data_attributes:
|
66
|
-
track_category:
|
69
|
+
track_category: relatedLinkClicked
|
67
70
|
track_action: 1.1
|
68
|
-
track_label:
|
71
|
+
track_label: /link-1
|
69
72
|
track_options:
|
70
73
|
dimension28: 1
|
71
|
-
dimension29:
|
72
|
-
- text:
|
73
|
-
value:
|
74
|
+
dimension29: Link 1
|
75
|
+
- text: Option two
|
76
|
+
value: option2
|
74
77
|
data_attributes:
|
75
|
-
track_category:
|
78
|
+
track_category: relatedLinkClicked
|
76
79
|
track_action: 1.2
|
77
|
-
track_label:
|
80
|
+
track_label: /link-2
|
78
81
|
track_options:
|
79
82
|
dimension28: 2
|
80
|
-
dimension29:
|
81
|
-
- text:
|
82
|
-
value:
|
83
|
+
dimension29: Link 2
|
84
|
+
- text: Option three
|
85
|
+
value: option3
|
83
86
|
data_attributes:
|
84
|
-
track_category:
|
87
|
+
track_category: relatedLinkClicked
|
85
88
|
track_action: 1.3
|
86
|
-
track_label:
|
89
|
+
track_label: /link-3
|
87
90
|
track_options:
|
88
91
|
dimension28: 3
|
89
|
-
dimension29:
|
92
|
+
dimension29: Link 3
|
90
93
|
with_data_attributes:
|
91
94
|
description: Other data attributes can be passed to the component if needed.
|
92
95
|
data:
|
93
|
-
id:
|
94
|
-
label:
|
96
|
+
id: dropdown4
|
97
|
+
label: With data attributes
|
95
98
|
options:
|
96
|
-
- text:
|
97
|
-
value:
|
99
|
+
- text: Option one
|
100
|
+
value: option1
|
98
101
|
data_attributes:
|
99
|
-
another_attribute:
|
100
|
-
something_else:
|
101
|
-
- text:
|
102
|
-
value:
|
103
|
-
- text:
|
104
|
-
value:
|
102
|
+
another_attribute: attribute 1
|
103
|
+
something_else: attribute 2
|
104
|
+
- text: Option two
|
105
|
+
value: option2
|
106
|
+
- text: Option three
|
107
|
+
value: option3
|
105
108
|
with_error:
|
106
109
|
description: If the user has to select an option, it is recommended that a radio button is used instead of a select, but this is not always possible. Note that `error_id` is optional, if it is not passed one will be generated automatically.
|
107
110
|
data:
|
108
|
-
id:
|
109
|
-
label:
|
110
|
-
error_message:
|
111
|
-
error_id:
|
111
|
+
id: dropdown4-1
|
112
|
+
label: How will you be travelling to the conference?
|
113
|
+
error_message: Please choose an option
|
114
|
+
error_id: error_id
|
112
115
|
options:
|
113
116
|
- text: ""
|
114
117
|
value: ""
|
115
|
-
- text:
|
116
|
-
value:
|
117
|
-
- text:
|
118
|
-
value:
|
118
|
+
- text: Public transport
|
119
|
+
value: option1
|
120
|
+
- text: Will make own arrangements
|
121
|
+
value: option2
|
119
122
|
with_error_id_but_no_message:
|
120
123
|
description: For some selects the error message should be rendered separately but an error state is still required (currently required in smart answers). In this scenario an `error_id` can be passed without an `error_message` to highlight the component and set `aria-describedby` correctly.
|
121
124
|
data:
|
122
|
-
id:
|
123
|
-
label:
|
124
|
-
error_id:
|
125
|
+
id: dropdown4-2
|
126
|
+
label: What lunch option would you like?
|
127
|
+
error_id: error_id
|
125
128
|
options:
|
126
129
|
- text: ""
|
127
130
|
value: ""
|
128
|
-
- text:
|
129
|
-
value:
|
130
|
-
- text:
|
131
|
-
value:
|
131
|
+
- text: Vegetarian
|
132
|
+
value: option1
|
133
|
+
- text: Meat
|
134
|
+
value: option2
|
132
135
|
full_width:
|
133
136
|
description: Make the select width 100%. This is used for facets in finder-frontend's search.
|
134
137
|
data:
|
135
|
-
id:
|
136
|
-
label:
|
138
|
+
id: dropdown5
|
139
|
+
label: Really wide
|
137
140
|
full_width: true
|
138
141
|
options:
|
139
|
-
- text:
|
140
|
-
value:
|
141
|
-
- text:
|
142
|
-
value:
|
143
|
-
- text:
|
144
|
-
value:
|
142
|
+
- text: Option one
|
143
|
+
value: option1
|
144
|
+
- text: Option two
|
145
|
+
value: option2
|
146
|
+
- text: Option three
|
147
|
+
value: option3
|
145
148
|
with_custom_label_size:
|
146
149
|
description: Make the label different sizes. Valid options are `s`, `m`, `l` and `xl`.
|
147
150
|
data:
|
148
|
-
id:
|
149
|
-
label:
|
150
|
-
heading_size:
|
151
|
+
id: dropdown6
|
152
|
+
label: Bigger!
|
153
|
+
heading_size: xl
|
151
154
|
options:
|
152
|
-
- text:
|
153
|
-
value:
|
154
|
-
- text:
|
155
|
-
value:
|
156
|
-
- text:
|
157
|
-
value:
|
155
|
+
- text: Option one
|
156
|
+
value: option1
|
157
|
+
- text: Option two
|
158
|
+
value: option2
|
159
|
+
- text: Option three
|
160
|
+
value: option3
|
158
161
|
with_page_heading:
|
159
162
|
description: This adds a `h1` element with a label element inside containing the text supplied.
|
160
163
|
data:
|
161
|
-
id:
|
162
|
-
label:
|
163
|
-
heading_size:
|
164
|
+
id: select-with-heading
|
165
|
+
label: This is a page heading
|
166
|
+
heading_size: xl
|
164
167
|
is_page_heading: true
|
165
168
|
options:
|
166
|
-
- text:
|
167
|
-
value:
|
168
|
-
- text:
|
169
|
-
value:
|
169
|
+
- text: Option one
|
170
|
+
value: option1
|
171
|
+
- text: Option two
|
172
|
+
value: option2
|
@@ -87,7 +87,12 @@ examples:
|
|
87
87
|
- text: £125
|
88
88
|
format: numeric
|
89
89
|
with_sortable_head:
|
90
|
-
description:
|
90
|
+
description: |
|
91
|
+
This option allows links to be added to the table headers for sorting. Sorting must be handled server side, it is not done by the component.
|
92
|
+
|
93
|
+
The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
|
94
|
+
|
95
|
+
Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
|
91
96
|
data:
|
92
97
|
sortable: true
|
93
98
|
head:
|
@@ -64,6 +64,10 @@ examples:
|
|
64
64
|
content: |
|
65
65
|
<p class="govuk-body-m">Here is a single piece of content, there should be no tabs.</p>
|
66
66
|
with_data_attributes:
|
67
|
+
description: |
|
68
|
+
The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
|
69
|
+
|
70
|
+
Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
|
67
71
|
data:
|
68
72
|
tabs:
|
69
73
|
- id: "tab-with-data-attributes-1"
|
@@ -1,7 +1,9 @@
|
|
1
1
|
module GovukPublishingComponents
|
2
2
|
module AppHelpers
|
3
3
|
class TableHelper
|
4
|
-
|
4
|
+
# This is part of the Public API of this gem
|
5
|
+
# Any non-backwards compatible changes to the signature will require a major version change
|
6
|
+
def self.helper(context, caption = nil, opt = {})
|
5
7
|
builder = TableBuilder.new(context.tag)
|
6
8
|
|
7
9
|
classes = %w[gem-c-table govuk-table]
|
@@ -10,7 +12,7 @@ module GovukPublishingComponents
|
|
10
12
|
caption_classes = %w[govuk-table__caption]
|
11
13
|
caption_classes << opt[:caption_classes] if opt[:caption_classes]
|
12
14
|
|
13
|
-
context.tag.table class: classes, id:
|
15
|
+
context.tag.table class: classes, id: opt[:table_id] do
|
14
16
|
context.concat context.tag.caption caption, class: caption_classes
|
15
17
|
yield(builder)
|
16
18
|
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: 29.15.
|
4
|
+
version: 29.15.1
|
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: 2022-07-
|
11
|
+
date: 2022-07-20 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: govuk_app_config
|
@@ -1930,7 +1930,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
1930
1930
|
- !ruby/object:Gem::Version
|
1931
1931
|
version: '0'
|
1932
1932
|
requirements: []
|
1933
|
-
rubygems_version: 3.3.
|
1933
|
+
rubygems_version: 3.3.18
|
1934
1934
|
signing_key:
|
1935
1935
|
specification_version: 4
|
1936
1936
|
summary: A gem to document components in GOV.UK frontend applications
|