govuk_publishing_components 27.0.0 → 27.1.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/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss +41 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +128 -4
- data/app/views/govuk_publishing_components/components/_big_number.html.erb +35 -0
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/docs/big_number.yml +50 -0
- data/config/locales/en.yml +5 -3
- data/lib/govuk_publishing_components/version.rb +1 -1
- 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: 6ea0bb81f01cfea5a7fbefd1883bc66bbcb8a150d18dbce3a19848c9f86752c7
|
|
4
|
+
data.tar.gz: b2f8ef623497037c2f169c0455831aa7d2c0126f3ece9b05800486a1c283b2c5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4aef038f59352ee50197fc9a1e35f95d5ff7c56a3f4182341a866301ea39643d94cf3db806d669135299db0b614cc1d8ddfb28aef8fd11a5d067703f717a4213
|
|
7
|
+
data.tar.gz: 1234faee1167e829e7e887599f9f47d5bf5c8eb1ee7dd228b3afbd058a17e5f67fed95103b1e511ef7ca76b8ebaec9b253a0b3f8706ddbcc4562a990d2b843c0
|
|
@@ -16,6 +16,7 @@ $govuk-new-link-styles: true;
|
|
|
16
16
|
@import "components/attachment";
|
|
17
17
|
@import "components/attachment-link";
|
|
18
18
|
@import "components/back-link";
|
|
19
|
+
@import "components/big-number";
|
|
19
20
|
@import "components/breadcrumbs";
|
|
20
21
|
@import "components/button";
|
|
21
22
|
@import "components/character-count";
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
.gem-c-big-number {
|
|
2
|
+
margin-bottom: govuk-spacing(3);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.gem-c-big-number__value {
|
|
6
|
+
@include govuk-font($size: 80, $weight: bold);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.gem-c-big-number__label {
|
|
10
|
+
@include govuk-font($size: 16, $weight: bold, $line-height: 2);
|
|
11
|
+
|
|
12
|
+
// This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
|
|
13
|
+
// What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element
|
|
14
|
+
&:before {
|
|
15
|
+
content: "";
|
|
16
|
+
display: block;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.gem-c-big-number__link {
|
|
21
|
+
display: inline-block;
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
|
|
24
|
+
// Add govuk-link hover decoration to main value if no label present but a href attribute is
|
|
25
|
+
.gem-c-big-number__value--decorated {
|
|
26
|
+
@include govuk-link-decoration;
|
|
27
|
+
@include govuk-link-style-no-underline;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.gem-c-big-number__label {
|
|
31
|
+
@include govuk-link-decoration;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:hover,
|
|
35
|
+
&:active {
|
|
36
|
+
.gem-c-big-number__label,
|
|
37
|
+
.gem-c-big-number__value--decorated {
|
|
38
|
+
@include govuk-link-hover-decoration;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -1,3 +1,97 @@
|
|
|
1
|
+
/// Set grid row or column value using the fraction unit.
|
|
2
|
+
///
|
|
3
|
+
/// @param {Integer} $number - number of fractions that the grid row or column
|
|
4
|
+
/// needs to be divided into.
|
|
5
|
+
/// @returns {String} - the value
|
|
6
|
+
///
|
|
7
|
+
/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
|
|
8
|
+
/// .container {
|
|
9
|
+
/// grid-template-rows: fractions(5);
|
|
10
|
+
/// }
|
|
11
|
+
///
|
|
12
|
+
@function fractions($number) {
|
|
13
|
+
$fractions: "1fr";
|
|
14
|
+
|
|
15
|
+
@for $i from 1 to $number {
|
|
16
|
+
$fractions: $fractions + " 1fr";
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@return unquote($fractions);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/// Arrange items into vertical columns
|
|
23
|
+
///
|
|
24
|
+
/// @param {Integer} $items - number of items that need to be arranged
|
|
25
|
+
/// @param {Integer} $columns - number of columns required
|
|
26
|
+
/// @param {String} $selector - (optional) the inner element to be targeted.
|
|
27
|
+
///
|
|
28
|
+
/// @example scss - A 7 item 2 column layout.
|
|
29
|
+
/// .container {
|
|
30
|
+
/// @include columns(7, 2);
|
|
31
|
+
/// }
|
|
32
|
+
|
|
33
|
+
/// @example scss - A 9 item 3 column layout that has `div`s as the inner
|
|
34
|
+
/// elements.
|
|
35
|
+
/// .container {
|
|
36
|
+
/// @include columns(9, 3, "div");
|
|
37
|
+
/// }
|
|
38
|
+
///
|
|
39
|
+
@mixin columns($items, $columns, $selector: "*") {
|
|
40
|
+
$rows: ceil($items / $columns);
|
|
41
|
+
|
|
42
|
+
display: -ms-grid;
|
|
43
|
+
display: grid;
|
|
44
|
+
grid-auto-flow: column;
|
|
45
|
+
-ms-grid-columns: fractions($columns);
|
|
46
|
+
grid-template-columns: fractions($columns);
|
|
47
|
+
-ms-grid-rows: fractions($rows);
|
|
48
|
+
grid-template-rows: fractions($rows);
|
|
49
|
+
|
|
50
|
+
// Internet Explorer 10-11 require each element to be placed in the grid -
|
|
51
|
+
// the `grid-auto-flow` property isn't supported. This means that both the
|
|
52
|
+
// column and row needs to be set for every element.
|
|
53
|
+
|
|
54
|
+
// This creates a list of lists to represent the columns and rows; for
|
|
55
|
+
// example, a 7 item 2 column list would create this:
|
|
56
|
+
// [
|
|
57
|
+
// [1, 2, 3, 4 ] // column one
|
|
58
|
+
// [5, 6, 7] // column two
|
|
59
|
+
// ]
|
|
60
|
+
$grid: ();
|
|
61
|
+
$counter: 0;
|
|
62
|
+
|
|
63
|
+
@for $column from 1 through $columns {
|
|
64
|
+
$this-row: ();
|
|
65
|
+
|
|
66
|
+
@for $row from 1 through $rows {
|
|
67
|
+
$counter: $counter + 1;
|
|
68
|
+
|
|
69
|
+
@if $counter <= $items {
|
|
70
|
+
$this-row: append($this-row, $counter);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
$grid: append($grid, $this-row, "comma");
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Now we can loop through the list of lists to create the rules needed for
|
|
78
|
+
// the older grid syntax; fist looping through the list to get the number
|
|
79
|
+
// needed for the column, then looping again to get the number for the grid
|
|
80
|
+
// row:
|
|
81
|
+
@for $column_index from 1 through length($grid) {
|
|
82
|
+
$this-row: nth($grid, $column_index);
|
|
83
|
+
|
|
84
|
+
@for $item-index from 1 through length($this-row) {
|
|
85
|
+
$this-item: nth($this-row, $item-index);
|
|
86
|
+
|
|
87
|
+
& > #{$selector}:nth-child(#{$this-item}) {
|
|
88
|
+
-ms-grid-column: $column_index;
|
|
89
|
+
-ms-grid-row: $item-index;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
1
95
|
$search-icon-size: 20px;
|
|
2
96
|
|
|
3
97
|
@mixin chevron($colour) {
|
|
@@ -431,6 +525,26 @@ $search-icon-size: 20px;
|
|
|
431
525
|
content: " ";
|
|
432
526
|
}
|
|
433
527
|
}
|
|
528
|
+
|
|
529
|
+
// To avoid the 'sticky hover' problem, we need to stop the hover state on
|
|
530
|
+
// touch screen devices.
|
|
531
|
+
//
|
|
532
|
+
// One solution is to use `@media(hover: hover)`. This turns on the hover
|
|
533
|
+
// state only for devices that aren't touchscreen, but means that browsers
|
|
534
|
+
// that don't support this media query won't get a hover state at all.
|
|
535
|
+
//
|
|
536
|
+
// To get around this, we do the opposite - we turn off the hover state for
|
|
537
|
+
// for touchscreen devices.
|
|
538
|
+
@media (hover: none), (pointer: coarse) {
|
|
539
|
+
&:not(:focus):hover {
|
|
540
|
+
background-color: $govuk-link-colour;
|
|
541
|
+
color: govuk-colour("white");
|
|
542
|
+
|
|
543
|
+
&:after {
|
|
544
|
+
background-color: $govuk-link-colour;
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
}
|
|
434
548
|
}
|
|
435
549
|
}
|
|
436
550
|
|
|
@@ -579,8 +693,6 @@ $search-icon-size: 20px;
|
|
|
579
693
|
padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
|
|
580
694
|
|
|
581
695
|
@include govuk-media-query($from: "desktop") {
|
|
582
|
-
display: flex;
|
|
583
|
-
flex-wrap: wrap;
|
|
584
696
|
margin-left: (0 - govuk-spacing(3));
|
|
585
697
|
margin-right: (0 - govuk-spacing(3));
|
|
586
698
|
padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
|
|
@@ -590,11 +702,23 @@ $search-icon-size: 20px;
|
|
|
590
702
|
margin-bottom: 0;
|
|
591
703
|
padding-left: govuk-spacing(3);
|
|
592
704
|
padding-right: govuk-spacing(3);
|
|
593
|
-
width: 50%;
|
|
594
705
|
}
|
|
595
706
|
}
|
|
596
707
|
}
|
|
597
708
|
|
|
709
|
+
.gem-c-layout-super-navigation-header__navigation-second-items--topics {
|
|
710
|
+
@include govuk-media-query($from: "desktop") {
|
|
711
|
+
@include columns(18, 2, "li");
|
|
712
|
+
}
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
|
|
716
|
+
@include govuk-media-query($from: "desktop") {
|
|
717
|
+
@include columns(5, 2, "li");
|
|
718
|
+
padding-bottom: govuk-spacing(3);
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
|
|
598
722
|
.gem-c-layout-super-navigation-header__navigation-second-item-link {
|
|
599
723
|
display: inline-block;
|
|
600
724
|
padding: govuk-spacing(2) 0;
|
|
@@ -608,8 +732,8 @@ $search-icon-size: 20px;
|
|
|
608
732
|
|
|
609
733
|
.gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
|
|
610
734
|
@include govuk-font($size: 19, $weight: bold);
|
|
735
|
+
margin-top: govuk-spacing(2);
|
|
611
736
|
margin-bottom: 0;
|
|
612
|
-
padding-bottom: govuk-spacing(1);
|
|
613
737
|
}
|
|
614
738
|
|
|
615
739
|
// Dropdown menu footer links.
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<%
|
|
2
|
+
href ||= nil
|
|
3
|
+
number ||= nil
|
|
4
|
+
label ||= nil
|
|
5
|
+
href ||= nil
|
|
6
|
+
data_attributes ||= nil
|
|
7
|
+
classes = ["gem-c-big-number__value"]
|
|
8
|
+
|
|
9
|
+
if label.nil? && href
|
|
10
|
+
classes << "gem-c-big-number__value--decorated"
|
|
11
|
+
end
|
|
12
|
+
%>
|
|
13
|
+
<% if number %>
|
|
14
|
+
<% big_number_value = capture do %>
|
|
15
|
+
<%= tag.span class: classes do %>
|
|
16
|
+
<%= number %>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<% unless label.nil? %>
|
|
20
|
+
<% # add a virtual space here to handle screen readers printing dictations without a space between the number and the label %>
|
|
21
|
+
<span class="govuk-visually-hidden"> </span>
|
|
22
|
+
<span class="gem-c-big-number__label">
|
|
23
|
+
<%= label %>
|
|
24
|
+
</span>
|
|
25
|
+
<% end %>
|
|
26
|
+
<% end %>
|
|
27
|
+
|
|
28
|
+
<%= tag.div class: "gem-c-big-number" do %>
|
|
29
|
+
<% unless href.nil? %>
|
|
30
|
+
<%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %>
|
|
31
|
+
<% else %>
|
|
32
|
+
<%= big_number_value %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<% end %>
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
body_css_classes << "draft" if draft_watermark
|
|
45
45
|
-%>
|
|
46
46
|
<!DOCTYPE html>
|
|
47
|
-
<!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
|
|
48
|
-
<!--[if gt IE 8]><!--><html lang="<%= html_lang %>"><!--<![endif]-->
|
|
47
|
+
<!--[if lt IE 9]><html class="lte-ie8 govuk-template" lang="<%= html_lang %>"><![endif]-->
|
|
48
|
+
<!--[if gt IE 8]><!--><html class="govuk-template" lang="<%= html_lang %>"><!--<![endif]-->
|
|
49
49
|
<head>
|
|
50
50
|
<meta charset="utf-8" />
|
|
51
51
|
<title><%= title %></title>
|
data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
CHANGED
|
@@ -134,7 +134,7 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
|
|
|
134
134
|
</div>
|
|
135
135
|
<% if link[:menu_contents].present? %>
|
|
136
136
|
<div class="govuk-grid-column-two-thirds-from-desktop">
|
|
137
|
-
<ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items">
|
|
137
|
+
<ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
|
|
138
138
|
<% link[:menu_contents].each do | item | %>
|
|
139
139
|
<%
|
|
140
140
|
has_description = item[:description].present?
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
name: Big number
|
|
2
|
+
description: A big number, with a label if needed, for visualising quantitative values such as the number of government departments or historical prime ministers.
|
|
3
|
+
body: |
|
|
4
|
+
This component requires at least a non-falsey `number` attribute value passed to it, otherwise it will not render.
|
|
5
|
+
accessibility_criteria: |
|
|
6
|
+
This component must:
|
|
7
|
+
|
|
8
|
+
- communicate number value and label (if present) in a single dictation when read with a screen reader
|
|
9
|
+
- convey the meaning of the number shown
|
|
10
|
+
shared_accessibility_criteria:
|
|
11
|
+
- link
|
|
12
|
+
examples:
|
|
13
|
+
default:
|
|
14
|
+
data:
|
|
15
|
+
number: 119
|
|
16
|
+
with_labels:
|
|
17
|
+
description: Labels for numbers are given inline styling but stacked using pseudo elements with display block. This is to bypass an issue with NVDA where block level elements are dictated separately.
|
|
18
|
+
data:
|
|
19
|
+
number: 119
|
|
20
|
+
label: Open consultations
|
|
21
|
+
passing_extra_symbols:
|
|
22
|
+
description: "In some cases, we want to communicate more than just the flat numeric value eg: 400+, 90%, -20, 1M etc. This is why we allow values to be passed as flat strings."
|
|
23
|
+
data:
|
|
24
|
+
number: "400+"
|
|
25
|
+
label: Other agencies and public bodies
|
|
26
|
+
with_link:
|
|
27
|
+
data:
|
|
28
|
+
number: 23
|
|
29
|
+
label: Ministerial departments
|
|
30
|
+
href: "/government/organisations#ministerial_departments"
|
|
31
|
+
with_link_but_no_label:
|
|
32
|
+
description: Numbers that are links are underlined unless a label is provided, in which case the label is given the underline.
|
|
33
|
+
data:
|
|
34
|
+
number: 23
|
|
35
|
+
href: "/government/organisations#ministerial_departments"
|
|
36
|
+
with_data_attributes:
|
|
37
|
+
description: |
|
|
38
|
+
These data attributes will only be present if a `href` attribute is present.
|
|
39
|
+
|
|
40
|
+
This will also not automatically apply a `gem-track-click` module attribute if the data attributes pertain to click tracking. Remember to apply this outside the component call in a surrounding element, if using.
|
|
41
|
+
data:
|
|
42
|
+
number: 23
|
|
43
|
+
label: Ministerial departments
|
|
44
|
+
href: "/government/organisations#ministerial_departments"
|
|
45
|
+
data_attributes:
|
|
46
|
+
track-category: homepageClicked
|
|
47
|
+
track-action: departmentsLink
|
|
48
|
+
track-label: "/government/organisations#ministerial_departments"
|
|
49
|
+
track-dimension: 23 Ministerial departments
|
|
50
|
+
track-dimension-index: 29
|
data/config/locales/en.yml
CHANGED
|
@@ -47,7 +47,7 @@ en:
|
|
|
47
47
|
- We also use cookies set by other sites to help us deliver content from their services.
|
|
48
48
|
title: Cookies on GOV.UK
|
|
49
49
|
devolved_nations:
|
|
50
|
-
applies_to: Applies to
|
|
50
|
+
applies_to: Applies to
|
|
51
51
|
england: England
|
|
52
52
|
northern_ireland: Northern Ireland
|
|
53
53
|
scotland: Scotland
|
|
@@ -124,7 +124,8 @@ en:
|
|
|
124
124
|
- label: Topics
|
|
125
125
|
href: "/browse"
|
|
126
126
|
description: Find information and services
|
|
127
|
-
menu_contents:
|
|
127
|
+
menu_contents: # If adding or removing items, remember to update the
|
|
128
|
+
# `columns` in the layout-super-navigation-header SCSS.
|
|
128
129
|
- label: Benefits
|
|
129
130
|
href: "/browse/benefits"
|
|
130
131
|
- label: Births, death, marriages and care
|
|
@@ -166,7 +167,8 @@ en:
|
|
|
166
167
|
- label: Government activity
|
|
167
168
|
href: "/search/news-and-communications"
|
|
168
169
|
description: Find out what the government is doing
|
|
169
|
-
menu_contents:
|
|
170
|
+
menu_contents: # If adding or removing items, remember to update the
|
|
171
|
+
# `columns` in the layout-super-navigation-header SCSS.
|
|
170
172
|
- label: News
|
|
171
173
|
href: "/search/news-and-communications"
|
|
172
174
|
description: News stories, speeches, letters and notices
|
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: 27.
|
|
4
|
+
version: 27.1.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: 2021-09-
|
|
11
|
+
date: 2021-09-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|
|
@@ -536,6 +536,7 @@ files:
|
|
|
536
536
|
- app/assets/stylesheets/govuk_publishing_components/components/_attachment-link.scss
|
|
537
537
|
- app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
|
|
538
538
|
- app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
|
|
539
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss
|
|
539
540
|
- app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
|
|
540
541
|
- app/assets/stylesheets/govuk_publishing_components/components/_button.scss
|
|
541
542
|
- app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss
|
|
@@ -672,6 +673,7 @@ files:
|
|
|
672
673
|
- app/views/govuk_publishing_components/components/_attachment.html.erb
|
|
673
674
|
- app/views/govuk_publishing_components/components/_attachment_link.html.erb
|
|
674
675
|
- app/views/govuk_publishing_components/components/_back_link.html.erb
|
|
676
|
+
- app/views/govuk_publishing_components/components/_big_number.html.erb
|
|
675
677
|
- app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
|
|
676
678
|
- app/views/govuk_publishing_components/components/_button.html.erb
|
|
677
679
|
- app/views/govuk_publishing_components/components/_character_count.html.erb
|
|
@@ -754,6 +756,7 @@ files:
|
|
|
754
756
|
- app/views/govuk_publishing_components/components/docs/attachment.yml
|
|
755
757
|
- app/views/govuk_publishing_components/components/docs/attachment_link.yml
|
|
756
758
|
- app/views/govuk_publishing_components/components/docs/back_link.yml
|
|
759
|
+
- app/views/govuk_publishing_components/components/docs/big_number.yml
|
|
757
760
|
- app/views/govuk_publishing_components/components/docs/breadcrumbs.yml
|
|
758
761
|
- app/views/govuk_publishing_components/components/docs/button.yml
|
|
759
762
|
- app/views/govuk_publishing_components/components/docs/character_count.yml
|