From 04ae1f08ab8f690a2c90e3c1b487f3777a29cb6f Mon Sep 17 00:00:00 2001 From: Kat <54268893+kosiakkatrina@users.noreply.github.com> Date: Fri, 6 Dec 2024 10:10:07 +0000 Subject: [PATCH] Update govuk-frontend and primary navigation --- .../primary_navigation_component.html.erb | 22 ++---- app/frontend/styles/_primary-navigation.scss | 69 ------------------- app/frontend/styles/application.scss | 39 +++++++++++ package.json | 2 +- yarn.lock | 10 +-- 5 files changed, 50 insertions(+), 92 deletions(-) delete mode 100644 app/frontend/styles/_primary-navigation.scss diff --git a/app/components/primary_navigation_component.html.erb b/app/components/primary_navigation_component.html.erb index 9cad3bc64..1f033804c 100644 --- a/app/components/primary_navigation_component.html.erb +++ b/app/components/primary_navigation_component.html.erb @@ -1,17 +1,5 @@ - +<%= govuk_service_navigation(navigation_id: 'primary-navigation', classes: 'app-service-navigation') do |sn| + items.each do |item| + sn.with_navigation_item(text: item[:text], href: item[:href], classes: "", current: item[:current]) + end +end %> diff --git a/app/frontend/styles/_primary-navigation.scss b/app/frontend/styles/_primary-navigation.scss deleted file mode 100644 index b21d41fc1..000000000 --- a/app/frontend/styles/_primary-navigation.scss +++ /dev/null @@ -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; -} diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss index 837b0db6d..5fce5e610 100644 --- a/app/frontend/styles/application.scss +++ b/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; +} diff --git a/package.json b/package.json index ef37dc8aa..32063907c 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 3e9afa0d8..6b1579e64 100644 --- a/yarn.lock +++ b/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"