digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
179 lines (178 loc) • 16.5 kB
JSON
{
"component": "question-multiquestion",
"fixtures": [
{
"name": "default",
"options": {
"question": {
"id": "multiquestion",
"questions": [
{
"type": "text",
"id": "multiquestionText",
"question": "Here is the service question"
},
{
"type": "radios",
"id": "multiquestionRadios",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
},
{
"type": "textbox_large",
"id": "multiquestionTextbox",
"question": "Here is the service question",
"max_length_in_words": 500
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"multiquestionText\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionText\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-multiquestionText\" name=\"multiquestionText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionRadios\"\n>\n \n\n\n\n\n\n<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\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-2\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-3\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-3\">\n Option 3\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionTextbox\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-multiquestionTextbox\" name=\"multiquestionTextbox\" rows=\"5\" aria-describedby=\"input-multiquestionTextbox-info\"></textarea>\n <div id=\"input-multiquestionTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n\n</fieldset>"
},
{
"name": "within multiquestion",
"options": {
"question": {
"id": "multiquestion",
"question": "Here is the multiquestion",
"questions": [
{
"type": "text",
"id": "multiquestionText",
"question": "Here is the text multiquestion"
},
{
"type": "multiquestion",
"id": "multiquestionInMultiquestion",
"question": "Here is the multiquestion within another multiquestion",
"questions": [
{
"type": "text",
"id": "innerMultiquestionText1",
"question": "Here is the inner multiquestion text 1"
},
{
"type": "text",
"id": "innerMultiquestionText2",
"question": "Here is the inner multiquestion text 2"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the multiquestion\n </legend>\n\n <div\n class=\"question \"\n id=\"multiquestionText\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionText\">\n Here is the text multiquestion\n </label>\n <input class=\"govuk-input\" id=\"input-multiquestionText\" name=\"multiquestionText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionInMultiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the multiquestion within another multiquestion\n </legend>\n\n <div\n class=\"question \"\n id=\"innerMultiquestionText1\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-innerMultiquestionText1\">\n Here is the inner multiquestion text 1\n </label>\n <input class=\"govuk-input\" id=\"input-innerMultiquestionText1\" name=\"innerMultiquestionText1\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"innerMultiquestionText2\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-innerMultiquestionText2\">\n Here is the inner multiquestion text 2\n </label>\n <input class=\"govuk-input\" id=\"input-innerMultiquestionText2\" name=\"innerMultiquestionText2\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>\n\n\n</fieldset>"
},
{
"name": "with question advice",
"options": {
"question": {
"id": "multiquestion",
"question": "Here is the multiquestion",
"question_advice": "Here is the question advice",
"questions": [
{
"type": "text",
"id": "multiquestionText",
"question": "Here is the service question"
},
{
"type": "radios",
"id": "multiquestionRadios",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
},
{
"type": "textbox_large",
"id": "multiquestionTextbox",
"question": "Here is the service question",
"max_length_in_words": 500
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the multiquestion\n </legend>\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n\n <div\n class=\"question \"\n id=\"multiquestionText\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionText\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-multiquestionText\" name=\"multiquestionText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionRadios\"\n>\n \n\n\n\n\n\n<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\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-2\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-3\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-3\">\n Option 3\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionTextbox\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-multiquestionTextbox\" name=\"multiquestionTextbox\" rows=\"5\" aria-describedby=\"input-multiquestionTextbox-info\"></textarea>\n <div id=\"input-multiquestionTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n\n</fieldset>"
},
{
"name": "with question advice as html",
"options": {
"question": {
"id": "multiquestion",
"question": "Here is the multiquestion",
"question_advice": "<p class=\"govuk-body-l\">Here is the question advice</p>\n",
"questions": [
{
"type": "text",
"id": "multiquestionText",
"question": "Here is the service question"
},
{
"type": "radios",
"id": "multiquestionRadios",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
},
{
"type": "textbox_large",
"id": "multiquestionTextbox",
"question": "Here is the service question",
"max_length_in_words": 500
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the multiquestion\n </legend>\n <div class=\"govuk-body\">\n <p class=\"govuk-body-l\">Here is the question advice</p>\n\n </div>\n\n <div\n class=\"question \"\n id=\"multiquestionText\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionText\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-multiquestionText\" name=\"multiquestionText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionRadios\"\n>\n \n\n\n\n\n\n<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\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-2\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-3\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-3\">\n Option 3\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionTextbox\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-multiquestionTextbox\" name=\"multiquestionTextbox\" rows=\"5\" aria-describedby=\"input-multiquestionTextbox-info\"></textarea>\n <div id=\"input-multiquestionTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n\n</fieldset>"
}
]
}