govuk_publishing_components 12.0.0 → 12.0.1

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.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +1 -0
  3. data/lib/govuk_publishing_components/version.rb +1 -1
  4. data/node_modules/govuk-frontend/all.js +188 -0
  5. data/node_modules/govuk-frontend/components/_all.scss +1 -0
  6. data/node_modules/govuk-frontend/components/back-link/README.md +12 -12
  7. data/node_modules/govuk-frontend/components/breadcrumbs/README.md +18 -18
  8. data/node_modules/govuk-frontend/components/button/README.md +30 -30
  9. data/node_modules/govuk-frontend/components/button/template.njk +1 -1
  10. data/node_modules/govuk-frontend/components/character-count/README.md +497 -0
  11. data/node_modules/govuk-frontend/components/character-count/_character-count.scss +31 -0
  12. data/node_modules/govuk-frontend/components/character-count/character-count.js +1201 -0
  13. data/node_modules/govuk-frontend/components/character-count/macro-options.json +83 -0
  14. data/node_modules/govuk-frontend/components/character-count/macro.njk +3 -0
  15. data/node_modules/govuk-frontend/components/character-count/template.njk +32 -0
  16. data/node_modules/govuk-frontend/components/checkboxes/README.md +57 -57
  17. data/node_modules/govuk-frontend/components/date-input/README.md +36 -36
  18. data/node_modules/govuk-frontend/components/details/README.md +18 -18
  19. data/node_modules/govuk-frontend/components/error-message/README.md +12 -12
  20. data/node_modules/govuk-frontend/components/error-summary/README.md +24 -24
  21. data/node_modules/govuk-frontend/components/fieldset/README.md +21 -21
  22. data/node_modules/govuk-frontend/components/file-upload/README.md +24 -24
  23. data/node_modules/govuk-frontend/components/footer/README.md +51 -51
  24. data/node_modules/govuk-frontend/components/header/README.md +42 -42
  25. data/node_modules/govuk-frontend/components/header/_header.scss +2 -0
  26. data/node_modules/govuk-frontend/components/hint/README.md +12 -12
  27. data/node_modules/govuk-frontend/components/input/README.md +27 -27
  28. data/node_modules/govuk-frontend/components/inset-text/README.md +12 -12
  29. data/node_modules/govuk-frontend/components/label/README.md +15 -15
  30. data/node_modules/govuk-frontend/components/panel/README.md +15 -15
  31. data/node_modules/govuk-frontend/components/phase-banner/README.md +12 -12
  32. data/node_modules/govuk-frontend/components/radios/README.md +60 -60
  33. data/node_modules/govuk-frontend/components/radios/_radios.scss +1 -0
  34. data/node_modules/govuk-frontend/components/select/README.md +39 -39
  35. data/node_modules/govuk-frontend/components/select/_select.scss +1 -1
  36. data/node_modules/govuk-frontend/components/skip-link/README.md +12 -12
  37. data/node_modules/govuk-frontend/components/table/README.md +45 -45
  38. data/node_modules/govuk-frontend/components/table/macro-options.json +12 -0
  39. data/node_modules/govuk-frontend/components/table/template.njk +7 -3
  40. data/node_modules/govuk-frontend/components/tabs/README.md +30 -30
  41. data/node_modules/govuk-frontend/components/tag/README.md +9 -9
  42. data/node_modules/govuk-frontend/components/textarea/README.md +30 -30
  43. data/node_modules/govuk-frontend/components/warning-text/README.md +12 -12
  44. data/node_modules/govuk-frontend/package.json +11 -11
  45. metadata +8 -2
@@ -21,7 +21,7 @@
21
21
  {#- Actually create a button... or a link! #}
22
22
 
23
23
  {%- if element == 'a' %}
24
- <a href="{{ params.href if params.href else '#' }}" role="button" {{- commonAttributes | safe }}>
24
+ <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
25
25
  {{ params.html | safe if params.html else params.text }}
26
26
  </a>
27
27
 
@@ -0,0 +1,497 @@
1
+ # Character count
2
+
3
+ ## Introduction
4
+
5
+ Help users enter text within a limited number of characters
6
+
7
+ ## Guidance
8
+
9
+ Find out when to use the character count component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/character-count).
10
+
11
+ ## Quick start examples
12
+
13
+ ### Character count
14
+
15
+ [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/preview)
16
+
17
+ #### Markup
18
+
19
+ <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
20
+
21
+ <div class="govuk-form-group">
22
+ <label class="govuk-label" for="more-detail">
23
+ Can you provide more detail?
24
+ </label>
25
+
26
+ <textarea class="govuk-textarea js-character-count " id="more-detail" name="more-detail" rows="5"></textarea>
27
+ </div>
28
+
29
+ <span id="more-detail-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
30
+ You can enter up to 10 characters
31
+ </span>
32
+ </div>
33
+
34
+ #### Macro
35
+
36
+ {% from "character-count/macro.njk" import govukCharacterCount %}
37
+
38
+ {{ govukCharacterCount({
39
+ "name": "more-detail",
40
+ "id": "more-detail",
41
+ "maxlength": 10,
42
+ "label": {
43
+ "text": "Can you provide more detail?"
44
+ }
45
+ }) }}
46
+
47
+ ### Character count with hint
48
+
49
+ [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-hint/preview)
50
+
51
+ #### Markup
52
+
53
+ <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
54
+
55
+ <div class="govuk-form-group">
56
+ <label class="govuk-label" for="with-hint">
57
+ Can you provide more detail?
58
+ </label>
59
+
60
+ <span id="with-hint-hint" class="govuk-hint">
61
+ Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
62
+ </span>
63
+
64
+ <textarea class="govuk-textarea js-character-count " id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-hint"></textarea>
65
+ </div>
66
+
67
+ <span id="with-hint-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
68
+ You can enter up to 10 characters
69
+ </span>
70
+ </div>
71
+
72
+ #### Macro
73
+
74
+ {% from "character-count/macro.njk" import govukCharacterCount %}
75
+
76
+ {{ govukCharacterCount({
77
+ "name": "with-hint",
78
+ "id": "with-hint",
79
+ "maxlength": 10,
80
+ "label": {
81
+ "text": "Can you provide more detail?"
82
+ },
83
+ "hint": {
84
+ "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
85
+ }
86
+ }) }}
87
+
88
+ ### Character count with default value
89
+
90
+ [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-default-value/preview)
91
+
92
+ #### Markup
93
+
94
+ <div class="govuk-character-count" data-module="character-count" data-maxlength="100">
95
+
96
+ <div class="govuk-form-group">
97
+ <label class="govuk-label" for="with-default-value">
98
+ Full address
99
+ </label>
100
+
101
+ <textarea class="govuk-textarea js-character-count " id="with-default-value" name="default-value" rows="5">221B Baker Street
102
+ London
103
+ NW1 6XE
104
+ </textarea>
105
+ </div>
106
+
107
+ <span id="with-default-value-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
108
+ You can enter up to 100 characters
109
+ </span>
110
+ </div>
111
+
112
+ #### Macro
113
+
114
+ {% from "character-count/macro.njk" import govukCharacterCount %}
115
+
116
+ {{ govukCharacterCount({
117
+ "id": "with-default-value",
118
+ "name": "default-value",
119
+ "maxlength": 100,
120
+ "label": {
121
+ "text": "Full address"
122
+ },
123
+ "value": "221B Baker Street\nLondon\nNW1 6XE\n"
124
+ }) }}
125
+
126
+ ### Character count with default value exceeding limit
127
+
128
+ [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-default-value-exceeding-limit/preview)
129
+
130
+ #### Markup
131
+
132
+ <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
133
+
134
+ <div class="govuk-form-group govuk-form-group--error">
135
+ <label class="govuk-label" for="exceeding-characters">
136
+ Full address
137
+ </label>
138
+
139
+ <span id="exceeding-characters-error" class="govuk-error-message">
140
+ Please do not exceed the maximum allowed limit
141
+ </span>
142
+
143
+ <textarea class="govuk-textarea govuk-textarea--error js-character-count govuk-textarea--error" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-error">221B Baker Street
144
+ London
145
+ NW1 6XE
146
+ </textarea>
147
+ </div>
148
+
149
+ <span id="exceeding-characters-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
150
+ You can enter up to 10 characters
151
+ </span>
152
+ </div>
153
+
154
+ #### Macro
155
+
156
+ {% from "character-count/macro.njk" import govukCharacterCount %}
157
+
158
+ {{ govukCharacterCount({
159
+ "id": "exceeding-characters",
160
+ "name": "exceeding",
161
+ "maxlength": 10,
162
+ "value": "221B Baker Street\nLondon\nNW1 6XE\n",
163
+ "label": {
164
+ "text": "Full address"
165
+ },
166
+ "errorMessage": {
167
+ "text": "Please do not exceed the maximum allowed limit"
168
+ }
169
+ }) }}
170
+
171
+ ### Character count with custom rows
172
+
173
+ [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-custom-rows/preview)
174
+
175
+ #### Markup
176
+
177
+ <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
178
+
179
+ <div class="govuk-form-group">
180
+ <label class="govuk-label" for="custom-rows">
181
+ Full address
182
+ </label>
183
+
184
+ <textarea class="govuk-textarea js-character-count " id="custom-rows" name="custom" rows="8"></textarea>
185
+ </div>
186
+
187
+ <span id="custom-rows-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
188
+ You can enter up to 10 characters
189
+ </span>
190
+ </div>
191
+
192
+ #### Macro
193
+
194
+ {% from "character-count/macro.njk" import govukCharacterCount %}
195
+
196
+ {{ govukCharacterCount({
197
+ "id": "custom-rows",
198
+ "name": "custom",
199
+ "maxlength": 10,
200
+ "label": {
201
+ "text": "Full address"
202
+ },
203
+ "rows": 8
204
+ }) }}
205
+
206
+ ### Character count with label as page heading
207
+
208
+ [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-label-as-page-heading/preview)
209
+
210
+ #### Markup
211
+
212
+ <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
213
+
214
+ <div class="govuk-form-group">
215
+ <h1 class="govuk-label-wrapper">
216
+ <label class="govuk-label" for="textarea-with-page-heading">
217
+ Full address
218
+ </label>
219
+
220
+ </h1>
221
+
222
+ <textarea class="govuk-textarea js-character-count " id="textarea-with-page-heading" name="address" rows="5"></textarea>
223
+ </div>
224
+
225
+ <span id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
226
+ You can enter up to 10 characters
227
+ </span>
228
+ </div>
229
+
230
+ #### Macro
231
+
232
+ {% from "character-count/macro.njk" import govukCharacterCount %}
233
+
234
+ {{ govukCharacterCount({
235
+ "id": "textarea-with-page-heading",
236
+ "name": "address",
237
+ "maxlength": 10,
238
+ "label": {
239
+ "text": "Full address",
240
+ "isPageHeading": true
241
+ }
242
+ }) }}
243
+
244
+ ### Character count with word count
245
+
246
+ [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-word-count/preview)
247
+
248
+ #### Markup
249
+
250
+ <div class="govuk-character-count" data-module="character-count" data-maxwords="10">
251
+
252
+ <div class="govuk-form-group">
253
+ <label class="govuk-label" for="word-count">
254
+ Full address
255
+ </label>
256
+
257
+ <textarea class="govuk-textarea js-character-count " id="word-count" name="word-count" rows="5"></textarea>
258
+ </div>
259
+
260
+ <span id="word-count-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
261
+ You can enter up to 10 words
262
+ </span>
263
+ </div>
264
+
265
+ #### Macro
266
+
267
+ {% from "character-count/macro.njk" import govukCharacterCount %}
268
+
269
+ {{ govukCharacterCount({
270
+ "id": "word-count",
271
+ "name": "word-count",
272
+ "maxwords": 10,
273
+ "label": {
274
+ "text": "Full address"
275
+ }
276
+ }) }}
277
+
278
+ ### Character count with threshold
279
+
280
+ [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-threshold/preview)
281
+
282
+ #### Markup
283
+
284
+ <div class="govuk-character-count" data-module="character-count" data-maxlength="10" data-threshold="75">
285
+
286
+ <div class="govuk-form-group">
287
+ <label class="govuk-label" for="with-threshold">
288
+ Full address
289
+ </label>
290
+
291
+ <textarea class="govuk-textarea js-character-count " id="with-threshold" name="with-threshold" rows="5"></textarea>
292
+ </div>
293
+
294
+ <span id="with-threshold-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
295
+ You can enter up to 10 characters
296
+ </span>
297
+ </div>
298
+
299
+ #### Macro
300
+
301
+ {% from "character-count/macro.njk" import govukCharacterCount %}
302
+
303
+ {{ govukCharacterCount({
304
+ "id": "with-threshold",
305
+ "name": "with-threshold",
306
+ "maxlength": 10,
307
+ "threshold": 75,
308
+ "label": {
309
+ "text": "Full address"
310
+ }
311
+ }) }}
312
+
313
+ ## Requirements
314
+
315
+ ### Build tool configuration
316
+
317
+ When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
318
+
319
+ .pipe(sass({
320
+ includePaths: 'node_modules/'
321
+ }))
322
+
323
+ ### Static asset path configuration
324
+
325
+ In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
326
+
327
+ app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
328
+
329
+ ## Component arguments
330
+
331
+ If you are using Nunjucks,then macros take the following arguments
332
+
333
+ **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
334
+
335
+ <table class="govuk-table">
336
+
337
+ <thead class="govuk-table__head">
338
+
339
+ <tr class="govuk-table__row">
340
+
341
+ <th class="govuk-table__header" scope="col">Name</th>
342
+
343
+ <th class="govuk-table__header" scope="col">Type</th>
344
+
345
+ <th class="govuk-table__header" scope="col">Required</th>
346
+
347
+ <th class="govuk-table__header" scope="col">Description</th>
348
+
349
+ </tr>
350
+
351
+ </thead>
352
+
353
+ <tbody class="govuk-table__body">
354
+
355
+ <tr class="govuk-table__row">
356
+
357
+ <th class="govuk-table__header" scope="row">id</th>
358
+
359
+ <td class="govuk-table__cell">string</td>
360
+
361
+ <td class="govuk-table__cell">Yes</td>
362
+
363
+ <td class="govuk-table__cell">The id of the textarea</td>
364
+
365
+ </tr>
366
+
367
+ <tr class="govuk-table__row">
368
+
369
+ <th class="govuk-table__header" scope="row">describedBy</th>
370
+
371
+ <td class="govuk-table__cell">string</td>
372
+
373
+ <td class="govuk-table__cell">No</td>
374
+
375
+ <td class="govuk-table__cell">Text or element id to add to the `aria-describedby` attribute to provide description for screenreader users.</td>
376
+
377
+ </tr>
378
+
379
+ <tr class="govuk-table__row">
380
+
381
+ <th class="govuk-table__header" scope="row">name</th>
382
+
383
+ <td class="govuk-table__cell">string</td>
384
+
385
+ <td class="govuk-table__cell">Yes</td>
386
+
387
+ <td class="govuk-table__cell">The name of the textarea, which is submitted with the form data.</td>
388
+
389
+ </tr>
390
+
391
+ <tr class="govuk-table__row">
392
+
393
+ <th class="govuk-table__header" scope="row">rows</th>
394
+
395
+ <td class="govuk-table__cell">string</td>
396
+
397
+ <td class="govuk-table__cell">No</td>
398
+
399
+ <td class="govuk-table__cell">Optional number of textarea rows (default is 5 rows).</td>
400
+
401
+ </tr>
402
+
403
+ <tr class="govuk-table__row">
404
+
405
+ <th class="govuk-table__header" scope="row">value</th>
406
+
407
+ <td class="govuk-table__cell">string</td>
408
+
409
+ <td class="govuk-table__cell">No</td>
410
+
411
+ <td class="govuk-table__cell">Optional initial value of the textarea.</td>
412
+
413
+ </tr>
414
+
415
+ <tr class="govuk-table__row">
416
+
417
+ <th class="govuk-table__header" scope="row">label</th>
418
+
419
+ <td class="govuk-table__cell">object</td>
420
+
421
+ <td class="govuk-table__cell">Yes</td>
422
+
423
+ <td class="govuk-table__cell">Arguments for the label component. See label component.</td>
424
+
425
+ </tr>
426
+
427
+ <tr class="govuk-table__row">
428
+
429
+ <th class="govuk-table__header" scope="row">hint</th>
430
+
431
+ <td class="govuk-table__cell">object</td>
432
+
433
+ <td class="govuk-table__cell">No</td>
434
+
435
+ <td class="govuk-table__cell">Arguments for the hint component (e.g. text). See hint component.</td>
436
+
437
+ </tr>
438
+
439
+ <tr class="govuk-table__row">
440
+
441
+ <th class="govuk-table__header" scope="row">errorMessage</th>
442
+
443
+ <td class="govuk-table__cell">object</td>
444
+
445
+ <td class="govuk-table__cell">No</td>
446
+
447
+ <td class="govuk-table__cell">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td>
448
+
449
+ </tr>
450
+
451
+ <tr class="govuk-table__row">
452
+
453
+ <th class="govuk-table__header" scope="row">classes</th>
454
+
455
+ <td class="govuk-table__cell">string</td>
456
+
457
+ <td class="govuk-table__cell">No</td>
458
+
459
+ <td class="govuk-table__cell">Optional additional classes to add to the textarea tag.</td>
460
+
461
+ </tr>
462
+
463
+ <tr class="govuk-table__row">
464
+
465
+ <th class="govuk-table__header" scope="row">attributes</th>
466
+
467
+ <td class="govuk-table__cell">object</td>
468
+
469
+ <td class="govuk-table__cell">No</td>
470
+
471
+ <td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the textarea tag.</td>
472
+
473
+ </tr>
474
+
475
+ </tbody>
476
+
477
+ </table>
478
+
479
+ **If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
480
+
481
+ ### Setting up Nunjucks views and paths
482
+
483
+ Below is an example setup using express configure views:
484
+
485
+ nunjucks.configure('node_modules/govuk-frontend/components', {
486
+ autoescape: true,
487
+ cache: false,
488
+ express: app
489
+ })
490
+
491
+ ## Contribution
492
+
493
+ Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
494
+
495
+ ## License
496
+
497
+ MIT