digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
145 lines (144 loc) • 8.65 kB
JSON
{
"component": "file-upload-from-form",
"fixtures": [
{
"name": "default",
"options": {
"form": {
"name": "test-name",
"question": "Upload your CV"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-test-name\">\n Upload your CV\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"input-test-name\" name=\"test-name\" type=\"file\">\n </div>\n</div>"
},
{
"name": "with hint text",
"options": {
"form": {
"name": "test-name-with-hint",
"question": "Upload your CV",
"hint": "It’s the thing with your work history"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-test-name-with-hint\">\n Upload your CV\n </label>\n <div id=\"input-test-name-with-hint-hint\" class=\"govuk-hint\">\n It’s the thing with your work history\n </div>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"input-test-name-with-hint\" name=\"test-name-with-hint\" type=\"file\" aria-describedby=\"input-test-name-with-hint-hint\">\n </div>\n</div>"
},
{
"name": "with custom hint",
"options": {
"form": {
"name": "test-name-with-hint",
"question": "Upload your CV",
"hint": "It’s the thing with your work history"
},
"hint": {
"html": "<p>I am a custom hint</p>"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-test-name-with-hint\">\n Upload your CV\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 <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"input-test-name-with-hint\" name=\"test-name-with-hint\" type=\"file\" aria-describedby=\"input-test-name-with-hint-hint\">\n </div>\n</div>"
},
{
"name": "with error message",
"options": {
"form": {
"name": "test-name-with-error",
"question": "Upload your CV",
"errors": [
"Error message goes here"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-test-name-with-error\">\n Upload your CV\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 <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"input-test-name-with-error\" name=\"test-name-with-error\" type=\"file\" aria-describedby=\"input-test-name-with-error-error\">\n </div>\n</div>"
},
{
"name": "value",
"options": {
"form": {
"name": "test-name-with-value",
"question": "Upload your CV",
"data": "/path/to/attachment_1.pdf"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-test-name-with-value\">\n Upload your CV\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"input-test-name-with-value\" name=\"test-name-with-value\" type=\"file\" value=\"/path/to/attachment_1.pdf\">\n </div>\n</div>"
},
{
"name": "with error and hint",
"options": {
"form": {
"name": "test-name-with-error-and-hint",
"question": "Upload your CV",
"hint": "It’s the thing with your work history",
"errors": [
"Error message goes here"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-test-name-with-error-and-hint\">\n Upload your CV\n </label>\n <div id=\"input-test-name-with-error-and-hint-hint\" class=\"govuk-hint\">\n It’s the thing with your work history\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 <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"input-test-name-with-error-and-hint\" name=\"test-name-with-error-and-hint\" type=\"file\" aria-describedby=\"input-test-name-with-error-and-hint-hint input-test-name-with-error-and-hint-error\">\n </div>\n</div>"
},
{
"name": "classes",
"options": {
"form": {
"name": "test-name-classes",
"question": "Upload your CV"
},
"classes": "app-file-upload--custom-modifier"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-test-name-classes\">\n Upload your CV\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"input-test-name-classes\" name=\"test-name-classes\" type=\"file\">\n </div>\n</div>"
},
{
"name": "attributes",
"options": {
"form": {
"name": "test-name-attributes",
"question": "Upload your CV"
},
"attributes": {
"tabindex": -1,
"data-attribute": "Jin"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-test-name-attributes\">\n Upload your CV\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"input-test-name-attributes\" name=\"test-name-attributes\" type=\"file\" tabindex=\"-1\" data-attribute=\"Jin\">\n </div>\n</div>"
},
{
"name": "label as page heading",
"options": {
"form": {
"name": "test-name-with-page-heading",
"question": "Upload your CV"
},
"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 Upload your CV\n </label>\n </h1>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"input-test-name-with-page-heading\" name=\"test-name-with-page-heading\" type=\"file\">\n </div>\n</div>"
}
]
}