govuk_publishing_components 21.4.1 → 21.5.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/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
|