govuk_tech_docs 1.9.0.pre.rc2 → 2.0.0.pre.test.pre.release.pre.524

data/lib/assets/stylesheets/modules/_toc.scss

@@ -1,8 +1,7 @@
-@include screen {
+  @include govuk-media-query($media-type: screen) {
   .toc {
-
-    @include core-16;
-    padding: $gutter-half;
+    @include govuk-font($size: 16);
+    padding: govuk-spacing(3);
 
     ul {
       list-style: none;
@@ -14,63 +13,74 @@
       display: none;
     }
 
-    a:link, a:visited {
-      text-decoration: none;
-      color: $link-colour;
-    }
+    &__list {
+      li {
+        a:link, a:visited {
+          display: block;
+          position: relative;
+          padding: 8px govuk-spacing(6) 8px govuk-spacing(3);
+          margin: 0 -1 * govuk-spacing(3);
+          border-left: 5px solid transparent;
+          text-decoration: none;
+          color: $govuk-link-colour;
+
+          @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");
+            }
+          }
+        }
 
-    a:hover {
-      text-decoration: underline;
-    }
+        a:focus {
+          outline: none;
 
-    &__list {
+          span {
+            @include govuk-focused-text;
+          }
+        }
 
-      a:link, a:visited {
-        display: block;
-        padding: 8px $gutter 8px $gutter-half;
-        margin: 0 $gutter-half * -1;
-        border-left: 5px solid transparent;
-
-        @include media(tablet) {
-          &.toc-link--in-view {
-            color: $link-active-colour;
-            border-left-color: $link-active-colour;
-            background-color: $grey-4;
+        a:hover {
+          text-decoration: underline;
+
+          &:focus {
+            text-decoration: none;
           }
         }
       }
 
       // Top level
       > ul > li > a:link {
-        @include bold-19;
+        @include govuk-font($size: 19, $weight: bold);
       }
 
-      @include media(tablet) {
+      @include govuk-media-query(tablet) {
         // Level 3
         li li li {
           a:link, a:visited {
-            padding-left: $gutter-half * 2;
+            padding-left: govuk-spacing(6);
           }
         }
 
         // Level 4
         li li li li {
           a:link, a:visited {
-            padding-left: $gutter-half * 4;
+            padding-left: govuk-spacing(7);
           }
         }
 
         // Level 5
         li li li li li {
           a:link, a:visited {
-            padding-left: $gutter-half * 5;
+            padding-left: govuk-spacing(8);
           }
         }
 
         // Level 6
         li li li li li li {
           a:link, a:visited {
-            padding-left: $gutter-half * 6;
+            padding-left: govuk-spacing(9);
           }
         }
       }
@@ -81,9 +91,9 @@
     display: none;
   }
 
-  @include media(tablet) {
+  @include govuk-media-query(tablet) {
     .toc {
-      padding: 22px $gutter $gutter-half;
+      padding: 22px govuk-spacing(6) govuk-spacing(3)
     }
 
     // Prevent the fixedsticky spacer from appearing if the browser is resized
@@ -93,7 +103,7 @@
     }
   }
 
-  @include media(mobile) {
+  @include govuk-media-query($until: tablet) {
     .js {
       .toc {
         display: none;
@@ -113,21 +123,26 @@
         z-index: 10;
 
         &__label {
+          @include govuk-font($size: 16);
           display: block;
           position: relative;
           z-index: 10;
 
-          padding: $gutter-half $gutter-half 10px;
+          padding: govuk-spacing(3) govuk-spacing(3) 10px;
 
-          background: $grey-4;
+          background: govuk-colour("light-grey");
           @supports(backdrop-filter: blur(2px)) {
-            background: transparentize($grey-4, 0.05);
+            background: transparentize(govuk-colour("light-grey"), 0.05);
             backdrop-filter: blur(2px);
           }
-          border-bottom: 1px solid $grey-2;
+          border-bottom: 1px solid govuk-colour("mid-grey");
           box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-          color: $text-colour;
+          color:  $govuk-text-colour;
           text-decoration: none;
+
+          &:focus {
+            @include govuk-focused-text;
+          }
         }
 
         &__icon {
@@ -135,19 +150,19 @@
           height: 20px;
           float: right;
 
-          background-image: file-url('govuk-icn-numbered-list.png');
+          background-image: url('/images/govuk-icn-numbered-list.png');
           background-repeat: no-repeat;
           background-position: left center;
 
-          @include device-pixel-ratio {
-            background-image: file-url('govuk-icn-numbered-list@2x.png');
+          @include govuk-device-pixel-ratio {
+            background-image: url('/images/govuk-icn-numbered-list@2x.png');
             background-size: 20px 20px;
           }
         }
       }
 
       .toc__list {
-        margin-right: $gutter * 1.5;
+        margin-right: govuk-spacing(7);
       }
 
       .toc__close {
@@ -159,15 +174,29 @@
         float: right;
         width: 20px;
         height: 20px;
+        cursor: pointer;
 
-        background-image: file-url('govuk-icn-close.png');
+        background-image: url('/images/govuk-icn-close.png');
         background-repeat: no-repeat;
         background-position: left center;
 
-        @include device-pixel-ratio {
-          background-image: file-url('govuk-icn-close@2x.png');
+        @include govuk-device-pixel-ratio {
+          background-image: url('/images/govuk-icn-close@2x.png');
           background-size: 20px 20px;
         }
+
+        &:focus {
+          background-color: $govuk-focus-colour;
+          outline: $govuk-focus-width solid transparent;
+          box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+        }
+
+        &: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;
+        }
       }
 
       /* Applied to <html> */
@@ -198,9 +227,9 @@
           -webkit-overflow-scrolling: touch;
           -ms-overflow-style: none;
 
-          background: $white;
+          background: govuk-colour("white");
           @supports(backdrop-filter: blur(2px)) {
-            background: transparentize($white, 0.05);
+            background: transparentize(govuk-colour("white"), 0.05);
             backdrop-filter: blur(2px);
           }
         }
@@ -209,7 +238,7 @@
   }
 }
 
-@include print {
+@include govuk-media-query($media-type: print) {
   .toc {
     display: none;
   }

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

@@ -1,20 +1,20 @@
 // A Base16 palette
 // https://github.com/chriskempson/base16
 
-$code-00: scale-color($highlight-colour, $lightness:50%); /* Default Background */
+$code-00: scale-color(govuk-colour("light-grey"), $lightness:50%); /* Default Background */
 $code-01: #f5f5f5; /* Lighter Background (Unused) */
 $code-02: #bfc1c3; /* Selection Background */
-$code-03: darken($secondary-text-colour, 2%);; /* Comments, Invisibles, Line Highlighting */
+$code-03: darken( $govuk-secondary-text-colour, 2%);; /* Comments, Invisibles, Line Highlighting */
 $code-04: #e8e8e8; /* Dark Foreground (Unused) */
-$code-05: $text-colour; /* Default Foreground, Caret, Delimiters, Operators */
+$code-05:  $govuk-text-colour; /* Default Foreground, Caret, Delimiters, Operators */
 $code-06: #ffffff; /* Light Foreground (Unused) */
 $code-07: #ffffff; /* Light Background (Unused) */
 
 $code-08: #B26749; /* 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-blue; /* Strings, Inherited Class, Markup Code */
-$code-0C: $govuk-blue; /* Support, Regular Expressions, Escape Characters, Markup Quotes */
+$code-0B: $govuk-brand-colour; /* Strings, Inherited Class, Markup Code */
+$code-0C: $govuk-brand-colour; /* 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.rb

@@ -31,20 +31,24 @@ module GovukTechDocs
   #   extension. Hash with symbols as keys.
   def self.configure(context, options = {})
     context.activate :sprockets
+
+    context.sprockets.append_path File.join(__dir__, '../node_modules/govuk-frontend/')
+    context.sprockets.append_path File.join(__dir__, './source')
+
     context.activate :syntax
 
     context.files.watch :source, path: "#{__dir__}/source"
 
     context.set :markdown_engine, :redcarpet
     context.set :markdown,
-        renderer: TechDocsHTMLRenderer.new(
-          with_toc_data: true,
-          api: true,
-          context: context
-        ),
-        fenced_code_blocks: true,
-        tables: true,
-        no_intra_emphasis: true
+                renderer: TechDocsHTMLRenderer.new(
+                  with_toc_data: true,
+                  api: true,
+                  context: context
+                ),
+                fenced_code_blocks: true,
+                tables: true,
+                no_intra_emphasis: true
 
     # Reload the browser automatically whenever files change
     context.configure :development do
@@ -109,9 +113,7 @@ module GovukTechDocs
           url:     { index: false, store: true },
         }
 
-        search.pipeline_remove = [
-          'stopWordFilter'
-        ]
+        search.pipeline_remove = %w[stopWordFilter]
 
         search.tokenizer_separator = '/[\s\-/]+/'
       end

data/lib/govuk_tech_docs/api_reference/api_reference_extension.rb

@@ -60,7 +60,7 @@ module GovukTechDocs
             key = md.captures[0]
             type = keywords[key]
 
-            text.gsub!(/#{ Regexp.escape(key) }\s+?/, '')
+            text.gsub!(/#{Regexp.escape(key)}\s+?/, '')
 
             # Strip paragraph tags from text
             text = text.gsub(/<\/?[^>]*>/, '')

data/lib/govuk_tech_docs/api_reference/api_reference_renderer.rb

@@ -262,6 +262,7 @@ module GovukTechDocs
         unless text.is_a?(String)
           return nil
         end
+
         # Schema dictates that it's always components['schemas']
         text.gsub(/#\/components\/schemas\//, '')
       end

data/lib/govuk_tech_docs/api_reference/templates/api_reference_full.html.erb

@@ -3,7 +3,7 @@
 
 <% unless servers.empty? %>
   <h2 id="servers">Servers</h2>
-  <div id="server-list">  
+  <div id="server-list">
     <% servers.each do |server| %>
     <% if server.description %>
     <p><strong><%= server.description %></strong></p>

data/lib/govuk_tech_docs/page_review.rb

@@ -30,6 +30,7 @@ module GovukTechDocs
 
     def owner_slack_url
       return "" unless owner_slack_workspace
+
       # Slack URLs don't have the # (channels) or @ (usernames)
       slack_identifier = owner_slack.to_s.delete('#').delete('@')
       "https://#{owner_slack_workspace}.slack.com/messages/#{slack_identifier}"

data/lib/govuk_tech_docs/pages.rb

@@ -7,7 +7,7 @@ module GovukTechDocs
       @config = config
     end
 
-    def to_json
+    def to_json(*_args)
       as_json.to_json
     end
 

data/lib/govuk_tech_docs/redirects.rb

@@ -1,6 +1,6 @@
 module GovukTechDocs
   class Redirects
-    LEADING_SLASH = %r[\A\/]
+    LEADING_SLASH = %r[\A\/].freeze
 
     def initialize(context)
       @context = context

data/lib/govuk_tech_docs/table_of_contents/heading_tree_renderer.rb

@@ -20,7 +20,7 @@ module GovukTechDocs
         output = ''
 
         if tree.heading
-          output += indentation + %{<a href="#{tree.heading.href}">#{tree.heading.title}</a>\n}
+          output += indentation + %{<a href="#{tree.heading.href}"><span>#{tree.heading.title}</span></a>\n}
         end
 
         if tree.children.any? && level < @max_level

data/lib/govuk_tech_docs/table_of_contents/headings_builder.rb

@@ -20,7 +20,7 @@ module GovukTechDocs
     private
 
       def page
-        @_page ||= Nokogiri::HTML(@html)
+        @page ||= Nokogiri::HTML(@html)
       end
 
       def heading_elements

data/lib/govuk_tech_docs/table_of_contents/helpers.rb

@@ -44,6 +44,7 @@ module GovukTechDocs
             end
           # Avoid redirect pages
           next if content.include? "http-equiv=refresh"
+
           # If this page has children, just print the title and recursively
           # render the children. If not, print the heading structure.
 

data/lib/govuk_tech_docs/version.rb

@@ -1,3 +1,3 @@
 module GovukTechDocs
-  VERSION = "1.9.0-rc2".freeze
+  VERSION = "2.0.0".freeze
 end

data/lib/source/layouts/_footer.erb

@@ -1,10 +1,35 @@
-<footer class="footer">
-  <div class="footer__licence">
-    <a class="footer__licence-logo" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a>
-    <p class="footer__licence-description">All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
-  </div>
+<footer class="govuk-footer app-footer" role="contentinfo">
+  <div class="govuk-footer__meta">
+    <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
 
-  <div class="footer__copyright">
-    <a class="footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
+      <svg
+        role="presentation"
+        focusable="false"
+        class="govuk-footer__licence-logo"
+        xmlns="http://www.w3.org/2000/svg"
+        viewbox="0 0 483.2 195.7"
+        height="17"
+        width="41"
+      >
+        <path
+          fill="currentColor"
+          d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
+        />
+      </svg>
+      <span class="govuk-footer__licence-description">
+        All content is available under the
+        <a
+          class="govuk-footer__link"
+          href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
+          rel="license"
+        >Open Government Licence v3.0</a>, except where otherwise stated
+      </span>
+    </div>
+    <div class="govuk-footer__meta-item">
+      <a
+        class="govuk-footer__link govuk-footer__copyright-logo"
+        href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
+      >© Crown copyright</a>
+    </div>
   </div>
 </footer>

data/lib/source/layouts/_header.erb

@@ -1,44 +1,58 @@
-<header class="header header--full-width">
-  <div class="header__container">
-    <div class="header__brand">
+<header class="govuk-header " role="banner" data-module="govuk-header">
+  <div class="govuk-header__container govuk-header__container--full-width">
+    <div class="govuk-header__logo">
       <% if config[:tech_docs][:service_link] %>
-        <a href="<%= url_for config[:tech_docs][:service_link] %>">
+      <a href="/" class="govuk-header__link govuk-header__link--homepage">
       <% else %>
-        <span>
+      <span class="govuk-header__link govuk-header__link--homepage">
       <% end %>
         <% if config[:tech_docs][:show_govuk_logo] %>
-          <span class="govuk-logo">
-            <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36" alt="">
+        <span class="govuk-header__logotype">
+          <svg
+            role="presentation"
+            focusable="false"
+            class="govuk-header__logotype-crown"
+            xmlns="http://www.w3.org/2000/svg"
+            viewbox="0 0 132 97"
+            height="30"
+            width="36"
+          >
+            <path
+              fill="currentColor" fill-rule="evenodd"
+              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
+            ></path>
+            <image src="/assets/images/govuk-logotype-crown.png" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
+          </svg>
+          <span class="govuk-header__logotype-text">
             GOV.UK
           </span>
+        </span>
         <% end %>
-        <span class="header__title">
+        <span class="govuk-header__product-name">
           <%= config[:tech_docs][:service_name] %>
-          <% if config[:tech_docs][:phase] %>
-            <strong class="govuk-tag"><%= config[:tech_docs][:phase] %></strong>
-          <% end %>
         </span>
       <% if config[:tech_docs][:service_link] %>
-        </a>
+      </a>
       <% else %>
-        </span>
+      </span>
+      <% end %>
+      <% if config[:tech_docs][:phase] %>
+        <strong class="govuk-tag"><%= config[:tech_docs][:phase] %></strong>
       <% end %>
     </div>
-
     <% if config[:tech_docs][:header_links] %>
-      <div data-module="navigation">
-        <button type="button" class="header__navigation-toggle js-nav-toggle" aria-controls="navigation" aria-label="Show or hide top level navigation">Menu</button>
-
-        <nav id="navigation" class="header__navigation js-nav" aria-label="Top Level Navigation" aria-hidden="true">
-          <ul>
-            <% config[:tech_docs][:header_links].each do |title, path| %>
-              <li<% if active_page(path) %> class="active"<% end %>>
-                <a href="<%= url_for path %>"><%= title %></a>
-              </li>
-            <% end %>
-          </ul>
-        </nav>
-      </div>
+    <div class="govuk-header__content">
+      <button type="button" role="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+      <nav>
+        <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
+          <% 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="<%= url_for path %>"><%= title %></a>
+            </li>
+          <% end %>
+        </ul>
+      </nav>
+    </div>
     <% end %>
   </div>
 </header>