Update govuk-frontend and primary navigation

app/components/primary_navigation_component.html.erb

@@ -1,17 +1,5 @@
-<nav class="app-primary-navigation" aria-label="primary">
+<%= govuk_service_navigation(navigation_id: 'primary-navigation', classes: 'app-service-navigation') do |sn|
-  <div class="govuk-width-container">
+  items.each do |item|
-    <ul class="app-primary-navigation__list">
+    sn.with_navigation_item(text: item[:text], href: item[:href], classes: "", current: item[:current])
-      <% items.each do |item| %>
+  end
-        <% if item.current %>
+end %>
-          <li class="app-primary-navigation__item app-primary-navigation__item--current">
-            <%= govuk_link_to item[:text], item[:href], class: "app-primary-navigation__link", aria: { current: "page" } %>
-          </li>
-        <% else %>
-          <li class="app-primary-navigation__item">
-            <%= govuk_link_to item[:text], item[:href], class: "app-primary-navigation__link" %>
-          </li>
-        <% end %>
-      <% end %>
-    </ul>
-  </div>
-</nav>

app/frontend/styles/_primary-navigation.scss

@@ -1,69 +0,0 @@
-.app-primary-navigation {
-  @include govuk-font(19, $weight: bold);
-  background-color: govuk-colour("light-grey");
-  border-bottom: 1px solid $govuk-border-colour;
-}
-
-.govuk-phase-banner + .app-primary-navigation {
-  margin-top: -1px;
-}
-
-.app-primary-navigation__list {
-  @include govuk-clearfix;
-  left: govuk-spacing(-3);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  right: govuk-spacing(-3);
-  width: calc(100% + #{govuk-spacing(6)});
-}
-
-.app-primary-navigation__item {
-  box-sizing: border-box;
-  display: block;
-  float: left;
-  line-height: 50px;
-  height: 50px;
-  padding: 0 govuk-spacing(3);
-  position: relative;
-}
-
-.app-primary-navigation__item--current {
-  border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
-
-  &:hover {
-    border-bottom-color: $govuk-link-hover-colour;
-  }
-
-  &:active {
-    border-bottom-color: $govuk-link-active-colour;
-  }
-}
-
-.app-primary-navigation__item--align-right {
-  @include govuk-media-query($from: tablet) {
-    float: right;
-  }
-}
-
-.app-primary-navigation__link {
-  @include govuk-link-common;
-  @include govuk-link-style-no-visited-state;
-  @include govuk-link-style-no-underline;
-  @include govuk-typography-weight-bold;
-
-  // Extend the touch area of the link to the list
-  &::after {
-    bottom: 0;
-    content: "";
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}
-
-.app-primary-navigation__item--current .app-primary-navigation__link:hover {
-  text-decoration: none;
-}

app/frontend/styles/application.scss

@@ -86,3 +86,42 @@ $govuk-breakpoints: (
 .govuk-notification-banner__content > * {
   max-width: fit-content;
 }
+
+.govuk-service-navigation__active-fallback, .govuk-service-navigation__list {
+  font-weight: bold;
+}
+
+.govuk-service-navigation__link{
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+  @include govuk-typography-weight-bold;
+
+  // Extend the touch area of the link to the list
+  &::after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.govuk-service-navigation__item--active {
+  border-bottom-width: 4px;
+}
+.govuk-service-navigation__item {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin: 0;
+}
+
+.govuk-service-navigation__item:not(:last-child) {
+  margin-right: 0;
+}
+
+.govuk-service-navigation__container {
+  left: -15px;
+  position: relative;
+}

package.json

@@ -20,7 +20,7 @@
     "css-loader": "^6.7.1",
     "custom-event-polyfill": "^1.0.7",
     "file-loader": "^6.2.0",
-    "govuk-frontend": "5.1.0",
+    "govuk-frontend": "5.7.1",
     "html5shiv": "^3.7.3",
     "intersection-observer": "^0.12.0",
     "mini-css-extract-plugin": "^2.6.0",

yarn.lock

@@ -3405,16 +3405,16 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-govuk-frontend@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-5.1.0.tgz#55e520940b587ddd023e96251efaa076acc9bd5f"
-  integrity sha512-Dc3J+uOI4i2VR3BVyfxbf6qVjTT4n4bBqbD0/Io6feP8pt/4IfKdP1vWimZf+BwMKKMXacw10hmdy5UcD6Cr8w==
-
 govuk-frontend@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-5.2.0.tgz#f8e0bf98b771b8ee1501fd45bbba24a091f3846d"
   integrity sha512-beD3wztHpkKz6JUpPwnwop1ejb4rTFMPLCutKLCIDmUS4BPpW59ggVUfctsRqHd2Zjw9wxljdRdeIJ8AZFyyTw==
 
+govuk-frontend@5.7.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-5.7.1.tgz#d4c561ebf8c0b76130f31df8c2e4d70d340cd63f"
+  integrity sha512-jF1cq5rn57kxZmJRprUZhTQ31zaBBK4b5AyeJaPX3Yhg22lk90Mx/dQLvOk/ycV3wM7e0y+s4IPvb2fFaPlCGg==
+
 govuk-prototype-kit@^13.14.1:
   version "13.16.2"
   resolved "https://registry.yarnpkg.com/govuk-prototype-kit/-/govuk-prototype-kit-13.16.2.tgz#a491d36ebd49d5aa818934fa767d833e138a9119"