govuk_tech_docs 2.4.0 → 3.0.0

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

@@ -52,48 +52,44 @@ $input-size: 40px;
   }
 }
 
-html.has-search-results-open {
-  overflow: hidden;
-  .app-pane__content {
-    overflow: hidden;
-  }
-  
-  .toc__close{
-    display: none;
+@include govuk-media-query($until: tablet) {
+  html.js.has-search-results-open:not(.toc-open) {
+    .toc {
+      display: block;
+      padding-bottom: 0;
+    }
+
+    .toc__close {
+      display: none;
+    }
+
+    .toc__list {
+      display: none;
+    }
   }
 }
+
 .search-results {
-  display: none;
-  &.is-open {
-    display: block;
+  @include govuk-media-query(tablet) {
+    // Create basis for the search results caret (below)
+    position: relative;
+
+    @include govuk-font($size: 16);
+    padding-top: govuk-spacing(6);
   }
-}
 
-.search-results {
-    position: absolute;
-    top: 60px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 600;
-    overflow-x: scroll;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    @include govuk-media-query(tablet) {
-      padding: govuk-spacing(6);
-      top: 0;
-      // The width of the sidebar
-      left: 330px;
-      min-height: auto;
-    }
+  a {
+    @include govuk-link-common;
+    @include govuk-link-style-no-visited-state;
+  }
 
-    a {
-      @include govuk-link-common;
-      @include govuk-link-style-no-visited-state;
-    }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
   }
+}
 .search-results__inner {
-  position: relative;
   background: govuk-colour("white");
   border-top: 1px solid govuk-colour("mid-grey");
   max-width: 40rem;
@@ -104,7 +100,7 @@ html.has-search-results-open {
     &::after {
       content: '';
       position: absolute;
-      top: 10px;
+      top: 35px;
       left: -9px;
       width: 10px;
       height: 20px;
@@ -117,44 +113,6 @@ html.has-search-results-open {
   @include govuk-font($size: 27, $weight: bold);
   margin-bottom: govuk-spacing(6);
 }
-.search-results__close {
-  @include govuk-font($size: 16);
-  position: absolute;
-  top: 18px;
-  right: 20px;
-  appearance: none;
-  -webkit-appearance: none;
-  background: none;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-
-  &:focus {
-    @include govuk-focused-text;
-  }
-
-  &::after {
-    content: '';
-    display: inline-block;
-    vertical-align: middle;
-    padding-left: 8px;
-    height: 18px;
-    width: 18px;
-    background: no-repeat url('/images/govuk-icn-close.png') center right;
-    @include govuk-device-pixel-ratio {
-      background-image: url('/images/govuk-icn-close@2x.png');
-    }
-    background-size: contain;
-  }
-}
-.search-results__close-label {
-  position: absolute;
-  left: -9999em;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
 .search-result {
   margin-bottom: govuk-spacing(6);
 }
@@ -162,4 +120,24 @@ html.has-search-results-open {
   background-color: transparent;
   color: inherit;
   font-weight: bold;
+
+  // In forced color mode some browsers will keep the background transparent
+  // but set the text colour black, making the highlighted text unreadable.
+  // The following blocks fix this by setting the text colour to be the same as
+  // other text in a way that forced color mode will respect.
+
+  @media screen and (-ms-high-contrast: active) {
+    // IE does not support `CanvasText`,
+    // and `currentColor` does not work with Blink
+    color: currentColor;
+  }
+
+  @media screen and (forced-colors: active) {
+    background-color: Canvas;  // needed for Firefox
+    color: CanvasText;
+  }
+}
+
+.js .search-help__no-js {
+  display: none;
 }

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

@@ -11,10 +11,6 @@
     margin: 0 govuk-spacing(6) govuk-spacing(6);
   }
 
-  .has-search-results-open & {
-    visibility: hidden;
-  }
-
   > h1 {
     @extend %govuk-heading-xl;
 

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

@@ -165,9 +165,6 @@
 
       .toc__list {
         margin-right: govuk-spacing(7);
-        &.search-results-open {
-          display: none;
-        }
       }
 
       .toc__close {

data/lib/govuk_tech_docs/table_of_contents/helpers.rb

@@ -8,14 +8,11 @@ module GovukTechDocs
   module TableOfContents
     module Helpers
       def single_page_table_of_contents(html, url: "", max_level: nil)
-        headings = HeadingsBuilder.new(html, url).headings
-
-        if headings.none? { |heading| heading.size == 1 }
-          raise "No H1 tag found. You have to at least add one H1 heading to the page: " + url
-        end
+        output = "<ul>\n"
+        output += list_items_from_headings(html, url: url, max_level: max_level)
+        output += "</ul>\n"
 
-        tree = HeadingTreeBuilder.new(headings).tree
-        HeadingTreeRenderer.new(tree, max_level: max_level).html
+        output
       end
 
       def multi_page_table_of_contents(resources, current_page, config, current_page_html = nil)
@@ -28,6 +25,17 @@ module GovukTechDocs
         render_page_tree(resources, current_page, config, current_page_html)
       end
 
+      def list_items_from_headings(html, url: "", max_level: nil)
+        headings = HeadingsBuilder.new(html, url).headings
+
+        if headings.none? { |heading| heading.size == 1 }
+          raise "No H1 tag found. You have to at least add one H1 heading to the page: " + url
+        end
+
+        tree = HeadingTreeBuilder.new(headings).tree
+        HeadingTreeRenderer.new(tree, max_level: max_level).html
+      end
+
       def render_page_tree(resources, current_page, config, current_page_html)
         # Sort by weight frontmatter
         resources = resources
@@ -69,7 +77,7 @@ module GovukTechDocs
             output += "</li>\n"
           else
             output +=
-              single_page_table_of_contents(
+              list_items_from_headings(
                 content,
                 url: resource.url,
                 max_level: config[:tech_docs][:max_toc_heading_level],

data/lib/govuk_tech_docs/version.rb

@@ -1,3 +1,3 @@
 module GovukTechDocs
-  VERSION = "2.4.0".freeze
+  VERSION = "3.0.0".freeze
 end

data/lib/govuk_tech_docs.rb

@@ -113,10 +113,12 @@ module GovukTechDocs
           url:     { index: false, store: true },
         }
 
-        search.pipeline_remove = %w[stopWordFilter]
+        search.pipeline_remove = %w[stemmer stopWordFilter]
 
         search.tokenizer_separator = '/[\s\-/]+/'
       end
+    else
+      context.ignore "search/*"
     end
   end
 end

data/lib/source/layouts/_header.erb

@@ -8,7 +8,6 @@
       <% end %>
         <% if config[:tech_docs][:show_govuk_logo] %>
         <span class="govuk-header__logotype">
-          <!--[if gt IE 8]><!-->
           <svg
             aria-hidden="true"
             focusable="false"
@@ -23,10 +22,6 @@
               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>
           </svg>
-          <!--<![endif]-->
-          <!--[if IE 8]>
-          <img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
-          <![endif]-->
           <span class="govuk-header__logotype-text">
             GOV.UK
           </span>

data/lib/source/layouts/_search.erb

@@ -13,12 +13,5 @@
       placeholder="Search">
     <button type="submit" class="search__button">Search</button>
   </form>
-  <div id="search-results" class="search-results" aria-hidden="true" role="dialog" aria-labelledby="search-results-title">
-    <div class="search-results__inner">
-      <button class="search-results__close">Close<span class="search-results__close-label"> search results</span></button>
-      <h2 id="search-results-title" class="search-results__title" aria-live="assertive" role="alert">Results</h2>
-      <div class="search-results__content"></div>
-    </div>
-  </div>
 </div>
 <% end %>

data/lib/source/layouts/layout.erb

@@ -4,8 +4,10 @@ wrap_layout :core do
 
   content_for(:toc_module, "in-page-navigation")
 
+  use_multipage_nav = current_page.data.fetch(:multipage_nav, config[:tech_docs][:multipage_nav])
+
   content_for :sidebar do
-    if config[:tech_docs][:multipage_nav] %>
+    if use_multipage_nav %>
       <%= multi_page_table_of_contents(sitemap.resources, current_page, config, html) %>
     <% else %>
       <%= single_page_table_of_contents(html, max_level: config[:tech_docs][:max_toc_heading_level]) %>

data/lib/source/search/index.html.erb

@@ -0,0 +1,31 @@
+---
+title: Search
+index: false
+prevent_indexing: true
+hide_in_navigation: true
+---
+
+<div id="search-help" class="search-help">
+  <%# strange id is to avoid clash with search input id #%>
+  <h1 id="how-to-search">Search</h1>
+
+  <p class="govuk-body search-help__no-js">
+    You need to turn on JavaScript in your browser to search this site. You can either:
+
+    <ul>
+      <li>turn on JavaScript in your browser</li>
+      <li>search this site using Google</li>
+    </ul>
+  </p>
+
+  <p class="govuk-body">
+    Enter a search term in the search box, then select the search button.
+  </p>
+</div>
+
+<div id="search-results" class="search-results" hidden aria-labelledby="search-results-title">
+  <div class="search-results__inner">
+    <h1 id="search-results-title" class="search-results__title" aria-live="assertive">Results</h1>
+    <div class="search-results__content"></div>
+  </div>
+</div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_tech_docs
 version: !ruby/object:Gem::Version
-  version: 2.4.0
+  version: 3.0.0
 platform: ruby
 authors:
 - Government Digital Service
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-07-28 00:00:00.000000000 Z
+date: 2021-10-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -279,7 +279,6 @@ files:
 - ".ruby-version"
 - ".travis.yml"
 - CHANGELOG.md
-- CONTRIBUTING.md
 - Gemfile
 - LICENCE
 - README.md
@@ -309,6 +308,7 @@ files:
 - example/source/not-expired-page.html.md
 - example/source/pets.yml
 - example/source/prevent-index-page.html.md
+- example/source/single-page-nav.html.md
 - example/source/stylesheets/print.css.scss
 - example/source/stylesheets/screen-old-ie.css.scss
 - example/source/stylesheets/screen.css.scss
@@ -387,6 +387,7 @@ files:
 - lib/source/layouts/_search.erb
 - lib/source/layouts/core.erb
 - lib/source/layouts/layout.erb
+- lib/source/search/index.html.erb
 - lib/source/stylesheets/manifest.css
 - node_modules/govuk-frontend/govuk/_base.scss
 - node_modules/govuk-frontend/govuk/all-ie8.scss

data/CONTRIBUTING.md

@@ -1,12 +0,0 @@
-## Contributing to this project
-
-Everybody who uses this project is encouraged to contribute to this project. If you're part of the [alphagov GitHub organisation](https://www.github.com/alphagov) you probably have write access to this repo. If you don't, ask a GitHub admin or #tech-docs-format on Slack.
-
-- Before adding your feature, [check the backlog to see if someone is already talking about it](https://github.com/alphagov/tech-docs-template/issues)
-- If you add a new option to `config/tech-docs.yml`, make sure you [document the new configuration option][configuration]
-- If you add a new option to the page frontmatter, make sure you [document the new frontmatter configuration](docs/frontmatter.md)
-- You can test your contribution using [unit tests](spec/govuk_tech_docs), [javascript tests](spec/javascripts) or [integration tests](spec/features)
-- If your change is relevant to the users of the gem, add something to [CHANGELOG](CHANGELOG.md). You don't have to do this if it's just refactoring. Make sure that you include any upgrade instructions.
-
-[configuration]: https://github.com/alphagov/tdt-documentation/blob/master/source/amend_project/configuration/index.html.md.erb
-[frontmatter]: https://github.com/alphagov/tdt-documentation/blob/master/source/frontmatter.html.md.erb