govuk_publishing_components 27.0.0 → 27.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/_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
|