govuk_publishing_components 23.2.0 → 23.5.1

data/node_modules/govuk-frontend/govuk/components/accordion/README.md

@@ -6,7 +6,7 @@ See the [main README quick start guide](https://github.com/alphagov/govuk-fronte
 
 ## Guidance and Examples
 
-Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/accordion).
+Find out when to use the accordion component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/accordion).
 
 ## Component options
 

data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss

@@ -47,7 +47,6 @@
 
   // JavaScript enabled
   .js-enabled {
-
     .govuk-accordion {
       // Border at the bottom of the whole accordion
       border-bottom: 1px solid $govuk-border-colour;

data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json

@@ -0,0 +1,235 @@
+{
+    "component": "accordion",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "id": "default-example",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with additional descriptions",
+            "options": {
+                "id": "with-descriptions",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Test"
+                        },
+                        "summary": {
+                            "text": "Additional description"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Test 2"
+                        },
+                        "summary": {
+                            "html": "<span class=\"govuk-!-font-weight-regular\">Additional description</span>"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description</span>\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with one section open",
+            "options": {
+                "id": "one-section-open-example",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "expanded": true,
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with all sections already open",
+            "options": {
+                "id": "all-sections-open-example",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "expanded": true,
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "expanded": true,
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with focusable elements inside",
+            "options": {
+                "id": "with-focusable-elements",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "html": "<a class=\"govuk-link\" href=\"#\">Link A</a>"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "content": {
+                            "html": "<a class=\"govuk-link\" href=\"#\">Link B</a>"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-1\">\n          <a class=\"govuk-link\" href=\"#\">Link A</a>\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-2\">\n          <a class=\"govuk-link\" href=\"#\">Link B</a>\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "myClass",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "data-attribute": "value"
+                },
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\" data-attribute=\"value\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "custom heading level",
+            "options": {
+                "headingLevel": 3,
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "heading html",
+            "options": {
+                "items": [
+                    {
+                        "heading": {
+                            "html": "<span class=\"myClass\">Section A</span>"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with falsey values",
+            "options": {
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    },
+                    false,
+                    "",
+                    null,
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-5\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss

@@ -52,7 +52,6 @@
       // These should be removed when legacy font support is dropped
       top: -1px;
       bottom: 1px;
-
     } @else {
       top: 0;
       bottom: 0;
@@ -108,5 +107,4 @@
       bottom: $offset;
     }
   }
-
 }

data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json

@@ -0,0 +1,56 @@
+{
+    "component": "back-link",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "href": "#"
+            },
+            "html": "<a href=\"#\" class=\"govuk-back-link\">Back</a>"
+        },
+        {
+            "name": "with custom text",
+            "options": {
+                "href": "#",
+                "text": "Back to home"
+            },
+            "html": "<a href=\"#\" class=\"govuk-back-link\">Back to home</a>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "app-back-link--custom-class",
+                "href": "#"
+            },
+            "html": "<a href=\"#\" class=\"govuk-back-link app-back-link--custom-class\">Back</a>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "<b>Home</b>",
+                "href": "#"
+            },
+            "html": "<a href=\"#\" class=\"govuk-back-link\">&lt;b&gt;Home&lt;/b&gt;</a>"
+        },
+        {
+            "name": "html",
+            "options": {
+                "html": "<b>Back</b>",
+                "href": "#"
+            },
+            "html": "<a href=\"#\" class=\"govuk-back-link\"><b>Back</b></a>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "href": "#",
+                "html": "<b>Back to home</b>",
+                "attributes": {
+                    "data-test": "attribute",
+                    "aria-label": "Back to home"
+                }
+            },
+            "html": "<a href=\"#\" class=\"govuk-back-link\" data-test=\"attribute\" aria-label=\"Back to home\"><b>Back to home</b></a>"
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss

@@ -57,7 +57,6 @@
         // These should be removed when legacy font support is dropped
         top: -1px;
         bottom: 1px;
-
       } @else {
         top: 0;
         bottom: 0;

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json

@@ -0,0 +1,172 @@
+{
+    "component": "breadcrumbs",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "items": [
+                    {
+                        "text": "Section",
+                        "href": "/section"
+                    },
+                    {
+                        "text": "Sub-section",
+                        "href": "/section/sub-section"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "with one level",
+            "options": {
+                "items": [
+                    {
+                        "text": "Section",
+                        "href": "/section"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "with multiple levels",
+            "options": {
+                "items": [
+                    {
+                        "text": "Home",
+                        "href": "/"
+                    },
+                    {
+                        "text": "Section",
+                        "href": "/section"
+                    },
+                    {
+                        "text": "Sub-section",
+                        "href": "/section/sub-section"
+                    },
+                    {
+                        "text": "Sub Sub-section",
+                        "href": "/section/sub-section/sub-sub-section"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "without the home section",
+            "options": {
+                "items": [
+                    {
+                        "text": "Service Manual",
+                        "href": "/service-manual"
+                    },
+                    {
+                        "text": "Agile Delivery",
+                        "href": "/service-manual/agile-delivery"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "with last breadcrumb as current page",
+            "options": {
+                "items": [
+                    {
+                        "text": "Home",
+                        "href": "/"
+                    },
+                    {
+                        "text": "Passports, travel and living abroad",
+                        "href": "/browse/abroad"
+                    },
+                    {
+                        "text": "Travel abroad"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n    \n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "with collapse on mobile",
+            "options": {
+                "collapseOnMobile": true,
+                "items": [
+                    {
+                        "text": "Home",
+                        "href": "/"
+                    },
+                    {
+                        "text": "Education, training and skills",
+                        "href": "/education"
+                    },
+                    {
+                        "text": "Special educational needs and disability (SEND) and high needs",
+                        "href": "/education/special-educational-needs-and-disability-send-and-high-needs"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs  govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "app-breadcrumbs--custom-modifier"
+            },
+            "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "id": "my-navigation",
+                    "role": "navigation"
+                }
+            },
+            "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "item attributes",
+            "options": {
+                "items": [
+                    {
+                        "text": "Section 1",
+                        "href": "/section",
+                        "attributes": {
+                            "data-attribute": "my-attribute",
+                            "data-attribute-2": "my-attribute-2"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "items": [
+                    {
+                        "text": "<span>Section 1</span>"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n    \n  \n  </ol>\n</div>"
+        },
+        {
+            "name": "html",
+            "options": {
+                "items": [
+                    {
+                        "html": "<em>Section 1</em>"
+                    },
+                    {
+                        "html": "<em>Section 2</em>",
+                        "href": "/section-2"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n    \n  \n  </ol>\n</div>"
+        }
+    ]
+}