govuk_publishing_components 66.7.1 → 66.8.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/stylesheets/govuk_publishing_components/components/_big-number.scss +3 -8
- data/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +10 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss +20 -0
- data/app/controllers/govuk_publishing_components/applications_page_controller.rb +1 -1
- data/app/controllers/govuk_publishing_components/audit_controller.rb +0 -1
- data/app/views/govuk_publishing_components/components/_chart.html.erb +4 -1
- data/app/views/govuk_publishing_components/components/_service_navigation.html.erb +2 -0
- data/app/views/govuk_publishing_components/components/docs/chart.yml +39 -0
- data/app/views/govuk_publishing_components/components/docs/service_navigation.yml +18 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: eff7e55b8b6df261960e3f96ae3699b165e061482d22018d22f0e437a4d08f48
|
|
4
|
+
data.tar.gz: b2a63d1cc15ee867480f28c6574725c25aa917972dfe94539326b00c6ae2ab84
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: df29a3021aee6334c5bb4a41f0da66367ed181680fe2881482fc56030639ac79036ab2271bc95c56070c920affa39e0d273ec53a0d62c13f469e5a001d4b6c9c
|
|
7
|
+
data.tar.gz: e485483334794b71024ca797f717cd6cd0ffa8c6ab575c5b52153c6f234ca0788586c6c35245e009de83bd3bd881cde3645d01851469b802f0b8c3c909728976
|
|
@@ -8,18 +8,13 @@
|
|
|
8
8
|
font-size: 80px;
|
|
9
9
|
font-size: govuk-px-to-rem(80px);
|
|
10
10
|
@include govuk-font($size: false, $weight: bold);
|
|
11
|
+
// Make the value an inline element, and the label a block level element to make them stack vertically but be announced as one element by JAWS and NVDA.
|
|
12
|
+
display: inline-block;
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
.gem-c-big-number__label {
|
|
14
16
|
@include govuk-font($size: 19, $weight: bold);
|
|
15
|
-
|
|
16
|
-
// This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
|
|
17
|
-
// What's happening here is that the label and the number technically have an inline relationship
|
|
18
|
-
// but appear to have a block relationship thanks to this element
|
|
19
|
-
&::before {
|
|
20
|
-
content: "";
|
|
21
|
-
display: block;
|
|
22
|
-
}
|
|
17
|
+
display: block;
|
|
23
18
|
}
|
|
24
19
|
|
|
25
20
|
.gem-c-big-number__link {
|
|
@@ -42,10 +42,17 @@
|
|
|
42
42
|
margin-bottom: govuk-spacing(2);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
.gem-c-
|
|
46
|
-
// Ensure
|
|
45
|
+
.gem-c-chart__header {
|
|
46
|
+
// Ensure header content width is constrained to two thirds on desktop
|
|
47
47
|
@include govuk-media-query($from: "desktop") {
|
|
48
|
-
max-width:
|
|
48
|
+
max-width: 630px;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.gem-c-chart__header--three-quarters {
|
|
53
|
+
// Ensure header content width is constrained to three quarters on desktop
|
|
54
|
+
@include govuk-media-query($from: "desktop") {
|
|
55
|
+
max-width: 742.5px;
|
|
49
56
|
}
|
|
50
57
|
}
|
|
51
58
|
|
|
@@ -3,3 +3,23 @@
|
|
|
3
3
|
.gem-c-service-navigation--full-width {
|
|
4
4
|
padding-left: govuk-spacing(3);
|
|
5
5
|
}
|
|
6
|
+
|
|
7
|
+
.gem-c-service-navigation--hide-service-name-on-mobile {
|
|
8
|
+
.govuk-service-navigation__service-name {
|
|
9
|
+
display: none;
|
|
10
|
+
|
|
11
|
+
@include govuk-media-query($from: tablet) {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.govuk-service-navigation__item:first-child {
|
|
17
|
+
@include govuk-media-query($from: tablet) {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.govuk-service-navigation__service-name + .govuk-service-navigation__wrapper .govuk-service-navigation__toggle {
|
|
23
|
+
margin-top: govuk-spacing(2);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -12,7 +12,7 @@ module GovukPublishingComponents
|
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
type: "utility",
|
|
15
|
-
apps: %w[account-api signon govspeak govspeak-preview release govuk-developer-docs
|
|
15
|
+
apps: %w[account-api signon govspeak govspeak-preview release govuk-developer-docs govuk_web_banners].sort,
|
|
16
16
|
},
|
|
17
17
|
]
|
|
18
18
|
|
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
download_link ||= false
|
|
8
8
|
heading ||= nil
|
|
9
9
|
description ||= nil
|
|
10
|
+
header_three_quarters ||= false
|
|
11
|
+
header_class = "gem-c-chart__header"
|
|
12
|
+
header_class << "--three-quarters" if header_three_quarters
|
|
10
13
|
source ||= false
|
|
11
14
|
|
|
12
15
|
if !heading || !description
|
|
@@ -33,7 +36,7 @@
|
|
|
33
36
|
<% @include_script[:script_included] = true %>
|
|
34
37
|
<% end %>
|
|
35
38
|
<%= tag.div(**component_helper.all_attributes) do %>
|
|
36
|
-
<div class="
|
|
39
|
+
<div class="<%= header_class %>">
|
|
37
40
|
<%= render "govuk_publishing_components/components/heading", {
|
|
38
41
|
text: heading,
|
|
39
42
|
heading_level: heading_level,
|
|
@@ -5,11 +5,13 @@
|
|
|
5
5
|
navigation_aria_label ||= t("components.layout_header.menu")
|
|
6
6
|
toggle_text ||= t("components.service_navigation.menu_toggle")
|
|
7
7
|
inverse ||= false
|
|
8
|
+
hide_service_name_on_mobile ||= false
|
|
8
9
|
collapse_navigation_on_mobile = local_assigns.fetch(:collapse_navigation_on_mobile, navigation_items.length > 1)
|
|
9
10
|
|
|
10
11
|
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
11
12
|
component_helper.add_class("gem-c-service-navigation govuk-service-navigation")
|
|
12
13
|
component_helper.add_class("govuk-service-navigation--inverse") if inverse
|
|
14
|
+
component_helper.add_class("gem-c-service-navigation--hide-service-name-on-mobile") if hide_service_name_on_mobile
|
|
13
15
|
component_helper.add_aria_attribute({ label: "Service information" }) if service_name.present?
|
|
14
16
|
component_helper.add_data_attribute({ module: "govuk-service-navigation" })
|
|
15
17
|
|
|
@@ -423,3 +423,42 @@ examples:
|
|
|
423
423
|
- 118
|
|
424
424
|
- 85
|
|
425
425
|
- 80
|
|
426
|
+
with_a_different_header_max_width:
|
|
427
|
+
description: |
|
|
428
|
+
By default, the `max-width` of the header (heading and description) is set to `630px` which is the width of a standard GOV.UK two-thirds column. This prevents the header being too wide for legibility purposes if it is rendered in a full width container.
|
|
429
|
+
|
|
430
|
+
In some cases you might want the `max-width` to match the width of a three quarter column. Therefore you can set `header_three_quarters` to increase the max width to `742.5px`.
|
|
431
|
+
data:
|
|
432
|
+
header_three_quarters: true
|
|
433
|
+
heading: This heading is intentionally quite long to demonstrate the max width functionality of the component
|
|
434
|
+
h_axis_title: Day
|
|
435
|
+
v_axis_title: Views
|
|
436
|
+
description: Additionally, this is a description with quite a lot of words so that you can see how the description looks with a max width of three-quarters.
|
|
437
|
+
height: 200
|
|
438
|
+
keys:
|
|
439
|
+
- 1st
|
|
440
|
+
- 2nd
|
|
441
|
+
- 3rd
|
|
442
|
+
- 4th
|
|
443
|
+
- 5th
|
|
444
|
+
- 6th
|
|
445
|
+
- 7th
|
|
446
|
+
rows:
|
|
447
|
+
- label: January 2015
|
|
448
|
+
values:
|
|
449
|
+
- 5
|
|
450
|
+
- 119
|
|
451
|
+
- 74
|
|
452
|
+
- 117
|
|
453
|
+
- 33
|
|
454
|
+
- 89
|
|
455
|
+
- 79
|
|
456
|
+
- label: January 2016
|
|
457
|
+
values:
|
|
458
|
+
- 3
|
|
459
|
+
- 8
|
|
460
|
+
- 37
|
|
461
|
+
- 82
|
|
462
|
+
- 118
|
|
463
|
+
- 85
|
|
464
|
+
- 80
|
|
@@ -52,6 +52,24 @@ examples:
|
|
|
52
52
|
href: "#"
|
|
53
53
|
- text: Navigation item 3
|
|
54
54
|
href: "#"
|
|
55
|
+
hide_service_name_on_mobile:
|
|
56
|
+
description: |
|
|
57
|
+
On desktop, use the `service_name` link to show the name of the main page and allow users to navigate to it.
|
|
58
|
+
|
|
59
|
+
On mobile, use the `toggle_text` to show the name of the main page, but allow users to navigate to it with the first link in the `navigation_items`, which is hidden on desktop.
|
|
60
|
+
data:
|
|
61
|
+
service_name: My service home
|
|
62
|
+
service_name_url: "/home"
|
|
63
|
+
hide_service_name_on_mobile: true
|
|
64
|
+
navigation_items:
|
|
65
|
+
- text: My service home
|
|
66
|
+
href: "/home"
|
|
67
|
+
- text: Navigation item 1
|
|
68
|
+
href: "#"
|
|
69
|
+
- text: Navigation item 2
|
|
70
|
+
href: "#"
|
|
71
|
+
- text: Navigation item 3
|
|
72
|
+
href: "#"
|
|
55
73
|
with_data_attributes_on_items:
|
|
56
74
|
data:
|
|
57
75
|
navigation_items:
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 66.
|
|
4
|
+
version: 66.8.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
@@ -2159,7 +2159,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
2159
2159
|
- !ruby/object:Gem::Version
|
|
2160
2160
|
version: '0'
|
|
2161
2161
|
requirements: []
|
|
2162
|
-
rubygems_version: 4.0.
|
|
2162
|
+
rubygems_version: 4.0.16
|
|
2163
2163
|
specification_version: 4
|
|
2164
2164
|
summary: A gem to document components in GOV.UK frontend applications
|
|
2165
2165
|
test_files: []
|