EL-1764: Add ability to print FALA results page (#367)

- update gulpfile
- add in css
- place button on results page
- add in JS
- don't print footer, banner, beta banner, google translate
- add css so that content after <a> links don't print
- wrap pagination with `govuk-!-display-none-print` class
- add in no JS support for printing
- add in an 'if statement' to show print button only when there are results
- updated based on review comments, in order to show search categories without showing button.

fala/assets-src/sass/main.scss

@@ -5,6 +5,8 @@ $govuk-fonts-path: "/static/fonts/";
 $govuk-new-typography-scale: true;
 $govuk-global-styles: true;
 $govuk-new-link-styles: true;
+$gem-c-print-link-background-width: 16px;
+$gem-c-print-link-background-height: 18px;
 
 @import "node_modules/govuk-frontend/dist/govuk/all";
 
@@ -29,6 +31,15 @@ $laa-dev-colour: govuk-colour("pink");
   }
 }
 
+@media print {
+  a[href]:after {
+    content: none !important;
+  }
+  html, body, div, h2, h3, p, ul, li, span {
+    font-size: 14px !important;
+  }
+}
+
 .fala-tickbox-columns_new .govuk-checkboxes__item {
   // Ensure items do not break across columns
   break-inside: avoid;
@@ -54,6 +65,13 @@ $laa-dev-colour: govuk-colour("pink");
   }
 }
 
+.printing-button {
+  display: none;
+  .js-enabled & {
+    display: block;
+  }
+}
+
 body:not(.fala-production) {
   .govuk-header__container {
     border-bottom-color:$laa-unknown-colour;
@@ -136,3 +154,24 @@ body.fala-dev {
   font-size: 19px;
   -webkit-font-smoothing: antialiased;
 }
+
+.print-link {
+  background: url("icon-print.png") no-repeat govuk-spacing(2) 50%;
+  background-size: $gem-c-print-link-background-width $gem-c-print-link-background-height;
+  padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-print-link-background-width);
+  text-decoration: none;
+  border: 1px solid govuk-colour("dark-grey");
+  color: $govuk-link-colour;
+  cursor: pointer;
+  margin: govuk-spacing(0);
+
+  &:hover {
+    background-color: govuk-colour("light-grey");
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+    background-color: $govuk-focus-colour;
+    border-color: transparent;
+  }
+}

fala/assets-src/scripts/print_results.js

@@ -0,0 +1,8 @@
+const printResultsPage = document.getElementById("printButton");
+
+if (printResultsPage) {
+  printResultsPage.addEventListener("click", () => {
+    window.print();
+  })
+};
+

fala/templates/adviser/_cookie_banner.html

@@ -1,4 +1,4 @@
-<div class="fala-cookie-banner">
+<div class="fala-cookie-banner govuk-!-display-none-print">
   {% block bodyStart %}
     {% if "cookiePermission" not in request.COOKIES %}
       {% set html %}

fala/templates/adviser/_footer.html

@@ -1,4 +1,4 @@
-<footer class="govuk-footer" role="contentinfo">
+<footer class="govuk-footer govuk-!-display-none-print" role="contentinfo">
   <div class="govuk-width-container ">
     <div class="govuk-footer__meta">
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">

fala/templates/adviser/_research_banner.html

@@ -1,4 +1,4 @@
-<div class="govuk-grid-column-two-thirds">
+<div class="govuk-grid-column-two-thirds govuk-!-display-none-print">
   <div class="govuk-panel research-panel govuk-!-margin-bottom-6 govuk-!-padding-3">
   <span class="govuk-heading-s govuk-!-margin-bottom-2">
     Help improve this legal adviser search

fala/templates/adviser/adviser_base.html

@@ -42,7 +42,7 @@
 {% endblock %}
 
 {% block global_subheader %}
-  <aside class="govuk-phase-banner ">
+  <aside class="govuk-phase-banner govuk-!-display-none-print">
     <p class="govuk-phase-banner__content">
       <strong class="govuk-tag govuk-phase-banner__content__tag">
         {% if ENVIRONMENT == "dev" %}

fala/templates/adviser/results.html

@@ -6,7 +6,7 @@
 
 {% block content %}
   <div class="govuk-grid-column-full">
-    <div id="google_translate_element" class="govuk-!-margin-bottom-6"></div>
+    <div id="google_translate_element" class="govuk-!-margin-bottom-6 govuk-!-display-none-print"></div>
   </div>
   {% if FEATURE_FLAG_SURVEY_MONKEY %}
     {% include 'adviser/_research_banner.html' %}
@@ -48,12 +48,23 @@ <h1 class="govuk-heading-xl">Search results</h1>
         {{ govukButton({
            'text': "Change search",
            'type': "submit",
-           'classes': "govuk-!-margin-bottom-2",
+           'classes': "govuk-!-margin-bottom-2 govuk-!-display-none-print",
            'id': "changeSearchButton",
            'name': "search"
         }) }}
       </form>
     </div>
+
+    {% if data.count >= 1 %}
+      <div class="printing-button">
+        <div class="govuk-!-display-none-print govuk-!-margin-top-3 govuk-!-margin-bottom-5">
+          <button id="printButton" class="govuk-link govuk-body-s print-link">
+            Print this page
+          </button>
+        </div>
+      </div>
+    {% endif %}
+
     <span class="govuk-body results-header">
     {% if data.count > 0 %}
       {% if data.origin %}
@@ -121,13 +132,15 @@ <h3 class="govuk-heading-s govuk-!-margin-top-4 govuk-!-margin-bottom-2">{{ _('C
               </ul>
             </div>
             {% endif %}
-            <a class="govuk-link" class="url" target="_blank" rel="noopener" href="https://www.google.com/maps/search/?{{ item|google_map_params|urlencode }}">
+            <a class="govuk-link govuk-!-display-none-print" class="url" target="_blank" rel="noopener" href="https://www.google.com/maps/search/?{{ item|google_map_params|urlencode }}">
               View on map (opens in new tab)
             </a>
           </li>
         {% endfor %}
       </ul>
-      {{ govukPagination(pagination) }}
+      <nav class="govuk-!-display-none-print"> 
+        {{ govukPagination(pagination) }}
+      </nav>
     {% endif %}
   </div>
 {% endblock %}

gulpfile.js

@@ -10,15 +10,18 @@ const { src, parallel, dest} = require('gulp');
 const jsPath = [
   'fala/assets-src/scripts/cookies.js',
   'fala/assets-src/scripts/google_tag_manager_data_layer.js',
+  'fala/assets-src/scripts/print_results.js',
   'node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js'
 ];
 
 // FALA css & GOVUK css - because we import GOVUK scss into same file in order to override/add to GOVUK classes
 const cssPath = 'fala/assets-src/sass/*.scss';
 
-// GOVUK font & images only - because we have no FALA assets any more
+// GOVUK font & images 
 const assetPath = 'node_modules/govuk-frontend/dist/govuk/assets/**';
 
+// Icon for 'print this page' button
+const imagePath =   'fala/assets-src/images/icon-print.png';
 
  function jsTask() {
   return src(jsPath)
@@ -51,9 +54,15 @@ function assetTask() {
   .pipe(dest('fala/assets'));
 }
 
+function imageTask() {
+  return src(imagePath, { encoding: false })
+  .pipe(dest('fala/assets/css'));
+}
+
 exports.jsTask = jsTask;
 exports.cssTask = cssTask;
 exports.assetTask = assetTask;
+exports.imageTask = imageTask;
 
 // build/execute the tasks
-exports.build = parallel(jsTask, cssTask, assetTask);
+exports.build = parallel(jsTask, cssTask, assetTask, imageTask);