@x-govuk/govuk-eleventy-plugin 5.0.7 → 6.0.0

package/README.md

@@ -11,9 +11,8 @@ You’re welcome to use the plugin even if your service isn’t considered part
 
 ## Requirements
 
-- [Node.js](https://nodejs.org) v16.0.0 or above
-- [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above
-- [Eleventy](https://www.11ty.dev) v2.0.0 or above
+- [Node.js](https://nodejs.org) v18.17 or later
+- [Eleventy](https://www.11ty.dev) v2 or later
 
 ## Installation
 
@@ -37,5 +36,5 @@ Learn more about how to [get started](https://x-govuk.github.io/govuk-eleventy-p
 
 This command will ask you what version you want to use. It will then publish a new version on NPM, create and push a new git tag and then generate release notes ready for posting on GitHub.
 
-> ![NOTE]
+> [!NOTE]
 > Releasing a new version requires permission to publish packages to the `@x-govuk` organisation.

package/components/aside/_aside.scss

@@ -6,8 +6,8 @@
 
 .app-aside__heading {
   @include govuk-font(19, $weight: bold);
-  margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
+  margin-top: govuk-spacing(3);
 }
 
 .app-aside__body {

package/components/document-header/_document-header.scss

@@ -1,4 +1,9 @@
 .app-document-header__metadata {
   @include govuk-font($size: 16, $line-height: 1.5);
   color: $govuk-secondary-text-colour;
+  max-width: 45em;
+}
+
+.app-document-header__description {
+  max-width: 30em;
 }

package/components/document-list/_document-list.scss

@@ -16,8 +16,8 @@
 }
 
 .app-document-list__item-metadata {
-  padding: 0;
   margin: 0;
+  padding: 0;
 }
 
 .app-document-list__item-description {

package/components/document-list/template.njk

@@ -5,7 +5,7 @@
   {% for item in params.items %}
     <li class="app-document-list__item">
       <h{{ headingLevel }} class="app-document-list__item-title">
-        <a class="govuk-link" href="{{ item.url | url | pretty }}">{{ item.data.title | smart }}</a>
+        <a class="govuk-link" href="{{ item.url | pretty }}">{{ item.data.title | smart }}</a>
       </h{{ headingLevel }}>
       {% if item.data.description %}
       <p class="app-document-list__item-description">

package/components/footnotes-list/_footnotes-list.scss

@@ -29,8 +29,8 @@ a[aria-describedby="footnotes-label"]::after {
   li::before {
     @include govuk-font(19, $tabular: true);
     content: counter(footnotes) ".";
-    position: absolute;
     left: govuk-spacing(4);
+    position: absolute;
   }
 
   a[aria-label="Back to content"] {

package/components/header/_govuk.svg

@@ -0,0 +1,4 @@
+<svg class="govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" focusable="false" role="img" width="152" height="30" viewBox="0 0 152 30" aria-label="GOV.UK">
+  <title>GOV.UK</title>
+  <path d="M6.7 12.2c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m-4.3 2.5c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.5 1 0 2.1 1 2.5m-1.3 4.8c1 .4 2.1-.1 2.5-1 .4-1-.1-2.1-1-2.5-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m10.4-5.8c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1s0 2.1 1 2.5m17.4-1.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m4.3 2.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m1.3 4.8c-1 .4-2.1-.1-2.5-1-.4-1 .1-2.1 1-2.5 1-.4 2.1.1 2.5 1 .4 1 0 2.1-1 2.5m-10.4-5.8c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1s0 2.1-1 2.5m-5.3-4.9 2.4 1.3V6.5l-2.4.8c-.1-.1-.1-.2-.2-.2s1-3 1-3h-3.4l1 3c-.1.1-.2.1-.2.2-.1.1-2.4-.7-2.4-.7v3.5L17 8.8c-.1.1 0 .2.1.3l-1.4 4.2c-.1.2-.1.4-.1.7 0 1.1.8 2.1 1.9 2.2h.6C19.2 16 20 15.1 20 14c0-.2 0-.4-.1-.7l-1.4-4.2c.2-.1.3-.2.3-.3m-1 20.3c4.6 0 8.9.3 12.8.9 1.1-4.6 2.4-7.2 3.8-9.1l-2.6-.9c.3 1.3.3 1.9 0 2.8-.4-.4-.8-1.2-1.1-2.4l-1.2 4.2c.8-.5 1.4-.9 2-.9-1.2 2.6-2.7 3.2-3.6 3-1.2-.2-1.7-1.3-1.5-2.2.3-1.3 1.6-1.6 2.2-.1 1.2-2.4-.8-3.1-2.1-2.4 1.9-1.9 2.2-3.6.6-5.7-2.2 1.7-2.2 3.3-1.2 5.6-1.3-1.5-3.3-.7-2.5 1.7.9-1.4 2.1-.5 2 .8-.2 1.2-1.7 2.1-3.7 2-2.8-.2-3-2.2-3-3.7.7-.1 1.9.5 3 2l.4-4.4c-1.1 1.2-2.2 1.4-3.3 1.4.4-1.2 2.1-3.1 2.1-3.1h-5.5s1.8 2 2.1 3.1c-1.1 0-2.2-.3-3.3-1.4l.4 4.4c1.1-1.5 2.3-2.1 3-2-.1 1.6-.2 3.5-3 3.7-1.9.2-3.5-.8-3.7-2-.2-1.3 1-2.2 1.9-.8.7-2.4-1.3-3.1-2.6-1.7 1-2.3 1-4-1.2-5.6-1.6 2.1-1.3 3.8.6 5.7-1.3-.7-3.2 0-2.1 2.4.6-1.5 1.9-1.1 2.2.1.2.9-.4 1.9-1.5 2.2-1 .2-2.5-.5-3.7-3 .7 0 1.3.4 2 .9L5 20.4c-.3 1.2-.7 1.9-1.2 2.4-.3-.8-.2-1.5 0-2.8l-2.6.9C2.7 22.8 4 25.4 5.1 30c3.8-.5 8.2-.9 12.7-.9m30.5-11.5c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H59v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zm36.4-4.3c-.4-1.3-1.1-2.4-2-3.4-.9-1-1.9-1.7-3.1-2.3-1.2-.6-2.6-.8-4.2-.8s-2.9.3-4.2.8c-1.1.6-2.2 1.4-3 2.3-.9 1-1.5 2.1-2 3.4-.4 1.3-.7 2.7-.7 4.2s.2 2.9.7 4.2c.4 1.3 1.1 2.4 2 3.4.9 1 1.9 1.7 3.1 2.3 1.2.6 2.6.8 4.2.8 1.5 0 2.9-.3 4.2-.8 1.2-.6 2.3-1.3 3.1-2.3.9-1 1.5-2.1 2-3.4.4-1.3.7-2.7.7-4.2-.1-1.5-.3-2.9-.8-4.2zM81 17.6c0 1-.1 1.9-.4 2.7-.2.8-.6 1.6-1.1 2.2-.5.6-1.1 1.1-1.7 1.4-.7.3-1.5.5-2.4.5-.9 0-1.7-.2-2.4-.5s-1.3-.8-1.7-1.4c-.5-.6-.8-1.3-1.1-2.2-.2-.8-.4-1.7-.4-2.7v-.1c0-1 .1-1.9.4-2.7.2-.8.6-1.6 1.1-2.2.5-.6 1.1-1.1 1.7-1.4.7-.3 1.5-.5 2.4-.5.9 0 1.7.2 2.4.5s1.3.8 1.7 1.4c.5.6.8 1.3 1.1 2.2.2.8.4 1.7.4 2.7v.1zM92.9 28 87 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L152 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
+</svg>

package/components/header/_header.scss

@@ -2,6 +2,14 @@
 // See: https://github.com/alphagov/govuk-design-system/blob/master/src/stylesheets/components/_header.scss
 
 @include govuk-exports("app-header") {
+  .app-header--full-width-border {
+    border-bottom: $govuk-border-width-wide solid $govuk-brand-colour;
+  }
+
+  .app-header--no-border {
+    border-bottom: 0;
+  }
+
   // Override the default 33% width on the logo in GOV.UK Frontend (prevents
   // unnecessary wrapping of product name on smaller tablet / desktop
   // viewports)
@@ -14,11 +22,14 @@
     }
   }
 
-  // Height of crown is 30px.
-  // Visually adjust placement to accept larger icons with a height of 35px
-  .app-header__logotype--large {
-    margin-bottom: -10px;
-    position: relative;
-    top: -3px;
+  // Visually adjust placement of X-GOVUK logo which has a height of 35px
+  .x-govuk-header__logotype {
+    margin-bottom: -5px;
+  }
+
+  // Visually adjust placement of logotype text
+  .app-header__logotype {
+    font-weight: bold;
+    top: 0;
   }
 }

package/components/header/_x-govuk.svg

@@ -1,3 +1,4 @@
-<svg class="app-header__logotype--large" aria-hidden="true" focusable="false" height="35" width="35" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
-  <path fill="currentColor" d="M180 251v1c-17 7-26 12-26 16s19 6 19-5c4 18-11 21-20 13 4 7 6 18-4 23-11-5-9-16-5-23-10 8-24 4-20-12v-1c0 11 18 9 19 5 0-4-9-9-26-16v-1c11 3 21 4 32 4 10 0 20-1 31-4Zm61-52 1 1c-6 18-8 29-5 34 6-6 11-14 11-24l19 9c-11 5-20 10-27 17 5 2 15-1 21-4l-32 32c3-6 6-16 4-21-7 6-12 16-16 27l-10-19c11 0 18-5 24-11-5-3-16-2-34 5v-1c10-6 18-12 25-19 8-8 14-15 19-26Zm-186 0c6 10 12 18 20 25 7 8 15 14 25 20h-1c-17-6-29-7-33-4 6 5 13 11 24 11l-10 19c-4-12-10-21-16-28-2 5 1 16 3 21l-31-31c5 2 16 5 21 3-7-6-16-12-28-16l19-10c0 11 6 18 11 24 3-5 2-16-4-33Zm152-5a15 15 0 0 1 10 25 15 15 0 0 1-25-10 15 15 0 0 1 15-15Zm-115 0a15 15 0 0 1 11 25 15 15 0 0 1-25-10 15 15 0 0 1 14-15Zm88-27a15 15 0 0 1 10 25 15 15 0 0 1-25-10 15 15 0 0 1 15-15Zm-63 0a15 15 0 0 1 10 25 15 15 0 0 1-25-10 15 15 0 0 1 15-15Zm133-48c7 17 12 26 16 26s6-19-5-19c18-4 21 11 13 20 7-4 18-6 23 5-5 10-16 8-23 4 8 9 5 24-13 20 11 0 9-19 5-19s-9 9-16 26h-1c3-11 4-21 4-31 0-11-1-21-4-32h1Zm-202 0c-3 11-4 21-4 32 0 10 1 20 4 31h-1c-7-17-12-26-15-26-5 0-7 19 4 19-18 4-21-11-13-20-7 4-18 6-23-4 5-11 16-9 23-5-8-9-5-24 13-20-11 0-9 19-4 19 3 0 8-9 15-26Zm101 11a20 20 0 1 1-1 41 20 20 0 0 1 1-41Zm-32-26a15 15 0 0 1 10 25 15 15 0 0 1-25-10 15 15 0 0 1 15-15Zm63 0a15 15 0 0 1 10 25 15 15 0 0 1-25-10 15 15 0 0 1 15-15ZM92 80a15 15 0 0 1 11 25 15 15 0 0 1-25-11 15 15 0 0 1 14-14Zm115 0a15 15 0 0 1 10 25 15 15 0 0 1-25-11 15 15 0 0 1 15-14ZM80 32l9 19c-10 0-18 5-24 11 5 3 16 1 34-5l1 1c-11 5-18 11-26 19-7 7-13 15-19 25h-1c7-18 8-29 5-34-6 6-11 13-11 24L29 82c11-4 21-9 27-16-5-2-15 1-21 4l32-32c-3 6-6 16-4 21 7-7 12-16 17-27Zm137-1c4 12 10 21 16 28 2-5-1-16-3-21l31 31c-5-2-16-5-21-3 7 6 16 12 28 16l-19 10c0-11-6-18-11-24-3 4-2 16 4 33v1c-6-10-12-18-20-25-7-8-15-14-25-20h1c17 6 28 7 33 4-6-5-13-11-24-11l10-19ZM149 2c10 5 8 16 4 23 9-8 24-5 20 13 0-11-19-9-19-4 0 3 9 8 26 15v1c-11-3-21-4-31-4-11 0-21 1-32 4v-1c17-7 26-12 26-15 0-5-19-7-19 4-4-17 10-21 20-13-4-7-6-18 5-23Z"/>
+<svg class="govuk-header__logotype x-govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" focusable="false" role="img" width="172" height="35" viewBox="0 0 172 35" aria-label="X-GOVUK">
+  <title>X-GOVUK</title>
+  <path d="M21 29v.2c-2 .8-3 1.4-3 1.8 0 .5 2.2.7 2.2-.6.4 2.1-1.3 2.5-2.3 1.6.4.8.7 2-.5 2.6-1.3-.5-1-1.8-.6-2.6-1.2.9-2.8.4-2.3-1.4v-.2c0 1.3 2 1.1 2.2.6 0-.4-1-1-3-1.8V29c1.2.3 2.4.4 3.7.4 1.2 0 2.3-.1 3.6-.4Zm7.1-6 .1.1c-.7 2.1-.9 3.4-.6 4a4 4 0 0 0 1.3-2.8l2.3 1a11 11 0 0 0-3.2 2c.6.2 1.8-.1 2.4-.5l-3.7 3.8c.4-.7.7-1.9.5-2.5-.8.7-1.4 1.9-1.9 3.2L24.1 29c1.3 0 2.1-.5 2.8-1.2-.5-.4-1.8-.3-4 .6v-.2a12.3 12.3 0 0 0 5.2-5.2ZM6.4 23a16.3 16.3 0 0 0 5.3 5.2h-.1c-2-.7-3.4-.8-3.9-.4.7.6 1.5 1.3 2.8 1.3l-1.2 2.2A9.6 9.6 0 0 0 7.5 28c-.3.6 0 1.9.3 2.4l-3.6-3.6c.6.3 1.9.6 2.5.4a9.6 9.6 0 0 0-3.3-1.9l2.2-1.2c0 1.3.7 2.1 1.3 2.8.3-.5.2-1.8-.5-3.8V23Zm17.8-.6a1.7 1.7 0 0 1 1.1 3 1.8 1.8 0 0 1-2.9-1.3c0-1 .8-1.7 1.8-1.7Zm-13.5 0a1.8 1.8 0 0 1 1.3 3A1.8 1.8 0 0 1 9.1 24c0-.9.7-1.6 1.6-1.7ZM21 19.3a1.7 1.7 0 0 1 1.2 2.9 1.8 1.8 0 0 1-3-1.2c0-1 .8-1.8 1.8-1.8Zm-7.3 0a1.7 1.7 0 0 1 1.1 2.9A1.8 1.8 0 0 1 12 21c0-1 .8-1.8 1.8-1.8Zm15.5-5.7c.8 2 1.4 3 1.8 3 .5 0 .7-2.1-.6-2.1 2.1-.5 2.5 1.3 1.6 2.3.8-.5 2-.7 2.6.6-.5 1.2-1.8 1-2.6.5.9 1 .5 2.8-1.6 2.3 1.3 0 1.1-2.2.6-2.2-.4 0-1 1-1.8 3H29c.3-1.3.4-2.4.4-3.6a15 15 0 0 0-.4-3.7Zm-23.6 0c-.3 1.3-.5 2.5-.5 3.8 0 1.2.2 2.3.5 3.6h-.1c-.8-2-1.4-3-1.8-3-.6 0-.8 2.2.5 2.2-2.1.4-2.5-1.3-1.5-2.3-.8.4-2.1.7-2.7-.5.6-1.3 1.9-1 2.7-.6-1-1-.6-2.8 1.5-2.3-1.3 0-1 2.2-.5 2.2.4 0 1-1 1.8-3h.1ZM17.4 15a2.4 2.4 0 1 1-.1 4.8 2.4 2.4 0 0 1 0-4.8Zm-3.7-3a1.7 1.7 0 0 1 1.1 3 1.8 1.8 0 0 1-2.9-1.3c0-1 .8-1.7 1.8-1.7Zm7.3 0a1.7 1.7 0 0 1 1.2 3 1.8 1.8 0 0 1-3-1.3c0-1 .8-1.7 1.8-1.7ZM10.7 9.1a1.7 1.7 0 0 1 1.3 3 1.8 1.8 0 0 1-2.9-1.4c0-.8.8-1.5 1.6-1.6Zm13.4 0a1.8 1.8 0 0 1 1.2 3 1.8 1.8 0 0 1-2.9-1.4c0-.9.8-1.6 1.8-1.6ZM9.3 3.5l1 2.2A4 4 0 0 0 7.7 7c.6.3 1.8.1 4-.6v.1a9.7 9.7 0 0 0-3 2.3c-.8.8-1.5 1.7-2.2 2.9h-.1c.8-2.1 1-3.4.6-4-.7.7-1.3 1.5-1.3 2.8L3.4 9.3c1.3-.4 2.4-1 3.1-1.8-.5-.3-1.7 0-2.4.4l3.7-3.7c-.3.7-.7 1.9-.5 2.5.9-.9 1.5-2 2-3.2Zm16-.1a9.6 9.6 0 0 0 1.9 3.3c.2-.6-.1-2-.4-2.5l3.6 3.6c-.5-.2-1.8-.6-2.4-.3.8.7 1.9 1.4 3.3 1.8L29 10.5a4 4 0 0 0-1.2-2.8c-.4.5-.3 1.9.4 3.9-.7-1.1-1.4-2-2.3-2.8-.8-1-1.8-1.7-3-2.4h.2c2 .7 3.3.8 3.8.5a4 4 0 0 0-2.8-1.3l1.2-2.2Zm-8-3.4c1.3.6 1 1.9.6 2.7 1-1 2.8-.6 2.3 1.5 0-1.3-2.2-1-2.2-.5 0 .4 1 1 3 1.8v.1a13.7 13.7 0 0 0-7.3 0v-.1c2-.8 3-1.4 3-1.8 0-.6-2.2-.8-2.2.5-.5-2 1.1-2.5 2.3-1.5-.5-.8-.7-2.1.6-2.7ZM45 8l4.5 7.5L54 8h5l-6.8 10.5L59 29h-5l-4.5-7.5L45 29h-5l6.5-10.5L40 8h5Zm16.5 8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm16 13.5c5.7 0 9.5-3.5 9.5-9v-2.8h-9V21h4.5c0 3-2.1 4.8-5 4.8-3.5 0-5.5-2.7-5.5-7.3s2-7.3 5.5-7.3c2.5 0 4.2 1.2 4.8 3.3h4.5c-.8-4.5-4.3-7-9.3-7-6 0-10 4.3-10 11s3.8 11 10 11Zm22.5 0c6.1 0 10-4.2 10-11s-3.9-11-10-11-10 4.2-10 11 3.8 11 10 11Zm0-3.8c-3.5 0-5.5-2.8-5.5-7.2s2-7.3 5.5-7.3 5.5 2.8 5.5 7.3-2 7.3-5.5 7.3Zm53.5 3.3h4.5v-6.5l2-2.3 6 8.8h5.5l-8.3-11.8L171 8h-5l-8 9.5V8h-4.5v21Zm-12 .3c5.6 0 8.8-3 8.8-7.8V8h-4.6v13c0 2.8-1.4 4.5-4.2 4.5-2.8 0-4.3-1.8-4.3-4.5V8h-4.4v13.5c0 4.8 3.1 7.8 8.7 7.8Zm-23.8-.3h5.5L130 8h-4.8l-4.7 16.5L115.7 8H111l6.8 21Z"/>
 </svg>

package/components/header/template.njk

@@ -1,22 +1,22 @@
 {%- from "../site-search/macro.njk" import appSiteSearch -%}
-<header class="govuk-header app-header" role="banner" data-module="govuk-header">
+{%- if options.navigation -%}
+  {%- set headerType = "full-width-border" -%}
+{% elif layout == "product" or layout == "collection" %}
+  {%- set headerType = "no-border" -%}
+{%- endif -%}
+<header class="govuk-header app-header{% if headerType %} app-header--{{ headerType }}{% endif %}" role="banner" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container app-header__container">
     <div class="govuk-header__logo app-header__logo">
-      <a href="{{ params.homepageUrl | default("/") | url }}" class="govuk-header__link govuk-header__link--homepage">
-        <span class="govuk-header__logotype">
-          {% if params.organisationLogo == "crown" %}
-            {% include "./_crown.svg" %}
-          {% elif params.organisationLogo == "royal-arms" %}
-            {% include "./_royal-arms.svg" %}
-          {% elif params.organisationLogo == "x-govuk" %}
-            {% include "./_x-govuk.svg" %}
-          {% elif params.organisationLogo %}
-            {{ params.organisationLogo | safe }}
-          {% endif %}
-          <span class="govuk-header__logotype-text">
-            {{ params.organisationName | default("GOV.UK") }}
-          </span>
-        </span>
+      <a href="{{ params.homepageUrl | default("/") }}" class="govuk-header__link govuk-header__link--homepage">
+        {% if params.logotype == "x-govuk" %}
+          {% include "./_x-govuk.svg" %}
+        {% elif params.logotype.html %}
+          {{ params.logotype.html }}
+        {% elif params.logotype.text %}
+          <span class="app-header__logotype">{{ params.logotype.text }}</span>
+        {% else %}
+          {% include "./_govuk.svg" %}
+        {% endif %}
         {% if params.productName %}
         <span class="govuk-header__product-name">
           {{ params.productName }}

package/components/prose-scope/_prose-scope.scss

@@ -9,6 +9,29 @@
     margin-bottom: 0;
   }
 
+  h1 {
+    max-width: 15em;
+  }
+
+  h2 {
+    max-width: 20em;
+  }
+
+  h3 {
+    max-width: 30em;
+  }
+
+  h4,
+  h5,
+  h6,
+  p,
+  ul:not([class]),
+  ol,
+  img,
+  video {
+    max-width: 38em;
+  }
+
   // Indicate abbreviations which have a title
   abbr {
     border-bottom: 1px dotted $govuk-secondary-text-colour;
@@ -125,9 +148,9 @@
   .x-govuk-code__language--shell {
     background-color: govuk-colour("black");
     border: $govuk-focus-width solid govuk-colour("white");
+    -webkit-font-smoothing: auto;
     margin-left: $govuk-focus-width * -1;
     margin-right: $govuk-focus-width * -1;
-    -webkit-font-smoothing: auto;
 
     code {
       filter: invert(100%);

package/components/site-search/_site-search.scss

@@ -1,40 +1,43 @@
 // Site search using Accessible autocomplete
-// below styles are based on the default accessible autocomplete style sheet
-
-@function encode-hex($hex) {
-  // Turn colour into a string
-  $output: inspect($hex);
-  // Slice the '#' from the start of the string so we can add it back on encoded.
-  $output: str-slice($output, 2);
-  // Add the '#' back on the start, but as an encoded character for embedding.
-  @return "%23" + $output;
-}
+// Styles below are based on the default accessible autocomplete style sheet
 
 $icon-size: 40px;
 
 .app-site-search {
   float: left;
-  margin-bottom: govuk-spacing(2);
-  position: relative;
-  width: 100%;
+  padding-bottom: govuk-spacing(1);
+  padding-top: govuk-spacing(1);
 
-  @include govuk-media-query($from: 900px) {
+  @include govuk-media-query($from: desktop) {
     float: right;
-    margin: 0;
-    margin-top: -5px; // Negative margin to vertically align search in header
-    width: 300px;
   }
 
-  .no-js & {
-    display: none;
+  &:defined {
+    position: relative;
+    width: 100%;
 
-    @include govuk-media-query($from: 900px) {
-      display: block;
+    @include govuk-media-query($from: desktop) {
+      margin-top: -10px;
+      width: 300px;
     }
+  }
+}
 
-    @include govuk-media-query($from: 900px) {
-      text-align: right;
-    }
+.app-site-search__link {
+  @include govuk-link-style-inverse;
+
+  display: inline-block;
+  padding-bottom: govuk-spacing(1);
+  padding-top: govuk-spacing(1);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
   }
 }
 
@@ -45,6 +48,8 @@ $icon-size: 40px;
 
 .app-site-search__hint,
 .app-site-search__input {
+  -webkit-appearance: none;
+  appearance: none;
   border: $govuk-border-width-form-element solid govuk-colour("white");
   border-radius: 0; // Safari 10 on iOS adds implicit border rounding.
   box-sizing: border-box;
@@ -53,16 +58,15 @@ $icon-size: 40px;
   padding: govuk-spacing(1);
   padding-left: $icon-size - govuk-spacing(1);
   width: 100%;
-  -webkit-appearance: none;
 }
 
 .app-site-search__hint {
-  position: absolute;
   color: govuk-colour("mid-grey");
+  position: absolute;
 }
 
 .app-site-search__input {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='#{encode-hex(govuk-colour("dark-grey"))}'%3E%3C/path%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'><path d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='%23505a5f'></path></svg>");
   background-position: center left -2px;
   background-repeat: no-repeat;
   background-size: $icon-size $icon-size;
@@ -131,8 +135,8 @@ $icon-size: 40px;
   border-width: 1px 0;
   cursor: pointer;
   display: block;
-  position: relative;
   padding: govuk-spacing(2);
+  position: relative;
 
   &:first-of-type {
     border-top-width: 0;
@@ -153,8 +157,8 @@ $icon-size: 40px;
 
 .app-site-search__option--focused,
 .app-site-search__option:hover {
-  background-color: govuk-colour("blue");
-  border-color: govuk-colour("blue");
+  background-color: $govuk-link-colour;
+  border-color: $govuk-link-colour;
   color: govuk-colour("white");
   // Add a transparent outline for when users change their colours.
   outline: 3px solid transparent;
@@ -177,10 +181,6 @@ $icon-size: 40px;
   @include govuk-font($size: 19);
 }
 
-.app-site-search__link {
-  display: none;
-}
-
 .app-site-search--section {
   @include govuk-font($size: 16);
   color: $govuk-secondary-text-colour;
@@ -201,23 +201,6 @@ $icon-size: 40px;
 
 .app-site-search__separator {
   display: inline-block;
-  margin-right: govuk-spacing(1);
   margin-left: govuk-spacing(1);
-}
-
-// No JavaScript fallback styles
-.no-js .app-site-search__link {
-  display: none;
-
-  @include govuk-media-query($from: 900px) {
-    color: govuk-colour("white");
-    display: inline-block;
-    margin-top: 10px;
-  }
-}
-
-.no-js .app-site-search__link:focus {
-  @include govuk-media-query($from: 900px) {
-    color: govuk-colour("black");
-  }
+  margin-right: govuk-spacing(1);
 }

package/components/site-search/site-search.js

@@ -1,147 +1,137 @@
-/* global XMLHttpRequest */
 import accessibleAutocomplete from 'accessible-autocomplete/dist/accessible-autocomplete.min.js'
 
-// CONSTANTS
-const TIMEOUT = 10 // Time to wait before giving up fetching the search index
-const STATE_DONE = 4 // XHR client readyState DONE
+export class SiteSearchElement extends HTMLElement {
+  constructor() {
+    super()
+
+    this.statusMessage = null
+    this.searchInputId = 'app-site-search__input'
+    this.searchIndex = null
+    this.searchIndexUrl = this.getAttribute('index')
+    this.searchLabel = this.getAttribute('label')
+    this.searchResults = []
+    this.searchTimeout = 10
+    this.sitemapLink = this.querySelector('.app-site-search__link')
+  }
 
-let searchIndex = null
-let statusMessage = null
-let searchQuery = ''
-let searchCallback = function () {}
-let searchResults = []
+  async fetchSearchIndex(indexUrl) {
+    this.statusMessage = 'Loading search index'
 
-export function Search ($module) {
-  this.$module = $module
-}
+    try {
+      const response = await fetch(indexUrl, {
+        signal: AbortSignal.timeout(this.searchTimeout * 1000)
+      })
 
-Search.prototype.fetchSearchIndex = function (indexUrl, callback) {
-  const request = new XMLHttpRequest()
-  request.open('GET', indexUrl, true)
-  request.timeout = TIMEOUT * 1000
-  statusMessage = 'Loading search index'
-  request.onreadystatechange = function () {
-    if (request.readyState === STATE_DONE) {
-      if (request.status === 200) {
-        const response = request.responseText
-        const json = JSON.parse(response)
-        statusMessage = 'No results found'
-        searchIndex = json
-        callback(json)
-      } else {
-        statusMessage = 'Failed to load the search index'
+      if (!response.ok) {
+        throw Error('Search index not found')
       }
+
+      const json = await response.json()
+      this.statusMessage = 'No results found'
+      this.searchIndex = json
+    } catch (error) {
+      this.statusMessage = 'Failed to load search index'
+      console.error(this.statusMessage, error.message)
     }
   }
-  request.send()
-}
 
-Search.prototype.findResults = function (searchQuery, searchIndex) {
-  return searchIndex.filter(item => {
-    const regex = new RegExp(searchQuery, 'gi')
-    return item.title.match(regex) || item.templateContent.match(regex)
-  })
-}
-
-Search.prototype.renderResults = function () {
-  if (!searchIndex) {
-    return searchCallback(searchResults)
+  findResults(searchQuery, searchIndex) {
+    return searchIndex.filter((item) => {
+      const regex = new RegExp(searchQuery, 'gi')
+      return item.title.match(regex) || item.templateContent.match(regex)
+    })
   }
 
-  const resultsArray = this.findResults(searchQuery, searchIndex).reverse()
+  renderResults(query, populateResults) {
+    if (!this.searchIndex) {
+      return populateResults(this.searchResults)
+    }
 
-  searchResults = resultsArray.map(function (result) {
-    return result
-  })
+    this.searchResults = this.findResults(query, this.searchIndex).reverse()
 
-  searchCallback(searchResults)
-}
+    populateResults(this.searchResults)
+  }
 
-Search.prototype.handleSearchQuery = function (query, callback) {
-  searchQuery = query
-  searchCallback = callback
+  handleOnConfirm(result) {
+    const path = result.url
+    if (!path) {
+      return
+    }
 
-  this.renderResults()
-}
+    window.location.href = path
+  }
 
-Search.prototype.handleOnConfirm = function (result) {
-  const path = result.url
-  if (!path) {
-    return
+  handleNoResults() {
+    return this.statusMessage
   }
-  window.location.href = path
-}
 
-Search.prototype.inputValueTemplate = function (result) {
-  if (result) {
-    return result.title
+  inputValueTemplate(result) {
+    if (result) {
+      return result.title
+    }
   }
-}
 
-Search.prototype.resultTemplate = function (result) {
-  if (result) {
-    const element = document.createElement('span')
-    const resultTitle = result.title
-    element.textContent = resultTitle
+  searchTemplate() {
+    const labelElement = document.createElement('label')
+    labelElement.classList.add('govuk-visually-hidden')
+    labelElement.htmlFor = this.searchInputId
+    labelElement.textContent = this.searchLabel
+
+    const searchElement = document.createElement('search')
+    searchElement.append(labelElement)
+
+    return searchElement
+  }
 
-    if (result.hasFrontmatterDate || result.section) {
-      const section = document.createElement('span')
-      section.className = 'app-site-search--section'
+  resultTemplate(result) {
+    if (result) {
+      const element = document.createElement('span')
+      element.textContent = result.title
 
-      if (result.hasFrontmatterDate && result.section) {
-        section.innerHTML = `${result.section}<br>${result.date}`
-      } else {
-        section.innerHTML = result.section || result.date
+      if (result.hasFrontmatterDate || result.section) {
+        const section = document.createElement('span')
+        section.className = 'app-site-search--section'
+
+        section.innerHTML =
+          result.hasFrontmatterDate && result.section
+            ? `${result.section}<br>${result.date}`
+            : result.section || result.date
+
+        element.appendChild(section)
       }
 
-      element.appendChild(section)
+      return element.innerHTML
     }
-
-    return element.innerHTML
   }
-}
 
-Search.prototype.init = function () {
-  const $module = this.$module
-  if (!$module) {
-    return
-  }
+  async connectedCallback() {
+    await this.fetchSearchIndex(this.searchIndexUrl)
 
-  // The Accessible Autocomplete only works in IE9+ so we can use newer
-  // JavaScript features here but need to check for browsers that do not have
-  // these features and force the fallback by returning early.
-  // http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
-  const featuresNeeded = (
-    'querySelector' in document &&
-    'addEventListener' in window &&
-    !!(Array.prototype && Array.prototype.forEach)
-  )
-
-  if (!featuresNeeded) {
-    return
-  }
+    // Remove fallback link to sitemap
+    if (this.sitemapLink) {
+      this.sitemapLink.remove()
+    }
 
-  accessibleAutocomplete({
-    element: $module,
-    id: 'app-site-search__input',
-    cssNamespace: 'app-site-search',
-    displayMenu: 'overlay',
-    placeholder: $module.querySelector('[for=app-site-search__input]').innerText,
-    confirmOnBlur: false,
-    autoselect: true,
-    source: this.handleSearchQuery.bind(this),
-    onConfirm: this.handleOnConfirm,
-    templates: {
-      inputValue: this.inputValueTemplate,
-      suggestion: this.resultTemplate
-    },
-    tNoResults: function () { return statusMessage }
-  })
-
-  const searchIndexUrl = $module.getAttribute('data-search-index')
-  this.fetchSearchIndex(searchIndexUrl, function () {
-    this.renderResults()
-  }.bind(this))
+    // Add `search` element with `label`
+    const search = this.searchTemplate()
+    this.append(search)
+
+    accessibleAutocomplete({
+      element: search,
+      id: this.searchInputId,
+      cssNamespace: 'app-site-search',
+      displayMenu: 'overlay',
+      minLength: 2,
+      placeholder: this.searchLabel,
+      confirmOnBlur: false,
+      autoselect: true,
+      source: this.renderResults.bind(this),
+      onConfirm: this.handleOnConfirm,
+      templates: {
+        inputValue: this.inputValueTemplate,
+        suggestion: this.resultTemplate
+      },
+      tNoResults: this.handleNoResults.bind(this)
+    })
+  }
 }
-
-export default Search

package/components/site-search/template.njk

@@ -1,4 +1,5 @@
-<div class="app-site-search govuk-!-display-none-print" data-module="app-site-search" data-search-index="{{ params.indexPath | url }}">
-  <label class="govuk-visually-hidden" for="app-site-search__input">{{ params.label | default("Search site") }}</label>
-  <a class="app-site-search__link govuk-link-no-visited" href="{{ params.sitemapPath | url }}">Sitemap</a>
-</div>
+<site-search class="app-site-search govuk-!-display-none-print" index="{{ params.indexPath | htmlBaseUrl }}" label="{{ params.label | default("Search site") }}">
+{%- if params.sitemapPath -%}
+  <a class="app-site-search__link" href="{{ params.sitemapPath }}">Sitemap</a>
+{%- endif -%}
+</site-search>