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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +1 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/all.js +188 -0
- data/node_modules/govuk-frontend/components/_all.scss +1 -0
- data/node_modules/govuk-frontend/components/back-link/README.md +12 -12
- data/node_modules/govuk-frontend/components/breadcrumbs/README.md +18 -18
- data/node_modules/govuk-frontend/components/button/README.md +30 -30
- data/node_modules/govuk-frontend/components/button/template.njk +1 -1
- data/node_modules/govuk-frontend/components/character-count/README.md +497 -0
- data/node_modules/govuk-frontend/components/character-count/_character-count.scss +31 -0
- data/node_modules/govuk-frontend/components/character-count/character-count.js +1201 -0
- data/node_modules/govuk-frontend/components/character-count/macro-options.json +83 -0
- data/node_modules/govuk-frontend/components/character-count/macro.njk +3 -0
- data/node_modules/govuk-frontend/components/character-count/template.njk +32 -0
- data/node_modules/govuk-frontend/components/checkboxes/README.md +57 -57
- data/node_modules/govuk-frontend/components/date-input/README.md +36 -36
- data/node_modules/govuk-frontend/components/details/README.md +18 -18
- data/node_modules/govuk-frontend/components/error-message/README.md +12 -12
- data/node_modules/govuk-frontend/components/error-summary/README.md +24 -24
- data/node_modules/govuk-frontend/components/fieldset/README.md +21 -21
- data/node_modules/govuk-frontend/components/file-upload/README.md +24 -24
- data/node_modules/govuk-frontend/components/footer/README.md +51 -51
- data/node_modules/govuk-frontend/components/header/README.md +42 -42
- data/node_modules/govuk-frontend/components/header/_header.scss +2 -0
- data/node_modules/govuk-frontend/components/hint/README.md +12 -12
- data/node_modules/govuk-frontend/components/input/README.md +27 -27
- data/node_modules/govuk-frontend/components/inset-text/README.md +12 -12
- data/node_modules/govuk-frontend/components/label/README.md +15 -15
- data/node_modules/govuk-frontend/components/panel/README.md +15 -15
- data/node_modules/govuk-frontend/components/phase-banner/README.md +12 -12
- data/node_modules/govuk-frontend/components/radios/README.md +60 -60
- data/node_modules/govuk-frontend/components/radios/_radios.scss +1 -0
- data/node_modules/govuk-frontend/components/select/README.md +39 -39
- data/node_modules/govuk-frontend/components/select/_select.scss +1 -1
- data/node_modules/govuk-frontend/components/skip-link/README.md +12 -12
- data/node_modules/govuk-frontend/components/table/README.md +45 -45
- data/node_modules/govuk-frontend/components/table/macro-options.json +12 -0
- data/node_modules/govuk-frontend/components/table/template.njk +7 -3
- data/node_modules/govuk-frontend/components/tabs/README.md +30 -30
- data/node_modules/govuk-frontend/components/tag/README.md +9 -9
- data/node_modules/govuk-frontend/components/textarea/README.md +30 -30
- data/node_modules/govuk-frontend/components/warning-text/README.md +12 -12
- data/node_modules/govuk-frontend/package.json +11 -11
- 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'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
|