govuk_publishing_components 21.4.1 → 21.5.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/javascripts/govuk_publishing_components/components/contextual-guidance.js +32 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-guidance.scss +49 -0
- data/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb +25 -0
- data/app/views/govuk_publishing_components/components/docs/contextual_guidance.yml +28 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4a151a55dd93bf0dc6978eae16dfd6e4fc5b261de579dfa0a940eea3aa5cbb91
|
|
4
|
+
data.tar.gz: 5b10dd771a7caf700747044981f71b818f22dc1393115c0535c41df5501d432d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 67260c1a1ca4009a8eaf0f6e93368809e9e7be1c219eccb645f24d725743087b4d6c1beee607e8aff886546e51e9bfce212abd4bab40aff1d861a6bd3a95bd7c
|
|
7
|
+
data.tar.gz: 27d04b9134b33a4106a9c6419424b0b865eb53fc399a170e5121e995d80b51c21d99fafd3fce4ee443b08c948e9e1d40696989b722620c9e32bb8681ba3d0fea
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
window.GOVUK = window.GOVUK || {}
|
|
2
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
3
|
+
|
|
4
|
+
(function (Modules) {
|
|
5
|
+
function ContextualGuidance () { }
|
|
6
|
+
|
|
7
|
+
ContextualGuidance.prototype.start = function ($module) {
|
|
8
|
+
this.$module = $module[0]
|
|
9
|
+
this.$guidance = this.$module.querySelector('.gem-c-contextual-guidance__wrapper')
|
|
10
|
+
this.$inputId = this.$guidance.getAttribute('for')
|
|
11
|
+
this.$input = this.$module.querySelector('#' + this.$inputId)
|
|
12
|
+
if (!this.$input) return
|
|
13
|
+
this.$input.addEventListener('focus', this.handleFocus.bind(this))
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
ContextualGuidance.prototype.handleFocus = function (event) {
|
|
17
|
+
this.hideAllGuidance()
|
|
18
|
+
if (!event.target.dataset.contextualGuidanceHideOnly) {
|
|
19
|
+
this.$guidance.style.display = 'block'
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
ContextualGuidance.prototype.hideAllGuidance = function () {
|
|
24
|
+
var $guidances = document.querySelectorAll('.gem-c-contextual-guidance__wrapper')
|
|
25
|
+
|
|
26
|
+
for (var i = 0; i < $guidances.length; i++) {
|
|
27
|
+
$guidances[i].style.display = 'none'
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
Modules.ContextualGuidance = ContextualGuidance
|
|
32
|
+
})(window.GOVUK.Modules)
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
@import "components/checkboxes";
|
|
28
28
|
@import "components/chevron-banner";
|
|
29
29
|
@import "components/contents-list";
|
|
30
|
+
@import "components/contextual-guidance";
|
|
30
31
|
@import "components/cookie-banner";
|
|
31
32
|
@import "components/copy-to-clipboard";
|
|
32
33
|
@import "components/date-input";
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
.gem-c-contextual-guidance {
|
|
2
|
+
.govuk-grid-column-one-third {
|
|
3
|
+
position: relative;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
&:last-of-type {
|
|
7
|
+
.gem-c-contextual-guidance__wrapper {
|
|
8
|
+
position: relative;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.gem-c-contextual-guidance__wrapper {
|
|
15
|
+
position: relative;
|
|
16
|
+
|
|
17
|
+
@include govuk-font(19);
|
|
18
|
+
|
|
19
|
+
margin-bottom: govuk-spacing(7);
|
|
20
|
+
|
|
21
|
+
@include govuk-media-query($from: tablet) {
|
|
22
|
+
margin-bottom: govuk-spacing(7);
|
|
23
|
+
padding-top: govuk-spacing(6);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.js-enabled {
|
|
28
|
+
.gem-c-contextual-guidance__wrapper {
|
|
29
|
+
display: none;
|
|
30
|
+
|
|
31
|
+
@include govuk-media-query($from: tablet) {
|
|
32
|
+
position: absolute;
|
|
33
|
+
width: calc(100% - #{govuk-spacing(6)});
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.gem-c-contextual-guidance__guidance {
|
|
39
|
+
padding-left: govuk-spacing(3);
|
|
40
|
+
border-left: 4px solid $govuk-focus-colour;
|
|
41
|
+
background: govuk-colour("white");
|
|
42
|
+
|
|
43
|
+
@include govuk-media-query($from: tablet) {
|
|
44
|
+
padding-top: govuk-spacing(5);
|
|
45
|
+
padding-left: 0;
|
|
46
|
+
border-top: 5px solid $govuk-focus-colour;
|
|
47
|
+
border-left: 0;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<%
|
|
2
|
+
id ||= nil
|
|
3
|
+
title ||= nil
|
|
4
|
+
content ||= nil
|
|
5
|
+
data_attributes ||= {}
|
|
6
|
+
data_attributes[:module] = "contextual-guidance"
|
|
7
|
+
%>
|
|
8
|
+
|
|
9
|
+
<%= tag.div class: "gem-c-contextual-guidance", id: id, data: data_attributes do %>
|
|
10
|
+
<%= tag.div class: "govuk-grid-row" do %>
|
|
11
|
+
<%= tag.div class: "govuk-grid-column-two-thirds" do %>
|
|
12
|
+
<%= tag.div class: "gem-c-contextual-guidance__input-field" do %>
|
|
13
|
+
<%= yield %>
|
|
14
|
+
<% end %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<%= tag.div class: "govuk-grid-column-one-third" do %>
|
|
17
|
+
<%= tag.div class: "gem-c-contextual-guidance__wrapper", for: html_for do %>
|
|
18
|
+
<%= tag.div class: "gem-c-contextual-guidance__guidance" do %>
|
|
19
|
+
<%= tag.h2 title, class: "govuk-heading-s" %>
|
|
20
|
+
<%= content %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<% end %>
|
|
25
|
+
<% end %>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
name: Contextual guidance
|
|
2
|
+
description: Provides a container with additional information when focusing an input field (e.g. input, textarea)
|
|
3
|
+
body: |
|
|
4
|
+
This component is build to be used with an input field passed in as a block and must reference its ID using the `html_for` attribute.
|
|
5
|
+
|
|
6
|
+
On tablet and desktop, the guidance container is set to float on the page and prevent other elements from moving around (e.g. pushing next fields down the page).
|
|
7
|
+
part_of_admin_layout: true
|
|
8
|
+
accessibility_criteria: |
|
|
9
|
+
The component must:
|
|
10
|
+
|
|
11
|
+
* be hidden by default
|
|
12
|
+
* be visible when the associated input field if focused
|
|
13
|
+
* stay visible until another input field with guidance is being focused
|
|
14
|
+
shared_accessibility_criteria:
|
|
15
|
+
- link
|
|
16
|
+
examples:
|
|
17
|
+
default:
|
|
18
|
+
description: Reveals a contextul guidance on the side overflowing the container
|
|
19
|
+
data:
|
|
20
|
+
html_for: news-title
|
|
21
|
+
title: Writing a news title
|
|
22
|
+
content: |
|
|
23
|
+
<p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
|
|
24
|
+
block: |
|
|
25
|
+
<div class="govuk-form-group">
|
|
26
|
+
<label class="gem-c-label govuk-label" for="news-title">News title</label>
|
|
27
|
+
<input id="news-title" type="text" class="gem-c-input govuk-input">
|
|
28
|
+
</div>
|
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: 21.
|
|
4
|
+
version: 21.5.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: 2019-10-
|
|
11
|
+
date: 2019-10-08 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: gds-api-adapters
|
|
@@ -392,6 +392,7 @@ files:
|
|
|
392
392
|
- app/assets/javascripts/govuk_publishing_components/components/accordion.js
|
|
393
393
|
- app/assets/javascripts/govuk_publishing_components/components/character-count.js
|
|
394
394
|
- app/assets/javascripts/govuk_publishing_components/components/checkboxes.js
|
|
395
|
+
- app/assets/javascripts/govuk_publishing_components/components/contextual-guidance.js
|
|
395
396
|
- app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js
|
|
396
397
|
- app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js
|
|
397
398
|
- app/assets/javascripts/govuk_publishing_components/components/error-summary.js
|
|
@@ -426,6 +427,7 @@ files:
|
|
|
426
427
|
- app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss
|
|
427
428
|
- app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss
|
|
428
429
|
- app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss
|
|
430
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_contextual-guidance.scss
|
|
429
431
|
- app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
|
|
430
432
|
- app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
|
|
431
433
|
- app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss
|
|
@@ -548,6 +550,7 @@ files:
|
|
|
548
550
|
- app/views/govuk_publishing_components/components/_contents_list.html.erb
|
|
549
551
|
- app/views/govuk_publishing_components/components/_contextual_breadcrumbs.html.erb
|
|
550
552
|
- app/views/govuk_publishing_components/components/_contextual_footer.html.erb
|
|
553
|
+
- app/views/govuk_publishing_components/components/_contextual_guidance.html.erb
|
|
551
554
|
- app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb
|
|
552
555
|
- app/views/govuk_publishing_components/components/_cookie_banner.html.erb
|
|
553
556
|
- app/views/govuk_publishing_components/components/_copy_to_clipboard.html.erb
|
|
@@ -620,6 +623,7 @@ files:
|
|
|
620
623
|
- app/views/govuk_publishing_components/components/docs/contents_list.yml
|
|
621
624
|
- app/views/govuk_publishing_components/components/docs/contextual_breadcrumbs.yml
|
|
622
625
|
- app/views/govuk_publishing_components/components/docs/contextual_footer.yml
|
|
626
|
+
- app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
|
|
623
627
|
- app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml
|
|
624
628
|
- app/views/govuk_publishing_components/components/docs/cookie_banner.yml
|
|
625
629
|
- app/views/govuk_publishing_components/components/docs/copy_to_clipboard.yml
|