[
{"name": "a plain text input: type text, submitted under its id", "args": [{"id": "full-name", "label": "Full name"}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"full-name\">Full name</label><input class=\"fune-input\" id=\"full-name\" type=\"text\" name=\"full-name\"/></div>"},
{"name": "a name of its own", "args": [{"id": "f1", "name": "fullName", "label": "Full name"}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"f1\">Full name</label><input class=\"fune-input\" id=\"f1\" type=\"text\" name=\"fullName\"/></div>"},
{"name": "an email address: type, autocomplete and no spell check", "args": [{"id": "email", "label": "Email address", "type": "email", "autoComplete": "email", "spellCheck": false}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"email\">Email address</label><input class=\"fune-input\" id=\"email\" type=\"email\" autoComplete=\"email\" spellCheck=\"false\" name=\"email\"/></div>"},
{"name": "a hint describes the input", "args": [{"id": "phone", "label": "UK telephone number", "type": "tel", "hint": "For international numbers include the country code", "autoComplete": "tel"}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"phone\">UK telephone number</label><div class=\"fune-hint\" id=\"phone-hint\">For international numbers include the country code</div><input class=\"fune-input\" id=\"phone\" type=\"tel\" autoComplete=\"tel\" aria-describedby=\"phone-hint\" name=\"phone\"/></div>"},
{"name": "an error marks the input invalid and describes it", "args": [{"id": "email", "label": "Email address", "type": "email", "error": "Enter an email address in the correct format, like name@example.com"}], "expect": "<div class=\"fune-field fune-field--error\"><label class=\"fune-label\" for=\"email\">Email address</label><p class=\"fune-error-message\" id=\"email-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter an email address in the correct format, like name@example.com</p><input class=\"fune-input fune-input--error\" id=\"email\" type=\"email\" aria-describedby=\"email-error\" aria-invalid=\"true\" name=\"email\"/></div>"},
{"name": "hint and error: described by both, hint first", "args": [{"id": "url", "label": "Website", "type": "url", "hint": "Starting with https://", "error": "Enter a website address, like https://example.com", "value": "example"}], "expect": "<div class=\"fune-field fune-field--error\"><label class=\"fune-label\" for=\"url\">Website</label><div class=\"fune-hint\" id=\"url-hint\">Starting with https://</div><p class=\"fune-error-message\" id=\"url-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter a website address, like https://example.com</p><input class=\"fune-input fune-input--error\" id=\"url\" type=\"url\" aria-describedby=\"url-hint url-error\" aria-invalid=\"true\" name=\"url\" value=\"example\"/></div>"},
{"name": "a controlled value", "args": [{"id": "town", "label": "Town or city", "value": "Leeds", "autoComplete": "address-level2"}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"town\">Town or city</label><input class=\"fune-input\" id=\"town\" type=\"text\" autoComplete=\"address-level2\" name=\"town\" value=\"Leeds\"/></div>"},
{"name": "a default value renders as the value attribute", "args": [{"id": "q", "label": "Search", "type": "search", "defaultValue": "vat"}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"q\">Search</label><input class=\"fune-input\" id=\"q\" type=\"search\" name=\"q\" value=\"vat\"/></div>"},
{"name": "a prefix and a suffix wrap the input and are hidden from screen readers", "args": [{"id": "cost", "label": "Cost, in pounds, per item", "prefix": "£", "suffix": "per item", "inputMode": "decimal", "spellCheck": false}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"cost\">Cost, in pounds, per item</label><div class=\"fune-input-wrapper\"><div class=\"fune-input-prefix\" aria-hidden=\"true\">£</div><input class=\"fune-input\" id=\"cost\" type=\"text\" inputMode=\"decimal\" spellCheck=\"false\" name=\"cost\"/><div class=\"fune-input-suffix\" aria-hidden=\"true\">per item</div></div></div>"},
{"name": "a prefix alone", "args": [{"id": "amount", "label": "Amount, in pounds", "prefix": "£"}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"amount\">Amount, in pounds</label><div class=\"fune-input-wrapper\"><div class=\"fune-input-prefix\" aria-hidden=\"true\">£</div><input class=\"fune-input\" id=\"amount\" type=\"text\" name=\"amount\"/></div></div>"},
{"name": "required and disabled are boolean attributes", "args": [{"id": "ref", "label": "Reference", "required": true, "disabled": true}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"ref\">Reference</label><input class=\"fune-input\" id=\"ref\" type=\"text\" required=\"\" disabled=\"\" name=\"ref\"/></div>"},
{"name": "false booleans and an empty suffix render nothing", "args": [{"id": "ref", "label": "Reference", "required": false, "disabled": false, "suffix": "", "className": "fune-field--narrow"}], "expect": "<div class=\"fune-field fune-field--narrow\"><label class=\"fune-label\" for=\"ref\">Reference</label><input class=\"fune-input\" id=\"ref\" type=\"text\" name=\"ref\"/></div>"},
{"name": "values and labels are escaped", "args": [{"id": "c", "label": "Company \"name\" & <number>", "value": "A&B \"Ltd\""}], "expect": "<div class=\"fune-field\"><label class=\"fune-label\" for=\"c\">Company "name" & <number></label><input class=\"fune-input\" id=\"c\" type=\"text\" name=\"c\" value=\"A&B "Ltd"\"/></div>"},
{"name": "an id with a space is refused", "args": [{"id": "full name", "label": "Full name"}], "expectError": "a field id cannot contain spaces"}
]