UNPKG

digitalmarketplace-frontend

Version:

Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects

231 lines (230 loc) 17.8 kB
{ "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>" } ] }