[
{"name": "a legend and three radios: the first takes the id, the rest -2 and -3", "args": [{"id": "contact", "legend": "How would you prefer to be contacted?", "options": [{"value": "email", "label": "Email"}, {"value": "phone", "label": "Phone"}, {"value": "text", "label": "Text message"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">How would you prefer to be contacted?</legend><div class=\"fune-radios\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"contact\" type=\"radio\" name=\"contact\" value=\"email\"/><label class=\"fune-label fune-radio-label\" for=\"contact\">Email</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"contact-2\" type=\"radio\" name=\"contact\" value=\"phone\"/><label class=\"fune-label fune-radio-label\" for=\"contact-2\">Phone</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"contact-3\" type=\"radio\" name=\"contact\" value=\"text\"/><label class=\"fune-label fune-radio-label\" for=\"contact-3\">Text message</label></div></div></fieldset></div>"},
{"name": "inline yes and no, submitted under a name of its own", "args": [{"id": "changed", "name": "changedName", "legend": "Have you changed your name?", "inline": true, "options": [{"value": "yes", "label": "Yes"}, {"value": "no", "label": "No"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Have you changed your name?</legend><div class=\"fune-radios fune-radios--inline\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"changed\" type=\"radio\" name=\"changedName\" value=\"yes\"/><label class=\"fune-label fune-radio-label\" for=\"changed\">Yes</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"changed-2\" type=\"radio\" name=\"changedName\" value=\"no\"/><label class=\"fune-label fune-radio-label\" for=\"changed-2\">No</label></div></div></fieldset></div>"},
{"name": "a controlled value checks only its radio", "args": [{"id": "yn", "legend": "Continue?", "value": "no", "options": [{"value": "yes", "label": "Yes"}, {"value": "no", "label": "No"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Continue?</legend><div class=\"fune-radios\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"yn\" type=\"radio\" name=\"yn\" value=\"yes\"/><label class=\"fune-label fune-radio-label\" for=\"yn\">Yes</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"yn-2\" type=\"radio\" name=\"yn\" checked=\"\" value=\"no\"/><label class=\"fune-label fune-radio-label\" for=\"yn-2\">No</label></div></div></fieldset></div>"},
{"name": "a default value checks its radio too", "args": [{"id": "yn", "legend": "Continue?", "defaultValue": "yes", "options": [{"value": "yes", "label": "Yes"}, {"value": "no", "label": "No"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Continue?</legend><div class=\"fune-radios\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"yn\" type=\"radio\" name=\"yn\" checked=\"\" value=\"yes\"/><label class=\"fune-label fune-radio-label\" for=\"yn\">Yes</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"yn-2\" type=\"radio\" name=\"yn\" value=\"no\"/><label class=\"fune-label fune-radio-label\" for=\"yn-2\">No</label></div></div></fieldset></div>"},
{"name": "a controlled empty value checks nothing, and wins over a default", "args": [{"id": "yn", "legend": "Continue?", "value": "", "defaultValue": "yes", "options": [{"value": "yes", "label": "Yes"}, {"value": "no", "label": "No"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Continue?</legend><div class=\"fune-radios\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"yn\" type=\"radio\" name=\"yn\" value=\"yes\"/><label class=\"fune-label fune-radio-label\" for=\"yn\">Yes</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"yn-2\" type=\"radio\" name=\"yn\" value=\"no\"/><label class=\"fune-label fune-radio-label\" for=\"yn-2\">No</label></div></div></fieldset></div>"},
{"name": "an item hint describes its own radio, as <item id>-item-hint", "args": [{"id": "signIn", "legend": "How do you want to sign in?", "options": [{"value": "gateway", "label": "Sign in with Government Gateway", "hint": "You'll have a user ID if you've registered for Self Assessment"}, {"value": "verify", "label": "Sign in with GOV.UK Verify", "hint": "You'll have an account if you've already proved your identity"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">How do you want to sign in?</legend><div class=\"fune-radios\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"signIn\" type=\"radio\" aria-describedby=\"signIn-item-hint\" name=\"signIn\" value=\"gateway\"/><label class=\"fune-label fune-radio-label\" for=\"signIn\">Sign in with Government Gateway</label><div class=\"fune-hint fune-radio-hint\" id=\"signIn-item-hint\">You'll have a user ID if you've registered for Self Assessment</div></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"signIn-2\" type=\"radio\" aria-describedby=\"signIn-2-item-hint\" name=\"signIn\" value=\"verify\"/><label class=\"fune-label fune-radio-label\" for=\"signIn-2\">Sign in with GOV.UK Verify</label><div class=\"fune-hint fune-radio-hint\" id=\"signIn-2-item-hint\">You'll have an account if you've already proved your identity</div></div></div></fieldset></div>"},
{"name": "an or divider before the last option", "args": [{"id": "where", "legend": "Where do you live?", "options": [{"value": "england", "label": "England"}, {"value": "wales", "label": "Wales"}, {"value": "abroad", "label": "I am a British citizen living abroad", "divider": "or"}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Where do you live?</legend><div class=\"fune-radios\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"where\" type=\"radio\" name=\"where\" value=\"england\"/><label class=\"fune-label fune-radio-label\" for=\"where\">England</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"where-2\" type=\"radio\" name=\"where\" value=\"wales\"/><label class=\"fune-label fune-radio-label\" for=\"where-2\">Wales</label></div><div class=\"fune-radios-divider\">or</div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"where-3\" type=\"radio\" name=\"where\" value=\"abroad\"/><label class=\"fune-label fune-radio-label\" for=\"where-3\">I am a British citizen living abroad</label></div></div></fieldset></div>"},
{"name": "hint and error describe the fieldset, hint first, and the legend is the page heading", "args": [{"id": "where", "legend": "Where do you live?", "isPageHeading": true, "hint": "Your main home", "error": "Select the country where you live", "options": [{"value": "england", "label": "England"}]}], "expect": "<div class=\"fune-field fune-field--error\"><fieldset class=\"fune-fieldset\" aria-describedby=\"where-hint where-error\"><legend class=\"fune-legend fune-legend--heading\"><h1 class=\"fune-legend-heading\">Where do you live?</h1></legend><div class=\"fune-hint\" id=\"where-hint\">Your main home</div><p class=\"fune-error-message\" id=\"where-error\"><span class=\"fune-visually-hidden\">Error:</span> Select the country where you live</p><div class=\"fune-radios\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"where\" type=\"radio\" name=\"where\" value=\"england\"/><label class=\"fune-label fune-radio-label\" for=\"where\">England</label></div></div></fieldset></div>"},
{"name": "small, required, one option disabled", "args": [{"id": "freq", "legend": "How often?", "small": true, "required": true, "options": [{"value": "month", "label": "Monthly"}, {"value": "year", "label": "Yearly", "disabled": true}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">How often?</legend><div class=\"fune-radios fune-radios--small\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"freq\" type=\"radio\" required=\"\" name=\"freq\" value=\"month\"/><label class=\"fune-label fune-radio-label\" for=\"freq\">Monthly</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"freq-2\" type=\"radio\" required=\"\" disabled=\"\" name=\"freq\" value=\"year\"/><label class=\"fune-label fune-radio-label\" for=\"freq-2\">Yearly</label></div></div></fieldset></div>"},
{"name": "inline and small together; disabled disables every radio; a class name joins the wrapper's", "args": [{"id": "ok", "legend": "OK?", "inline": true, "small": true, "disabled": true, "className": "wide", "options": [{"value": "yes", "label": "Yes"}, {"value": "no", "label": "No"}]}], "expect": "<div class=\"fune-field wide\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">OK?</legend><div class=\"fune-radios fune-radios--inline fune-radios--small\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"ok\" type=\"radio\" disabled=\"\" name=\"ok\" value=\"yes\"/><label class=\"fune-label fune-radio-label\" for=\"ok\">Yes</label></div><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"ok-2\" type=\"radio\" disabled=\"\" name=\"ok\" value=\"no\"/><label class=\"fune-label fune-radio-label\" for=\"ok-2\">No</label></div></div></fieldset></div>"},
{"name": "labels and values are escaped", "args": [{"id": "e", "legend": "Q & A", "options": [{"value": "a&b", "label": "<A> & \"B\""}]}], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Q & A</legend><div class=\"fune-radios\"><div class=\"fune-radio\"><input class=\"fune-radio-input\" id=\"e\" type=\"radio\" name=\"e\" value=\"a&b\"/><label class=\"fune-label fune-radio-label\" for=\"e\"><A> & "B"</label></div></div></fieldset></div>"},
{"name": "no options is refused", "args": [{"id": "x", "legend": "Pick", "options": []}], "expectError": "a radio group needs at least one option"},
{"name": "two options with one value are refused", "args": [{"id": "x", "legend": "Pick", "options": [{"value": "yes", "label": "Yes"}, {"value": "yes", "label": "Yes please"}]}], "expectError": "radio option values must be unique: \"yes\" is there twice"},
{"name": "an id with a space is refused", "args": [{"id": "where live", "legend": "Where?", "options": [{"value": "a", "label": "A"}]}], "expectError": "a field id cannot contain spaces"}
]