{
    "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&#39;i dewis\" data-i18n.multiple-files-chosen.other=\"%{count} ffeil wedi&#39;u dewis\" data-i18n.multiple-files-chosen.one=\"%{count} ffeil wedi&#39;i dewis\" data-i18n.drop-instruction=\"neu ollwng ffeil\" data-i18n.entered-drop-zone=\"Wedi mynd i mewn i&#39;r parth gollwng\" data-i18n.left-drop-zone=\"Parth gollwng i&#39;r chwith\">\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n  </div>\n</div>"
        }
    ]
}