[
{"name": "a checkbox with its label to the right, submitting yes", "args": [{"id": "terms", "label": "I agree to the terms and conditions"}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"terms\" type=\"checkbox\" name=\"terms\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"terms\">I agree to the terms and conditions</label></div></div>"},
{"name": "a name and value of its own", "args": [{"id": "c1", "name": "marketing", "value": "opt-in", "label": "Send me news by email"}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"c1\" type=\"checkbox\" name=\"marketing\" value=\"opt-in\"/><label class=\"fune-label fune-checkbox-label\" for=\"c1\">Send me news by email</label></div></div>"},
{"name": "controlled and ticked renders checked", "args": [{"id": "terms", "label": "I agree", "checked": true}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"terms\" type=\"checkbox\" name=\"terms\" checked=\"\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"terms\">I agree</label></div></div>"},
{"name": "controlled and clear renders no checked attribute", "args": [{"id": "terms", "label": "I agree", "checked": false}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"terms\" type=\"checkbox\" name=\"terms\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"terms\">I agree</label></div></div>"},
{"name": "defaultChecked renders checked too", "args": [{"id": "remember", "label": "Remember me on this device", "defaultChecked": true}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"remember\" type=\"checkbox\" name=\"remember\" checked=\"\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"remember\">Remember me on this device</label></div></div>"},
{"name": "a hint goes under the label and describes the checkbox", "args": [{"id": "remember", "label": "Remember me", "hint": "Do not tick this on a shared computer"}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"remember\" type=\"checkbox\" aria-describedby=\"remember-hint\" name=\"remember\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"remember\">Remember me</label><div class=\"fune-hint fune-checkbox-hint\" id=\"remember-hint\">Do not tick this on a shared computer</div></div></div>"},
{"name": "an error goes above the box, marks it invalid and describes it", "args": [{"id": "terms", "label": "I agree to the terms", "error": "Agree to the terms to continue"}], "expect": "<div class=\"fune-field fune-field--error\"><p class=\"fune-error-message\" id=\"terms-error\"><span class=\"fune-visually-hidden\">Error:</span> Agree to the terms to continue</p><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"terms\" type=\"checkbox\" aria-describedby=\"terms-error\" aria-invalid=\"true\" name=\"terms\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"terms\">I agree to the terms</label></div></div>"},
{"name": "hint and error: described by both, hint first", "args": [{"id": "t", "label": "I agree", "hint": "You can read the terms first", "error": "Agree to the terms", "checked": false}], "expect": "<div class=\"fune-field fune-field--error\"><p class=\"fune-error-message\" id=\"t-error\"><span class=\"fune-visually-hidden\">Error:</span> Agree to the terms</p><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"t\" type=\"checkbox\" aria-describedby=\"t-hint t-error\" aria-invalid=\"true\" name=\"t\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"t\">I agree</label><div class=\"fune-hint fune-checkbox-hint\" id=\"t-hint\">You can read the terms first</div></div></div>"},
{"name": "required and disabled are boolean attributes", "args": [{"id": "t", "label": "I agree", "required": true, "disabled": true}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"t\" type=\"checkbox\" required=\"\" disabled=\"\" name=\"t\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"t\">I agree</label></div></div>"},
{"name": "false booleans, an empty hint and a null error render nothing", "args": [{"id": "t", "label": "I agree", "required": false, "disabled": false, "hint": "", "error": null, "className": "fune-field--compact"}], "expect": "<div class=\"fune-field fune-field--compact\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"t\" type=\"checkbox\" name=\"t\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"t\">I agree</label></div></div>"},
{"name": "an error and a class name: the error class comes first", "args": [{"id": "t", "label": "I agree", "error": "Agree to continue", "className": "wide"}], "expect": "<div class=\"fune-field fune-field--error wide\"><p class=\"fune-error-message\" id=\"t-error\"><span class=\"fune-visually-hidden\">Error:</span> Agree to continue</p><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"t\" type=\"checkbox\" aria-describedby=\"t-error\" aria-invalid=\"true\" name=\"t\" value=\"yes\"/><label class=\"fune-label fune-checkbox-label\" for=\"t\">I agree</label></div></div>"},
{"name": "label and value are escaped", "args": [{"id": "t", "label": "Terms & <conditions>", "value": "a\"b"}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"t\" type=\"checkbox\" name=\"t\" value=\"a"b\"/><label class=\"fune-label fune-checkbox-label\" for=\"t\">Terms & <conditions></label></div></div>"},
{"name": "an empty value is submitted as empty, not yes", "args": [{"id": "t", "label": "I agree", "value": ""}], "expect": "<div class=\"fune-field\"><div class=\"fune-checkbox\"><input class=\"fune-checkbox-input\" id=\"t\" type=\"checkbox\" name=\"t\" value=\"\"/><label class=\"fune-label fune-checkbox-label\" for=\"t\">I agree</label></div></div>"},
{"name": "an id with a space is refused", "args": [{"id": "the terms", "label": "I agree"}], "expectError": "a field id cannot contain spaces"}
]