govuk_publishing_components 28.0.0 → 28.4.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/auto-scroll-tracker.js +2 -1
- data/app/assets/javascripts/govuk_publishing_components/analytics/auto-track-event.js +22 -22
- data/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js +2 -20
- data/app/assets/javascripts/govuk_publishing_components/analytics/mailto-link-tracker.js +22 -17
- data/app/assets/javascripts/govuk_publishing_components/analytics/pii.js +9 -5
- data/app/assets/javascripts/govuk_publishing_components/analytics/static-analytics.js +4 -4
- data/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js +4 -3
- data/app/assets/javascripts/govuk_publishing_components/analytics.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js +0 -1
- data/app/assets/javascripts/govuk_publishing_components/components/details.js +2 -3
- data/app/assets/javascripts/govuk_publishing_components/components/metadata.js +27 -0
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js +2 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss +5 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +0 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +2 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +67 -21
- data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +2 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +6 -0
- data/app/views/govuk_publishing_components/components/_big_number.html.erb +19 -9
- data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +0 -4
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +22 -18
- data/app/views/govuk_publishing_components/components/_metadata.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_share_links.html.erb +25 -22
- data/app/views/govuk_publishing_components/components/docs/accordion.yml +31 -25
- data/app/views/govuk_publishing_components/components/docs/big_number.yml +6 -0
- data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +0 -47
- data/app/views/govuk_publishing_components/components/docs/input.yml +1 -1
- data/app/views/govuk_publishing_components/components/docs/success_alert.yml +1 -1
- data/app/views/govuk_publishing_components/components/docs/tabs.yml +2 -2
- data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb +26 -0
- data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +16 -8
- data/config/locales/en.yml +0 -4
- data/lib/govuk_publishing_components/presenters/big_number_helper.rb +30 -0
- data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +0 -38
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/lib/govuk_publishing_components.rb +1 -0
- metadata +4 -4
- data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js +0 -112
- data/app/views/govuk_publishing_components/components/contextual_sidebar/_covid_cta.html.erb +0 -27
data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
CHANGED
@@ -108,24 +108,28 @@
|
|
108
108
|
track_dimension_index: "29",
|
109
109
|
}
|
110
110
|
} %>
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
111
|
+
<% if has_children %>
|
112
|
+
<%= content_tag(:button, {
|
113
|
+
aria: {
|
114
|
+
controls: "super-navigation-menu__section-#{unique_id}",
|
115
|
+
expanded: false,
|
116
|
+
label: show_menu_text,
|
117
|
+
},
|
118
|
+
class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
|
119
|
+
data: {
|
120
|
+
text_for_hide: hide_menu_text,
|
121
|
+
text_for_show: show_menu_text,
|
122
|
+
toggle_desktop_group: "top",
|
123
|
+
toggle_mobile_group: "second",
|
124
|
+
tracking_key: tracking_label,
|
125
|
+
},
|
126
|
+
hidden: true,
|
127
|
+
id: "super-navigation-menu__section-#{unique_id}-toggle",
|
128
|
+
type: "button",
|
129
|
+
}) do %>
|
130
|
+
<%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner" %>
|
131
|
+
<% end %>
|
132
|
+
<% end %>
|
129
133
|
</div>
|
130
134
|
<% if has_children %>
|
131
135
|
<div
|
@@ -17,7 +17,7 @@
|
|
17
17
|
classes << "gem-c-metadata--inverse" if inverse
|
18
18
|
classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
|
19
19
|
%>
|
20
|
-
<%= content_tag :div, class: classes, data: { module: "gem-toggle" } do %>
|
20
|
+
<%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>
|
21
21
|
<dl data-module="gem-track-click">
|
22
22
|
<% if from.any? %>
|
23
23
|
<dt class="gem-c-metadata__term"><%= t("components.metadata.from") %>:</dt>
|
@@ -44,7 +44,7 @@
|
|
44
44
|
<dd class="gem-c-metadata__definition">
|
45
45
|
<%= last_updated %>
|
46
46
|
<% if local_assigns.include?(:see_updates_link) %>
|
47
|
-
— <a href="#history" class="gem-c-metadata__definition-link govuk-!-display-none-print"
|
47
|
+
— <a href="#full-publication-update-history" class="gem-c-metadata__definition-link govuk-!-display-none-print js-see-all-updates-link"
|
48
48
|
data-track-category="content-history"
|
49
49
|
data-track-action="see-all-updates-link-clicked"
|
50
50
|
data-track-label="history">
|
@@ -55,38 +55,41 @@
|
|
55
55
|
class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
|
56
56
|
<span class="gem-c-share-links__link-icon">
|
57
57
|
<% if link[:icon] == 'facebook' %>
|
58
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
59
|
-
<path fill="currentColor" d="
|
60
|
-
<path fill="#FFF" d="M17.892 10.751h1.787V8.009L17.216 8c-2.73 0-3.352 2.045-3.352 3.353v1.828h-1.581v2.824h1.581V24h3.322v-7.995h2.242l.291-2.824h-2.533V11.52c.001-.623.415-.769.706-.769z"/>
|
58
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
59
|
+
<path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
61
60
|
</svg>
|
62
|
-
|
63
61
|
<% elsif link[:icon] == 'twitter' %>
|
64
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
65
|
-
<path fill="currentColor" d="
|
66
|
-
<path fill="#FFF" d="M8 21.027a9.286 9.286 0 0 0 5.032 1.475c6.038 0 9.34-5.002 9.34-9.339 0-.143-.004-.284-.012-.425a6.619 6.619 0 0 0 1.639-1.699c-.6.265-1.234.439-1.885.516a3.287 3.287 0 0 0 1.443-1.816 6.571 6.571 0 0 1-2.086.797 3.28 3.28 0 0 0-5.592 2.993 9.311 9.311 0 0 1-6.766-3.43 3.294 3.294 0 0 0-.443 1.651 3.28 3.28 0 0 0 1.46 2.732 3.278 3.278 0 0 1-1.488-.411v.041a3.288 3.288 0 0 0 2.633 3.22 3.28 3.28 0 0 1-1.481.055 3.285 3.285 0 0 0 3.065 2.281 6.59 6.59 0 0 1-4.076 1.404A6.76 6.76 0 0 1 8 21.027z"/>
|
62
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
63
|
+
<path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
67
64
|
</svg>
|
68
|
-
|
69
65
|
<% elsif link[:icon] == 'email' %>
|
70
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
71
|
-
|
66
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false">
|
67
|
+
<path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM58.37,21,36.92,39.45,15.47,21ZM11.65,23.66,26.27,36.23,11.65,49.9ZM15.1,52.83,29.7,39.18l7.22,6.21,7.22-6.21,14.6,13.65ZM62.19,49.9,47.57,36.23,62.19,23.66Z"/>
|
68
|
+
</svg>
|
72
69
|
<% elsif link[:icon] == 'flickr' %>
|
73
|
-
<svg
|
74
|
-
|
70
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
71
|
+
<path fill="currentColor" d="M5.334 6.666C2.3884 6.666 0 9.055 0 12c0 2.9456 2.3884 5.334 5.334 5.334 2.9456 0 5.332-2.3884 5.332-5.334 0-2.945-2.3864-5.334-5.332-5.334zm13.332 0c-2.9456 0-5.332 2.389-5.332 5.334 0 2.9456 2.3864 5.334 5.332 5.334C21.6116 17.334 24 14.9456 24 12c0-2.945-2.3884-5.334-5.334-5.334Z"/>
|
72
|
+
</svg>
|
75
73
|
<% elsif link[:icon] == 'instagram' %>
|
76
|
-
<svg
|
77
|
-
|
74
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
75
|
+
<path fill="currentColor" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
|
76
|
+
</svg>
|
78
77
|
<% elsif link[:icon] == 'linkedin' %>
|
79
|
-
<svg
|
80
|
-
|
78
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
79
|
+
<path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
80
|
+
</svg>
|
81
81
|
<% elsif link[:icon] == 'youtube' %>
|
82
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
83
|
-
|
82
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
83
|
+
<path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
|
84
|
+
</svg>
|
84
85
|
<% elsif link[:icon] == 'whatsapp' %>
|
85
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
86
|
-
|
86
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
87
|
+
<path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
|
88
|
+
</svg>
|
87
89
|
<% else %>
|
88
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
89
|
-
|
90
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false">
|
91
|
+
<path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM56.3,48.27a1.42,1.42,0,0,1-1.42,1.42h-19v9.18l-9.18-9.18H19a1.43,1.43,0,0,1-1.43-1.43V20.52A1.43,1.43,0,0,1,19,19.09H54.88a1.43,1.43,0,0,1,1.42,1.42Z"/>
|
92
|
+
</svg>
|
90
93
|
<% end %>
|
91
94
|
</span><%= link_text %><% end %>
|
92
95
|
</li>
|
@@ -3,33 +3,34 @@ description: The accordion component lets users show and hide sections of relate
|
|
3
3
|
govuk_frontend_components:
|
4
4
|
- accordion
|
5
5
|
body: |
|
6
|
-
This component is based on the [
|
7
|
-
and is currently experimental because more research is needed to validate it. If using this component, [please feed back any research findings to the Design System team](https://design-system.service.gov.uk/
|
6
|
+
This component is based on the [GOV.UK Design System accordion component](https://design-system.service.gov.uk/components/accordion/)
|
7
|
+
and is currently experimental because more research is needed to validate it. If using this component, [please feed back any research findings to the Design System team](https://design-system.service.gov.uk/get-in-touch/).
|
8
8
|
|
9
9
|
accessibility_criteria: |
|
10
10
|
The accordion must:
|
11
11
|
|
12
12
|
* accept focus
|
13
13
|
* be usable with a keyboard
|
14
|
-
* the controls
|
15
|
-
* the controls
|
14
|
+
* allow the controls to change in appearance when keyboard focus moves to it
|
15
|
+
* allow the controls to indicate when users hover their cursor over it
|
16
16
|
* be usable with touch
|
17
17
|
* be usable with voice commands
|
18
18
|
* have visible text
|
19
19
|
* indicate to users that each section can be expanded and collapsed
|
20
|
-
*
|
20
|
+
* tell the user when a step has been expanded or collapsed
|
21
21
|
* be readable when only the [text of the page is zoomed in](https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages#w_how-to-only-change-the-size-of-the-text)
|
22
|
-
* zoom in up to 300% without the text spilling off the screen
|
23
|
-
* pass colour contrast
|
24
|
-
*
|
25
|
-
*
|
22
|
+
* zoom in up to 300% [without the text spilling off the screen](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html)
|
23
|
+
* pass [colour contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)
|
24
|
+
* be readable should a [user change colours](https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use)
|
25
|
+
* associate panel content with the control that opens it using the `aria-controls` attribute
|
26
|
+
* have `aria-label` / `aria-labelledby` on section content with a value that refers to the button that controls display of the content
|
26
27
|
|
27
|
-
Section headings must use a button element:
|
28
|
+
Section headings must use a button element so that users:
|
28
29
|
|
29
|
-
*
|
30
|
-
*
|
30
|
+
* can toggle sections with the space and enter keys
|
31
|
+
* cannot open sections in a new tab or window
|
31
32
|
|
32
|
-
When JavaScript is unavailable the component must:
|
33
|
+
When CSS and / or JavaScript is unavailable, the component must:
|
33
34
|
|
34
35
|
* be fully expanded
|
35
36
|
* not be marked as expandable
|
@@ -57,9 +58,9 @@ examples:
|
|
57
58
|
html: <p class="govuk-body">This is the content for How people read.</p>
|
58
59
|
with_supplied_identification:
|
59
60
|
description: |
|
60
|
-
An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
|
61
|
+
An `id` for an individual accordion is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
|
61
62
|
|
62
|
-
The `id` must be
|
63
|
+
The `id` must be unique across the domain of your service. This is because the open or closed state of individual instances of the accordion uses `localStorage` to persist across page loads.
|
63
64
|
|
64
65
|
Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes.
|
65
66
|
data:
|
@@ -182,11 +183,11 @@ examples:
|
|
182
183
|
</ul>'
|
183
184
|
with_data_attributes:
|
184
185
|
description: |
|
185
|
-
Adds custom data attributes to
|
186
|
+
Adds custom data attributes to each section of the accordion. Accepts a hash, so multiple attributes can be added.
|
186
187
|
|
187
188
|
The `data_attributes` hash is for the outermost element in the accordion.
|
188
189
|
|
189
|
-
Each item can also have a `data_attributes` hash.
|
190
|
+
Each item can also have a `data_attributes` hash. These `data_attributes` are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
|
190
191
|
|
191
192
|
data:
|
192
193
|
data_attributes:
|
@@ -240,7 +241,7 @@ examples:
|
|
240
241
|
html: <p class="govuk-body">This is the content for How people read.</p>
|
241
242
|
with_margin_bottom:
|
242
243
|
description: |
|
243
|
-
The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 30px
|
244
|
+
The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of `30px`.
|
244
245
|
data:
|
245
246
|
margin_bottom: 0
|
246
247
|
items:
|
@@ -254,7 +255,7 @@ examples:
|
|
254
255
|
html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
|
255
256
|
with_section_open:
|
256
257
|
description: |
|
257
|
-
Adding `expanded: true` to the item will mean the section
|
258
|
+
Adding `expanded: true` to the item will mean the section defaults to being open, rather than closed. Once a user opens or closes a section, the state of each section is remembered.
|
258
259
|
data:
|
259
260
|
items:
|
260
261
|
- heading:
|
@@ -276,13 +277,18 @@ examples:
|
|
276
277
|
html: <p class="govuk-body">This is the content for How people read.</p>
|
277
278
|
with_the_anchor_link_navigation:
|
278
279
|
description: |
|
279
|
-
Some apps require custom
|
280
|
+
Some apps require custom `id`s per accordion section heading. Custom `id`s allow you to link section headings, sometimes across multiple pages.
|
281
|
+
|
282
|
+
For example on [guidance pages for Content Designers, referred to as "manuals",](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations) each manual includes multiple sets of accordions and will reference between specific sections to easily access content.
|
280
283
|
|
281
|
-
|
284
|
+
Using the same rules, custom `id`s automatically open accordions when users click within another accordion that links to either
|
282
285
|
|
283
|
-
|
286
|
+
* the `id` of an accordion section heading
|
287
|
+
* an `id` within the content of an accordion (this will also automatically navigate to and open accordions on page load)
|
284
288
|
|
285
|
-
|
289
|
+
This feature will only be used if the `anchor_navigation` flag is passed as `true`. This mitigates performance risk from event listeners on a large number of links.
|
290
|
+
|
291
|
+
Unlike with the accordion-wide custom `id` attribute, any `id`s passed to accordion headings as part of this are not stored in `localStorage`. `id`s do not need to be unique across your domain, but should still be unique in the context of the page.
|
286
292
|
data:
|
287
293
|
anchor_navigation: true
|
288
294
|
items:
|
@@ -305,7 +311,7 @@ examples:
|
|
305
311
|
html: <p class="govuk-body">This is the content for How people read.</p>
|
306
312
|
condensed_layout:
|
307
313
|
description: |
|
308
|
-
This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
|
314
|
+
This layout is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
|
309
315
|
data:
|
310
316
|
condensed: true
|
311
317
|
items:
|
@@ -397,4 +403,4 @@ examples:
|
|
397
403
|
<li>
|
398
404
|
<a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
|
399
405
|
</li>
|
400
|
-
</ul>'
|
406
|
+
</ul>'
|
@@ -61,3 +61,9 @@ examples:
|
|
61
61
|
label: Ministerial departments
|
62
62
|
aria:
|
63
63
|
hidden: true
|
64
|
+
with_bottom_margin:
|
65
|
+
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). The default big number margin bottom is 15px (govuk spacing 3).
|
66
|
+
data:
|
67
|
+
number: 119
|
68
|
+
label: Open consultations
|
69
|
+
margin_bottom: 9
|
@@ -11,8 +11,6 @@ body: |
|
|
11
11
|
|
12
12
|
It must always be used [with the contextual breadcrumbs component][contextual_breadcrumbs].
|
13
13
|
|
14
|
-
The COVID CTA will displayed on all pages except for a few exemptions documented below.
|
15
|
-
|
16
14
|
[preview]: /contextual-navigation
|
17
15
|
[step-by-step]: /component-guide/step_by_step_nav
|
18
16
|
[related_navigation]: /component-guide/related_navigation
|
@@ -114,48 +112,3 @@ examples:
|
|
114
112
|
- content_id: "2f8b848d-23c8-4f42-a41a-df1f81c64d0f"
|
115
113
|
title: "Exporting"
|
116
114
|
phase: "live"
|
117
|
-
with_covid_cta_taxon_exception:
|
118
|
-
description: The COVID Booster call to action element is not displayed on content tagged to taxons in `covid_booster_cta_taxon_exception_list`.
|
119
|
-
data:
|
120
|
-
content_item:
|
121
|
-
title: "A content item"
|
122
|
-
links:
|
123
|
-
taxons:
|
124
|
-
- content_id: ac7b8472-5d09-4679-9551-87847b0ac827
|
125
|
-
title: "Not Covid"
|
126
|
-
phase: "live"
|
127
|
-
ordered_related_items:
|
128
|
-
- title: Find an apprenticeship
|
129
|
-
base_path: /apply-apprenticeship
|
130
|
-
- title: Training and study at work
|
131
|
-
base_path: /training-study-work-your-rights
|
132
|
-
- title: Careers helpline for teenagers
|
133
|
-
base_path: /careers-helpline-for-teenagers
|
134
|
-
document_collections:
|
135
|
-
- title: Recruit an apprentice (formerly apprenticeship vacancies)
|
136
|
-
base_path: /government/collections/apprenticeship-vacancies
|
137
|
-
document_type: document_collection
|
138
|
-
- title: The future of jobs and skills
|
139
|
-
base_path: /government/collections/the-future-of-jobs-and-skills
|
140
|
-
document_type: document_collection
|
141
|
-
with_covid_cta_document_type_exception:
|
142
|
-
description: Illustrates an exception to showing the custom COVID Booster call to action element as defined in `covid_booster_cta_document_type_exceptions`.
|
143
|
-
data:
|
144
|
-
content_item:
|
145
|
-
title: "A content item"
|
146
|
-
document_type: smart_answer
|
147
|
-
links:
|
148
|
-
ordered_related_items:
|
149
|
-
- title: Find an apprenticeship
|
150
|
-
base_path: /apply-apprenticeship
|
151
|
-
- title: Training and study at work
|
152
|
-
base_path: /training-study-work-your-rights
|
153
|
-
- title: Careers helpline for teenagers
|
154
|
-
base_path: /careers-helpline-for-teenagers
|
155
|
-
document_collections:
|
156
|
-
- title: Recruit an apprentice (formerly apprenticeship vacancies)
|
157
|
-
base_path: /government/collections/apprenticeship-vacancies
|
158
|
-
document_type: document_collection
|
159
|
-
- title: The future of jobs and skills
|
160
|
-
base_path: /government/collections/the-future-of-jobs-and-skills
|
161
|
-
document_type: document_collection
|
@@ -31,7 +31,7 @@ examples:
|
|
31
31
|
name: "address"
|
32
32
|
type: "email"
|
33
33
|
numeric_input:
|
34
|
-
description: If input is set to `type="number"` we set the component up as described in the [Design System guidance](https://design-system.service.gov.uk/components/text-input/#numbers) adding `inputmode` and `pattern`. These values can be overridden if necessary.
|
34
|
+
description: If input is set to `type="number"` we set the component up as described in the [GOV.UK Design System guidance](https://design-system.service.gov.uk/components/text-input/#numbers) adding `inputmode` and `pattern`. These values can be overridden if necessary.
|
35
35
|
data:
|
36
36
|
label:
|
37
37
|
text: "Account number"
|
@@ -25,7 +25,7 @@ examples:
|
|
25
25
|
message: Message to alert the user to a successful action goes here
|
26
26
|
title_id: my-custom-success-id
|
27
27
|
with_styled_link:
|
28
|
-
description: If you need to include a link in your success alert, you need to specify the `govuk-link` and `govuk-notification-banner__link` classes on that link element. This is in line with Design System guidance that the colour of the link in success notification banners can look jarring if any links are a different colour to the principal colour used by the success banner.
|
28
|
+
description: If you need to include a link in your success alert, you need to specify the `govuk-link` and `govuk-notification-banner__link` classes on that link element. This is in line with GOV.UK Design System guidance that the colour of the link in success notification banners can look jarring if any links are a different colour to the principal colour used by the success banner.
|
29
29
|
data:
|
30
30
|
message: Message to alert the user to a successful action goes here
|
31
31
|
description: <p class="govuk-body">A further description with <a href="/a-cool-page" class="govuk-link govuk-notification-banner__link">a link</a></p>
|
@@ -1,8 +1,8 @@
|
|
1
1
|
name: "Tabs (experimental)"
|
2
2
|
description: "The tabs component lets users toggle between related sections of content."
|
3
3
|
body: |
|
4
|
-
This component is based on the [
|
5
|
-
and is currently experimental. If using this component, please feed back any research findings to the Design System team.
|
4
|
+
This component is based on the [GOV.UK Design System tabs component](https://design-system.service.gov.uk/components/tabs/)
|
5
|
+
and is currently experimental. If using this component, please feed back any research findings to the Design System team](https://design-system.service.gov.uk/get-in-touch/).
|
6
6
|
|
7
7
|
The tabs component lets users navigate between related sections of content on a single page,
|
8
8
|
displaying one section at a time. Note that they are not intended to be used to navigate
|
@@ -23,6 +23,12 @@
|
|
23
23
|
<h3 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h3>
|
24
24
|
<p id="feedback_explanation" class="gem-c-feedback__form-paragraph"><%= t("components.feedback.dont_include_personal_info") %></p>
|
25
25
|
|
26
|
+
<% # Added for spam bots only %>
|
27
|
+
<div class="govuk-visually-hidden" aria-hidden="true">
|
28
|
+
<label for="feedback_maybe">This field is for robots only. Please leave blank</label>
|
29
|
+
<input id="feedback_maybe" type="text" pattern=".{0}" tabindex="-1" autocomplete="off" >
|
30
|
+
</div>
|
31
|
+
|
26
32
|
<%= render "govuk_publishing_components/components/textarea", {
|
27
33
|
label: {
|
28
34
|
text: t("components.feedback.what_doing")
|
@@ -46,3 +52,23 @@
|
|
46
52
|
</div>
|
47
53
|
</div>
|
48
54
|
</form>
|
55
|
+
|
56
|
+
<%
|
57
|
+
# I've added the following script inline in case of a scenario where a bot is able to parse the page,
|
58
|
+
# without downloading any of the external scripts.
|
59
|
+
# This seems to be a more reliable way to make sure the script is executed.
|
60
|
+
%>
|
61
|
+
|
62
|
+
<script>
|
63
|
+
document.addEventListener("DOMContentLoaded", function () {
|
64
|
+
var input = document.querySelector("#feedback_maybe"),
|
65
|
+
form = document.querySelector("#something-is-wrong")
|
66
|
+
|
67
|
+
form.addEventListener("submit", spamCapture);
|
68
|
+
|
69
|
+
function spamCapture(e) {
|
70
|
+
if (input.value.length !== 0) return;
|
71
|
+
e.preventDefault();
|
72
|
+
}
|
73
|
+
});
|
74
|
+
</script>
|
@@ -1,16 +1,24 @@
|
|
1
|
-
<%
|
2
|
-
contact_govuk_path = "/contact/govuk"
|
3
|
-
%>
|
4
|
-
|
5
1
|
<div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
|
6
2
|
<div class="gem-c-feedback__prompt-questions js-prompt-questions" hidden>
|
7
3
|
<h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful") %></h2>
|
8
|
-
<!-- Maybe button exists only to try and capture clicks by bots -->
|
9
|
-
<button data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" hidden>
|
10
|
-
<%= t("components.feedback.maybe") %>
|
11
|
-
</button>
|
12
4
|
|
13
5
|
<ul class="gem-c-feedback__option-list">
|
6
|
+
<li class="gem-c-feedback__option-list-item govuk-visually-hidden" style="display: none" hidden>
|
7
|
+
<% # Maybe button exists only to try and capture clicks by bots %>
|
8
|
+
<%= link_to "/contact/govuk", {
|
9
|
+
class: 'gem-c-feedback__prompt-link',
|
10
|
+
data: {
|
11
|
+
'track-category' => 'yesNoFeedbackForm',
|
12
|
+
'track-action' => 'ffMaybeClick'
|
13
|
+
},
|
14
|
+
role: 'button',
|
15
|
+
style: 'display: none',
|
16
|
+
hidden: 'hidden',
|
17
|
+
'aria-hidden': 'true',
|
18
|
+
} do %>
|
19
|
+
<%= t("components.feedback.maybe") %>
|
20
|
+
<% end %>
|
21
|
+
</li>
|
14
22
|
<li class="gem-c-feedback__option-list-item">
|
15
23
|
<button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick">
|
16
24
|
<%= t("components.feedback.yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful") %></span>
|
data/config/locales/en.yml
CHANGED
@@ -234,10 +234,6 @@ en:
|
|
234
234
|
link_path: "/brexit"
|
235
235
|
link_text: Check what you need to do
|
236
236
|
title: Brexit
|
237
|
-
covid_booster:
|
238
|
-
link_path: "https://www.nhs.uk/conditions/coronavirus-covid-19/coronavirus-vaccination/"
|
239
|
-
link_text: Book your coronavirus vaccination and booster dose on the NHS website
|
240
|
-
title: COVID-19 vaccinations
|
241
237
|
world_locations: World locations
|
242
238
|
search_box:
|
243
239
|
input_title: Search
|
@@ -0,0 +1,30 @@
|
|
1
|
+
module GovukPublishingComponents
|
2
|
+
module Presenters
|
3
|
+
class BigNumberHelper
|
4
|
+
def initialize(local_assigns)
|
5
|
+
@label = local_assigns[:label]
|
6
|
+
@href = local_assigns[:href]
|
7
|
+
@number = local_assigns[:number] || nil
|
8
|
+
end
|
9
|
+
|
10
|
+
def value_classes
|
11
|
+
class_list = ["gem-c-big-number__value"]
|
12
|
+
|
13
|
+
if @label.nil? && @href
|
14
|
+
class_list << "gem-c-big-number__value--decorated"
|
15
|
+
end
|
16
|
+
|
17
|
+
class_list
|
18
|
+
end
|
19
|
+
|
20
|
+
# This function is to check for small symbols which alter how the number is rendered lightly
|
21
|
+
# We do this to account for small symbols awkwardly sitting above the baseline in our typeface and adjust them to sit at the baseline for the purpose of visual harmony
|
22
|
+
# Currently the only small symbol used with big numbers are pluses so they are specifically targetted in the below code
|
23
|
+
def number_has_plus_suffix?
|
24
|
+
if @number.is_a? String
|
25
|
+
@number.ends_with?("+")
|
26
|
+
end
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
@@ -153,44 +153,6 @@ module GovukPublishingComponents
|
|
153
153
|
brexit_cta_taxon_allow_list?
|
154
154
|
end
|
155
155
|
|
156
|
-
def show_covid_booster_cta?
|
157
|
-
!covid_booster_cta_document_type_exempt? &&
|
158
|
-
!covid_booster_cta_taxon_exception_list?
|
159
|
-
end
|
160
|
-
|
161
|
-
def covid_booster_cta_document_type_exempt?
|
162
|
-
covid_booster_cta_document_type_exceptions.include?(content_item["document_type"])
|
163
|
-
end
|
164
|
-
|
165
|
-
def covid_booster_cta_document_type_exceptions
|
166
|
-
%w[
|
167
|
-
simple_smart_answer
|
168
|
-
smart_answer
|
169
|
-
step_by_step_nav
|
170
|
-
]
|
171
|
-
end
|
172
|
-
|
173
|
-
def covid_booster_cta_taxon_exception_list?
|
174
|
-
taxons = content_item.dig("links", "taxons").to_a
|
175
|
-
taxons.each do |taxon|
|
176
|
-
if covid_booster_cta_taxon_exception_list.include?(taxon["content_id"]) || parent_taxon_include?(taxon, covid_booster_cta_taxon_exception_list)
|
177
|
-
return true
|
178
|
-
end
|
179
|
-
end
|
180
|
-
false
|
181
|
-
end
|
182
|
-
|
183
|
-
def covid_booster_cta_taxon_exception_list
|
184
|
-
# Welfare > Death and benefits
|
185
|
-
# Life circumstances > Death and bereavement
|
186
|
-
# Life circumstances > Death registration disclosure
|
187
|
-
%w[
|
188
|
-
ac7b8472-5d09-4679-9551-87847b0ac827
|
189
|
-
0fffa994-b76d-4539-8bf9-2a6c6751580d
|
190
|
-
de978199-11e8-49b9-965e-4fa6a7ae79a8
|
191
|
-
]
|
192
|
-
end
|
193
|
-
|
194
156
|
def content_tagged_to_current_step_by_step?
|
195
157
|
# TODO: remove indirection here
|
196
158
|
step_nav_helper.show_header?
|
@@ -6,6 +6,7 @@ require "govuk_publishing_components/config"
|
|
6
6
|
require "govuk_publishing_components/engine"
|
7
7
|
require "govuk_publishing_components/presenters/shared_helper"
|
8
8
|
require "govuk_publishing_components/presenters/attachment"
|
9
|
+
require "govuk_publishing_components/presenters/big_number_helper"
|
9
10
|
require "govuk_publishing_components/presenters/breadcrumbs"
|
10
11
|
require "govuk_publishing_components/presenters/breadcrumb_selector"
|
11
12
|
require "govuk_publishing_components/presenters/button_helper"
|
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: 28.
|
4
|
+
version: 28.4.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: 2022-01-
|
11
|
+
date: 2022-01-25 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: govuk_app_config
|
@@ -483,7 +483,6 @@ files:
|
|
483
483
|
- app/assets/javascripts/govuk_publishing_components/analytics/page-content.js
|
484
484
|
- app/assets/javascripts/govuk_publishing_components/analytics/pii.js
|
485
485
|
- app/assets/javascripts/govuk_publishing_components/analytics/print-intent.js
|
486
|
-
- app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js
|
487
486
|
- app/assets/javascripts/govuk_publishing_components/analytics/static-analytics.js
|
488
487
|
- app/assets/javascripts/govuk_publishing_components/analytics/track-click.js
|
489
488
|
- app/assets/javascripts/govuk_publishing_components/analytics/track-select-change.js
|
@@ -501,6 +500,7 @@ files:
|
|
501
500
|
- app/assets/javascripts/govuk_publishing_components/components/intervention.js
|
502
501
|
- app/assets/javascripts/govuk_publishing_components/components/layout-header.js
|
503
502
|
- app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js
|
503
|
+
- app/assets/javascripts/govuk_publishing_components/components/metadata.js
|
504
504
|
- app/assets/javascripts/govuk_publishing_components/components/modal-dialogue.js
|
505
505
|
- app/assets/javascripts/govuk_publishing_components/components/print-link.js
|
506
506
|
- app/assets/javascripts/govuk_publishing_components/components/radio.js
|
@@ -760,7 +760,6 @@ files:
|
|
760
760
|
- app/views/govuk_publishing_components/components/attachment/_thumbnail_generic.html.erb
|
761
761
|
- app/views/govuk_publishing_components/components/attachment/_thumbnail_spreadsheet.html.erb
|
762
762
|
- app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb
|
763
|
-
- app/views/govuk_publishing_components/components/contextual_sidebar/_covid_cta.html.erb
|
764
763
|
- app/views/govuk_publishing_components/components/docs/accordion.yml
|
765
764
|
- app/views/govuk_publishing_components/components/docs/action_link.yml
|
766
765
|
- app/views/govuk_publishing_components/components/docs/attachment.yml
|
@@ -931,6 +930,7 @@ files:
|
|
931
930
|
- lib/govuk_publishing_components/engine.rb
|
932
931
|
- lib/govuk_publishing_components/minitest/component_guide_test.rb
|
933
932
|
- lib/govuk_publishing_components/presenters/attachment.rb
|
933
|
+
- lib/govuk_publishing_components/presenters/big_number_helper.rb
|
934
934
|
- lib/govuk_publishing_components/presenters/breadcrumb_selector.rb
|
935
935
|
- lib/govuk_publishing_components/presenters/breadcrumbs.rb
|
936
936
|
- lib/govuk_publishing_components/presenters/button_helper.rb
|