govuk_publishing_components 43.3.0 → 43.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/icon-autocomplete-search-suggestion.svg +4 -0
  3. data/app/assets/javascripts/govuk_publishing_components/components/search-with-autocomplete.js +123 -0
  4. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +5 -4
  5. data/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss +0 -2
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_search-with-autocomplete.scss +200 -0
  7. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +16 -40
  8. data/app/views/govuk_publishing_components/components/_search.html.erb +16 -14
  9. data/app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb +27 -0
  10. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +0 -41
  11. data/app/views/govuk_publishing_components/components/docs/phase_banner.yml +4 -0
  12. data/app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml +61 -0
  13. data/lib/govuk_publishing_components/version.rb +1 -1
  14. data/node_modules/accessible-autocomplete/CHANGELOG.md +390 -0
  15. data/node_modules/accessible-autocomplete/CODEOWNERS +2 -0
  16. data/node_modules/accessible-autocomplete/CONTRIBUTING.md +161 -0
  17. data/node_modules/accessible-autocomplete/LICENSE.txt +20 -0
  18. data/node_modules/accessible-autocomplete/Procfile +1 -0
  19. data/node_modules/accessible-autocomplete/README.md +490 -0
  20. data/node_modules/accessible-autocomplete/accessibility-criteria.md +42 -0
  21. data/node_modules/accessible-autocomplete/app.json +15 -0
  22. data/node_modules/accessible-autocomplete/babel.config.js +29 -0
  23. data/node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css +3 -0
  24. data/node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css.map +1 -0
  25. data/node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js +2 -0
  26. data/node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js.map +1 -0
  27. data/node_modules/accessible-autocomplete/dist/lib/accessible-autocomplete.preact.min.js +2 -0
  28. data/node_modules/accessible-autocomplete/dist/lib/accessible-autocomplete.preact.min.js.map +1 -0
  29. data/node_modules/accessible-autocomplete/dist/lib/accessible-autocomplete.react.min.js +2 -0
  30. data/node_modules/accessible-autocomplete/dist/lib/accessible-autocomplete.react.min.js.map +1 -0
  31. data/node_modules/accessible-autocomplete/examples/form-single.html +379 -0
  32. data/node_modules/accessible-autocomplete/examples/form.html +673 -0
  33. data/node_modules/accessible-autocomplete/examples/index.html +738 -0
  34. data/node_modules/accessible-autocomplete/examples/preact/index.html +346 -0
  35. data/node_modules/accessible-autocomplete/examples/react/index.html +347 -0
  36. data/node_modules/accessible-autocomplete/package.json +93 -0
  37. data/node_modules/accessible-autocomplete/postcss.config.js +16 -0
  38. data/node_modules/accessible-autocomplete/preact.js +1 -0
  39. data/node_modules/accessible-autocomplete/react.js +1 -0
  40. data/node_modules/accessible-autocomplete/scripts/check-staged.mjs +16 -0
  41. data/node_modules/accessible-autocomplete/src/autocomplete.css +167 -0
  42. data/node_modules/accessible-autocomplete/src/autocomplete.js +608 -0
  43. data/node_modules/accessible-autocomplete/src/dropdown-arrow-down.js +11 -0
  44. data/node_modules/accessible-autocomplete/src/status.js +125 -0
  45. data/node_modules/accessible-autocomplete/src/wrapper.js +60 -0
  46. data/node_modules/accessible-autocomplete/test/functional/dropdown-arrow-down.js +46 -0
  47. data/node_modules/accessible-autocomplete/test/functional/index.js +793 -0
  48. data/node_modules/accessible-autocomplete/test/functional/wrapper.js +339 -0
  49. data/node_modules/accessible-autocomplete/test/integration/index.js +309 -0
  50. data/node_modules/accessible-autocomplete/test/karma.config.js +46 -0
  51. data/node_modules/accessible-autocomplete/test/wdio.config.js +123 -0
  52. data/node_modules/accessible-autocomplete/webpack.config.mjs +244 -0
  53. metadata +46 -2
@@ -0,0 +1,379 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Accessible Autocomplete form example</title>
7
+ <style>
8
+ /* Example page specific styling. */
9
+ html {
10
+ color: #111;
11
+ background: #FFF;
12
+ font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
13
+ font-size: 16px;
14
+ line-height: 1.5;
15
+ }
16
+
17
+ body {
18
+ padding-left: 1rem;
19
+ padding-right: 1rem;
20
+ }
21
+
22
+ h1, h2, h3, h4, h5, h6 {
23
+ line-height: normal;
24
+ }
25
+
26
+ label {
27
+ display: block;
28
+ margin-bottom: .5rem;
29
+ }
30
+
31
+ code {
32
+ padding-left: .5em;
33
+ padding-right: .5em;
34
+ background: #EFEFEF;
35
+ font-weight: normal;
36
+ font-family: monospace;
37
+ }
38
+
39
+ main {
40
+ max-width: 40em;
41
+ margin-left: auto;
42
+ margin-right: auto;
43
+ }
44
+
45
+ .autocomplete-wrapper {
46
+ max-width: 20em;
47
+ margin-bottom: 4rem;
48
+ }
49
+
50
+ .submitted--hidden {
51
+ display: none;
52
+ }
53
+ </style>
54
+ <link rel="stylesheet" href="../dist/accessible-autocomplete.min.css">
55
+ </head>
56
+ <body>
57
+ <main>
58
+ <h1>Accessible Autocomplete form example</h1>
59
+
60
+ <div class="submitted submitted--hidden">
61
+ <p>You submitted:</p>
62
+ <ul>
63
+ <li><code>"last-location": <span class="submitted__last-location"></span></code></li>
64
+ </ul>
65
+ <hr />
66
+ </div>
67
+
68
+ <form action="form-single.html" method="get">
69
+ <label for="last-location">What was the last location you visited?</label>
70
+ <div class="autocomplete-wrapper">
71
+ <select name="last-location" id="last-location">
72
+ <option value="">Select a country</option>
73
+ <option value="territory:AE-AZ">Abu Dhabi</option>
74
+ <option value="country:AF">Afghanistan</option>
75
+ <option value="territory:AE-AJ">Ajman</option>
76
+ <option value="territory:XQZ">Akrotiri</option>
77
+ <option value="country:AL">Albania</option>
78
+ <option value="country:DZ">Algeria</option>
79
+ <option value="territory:AS">American Samoa</option>
80
+ <option value="country:AD">Andorra</option>
81
+ <option value="country:AO">Angola</option>
82
+ <option value="territory:AI">Anguilla</option>
83
+ <option value="territory:AQ">Antarctica</option>
84
+ <option value="country:AG">Antigua and Barbuda</option>
85
+ <option value="country:AR">Argentina</option>
86
+ <option value="country:AM">Armenia</option>
87
+ <option value="territory:AW">Aruba</option>
88
+ <option value="territory:SH-AC">Ascension</option>
89
+ <option value="country:AU">Australia</option>
90
+ <option value="country:AT">Austria</option>
91
+ <option value="country:AZ">Azerbaijan</option>
92
+ <option value="country:BH">Bahrain</option>
93
+ <option value="territory:UM-81">Baker Island</option>
94
+ <option value="country:BD">Bangladesh</option>
95
+ <option value="country:BB">Barbados</option>
96
+ <option value="country:BY">Belarus</option>
97
+ <option value="country:BE">Belgium</option>
98
+ <option value="country:BZ">Belize</option>
99
+ <option value="country:BJ">Benin</option>
100
+ <option value="territory:BM">Bermuda</option>
101
+ <option value="country:BT">Bhutan</option>
102
+ <option value="country:BO">Bolivia</option>
103
+ <option value="territory:BQ-BO">Bonaire</option>
104
+ <option value="country:BA">Bosnia and Herzegovina</option>
105
+ <option value="country:BW">Botswana</option>
106
+ <option value="territory:BV">Bouvet Island</option>
107
+ <option value="country:BR">Brazil</option>
108
+ <option value="territory:BAT">British Antarctic Territory</option>
109
+ <option value="territory:IO">British Indian Ocean Territory</option>
110
+ <option value="territory:VG">British Virgin Islands</option>
111
+ <option value="country:BN">Brunei</option>
112
+ <option value="country:BG">Bulgaria</option>
113
+ <option value="country:BF">Burkina Faso</option>
114
+ <option value="country:MM">Burma</option>
115
+ <option value="country:BI">Burundi</option>
116
+ <option value="country:KH">Cambodia</option>
117
+ <option value="country:CM">Cameroon</option>
118
+ <option value="country:CA">Canada</option>
119
+ <option value="country:CV">Cape Verde</option>
120
+ <option value="territory:KY">Cayman Islands</option>
121
+ <option value="country:CF">Central African Republic</option>
122
+ <option value="territory:ES-CE">Ceuta</option>
123
+ <option value="country:TD">Chad</option>
124
+ <option value="country:CL">Chile</option>
125
+ <option value="country:CN">China</option>
126
+ <option value="territory:CX">Christmas Island</option>
127
+ <option value="territory:CC">Cocos (Keeling) Islands</option>
128
+ <option value="country:CO">Colombia</option>
129
+ <option value="country:KM">Comoros</option>
130
+ <option value="country:CG">Congo</option>
131
+ <option value="country:CD">Congo (Democratic Republic)</option>
132
+ <option value="territory:CK">Cook Islands</option>
133
+ <option value="country:CR">Costa Rica</option>
134
+ <option value="country:HR">Croatia</option>
135
+ <option value="country:CU">Cuba</option>
136
+ <option value="territory:CW">Curaçao</option>
137
+ <option value="country:CY">Cyprus</option>
138
+ <option value="country:CZ">Czechia</option>
139
+ <option value="country:CS">Czechoslovakia</option>
140
+ <option value="country:DK">Denmark</option>
141
+ <option value="territory:XXD">Dhekelia</option>
142
+ <option value="country:DJ">Djibouti</option>
143
+ <option value="country:DM">Dominica</option>
144
+ <option value="country:DO">Dominican Republic</option>
145
+ <option value="territory:AE-DU">Dubai</option>
146
+ <option value="country:DD">East Germany</option>
147
+ <option value="country:TL">East Timor</option>
148
+ <option value="country:EC">Ecuador</option>
149
+ <option value="country:EG">Egypt</option>
150
+ <option value="country:SV">El Salvador</option>
151
+ <option value="country:GQ">Equatorial Guinea</option>
152
+ <option value="country:ER">Eritrea</option>
153
+ <option value="country:EE">Estonia</option>
154
+ <option value="country:ET">Ethiopia</option>
155
+ <option value="territory:FK">Falkland Islands</option>
156
+ <option value="territory:FO">Faroe Islands</option>
157
+ <option value="country:FJ">Fiji</option>
158
+ <option value="country:FI">Finland</option>
159
+ <option value="country:FR">France</option>
160
+ <option value="territory:GF">French Guiana</option>
161
+ <option value="territory:PF">French Polynesia</option>
162
+ <option value="territory:TF">French Southern Territories</option>
163
+ <option value="territory:AE-FU">Fujairah</option>
164
+ <option value="country:GA">Gabon</option>
165
+ <option value="country:GE">Georgia</option>
166
+ <option value="country:DE">Germany</option>
167
+ <option value="country:GH">Ghana</option>
168
+ <option value="territory:GI">Gibraltar</option>
169
+ <option value="country:GR">Greece</option>
170
+ <option value="territory:GL">Greenland</option>
171
+ <option value="country:GD">Grenada</option>
172
+ <option value="territory:GP">Guadeloupe</option>
173
+ <option value="territory:GU">Guam</option>
174
+ <option value="country:GT">Guatemala</option>
175
+ <option value="territory:GG">Guernsey</option>
176
+ <option value="country:GN">Guinea</option>
177
+ <option value="country:GW">Guinea-Bissau</option>
178
+ <option value="country:GY">Guyana</option>
179
+ <option value="country:HT">Haiti</option>
180
+ <option value="territory:HM">Heard Island and McDonald Islands</option>
181
+ <option value="country:HN">Honduras</option>
182
+ <option value="territory:HK">Hong Kong</option>
183
+ <option value="territory:UM-84">Howland Island</option>
184
+ <option value="country:HU">Hungary</option>
185
+ <option value="country:IS">Iceland</option>
186
+ <option value="country:IN">India</option>
187
+ <option value="country:ID">Indonesia</option>
188
+ <option value="country:IR">Iran</option>
189
+ <option value="country:IQ">Iraq</option>
190
+ <option value="country:IE">Ireland</option>
191
+ <option value="territory:IM">Isle of Man</option>
192
+ <option value="country:IL">Israel</option>
193
+ <option value="country:IT">Italy</option>
194
+ <option value="country:CI">Ivory Coast</option>
195
+ <option value="country:JM">Jamaica</option>
196
+ <option value="country:JP">Japan</option>
197
+ <option value="territory:UM-86">Jarvis Island</option>
198
+ <option value="territory:JE">Jersey</option>
199
+ <option value="territory:UM-67">Johnston Atoll</option>
200
+ <option value="country:JO">Jordan</option>
201
+ <option value="country:KZ">Kazakhstan</option>
202
+ <option value="country:KE">Kenya</option>
203
+ <option value="territory:UM-89">Kingman Reef</option>
204
+ <option value="country:KI">Kiribati</option>
205
+ <option value="country:XK">Kosovo</option>
206
+ <option value="country:KW">Kuwait</option>
207
+ <option value="country:KG">Kyrgyzstan</option>
208
+ <option value="country:LA">Laos</option>
209
+ <option value="country:LV">Latvia</option>
210
+ <option value="country:LB">Lebanon</option>
211
+ <option value="country:LS">Lesotho</option>
212
+ <option value="country:LR">Liberia</option>
213
+ <option value="country:LY">Libya</option>
214
+ <option value="country:LI">Liechtenstein</option>
215
+ <option value="country:LT">Lithuania</option>
216
+ <option value="country:LU">Luxembourg</option>
217
+ <option value="territory:MO">Macao</option>
218
+ <option value="country:MK">Macedonia</option>
219
+ <option value="country:MG">Madagascar</option>
220
+ <option value="country:MW">Malawi</option>
221
+ <option value="country:MY">Malaysia</option>
222
+ <option value="country:MV">Maldives</option>
223
+ <option value="country:ML">Mali</option>
224
+ <option value="country:MT">Malta</option>
225
+ <option value="country:MH">Marshall Islands</option>
226
+ <option value="territory:MQ">Martinique</option>
227
+ <option value="country:MR">Mauritania</option>
228
+ <option value="country:MU">Mauritius</option>
229
+ <option value="territory:YT">Mayotte</option>
230
+ <option value="territory:ES-ML">Melilla</option>
231
+ <option value="country:MX">Mexico</option>
232
+ <option value="country:FM">Micronesia</option>
233
+ <option value="territory:UM-71">Midway Islands</option>
234
+ <option value="country:MD">Moldova</option>
235
+ <option value="country:MC">Monaco</option>
236
+ <option value="country:MN">Mongolia</option>
237
+ <option value="country:ME">Montenegro</option>
238
+ <option value="territory:MS">Montserrat</option>
239
+ <option value="country:MA">Morocco</option>
240
+ <option value="country:MZ">Mozambique</option>
241
+ <option value="country:NA">Namibia</option>
242
+ <option value="country:NR">Nauru</option>
243
+ <option value="territory:UM-76">Navassa Island</option>
244
+ <option value="country:NP">Nepal</option>
245
+ <option value="country:NL">Netherlands</option>
246
+ <option value="territory:NC">New Caledonia</option>
247
+ <option value="country:NZ">New Zealand</option>
248
+ <option value="country:NI">Nicaragua</option>
249
+ <option value="country:NE">Niger</option>
250
+ <option value="country:NG">Nigeria</option>
251
+ <option value="territory:NU">Niue</option>
252
+ <option value="territory:NF">Norfolk Island</option>
253
+ <option value="country:KP">North Korea</option>
254
+ <option value="territory:MP">Northern Mariana Islands</option>
255
+ <option value="country:NO">Norway</option>
256
+ <option value="territory:PS">Occupied Palestinian Territories</option>
257
+ <option value="country:OM">Oman</option>
258
+ <option value="country:PK">Pakistan</option>
259
+ <option value="country:PW">Palau</option>
260
+ <option value="territory:UM-95">Palmyra Atoll</option>
261
+ <option value="country:PA">Panama</option>
262
+ <option value="country:PG">Papua New Guinea</option>
263
+ <option value="country:PY">Paraguay</option>
264
+ <option value="country:PE">Peru</option>
265
+ <option value="country:PH">Philippines</option>
266
+ <option value="territory:PN">Pitcairn, Henderson, Ducie and Oeno Islands</option>
267
+ <option value="country:PL">Poland</option>
268
+ <option value="country:PT">Portugal</option>
269
+ <option value="territory:PR">Puerto Rico</option>
270
+ <option value="country:QA">Qatar</option>
271
+ <option value="territory:AE-RK">Ras al-Khaimah</option>
272
+ <option value="country:RO">Romania</option>
273
+ <option value="country:RU">Russia</option>
274
+ <option value="country:RW">Rwanda</option>
275
+ <option value="territory:RE">Réunion</option>
276
+ <option value="territory:BQ-SA">Saba</option>
277
+ <option value="territory:BL">Saint Barthélemy</option>
278
+ <option value="territory:SH-HL">Saint Helena</option>
279
+ <option value="territory:PM">Saint Pierre and Miquelon</option>
280
+ <option value="territory:MF">Saint-Martin (French part)</option>
281
+ <option value="country:WS">Samoa</option>
282
+ <option value="country:SM">San Marino</option>
283
+ <option value="country:ST">Sao Tome and Principe</option>
284
+ <option value="country:SA">Saudi Arabia</option>
285
+ <option value="country:SN">Senegal</option>
286
+ <option value="country:RS">Serbia</option>
287
+ <option value="country:SC">Seychelles</option>
288
+ <option value="territory:AE-SH">Sharjah</option>
289
+ <option value="country:SL">Sierra Leone</option>
290
+ <option value="country:SG">Singapore</option>
291
+ <option value="territory:BQ-SE">Sint Eustatius</option>
292
+ <option value="territory:SX">Sint Maarten (Dutch part)</option>
293
+ <option value="country:SK">Slovakia</option>
294
+ <option value="country:SI">Slovenia</option>
295
+ <option value="country:SB">Solomon Islands</option>
296
+ <option value="country:SO">Somalia</option>
297
+ <option value="country:ZA">South Africa</option>
298
+ <option value="territory:GS">South Georgia and South Sandwich Islands</option>
299
+ <option value="country:KR">South Korea</option>
300
+ <option value="country:SS">South Sudan</option>
301
+ <option value="country:ES">Spain</option>
302
+ <option value="country:LK">Sri Lanka</option>
303
+ <option value="country:KN">St Kitts and Nevis</option>
304
+ <option value="country:LC">St Lucia</option>
305
+ <option value="country:VC">St Vincent</option>
306
+ <option value="country:SD">Sudan</option>
307
+ <option value="country:SR">Suriname</option>
308
+ <option value="territory:SJ">Svalbard and Jan Mayen</option>
309
+ <option value="country:SZ">Swaziland</option>
310
+ <option value="country:SE">Sweden</option>
311
+ <option value="country:CH">Switzerland</option>
312
+ <option value="country:SY">Syria</option>
313
+ <option value="territory:TW">Taiwan</option>
314
+ <option value="country:TJ">Tajikistan</option>
315
+ <option value="country:TZ">Tanzania</option>
316
+ <option value="country:TH">Thailand</option>
317
+ <option value="country:BS">The Bahamas</option>
318
+ <option value="country:GM">The Gambia</option>
319
+ <option value="country:TG">Togo</option>
320
+ <option value="territory:TK">Tokelau</option>
321
+ <option value="country:TO">Tonga</option>
322
+ <option value="country:TT">Trinidad and Tobago</option>
323
+ <option value="territory:SH-TA">Tristan da Cunha</option>
324
+ <option value="country:TN">Tunisia</option>
325
+ <option value="country:TR">Turkey</option>
326
+ <option value="country:TM">Turkmenistan</option>
327
+ <option value="territory:TC">Turks and Caicos Islands</option>
328
+ <option value="country:TV">Tuvalu</option>
329
+ <option value="country:SU">USSR</option>
330
+ <option value="country:UG">Uganda</option>
331
+ <option value="country:UA">Ukraine</option>
332
+ <option value="territory:AE-UQ">Umm al-Quwain</option>
333
+ <option value="country:AE">United Arab Emirates</option>
334
+ <option value="country:GB">United Kingdom</option>
335
+ <option value="country:US">United States</option>
336
+ <option value="territory:VI">United States Virgin Islands</option>
337
+ <option value="country:UY">Uruguay</option>
338
+ <option value="country:UZ">Uzbekistan</option>
339
+ <option value="country:VU">Vanuatu</option>
340
+ <option value="country:VA">Vatican City</option>
341
+ <option value="country:VE">Venezuela</option>
342
+ <option value="country:VN">Vietnam</option>
343
+ <option value="territory:UM-79">Wake Island</option>
344
+ <option value="territory:WF">Wallis and Futuna</option>
345
+ <option value="territory:EH">Western Sahara</option>
346
+ <option value="country:YE">Yemen</option>
347
+ <option value="country:YU">Yugoslavia</option>
348
+ <option value="country:ZM">Zambia</option>
349
+ <option value="country:ZW">Zimbabwe</option>
350
+ <option value="territory:AX">Åland Islands</option>
351
+ </select>
352
+ </div>
353
+
354
+ <button type="submit">Submit your answer</button>
355
+ </form>
356
+ </main>
357
+
358
+ <script type="text/javascript" src="../dist/accessible-autocomplete.min.js"></script>
359
+ <script type="text/javascript">
360
+ var selectEl = document.querySelector('#last-location')
361
+ accessibleAutocomplete.enhanceSelectElement({
362
+ autoselect: true,
363
+ confirmOnBlur: true,
364
+ defaultValue: "",
365
+ minLength: 2,
366
+ selectElement: selectEl
367
+ })
368
+
369
+ var queryStringParameters = window.location.search
370
+ var previouslySubmitted = queryStringParameters.length > 0
371
+ if (previouslySubmitted) {
372
+ var submittedEl = document.querySelector('.submitted')
373
+ submittedEl.classList.remove('submitted--hidden')
374
+ var params = new URLSearchParams(document.location.search.split('?')[1])
375
+ document.querySelector('.submitted__last-location').innerHTML = params.get('last-location')
376
+ }
377
+ </script>
378
+ </body>
379
+ </html>