@nationalarchives/frontend 0.19.0 → 0.20.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.
Files changed (35) hide show
  1. package/nationalarchives/components/checkboxes/macro-options.json +15 -15
  2. package/nationalarchives/components/compound-filters/macro-options.json +6 -6
  3. package/nationalarchives/components/cookie-banner/macro-options.json +11 -7
  4. package/nationalarchives/components/date-input/date-input-day.njk +1 -1
  5. package/nationalarchives/components/date-input/date-input-month.njk +1 -1
  6. package/nationalarchives/components/date-input/date-input-year.njk +1 -1
  7. package/nationalarchives/components/date-input/fixtures.json +5 -5
  8. package/nationalarchives/components/date-input/macro-options.json +10 -16
  9. package/nationalarchives/components/date-input/template.njk +11 -11
  10. package/nationalarchives/components/date-search/macro-options.json +11 -11
  11. package/nationalarchives/components/error-summary/macro-options.json +1 -1
  12. package/nationalarchives/components/files-list/macro-options.json +1 -1
  13. package/nationalarchives/components/footer/fixtures.json +3 -3
  14. package/nationalarchives/components/footer/macro-options.json +25 -18
  15. package/nationalarchives/components/footer/template.njk +3 -5
  16. package/nationalarchives/components/gallery/macro-options.json +1 -1
  17. package/nationalarchives/components/hero/macro-options.json +4 -3
  18. package/nationalarchives/components/index-grid/macro-options.json +1 -1
  19. package/nationalarchives/components/picture/macro-options.json +1 -1
  20. package/nationalarchives/components/radios/macro-options.json +11 -11
  21. package/nationalarchives/components/search-field/macro-options.json +7 -7
  22. package/nationalarchives/components/search-field/template.njk +1 -2
  23. package/nationalarchives/components/secondary-navigation/macro-options.json +3 -3
  24. package/nationalarchives/components/select/macro-options.json +10 -10
  25. package/nationalarchives/components/skip-link/macro-options.json +4 -2
  26. package/nationalarchives/components/tabs/macro-options.json +1 -1
  27. package/nationalarchives/components/text-input/fixtures.json +79 -12
  28. package/nationalarchives/components/text-input/macro-options.json +33 -12
  29. package/nationalarchives/components/text-input/text-input.njk +3 -2
  30. package/nationalarchives/components/textarea/fixtures.json +58 -10
  31. package/nationalarchives/components/textarea/macro-options.json +26 -10
  32. package/nationalarchives/components/textarea/template.njk +1 -1
  33. package/nationalarchives/components/warning/macro-options.json +4 -3
  34. package/nationalarchives/templates/fixtures.json +6 -6
  35. package/package.json +1 -1
package/nationalarchives/components/select/macro-options.json CHANGED
@@ -3,49 +3,49 @@
3
3
  "name": "label",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": ""
6
+ "description": "The label for the select field."
7
7
  },
8
8
  {
9
9
  "name": "headingLevel",
10
10
  "type": "number",
11
11
  "required": true,
12
- "description": ""
12
+ "description": "The heading level which represents an element from `<h1>` through to `<h6>`."
13
13
  },
14
14
  {
15
15
  "name": "headingSize",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": ""
18
+ "description": "The physical size of the select title (`xl`, `l`, `m` or `s`)."
19
19
  },
20
20
  {
21
21
  "name": "id",
22
22
  "type": "string",
23
23
  "required": true,
24
- "description": ""
24
+ "description": "A unique ID for the select component."
25
25
  },
26
26
  {
27
27
  "name": "name",
28
28
  "type": "string",
29
29
  "required": true,
30
- "description": ""
30
+ "description": "The name of the form field."
31
31
  },
32
32
  {
33
33
  "name": "hint",
34
34
  "type": "string",
35
35
  "required": false,
36
- "description": ""
36
+ "description": "An optional hint to display above the form field."
37
37
  },
38
38
  {
39
39
  "name": "error",
40
40
  "type": "object",
41
41
  "required": false,
42
- "description": "",
42
+ "description": "If set, the details of any errors.",
43
43
  "params": [
44
44
  {
45
45
  "name": "text",
46
46
  "type": "string",
47
47
  "required": true,
48
- "description": ""
48
+ "description": "The error text to display."
49
49
  }
50
50
  ]
51
51
  },
@@ -65,7 +65,7 @@
65
65
  "name": "value",
66
66
  "type": "string",
67
67
  "required": true,
68
- "description": ""
68
+ "description": "The form field value."
69
69
  }
70
70
  ]
71
71
  },
@@ -85,7 +85,7 @@
85
85
  "name": "inline",
86
86
  "type": "boolean",
87
87
  "required": false,
88
- "description": ""
88
+ "description": "If true, show the select inline rather than vertical."
89
89
  },
90
90
  {
91
91
  "name": "formGroupClasses",
package/nationalarchives/components/skip-link/macro-options.json CHANGED
@@ -3,13 +3,15 @@
3
3
  "name": "text",
4
4
  "type": "string",
5
5
  "required": false,
6
- "description": ""
6
+ "default": "Skip to main content",
7
+ "description": "If set, the text to appear in the skip link."
7
8
  },
8
9
  {
9
10
  "name": "href",
10
11
  "type": "string",
11
12
  "required": false,
12
- "description": ""
13
+ "default": "#main-content",
14
+ "description": "If set, the ID of the element to skip to."
13
15
  },
14
16
  {
15
17
  "name": "classes",
package/nationalarchives/components/tabs/macro-options.json CHANGED
@@ -15,7 +15,7 @@
15
15
  "name": "id",
16
16
  "type": "string",
17
17
  "required": true,
18
- "description": ""
18
+ "description": "A unique ID for the tabs item."
19
19
  },
20
20
  {
21
21
  "name": "title",
package/nationalarchives/components/text-input/fixtures.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "id": "name",
11
11
  "name": "name"
12
12
  },
13
- "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\"></div>"
13
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
14
14
  },
15
15
  {
16
16
  "name": "text input with a preselected value",
@@ -22,7 +22,7 @@
22
22
  "name": "name",
23
23
  "value": "John"
24
24
  },
25
- "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"John\" type=\"text\" spellcheck=\"false\"></div>"
25
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"John\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
26
26
  },
27
27
  {
28
28
  "name": "text input with a hint",
@@ -34,7 +34,7 @@
34
34
  "name": "name",
35
35
  "hint": "What people call you by."
36
36
  },
37
- "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4><p id=\"name-hint\" class=\"tna-form__hint\">What people call you by.</p></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" aria-describedby=\"name-hint \" type=\"text\" spellcheck=\"false\"></div>"
37
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4><p id=\"name-hint\" class=\"tna-form__hint\">What people call you by.</p></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" aria-describedby=\"name-hint \" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
38
38
  },
39
39
  {
40
40
  "name": "text input with an error",
@@ -48,7 +48,7 @@
48
48
  "text": "Enter a name"
49
49
  }
50
50
  },
51
- "html": "<div class=\"tna-form__group tna-form__group--error\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4><p id=\"name-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Enter a name</p></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" aria-describedby=\" name-error\" type=\"text\" spellcheck=\"false\"></div>"
51
+ "html": "<div class=\"tna-form__group tna-form__group--error\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4><p id=\"name-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Enter a name</p></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" aria-describedby=\" name-error\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
52
52
  },
53
53
  {
54
54
  "name": "inline text input",
@@ -60,7 +60,7 @@
60
60
  "name": "name",
61
61
  "inline": true
62
62
  },
63
- "html": "<div class=\"tna-form__group tna-form__group--inline\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\"></div>"
63
+ "html": "<div class=\"tna-form__group tna-form__group--inline\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
64
64
  },
65
65
  {
66
66
  "name": "text input size",
@@ -72,7 +72,7 @@
72
72
  "name": "name",
73
73
  "size": "m"
74
74
  },
75
- "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input tna-text-input--m \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\"></div>"
75
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input tna-text-input--m \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
76
76
  },
77
77
  {
78
78
  "name": "password",
@@ -82,9 +82,76 @@
82
82
  "headingSize": "m",
83
83
  "id": "password",
84
84
  "name": "password",
85
- "size": "m"
85
+ "size": "m",
86
+ "password": true
87
+ },
88
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"password\">Enter your password</label></h4></div><input id=\"password\" class=\"tna-text-input tna-text-input--m \" name=\"password\" value=\"\" type=\"password\" autocapitalize=\"off\" autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"></div>"
89
+ },
90
+ {
91
+ "name": "type",
92
+ "options": {
93
+ "label": "Enter a number",
94
+ "headingLevel": 4,
95
+ "headingSize": "m",
96
+ "id": "number",
97
+ "name": "number",
98
+ "size": "m",
99
+ "type": "number"
100
+ },
101
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"number\">Enter a number</label></h4></div><input id=\"number\" class=\"tna-text-input tna-text-input--m \" name=\"number\" value=\"\" type=\"number\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
102
+ },
103
+ {
104
+ "name": "spellcheck",
105
+ "options": {
106
+ "label": "Enter some text",
107
+ "headingLevel": 4,
108
+ "headingSize": "m",
109
+ "id": "text",
110
+ "name": "text",
111
+ "size": "m",
112
+ "spellcheck": "true"
113
+ },
114
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"text\">Enter some text</label></h4></div><input id=\"text\" class=\"tna-text-input tna-text-input--m \" name=\"text\" value=\"\" type=\"text\" spellcheck=\"true\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
115
+ },
116
+ {
117
+ "name": "autocapitalize",
118
+ "options": {
119
+ "label": "Enter some text",
120
+ "headingLevel": 4,
121
+ "headingSize": "m",
122
+ "id": "text",
123
+ "name": "text",
124
+ "size": "m",
125
+ "autocapitalize": "true"
126
+ },
127
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"text\">Enter some text</label></h4></div><input id=\"text\" class=\"tna-text-input tna-text-input--m \" name=\"text\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"true\" autocorrect=\"off\"></div>"
128
+ },
129
+ {
130
+ "name": "autocorrect",
131
+ "options": {
132
+ "label": "Enter some text",
133
+ "headingLevel": 4,
134
+ "headingSize": "m",
135
+ "id": "text",
136
+ "name": "text",
137
+ "size": "m",
138
+ "autocorrect": "true"
139
+ },
140
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"text\">Enter some text</label></h4></div><input id=\"text\" class=\"tna-text-input tna-text-input--m \" name=\"text\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"on\"></div>"
141
+ },
142
+ {
143
+ "name": "autocomplete",
144
+ "options": {
145
+ "label": "Enter an email address",
146
+ "headingLevel": 4,
147
+ "headingSize": "m",
148
+ "id": "email",
149
+ "name": "email",
150
+ "size": "m",
151
+ "type": "email",
152
+ "autocomplete": "email"
86
153
  },
87
- "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"password\">Enter your password</label></h4></div><input id=\"password\" class=\"tna-text-input tna-text-input--m \" name=\"password\" value=\"\" type=\"text\" spellcheck=\"false\"></div>"
154
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"email\">Enter an email address</label></h4></div><input id=\"email\" class=\"tna-text-input tna-text-input--m \" name=\"email\" value=\"\" type=\"email\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" autocomplete=\"email\"></div>"
88
155
  },
89
156
  {
90
157
  "name": "with classes",
@@ -96,7 +163,7 @@
96
163
  "name": "name",
97
164
  "classes": "test-class"
98
165
  },
99
- "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input test-class\" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\"></div>"
166
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input test-class\" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
100
167
  },
101
168
  {
102
169
  "name": "with attributes",
@@ -110,7 +177,7 @@
110
177
  "data-testattribute": "foobar"
111
178
  }
112
179
  },
113
- "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\" data-testattribute=\"foobar\"></div>"
180
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" data-testattribute=\"foobar\"></div>"
114
181
  },
115
182
  {
116
183
  "name": "with form group classes",
@@ -122,7 +189,7 @@
122
189
  "name": "name",
123
190
  "formGroupClasses": "test-class"
124
191
  },
125
- "html": "<div class=\"tna-form__group test-class\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\"></div>"
192
+ "html": "<div class=\"tna-form__group test-class\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
126
193
  },
127
194
  {
128
195
  "name": "with form group attributes",
@@ -136,7 +203,7 @@
136
203
  "data-testattribute": "foobar"
137
204
  }
138
205
  },
139
- "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\" data-testattribute=\"foobar\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\"></div>"
206
+ "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\" data-testattribute=\"foobar\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"name\">Enter your first name</label></h4></div><input id=\"name\" class=\"tna-text-input \" name=\"name\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
140
207
  }
141
208
  ]
142
209
  }
package/nationalarchives/components/text-input/macro-options.json CHANGED
@@ -3,78 +3,99 @@
3
3
  "name": "label",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": ""
6
+ "description": "The label for the text input field."
7
7
  },
8
8
  {
9
9
  "name": "headingLevel",
10
10
  "type": "number",
11
11
  "required": true,
12
- "description": ""
12
+ "description": "The heading level which represents an element from `<h1>` through to `<h6>`."
13
13
  },
14
14
  {
15
15
  "name": "headingSize",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": ""
18
+ "description": "The physical size of the text input title (`xl`, `l`, `m` or `s`)."
19
19
  },
20
20
  {
21
21
  "name": "id",
22
22
  "type": "string",
23
23
  "required": true,
24
- "description": ""
24
+ "description": "A unique ID for the text input component."
25
25
  },
26
26
  {
27
27
  "name": "name",
28
28
  "type": "string",
29
29
  "required": true,
30
- "description": ""
30
+ "description": "The name of the form field."
31
31
  },
32
32
  {
33
33
  "name": "hint",
34
34
  "type": "string",
35
35
  "required": false,
36
- "description": ""
36
+ "description": "An optional hint to display above the form field."
37
37
  },
38
38
  {
39
39
  "name": "value",
40
40
  "type": "string",
41
41
  "required": false,
42
- "description": ""
42
+ "description": "The form field value."
43
43
  },
44
44
  {
45
45
  "name": "error",
46
46
  "type": "object",
47
47
  "required": false,
48
- "description": "",
48
+ "description": "If set, the details of any errors.",
49
49
  "params": [
50
50
  {
51
51
  "name": "text",
52
52
  "type": "string",
53
53
  "required": true,
54
- "description": ""
54
+ "description": "The error text to display."
55
55
  }
56
56
  ]
57
57
  },
58
+ {
59
+ "name": "type",
60
+ "type": "string",
61
+ "required": false,
62
+ "description": ""
63
+ },
58
64
  {
59
65
  "name": "password",
60
66
  "type": "boolean",
61
67
  "required": false,
62
68
  "description": ""
63
69
  },
70
+ {
71
+ "name": "inputmode",
72
+ "type": "string",
73
+ "required": false,
74
+ "description": ""
75
+ },
64
76
  {
65
77
  "name": "spellcheck",
66
78
  "type": "boolean",
67
79
  "required": false,
80
+ "default": false,
68
81
  "description": ""
69
82
  },
70
83
  {
71
- "name": "inputmode",
84
+ "name": "autocapitalize",
72
85
  "type": "string",
73
86
  "required": false,
87
+ "default": "off",
74
88
  "description": ""
75
89
  },
76
90
  {
77
- "name": "autofill",
91
+ "name": "autocorrect",
92
+ "type": "boolean",
93
+ "required": false,
94
+ "default": "off",
95
+ "description": ""
96
+ },
97
+ {
98
+ "name": "autocomplete",
78
99
  "type": "string",
79
100
  "required": false,
80
101
  "description": ""
@@ -95,7 +116,7 @@
95
116
  "name": "inline",
96
117
  "type": "boolean",
97
118
  "required": false,
98
- "description": ""
119
+ "description": "If true, show the text input inline rather than vertical."
99
120
  },
100
121
  {
101
122
  "name": "formGroupClasses",
package/nationalarchives/components/text-input/text-input.njk CHANGED
@@ -3,8 +3,9 @@
3
3
  <input id="{{ params.id }}" class="tna-text-input{% if params.size %} tna-text-input--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}"
4
4
  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
5
5
  {%- if params.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
6
- {%- if params.password %} type="password" autocapitalize="none" autocomplete="off" autocorrect="off" spellcheck="false"{%- else %} type="text" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
7
- {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
6
+ {%- if params.password %} type="password" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"
7
+ {%- else %} type="{{ params.type if params.type else 'text' }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}" autocapitalize="{{ params.autocapitalize if params.autocapitalize else 'off' }}" autocorrect="{{ 'on' if params.autocorrect else 'off' }}"
8
+ {%- if params.autocomplete %} autocomplete="{{ params.autocomplete }}"{% endif %}
8
9
  {%- endif %}
9
10
  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
10
11
  {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}
package/nationalarchives/components/textarea/fixtures.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "id": "feedback",
11
11
  "name": "name"
12
12
  },
13
- "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"name\" spellcheck=\"false\" rows=\"5\"></textarea></div>"
13
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"name\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
14
14
  },
15
15
  {
16
16
  "name": "textarea with a preselected value",
@@ -22,7 +22,7 @@
22
22
  "name": "feedback",
23
23
  "value": "I like this 👍🏼"
24
24
  },
25
- "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" rows=\"5\">I like this 👍🏼</textarea></div>"
25
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\">I like this 👍🏼</textarea></div>"
26
26
  },
27
27
  {
28
28
  "name": "textarea with a hint",
@@ -34,7 +34,7 @@
34
34
  "name": "feedback",
35
35
  "hint": "What did you think?"
36
36
  },
37
- "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4><p id=\"feedback-hint\" class=\"tna-form__hint\">What did you think?</p></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" rows=\"5\" aria-describedby=\"feedback-hint \"></textarea></div>"
37
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4><p id=\"feedback-hint\" class=\"tna-form__hint\">What did you think?</p></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\"feedback-hint \"></textarea></div>"
38
38
  },
39
39
  {
40
40
  "name": "textarea with an error",
@@ -48,7 +48,7 @@
48
48
  "text": "Enter some feedback"
49
49
  }
50
50
  },
51
- "html": "<div class=\"tna-form__group tna-form__group--error\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4><p id=\"feedback-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Enter some feedback</p></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" rows=\"5\" aria-describedby=\" feedback-error\"></textarea></div>"
51
+ "html": "<div class=\"tna-form__group tna-form__group--error\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4><p id=\"feedback-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Enter some feedback</p></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" aria-describedby=\" feedback-error\"></textarea></div>"
52
52
  },
53
53
  {
54
54
  "name": "inline textarea",
@@ -60,7 +60,7 @@
60
60
  "name": "feedback",
61
61
  "inline": true
62
62
  },
63
- "html": "<div class=\"tna-form__group tna-form__group--inline\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" rows=\"5\"></textarea></div>"
63
+ "html": "<div class=\"tna-form__group tna-form__group--inline\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
64
64
  },
65
65
  {
66
66
  "name": "textarea size",
@@ -72,7 +72,55 @@
72
72
  "name": "feedback",
73
73
  "size": "m"
74
74
  },
75
- "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea tna-textarea--m \" name=\"feedback\" spellcheck=\"false\" rows=\"5\"></textarea></div>"
75
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea tna-textarea--m \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
76
+ },
77
+ {
78
+ "name": "rows",
79
+ "options": {
80
+ "label": "Enter your feedback",
81
+ "headingLevel": 4,
82
+ "headingSize": "m",
83
+ "id": "feedback",
84
+ "name": "feedback",
85
+ "rows": "10"
86
+ },
87
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"10\"></textarea></div>"
88
+ },
89
+ {
90
+ "name": "spellcheck",
91
+ "options": {
92
+ "label": "Enter your feedback",
93
+ "headingLevel": 4,
94
+ "headingSize": "m",
95
+ "id": "feedback",
96
+ "name": "feedback",
97
+ "spellcheck": true
98
+ },
99
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"true\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
100
+ },
101
+ {
102
+ "name": "autocapitalize",
103
+ "options": {
104
+ "label": "Enter your feedback",
105
+ "headingLevel": 4,
106
+ "headingSize": "m",
107
+ "id": "feedback",
108
+ "name": "feedback",
109
+ "autocapitalize": true
110
+ },
111
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"true\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
112
+ },
113
+ {
114
+ "name": "autocorrect",
115
+ "options": {
116
+ "label": "Enter your feedback",
117
+ "headingLevel": 4,
118
+ "headingSize": "m",
119
+ "id": "feedback",
120
+ "name": "feedback",
121
+ "autocorrect": true
122
+ },
123
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"on\" rows=\"5\"></textarea></div>"
76
124
  },
77
125
  {
78
126
  "name": "with classes",
@@ -84,7 +132,7 @@
84
132
  "name": "name",
85
133
  "classes": "test-class"
86
134
  },
87
- "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea test-class\" name=\"name\" spellcheck=\"false\" rows=\"5\"></textarea></div>"
135
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea test-class\" name=\"name\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
88
136
  },
89
137
  {
90
138
  "name": "with attributes",
@@ -98,7 +146,7 @@
98
146
  "data-testattribute": "foobar"
99
147
  }
100
148
  },
101
- "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"name\" spellcheck=\"false\" rows=\"5\" data-testattribute=\"foobar\"></textarea></div>"
149
+ "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"name\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\" data-testattribute=\"foobar\"></textarea></div>"
102
150
  },
103
151
  {
104
152
  "name": "with form group classes",
@@ -110,7 +158,7 @@
110
158
  "name": "name",
111
159
  "formGroupClasses": "test-class"
112
160
  },
113
- "html": "<div class=\"tna-form__group test-class\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"name\" spellcheck=\"false\" rows=\"5\"></textarea></div>"
161
+ "html": "<div class=\"tna-form__group test-class\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"name\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
114
162
  },
115
163
  {
116
164
  "name": "with form group attributes",
@@ -124,7 +172,7 @@
124
172
  "data-testattribute": "foobar"
125
173
  }
126
174
  },
127
- "html": "<div class=\"tna-form__group\" data-testattribute=\"foobar\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"name\" spellcheck=\"false\" rows=\"5\"></textarea></div>"
175
+ "html": "<div class=\"tna-form__group\" data-testattribute=\"foobar\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"name\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
128
176
  }
129
177
  ]
130
178
  }