[
{ "name": "a legend and the inputs", "args": [{ "id": "address", "legend": "What is your address?", "children": "[inputs]" }], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">What is your address?</legend>[inputs]</fieldset></div>" },
{ "name": "a hint describes the whole group", "args": [{ "id": "dob", "legend": "What is your date of birth?", "hint": "For example, 31 3 1980", "children": "[inputs]" }], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\" aria-describedby=\"dob-hint\"><legend class=\"fune-legend\">What is your date of birth?</legend><div class=\"fune-hint\" id=\"dob-hint\">For example, 31 3 1980</div>[inputs]</fieldset></div>" },
{ "name": "an error marks the group and describes it", "args": [{ "id": "contact", "legend": "How would you like to be contacted?", "error": "Select how you would like to be contacted", "children": "[inputs]" }], "expect": "<div class=\"fune-field fune-field--error\"><fieldset class=\"fune-fieldset\" aria-describedby=\"contact-error\"><legend class=\"fune-legend\">How would you like to be contacted?</legend><p class=\"fune-error-message\" id=\"contact-error\"><span class=\"fune-visually-hidden\">Error:</span> Select how you would like to be contacted</p>[inputs]</fieldset></div>" },
{ "name": "hint then error, both described, hint first", "args": [{ "id": "dob", "legend": "Date of birth", "hint": "For example, 31 3 1980", "error": "Date of birth must be in the past", "children": "[inputs]" }], "expect": "<div class=\"fune-field fune-field--error\"><fieldset class=\"fune-fieldset\" aria-describedby=\"dob-hint dob-error\"><legend class=\"fune-legend\">Date of birth</legend><div class=\"fune-hint\" id=\"dob-hint\">For example, 31 3 1980</div><p class=\"fune-error-message\" id=\"dob-error\"><span class=\"fune-visually-hidden\">Error:</span> Date of birth must be in the past</p>[inputs]</fieldset></div>" },
{ "name": "the legend as the page heading holds an h1", "args": [{ "id": "where", "legend": "Where do you live?", "isPageHeading": true, "children": "[inputs]" }], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend fune-legend--heading\"><h1 class=\"fune-legend-heading\">Where do you live?</h1></legend>[inputs]</fieldset></div>" },
{ "name": "isPageHeading false is an ordinary legend", "args": [{ "id": "where", "legend": "Where do you live?", "isPageHeading": false }], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Where do you live?</legend></fieldset></div>" },
{ "name": "a class name joins the wrapper's, after the error class", "args": [{ "id": "a", "legend": "Address", "error": "Enter your address", "className": "fune-field--wide" }], "expect": "<div class=\"fune-field fune-field--error fune-field--wide\"><fieldset class=\"fune-fieldset\" aria-describedby=\"a-error\"><legend class=\"fune-legend\">Address</legend><p class=\"fune-error-message\" id=\"a-error\"><span class=\"fune-visually-hidden\">Error:</span> Enter your address</p></fieldset></div>" },
{ "name": "empty hint and null error show nothing", "args": [{ "id": "a", "legend": "Address", "hint": "", "error": null, "children": "[inputs]" }], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Address</legend>[inputs]</fieldset></div>" },
{ "name": "the legend is escaped", "args": [{ "id": "a", "legend": "Terms & <conditions>" }], "expect": "<div class=\"fune-field\"><fieldset class=\"fune-fieldset\"><legend class=\"fune-legend\">Terms & <conditions></legend></fieldset></div>" },
{ "name": "an id with a space is refused", "args": [{ "id": "home address", "legend": "Address" }], "expectError": "a field id cannot contain spaces" }
]