@nationalarchives/frontend 0.19.0 → 0.20.1

package/nationalarchives/components/textarea/fixtures.json

@@ -10,7 +10,7 @@
         "id": "feedback",
         "name": "name"
       },
-      "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>"
+      "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>"
     },
     {
       "name": "textarea with a preselected value",
@@ -22,7 +22,7 @@
         "name": "feedback",
         "value": "I like this 👍🏼"
       },
-      "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>"
+      "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>"
     },
     {
       "name": "textarea with a hint",
@@ -34,7 +34,7 @@
         "name": "feedback",
         "hint": "What did you think?"
       },
-      "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>"
+      "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>"
     },
     {
       "name": "textarea with an error",
@@ -48,7 +48,7 @@
           "text": "Enter some feedback"
         }
       },
-      "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>"
+      "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>"
     },
     {
       "name": "inline textarea",
@@ -60,7 +60,7 @@
         "name": "feedback",
         "inline": true
       },
-      "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>"
+      "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>"
     },
     {
       "name": "textarea size",
@@ -72,7 +72,55 @@
         "name": "feedback",
         "size": "m"
       },
-      "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>"
+      "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>"
+    },
+    {
+      "name": "rows",
+      "options": {
+        "label": "Enter your feedback",
+        "headingLevel": 4,
+        "headingSize": "m",
+        "id": "feedback",
+        "name": "feedback",
+        "rows": "10"
+      },
+      "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>"
+    },
+    {
+      "name": "spellcheck",
+      "options": {
+        "label": "Enter your feedback",
+        "headingLevel": 4,
+        "headingSize": "m",
+        "id": "feedback",
+        "name": "feedback",
+        "spellcheck": true
+      },
+      "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>"
+    },
+    {
+      "name": "autocapitalize",
+      "options": {
+        "label": "Enter your feedback",
+        "headingLevel": 4,
+        "headingSize": "m",
+        "id": "feedback",
+        "name": "feedback",
+        "autocapitalize": "on"
+      },
+      "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=\"on\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
+    },
+    {
+      "name": "autocorrect",
+      "options": {
+        "label": "Enter your feedback",
+        "headingLevel": 4,
+        "headingSize": "m",
+        "id": "feedback",
+        "name": "feedback",
+        "autocorrect": true
+      },
+      "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>"
     },
     {
       "name": "with classes",
@@ -84,7 +132,7 @@
         "name": "name",
         "classes": "test-class"
       },
-      "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>"
+      "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>"
     },
     {
       "name": "with attributes",
@@ -98,7 +146,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "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>"
+      "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>"
     },
     {
       "name": "with form group classes",
@@ -110,7 +158,7 @@
         "name": "name",
         "formGroupClasses": "test-class"
       },
-      "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>"
+      "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>"
     },
     {
       "name": "with form group attributes",
@@ -124,7 +172,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "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>"
+      "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>"
     }
   ]
 }

package/nationalarchives/components/textarea/macro-options.json

@@ -3,55 +3,55 @@
     "name": "label",
     "type": "string",
     "required": true,
-    "description": ""
+    "description": "The label for the textarea field."
   },
   {
     "name": "headingLevel",
     "type": "number",
     "required": true,
-    "description": ""
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>`."
   },
   {
     "name": "headingSize",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "The physical size of the textarea title (`xl`, `l`, `m` or `s`)."
   },
   {
     "name": "id",
     "type": "string",
     "required": true,
-    "description": ""
+    "description": "A unique ID for the textarea component."
   },
   {
     "name": "name",
     "type": "string",
     "required": true,
-    "description": ""
+    "description": "The name of the form field."
   },
   {
     "name": "hint",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "An optional hint to display above the form field."
   },
   {
     "name": "value",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "The form field value."
   },
   {
     "name": "error",
     "type": "object",
     "required": false,
-    "description": "",
+    "description": "If set, the details of any errors.",
     "params": [
       {
         "name": "text",
         "type": "string",
         "required": true,
-        "description": ""
+        "description": "The error text to display."
       }
     ]
   },
@@ -59,6 +59,21 @@
     "name": "spellcheck",
     "type": "boolean",
     "required": false,
+    "default": false,
+    "description": ""
+  },
+  {
+    "name": "autocapitalize",
+    "type": "string",
+    "required": false,
+    "default": "off",
+    "description": ""
+  },
+  {
+    "name": "autocorrect",
+    "type": "boolean",
+    "required": false,
+    "default": "off",
     "description": ""
   },
   {
@@ -71,13 +86,14 @@
     "name": "rows",
     "type": "number",
     "required": false,
+    "default": 5,
     "description": ""
   },
   {
     "name": "inline",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, show the textarea inline rather than vertical."
   },
   {
     "name": "formGroupClasses",

package/nationalarchives/components/textarea/template.njk

@@ -22,7 +22,7 @@
     </p>
     {%- endif %}
   </div>
-  <textarea id="{{ params.id }}" class="tna-textarea{% if params.size %} tna-textarea--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}" rows="{{ params.rows if params.rows else 5 }}"
+  <textarea id="{{ params.id }}" class="tna-textarea{% if params.size %} tna-textarea--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}" autocapitalize="{{ params.autocapitalize if params.autocapitalize else 'off' }}" autocorrect="{{ 'on' if params.autocorrect else 'off' }}" rows="{{ params.rows if params.rows else 5 }}"
   {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.value }}</textarea>
 </div>

package/nationalarchives/components/warning/macro-options.json

@@ -3,19 +3,20 @@
     "name": "heading",
     "type": "string",
     "required": false,
-    "description": ""
+    "default": "Important information",
+    "description": "If set, the visually hidden heading for the warning which will be suffixed with an exclamation mark."
   },
   {
     "name": "headingLevel",
     "type": "number",
     "required": true,
-    "description": ""
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>`."
   },
   {
     "name": "body",
     "type": "string",
     "required": true,
-    "description": ""
+    "description": "The body text of the warning."
   },
   {
     "name": "classes",