digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
215 lines (214 loc) • 18.5 kB
JSON
{
"component": "question-list-multiquestion",
"fixtures": [
{
"name": "default",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 5,
"questions": [
{
"id": "listMultiquestion0",
"question": "I am question 1",
"questions": [
{
"type": "text",
"id": "listMultiquestionText00",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText01",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion1",
"question": "I am question 2",
"questions": [
{
"type": "text",
"id": "listMultiquestionText10",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText11",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion2",
"question": "I am question 3",
"questions": [
{
"type": "text",
"id": "listMultiquestionText20",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText21",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion3",
"question": "I am question 4",
"questions": [
{
"type": "text",
"id": "listMultiquestionText30",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText31",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion4",
"question": "I am question 5",
"questions": [
{
"type": "text",
"id": "listMultiquestionText40",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText41",
"question": "Here is the second question"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"5\" id=\"input-listMultiquestion\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Enter as many items as needed\n </legend>\n\n <div class=\"dm-list-multiquestion__items\">\n <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n I am question 1\n </legend>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText00\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText00\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText00\" name=\"listMultiquestionText00\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText01\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText01\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText01\" name=\"listMultiquestionText01\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n\n</fieldset>\n </div> <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n I am question 2\n </legend>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText10\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText10\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText10\" name=\"listMultiquestionText10\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText11\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText11\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText11\" name=\"listMultiquestionText11\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n\n</fieldset>\n </div> <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n I am question 3\n </legend>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText20\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText20\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText20\" name=\"listMultiquestionText20\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText21\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText21\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText21\" name=\"listMultiquestionText21\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n\n</fieldset>\n </div> <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n I am question 4\n </legend>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText30\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText30\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText30\" name=\"listMultiquestionText30\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText31\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText31\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText31\" name=\"listMultiquestionText31\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n\n</fieldset>\n </div> <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n I am question 5\n </legend>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText40\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText40\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText40\" name=\"listMultiquestionText40\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText41\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText41\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText41\" name=\"listMultiquestionText41\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n\n</fieldset>\n </div> </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove<span class=\"govuk-visually-hidden\"> item <span class=\"dm-list-multiquestion__item-remove-counter\">0</span></span>\n</button>\n </div>\n </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add (<span class=\"dm-list-multiquestion__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>"
},
{
"name": "with server side options",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 5,
"questions": [
{
"id": "listMultiquestion0",
"question": "I am question 1",
"questions": [
{
"type": "text",
"id": "listMultiquestionText00",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText01",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
},
{
"id": "listMultiquestion1",
"question": "I am question 2",
"questions": [
{
"type": "text",
"id": "listMultiquestionText10",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText11",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
},
{
"id": "listMultiquestion2",
"question": "I am question 3",
"questions": [
{
"type": "text",
"id": "listMultiquestionText20",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText21",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
},
{
"id": "listMultiquestion3",
"question": "I am question 4",
"questions": [
{
"type": "text",
"id": "listMultiquestionText30",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText31",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
},
{
"id": "listMultiquestion4",
"question": "I am question 5",
"questions": [
{
"type": "text",
"id": "listMultiquestionText40",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText41",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
}
]
},
"server_side_options": {
"add_endpoint": "main.add_item",
"remove_endpoint": "main.remove_item",
"endpoint_values": {
"section_id": "questions"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" id=\"input-listMultiquestion\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Enter as many items as needed\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <a href=\"/suppliers/add-item/questions/listMultiquestion/0\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-add\" data-module=\"govuk-button\">\n Add (5 remaining)\n</a>\n </div>\n </div>\n\n</fieldset>\n</div>"
}
]
}