[
{"name": "a plain textarea: five rows, submitted under its id", "args": [{"id": "more-detail", "label": "Can you provide more detail?"}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"more-detail\">Can you provide more detail?</label><textarea class=\"fune-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea></div>"},
{"name": "a hint, a name of its own, rows, autocomplete and no spell check", "args": [{"id": "address", "name": "homeAddress", "label": "Address", "hint": "Include your postcode", "rows": 8, "autoComplete": "street-address", "spellCheck": false}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"address\">Address</label><div class=\"fune-hint\" id=\"address-hint\">Include your postcode</div><textarea class=\"fune-textarea\" id=\"address\" name=\"homeAddress\" rows=\"8\" autoComplete=\"street-address\" spellCheck=\"false\" aria-describedby=\"address-hint\"></textarea></div>"},
{"name": "an error marks the textarea invalid; a controlled value is its escaped text", "args": [{"id": "why", "label": "Why?", "error": "Enter why you are applying", "value": "Because & <so>"}], "expect": "<div class=\"fune-field fune-field--error\"><label class=\"fune-label\" for=\"why\">Why?</label><p class=\"fune-error-message\" id=\"why-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter why you are applying</p><textarea class=\"fune-textarea fune-textarea--error\" id=\"why\" name=\"why\" rows=\"5\" aria-describedby=\"why-error\" aria-invalid=\"true\">Because & <so></textarea></div>"},
{"name": "required and disabled, with three rows", "args": [{"id": "r", "label": "Reason", "required": true, "disabled": true, "rows": 3}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"r\">Reason</label><textarea class=\"fune-textarea\" id=\"r\" name=\"r\" rows=\"3\" required=\"\" disabled=\"\"></textarea></div>"},
{"name": "a character count: the message follows the textarea, describes it and is a live region", "args": [{"id": "detail", "label": "Detail", "maxLength": 200}], "expect": "<div class=\"fune-field fune-character-count\"><label class=\"fune-label\" for=\"detail\">Detail</label><textarea class=\"fune-textarea\" id=\"detail\" name=\"detail\" rows=\"5\" aria-describedby=\"detail-info\"></textarea><div class=\"fune-character-count__message\" id=\"detail-info\" aria-live=\"polite\">You have 200 characters remaining</div></div>"},
{"name": "an uncontrolled default value is counted", "args": [{"id": "d", "label": "Detail", "maxLength": 10, "defaultValue": "Hello"}], "expect": "<div class=\"fune-field fune-character-count\"><label class=\"fune-label\" for=\"d\">Detail</label><textarea class=\"fune-textarea\" id=\"d\" name=\"d\" rows=\"5\" aria-describedby=\"d-info\">Hello</textarea><div class=\"fune-character-count__message\" id=\"d-info\" aria-live=\"polite\">You have 5 characters remaining</div></div>"},
{"name": "over the limit: the box is styled in error but not aria-invalid, and nothing is cut off", "args": [{"id": "d", "label": "Detail", "maxLength": 5, "value": "abcdefgh"}], "expect": "<div class=\"fune-field fune-character-count\"><label class=\"fune-label\" for=\"d\">Detail</label><textarea class=\"fune-textarea fune-textarea--error\" id=\"d\" name=\"d\" rows=\"5\" aria-describedby=\"d-info\">abcdefgh</textarea><div class=\"fune-character-count__message fune-character-count__message--over\" id=\"d-info\" aria-live=\"polite\">You have 3 characters too many</div></div>"},
{"name": "a word count with a hint, an error and a class: described by hint, error, then the count", "args": [{"id": "s", "label": "Summary", "hint": "Keep it short", "error": "Summary must be 3 words or fewer", "maxWords": 3, "value": "one two three four", "className": "wide"}], "expect": "<div class=\"fune-field fune-field--error fune-character-count wide\"><label class=\"fune-label\" for=\"s\">Summary</label><div class=\"fune-hint\" id=\"s-hint\">Keep it short</div><p class=\"fune-error-message\" id=\"s-error\"><span class=\"fune-visually-hidden\">Error:</span> Summary must be 3 words or fewer</p><textarea class=\"fune-textarea fune-textarea--error\" id=\"s\" name=\"s\" rows=\"5\" aria-describedby=\"s-hint s-error s-info\" aria-invalid=\"true\">one two three four</textarea><div class=\"fune-character-count__message fune-character-count__message--over\" id=\"s-info\" aria-live=\"polite\">You have 1 word too many</div></div>"},
{"name": "one word left is singular", "args": [{"id": "w", "label": "Title", "maxWords": 3, "value": "one two"}], "expect": "<div class=\"fune-field fune-character-count\"><label class=\"fune-label\" for=\"w\">Title</label><textarea class=\"fune-textarea\" id=\"w\" name=\"w\" rows=\"5\" aria-describedby=\"w-info\">one two</textarea><div class=\"fune-character-count__message\" id=\"w-info\" aria-live=\"polite\">You have 1 word remaining</div></div>"},
{"name": "below the threshold the message is there but hidden", "args": [{"id": "t", "label": "Notes", "maxLength": 20, "threshold": 75, "defaultValue": "abcdefghij"}], "expect": "<div class=\"fune-field fune-character-count\"><label class=\"fune-label\" for=\"t\">Notes</label><textarea class=\"fune-textarea\" id=\"t\" name=\"t\" rows=\"5\" aria-describedby=\"t-info\">abcdefghij</textarea><div class=\"fune-character-count__message\" id=\"t-info\" hidden=\"\" aria-live=\"polite\">You have 10 characters remaining</div></div>"},
{"name": "at the threshold the message shows", "args": [{"id": "t", "label": "Notes", "maxLength": 20, "threshold": 75, "defaultValue": "abcdefghijklmno"}], "expect": "<div class=\"fune-field fune-character-count\"><label class=\"fune-label\" for=\"t\">Notes</label><textarea class=\"fune-textarea\" id=\"t\" name=\"t\" rows=\"5\" aria-describedby=\"t-info\">abcdefghijklmno</textarea><div class=\"fune-character-count__message\" id=\"t-info\" aria-live=\"polite\">You have 5 characters remaining</div></div>"},
{"name": "emoji count once each, so three fill a limit of three", "args": [{"id": "e", "label": "Mood", "maxLength": 3, "value": "😀😀😀"}], "expect": "<div class=\"fune-field fune-character-count\"><label class=\"fune-label\" for=\"e\">Mood</label><textarea class=\"fune-textarea\" id=\"e\" name=\"e\" rows=\"5\" aria-describedby=\"e-info\">😀😀😀</textarea><div class=\"fune-character-count__message\" id=\"e-info\" aria-live=\"polite\">You have 0 characters remaining</div></div>"},
{"name": "characters and words together are refused", "args": [{"id": "x", "label": "X", "maxLength": 10, "maxWords": 2}], "expectError": "a textarea counts characters or words, not both"},
{"name": "a threshold without a limit is refused", "args": [{"id": "x", "label": "X", "threshold": 50}], "expectError": "a threshold needs a limit"},
{"name": "a limit of 0 is refused", "args": [{"id": "x", "label": "X", "maxLength": 0}], "expectError": "limit must be a whole number of at least 1"},
{"name": "an id with a space is refused", "args": [{"id": "more detail", "label": "More detail"}], "expectError": "a field id cannot contain spaces"}
]