govuk_tech_docs 5.2.2 → 6.0.0.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e2c23eb952ee6069e5478380dc761a3de90977115ee82aa1389e4236e014243
-  data.tar.gz: d01dd04884c723aebd6cccff2f650038e9df489f0b9ab2de05d191d2337af83e
+  metadata.gz: c7c54295459ed7567f6875bd16dc72e50292cf62950b1e3de986a57fc484e5f7
+  data.tar.gz: 39cb5a0065d9eba0e24c8cc78a021855ccc90992107ffdf216cacb4726d233c7
 SHA512:
-  metadata.gz: 9aacfb53131ec27a9033d5db12e2aa865d1f16cdd03484a1e82ec1594c3708b48d526eb3e07d0322b2429804e7fc17991beaa2b54463890d8b33ee5d34af0512
-  data.tar.gz: dfe5312a360c8675af27e77deae033739fa4d008732fc8b52619119c2c00f4fb70aedd5e0bc12c1edbc4d6dac03c32a0448b6c354aa588ecc0f56510ccd0bfcb
+  metadata.gz: 43f176a4af66287f94c76a926292ffd10504c17af60497af29e002b54edfa25ca8b67e2028e4bc894b252c0b2e5b8e2c6ad01825d70b7d23d1f73377748fbe81
+  data.tar.gz: c201066eb4c5104e1889475f9f95d417eafffd617b165c341af9bf6531a8f79da342be8b4abbea06efccf400f9643684f30e2a4998c30e0cad7ad435784cde8b

data/.ruby-version

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

data/CHANGELOG.md

@@ -1,6 +1,21 @@
+## 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
 

data/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

data/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

data/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
 

data/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";

data/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";

data/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);
 }

data/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);
 }

data/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;

data/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");
+}

data/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);

data/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);
         }
       }
 

data/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) */

data/lib/govuk_tech_docs/meta_tags.rb

@@ -49,7 +49,7 @@ module GovukTechDocs
 
     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

data/lib/govuk_tech_docs/version.rb

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

data/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>

data/lib/source/layouts/_service_navigation.erb

@@ -0,0 +1,27 @@
+<% if config[:tech_docs][:header_links] %>
+<div class="govuk-service-navigation app-pane__navigation"
+  data-module="govuk-service-navigation">
+  <div class="govuk-width-container">
+    <div class="govuk-service-navigation__container">
+      <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+        <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden aria-hidden="true">
+          Menu
+        </button>
+        <ul class="govuk-service-navigation__list" id="navigation">
+          <% config[:tech_docs][:header_links].each do |title, path| %>
+            <li class="govuk-service-navigation__item <% if active_page(path) %> govuk-service-navigation__item--active<% end %>">
+              <a class="govuk-service-navigation__link" href="<%= get_path_to_resource config, path, current_page %>"<% if active_page(path) %> aria-current="page"<% end %>>
+              <% if active_page(path) %>
+                <strong class="govuk-service-navigation__active-fallback"><%= title %></strong>
+              <% else %>
+                <%= title %>
+              <% end %>
+              </a>
+            </li>
+          <% end %>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</div>
+<% end %>

data/lib/source/layouts/core.erb

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="govuk-template <%= config[:tech_docs][:show_govuk_logo] ? 'govuk-template--rebranded ' : '' %>no-js">
+<html lang="en" class="govuk-template no-js">
   <head>
     <%= partial 'layouts/analytics_ga4_gtag' %>
     <%= partial 'layouts/analytics_ga4_gtm' %>
@@ -27,11 +27,11 @@
             '/'
           end
       %>
-      <link rel="icon" sizes="48x48" href="<%= path_prefix %>assets/govuk/assets/rebrand/images/favicon.ico">
-      <link rel="icon" sizes="any" href="<%= path_prefix %>assets/govuk/assets/rebrand/images/favicon.svg" type="image/svg+xml">
-      <link rel="mask-icon" href="<%= path_prefix %>assets/govuk/assets/rebrand/images/govuk-icon-mask.svg" color="#0b0c0c">
-      <link rel="apple-touch-icon" href="<%= path_prefix %>assets/govuk/assets/rebrand/images/govuk-icon-180.png">
-      <link rel="manifest" href="<%= path_prefix %>assets/govuk/assets/rebrand/manifest.json">
+      <link rel="icon" sizes="48x48" href="<%= path_prefix %>assets/govuk/assets/images/favicon.ico">
+      <link rel="icon" sizes="any" href="<%= path_prefix %>assets/govuk/assets/images/favicon.svg" type="image/svg+xml">
+      <link rel="mask-icon" href="<%= path_prefix %>assets/govuk/assets/images/govuk-icon-mask.svg" color="#0b0c0c">
+      <link rel="apple-touch-icon" href="<%= path_prefix %>assets/govuk/assets/images/govuk-icon-180.png">
+      <link rel="manifest" href="<%= path_prefix %>assets/govuk/assets/manifest.json">
     <% else %>
       <link rel="icon" sizes="48x48" href="/images/favicon.ico">
       <link rel="icon" sizes="any" href="/images/favicon.svg" type="image/svg+xml">
@@ -55,8 +55,8 @@
       <%= partial 'layouts/cookie_banner' %>
       <div class="app-pane__header toc-open-disabled">
         <a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
         <%= partial 'layouts/header' %>
+        <%= partial 'layouts/service_navigation' %>
       </div>
 
       <% if content_for? :sidebar %>

data/node_modules/govuk-frontend/dist/govuk/_base.scss

@@ -1,5 +1,6 @@
 @import "settings/index";
 @import "tools/index";
 @import "helpers/index";
+@import "custom-properties/index";
 
 /*# sourceMappingURL=_base.scss.map */