govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
327 lines (326 loc) • 18.4 kB
JSON
{
"component": "error-summary",
"fixtures": [
{
"name": "default",
"options": {
"titleText": "There is a problem",
"errorList": [
{
"text": "The date your passport was issued must be in the past",
"href": "#example-error-1"
},
{
"text": "Enter a postcode, like AA1 1AA",
"href": "#example-error-2"
}
]
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": true,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n </li>\n <li>\n <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "without links",
"options": {
"titleText": "There is a problem",
"errorList": [
{
"text": "Invalid username or password"
}
]
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "mixed with and without links",
"options": {
"titleText": "There is a problem",
"errorList": [
{
"text": "Invalid username or password"
},
{
"text": "Agree to the terms of service to log in",
"href": "#example-error-1"
}
]
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n <li>\n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "with description only",
"options": {
"titleText": "There is a problem",
"descriptionText": "The file couldn't be loaded. Try again later."
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <p>\n The file couldn't be loaded. Try again later.\n </p>\n </div>\n </div>\n</div>"
},
{
"name": "with everything",
"options": {
"titleText": "There is a problem",
"descriptionText": "Please fix the errors below.",
"errorList": [
{
"text": "Invalid username or password"
},
{
"text": "Agree to the terms of service to log in",
"href": "#example-error-1"
}
]
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": true,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <p>\n Please fix the errors below.\n </p>\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n <li>\n <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "html as titleText",
"options": {
"titleText": "Alert, <em>alert</em>",
"errorList": [
{
"text": "Invalid username or password"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n Alert, <em>alert</em>\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "title html",
"options": {
"titleHtml": "Alert, <em>alert</em>",
"errorList": [
{
"text": "Invalid username or password"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n Alert, <em>alert</em>\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "description",
"options": {
"titleText": "There is a problem",
"descriptionText": "Lorem ipsum",
"errorList": [
{
"text": "Invalid username or password"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <p>\n Lorem ipsum\n </p>\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "html as descriptionText",
"options": {
"titleText": "There is a problem",
"descriptionText": "See errors below (>)",
"errorList": [
{
"text": "Invalid username or password"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <p>\n See errors below (>)\n </p>\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "description html",
"options": {
"titleText": "There is a problem",
"descriptionHtml": "See <span>errors</span> below",
"errorList": [
{
"text": "Invalid username or password"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <p>\n See <span>errors</span> below\n </p>\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "classes",
"options": {
"titleText": "There is a problem",
"classes": "extra-class one-more-class",
"errorList": [
{
"text": "Invalid username or password"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary extra-class one-more-class\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "attributes",
"options": {
"titleText": "There is a problem",
"attributes": {
"first-attribute": "foo",
"second-attribute": "bar"
},
"errorList": [
{
"text": "Invalid username or password"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Invalid username or password\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "error list with attributes",
"options": {
"titleText": "There is a problem",
"errorList": [
{
"text": "Error-1",
"href": "#item",
"attributes": {
"data-attribute": "my-attribute",
"data-attribute-2": "my-attribute-2"
}
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "error list with html as text",
"options": {
"titleText": "There is a problem",
"errorList": [
{
"text": "Descriptive link to the <b>question</b> with an error"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n Descriptive link to the <b>question</b> with an error\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "error list with html",
"options": {
"titleText": "There is a problem",
"errorList": [
{
"html": "The date your passport was issued <b>must</b> be in the past"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n The date your passport was issued <b>must</b> be in the past\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "error list with html link",
"options": {
"titleText": "There is a problem",
"errorList": [
{
"html": "Descriptive link to the <b>question</b> with an error",
"href": "#error-1"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "error list with html as text link",
"options": {
"titleText": "There is a problem",
"errorList": [
{
"text": "Descriptive link to the <b>question</b> with an error",
"href": "#error-1"
}
]
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n </li>\n </ul>\n </div>\n </div>\n</div>"
},
{
"name": "autofocus disabled",
"options": {
"titleText": "There is a problem",
"disableAutoFocus": true
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"true\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n </div>\n </div>\n</div>"
},
{
"name": "autofocus explicitly enabled",
"options": {
"titleText": "There is a problem",
"disableAutoFocus": false
},
"hidden": true,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"false\" data-module=\"govuk-error-summary\">\n <div role=\"alert\">\n <h2 class=\"govuk-error-summary__title\">\n There is a problem\n </h2>\n <div class=\"govuk-error-summary__body\">\n </div>\n </div>\n</div>"
}
]
}