govuk_tech_docs 2.4.2 → 3.1.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/api_reference/api_reference_renderer.rb

@@ -7,6 +7,7 @@ module GovukTechDocs
       def initialize(app, document)
         @app = app
         @document = document
+        @redcarpet = build_redcarpet(app)
 
         # Load template files
         @template_api_full = get_renderer("api_reference_full.html.erb")
@@ -137,6 +138,11 @@ module GovukTechDocs
 
     private
 
+      def build_redcarpet(app)
+        renderer = GovukTechDocs::TechDocsHTMLRenderer.new(context: app.config_context)
+        Redcarpet::Markdown.new(renderer)
+      end
+
       def get_renderer(file)
         template_path = File.join(File.dirname(__FILE__), "templates/" + file)
         template = File.open(template_path, "r").read
@@ -159,6 +165,10 @@ module GovukTechDocs
         id = "schema-#{schema.name.parameterize}"
         "<a href='\##{id}'>#{schema.name}</a>"
       end
+
+      def render_markdown(text)
+        @redcarpet.render(text) if text
+      end
     end
   end
 end

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

@@ -1,5 +1,5 @@
 <h1 id="<%=  info.title.parameterize %>"><%= info.title %> v<%= info.version %></h1>
-<%= info.description_html %>
+<%= render_markdown(info.description) %>
 
 <%# OpenAPI files default to having a single server of URL "/" %>
 <% if servers.length > 1 || servers[0].url != "/" %>
@@ -7,7 +7,7 @@
   <div id="server-list">
     <% servers.each do |server| %>
     <% if server.description %>
-    <p><strong><%= server.description %></strong></p>
+    <p><strong><%= render_markdown(server.description) %></strong></p>
     <% end %>
     <a href="<%= server.url %>"><%= server.url %></a>
   <% end %>

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

@@ -3,7 +3,7 @@
   <p><em><%= operation.summary %></em></p>
 <% end %>
 <% if operation.description %>
-  <%= operation.description_html %>
+  <%= render_markdown(operation.description) %>
 <% end %>
 
 <%= parameters %>

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

@@ -11,7 +11,7 @@
 <td><%= parameter.in %></td>
 <td><%= parameter.schema.type %></td>
 <td><%= parameter.required? %></td>
-<td><%= parameter.description_html %>
+<td><%= render_markdown(parameter.description) %>
 <% if parameter.schema.enum %>
 <p>Available items:</p>
 <ul>

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

@@ -9,7 +9,7 @@
 <tr>
 <td><%= key %></td>
 <td>
-<%= response.description_html %>
+<%= render_markdown(response.description) %>
 <% if response.content['application/json']
 if response.content['application/json']["example"]
   request_body = json_prettyprint(response.content['application/json']["example"])

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

@@ -1,5 +1,5 @@
 <h3 id="<%= id = 'schema-' + title; id.parameterize %>"><%= title %></h3>
-<%= schema.description_html %>
+<%= render_markdown(schema.description) %>
 <% if properties.any? %>
 <table class='<%= id.parameterize %>'>
 <thead>
@@ -11,7 +11,7 @@
 <td><%= property_name %></td>
 <td><%= property_attributes.type %></td>
 <td><%= schema.requires?(property_name) %></td>
-<td><%= property_attributes.description_html %></td>
+<td><%= render_markdown(property_attributes.description) %></td>
 <td>
   <%=
   linked_schema = property_attributes

data/lib/govuk_tech_docs/contribution_banner.rb

@@ -20,12 +20,18 @@ module GovukTechDocs
 
     def report_issue_url
       url = config[:source_urls]&.[](:report_issue_url)
+      params = {
+        body: "Problem with '#{current_page.data.title}' (#{config[:tech_docs][:host]}#{current_page.url})",
+      }
 
       if url.nil?
-        "#{repo_url}/issues/new?labels=bug&title=Re: '#{current_page.data.title}'&body=Problem with '#{current_page.data.title}' (#{config[:tech_docs][:host]}#{current_page.url})"
+        url = "#{repo_url}/issues/new"
+        params["labels"] = "bug"
+        params["title"] = "Re: '#{current_page.data.title}'"
       else
-        "#{url}?subject=Re: '#{current_page.data.title}'&body=Problem with '#{current_page.data.title}' (#{config[:tech_docs][:host]}#{current_page.url})"
+        params["subject"] = "Re: '#{current_page.data.title}'"
       end
+      "#{url}?#{URI.encode_www_form(params)}"
     end
 
     def repo_url

data/lib/govuk_tech_docs/version.rb

@@ -1,3 +1,3 @@
 module GovukTechDocs
-  VERSION = "2.4.2".freeze
+  VERSION = "3.1.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

@@ -41,9 +41,9 @@
     </div>
     <% if config[:tech_docs][:header_links] %>
     <div class="govuk-header__content">
-      <button type="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">
+      <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" aria-label="Show or hide menu">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="<%= url_for path %>"><%= title %></a>

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/core.erb

@@ -27,7 +27,7 @@
 
     <div class="app-pane">
       <div class="app-pane__header toc-open-disabled">
-        <a href="#content" class="govuk-skip-link">Skip to main content</a>
+        <a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
 
         <%= partial 'layouts/header' %>
       </div>

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>