govuk_publishing_components 21.62.0 → 21.64.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/govspeak.js +17 -15
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +402 -340
- data/app/assets/javascripts/govuk_publishing_components/dependencies.js +0 -5
- data/app/assets/javascripts/govuk_publishing_components/lib.js +1 -0
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js +18 -11
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +423 -0
- data/app/assets/javascripts/govuk_publishing_components/lib/toggle.js +126 -65
- data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/closest.js +23 -0
- data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/indexOf.js +9 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss +3 -16
- data/app/assets/stylesheets/govuk_publishing_components/components/_panel.scss +7 -1
- data/app/views/govuk_publishing_components/component_guide/example.html.erb +4 -1
- data/app/views/govuk_publishing_components/component_guide/show.html.erb +3 -1
- data/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_document_list.html.erb +18 -9
- data/app/views/govuk_publishing_components/components/_panel.html.erb +13 -11
- data/app/views/govuk_publishing_components/components/_radio.html.erb +3 -1
- data/app/views/govuk_publishing_components/components/_search.html.erb +6 -2
- data/app/views/govuk_publishing_components/components/docs/document_list.yml +18 -0
- data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb +6 -6
- data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb +6 -6
- data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +8 -10
- data/config/locales/en.yml +18 -0
- data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb +5 -0
- data/lib/govuk_publishing_components/presenters/content_breadcrumbs_based_on_priority.rb +19 -5
- data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +1 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +5 -3
- data/app/assets/javascripts/govuk_publishing_components/vendor/magna-charta.min.js +0 -4
@@ -1,15 +1,14 @@
|
|
1
|
-
/* eslint-env jquery */
|
2
1
|
/*
|
3
2
|
Toggle the display of elements
|
4
3
|
|
5
|
-
|
4
|
+
Basic use:
|
6
5
|
|
7
6
|
<div data-module="gem-toggle">
|
8
|
-
<a href="#" data-controls="
|
9
|
-
Show
|
7
|
+
<a href="#" data-controls="target1" data-expanded="false">
|
8
|
+
Show/hide
|
10
9
|
</a>
|
11
|
-
<div id="
|
12
|
-
Content
|
10
|
+
<div id="target1" class="js-hidden">
|
11
|
+
Content hidden on page load
|
13
12
|
</div>
|
14
13
|
</div>
|
15
14
|
|
@@ -22,89 +21,151 @@
|
|
22
21
|
the `js-hidden` class to the element you wish to hide in
|
23
22
|
your template, the module will not do this for you.
|
24
23
|
|
25
|
-
`data-controls` can contain more than one element, space
|
26
|
-
separated.
|
27
|
-
|
28
24
|
Use `data-toggle-class` on the parent element to set the
|
29
25
|
class that is toggled. Defaults to `js-hidden`.
|
30
26
|
|
27
|
+
Content shown by default:
|
28
|
+
|
29
|
+
<div data-module="gem-toggle">
|
30
|
+
<a href="#" data-controls="target2" data-expanded="true">
|
31
|
+
Show/hide
|
32
|
+
</a>
|
33
|
+
<div id="target2">
|
34
|
+
Content shown on page load
|
35
|
+
</div>
|
36
|
+
</div>
|
37
|
+
|
38
|
+
Change text when clicked:
|
39
|
+
|
40
|
+
<div data-module="gem-toggle">
|
41
|
+
<a href="#" data-controls="target3" data-expanded="true" data-toggled-text="Show more">
|
42
|
+
Show less
|
43
|
+
</a>
|
44
|
+
<div id="target3">
|
45
|
+
Content shown on page load, toggle text changes depending on state
|
46
|
+
</div>
|
47
|
+
</div>
|
48
|
+
|
31
49
|
Use `data-toggled-text` on the trigger element to set the
|
32
50
|
text shown when the element is toggled. Defaults to not
|
33
51
|
changing.
|
34
52
|
|
53
|
+
Show/hide multiple elements:
|
54
|
+
|
55
|
+
<div data-module="gem-toggle">
|
56
|
+
<a href="#" data-controls="target4 target5" data-expanded="false">
|
57
|
+
Show/hide
|
58
|
+
</a>
|
59
|
+
<div id="target4" class="js-hidden">
|
60
|
+
Content hidden on page load
|
61
|
+
</div>
|
62
|
+
<div id="target5" class="js-hidden">
|
63
|
+
Content hidden on page load
|
64
|
+
</div>
|
65
|
+
</div>
|
66
|
+
|
67
|
+
`data-controls` can contain more than one element, space
|
68
|
+
separated.
|
69
|
+
|
70
|
+
With tracking:
|
71
|
+
|
72
|
+
<div data-module="gem-toggle">
|
73
|
+
<a href="#" data-controls="target6" data-expanded="true" data-track-category="category" data-track-action="action" data-toggled-text="Show more">
|
74
|
+
Show less
|
75
|
+
</a>
|
76
|
+
<div id="target6">
|
77
|
+
Content shown on page load, tracked when expanded and collapsed
|
78
|
+
</div>
|
79
|
+
</div>
|
80
|
+
|
35
81
|
Use `data-track-category` and `data-track-action` together
|
36
|
-
to enable analytics on the element. The label will be
|
82
|
+
to enable analytics on the element. The track label will be
|
37
83
|
determined based on the text present within the element
|
38
84
|
at the time it was clicked.
|
39
85
|
*/
|
40
|
-
|
86
|
+
window.GOVUK = window.GOVUK || {}
|
41
87
|
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
42
88
|
|
43
89
|
(function (Modules) {
|
44
|
-
|
45
|
-
|
46
|
-
Modules.GemToggle = function () {
|
47
|
-
this.start = function ($el) {
|
48
|
-
var toggleSelector = '[data-controls][data-expanded]'
|
49
|
-
var toggleClass = $el.attr('data-toggle-class') || 'js-hidden'
|
50
|
-
var trackable = '[data-track-category][data-track-action]'
|
51
|
-
|
52
|
-
$el.on('click', toggleSelector, toggle)
|
53
|
-
$el.find(toggleSelector).each(addAriaAttrs)
|
54
|
-
|
55
|
-
// Add the ARIA attributes with JavaScript
|
56
|
-
// If the JS fails and there's no interactive elements, having
|
57
|
-
// no aria attributes is an accurate representation.
|
58
|
-
function addAriaAttrs () {
|
59
|
-
var $toggle = $(this)
|
60
|
-
$toggle.attr('role', 'button')
|
61
|
-
$toggle.attr('aria-controls', $toggle.data('controls'))
|
62
|
-
$toggle.attr('aria-expanded', $toggle.data('expanded'))
|
63
|
-
|
64
|
-
var $targets = getTargetElements($toggle)
|
65
|
-
$targets.attr('aria-live', 'polite')
|
66
|
-
$targets.attr('role', 'region')
|
67
|
-
$toggle.data('$targets', $targets)
|
68
|
-
}
|
90
|
+
function GemToggle () { }
|
69
91
|
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
var $targets = $toggle.data('$targets')
|
74
|
-
|
75
|
-
if (expanded) {
|
76
|
-
$toggle.attr('aria-expanded', false)
|
77
|
-
$targets.addClass(toggleClass)
|
78
|
-
} else {
|
79
|
-
$toggle.attr('aria-expanded', true)
|
80
|
-
$targets.removeClass(toggleClass)
|
81
|
-
}
|
92
|
+
GemToggle.prototype.start = function ($module) {
|
93
|
+
this.$module = $module[0]
|
94
|
+
this.$module.toggleTrigger = this.$module.querySelector('[data-controls][data-expanded]')
|
82
95
|
|
83
|
-
|
84
|
-
|
85
|
-
$toggle.data('toggled-text', $toggle.text())
|
86
|
-
$toggle.text(toggledText)
|
87
|
-
}
|
96
|
+
if (this.$module.toggleTrigger) {
|
97
|
+
this.$module.toggleClass = this.$module.getAttribute('data-toggle-class') || 'js-hidden'
|
88
98
|
|
89
|
-
|
90
|
-
track($toggle)
|
91
|
-
}
|
99
|
+
this.$module.isTrackable = this.$module.toggleTrigger.hasAttribute('data-track-category') && this.$module.toggleTrigger.hasAttribute('data-track-action')
|
92
100
|
|
93
|
-
|
101
|
+
if (this.$module.isTrackable) {
|
102
|
+
this.$module.trackCategory = this.$module.toggleTrigger.getAttribute('data-track-category')
|
103
|
+
this.$module.trackAction = this.$module.toggleTrigger.getAttribute('data-track-action')
|
94
104
|
}
|
95
105
|
|
96
|
-
|
97
|
-
|
98
|
-
|
106
|
+
this.addAriaAttrs()
|
107
|
+
this.toggleOnClick()
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
// Add the ARIA attributes with JavaScript
|
112
|
+
// If the JS fails and there's no interactive elements, having
|
113
|
+
// no aria attributes is an accurate representation.
|
114
|
+
GemToggle.prototype.addAriaAttrs = function () {
|
115
|
+
this.$module.toggleTrigger.setAttribute('role', 'button')
|
116
|
+
this.$module.toggleTrigger.setAttribute('aria-controls', this.$module.toggleTrigger.getAttribute('data-controls'))
|
117
|
+
this.$module.toggleTrigger.setAttribute('aria-expanded', this.$module.toggleTrigger.getAttribute('data-expanded'))
|
118
|
+
this.$module.targets = this.getTargetElements()
|
119
|
+
|
120
|
+
for (var i = 0; i < this.$module.targets.length; i++) {
|
121
|
+
this.$module.targets[i].setAttribute('aria-live', 'polite')
|
122
|
+
this.$module.targets[i].setAttribute('role', 'region')
|
123
|
+
}
|
124
|
+
}
|
99
125
|
|
100
|
-
|
126
|
+
GemToggle.prototype.getTargetElements = function () {
|
127
|
+
var ids = this.$module.toggleTrigger.getAttribute('aria-controls').split(' ')
|
128
|
+
var selector = '#' + ids.join(', #')
|
129
|
+
|
130
|
+
return this.$module.querySelectorAll(selector)
|
131
|
+
}
|
132
|
+
|
133
|
+
GemToggle.prototype.toggleOnClick = function () {
|
134
|
+
var that = this
|
135
|
+
|
136
|
+
this.$module.toggleTrigger.addEventListener('click', function (event) {
|
137
|
+
event.preventDefault()
|
138
|
+
var expanded = this.getAttribute('aria-expanded') === 'true'
|
139
|
+
|
140
|
+
if (expanded) {
|
141
|
+
this.setAttribute('aria-expanded', false)
|
142
|
+
for (var i = 0; i < that.$module.targets.length; i++) {
|
143
|
+
that.$module.targets[i].classList.add(that.$module.toggleClass)
|
144
|
+
}
|
145
|
+
} else {
|
146
|
+
this.setAttribute('aria-expanded', true)
|
147
|
+
for (var j = 0; j < that.$module.targets.length; j++) {
|
148
|
+
that.$module.targets[j].classList.remove(that.$module.toggleClass)
|
149
|
+
}
|
101
150
|
}
|
102
151
|
|
103
|
-
|
104
|
-
var options = { label: $toggle.data('toggled-text') || $toggle.text() }
|
152
|
+
var toggledText = this.getAttribute('data-toggled-text')
|
105
153
|
|
106
|
-
|
154
|
+
if (typeof toggledText === 'string') {
|
155
|
+
this.setAttribute('data-toggled-text', this.innerText)
|
156
|
+
this.innerText = toggledText
|
107
157
|
}
|
108
|
-
|
158
|
+
|
159
|
+
if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent && that.$module.isTrackable) {
|
160
|
+
that.track()
|
161
|
+
}
|
162
|
+
})
|
109
163
|
}
|
164
|
+
|
165
|
+
GemToggle.prototype.track = function () {
|
166
|
+
var options = { label: this.$module.toggleTrigger.getAttribute('data-toggled-text') || this.$module.toggleTrigger.innerText }
|
167
|
+
window.GOVUK.analytics.trackEvent(this.$module.trackCategory, this.$module.trackAction, options)
|
168
|
+
}
|
169
|
+
|
170
|
+
Modules.GemToggle = GemToggle
|
110
171
|
})(window.GOVUK.Modules)
|
@@ -0,0 +1,23 @@
|
|
1
|
+
// https://plainjs.com/javascript/traversing/get-closest-element-by-selector-39/
|
2
|
+
// matches polyfill
|
3
|
+
this.Element && function(ElementPrototype) {
|
4
|
+
ElementPrototype.matches = ElementPrototype.matches ||
|
5
|
+
ElementPrototype.matchesSelector ||
|
6
|
+
ElementPrototype.webkitMatchesSelector ||
|
7
|
+
ElementPrototype.msMatchesSelector ||
|
8
|
+
function(selector) {
|
9
|
+
var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
|
10
|
+
while (nodes[++i] && nodes[i] != node);
|
11
|
+
return !!nodes[i];
|
12
|
+
}
|
13
|
+
}(Element.prototype);
|
14
|
+
|
15
|
+
// closest polyfill
|
16
|
+
this.Element && function(ElementPrototype) {
|
17
|
+
ElementPrototype.closest = ElementPrototype.closest ||
|
18
|
+
function(selector) {
|
19
|
+
var el = this;
|
20
|
+
while (el.matches && !el.matches(selector)) el = el.parentNode;
|
21
|
+
return el.matches ? el : null;
|
22
|
+
}
|
23
|
+
}(Element.prototype);
|
@@ -21,37 +21,24 @@
|
|
21
21
|
border-color: govuk-colour("white");
|
22
22
|
}
|
23
23
|
|
24
|
-
.
|
24
|
+
.govuk-breadcrumbs--collapse-on-mobile {
|
25
25
|
@include govuk-media-query($until: tablet) {
|
26
|
-
.govuk-breadcrumbs__list {
|
27
|
-
display: flex;
|
28
|
-
}
|
29
|
-
|
30
|
-
.govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
|
31
|
-
display: none;
|
32
|
-
}
|
33
|
-
|
34
26
|
.govuk-breadcrumbs__list-item {
|
35
27
|
padding-top: 14px;
|
36
28
|
padding-bottom: 14px;
|
37
29
|
}
|
38
30
|
|
39
31
|
.govuk-breadcrumbs__list-item:before {
|
40
|
-
margin: 0;
|
41
32
|
top: 18px;
|
42
33
|
}
|
43
34
|
|
44
|
-
.govuk-breadcrumbs__link {
|
45
|
-
position: relative;
|
46
|
-
}
|
47
|
-
|
48
35
|
.govuk-breadcrumbs__link:after {
|
49
36
|
content: "";
|
50
37
|
position: absolute;
|
51
|
-
top:
|
38
|
+
top: 0;
|
52
39
|
right: 0;
|
53
40
|
left: 0;
|
54
|
-
bottom:
|
41
|
+
bottom: 0;
|
55
42
|
}
|
56
43
|
}
|
57
44
|
}
|
@@ -9,6 +9,12 @@
|
|
9
9
|
@include govuk-font($size: 24, $weight: bold);
|
10
10
|
}
|
11
11
|
|
12
|
-
.gem-c-panel__prepend ~ .govuk-panel__title {
|
12
|
+
.gem-c-panel__prepend ~ .govuk-panel__title-text {
|
13
13
|
margin-bottom: govuk-spacing(3);
|
14
14
|
}
|
15
|
+
|
16
|
+
.gem-c-panel__append,
|
17
|
+
.gem-c-panel__prepend,
|
18
|
+
.govuk-panel__title-text {
|
19
|
+
display: block;
|
20
|
+
}
|
@@ -12,7 +12,10 @@
|
|
12
12
|
<div class="component-markdown">
|
13
13
|
<%= raw(@component_example.html_description) %>
|
14
14
|
</div>
|
15
|
-
<h2 class="component-doc-h2">
|
15
|
+
<h2 class="component-doc-h2">
|
16
|
+
How it looks
|
17
|
+
<small>(<a href="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
|
18
|
+
</h2>
|
16
19
|
<%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, example: @component_example } %>
|
17
20
|
|
18
21
|
<h2 class="component-doc-h2">How to call this example</h2>
|
@@ -29,7 +29,9 @@
|
|
29
29
|
</div>
|
30
30
|
</div>
|
31
31
|
|
32
|
-
<h2 class="component-doc-h2">
|
32
|
+
<h2 class="component-doc-h2">
|
33
|
+
<a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
|
34
|
+
<small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
|
33
35
|
<small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
|
34
36
|
</h2>
|
35
37
|
<%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
|
@@ -5,7 +5,7 @@
|
|
5
5
|
breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
|
6
6
|
|
7
7
|
classes = "gem-c-breadcrumbs govuk-breadcrumbs"
|
8
|
-
classes << "
|
8
|
+
classes << " govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
|
9
9
|
classes << " gem-c-breadcrumbs--inverse" if inverse
|
10
10
|
%>
|
11
11
|
|
@@ -66,7 +66,7 @@
|
|
66
66
|
</div>
|
67
67
|
|
68
68
|
<div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1">
|
69
|
-
<p class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></p>
|
69
|
+
<p class="gem-c-cookie-banner__confirmation-message" role="alert"><%= confirmation_message %></p>
|
70
70
|
<button class="gem-c-cookie-banner__hide-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide</button>
|
71
71
|
</div>
|
72
72
|
</div>
|
@@ -33,6 +33,7 @@
|
|
33
33
|
item[:link][:path],
|
34
34
|
data: item[:link][:data_attributes],
|
35
35
|
class: "#{item_classes} gem-c-document-list__item-link",
|
36
|
+
lang: item[:link][:locale].presence
|
36
37
|
)
|
37
38
|
else
|
38
39
|
content_tag(
|
@@ -54,16 +55,24 @@
|
|
54
55
|
|
55
56
|
<% if item[:metadata] %>
|
56
57
|
<ul class="gem-c-document-list__item-metadata">
|
57
|
-
<% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %>
|
58
|
-
|
59
|
-
<%
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
58
|
+
<% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %>
|
59
|
+
<% if !item_metadata_key.to_s.eql?("locale") %>
|
60
|
+
<% lang = item[:metadata][:locale].present? && item[:metadata][:locale][item_metadata_key].present? ? item[:metadata][:locale][item_metadata_key] : nil %>
|
61
|
+
|
62
|
+
<%= content_tag(
|
63
|
+
:li, item_metadata_value,
|
64
|
+
class: "gem-c-document-list__attribute",
|
65
|
+
lang: lang
|
66
|
+
) do %>
|
67
|
+
<% if item_metadata_key.to_s.eql?("public_updated_at") %>
|
68
|
+
<time datetime="<%= item_metadata_value.iso8601 %>">
|
69
|
+
<%= l(item_metadata_value, format: '%e %B %Y') %>
|
70
|
+
</time>
|
71
|
+
<% else %>
|
72
|
+
<%= item_metadata_value %>
|
73
|
+
<% end %>
|
65
74
|
<% end %>
|
66
|
-
|
75
|
+
<% end %>
|
67
76
|
<% end %>
|
68
77
|
</ul>
|
69
78
|
<% end %>
|
@@ -4,22 +4,24 @@
|
|
4
4
|
append ||= false
|
5
5
|
%>
|
6
6
|
<div class="gem-c-panel govuk-panel govuk-panel--confirmation">
|
7
|
-
<% if prepend %>
|
8
|
-
<div class="gem-c-panel__prepend">
|
9
|
-
<%= prepend %>
|
10
|
-
</div>
|
11
|
-
<% end %>
|
12
7
|
<h2 class="govuk-panel__title">
|
13
|
-
|
8
|
+
<% if prepend %>
|
9
|
+
<span class="gem-c-panel__prepend">
|
10
|
+
<%= prepend %>
|
11
|
+
</span>
|
12
|
+
<% end %>
|
13
|
+
<span class="govuk-panel__title-text">
|
14
|
+
<%= title %>
|
15
|
+
</span>
|
16
|
+
<% if append %>
|
17
|
+
<span class="gem-c-panel__append">
|
18
|
+
<%= append %>
|
19
|
+
</span>
|
20
|
+
<% end %>
|
14
21
|
</h2>
|
15
22
|
<% if description %>
|
16
23
|
<div class="govuk-panel__body">
|
17
24
|
<%= description %>
|
18
25
|
</div>
|
19
26
|
<% end %>
|
20
|
-
<% if append %>
|
21
|
-
<div class="gem-c-panel__append">
|
22
|
-
<%= append %>
|
23
|
-
</div>
|
24
|
-
<% end %>
|
25
27
|
</div>
|
@@ -53,7 +53,9 @@
|
|
53
53
|
<%= tag.h1 heading, class: "gem-c-radio__heading-text govuk-fieldset__heading" %>
|
54
54
|
<% end %>
|
55
55
|
<% else %>
|
56
|
-
<%= tag.legend
|
56
|
+
<%= tag.legend class: legend_classes do %>
|
57
|
+
<%= tag.h2 heading, class: "govuk-fieldset__heading" %>
|
58
|
+
<% end %>
|
57
59
|
<% end %>
|
58
60
|
<% end %>
|
59
61
|
|