{
    "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>"
        }
    ]
}