dxw_govuk_frontend_rails 3.9.1 → 3.10.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +3 -3
- data/package.json +1 -1
- data/vendor/assets/javascripts/govuk_frontend_rails.js +57 -0
- data/vendor/assets/stylesheets/components/_all.scss +1 -0
- data/vendor/assets/stylesheets/components/error-summary/_index.scss +2 -12
- data/vendor/assets/stylesheets/components/notification-banner/_index.scss +89 -0
- data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss +2 -0
- data/vendor/assets/stylesheets/helpers/_links.scss +94 -0
- data/vendor/assets/stylesheets/settings/_colours-applied.scss +9 -0
- data/vendor/assets/stylesheets/settings/_typography-font.scss +3 -0
- metadata +3 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b45f829ef6c112b8acdc675c702ea6c5b2ed784f67afd8c46fb5fd1ab9e6515f
|
4
|
+
data.tar.gz: cac2861100bd6e495f63cbf61792428d6dd86260ba6ac8a6499d7d4ddd7efcc8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2bbc39c25ed2bb297c569524f56b4dd998d4363b27f6a861ffd888c2dd5babcb07f9722d72cc7c54c9604522591a8ac2eefed5527137bd11833ea00bcf8777b7
|
7
|
+
data.tar.gz: 38df5dbcd807f25710609517b7aa8458824b09b0b7e33c04713adb18e9d3613fad3f63574ff2d450f32fbb8d51b8e950f767b3ce4ad3cd983e7026b4b5f2cf22
|
data/Gemfile.lock
CHANGED
data/package-lock.json
CHANGED
@@ -5,9 +5,9 @@
|
|
5
5
|
"requires": true,
|
6
6
|
"dependencies": {
|
7
7
|
"govuk-frontend": {
|
8
|
-
"version": "3.
|
9
|
-
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.
|
10
|
-
"integrity": "sha512-
|
8
|
+
"version": "3.10.2",
|
9
|
+
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.10.2.tgz",
|
10
|
+
"integrity": "sha512-MpMymgLsKoMw40MggZ0XLCAj1FY5N2s8Pf3aQR+k0cZOsegjLsnejxNfEB9qEl9jcma2fiiVcvsEZ+Ipo+Oo2g=="
|
11
11
|
}
|
12
12
|
}
|
13
13
|
}
|
data/package.json
CHANGED
@@ -1959,6 +1959,58 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
|
|
1959
1959
|
$input.closest('label')
|
1960
1960
|
};
|
1961
1961
|
|
1962
|
+
function NotificationBanner ($module) {
|
1963
|
+
this.$module = $module;
|
1964
|
+
}
|
1965
|
+
|
1966
|
+
/**
|
1967
|
+
* Initialise the component
|
1968
|
+
*/
|
1969
|
+
NotificationBanner.prototype.init = function () {
|
1970
|
+
var $module = this.$module;
|
1971
|
+
// Check for module
|
1972
|
+
if (!$module) {
|
1973
|
+
return
|
1974
|
+
}
|
1975
|
+
|
1976
|
+
this.setFocus();
|
1977
|
+
};
|
1978
|
+
|
1979
|
+
/**
|
1980
|
+
* Focus the element
|
1981
|
+
*
|
1982
|
+
* If `role="alert"` is set, focus the element to help some assistive technologies
|
1983
|
+
* prioritise announcing it.
|
1984
|
+
*
|
1985
|
+
* You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
|
1986
|
+
* component HTML. You might wish to do this based on user research findings, or to avoid a clash
|
1987
|
+
* with another element which should be focused when the page loads.
|
1988
|
+
*/
|
1989
|
+
NotificationBanner.prototype.setFocus = function () {
|
1990
|
+
var $module = this.$module;
|
1991
|
+
|
1992
|
+
if ($module.getAttribute('data-disable-auto-focus') === 'true') {
|
1993
|
+
return
|
1994
|
+
}
|
1995
|
+
|
1996
|
+
if ($module.getAttribute('role') !== 'alert') {
|
1997
|
+
return
|
1998
|
+
}
|
1999
|
+
|
2000
|
+
// Set tabindex to -1 to make the element focusable with JavaScript.
|
2001
|
+
// Remove the tabindex on blur as the component doesn't need to be focusable after the page has
|
2002
|
+
// loaded.
|
2003
|
+
if (!$module.getAttribute('tabindex')) {
|
2004
|
+
$module.setAttribute('tabindex', '-1');
|
2005
|
+
|
2006
|
+
$module.addEventListener('blur', function () {
|
2007
|
+
$module.removeAttribute('tabindex');
|
2008
|
+
});
|
2009
|
+
}
|
2010
|
+
|
2011
|
+
$module.focus();
|
2012
|
+
};
|
2013
|
+
|
1962
2014
|
function Header ($module) {
|
1963
2015
|
this.$module = $module;
|
1964
2016
|
this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
|
@@ -2476,6 +2528,11 @@ function initAll (options) {
|
|
2476
2528
|
var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
|
2477
2529
|
new Header($toggleButton).init();
|
2478
2530
|
|
2531
|
+
var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
|
2532
|
+
nodeListForEach($notificationBanners, function ($notificationBanner) {
|
2533
|
+
new NotificationBanner($notificationBanner).init();
|
2534
|
+
});
|
2535
|
+
|
2479
2536
|
var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
|
2480
2537
|
nodeListForEach($radios, function ($radio) {
|
2481
2538
|
new Radios($radio).init();
|
@@ -37,17 +37,7 @@
|
|
37
37
|
|
38
38
|
.govuk-error-summary__list a {
|
39
39
|
@include govuk-typography-weight-bold;
|
40
|
-
|
41
|
-
|
42
|
-
&:link,
|
43
|
-
&:visited,
|
44
|
-
&:hover,
|
45
|
-
&:active {
|
46
|
-
color: $govuk-error-colour;
|
47
|
-
}
|
48
|
-
|
49
|
-
&:focus {
|
50
|
-
@include govuk-focused-text;
|
51
|
-
}
|
40
|
+
@include govuk-link-common;
|
41
|
+
@include govuk-link-style-error;
|
52
42
|
}
|
53
43
|
}
|
@@ -0,0 +1,89 @@
|
|
1
|
+
@include govuk-exports("govuk/component/notification-banner") {
|
2
|
+
.govuk-notification-banner {
|
3
|
+
@include govuk-font($size: 19);
|
4
|
+
@include govuk-responsive-margin(8, "bottom");
|
5
|
+
|
6
|
+
border: $govuk-border-width solid $govuk-brand-colour;
|
7
|
+
|
8
|
+
background-color: $govuk-brand-colour;
|
9
|
+
|
10
|
+
&:focus {
|
11
|
+
outline: $govuk-focus-width solid $govuk-focus-colour;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
.govuk-notification-banner__header {
|
16
|
+
padding: 2px govuk-spacing(3) govuk-spacing(1);
|
17
|
+
|
18
|
+
// Ensures the notification header appears separate to the notification body text in high contrast mode
|
19
|
+
border-bottom: 1px solid transparent;
|
20
|
+
|
21
|
+
@include govuk-media-query($from: tablet) {
|
22
|
+
padding: 2px govuk-spacing(4) govuk-spacing(1);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
.govuk-notification-banner__title {
|
27
|
+
@include govuk-font($size: 19, $weight: bold);
|
28
|
+
|
29
|
+
margin: 0;
|
30
|
+
|
31
|
+
padding: 0;
|
32
|
+
|
33
|
+
color: govuk-colour("white");
|
34
|
+
}
|
35
|
+
|
36
|
+
.govuk-notification-banner__content {
|
37
|
+
$padding-tablet: govuk-spacing(4);
|
38
|
+
@include govuk-text-colour;
|
39
|
+
padding: govuk-spacing(3);
|
40
|
+
|
41
|
+
background-color: $govuk-body-background-colour;
|
42
|
+
|
43
|
+
@include govuk-media-query($from: tablet) {
|
44
|
+
padding: $padding-tablet;
|
45
|
+
}
|
46
|
+
|
47
|
+
// Wrap content at the same place that a 2/3 grid column ends, to maintain
|
48
|
+
// shorter line-lengths when the notification banner is full width
|
49
|
+
> * {
|
50
|
+
// When elements have their own padding (like lists), include the padding
|
51
|
+
// in the max-width calculation
|
52
|
+
box-sizing: border-box;
|
53
|
+
|
54
|
+
// Calculate the internal width of a two-thirds column...
|
55
|
+
$two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
|
56
|
+
|
57
|
+
// ...and then factor in the left border and padding
|
58
|
+
$banner-exterior: ($padding-tablet + $govuk-border-width);
|
59
|
+
max-width: $two-col-width - $banner-exterior;
|
60
|
+
}
|
61
|
+
|
62
|
+
> :last-child {
|
63
|
+
margin-bottom: 0;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
.govuk-notification-banner__heading {
|
68
|
+
@include govuk-font($size: 24, $weight: bold);
|
69
|
+
|
70
|
+
margin: 0 0 govuk-spacing(3) 0;
|
71
|
+
|
72
|
+
padding: 0;
|
73
|
+
}
|
74
|
+
|
75
|
+
.govuk-notification-banner__link {
|
76
|
+
@include govuk-link-common;
|
77
|
+
@include govuk-link-style-no-visited-state;
|
78
|
+
}
|
79
|
+
|
80
|
+
.govuk-notification-banner--success {
|
81
|
+
border-color: $govuk-success-colour;
|
82
|
+
|
83
|
+
background-color: $govuk-success-colour;
|
84
|
+
|
85
|
+
.govuk-notification-banner__link {
|
86
|
+
@include govuk-link-style-success;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
@@ -66,6 +66,100 @@
|
|
66
66
|
}
|
67
67
|
}
|
68
68
|
|
69
|
+
/// Error link style mixin
|
70
|
+
///
|
71
|
+
/// Provides the error unvisited, visited, hover and active states for links.
|
72
|
+
///
|
73
|
+
/// If you use this mixin in a component you must also include the
|
74
|
+
/// govuk-link-common mixin in order to get the focus state.
|
75
|
+
///
|
76
|
+
/// @example scss
|
77
|
+
/// .govuk-component__link {
|
78
|
+
/// @include govuk-link-common;
|
79
|
+
/// @include govuk-link-style-error;
|
80
|
+
/// }
|
81
|
+
///
|
82
|
+
/// @access public
|
83
|
+
|
84
|
+
@mixin govuk-link-style-error {
|
85
|
+
&:link,
|
86
|
+
&:visited {
|
87
|
+
color: $govuk-error-colour;
|
88
|
+
}
|
89
|
+
|
90
|
+
&:hover {
|
91
|
+
color: scale-color($govuk-error-colour, $lightness: -30%);
|
92
|
+
}
|
93
|
+
|
94
|
+
&:active {
|
95
|
+
color: $govuk-error-colour;
|
96
|
+
}
|
97
|
+
|
98
|
+
// When focussed, the text colour needs to be darker to ensure that colour
|
99
|
+
// contrast is still acceptable
|
100
|
+
&:focus {
|
101
|
+
color: $govuk-focus-text-colour;
|
102
|
+
}
|
103
|
+
|
104
|
+
// alphagov/govuk_template includes a specific a:link:focus selector
|
105
|
+
// designed to make unvisited link s a slightly darker blue when focussed, so
|
106
|
+
// we need to override the text colour for that combination of selectors so
|
107
|
+
// so that unvisited links styled as buttons do not end up with dark blue
|
108
|
+
// text when focussed.
|
109
|
+
@include govuk-compatibility(govuk_template) {
|
110
|
+
&:link:focus {
|
111
|
+
color: $govuk-focus-text-colour;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
/// Success link style mixin
|
117
|
+
///
|
118
|
+
/// Provides the success unvisited, visited, hover and active states for links.
|
119
|
+
///
|
120
|
+
/// If you use this mixin in a component you must also include the
|
121
|
+
/// govuk-link-common mixin in order to get the focus state.
|
122
|
+
///
|
123
|
+
/// @example scss
|
124
|
+
/// .govuk-component__link {
|
125
|
+
/// @include govuk-link-common;
|
126
|
+
/// @include govuk-link-style-success;
|
127
|
+
/// }
|
128
|
+
///
|
129
|
+
/// @access public
|
130
|
+
|
131
|
+
@mixin govuk-link-style-success {
|
132
|
+
&:link,
|
133
|
+
&:visited {
|
134
|
+
color: $govuk-success-colour;
|
135
|
+
}
|
136
|
+
|
137
|
+
&:hover {
|
138
|
+
color: scale-color($govuk-success-colour, $lightness: -30%);
|
139
|
+
}
|
140
|
+
|
141
|
+
&:active {
|
142
|
+
color: $govuk-success-colour;
|
143
|
+
}
|
144
|
+
|
145
|
+
// When focussed, the text colour needs to be darker to ensure that colour
|
146
|
+
// contrast is still acceptable
|
147
|
+
&:focus {
|
148
|
+
color: $govuk-focus-text-colour;
|
149
|
+
}
|
150
|
+
|
151
|
+
// alphagov/govuk_template includes a specific a:link:focus selector
|
152
|
+
// designed to make unvisited link s a slightly darker blue when focussed, so
|
153
|
+
// we need to override the text colour for that combination of selectors so
|
154
|
+
// so that unvisited links styled as buttons do not end up with dark blue
|
155
|
+
// text when focussed.
|
156
|
+
@include govuk-compatibility(govuk_template) {
|
157
|
+
&:link:focus {
|
158
|
+
color: $govuk-focus-text-colour;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
|
69
163
|
/// Muted style link mixin
|
70
164
|
///
|
71
165
|
/// Used for secondary links on a page - the link will appear in muted colours
|
@@ -86,6 +86,15 @@ $govuk-focus-text-colour: govuk-colour("black") !default;
|
|
86
86
|
|
87
87
|
$govuk-error-colour: govuk-colour("red") !default;
|
88
88
|
|
89
|
+
/// Success colour
|
90
|
+
///
|
91
|
+
/// Used to highlight success messages and banners
|
92
|
+
///
|
93
|
+
/// @type Colour
|
94
|
+
/// @access public
|
95
|
+
|
96
|
+
$govuk-success-colour: govuk-colour("green") !default;
|
97
|
+
|
89
98
|
/// Border colour
|
90
99
|
///
|
91
100
|
/// Used in for example borders, separators, rules and keylines.
|
@@ -52,6 +52,9 @@ $govuk-font-family-tabular: if(
|
|
52
52
|
|
53
53
|
/// Font families to use for print media
|
54
54
|
///
|
55
|
+
/// We recommend that you use system fonts when printing. This will avoid issues
|
56
|
+
/// with some printer drivers and operating systems.
|
57
|
+
///
|
55
58
|
/// @type List
|
56
59
|
/// @access public
|
57
60
|
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: dxw_govuk_frontend_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 3.
|
4
|
+
version: 3.10.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- mec
|
@@ -117,6 +117,8 @@ files:
|
|
117
117
|
- vendor/assets/stylesheets/components/inset-text/_inset-text.scss
|
118
118
|
- vendor/assets/stylesheets/components/label/_index.scss
|
119
119
|
- vendor/assets/stylesheets/components/label/_label.scss
|
120
|
+
- vendor/assets/stylesheets/components/notification-banner/_index.scss
|
121
|
+
- vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss
|
120
122
|
- vendor/assets/stylesheets/components/panel/_index.scss
|
121
123
|
- vendor/assets/stylesheets/components/panel/_panel.scss
|
122
124
|
- vendor/assets/stylesheets/components/phase-banner/_index.scss
|