[SDPA-3114] Add print publication feature. (#543)

* [SDPA-3114] Add publication view all page - Fix anchorlink tests - Add print document links and functionality - update snapshots - CR changes and remove print button on printall page. - remove get assignment in mapping constructor - Use router afterEach hook to trigger print window - Fixed sort order of publication pages * [SDPA-3307][SDPA-3341][SDPA-3415] [SDPA-3435] print publication issue (#583) * [SDPA-3307] Updated print styles as required - Removed print hidden style for most of components - Updated heading style for publication print all - Fixed map print issue - Fixed card carousel print issue - Fixed page title print style - Added class for content type template container * [SDPA-3341] Added contect component to publication print * [SDPA-3415] Added publication content in print all * [SDPA-3435] Added intro text in publication print all
dpc-sdp · Nov 12, 2019 · 7a6859e · 7a6859e
1 parent d4b5990
commit 7a6859e
Show file tree

Hide file tree

Showing 36 changed files with 644 additions and 71 deletions.
diff --git a/examples/vic-gov-au/test/e2e/integration/core-modules/publication/publication.feature b/examples/vic-gov-au/test/e2e/integration/core-modules/publication/publication.feature
@@ -1,5 +1,34 @@
 Feature: Publication
-  This test is not ready yet
 
-  @skip
-  Scenario: Test
+  @focus
+  Scenario: Print all publication pages
+    Given the "/demo-publication" route exists
+    Given the "/demo-publication/demo-publication-chapter-1" route exists
+    Given the "/demo-publication/demo-publication-chapter-2" route exists
+    Given the "/demo-publication/demo-publication-chapter-1/demo-publication-chapter-1-page-1" route exists
+    When I visit the page "/demo-publication/print-all"
+    Then the page title should be "Demo Publication"
+    And the following section ids should exist:
+      | section |
+      | demo-publication-chapter-1        |
+      | demo-publication-chapter-1-page-1 |
+      | demo-publication-chapter-2        |
+      | demo-publication-chapter-2-page-1 |
+    And the author information component should exist
+    And there should be a description list with the following items:
+      | term    | value                                                                         |
+      | Author  | Lorem ipsum dolor sit amet, Nulla ultricies dignissim, Integer interdum nisl  |
+      | Date    | July 2019                                                                     |          
+    And the anchor links component should exist
+    And the anchor link title should be "On this page:"
+    And there should be the following anchor links:
+      | text                                  | link                              |
+      | Demo Publication - Chapter 1          | demo-publication-chapter-1        |
+      | Demo Publication - Chapter 1 - Page 1 | demo-publication-chapter-1-page-1 |
+      | Demo Publication - Chapter 1 - Page 2 | demo-publication-chapter-1-page-2 |
+      | Demo Publication - Chapter 2          | demo-publication-chapter-2        |
+      | Demo Publication - Chapter 2 - Page 1 | demo-publication-chapter-2-page-1 |
+      | Demo Publication - Chapter 2 - Page 2 | demo-publication-chapter-2-page-2 |
+      | Demo Publication - Chapter 2 - Page 3 | demo-publication-chapter-2-page-3 |
+      | Demo Publication - Chapter 3          | demo-publication-chapter-3        |                                                                     |          
+    And the contact component should exist
diff --git a/packages/components/Atoms/Global/scss/tools/_grid.scss b/packages/components/Atoms/Global/scss/tools/_grid.scss
@@ -111,10 +111,19 @@
 @mixin rpl_grid_row_gutter($row-gutter: rpl-grid-get-row-gutter($rpl-grid)) {
   > div {
     @if type-of($row-gutter) == map {
+      $_rpl_grid_row_gutter_print: false;
       @each $bp, $gutter in $row-gutter {
         @include rpl_breakpoint($bp) {
           margin-bottom: $gutter;
         }
+
+        @if $_rpl_grid_row_gutter_print == false {
+          $_rpl_grid_row_gutter_print: true;
+          // Add margin to print as well
+          @media print {
+            margin-bottom: $gutter;
+          }
+        }
       }
     } @else {
       margin-bottom: $row-gutter;

diff --git a/packages/components/Molecules/AnchorLinks/index.vue b/packages/components/Molecules/AnchorLinks/index.vue
@@ -58,6 +58,10 @@ export default {
     position: relative;
     margin: $rpl-anchor-links-margin;
 
+    @include rpl_print {
+      border-left: 0;
+    }
+
     @include rpl_breakpoint('s') {
       padding-left: $rpl-anchor-links-left-padding-s;
     }
@@ -70,8 +74,6 @@ export default {
       padding-left: $rpl-anchor-links-left-padding-xl;
     }
 
-    @include rpl_print_hidden;
-
     &__row {
       @include rpl_breakpoint('s') {
         max-width: $rpl-anchor-links-max-width-s;
@@ -94,6 +96,10 @@ export default {
       @include rpl_breakpoint('s') {
         padding-bottom: $rpl-anchor-links-title-padding;
       }
+
+      @media print {
+        @include rpl_typography(heading_s);
+      }
     }
 
     &__items {

diff --git a/packages/components/Molecules/Card/CardBox.vue b/packages/components/Molecules/Card/CardBox.vue
@@ -58,8 +58,6 @@ $rpl-card-box-item-margin:  0 $rpl-space-3 $rpl-space * 6 !default;
     padding: $rpl-card-box-padding;
   }
 
-  @include rpl_print_hidden;
-
   &__items {
     display: flex;
     flex-wrap: wrap;

diff --git a/packages/components/Molecules/Card/CardContent.vue b/packages/components/Molecules/Card/CardContent.vue
@@ -127,8 +127,6 @@ export default {
     border: $rpl-card-content-border;
     border-radius: $rpl-card-content-border-radius;
 
-    @include rpl_print_hidden;
-
     &:hover,
     &:focus {
       @include rpl_dropshadow;

diff --git a/packages/components/Molecules/Card/CardNavigationFeatured.vue b/packages/components/Molecules/Card/CardNavigationFeatured.vue
@@ -116,8 +116,6 @@ export default {
     border-radius: $rpl-card-navigation-featured-border-radius;
     background: $rpl-card-navigation-featured-summary-background;
 
-    @include rpl_print_hidden;
-
     &:hover,
     &:focus {
       @include rpl_dropshadow;

diff --git a/packages/components/Molecules/Card/no-ssr/CardCarousel.vue b/packages/components/Molecules/Card/no-ssr/CardCarousel.vue
@@ -163,8 +163,6 @@ export default {
   $rpl-card-carousel-navigation-bottom-margin: $rpl-space-3 !default;
 
   .rpl-card-carousel {
-    @include rpl_print_hidden;
-
     &__title {
       @include rpl_typography_ruleset($rpl-card-carousel-title-ruleset);
       color: $rpl-card-carousel-title-text-color;
@@ -195,6 +193,15 @@ export default {
 
     .VueCarousel-inner {
       padding-bottom: $rpl-card-carousel-inner-padding;
+
+      @include rpl_print {
+        display: block;
+        transform: none;
+
+        .VueCarousel-slide {
+          margin-bottom: $rpl-space-4;
+        }
+      }
     }
 
     &__navigation {

diff --git a/packages/components/Molecules/Form/index.vue b/packages/components/Molecules/Form/index.vue
@@ -137,7 +137,6 @@ export default {
 
 .rpl-form {
   @include rpl_typography_ruleset($rpl-form-text-ruleset);
-  @include rpl_print_hidden;
 
   &__title {
     margin-top: 0;

diff --git a/packages/components/Molecules/Layout/PageLayout.vue b/packages/components/Molecules/Layout/PageLayout.vue
@@ -163,6 +163,7 @@ $rpl-search-back-to-top-offset: 72px / 2;
 
     @include rpl_print {
       padding-top: 0;
+      background-image: none !important;
     }
   }
 

diff --git a/packages/components/Molecules/Map/Map.vue b/packages/components/Molecules/Map/Map.vue
@@ -310,6 +310,12 @@ export default {
       left: 0;
       box-sizing: border-box;
       cursor: grab;
+
+      @include rpl_print {
+        // Change to auto otherwise it won't got printable.
+        width: auto;
+        height: auto;
+      }
     }
 
     &__container {

diff --git a/packages/components/Organisms/CallToAction/index.vue b/packages/components/Organisms/CallToAction/index.vue
@@ -68,8 +68,6 @@ export default {
     border-radius: $rpl-call-to-action-border-radius;
     border: $rpl-call-to-action-border;
 
-    @include rpl_print_hidden;
-
     &__image {
       width: 100%;
     }

diff --git a/packages/components/Organisms/HeroBanner/HeroBanner.vue b/packages/components/Organisms/HeroBanner/HeroBanner.vue
@@ -120,6 +120,7 @@ export default {
     'l': ('tera', 1.07em, 'bold'),
     'xxl': ('tera', 1em, 'bold')
   ) !default;
+  $rpl-hero-banner-title-print-line-height: 1.2em;
   $rpl-hero-banner-title-typography-ruleset-dark: (
     'xs': ('mega', 1.14em, 'bold', true),
     's': ('giga', 1.11em, 'bold', true),
@@ -240,6 +241,7 @@ export default {
       padding: 0;
       border: 0;
       background-image: none !important; // Needs to override inline definition.
+      margin-bottom: $rpl-space-4 * 3;
     }
 
     &__left {
@@ -283,6 +285,10 @@ export default {
       word-wrap: break-word;
       margin: 0;
 
+      @include rpl_print {
+        line-height: $rpl-hero-banner-title-print-line-height;
+      }
+
       &--dark {
         @include rpl_typography_ruleset($rpl-hero-banner-title-typography-ruleset-dark);
       }

diff --git a/packages/components/Organisms/ImageGallery/no-ssr/ImageGallery.vue b/packages/components/Organisms/ImageGallery/no-ssr/ImageGallery.vue
@@ -145,8 +145,6 @@ export default {
   .rpl-image-gallery {
     position: relative;
 
-    @include rpl_print_hidden;
-
     &__enlarge {
       background-color: $rpl-image-gallery-enlarge-background-color;
       border: 0;

diff --git a/packages/components/Organisms/News/NewsListing.vue b/packages/components/Organisms/News/NewsListing.vue
@@ -62,8 +62,6 @@ export default {
       padding-top: $rpl-space-4 * 2;
     }
 
-    @include rpl_print_hidden;
-
     &__heading {
       @include rpl_typography_ruleset($rpl-news-listing-heading-ruleset);
       @include rpl_text_color($rpl-news-listing-heading-text-color);

diff --git a/packages/components/Organisms/Publication/PublicationDownloadPrint.vue b/packages/components/Organisms/Publication/PublicationDownloadPrint.vue
@@ -3,11 +3,17 @@
     <li v-for="(link, index) in links" :key="index">
       <rpl-document-link class="rpl-publication-download-print__print-item" v-bind="link" @click.native="downloadClick(link.name)" />
     </li>
-    <li v-if="showPrint" class="rpl-publication-download-print__print-list-item">
-      <button class="rpl-publication-download-print__print-item rpl-publication-download-print__print-button" @click="printClick()">
-        <rpl-icon class="rpl-publication-download-print__print-button-icon" symbol="print" color="primary" size="l" />
-        <div class="rpl-publication-download-print__print-button-info">
-          <span class="rpl-publication-download-print__print-button-title">{{ printText }}</span>
+    <li v-if="printLink || printPage" class="rpl-publication-download-print__print-list-item">
+      <rpl-link v-if="printLink" class="rpl-publication-download-print__print-item rpl-publication-download-print__print-link" :href="printLink.href">
+        <rpl-icon class="rpl-publication-download-print__print-link-icon" symbol="print" color="primary" size="l" />
+        <div class="rpl-publication-download-print__print-link-info">
+          <span class="rpl-publication-download-print__print-link-title">{{ printLink.text }}</span>
+        </div>
+      </rpl-link>
+      <button v-if="printPage" class="rpl-publication-download-print__print-item rpl-publication-download-print__print-link" @click="printClick()">
+        <rpl-icon class="rpl-publication-download-print__print-link-icon" symbol="print" color="primary" size="l" />
+        <div class="rpl-publication-download-print__print-link-info">
+          <span class="rpl-publication-download-print__print-link-title">Print this page</span>
         </div>
       </button>
     </li>
@@ -17,18 +23,23 @@
 <script>
 import { isClient } from '@dpc-sdp/ripple-global/utils/helpers.js'
 import RplIcon from '@dpc-sdp/ripple-icon'
+import RplLink from '@dpc-sdp/ripple-link'
 import DocumentLink from '@dpc-sdp/ripple-document-link'
 
 export default {
   name: 'RplPublicationDownloadPrint',
   components: {
     RplIcon,
+    RplLink,
     DocumentLink
   },
   props: {
     links: Array,
-    showPrint: { type: Boolean, default: true },
-    printText: { type: String, default: 'Print this page' }
+    printPage: { type: Boolean, default: false },
+    printLink: {
+      type: [Object, Boolean],
+      default: false
+    }
   },
   methods: {
     printClick () {
@@ -87,7 +98,7 @@ export default {
       margin: $rpl-publication-download-print-link-margin;
     }
 
-    &__print-button {
+    &__print-link {
       background-color: transparent;
       border: 0;
       padding: 0;
@@ -103,17 +114,22 @@ export default {
           @include rpl_text_color($rpl-document-link-title-color-hover);
         }
       }
+
+      .rpl-link__inner {
+          display: flex;
+          align-items: center;
+      }
     }
 
-    &__print-button-icon {
+    &__print-link-icon {
       flex: $rpl-document-link-icon-flex;
     }
 
-    &__print-button-info {
+    &__print-link-info {
       margin-left: $rpl-publication-download-print-link-info-margin;
     }
 
-    &__print-button-title {
+    &__print-link-title {
       @include rpl_typography_ruleset($rpl-document-link-title-ruleset);
       @include rpl_text_color($rpl-document-link-title-color);
     }

diff --git a/packages/components/Organisms/Publication/PublicationImage.vue b/packages/components/Organisms/Publication/PublicationImage.vue
@@ -11,7 +11,7 @@
       <button class="rpl-publication-image__button" v-if="expandLabel && !markupVisible" @click="markupVisible = true">
         <rpl-text-icon symbol="table" color="primary" :text="expandLabel" placement="before" />
       </button>
-      <div class="rpl-publication-image__expander" v-if="markupVisible">
+      <div class="rpl-publication-image__expander" :class="{ 'rpl-publication-image__expander--open': markupVisible }">
         <div class="rpl-publication-image__expander-header">
           <rpl-text-icon class="rpl-publication-image__expander-title" symbol="table" color="primary" :text="expandTitleLabel" placement="before" />
           <button class="rpl-publication-image__expander-close-button" @click="markupVisible = false">
@@ -168,6 +168,15 @@ export default {
     &__expander {
       width: 100%;
       background: $rpl-publication-image-markup-background;
+      display: none;
+
+      &--open {
+        display: block;
+      }
+
+      @include rpl_print {
+        display: block;
+      }
 
       &-header {
         border: $rpl-publication-image-markup-border;

diff --git a/packages/components/Organisms/Publication/stories.js b/packages/components/Organisms/Publication/stories.js
@@ -39,7 +39,7 @@ storiesOf('Organisms/Publication', module)
   }))
   .add('Publication Download Print', () => ({
     components: { RplPublicationDownloadPrint },
-    template: `<rpl-publication-download-print :links="links" :showPrint="showPrint" @publicationPrint="print" @publicationDownload="download" />`,
+    template: `<rpl-publication-download-print :links="links" :printPage="printPage" :printLink="printLink" @publicationPrint="print" @publicationDownload="download" />`,
     props: {
       links: {
         default: () => object('Links', [{
@@ -54,8 +54,14 @@ storiesOf('Organisms/Publication', module)
           filesize: '1.2 mb'
         }])
       },
-      showPrint: {
-        default: boolean('Show print', true)
+      printPage: {
+        default: boolean('Show print', false)
+      },
+      printLink: {
+        default: () => object('link', {
+          href: '/printall',
+          text: 'Print full document'
+        })
       }
     },
     methods: {

diff --git a/packages/create-ripple-app/template/_example/tide/modules/event/pages/index.vue b/packages/create-ripple-app/template/_example/tide/modules/event/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <rpl-row row-gutter class="app-content tide-event-content">
+  <rpl-row row-gutter class="app-content tide-content--event">
     <rpl-col cols="full">
       <rpl-markup v-if="page.field_event_description" :html="page.field_event_description.processed"></rpl-markup>
     </rpl-col>

diff --git a/packages/ripple-nuxt-tide/lib/components/AppContentRating.vue b/packages/ripple-nuxt-tide/lib/components/AppContentRating.vue
@@ -167,6 +167,7 @@ $app-content-text-color: rpl-color('dark_neutral') !default;
 
 .app-content-rating {
   margin: $rpl-space-4 * 2 0 0 0;
+  @include rpl_print_hidden;
 
   legend {
     @include rpl_typography_ruleset($app-content-rating-label-ruleset);

diff --git a/packages/ripple-nuxt-tide/modules/event/pages/index.vue b/packages/ripple-nuxt-tide/modules/event/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <rpl-row row-gutter class="app-content tide-event-content">
+  <rpl-row row-gutter class="app-content tide-content tide-content--event">
     <rpl-col cols="full">
       <rpl-markup v-if="page.field_event_description" :html="page.field_event_description.processed"></rpl-markup>
     </rpl-col>

diff --git a/packages/ripple-nuxt-tide/modules/grant/pages/index.vue b/packages/ripple-nuxt-tide/modules/grant/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="tide-content tide-content--grant">
     <rpl-row row-gutter v-if="overview">
       <rpl-col cols="full">
         <rpl-grants-overview v-bind="overview" />

diff --git a/packages/ripple-nuxt-tide/modules/landing-page/pages/index.vue b/packages/ripple-nuxt-tide/modules/landing-page/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <rpl-row row-gutter class="app-content">
+  <rpl-row row-gutter class="app-content tide-content tide-content--landing-page">
     <template v-if="anchorLinks && anchorLinks.length > 0">
       <rpl-col cols="full">
         <rpl-anchor-links title="On this page:" :links="anchorLinks" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -163,6 +163,7 @@ $rpl-search-back-to-top-offset: 72px / 2; @@
         @include rpl_print {
           padding-top: 0;
+          background-image: none !important;
         }
       }
@@ Expand Down @@