digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
70 lines (69 loc) • 6.54 kB
JSON
{
"component": "previous-next-pagination",
"fixtures": [
{
"name": "default",
"options": {
"previousPage": {
"url": "#",
"title": "Previous page"
},
"nextPage": {
"url": "#",
"title": "Next page"
}
},
"hidden": false,
"description": "Displaying previous and next links",
"previewLayoutModifiers": [],
"html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Pagination\">\n <div class=\"govuk-pagination__prev\">\n <a class=\"govuk-link govuk-pagination__link\" href=\"#\" rel=\"prev\">\n <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n </svg>\n <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">\n Previous page\n </span>\n </a>\n </div>\n <div class=\"govuk-pagination__next\">\n <a class=\"govuk-link govuk-pagination__link\" href=\"#\" rel=\"next\">\n <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n </svg>\n <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">\n Next page\n </span>\n </a>\n </div>\n</nav>"
},
{
"name": "with labels",
"options": {
"previousPage": {
"url": "#",
"title": "Previous page",
"label": "2 of 432"
},
"nextPage": {
"url": "#",
"title": "Next page",
"label": "4 of 432"
}
},
"hidden": false,
"description": "Displaying previous and next links with labels",
"previewLayoutModifiers": [],
"html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Pagination\">\n <div class=\"govuk-pagination__prev\">\n <a class=\"govuk-link govuk-pagination__link\" href=\"#\" rel=\"prev\">\n <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n </svg>\n <span class=\"govuk-pagination__link-title\">\n Previous page\n </span>\n <span class=\"govuk-visually-hidden\">:</span>\n <span class=\"govuk-pagination__link-label\">2 of 432</span>\n </a>\n </div>\n <div class=\"govuk-pagination__next\">\n <a class=\"govuk-link govuk-pagination__link\" href=\"#\" rel=\"next\">\n <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n </svg>\n <span class=\"govuk-pagination__link-title\">\n Next page\n </span>\n <span class=\"govuk-visually-hidden\">:</span>\n <span class=\"govuk-pagination__link-label\">4 of 432</span>\n </a>\n </div>\n</nav>"
},
{
"name": "with aria label",
"options": {
"ariaLabel": "Custom aria label",
"previousPage": {
"url": "#",
"title": "Previous page",
"label": "2 of 432"
},
"nextPage": {
"url": "#",
"title": "Next page",
"label": "4 of 432"
}
},
"hidden": false,
"description": "Displaying previous and next links with custom aria-label",
"previewLayoutModifiers": [],
"html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Custom aria label\">\n <div class=\"govuk-pagination__prev\">\n <a class=\"govuk-link govuk-pagination__link\" href=\"#\" rel=\"prev\">\n <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n </svg>\n <span class=\"govuk-pagination__link-title\">\n Previous page\n </span>\n <span class=\"govuk-visually-hidden\">:</span>\n <span class=\"govuk-pagination__link-label\">2 of 432</span>\n </a>\n </div>\n <div class=\"govuk-pagination__next\">\n <a class=\"govuk-link govuk-pagination__link\" href=\"#\" rel=\"next\">\n <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n </svg>\n <span class=\"govuk-pagination__link-title\">\n Next page\n </span>\n <span class=\"govuk-visually-hidden\">:</span>\n <span class=\"govuk-pagination__link-label\">4 of 432</span>\n </a>\n </div>\n</nav>"
},
{
"name": "with no params",
"options": null,
"hidden": false,
"description": "Should render nothing, with no errors",
"previewLayoutModifiers": [],
"html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\">\n</nav>"
}
]
}