navody-digital-frontend
Version:
Navody.Digital Frontend contains the code you need to start building a user interface for navody.digital
327 lines • 16 kB
JSON
{
"component": "select",
"fixtures": [
{
"name": "default",
"options": {
"id": "select-1",
"name": "select-1",
"label": {
"text": "Label text goes here"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2",
"selected": true
},
{
"value": 3,
"text": "GOV.UK frontend option 3",
"disabled": true
}
]
},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
"hidden": false
},
{
"name": "with hint text and error message",
"options": {
"id": "select-2",
"name": "select-2",
"label": {
"text": "Label text goes here"
},
"hint": {
"text": "Hint text goes here"
},
"errorMessage": {
"text": "Error message goes here"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2"
},
{
"value": 3,
"text": "GOV.UK frontend option 3"
}
]
},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"select-2\">\n Label text goes here\n </label>\n\n \n \n <div id=\"select-2-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n \n \n <span id=\"select-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\">GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
"hidden": false
},
{
"name": "with label as page heading",
"options": {
"id": "select-3",
"name": "select-3",
"label": {
"text": "Label text goes here",
"isPageHeading": true
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2",
"selected": true
},
{
"value": 3,
"text": "GOV.UK frontend option 3",
"disabled": true
}
]
},
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"select-3\">\n Label text goes here\n </label>\n </h1>\n\n\n <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
"hidden": false
},
{
"name": "with full width override",
"options": {
"id": "select-1",
"name": "select-1",
"classes": "govuk-!-width-full",
"label": {
"text": "Label text goes here"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2",
"selected": true
},
{
"value": 3,
"text": "GOV.UK frontend option 3",
"disabled": true
}
]
},
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
"hidden": false
},
{
"name": "with optional form-group classes",
"options": {
"id": "select-1",
"name": "select-1",
"classes": "govuk-!-width-full",
"label": {
"text": "Label text goes here"
},
"formGroup": {
"classes": "extra-class"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2",
"selected": true
},
{
"value": 3,
"text": "GOV.UK frontend option 3",
"disabled": true
}
]
},
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n\n\n <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n \n \n \n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n \n \n </select>\n</div>",
"hidden": false
},
{
"name": "with describedBy",
"options": {
"id": "with-describedby",
"name": "with-describedby",
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2"
}
],
"describedBy": "some-id"
},
"html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"hidden": true
},
{
"name": "attributes",
"options": {
"id": "with-attributes",
"name": "with-attributes",
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2"
}
],
"attributes": {
"data-attribute": "my data value"
}
},
"html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"hidden": true
},
{
"name": "attributes on items",
"options": {
"id": "with-item-attributes",
"name": "with-item-attributes",
"value": 2,
"items": [
{
"text": "Option 1",
"value": 1,
"attributes": {
"data-attribute": "ABC",
"data-second-attribute": "DEF"
}
},
{
"text": "Option 2",
"value": 2,
"attributes": {
"data-attribute": "GHI",
"data-second-attribute": "JKL"
}
}
]
},
"html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n \n \n <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n \n \n \n <option value=\"2\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n \n \n </select>\n</div>",
"hidden": true
},
{
"name": "with falsey values",
"options": {
"id": "with-falsey-values",
"name": "with-falsey-values",
"items": [
{
"text": "Option 1",
"value": 1
},
null,
false,
"",
{
"text": "Options 2",
"value": 2
}
]
},
"html": "<div class=\"govuk-form-group\">\n \n\n\n <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n \n \n <option value=\"1\">Option 1</option>\n \n \n \n \n \n \n \n \n \n <option value=\"2\">Options 2</option>\n \n \n </select>\n</div>",
"hidden": true
},
{
"name": "hint",
"options": {
"id": "select-with-hint",
"name": "select-with-hint",
"hint": {
"text": "Hint text goes here"
}
},
"html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n \n </select>\n</div>",
"hidden": true
},
{
"name": "hint and describedBy",
"options": {
"id": "select-with-hint",
"name": "select-with-hint",
"describedBy": "some-id",
"hint": {
"text": "Hint text goes here"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2"
}
]
},
"html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n Hint text goes here\n </div>\n\n\n <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"hidden": true
},
{
"name": "error",
"options": {
"id": "select-with-error",
"name": "select-with-error",
"errorMessage": {
"text": "Error message"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2"
}
]
},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"hidden": true
},
{
"name": "error and describedBy",
"options": {
"id": "select-with-error",
"name": "select-with-error",
"describedBy": "some-id",
"errorMessage": {
"text": "Error message"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2"
}
]
},
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n \n \n <option value=\"1\">GOV.UK frontend option 1</option>\n \n \n \n <option value=\"2\">GOV.UK frontend option 2</option>\n \n \n </select>\n</div>",
"hidden": true
}
]
}