digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
145 lines (144 loc) • 8.39 kB
JSON
{
"component": "input-from-form",
"fixtures": [
{
"name": "default",
"options": {
"form": {
"name": "test-name",
"question": "National Insurance number"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-test-name\">\n National Insurance number\n </label>\n <input class=\"govuk-input\" id=\"input-test-name\" name=\"test-name\" type=\"text\">\n</div>"
},
{
"name": "with hint text",
"options": {
"form": {
"name": "test-name-with-hint",
"question": "National Insurance number",
"hint": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-test-name-with-hint\">\n National Insurance number\n </label>\n <div id=\"input-test-name-with-hint-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n <input class=\"govuk-input\" id=\"input-test-name-with-hint\" name=\"test-name-with-hint\" type=\"text\" aria-describedby=\"input-test-name-with-hint-hint\">\n</div>"
},
{
"name": "with custom hint",
"options": {
"form": {
"name": "test-name-with-hint",
"question": "National Insurance number",
"hint": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
"hint": {
"html": "<p>I am a custom hint</p>"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-test-name-with-hint\">\n National Insurance number\n </label>\n <div id=\"input-test-name-with-hint-hint\" class=\"govuk-hint\">\n <p>I am a custom hint</p>\n </div>\n <input class=\"govuk-input\" id=\"input-test-name-with-hint\" name=\"test-name-with-hint\" type=\"text\" aria-describedby=\"input-test-name-with-hint-hint\">\n</div>"
},
{
"name": "with error message",
"options": {
"form": {
"name": "test-name-with-error",
"question": "National Insurance number",
"errors": [
"Error message goes here"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-test-name-with-error\">\n National Insurance number\n </label>\n <p id=\"input-test-name-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-test-name-with-error\" name=\"test-name-with-error\" type=\"text\" aria-describedby=\"input-test-name-with-error-error\">\n</div>"
},
{
"name": "value",
"options": {
"form": {
"name": "test-name-with-value",
"question": "National Insurance number",
"data": "QQ 12 34 56 C"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-test-name-with-value\">\n National Insurance number\n </label>\n <input class=\"govuk-input\" id=\"input-test-name-with-value\" name=\"test-name-with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
},
{
"name": "with error and hint",
"options": {
"form": {
"name": "test-name-with-error-and-hint",
"question": "National Insurance number",
"hint": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.",
"errors": [
"Error message goes here"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-test-name-with-error-and-hint\">\n National Insurance number\n </label>\n <div id=\"input-test-name-with-error-and-hint-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n <p id=\"input-test-name-with-error-and-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-test-name-with-error-and-hint\" name=\"test-name-with-error-and-hint\" type=\"text\" aria-describedby=\"input-test-name-with-error-and-hint-hint input-test-name-with-error-and-hint-error\">\n</div>"
},
{
"name": "classes",
"options": {
"form": {
"name": "test-name-classes",
"question": "National Insurance number"
},
"classes": "app-input--custom-modifier"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-test-name-classes\">\n National Insurance number\n </label>\n <input class=\"govuk-input app-input--custom-modifier\" id=\"input-test-name-classes\" name=\"test-name-classes\" type=\"text\">\n</div>"
},
{
"name": "attributes",
"options": {
"form": {
"name": "test-name-attributes",
"question": "National Insurance number"
},
"attributes": {
"tabindex": -1,
"data-attribute": "Noah"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-test-name-attributes\">\n National Insurance number\n </label>\n <input class=\"govuk-input\" id=\"input-test-name-attributes\" name=\"test-name-attributes\" type=\"text\" tabindex=\"-1\" data-attribute=\"Noah\">\n</div>"
},
{
"name": "label as page heading",
"options": {
"form": {
"name": "test-name-with-page-heading",
"question": "National Insurance number"
},
"label": {
"classes": "govuk-label--l",
"isPageHeading": true
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"input-test-name-with-page-heading\">\n National Insurance number\n </label>\n </h1>\n <input class=\"govuk-input\" id=\"input-test-name-with-page-heading\" name=\"test-name-with-page-heading\" type=\"text\">\n</div>"
}
]
}