Merge pull request #442 from alphagov/bump-govuk-frontend-to-v6

Bump govuk frontend to v6

Author: JC-DSIT

.ruby-version

@@ -0,0 +1 @@
+3.2.6

CHANGELOG.md

@@ -1,10 +1,22 @@
+## 6.0.0
+
+- [Bump Design System to V6](https://github.com/alphagov/tech-docs-gem/pull/442), which brings in:
+  - changes to the colour palette
+  - replacement of the smallest font size, used for smaller screens, with next one up
+  - introduction of service navigation component, with header links moved to it
+  - all changes listed in https://github.com/alphagov/govuk-frontend/releases/tag/v6.0.0
+
+Note: whereas before all tech docs could optionally turn on the new branding, this removes that
+ability, we're marking it as a major bump.
+
 ## 5.2.2
 
 - [Unpin middleman](https://github.com/alphagov/tech-docs-gem/pull/457)
 - [Bump jasmine-browser-runner from 2.5.0 to 3.0.0 #450](- https://github.com/alphagov/tech-docs-gem/pull/450)
 - [Bump jasmine-core from 5.5.0 to 5.13.0 #448](https://github.com/alphagov/tech-docs-gem/pull/448)
 - [Ban pre|post-install NPM scripts #453](https://github.com/alphagov/tech-docs-gem/pull/453)
 
+
 ## 5.2.1
 
 - [Add option to not render child resources when creating a table of contents](https://github.com/alphagov/tech-docs-gem/pull/439/changes)

README.md

@@ -110,14 +110,22 @@ For more information on previewing your documentation locally, see the [Tech Doc
 
 ## Tests
 
-This repository contains automated JavaScript tests that use the [Jasmine test framework][jas].
+Use this command to run the linting and tests for the Ruby and JavaScript code:
 
-You can run these tests and see the results in your browser.
+```sh
+bundle exec rake
+```
+
+### JavaScript tests
+
+The JavaScript tests use the [Jasmine test framework][jas].
+
+You can run these tests on their own and see the results in your browser.
 
 1. Run `bundle exec rake jasmine:server`.
 2. Go to `http://localhost:8888` in your browser.
 
-To run the tests and see the results in your terminal, run:
+To run the JavaScript tests and see the results in your terminal, run:
 
 ```
 bundle exec rake jasmine:ci

example/config/tech-docs.yml

@@ -7,7 +7,7 @@ service_name: My First Service
 service_link: /
 phase: Beta
 
-# Links to show on right-hand-side of header
+# Links to show in service navigation
 header_links:
   Documentation: /
   Expired page: /expired-page.html

govuk_tech_docs.gemspec

@@ -7,7 +7,7 @@ require "govuk_tech_docs/version"
 `npm ci`
 abort "npm ci failed" unless $CHILD_STATUS.success?
 
-unless File.exist?("node_modules/govuk-frontend/dist/govuk/all.scss")
+unless File.exist?("node_modules/govuk-frontend/dist/govuk/_base.scss")
   abort "govuk-frontend npm package not installed"
 end
 

lib/assets/stylesheets/_core.scss

@@ -7,6 +7,7 @@
 @import "modules/app-pane";
 @import "modules/footer";
 @import "modules/header";
+@import "modules/service-navigation";
 @import "modules/page-review";
 @import "modules/search";
 @import "modules/contribution-banner";

lib/assets/stylesheets/_govuk_tech_docs.scss

@@ -7,27 +7,25 @@ $govuk-suppressed-warnings: (
 );
 $govuk-assets-path: "/assets/govuk/assets/" !default;
 
-// legacy palette is getting deprecated so new one needs to be used
-$govuk-new-organisation-colours: true;
-
 // Include only the bits of GOV.UK Frontend we need
 $govuk-new-link-styles: true;
 @import "govuk/base";
 
-@import "govuk/core/index";
-@import "govuk/objects/index";
+@import "govuk/core";
+@import "govuk/objects";
 
-@import "govuk/components/cookie-banner/index";
-@import "govuk/components/footer/index";
-@import "govuk/components/header/index";
-@import "govuk/components/inset-text/index";
-@import "govuk/components/input/index";
-@import "govuk/components/tag/index";
-@import "govuk/components/skip-link/index";
-@import "govuk/components/warning-text/index";
+@import "govuk/components/cookie-banner";
+@import "govuk/components/footer";
+@import "govuk/components/header";
+@import "govuk/components/service-navigation";
+@import "govuk/components/inset-text";
+@import "govuk/components/input";
+@import "govuk/components/tag";
+@import "govuk/components/skip-link";
+@import "govuk/components/warning-text";
 
-@import "govuk/utilities/index";
-@import "govuk/overrides/index";
+@import "govuk/utilities";
+@import "govuk/overrides";
 
 @import "core";
 @import "vendor/fixedsticky";

lib/assets/stylesheets/modules/_app-pane.scss

@@ -40,7 +40,7 @@
     .app-pane__toc {
       flex: 0 0 auto;
       width: $toc-width;
-      border-right: 1px solid $govuk-border-colour;
+      border-right: 1px solid govuk-functional-colour(border);
     }
 
     .app-pane__content {
@@ -65,6 +65,6 @@
 .app-pane__content:has(main:focus-visible) {
   outline: $govuk-focus-width solid transparent;
   box-shadow:
-    0 0 0 4px $govuk-focus-colour,
-    0 0 0 8px $govuk-focus-text-colour;
+    0 0 0 4px govuk-functional-colour(focus),
+    0 0 0 8px govuk-functional-colour(focus-text);
 }

lib/assets/stylesheets/modules/_page-review.scss

@@ -4,7 +4,7 @@
   padding: govuk-spacing(3);
   margin-top: govuk-spacing(6);
   margin-bottom: govuk-spacing(6);
-  background-color: $govuk-brand-colour;
+  background-color: govuk-functional-colour(brand);
   color: govuk-colour("white");
 
   @include govuk-media-query(tablet) {
@@ -19,14 +19,14 @@
   }
 
   a:active {
-    color: $govuk-link-active-colour;
+    color: govuk-functional-colour(link-active);
   }
 }
 
 .page-expiry--expired {
   padding: govuk-spacing(3);
   margin-top: govuk-spacing(9);
-  border: govuk-spacing(1) solid $govuk-error-colour;
+  border: govuk-spacing(1) solid govuk-functional-colour(error);
   background-color: govuk-colour("white");
-  color: $govuk-text-colour;
+  color: govuk-functional-colour(text);
 }

lib/assets/stylesheets/modules/_search.scss

@@ -42,7 +42,7 @@ $input-size: 40px;
   text-indent: -5000px;
   overflow: hidden;
   &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
+    outline: $govuk-focus-width solid govuk-functional-colour(focus);
     outline-offset: 0;
     box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour("black");
   }
@@ -87,12 +87,12 @@ $input-size: 40px;
 }
 .search-results__inner {
   background: govuk-colour("white");
-  border-top: 1px solid govuk-colour("mid-grey");
+  border-top: 1px solid govuk-colour("black", $variant: "tint-80");
   max-width: 40rem;
   padding: 15px;
   @include govuk-media-query(tablet) {
     padding: 15px 200px 50px 40px;
-    border: 1px solid govuk-colour("mid-grey");
+    border: 1px solid govuk-colour("black", $variant: "tint-80");
     &::after {
       content: '';
       position: absolute;