govuk_publishing_components 66.7.0 → 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/_metadata.scss +5 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss +20 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +0 -7
- 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/_metadata.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_service_navigation.html.erb +2 -0
- data/app/views/govuk_publishing_components/components/_share_links.html.erb +6 -6
- data/app/views/govuk_publishing_components/components/docs/chart.yml +39 -0
- data/app/views/govuk_publishing_components/components/docs/metadata.yml +23 -0
- data/app/views/govuk_publishing_components/components/docs/service_navigation.yml +18 -0
- data/lib/govuk_publishing_components/presenters/chart_helper.rb +1 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +16 -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
|
|
|
@@ -29,6 +29,10 @@
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
.gem-c-metadata__list {
|
|
33
|
+
margin: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
32
36
|
.gem-c-metadata--inverse-padded {
|
|
33
37
|
padding: govuk-spacing(2) govuk-spacing(4);
|
|
34
38
|
|
|
@@ -40,7 +44,7 @@
|
|
|
40
44
|
margin: govuk-spacing(2) 0;
|
|
41
45
|
|
|
42
46
|
@include govuk-media-query($from: tablet) {
|
|
43
|
-
margin:
|
|
47
|
+
margin: 0;
|
|
44
48
|
}
|
|
45
49
|
}
|
|
46
50
|
}
|
|
@@ -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
|
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
<ul class="gem-c-share-links__list">
|
|
34
34
|
<% links.each_with_index do |link, index| %>
|
|
35
35
|
<% link_text = capture do %>
|
|
36
|
-
|
|
37
|
-
<% if link[:hidden_text] %>
|
|
38
|
-
|
|
39
|
-
<% else %>
|
|
40
|
-
Share on
|
|
36
|
+
<% if link.include?(:hidden_text) %>
|
|
37
|
+
<% if link[:hidden_text].present? %>
|
|
38
|
+
<span class="govuk-visually-hidden"><%= link[:hidden_text] %></span>
|
|
41
39
|
<% end %>
|
|
42
|
-
|
|
40
|
+
<% else %>
|
|
41
|
+
<span class="govuk-visually-hidden">Share on</span>
|
|
42
|
+
<% end %>
|
|
43
43
|
<%= link[:text] %>
|
|
44
44
|
<span class="govuk-visually-hidden">
|
|
45
45
|
<%= t("components.share_links.opens_in_new_tab") %>
|
|
@@ -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
|
|
@@ -354,9 +354,31 @@ examples:
|
|
|
354
354
|
see_updates_link: true
|
|
355
355
|
title: Title
|
|
356
356
|
on_a_dark_background:
|
|
357
|
+
data:
|
|
358
|
+
inverse: true
|
|
359
|
+
margin_bottom: 0
|
|
360
|
+
from: [
|
|
361
|
+
"<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>",
|
|
362
|
+
"<a href='/government/organisations/cabinet-office'>Cabinet Office</a>",
|
|
363
|
+
"<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy & Industrial Strategy</a>",
|
|
364
|
+
"<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign & Commonwealth Office</a>",
|
|
365
|
+
"<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>",
|
|
366
|
+
"<a href=\"/government/organisations/department-for-environment-food-rural-affairs\">Department for Environment, Food & Rural Affairs</a>",
|
|
367
|
+
"<a href=\"/government/organisations/department-for-work-pensions\">Department for work and pensions</a>",
|
|
368
|
+
"<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign and Commonwealth Office</a>"
|
|
369
|
+
]
|
|
370
|
+
first_published: 14 June 2014
|
|
371
|
+
last_updated: 10 September 2015
|
|
372
|
+
see_updates_link: true
|
|
373
|
+
other:
|
|
374
|
+
Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
|
|
375
|
+
context:
|
|
376
|
+
dark_background: true
|
|
377
|
+
on_a_dark_background_with_a_title:
|
|
357
378
|
data:
|
|
358
379
|
title: This is a title
|
|
359
380
|
inverse: true
|
|
381
|
+
margin_bottom: 0
|
|
360
382
|
from: [
|
|
361
383
|
"<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>",
|
|
362
384
|
"<a href='/government/organisations/cabinet-office'>Cabinet Office</a>",
|
|
@@ -380,6 +402,7 @@ examples:
|
|
|
380
402
|
title: This is a title
|
|
381
403
|
inverse: true
|
|
382
404
|
inverse_compress: true
|
|
405
|
+
margin_bottom: 0
|
|
383
406
|
from: [
|
|
384
407
|
"<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>",
|
|
385
408
|
"<a href='/government/organisations/cabinet-office'>Cabinet Office</a>",
|
|
@@ -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:
|
|
@@ -30,7 +30,7 @@ module GovukPublishingComponents
|
|
|
30
30
|
# config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart
|
|
31
31
|
def chart_options
|
|
32
32
|
{
|
|
33
|
-
chartArea: { width: "
|
|
33
|
+
chartArea: { width: "auto", height: "auto" },
|
|
34
34
|
crosshair: { orientation: "vertical", trigger: "both", color: "#ccc" },
|
|
35
35
|
curveType: "none",
|
|
36
36
|
enableInteractivity: @enable_interactivity,
|
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
|
|
@@ -9,6 +9,20 @@ bindir: bin
|
|
|
9
9
|
cert_chain: []
|
|
10
10
|
date: 1980-01-02 00:00:00.000000000 Z
|
|
11
11
|
dependencies:
|
|
12
|
+
- !ruby/object:Gem::Dependency
|
|
13
|
+
name: chartkick
|
|
14
|
+
requirement: !ruby/object:Gem::Requirement
|
|
15
|
+
requirements:
|
|
16
|
+
- - ">="
|
|
17
|
+
- !ruby/object:Gem::Version
|
|
18
|
+
version: '0'
|
|
19
|
+
type: :runtime
|
|
20
|
+
prerelease: false
|
|
21
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
22
|
+
requirements:
|
|
23
|
+
- - ">="
|
|
24
|
+
- !ruby/object:Gem::Version
|
|
25
|
+
version: '0'
|
|
12
26
|
- !ruby/object:Gem::Dependency
|
|
13
27
|
name: govuk_app_config
|
|
14
28
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -2145,7 +2159,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
2145
2159
|
- !ruby/object:Gem::Version
|
|
2146
2160
|
version: '0'
|
|
2147
2161
|
requirements: []
|
|
2148
|
-
rubygems_version: 4.0.
|
|
2162
|
+
rubygems_version: 4.0.16
|
|
2149
2163
|
specification_version: 4
|
|
2150
2164
|
summary: A gem to document components in GOV.UK frontend applications
|
|
2151
2165
|
test_files: []
|