digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
344 lines (343 loc) • 16.8 kB
JSON
{
"component": "select-from-form",
"fixtures": [
{
"name": "default",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n Label text goes here\n </label>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "classes",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
]
},
"classes": "my-special-class"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n Label text goes here\n </label>\n <select class=\"govuk-select my-special-class\" id=\"select-1\" name=\"select-1\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "attributes",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
]
},
"attributes": {
"general": "kenobi",
"data-attribute": "Matthew"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n Label text goes here\n </label>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\" general=\"kenobi\" data-attribute=\"Matthew\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "with label as page heading",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
]
},
"label": {
"classes": "govuk-label--l",
"isPageHeading": true
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"select-1\">\n Label text goes here\n </label>\n </h1>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "with hint",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
],
"hint": "Hint text goes here"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n Label text goes here\n </label>\n <div id=\"select-1-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\" aria-describedby=\"select-1-hint\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "with custom hint",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
],
"hint": "Hint text goes here"
},
"hint": {
"html": "<p>I am a custom hint</p>"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n Label text goes here\n </label>\n <div id=\"select-1-hint\" class=\"govuk-hint\">\n <p>I am a custom hint</p>\n </div>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\" aria-describedby=\"select-1-hint\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "with error message",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
],
"errors": [
"Please 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=\"select-1\">\n Label text goes here\n </label>\n <p id=\"select-1-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <select class=\"govuk-select govuk-select--error\" id=\"select-1\" name=\"select-1\" aria-describedby=\"select-1-error\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "with hint and error message",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
],
"hint": "Hint text goes here",
"errors": [
"Please 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=\"select-1\">\n Label text goes here\n </label>\n <div id=\"select-1-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n <p id=\"select-1-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <select class=\"govuk-select govuk-select--error\" id=\"select-1\" name=\"select-1\" aria-describedby=\"select-1-hint select-1-error\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "with selected item",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
],
"data": 2
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n Label text goes here\n </label>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n <option value=\"3\">GOV.UK frontend option 3</option>\n </select>\n</div>"
},
{
"name": "with overwritten items",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1"
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3"
}
]
},
"items": [
{
"value": 3,
"text": "GOV.UK frontend option 3"
},
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2"
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n Label text goes here\n </label>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n <option value=\"3\">GOV.UK frontend option 3</option>\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n </select>\n</div>"
},
{
"name": "with additionl item attributes",
"options": {
"form": {
"name": "select-1",
"question": "Label text goes here",
"options": [
{
"value": 1,
"label": "GOV.UK frontend option 1",
"attributes": {
"id": "value-for-1",
"data-test": "attribute for 1"
}
},
{
"value": 2,
"label": "GOV.UK frontend option 2"
},
{
"value": 3,
"label": "GOV.UK frontend option 3",
"disabled": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"select-1\">\n Label text goes here\n </label>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n <option value=\"1\" id=\"value-for-1\" data-test=\"attribute for 1\">GOV.UK frontend option 1</option>\n <option value=\"2\">GOV.UK frontend option 2</option>\n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n </select>\n</div>"
}
]
}