{
    "component": "question-upload",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n  </div>\n</div>"
        },
        {
            "name": "with hint",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "hint": "This is a hint for the question"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    This is a hint for the question\n  </div>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n  </div>\n</div>"
        },
        {
            "name": "with question advice",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "question_advice": "Here is the question advice"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    <div class=\"govuk-body\">\n          Here is the question advice\n        </div>\n  </div>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n  </div>\n</div>"
        },
        {
            "name": "with hidden",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "hidden": true
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n  </div>\n</div>"
        },
        {
            "name": "with data",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "data": {
                    "example": "https://example.come/123456-document-2022-07-29-0000.pdf"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    <input type=\"hidden\" id=\"input-example-upload\" name=\"example-upload\" value=\"https://example.come/123456-document-2022-07-29-0000.pdf\">\n          <ul class=\"dm-document-upload-list\">\n            <li class=\"dm-document-list-item\">\n              <div class=\"govuk-grid-row\">\n                <div class=\"govuk-grid-column-full\">\n                  <div class=\"dm-document-upload-with-icon\">\n                    <span class=\"dm-document-icon\"></span>\n                    Document uploaded Friday 29 July 2022 at 1:00am BST\n                  </div>\n                </div>\n              </div>\n            </li>\n          </ul>\n  </div>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n  </div>\n</div>"
        },
        {
            "name": "with optional",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "optional": true
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question (optional)\n  </label>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n  </div>\n</div>"
        },
        {
            "name": "with optional and data",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "optional": true
                },
                "data": {
                    "example": "https://example.come/123456-document-2022-07-29-0000.pdf"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question (optional)\n  </label>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    <input type=\"hidden\" id=\"input-example-upload\" name=\"example-upload\" value=\"https://example.come/123456-document-2022-07-29-0000.pdf\">\n          <ul class=\"dm-document-upload-list\">\n            <li class=\"dm-document-list-item\">\n              <div class=\"govuk-grid-row\">\n                <div class=\"govuk-grid-column-two-thirds\">\n                  <div class=\"dm-document-upload-with-icon\">\n                    <span class=\"dm-document-icon\"></span>\n                    Document uploaded Friday 29 July 2022 at 1:00am BST\n                  </div>\n                </div>\n                  <div class=\"govuk-grid-column-one-third\">\n                    <button value=\"example\" type=\"submit\" name=\"remove-upload\" data-prevent-double-click=\"true\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n      Remove upload\n    </button>\n                  </div>\n              </div>\n            </li>\n          </ul>\n  </div>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n  </div>\n</div>"
        },
        {
            "name": "with optional text",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "optional": true,
                    "optional_text": "if applicable"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question (if applicable)\n  </label>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n  </div>\n</div>"
        },
        {
            "name": "with question advice, hint and data",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "question_advice": "<p class=\"govuk-body-l\">Here is the question advice</p>\n",
                    "hint": "<div class=\"hint-in-html\">This is a hint for the question</div>\n"
                },
                "data": {
                    "example": "https://example.come/123456-document-2022-07-29-0000.pdf"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    <div class=\"govuk-body\">\n          <p class=\"govuk-body-l\">Here is the question advice</p>\n    \n        </div>\n        <div class=\"hint-in-html\">This is a hint for the question</div>\n    \n    \n          <input type=\"hidden\" id=\"input-example-upload\" name=\"example-upload\" value=\"https://example.come/123456-document-2022-07-29-0000.pdf\">\n          <ul class=\"dm-document-upload-list\">\n            <li class=\"dm-document-list-item\">\n              <div class=\"govuk-grid-row\">\n                <div class=\"govuk-grid-column-full\">\n                  <div class=\"dm-document-upload-with-icon\">\n                    <span class=\"dm-document-icon\"></span>\n                    Document uploaded Friday 29 July 2022 at 1:00am BST\n                  </div>\n                </div>\n              </div>\n            </li>\n          </ul>\n  </div>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint\">\n  </div>\n</div>"
        },
        {
            "name": "with error message",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "errors": {
                    "example": {
                        "message": "You must upload a file"
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <p id=\"input-example-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You must upload a file\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-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-error\">\n  </div>\n</div>"
        },
        {
            "name": "with hint and error message",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question",
                    "hint": "This is a hint for the question"
                },
                "errors": {
                    "example": {
                        "message": "You must upload a file"
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    This is a hint for the question\n  </div>\n  <p id=\"input-example-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You must upload a file\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-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint input-example-error\">\n  </div>\n</div>"
        },
        {
            "name": "with previous framework",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "data": {
                    "example": "https://example.come/123456-document-2022-07-29-0000.pdf"
                },
                "frameworkReusedFrom": "G-Cloud 12"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    <input type=\"hidden\" id=\"input-example-upload\" name=\"example-upload\" value=\"https://example.come/123456-document-2022-07-29-0000.pdf\">\n          <ul class=\"dm-document-upload-list\">\n            <li class=\"dm-document-list-item\">\n              <div class=\"govuk-grid-row\">\n                <div class=\"govuk-grid-column-full\">\n                  <div class=\"dm-document-upload-with-icon\">\n                    <span class=\"dm-document-icon\"></span>\n                    Document uploaded Friday 29 July 2022 at 1:00am BST\n                  </div>\n                </div>\n              </div>\n            </li>\n          </ul>\n  </div>\n  <p id=\"input-example-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\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-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint input-example-error\">\n  </div>\n</div>"
        },
        {
            "name": "with previous framework without data",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "frameworkReusedFrom": "G-Cloud 12"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n  </div>\n</div>"
        },
        {
            "name": "with previous framework and error message",
            "options": {
                "question": {
                    "id": "example",
                    "question": "Here is the service question"
                },
                "data": {
                    "example": "https://example.come/123456-document-2022-07-29-0000.pdf"
                },
                "errors": {
                    "example": {
                        "message": "You must upload a file"
                    }
                },
                "frameworkReusedFrom": "G-Cloud 12"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Here is the service question\n  </label>\n  <div id=\"input-example-hint\" class=\"govuk-hint\">\n    <input type=\"hidden\" id=\"input-example-upload\" name=\"example-upload\" value=\"https://example.come/123456-document-2022-07-29-0000.pdf\">\n          <ul class=\"dm-document-upload-list\">\n            <li class=\"dm-document-list-item\">\n              <div class=\"govuk-grid-row\">\n                <div class=\"govuk-grid-column-full\">\n                  <div class=\"dm-document-upload-with-icon\">\n                    <span class=\"dm-document-icon\"></span>\n                    Document uploaded Friday 29 July 2022 at 1:00am BST\n                  </div>\n                </div>\n              </div>\n            </li>\n          </ul>\n  </div>\n  <p id=\"input-example-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You must upload a file\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-example\" name=\"example\" type=\"file\" aria-describedby=\"input-example-hint input-example-error\">\n  </div>\n</div>"
        }
    ]
}