RFR: Print styling on timetable service listings. #417. (#420)

* Print styling on timetable service listings. #417.

* use existing styling on button

* wire up print function

* hide some more elements

src/js/find-help.js

@@ -1,4 +1,5 @@
 const browser = require('./browser')
+const print = require('./navigation/print')
 const querystring = require('./get-url-parameter')
 import { PostcodeProximity } from './components/PostcodeProximity'
 
@@ -31,6 +32,8 @@ const FindHelp = function (location) {
     : querystring.parameter('range')
 
   self.initFindHelpPostcodesLocationSelector = (onChangeCallback) => {
+    print.init()
+
     const decoratedCallback = (locationResult, range) => {
       self.currentRange = range
       const location = browser.location()

src/partials/find-help/header.hbs

@@ -1,4 +1,7 @@
 <header class="multi-form-header">
   <h1 class="h1">\{{{categoryName}}}</h1>
   \{{{categorySynopsis}}}
+  <button class="btn btn--brand-d js-print-btn">
+    <span class="btn__text">Print this page</span>
+  </button>
 </header>

src/scss/partials/_accordion.scss

@@ -49,6 +49,7 @@
 
     @media print {
       & {
+        background: none;
         padding-left: 0px;
         color: black;
         font-size: 20px;

src/scss/partials/_block.scss

@@ -331,6 +331,10 @@
   }
 }
 
+.block-tabs--cards {
+  @include printHide();
+}
+
 .block-tabs__tab {
   @include span(1 of 2);
 

src/scss/partials/_btn.scss

@@ -178,3 +178,7 @@
     margin: 0;
   }
 }
+
+.js-print-btn {
+  @include printHide();
+}

src/scss/partials/_card.scss

@@ -14,13 +14,41 @@ $spacing: 20px;
       @include span(7 of 12);
       @include first();
     }
+
+    @media print {
+      & {
+        width: 100%;
+        float: none;
+        margin-right: 0;
+
+        .accordion {
+          max-width: 100%;
+          box-shadow: none;
+
+          .accordion__header {
+            padding-left: 10px;
+            color: white;
+
+            .accordion__icon {
+              display: none;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
 .card {
   border-radius: $radius;
   margin-bottom: $spacing;
   text-align: center;
+
+  @media print {
+    & {
+      box-shadow: none;
+    }
+  }
 }
 
 .card__details {
@@ -261,6 +289,7 @@ $spacing: 20px;
   }
   .card__details__link {
     text-decoration: underline;
+    @include printHide();
   }
 }
 

src/scss/partials/_form.scss

@@ -44,6 +44,9 @@
   background: white;
   padding: 20px 20px 5px 20px;
   margin: 15px 0 30px 0;
+
+  @include printHide();
+
   @include mq($from: m) {
     @include span(2 of 6);
     @include last();

src/scss/partials/_social-share.scss

@@ -5,6 +5,8 @@
   text-align: center;
   line-height: 40px;
 
+  @include printHide();
+
   &--home {
     margin-top: 20px;
   }