digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
450 lines (449 loc) • 23.1 kB
JSON
{
"component": "question-select",
"fixtures": [
{
"name": "default",
"options": {
"question": {
"id": "example",
"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"
}
]
}
},
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "without value",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1"
},
{
"label": "Option 2"
},
{
"label": "Option 3"
}
]
}
},
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"\"></option>\n <option value=\"Option 1\">Option 1</option>\n <option value=\"Option 2\">Option 2</option>\n <option value=\"Option 3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "default select",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"default_option": {
"label": "Select an option"
},
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
}
},
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"Select an option\">Select an option</option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "default with value",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"default_option": {
"label": "Option 0",
"value": "option-0"
},
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
}
},
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"option-0\">Option 0</option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with optional",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"optional": true,
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
}
},
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with optional text",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"optional": true,
"optional_text": "if applicable",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
}
},
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with hint",
"options": {
"question": {
"id": "example",
"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"
}
],
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\" aria-describedby=\"input-example-hint\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with question advice",
"options": {
"question": {
"id": "example",
"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"
}
],
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\" aria-describedby=\"input-example-hint\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with question advice and hint",
"options": {
"question": {
"id": "example",
"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"
}
],
"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 <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 </div>\n <select class=\"govuk-select\" id=\"input-example\" name=\"example\" aria-describedby=\"input-example-hint\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with data",
"options": {
"question": {
"id": "example",
"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"
}
]
},
"data": {
"example": "option-2"
}
},
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\" selected>Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with error message",
"options": {
"question": {
"id": "example",
"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"
}
]
},
"errors": {
"example": {
"message": "You must select an option"
}
}
},
"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 select an option\n </p>\n <select class=\"govuk-select govuk-select--error\" id=\"input-example\" name=\"example\" aria-describedby=\"input-example-error\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with hint and error message",
"options": {
"question": {
"id": "example",
"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"
}
],
"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 <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 select an option\n </p>\n <select class=\"govuk-select govuk-select--error\" id=\"input-example\" name=\"example\" aria-describedby=\"input-example-hint input-example-error\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with previous framework",
"options": {
"question": {
"id": "example",
"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"
}
]
},
"data": {
"example": "option-2"
},
"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 <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 <select class=\"govuk-select govuk-select--error\" id=\"input-example\" name=\"example\" aria-describedby=\"input-example-error\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\" selected>Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with previous framework without data",
"options": {
"question": {
"id": "example",
"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"
}
]
},
"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 <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
},
{
"name": "with previous framework and error message",
"options": {
"question": {
"id": "example",
"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"
}
]
},
"data": {
"example": "option-2"
},
"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 <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 select an option\n </p>\n <select class=\"govuk-select govuk-select--error\" id=\"input-example\" name=\"example\" aria-describedby=\"input-example-error\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\" selected>Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>"
}
]
}