@nationalarchives/frontend 0.19.0 → 0.20.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 (42) hide show
  1. package/nationalarchives/all+analytics.js +1 -1
  2. package/nationalarchives/all+analytics.js.map +1 -1
  3. package/nationalarchives/all.js +1 -1
  4. package/nationalarchives/all.js.map +1 -1
  5. package/nationalarchives/components/checkboxes/macro-options.json +15 -15
  6. package/nationalarchives/components/compound-filters/macro-options.json +6 -6
  7. package/nationalarchives/components/cookie-banner/macro-options.json +11 -7
  8. package/nationalarchives/components/date-input/date-input-day.njk +1 -1
  9. package/nationalarchives/components/date-input/date-input-month.njk +1 -1
  10. package/nationalarchives/components/date-input/date-input-year.njk +1 -1
  11. package/nationalarchives/components/date-input/fixtures.json +5 -5
  12. package/nationalarchives/components/date-input/macro-options.json +10 -16
  13. package/nationalarchives/components/date-input/template.njk +11 -11
  14. package/nationalarchives/components/date-search/macro-options.json +11 -11
  15. package/nationalarchives/components/error-summary/error-summary.js +1 -1
  16. package/nationalarchives/components/error-summary/error-summary.js.map +1 -1
  17. package/nationalarchives/components/error-summary/error-summary.mjs +108 -0
  18. package/nationalarchives/components/error-summary/macro-options.json +1 -1
  19. package/nationalarchives/components/files-list/macro-options.json +1 -1
  20. package/nationalarchives/components/footer/fixtures.json +3 -3
  21. package/nationalarchives/components/footer/macro-options.json +25 -18
  22. package/nationalarchives/components/footer/template.njk +3 -5
  23. package/nationalarchives/components/gallery/macro-options.json +1 -1
  24. package/nationalarchives/components/hero/macro-options.json +4 -3
  25. package/nationalarchives/components/index-grid/macro-options.json +1 -1
  26. package/nationalarchives/components/picture/macro-options.json +1 -1
  27. package/nationalarchives/components/radios/macro-options.json +11 -11
  28. package/nationalarchives/components/search-field/macro-options.json +7 -7
  29. package/nationalarchives/components/search-field/template.njk +1 -2
  30. package/nationalarchives/components/secondary-navigation/macro-options.json +3 -3
  31. package/nationalarchives/components/select/macro-options.json +10 -10
  32. package/nationalarchives/components/skip-link/macro-options.json +4 -2
  33. package/nationalarchives/components/tabs/macro-options.json +1 -1
  34. package/nationalarchives/components/text-input/fixtures.json +79 -12
  35. package/nationalarchives/components/text-input/macro-options.json +33 -12
  36. package/nationalarchives/components/text-input/text-input.njk +3 -2
  37. package/nationalarchives/components/textarea/fixtures.json +58 -10
  38. package/nationalarchives/components/textarea/macro-options.json +26 -10
  39. package/nationalarchives/components/textarea/template.njk +1 -1
  40. package/nationalarchives/components/warning/macro-options.json +4 -3
  41. package/nationalarchives/templates/fixtures.json +6 -6
  42. package/package.json +1 -1
package/nationalarchives/components/radios/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 radios 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 radios 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 radios 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
  },
@@ -79,13 +79,13 @@
79
79
  "name": "small",
80
80
  "type": "boolean",
81
81
  "required": false,
82
- "description": ""
82
+ "description": "If true, show smaller radios."
83
83
  },
84
84
  {
85
85
  "name": "inline",
86
86
  "type": "boolean",
87
87
  "required": false,
88
- "description": ""
88
+ "description": "If true, show the radios inline rather than vertical."
89
89
  },
90
90
  {
91
91
  "name": "formGroupClasses",
package/nationalarchives/components/search-field/macro-options.json CHANGED
@@ -3,43 +3,43 @@
3
3
  "name": "label",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": ""
6
+ "description": "The label for the search 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 search field 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 search field 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": "formGroupClasses",
package/nationalarchives/components/search-field/template.njk CHANGED
@@ -2,7 +2,7 @@
2
2
  {%- set inputClasses = [params.classes] if params.classes else [] -%}
3
3
  {%- set classes = containerClasses | join(' ') -%}
4
4
  <div class="tna-search-field{% if classes %} {{ classes }}{% endif %}" {%- for attribute, value in params.formGroupAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
5
- <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %}">
5
+ <div class="tna-form__group">
6
6
  <div class="tna-form__group-contents">
7
7
  <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
8
8
  <label class="tna-form__label" for="{{ params.id }}">
@@ -19,7 +19,6 @@
19
19
  <input type="search" id="{{ params.id }}" class="tna-search-field__input {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
20
20
  {%- if params.hint %} aria-describedby="{{ params.id }}-hint"{% endif %}
21
21
  {%- if params.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
22
- {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
23
22
  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
24
23
  {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
25
24
  <button type="submit" class="tna-button tna-search-field__button">
package/nationalarchives/components/secondary-navigation/macro-options.json CHANGED
@@ -9,14 +9,14 @@
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": "visuallyHideHeading",
16
16
  "type": "boolean",
17
17
  "required": false,
18
- "description": "",
19
- "default": false
18
+ "default": false,
19
+ "description": ""
20
20
  },
21
21
  {
22
22
  "name": "items",
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": "on"
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=\"on\" 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 %}