govuk_publishing_components 6.3.0 → 6.4.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/images/govuk_publishing_components/search-button.png +0 -0
- data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js +36 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +182 -0
- data/app/views/govuk_publishing_components/components/_search.html.erb +24 -0
- data/app/views/govuk_publishing_components/components/docs/search.yml +40 -0
- data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml +2 -0
- data/config/initializers/assets.rb +1 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 93f509e545e321d18c1ffbc1107cdb70dd011ee1dba8c5619759a7aa472a2db7
|
|
4
|
+
data.tar.gz: ed7ef2fec6f995d6a04b599c9c813f323d1768ceff04823a3e4451d4ee764c81
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 87d4fa9ae3d5e51598a46d656317e6c8211df10716f1d03a7916a32ee763e2c961ce54ee82e8c142db7fedb453c067a357905aa27e8daadaf804b7731cd6ae16
|
|
7
|
+
data.tar.gz: b655caa3d93a9599c20a26e3519434e02db51fc2e1110b760c2d3d770917efa0a443b7d23660c9e9b867dd4b9ac2f034b03bda3d562b6a91b77aa67ee07bfecc
|
|
Binary file
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Toggle the class 'focus' on input boxes on element focus/blur
|
|
3
|
+
Used by the search component but generic enough for reuse
|
|
4
|
+
*/
|
|
5
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
6
|
+
|
|
7
|
+
(function (Modules) {
|
|
8
|
+
'use strict'
|
|
9
|
+
|
|
10
|
+
Modules.GemToggleInputClassOnFocus = function () {
|
|
11
|
+
this.start = function ($el) {
|
|
12
|
+
var $toggleTarget = $el.find('.js-class-toggle');
|
|
13
|
+
|
|
14
|
+
if(!inputIsEmpty()) {
|
|
15
|
+
addFocusClass();
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
$toggleTarget.on('focus', addFocusClass);
|
|
19
|
+
$toggleTarget.on('blur', removeFocusClassFromEmptyInput);
|
|
20
|
+
|
|
21
|
+
function inputIsEmpty() {
|
|
22
|
+
return $toggleTarget.val() === '';
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function addFocusClass() {
|
|
26
|
+
$toggleTarget.addClass('focus');
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function removeFocusClassFromEmptyInput() {
|
|
30
|
+
if(inputIsEmpty()) {
|
|
31
|
+
$toggleTarget.removeClass('focus');
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
})(window.GOVUK.Modules)
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
@import "components/label";
|
|
16
16
|
@import "components/radio";
|
|
17
17
|
@import "components/related-navigation";
|
|
18
|
+
@import "components/search";
|
|
18
19
|
@import "components/step-by-step-nav";
|
|
19
20
|
@import "components/step-by-step-nav-header";
|
|
20
21
|
@import "components/step-by-step-nav-related";
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
$input-size: 40px;
|
|
2
|
+
$large-input-size: 50px;
|
|
3
|
+
|
|
4
|
+
.gem-c-search {
|
|
5
|
+
position: relative;
|
|
6
|
+
margin-bottom: 30px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.gem-c-search__label {
|
|
10
|
+
display: block;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
|
|
14
|
+
@include box-sizing(border-box);
|
|
15
|
+
@include core-19($line-height: (28 / 19), $line-height-640: (28 / 16));
|
|
16
|
+
@include appearance(none);
|
|
17
|
+
|
|
18
|
+
padding: 6px;
|
|
19
|
+
margin: 0.5em 0;
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: $input-size;
|
|
22
|
+
border: 0;
|
|
23
|
+
background: $white;
|
|
24
|
+
border-radius: 0; //otherwise iphones apply an automatic border radius
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.gem-c-search__submit {
|
|
28
|
+
padding: 6px;
|
|
29
|
+
border: 0;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
border-radius: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// IE6 + IE7 always get the simplest version, regardless of whether javascript is enabled
|
|
35
|
+
@if ($is-ie == false) or ($ie-version >= 8) {
|
|
36
|
+
.js-enabled {
|
|
37
|
+
.gem-c-search__label {
|
|
38
|
+
@include core-19($line-height: $input-size, $line-height-640: $input-size);
|
|
39
|
+
|
|
40
|
+
position: absolute;
|
|
41
|
+
left: 15px;
|
|
42
|
+
top: 1px;
|
|
43
|
+
z-index: 1;
|
|
44
|
+
color: $secondary-text-colour;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.gem-c-search__item-wrapper {
|
|
49
|
+
display: table;
|
|
50
|
+
width: 100%;
|
|
51
|
+
background: $white;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
//general class applied to search input and button wrapper
|
|
55
|
+
.gem-c-search__item {
|
|
56
|
+
position: relative;
|
|
57
|
+
display: table-cell;
|
|
58
|
+
vertical-align: top;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.gem-c-search__input[type="search"] {
|
|
62
|
+
margin: 0;
|
|
63
|
+
|
|
64
|
+
// the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in
|
|
65
|
+
&:focus,
|
|
66
|
+
&.focus {
|
|
67
|
+
z-index: 2;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.gem-c-search__submit-wrapper {
|
|
72
|
+
width: 1%;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.gem-c-search__submit {
|
|
76
|
+
position: relative;
|
|
77
|
+
padding: 0;
|
|
78
|
+
width: $input-size;
|
|
79
|
+
height: $input-size;
|
|
80
|
+
background-image: image-url("govuk_publishing_components/search-button.png");
|
|
81
|
+
background-repeat: no-repeat;
|
|
82
|
+
background-position: 2px 50%;
|
|
83
|
+
text-indent: -5000px;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
|
|
86
|
+
&:focus {
|
|
87
|
+
z-index: 2;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&::-moz-focus-inner {
|
|
91
|
+
border: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@include device-pixel-ratio() {
|
|
95
|
+
background-size: 52.5px auto;
|
|
96
|
+
background-position: 115% 50%;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.gem-c-search--on-govuk-blue {
|
|
102
|
+
.gem-c-search__label {
|
|
103
|
+
color: $white;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.gem-c-search__submit {
|
|
107
|
+
background-color: $black;
|
|
108
|
+
color: $white;
|
|
109
|
+
|
|
110
|
+
&:hover {
|
|
111
|
+
background-color: lighten($black, 5%);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@if ($is-ie == false) or ($ie-version >= 8) {
|
|
116
|
+
.js-enabled & {
|
|
117
|
+
.gem-c-search__label {
|
|
118
|
+
color: $secondary-text-colour;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
.gem-c-search--on-white {
|
|
126
|
+
.gem-c-search__label {
|
|
127
|
+
color: $black;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.gem-c-search__input[type="search"] {
|
|
131
|
+
border: solid 1px $grey-2;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.gem-c-search__submit {
|
|
135
|
+
background-color: $light-blue;
|
|
136
|
+
color: $white;
|
|
137
|
+
|
|
138
|
+
&:hover {
|
|
139
|
+
background-color: lighten($light-blue, 5%);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@if ($is-ie == false) or ($ie-version >= 8) {
|
|
144
|
+
.gem-c-search__input[type="search"] {
|
|
145
|
+
border-right: 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.js-enabled & {
|
|
149
|
+
.gem-c-search__label {
|
|
150
|
+
color: $secondary-text-colour;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.gem-c-search--large {
|
|
157
|
+
.gem-c-search__label {
|
|
158
|
+
@include core-19($line-height: $large-input-size, $line-height-640: $large-input-size);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.gem-c-search__input[type="search"] {
|
|
162
|
+
height: $large-input-size;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.gem-c-search__submit {
|
|
166
|
+
width: $large-input-size;
|
|
167
|
+
height: $large-input-size;
|
|
168
|
+
background-position: 8px 50%;
|
|
169
|
+
|
|
170
|
+
@include device-pixel-ratio() {
|
|
171
|
+
background-size: 60px auto;
|
|
172
|
+
background-position: 160% 50%;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.gem-c-search--separate-label {
|
|
178
|
+
.gem-c-search__label {
|
|
179
|
+
position: relative;
|
|
180
|
+
left: auto;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<%
|
|
2
|
+
class_name = "gem-c-search--on-white"
|
|
3
|
+
class_name = "gem-c-search--on-govuk-blue" if local_assigns.include?(:on_govuk_blue)
|
|
4
|
+
size ||= ""
|
|
5
|
+
class_name = "#{class_name} gem-c-search--large" if size == 'large'
|
|
6
|
+
class_name = "#{class_name} gem-c-search--separate-label" if local_assigns.include?(:inline_label)
|
|
7
|
+
|
|
8
|
+
value ||= ""
|
|
9
|
+
id ||= "search-main-" + SecureRandom.hex(4)
|
|
10
|
+
label_text ||= "Search GOV.UK"
|
|
11
|
+
label_text = "#{label_text}".html_safe
|
|
12
|
+
%>
|
|
13
|
+
|
|
14
|
+
<div class="gem-c-search <%= class_name %>" data-module="gem-toggle-input-class-on-focus">
|
|
15
|
+
<label for="<%= id %>" class="gem-c-search__label">
|
|
16
|
+
<%= label_text %>
|
|
17
|
+
</label>
|
|
18
|
+
<div class="gem-c-search__item-wrapper">
|
|
19
|
+
<input type="search" value="<%= value %>" id="<%= id %>" name="q" title="Search" class="gem-c-search__item gem-c-search__input js-class-toggle">
|
|
20
|
+
<div class="gem-c-search__item gem-c-search__submit-wrapper">
|
|
21
|
+
<button type="submit" class="gem-c-search__submit">Search</button>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
name: "Search"
|
|
2
|
+
description: "Search box"
|
|
3
|
+
body: |
|
|
4
|
+
A search box with label and attached submit button. The component must be used within an HTML form.
|
|
5
|
+
The search input has a name="q" attribute and a customisable ID.
|
|
6
|
+
|
|
7
|
+
It can be used on white or on govuk-blue using the on_govuk_blue option.
|
|
8
|
+
|
|
9
|
+
Markup such as heading tags can be included in the label using the label_text option. Styling is not included in the component for heading tags in labels, however this is what the search results page does.
|
|
10
|
+
accessibility_criteria: |
|
|
11
|
+
The search box should:
|
|
12
|
+
|
|
13
|
+
- be used inside a form with the role of 'search', to indicate it as a [search landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_search)
|
|
14
|
+
- have a clear label to identify the search functionality, which is visible to all users
|
|
15
|
+
|
|
16
|
+
examples:
|
|
17
|
+
default:
|
|
18
|
+
data: {}
|
|
19
|
+
apply_custom_styling_to_the_label_and_set_search_value:
|
|
20
|
+
data:
|
|
21
|
+
inline_label: false
|
|
22
|
+
label_text: "<h1>Search GOV.UK</h1>"
|
|
23
|
+
value: "driving licence"
|
|
24
|
+
stop_the_label_appearing_inline:
|
|
25
|
+
data:
|
|
26
|
+
inline_label: false
|
|
27
|
+
for_use_on_govuk_blue_background:
|
|
28
|
+
data:
|
|
29
|
+
on_govuk_blue: true
|
|
30
|
+
context:
|
|
31
|
+
dark_background: true
|
|
32
|
+
change_label_text:
|
|
33
|
+
data:
|
|
34
|
+
label_text: "Search"
|
|
35
|
+
set_id_for_search_input:
|
|
36
|
+
data:
|
|
37
|
+
id: "my_unique_id"
|
|
38
|
+
large_version:
|
|
39
|
+
data:
|
|
40
|
+
size: "large"
|
|
@@ -9,6 +9,8 @@ body: |
|
|
|
9
9
|
|
|
10
10
|
- step by step navigations are needed throughout GOV.UK and extending the accordion to be this component would require it to be moved out of that application, which would break integration testing
|
|
11
11
|
- creating a new component allows further iteration without impacting the accordion
|
|
12
|
+
|
|
13
|
+
Background information relating to the testing and research behind this component can be found on the [Modelling Services wiki](https://gov-uk.atlassian.net/wiki/spaces/MS/pages) in Q2 to Q4, 2017/18.
|
|
12
14
|
accessibility_criteria: |
|
|
13
15
|
The step by step navigation must:
|
|
14
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Rails.application.config.assets.precompile += %w(govuk_publishing_components/component_guide.css)
|
|
1
|
+
Rails.application.config.assets.precompile += %w(govuk_publishing_components/component_guide.css govuk_publishing_components/search-button.png)
|
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: 6.
|
|
4
|
+
version: 6.4.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: 2018-04-
|
|
11
|
+
date: 2018-04-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|
|
@@ -301,6 +301,7 @@ files:
|
|
|
301
301
|
- README.md
|
|
302
302
|
- Rakefile
|
|
303
303
|
- app/assets/config/govuk_publishing_components_manifest.js
|
|
304
|
+
- app/assets/images/govuk_publishing_components/search-button.png
|
|
304
305
|
- app/assets/javascripts/component_guide/accessibility-test.js
|
|
305
306
|
- app/assets/javascripts/component_guide/application.js
|
|
306
307
|
- app/assets/javascripts/component_guide/vendor/axe.min.js
|
|
@@ -313,6 +314,7 @@ files:
|
|
|
313
314
|
- app/assets/javascripts/govuk_publishing_components/components/success-alert.js
|
|
314
315
|
- app/assets/javascripts/govuk_publishing_components/lib/current-location.js
|
|
315
316
|
- app/assets/javascripts/govuk_publishing_components/lib/history-support.js
|
|
317
|
+
- app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js
|
|
316
318
|
- app/assets/stylesheets/component_guide/application.scss
|
|
317
319
|
- app/assets/stylesheets/govuk_publishing_components/_all_components.scss
|
|
318
320
|
- app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss
|
|
@@ -326,6 +328,7 @@ files:
|
|
|
326
328
|
- app/assets/stylesheets/govuk_publishing_components/components/_label.scss
|
|
327
329
|
- app/assets/stylesheets/govuk_publishing_components/components/_radio.scss
|
|
328
330
|
- app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss
|
|
331
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_search.scss
|
|
329
332
|
- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss
|
|
330
333
|
- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
|
|
331
334
|
- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
|
|
@@ -363,6 +366,7 @@ files:
|
|
|
363
366
|
- app/views/govuk_publishing_components/components/_label.html.erb
|
|
364
367
|
- app/views/govuk_publishing_components/components/_radio.html.erb
|
|
365
368
|
- app/views/govuk_publishing_components/components/_related_navigation.html.erb
|
|
369
|
+
- app/views/govuk_publishing_components/components/_search.html.erb
|
|
366
370
|
- app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
|
|
367
371
|
- app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
|
|
368
372
|
- app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
|
|
@@ -380,6 +384,7 @@ files:
|
|
|
380
384
|
- app/views/govuk_publishing_components/components/docs/label.yml
|
|
381
385
|
- app/views/govuk_publishing_components/components/docs/radio.yml
|
|
382
386
|
- app/views/govuk_publishing_components/components/docs/related_navigation.yml
|
|
387
|
+
- app/views/govuk_publishing_components/components/docs/search.yml
|
|
383
388
|
- app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
|
|
384
389
|
- app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml
|
|
385
390
|
- app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml
|