govuk_publishing_components 46.0.0 → 46.1.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/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_glance-metric.scss +75 -0
- data/app/views/govuk_publishing_components/components/_glance_metric.html.erb +37 -0
- data/app/views/govuk_publishing_components/components/_metadata.html.erb +10 -8
- data/app/views/govuk_publishing_components/components/_notice.html.erb +9 -6
- data/app/views/govuk_publishing_components/components/_organisation_logo.html.erb +5 -7
- data/app/views/govuk_publishing_components/components/_panel.html.erb +4 -2
- data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +15 -14
- data/app/views/govuk_publishing_components/components/docs/glance_metric.yml +37 -0
- data/app/views/govuk_publishing_components/components/docs/metadata.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/notice.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/panel.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/phase_banner.yml +1 -1
- data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb +1 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/axe-core/axe.js +3 -3
- data/node_modules/axe-core/axe.min.js +2 -2
- data/node_modules/axe-core/package.json +1 -1
- data/node_modules/axe-core/sri-history.json +4 -0
- data/node_modules/sortablejs/Sortable.js +59 -34
- data/node_modules/sortablejs/Sortable.min.js +2 -2
- data/node_modules/sortablejs/modular/sortable.complete.esm.js +59 -34
- data/node_modules/sortablejs/modular/sortable.core.esm.js +59 -34
- data/node_modules/sortablejs/modular/sortable.esm.js +59 -34
- data/node_modules/sortablejs/package.json +1 -1
- data/node_modules/sortablejs/src/Sortable.js +28 -11
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9f03b029ded187ef6bc1d3636720d1b32d082a568588faeccb69723311c06360
|
|
4
|
+
data.tar.gz: 197e40d2e9dbc9ef47e76ae1c72b7d63a7b4255fdbb01f31dcc21bd234bb6099
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7eede3b4acf9222bef3047b69fa3fe9c5190fb63277416188ed516990723ae35eec50fdc88594c6199e287500746fadf1181122f8bdbb95608382451a1f1f8ab
|
|
7
|
+
data.tar.gz: fe53d16fc472cb5dbee4e80b76eb61b5619d16224afdfd7ea751514d30a6604a82aa4c84ed7c8e057268e66be6a500618c37c0e42a6d8db17b17b8a2bc2f60ff
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
@import "govuk_publishing_components/individual_component_support";
|
|
2
|
+
|
|
3
|
+
.gem-c-glance-metric {
|
|
4
|
+
border-top: 1px solid $govuk-border-colour;
|
|
5
|
+
border-bottom: 0;
|
|
6
|
+
@include govuk-responsive-margin(6, "bottom");
|
|
7
|
+
|
|
8
|
+
&__heading {
|
|
9
|
+
min-height: 2.6em;
|
|
10
|
+
@include govuk-font($size: 24, $weight: bold);
|
|
11
|
+
|
|
12
|
+
@include govuk-responsive-margin(3, "top");
|
|
13
|
+
@include govuk-responsive-margin(1, "bottom");
|
|
14
|
+
@include govuk-responsive-padding(3, "top");
|
|
15
|
+
|
|
16
|
+
@include govuk-media-query($until: tablet) {
|
|
17
|
+
min-height: 4em;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@include govuk-media-query($until: mobile) {
|
|
21
|
+
min-height: 0;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&__figure {
|
|
26
|
+
display: flex;
|
|
27
|
+
@include govuk-font($size: 36, $weight: bold);
|
|
28
|
+
@include govuk-responsive-margin(1, "bottom");
|
|
29
|
+
|
|
30
|
+
@include govuk-media-query($until: mobile) {
|
|
31
|
+
@include govuk-font($size: 48, $weight: bold);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&__explicit-label {
|
|
36
|
+
@include govuk-visually-hidden;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&__context {
|
|
40
|
+
min-height: 5em;
|
|
41
|
+
border-bottom: 1px solid $govuk-border-colour;
|
|
42
|
+
|
|
43
|
+
@include govuk-media-query($until: mobile) {
|
|
44
|
+
@include govuk-font(16);
|
|
45
|
+
min-height: 0;
|
|
46
|
+
border-bottom: 0;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&__trend {
|
|
51
|
+
@include govuk-media-query($until: mobile) {
|
|
52
|
+
@include govuk-font(24);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&-text {
|
|
56
|
+
@include govuk-visually-hidden;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&-icon {
|
|
60
|
+
color: govuk-colour("dark-grey");
|
|
61
|
+
|
|
62
|
+
@include govuk-media-query($until: mobile) {
|
|
63
|
+
@include govuk-font(19);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&__period {
|
|
69
|
+
@include govuk-responsive-margin(6, "bottom");
|
|
70
|
+
|
|
71
|
+
@include govuk-media-query($until: mobile) {
|
|
72
|
+
@include govuk-font(16);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<%
|
|
2
|
+
add_gem_component_stylesheet("glance-metric")
|
|
3
|
+
|
|
4
|
+
name ||= false
|
|
5
|
+
figure ||= nil
|
|
6
|
+
context ||= ""
|
|
7
|
+
measurement_display_label ||= ""
|
|
8
|
+
measurement_explicit_label ||= ""
|
|
9
|
+
|
|
10
|
+
local_assigns[:heading_level] ||= 3
|
|
11
|
+
|
|
12
|
+
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
13
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
14
|
+
component_helper.add_class("gem-c-glance-metric govuk-body")
|
|
15
|
+
%>
|
|
16
|
+
<% if name %>
|
|
17
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
|
18
|
+
<%= content_tag(shared_helper.get_heading_level, class: "gem-c-glance-metric__heading") do %>
|
|
19
|
+
<%= name %>
|
|
20
|
+
<% end %>
|
|
21
|
+
|
|
22
|
+
<% if figure.nil? %>
|
|
23
|
+
<span class="gem-c-glance-metric__figure">No data</span>
|
|
24
|
+
<% else %>
|
|
25
|
+
<span class="gem-c-glance-metric__figure">
|
|
26
|
+
<%= figure %>
|
|
27
|
+
<% if measurement_display_label.present? %>
|
|
28
|
+
<span class="gem-c-glance-metric__display-label" aria-hidden="true"><%= measurement_display_label %></span>
|
|
29
|
+
<% end %>
|
|
30
|
+
<% if measurement_explicit_label.present? %>
|
|
31
|
+
<span class="gem-c-glance-metric__explicit-label"><%= measurement_explicit_label %></span>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
</span>
|
|
35
|
+
<p class="gem-c-glance-metric__context govuk-body-xs"><%= context %></p>
|
|
36
|
+
<% end %>
|
|
37
|
+
<% end %>
|
|
@@ -17,16 +17,18 @@
|
|
|
17
17
|
direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
|
|
18
18
|
|
|
19
19
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
20
|
-
classes = %w(gem-c-metadata)
|
|
21
|
-
classes << "direction-#{direction}" if local_assigns.include?(:direction)
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
22
|
+
component_helper.add_class("gem-c-metadata")
|
|
23
|
+
component_helper.add_class("direction-#{direction}") if local_assigns.include?(:direction)
|
|
24
|
+
|
|
25
|
+
if inverse
|
|
26
|
+
component_helper.add_class("gem-c-metadata--inverse")
|
|
27
|
+
component_helper.add_class("gem-c-metadata--inverse-padded") unless inverse_compress
|
|
27
28
|
end
|
|
28
29
|
|
|
29
|
-
|
|
30
|
+
component_helper.add_class(shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
|
|
31
|
+
component_helper.add_data_attribute({ module: "metadata" })
|
|
30
32
|
|
|
31
33
|
disable_ga4 ||= false
|
|
32
34
|
ga4_object = {
|
|
@@ -35,7 +37,7 @@
|
|
|
35
37
|
section: "Top",
|
|
36
38
|
}.to_json unless disable_ga4
|
|
37
39
|
%>
|
|
38
|
-
<%=
|
|
40
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
|
39
41
|
<% if title.present? %>
|
|
40
42
|
<%= content_tag :div, class: "gem-c-metadata__title" do %>
|
|
41
43
|
<%= render "govuk_publishing_components/components/heading", {
|
|
@@ -16,13 +16,16 @@
|
|
|
16
16
|
heading_level = show_banner_title ? "h3" : "h2"
|
|
17
17
|
|
|
18
18
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
19
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
20
|
+
component_helper.add_class("govuk-notification-banner gem-c-notice")
|
|
21
|
+
component_helper.add_class(shared_helper.get_margin_bottom)
|
|
19
22
|
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
component_helper.add_aria_attribute({ label: "Notice" })
|
|
24
|
+
component_helper.add_aria_attribute({ live: "polite" }) if aria_live
|
|
25
|
+
component_helper.add_aria_attribute({ labelledby: banner_title_id }) if show_banner_title
|
|
22
26
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
aria_attributes[:labelledby] = banner_title_id if show_banner_title
|
|
27
|
+
component_helper.set_lang(lang)
|
|
28
|
+
component_helper.add_role("region")
|
|
26
29
|
|
|
27
30
|
description_present = description.present? || description_text.present? || description_govspeak.present?
|
|
28
31
|
|
|
@@ -33,7 +36,7 @@
|
|
|
33
36
|
end
|
|
34
37
|
%>
|
|
35
38
|
<% if title || description_present %>
|
|
36
|
-
<%= tag.section
|
|
39
|
+
<%= tag.section(**component_helper.all_attributes) do %>
|
|
37
40
|
<%= tag.div class: "govuk-notification-banner__header" do %>
|
|
38
41
|
<%= tag.h2 banner_title, class: "govuk-notification-banner__title", id: banner_title_id %>
|
|
39
42
|
<% end if show_banner_title %>
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
|
|
15
15
|
# Set the wrapping element to be a heading or a `div`:
|
|
16
16
|
wrapping_element = (use_heading ? "h#{heading_level}" : "div").to_sym
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
18
|
+
component_helper.add_class("gem-c-organisation-logo")
|
|
19
|
+
component_helper.add_class(brand_helper.brand_class)
|
|
20
|
+
component_helper.add_class("gem-c-organisation-logo--inverse") if inverse
|
|
21
21
|
|
|
22
22
|
container_classes = [
|
|
23
23
|
logo_helper.logo_container_class,
|
|
@@ -26,9 +26,7 @@
|
|
|
26
26
|
container_classes << "gem-c-organisation-logo__container--inline" if inline
|
|
27
27
|
%>
|
|
28
28
|
|
|
29
|
-
<%= content_tag(wrapping_element,
|
|
30
|
-
class: wrapper_classes
|
|
31
|
-
}) do %>
|
|
29
|
+
<%= content_tag(wrapping_element, **component_helper.all_attributes) do %>
|
|
32
30
|
<% if organisation[:url] %>
|
|
33
31
|
<%= link_to organisation[:url], class: container_classes.join(" ") do %>
|
|
34
32
|
<%= logo_helper.logo_content %>
|
|
@@ -6,8 +6,10 @@
|
|
|
6
6
|
append ||= false
|
|
7
7
|
|
|
8
8
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
9
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
10
|
+
component_helper.add_class("gem-c-panel govuk-panel govuk-panel--confirmation")
|
|
9
11
|
%>
|
|
10
|
-
|
|
12
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
|
11
13
|
<%= content_tag(shared_helper.get_heading_level, class: "govuk-panel__title") do %>
|
|
12
14
|
<% if prepend %>
|
|
13
15
|
<span class="gem-c-panel__prepend">
|
|
@@ -29,4 +31,4 @@
|
|
|
29
31
|
<%= description %>
|
|
30
32
|
</div>
|
|
31
33
|
<% end %>
|
|
32
|
-
|
|
34
|
+
<% end %>
|
|
@@ -15,26 +15,27 @@ unless message.present?
|
|
|
15
15
|
end
|
|
16
16
|
end
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
data_attributes = {}
|
|
18
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
19
|
+
component_helper.add_class("gem-c-phase-banner govuk-phase-banner")
|
|
20
|
+
component_helper.add_class("gem-c-phase-banner--inverse") if inverse
|
|
22
21
|
|
|
23
22
|
unless disable_ga4
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
23
|
+
component_helper.add_data_attribute({
|
|
24
|
+
ga4_phase_banner: phase,
|
|
25
|
+
module: "ga4-link-tracker",
|
|
26
|
+
ga4_track_links_only: "",
|
|
27
|
+
ga4_set_indexes: "",
|
|
28
|
+
ga4_link: {
|
|
29
|
+
event_name: "navigation",
|
|
30
|
+
type: "phase banner",
|
|
31
|
+
section: Nokogiri::HTML(message).text,
|
|
32
|
+
}.to_json
|
|
33
|
+
})
|
|
33
34
|
end
|
|
34
35
|
|
|
35
36
|
%>
|
|
36
37
|
|
|
37
|
-
<%= tag.div
|
|
38
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
|
38
39
|
<%= tag.p class: "govuk-phase-banner__content" do %>
|
|
39
40
|
<%= tag.strong app_name, class: "govuk-phase-banner__content__app-name" if app_name %>
|
|
40
41
|
<%= tag.strong phase.titleize, class: "govuk-tag govuk-phase-banner__content__tag" if phase %>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
name: "Glance metric"
|
|
2
|
+
description: "The glance metric component is an at-a-glance view of data for a content item. The minimum requirements for it to display are a name and figure. "
|
|
3
|
+
part_of_admin_layout: true
|
|
4
|
+
body: |
|
|
5
|
+
|
|
6
|
+
accessibility_criteria: |
|
|
7
|
+
This component must:
|
|
8
|
+
|
|
9
|
+
- include an explicit label when an abbreviated label is also used
|
|
10
|
+
- communicate number value and label (if present) in a single dictation when read with a screen reader
|
|
11
|
+
- convey the meaning of the number shown
|
|
12
|
+
- The component must use the correct heading level for the page (defaults to `<h3>`)
|
|
13
|
+
|
|
14
|
+
shared_accessibility_criteria:
|
|
15
|
+
- link
|
|
16
|
+
|
|
17
|
+
uses_component_wrapper_helper: true
|
|
18
|
+
examples:
|
|
19
|
+
default:
|
|
20
|
+
data:
|
|
21
|
+
name: "Unique pageviews"
|
|
22
|
+
figure: "167"
|
|
23
|
+
measurement_display_label: "m"
|
|
24
|
+
measurement_explicit_label: "million"
|
|
25
|
+
context: "This is in your top 10 items"
|
|
26
|
+
no measurement labels:
|
|
27
|
+
data:
|
|
28
|
+
name: "Feedback comments"
|
|
29
|
+
figure: "35"
|
|
30
|
+
custom heading level:
|
|
31
|
+
description: A custom heading level can be specified if necessary. Defaults to a `h3`. The heading level does not change any styling.
|
|
32
|
+
data:
|
|
33
|
+
name: "Feedback comments"
|
|
34
|
+
figure: "35"
|
|
35
|
+
measurement_display_label: "m"
|
|
36
|
+
measurement_explicit_label: "million"
|
|
37
|
+
heading_level: 2
|
|
@@ -4,6 +4,7 @@ body: |
|
|
|
4
4
|
The notice component replaces the notice and withdrawal notice patterns on GOV.UK.
|
|
5
5
|
|
|
6
6
|
The component accepts either a simple string `description_text` parameter that it wraps in a paragraph, or a `description_govspeak` parameter that is rendered through govspeak for more complex HTML layout.
|
|
7
|
+
uses_component_wrapper_helper: true
|
|
7
8
|
accessibility_criteria: |
|
|
8
9
|
The notice must:
|
|
9
10
|
|
|
@@ -2,6 +2,7 @@ name: Panel
|
|
|
2
2
|
description: Used on confirmation or results pages to highlight important content.
|
|
3
3
|
govuk_frontend_components:
|
|
4
4
|
- panel
|
|
5
|
+
uses_component_wrapper_helper: true
|
|
5
6
|
accessibility_criteria: |
|
|
6
7
|
- have a text colour contrast ratio of more than 4.5:1 with its background to be visually distinct
|
|
7
8
|
examples:
|
|
@@ -5,6 +5,7 @@ accessibility_criteria: |
|
|
|
5
5
|
The label must:
|
|
6
6
|
|
|
7
7
|
- have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
|
|
8
|
+
uses_component_wrapper_helper: true
|
|
8
9
|
shared_accessibility_criteria:
|
|
9
10
|
- link
|
|
10
11
|
examples:
|
|
@@ -42,5 +43,4 @@ examples:
|
|
|
42
43
|
data:
|
|
43
44
|
app_name: Skittles Maker
|
|
44
45
|
phase: beta
|
|
45
|
-
inverse: true
|
|
46
46
|
disable_ga4: true
|
|
@@ -104,7 +104,7 @@ module GovukPublishingComponents
|
|
|
104
104
|
return if classes.blank?
|
|
105
105
|
|
|
106
106
|
class_array = classes.split(" ")
|
|
107
|
-
unless class_array.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "app-c-", "brand--", "brand__") }
|
|
107
|
+
unless class_array.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "app-c-", "brand--", "brand__") || c == "direction-rtl" }
|
|
108
108
|
raise(ArgumentError, "Classes (#{classes}) must be prefixed with `js-`")
|
|
109
109
|
end
|
|
110
110
|
end
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! axe v4.10.
|
|
1
|
+
/*! axe v4.10.2
|
|
2
2
|
* Copyright (c) 2015 - 2024 Deque Systems, Inc.
|
|
3
3
|
*
|
|
4
4
|
* Your use of this Source Code Form is subject to the terms of the Mozilla Public
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
}, _typeof(o);
|
|
23
23
|
}
|
|
24
24
|
var axe = axe || {};
|
|
25
|
-
axe.version = '4.10.
|
|
25
|
+
axe.version = '4.10.2';
|
|
26
26
|
if (typeof define === 'function' && define.amd) {
|
|
27
27
|
define('axe-core', [], function() {
|
|
28
28
|
return axe;
|
|
@@ -7625,7 +7625,7 @@
|
|
|
7625
7625
|
var parentElement = node.parentElement;
|
|
7626
7626
|
var parentNode = node.parentNode;
|
|
7627
7627
|
var nthChild = '';
|
|
7628
|
-
if (nodeName2 !== 'head' && nodeName2 !== 'body' && parentNode.children.length > 1) {
|
|
7628
|
+
if (nodeName2 !== 'head' && nodeName2 !== 'body' && (parentNode === null || parentNode === void 0 ? void 0 : parentNode.children.length) > 1) {
|
|
7629
7629
|
var index = Array.prototype.indexOf.call(parentNode.children, node) + 1;
|
|
7630
7630
|
nthChild = ':nth-child('.concat(index, ')');
|
|
7631
7631
|
}
|