UNPKG

digitalmarketplace-frontend

Version:

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

197 lines (196 loc) 18 kB
{ "component": "question-boolean", "fixtures": [ { "name": "default", "options": { "question": { "id": "example", "question": "Here is the service question" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\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 <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\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 <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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 class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>" }, { "name": "with question advice and hint", "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" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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 </div>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>" }, { "name": "with data", "options": { "question": { "id": "example", "question": "Here is the service question" }, "data": { "example": true } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\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 <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (optional)\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\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 <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (if applicable)\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>" }, { "name": "with error message", "options": { "question": { "id": "example", "question": "Here is the service question" }, "errors": { "example": { "message": "You must select an option" } } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select an option\n </p>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\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 select an option" } } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-hint input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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 select an option\n </p>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>" }, { "name": "with previous framework", "options": { "question": { "id": "example", "question": "Here is the service question" }, "data": { "example": true }, "frameworkReusedFrom": "G-Cloud 12" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"govuk-form-group govuk-form-group--error dm-form-group--declaration-reuse\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\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 class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\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 <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>" }, { "name": "with previous framework and error message", "options": { "question": { "id": "example", "question": "Here is the service question" }, "data": { "example": true }, "errors": { "example": { "message": "You must select an option" } }, "frameworkReusedFrom": "G-Cloud 12" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"input-example-error\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must select an option\n </p>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>" } ] }