Bump govuk frontend to v6

.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;

lib/assets/stylesheets/modules/_service-navigation.scss

@@ -0,0 +1,5 @@
+.govuk-service-navigation > .govuk-width-container {
+  max-width: 100%;
+  @include govuk-responsive-margin(6, "left");
+  @include govuk-responsive-margin(6, "right");
+}

lib/assets/stylesheets/modules/_technical-documentation.scss

@@ -5,7 +5,7 @@
   margin: govuk-spacing(3);
   max-width: 40em;
 
-  color:  $govuk-text-colour;
+  color:  govuk-functional-colour(text);
 
   @include govuk-media-query(tablet) {
     margin: 0 govuk-spacing(6) govuk-spacing(6);
@@ -98,10 +98,10 @@
 
   blockquote {
     @include govuk-font($size: 19);
-    background: govuk-colour("light-grey");
+    background: govuk-colour("black", $variant: "tint-95");
     padding: govuk-spacing(3);
     margin: govuk-spacing(3);
-    border-left: govuk-spacing(2) solid govuk-colour("mid-grey");
+    border-left: govuk-spacing(2) solid govuk-colour("black", $variant: "tint-80");
   }
 
   // http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/
@@ -125,8 +125,8 @@
 
     &:focus {
       padding: $padding - ($govuk-focus-width - $border-width);
-      border: $govuk-focus-width solid $govuk-focus-text-colour;
-      outline: $govuk-focus-width solid $govuk-focus-colour;
+      border: $govuk-focus-width solid govuk-functional-colour(focus-text);
+      outline: $govuk-focus-width solid govuk-functional-colour(focus);
     }
   }
 
@@ -169,7 +169,7 @@
   h1, h2, h3, h4, h5, h6 {
     code {
       font-size: inherit;
-      color: $govuk-text-colour;
+      color: govuk-functional-colour(text);
       background: none;
       padding: 0;
     }
@@ -204,7 +204,7 @@
     padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
 
     background-color: transparent;
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid govuk-functional-colour(border);
     border-width: 0 0 1px 0;
 
     @include govuk-font($size: 16);

lib/assets/stylesheets/modules/_toc.scss

@@ -30,9 +30,9 @@
 
           @include govuk-media-query(tablet) {
             &.toc-link--in-view  {
-              color: $govuk-link-hover-colour;
-              border-left-color: $govuk-link-hover-colour;
-              background-color: govuk-colour("light-grey");
+              color: govuk-functional-colour(link-hover);
+              border-left-color: govuk-functional-colour(link-hover);
+              background-color: govuk-colour("black", $variant: "tint-95");
             }
           }
         }
@@ -131,15 +131,15 @@
           width: 100%;
           padding: govuk-spacing(3) govuk-spacing(3) 10px;
 
-          background: govuk-colour("light-grey");
+          background: govuk-colour("black", $variant: "tint-95");
           @supports(backdrop-filter: blur(2px)) {
-            background: transparentize(govuk-colour("light-grey"), 0.05);
+            background: transparentize(govuk-colour("black", $variant: "tint-95"), 0.05);
             backdrop-filter: blur(2px);
           }
           border: 0;
-          border-bottom: 1px solid govuk-colour("mid-grey");
+          border-bottom: 1px solid govuk-colour("black", $variant: "tint-80");
           box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-          color:  $govuk-text-colour;
+          color: govuk-functional-colour(text);
           text-decoration: none;
           text-align: left;
 
@@ -189,16 +189,16 @@
         }
 
         &:focus {
-          background-color: $govuk-focus-colour;
+          background-color: govuk-functional-colour(focus);
           outline: $govuk-focus-width solid transparent;
-          box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+          box-shadow: inset 0 0 0 1px govuk-functional-colour(focus);
         }
 
         &:focus:not(:active):not(:hover) {
-          border-color: $govuk-focus-colour;
-          color: $govuk-focus-text-colour;
-          background-color: $govuk-focus-colour;
-          box-shadow: 0 2px 0 $govuk-focus-text-colour;
+          border-color: govuk-functional-colour(focus);
+          color: govuk-functional-colour(focus-text);
+          background-color: govuk-functional-colour(focus);
+          box-shadow: 0 2px 0 govuk-functional-colour(focus-text);
         }
       }
 

lib/assets/stylesheets/palette/_syntax-highlighting.scss

@@ -1,20 +1,22 @@
 // A Base16 palette
 // https://github.com/chriskempson/base16
 
-$code-00: scale-color(govuk-colour("light-grey"), $lightness:50%); /* Default Background */
+$code-00: scale-color(govuk-colour("black", $variant: "tint-95"), $lightness:50%); /* Default Background */
 $code-01: #f5f5f5; /* Lighter Background (Unused) */
 $code-02: #bfc1c3; /* Selection Background */
-$code-03: darken( $govuk-secondary-text-colour, 2%);; /* Comments, Invisibles, Line Highlighting */
+// we should be using govuk-functional-colour but it outputs a variable, but darken only takes numbers
+// instead, we use the colour returned by govuk-functional-colour(secondary-text)
+$code-03: darken( govuk-colour("black", $variant: "tint-95"), 2%);; /* Comments, Invisibles, Line Highlighting */
 $code-04: #e8e8e8; /* Dark Foreground (Unused) */
-$code-05:  $govuk-text-colour; /* Default Foreground, Caret, Delimiters, Operators */
-$code-06: #ffffff; /* Light Foreground (Unused) */
-$code-07: #ffffff; /* Light Background (Unused) */
+$code-05: govuk-functional-colour(text); /* Default Foreground, Caret, Delimiters, Operators */
+$code-06: govuk-functional-colour(body-background); /* Light Foreground (Unused) */
+$code-07: govuk-functional-colour(body-background); /* Light Background (Unused) */
 
 $code-08: #d4351c; /* Variables, XML Tags, Markup Link Text, Markup Lists */
 $code-09: #0E7754; /* Integers, Boolean, Constants, XML Attributes, Markup Link Url */
 $code-0A: #4C4077; /* Classes, Markup Bold, Search Text Background */
-$code-0B: $govuk-brand-colour; /* Strings, Inherited Class, Markup Code */
-$code-0C: $govuk-brand-colour; /* Support, Regular Expressions, Escape Characters, Markup Quotes */
+$code-0B: govuk-functional-colour(brand); /* Strings, Inherited Class, Markup Code */
+$code-0C: govuk-functional-colour(brand); /* Support, Regular Expressions, Escape Characters, Markup Quotes */
 $code-0D: #4C4077; /* Functions, Methods, Attribute IDs, Headings */
 $code-0E: #a71d5d; /* Keywords, Storage, Selector, Markup Italic */
 $code-0F: #C92424; /* Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?> (Unused) */

lib/govuk_tech_docs/meta_tags.rb

@@ -49,7 +49,7 @@ def canonical_url
 
     def page_image
       if config[:tech_docs][:show_govuk_logo]
-        "#{host}/assets/govuk/assets/rebrand/images/govuk-opengraph-image.png"
+        "#{host}/assets/govuk/assets/images/govuk-opengraph-image.png"
       else
         "#{host}/images/opengraph-image.png"
       end

lib/govuk_tech_docs/version.rb

@@ -1,3 +1,3 @@
 module GovukTechDocs
-  VERSION = "5.2.2".freeze
+  VERSION = "6.0.0.beta".freeze
 end

lib/source/layouts/_header.erb

@@ -2,9 +2,9 @@
   <div class="govuk-header__container govuk-header__container--full-width">
     <div class="govuk-header__logo">
       <% if config[:tech_docs][:service_link] %>
-      <a href="<%= get_path_to_resource config, config[:tech_docs][:service_link], current_page %>" class="govuk-header__link govuk-header__link--homepage">
+      <a href="<%= get_path_to_resource config, config[:tech_docs][:service_link], current_page %>" class="govuk-header__link govuk-header__homepage-link">
       <% else %>
-      <span class="govuk-header__link govuk-header__link--homepage">
+      <span class="govuk-header__link govuk-header__homepage-link">
       <% end %>
         <% if config[:tech_docs][:show_govuk_logo] %>
         <svg
@@ -45,19 +45,5 @@
         <strong class="govuk-tag"><%= config[:tech_docs][:phase] %></strong>
       <% end %>
     </div>
-    <% if config[:tech_docs][:header_links] %>
-    <div class="govuk-header__content">
-      <nav class="govuk-header__navigation govuk-header__navigation--end" aria-label="Menu">
-        <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>Menu</button>
-        <ul id="navigation" class="govuk-header__navigation-list">
-          <% config[:tech_docs][:header_links].each do |title, path| %>
-            <li class="govuk-header__navigation-item<% if active_page(path) %> govuk-header__navigation-item--active<% end %>">
-              <a class="govuk-header__link" href="<%= get_path_to_resource config, path, current_page %>"<% if active_page(path) %> aria-current="page"<% end %>><%= title %></a>
-            </li>
-          <% end %>
-        </ul>
-      </nav>
-    </div>
-    <% end %>
   </div>
 </header>