govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
396 lines (395 loc) • 20.8 kB
JSON
{
"component": "file-upload",
"fixtures": [
{
"name": "default",
"options": {
"name": "file-upload-1",
"label": {
"text": "Upload a file"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": true,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
},
{
"name": "with hint text",
"options": {
"id": "file-upload-2",
"name": "file-upload-2",
"label": {
"text": "Upload your photo"
},
"hint": {
"text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-2\">\n Upload your photo\n </label>\n <div id=\"file-upload-2-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n <input class=\"govuk-file-upload\" id=\"file-upload-2\" name=\"file-upload-2\" type=\"file\" aria-describedby=\"file-upload-2-hint\">\n</div>"
},
{
"name": "with error message and hint",
"options": {
"id": "file-upload-3",
"name": "file-upload-3",
"label": {
"text": "Upload a file"
},
"hint": {
"text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
},
"errorMessage": {
"text": "Error message goes here"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload a file\n </label>\n <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n <p id=\"file-upload-3-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n</div>"
},
{
"name": "with label as page heading",
"options": {
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Upload a file",
"classes": "govuk-label--l",
"isPageHeading": true
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"file-upload-1\">\n Upload a file\n </label>\n </h1>\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
},
{
"name": "enhanced",
"options": {
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Upload a file"
},
"javascript": true
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": {
"variants": [
"default",
"no-js"
]
},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n </div>\n</div>"
},
{
"name": "enhanced, with error message and hint",
"options": {
"javascript": true,
"id": "file-upload-3",
"name": "file-upload-3",
"label": {
"text": "Upload a file"
},
"hint": {
"text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
},
"errorMessage": {
"text": "Error message goes here"
}
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload a file\n </label>\n <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n <p id=\"file-upload-3-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=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n </div>\n</div>"
},
{
"name": "enhanced, multiple files",
"options": {
"javascript": true,
"id": "file-upload-3",
"name": "file-upload-3",
"label": {
"text": "Upload files"
},
"multiple": true
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload files\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" multiple>\n </div>\n</div>"
},
{
"name": "with value",
"options": {
"id": "file-upload-4",
"name": "file-upload-4",
"value": "C:\\fakepath\\myphoto.jpg",
"label": {
"text": "Upload a photo"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-4\">\n Upload a photo\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-4\" name=\"file-upload-4\" type=\"file\">\n</div>"
},
{
"name": "attributes",
"options": {
"id": "file-upload-attributes",
"name": "file-upload-attributes",
"label": {
"text": "Upload a file"
},
"attributes": {
"accept": ".jpg, .jpeg, .png"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-attributes\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-attributes\" name=\"file-upload-attributes\" type=\"file\" accept=\".jpg, .jpeg, .png\">\n</div>"
},
{
"name": "classes",
"options": {
"id": "file-upload-classes",
"name": "file-upload-classes",
"label": {
"text": "Upload a file"
},
"classes": "app-file-upload--custom-modifier"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-classes\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"file-upload-classes\" name=\"file-upload-classes\" type=\"file\">\n</div>"
},
{
"name": "id",
"options": {
"id": "file-upload-id",
"name": "test-name",
"label": {
"text": "Upload a file"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-id\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-id\" name=\"test-name\" type=\"file\">\n</div>"
},
{
"name": "with describedBy",
"options": {
"id": "file-upload-describedby",
"name": "file-upload-describedby",
"label": {
"text": "Upload a file"
},
"describedBy": "test-target-element"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-describedby\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-describedby\" name=\"file-upload-describedby\" type=\"file\" aria-describedby=\"test-target-element\">\n</div>"
},
{
"name": "with hint and describedBy",
"options": {
"id": "file-upload-hint-describedby",
"name": "file-upload-hint-describedby",
"label": {
"text": "Upload a file"
},
"describedBy": "test-target-element",
"hint": {
"text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-hint-describedby\">\n Upload a file\n </label>\n <div id=\"file-upload-hint-describedby-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n <input class=\"govuk-file-upload\" id=\"file-upload-hint-describedby\" name=\"file-upload-hint-describedby\" type=\"file\" aria-describedby=\"test-target-element file-upload-hint-describedby-hint\">\n</div>"
},
{
"name": "error",
"options": {
"id": "file-upload-with-error",
"name": "file-upload-with-error",
"label": {
"text": "Upload a file"
},
"errorMessage": {
"text": "Error message"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-with-error\">\n Upload a file\n </label>\n <p id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"file-upload-with-error\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>"
},
{
"name": "with error and describedBy",
"options": {
"id": "file-upload-error-describedby",
"name": "file-upload-error-describedby",
"label": {
"text": "Upload a file"
},
"describedBy": "test-target-element",
"errorMessage": {
"text": "Error message"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-error-describedby\">\n Upload a file\n </label>\n <p id=\"file-upload-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby\" name=\"file-upload-error-describedby\" type=\"file\" aria-describedby=\"test-target-element file-upload-error-describedby-error\">\n</div>"
},
{
"name": "with error, describedBy and hint",
"options": {
"id": "file-upload-error-describedby-hint",
"name": "file-upload-error-describedby-hint",
"label": {
"text": "Upload a file"
},
"describedBy": "test-target-element",
"errorMessage": {
"text": "Error message"
},
"hint": {
"text": "hint"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-error-describedby-hint\">\n Upload a file\n </label>\n <div id=\"file-upload-error-describedby-hint-hint\" class=\"govuk-hint\">\n hint\n </div>\n <p id=\"file-upload-error-describedby-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby-hint\" name=\"file-upload-error-describedby-hint\" type=\"file\" aria-describedby=\"test-target-element file-upload-error-describedby-hint-hint file-upload-error-describedby-hint-error\">\n</div>"
},
{
"name": "translated, no javascript enhancement",
"options": {
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Llwythwch ffeil i fyny"
},
"multiple": true,
"chooseFilesButtonText": "Dewiswch ffeil",
"dropInstructionText": "neu ollwng ffeil",
"noFileChosenText": "Dim ffeil wedi'i dewis",
"multipleFilesChosenText": {
"other": "%{count} ffeil wedi'u dewis",
"one": "%{count} ffeil wedi'i dewis"
},
"enteredDropZoneText": "Wedi mynd i mewn i'r parth gollwng",
"leftDropZoneText": "Parth gollwng i'r chwith"
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Llwythwch ffeil i fyny\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n</div>"
},
{
"name": "allows multiple files",
"options": {
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Upload a file"
},
"multiple": true
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n</div>"
},
{
"name": "disabled",
"options": {
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Upload a file"
},
"disabled": true
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" disabled>\n</div>"
},
{
"name": "with optional form-group classes",
"options": {
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Upload a file"
},
"formGroup": {
"classes": "extra-class"
}
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
},
{
"name": "translated",
"options": {
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Llwythwch ffeil i fyny"
},
"multiple": true,
"javascript": true,
"chooseFilesButtonText": "Dewiswch ffeil",
"dropInstructionText": "neu ollwng ffeil",
"noFileChosenText": "Dim ffeil wedi'i dewis",
"multipleFilesChosenText": {
"other": "%{count} ffeil wedi'u dewis",
"one": "%{count} ffeil wedi'i dewis"
},
"enteredDropZoneText": "Wedi mynd i mewn i'r parth gollwng",
"leftDropZoneText": "Parth gollwng i'r chwith"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Llwythwch ffeil i fyny\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\" data-i18n.choose-files-button=\"Dewiswch ffeil\" data-i18n.no-file-chosen=\"Dim ffeil wedi'i dewis\" data-i18n.multiple-files-chosen.other=\"%{count} ffeil wedi'u dewis\" data-i18n.multiple-files-chosen.one=\"%{count} ffeil wedi'i dewis\" data-i18n.drop-instruction=\"neu ollwng ffeil\" data-i18n.entered-drop-zone=\"Wedi mynd i mewn i'r parth gollwng\" data-i18n.left-drop-zone=\"Parth gollwng i'r chwith\">\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n </div>\n</div>"
}
]
}