DP-8266 print styles v2

changelogs/DP-8266.txt

@@ -0,0 +1,4 @@
+___DESCRIPTION___
+Changed
+Minor
+- DP-8266: Sitewide print styles update

release-notes.md

@@ -14,6 +14,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 - DP-1234: The short description text on a [service detail](http://mayflower.digital.mass.gov/?p=pages-detail-for-service-howto-location) page banner ([@organisms/by-template/page-banner](http://mayflower.digital.mass.gov/?p=organisms-page-banner)) should now render ([PR #493](https://github.com/massgov/mayflower/pull/493))
 
 
+## 5.28.0 (6/13/2018)
+
+### Added
+- DP-8825: Adds teaser listing group organism to apply accordion behavior to multiple teaser listings at once.
+
 ## 5.27.0 (6/06/2018)
 
 ### Added

styleguide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@massds/mayflower",
   "description": "Open source UI components and visual style guide for Massachusetts government websites",
-  "version": "5.27.0",
+  "version": "5.28.0",
   "author": "Massachusetts Digital Services (MDS)",
   "repository": {
     "type": "git",

styleguide/source/assets/js/index.js

@@ -20,6 +20,7 @@ import keywordSearch              from "./modules/keywordSearch.js";
 import linkListToggle            from "./modules/linkListToggle.js";
 import locationFilters            from "./modules/locationFilters.js";
 import locationListing            from "./modules/locationListing.js";
+import linkPaths                  from "./modules/linkPaths.js";
 import mainNav                    from "./modules/mainNav.js";
 import mobileNav                  from "./modules/mobileNav.js";
 import orgSelector                from "./modules/orgSelector.js";

styleguide/source/assets/js/modules/linkPaths.js

@@ -0,0 +1,10 @@
+// Force links to print full path on page print
+export default function (window,document,$,undefined) {
+  window.onbeforeprint = function() {
+
+    $('a:not([href^=https])').each(function(){
+      let path = $(this).prop('href');
+      $(this).prop('href', path);
+    });
+  };
+}(window,document,jQuery);

styleguide/source/assets/scss/02-molecules/_callout-stats.scss

@@ -3,7 +3,7 @@
   padding: 30px 0 40px 30px;
   position: relative;
 
-  @media print, ($bp-small-min) {
+  @media ($bp-small-min) {
     padding: 40px 30px 50px;
 
     &--left,

styleguide/source/assets/scss/02-molecules/_header-contact.scss

@@ -5,7 +5,7 @@
     content: "true";
     display: none;
 
-    @media print, ($bp-small-min) {
+    @media ($bp-small-min) {
       content: "false";
     }
   }
@@ -55,14 +55,14 @@
 
     }
 
-    @media print, ($bp-small-min) {
+    @media ($bp-small-min) {
       display: none;
     }
   }
 
   &__container {
 
-    @media print, ($bp-small-min) {
+    @media ($bp-small-min) {
       display: flex;
       align-items: stretch;
     }
@@ -77,13 +77,9 @@
       @media ($bp-small-max) {
         display: none;
       }
-
-      @media print {
-        display: block;
-      }
     }
 
-    @media print, ($bp-small-min) {
+    @media ($bp-small-min) {
       width: 50%;
 
       & + & {

styleguide/source/assets/scss/03-organisms/_action-details.scss

@@ -54,9 +54,6 @@
       margin-left: -$column-with-gutter * 2;
       width: $column-with-gutter * 2;
     }
-    @media print {
-      display: none;
-    }
 
     &[data-sticky='middle'] {
       position: fixed;

styleguide/source/assets/scss/03-organisms/_action-finder.scss

@@ -130,7 +130,7 @@ $action-finder-bp: 900px;
       display: flex;
     }
 
-    @media print, ($bp-large-min) {
+    @media ($bp-large-min) {
       @include span-columns(4 of 12);
       @include omega(3n);
       display: flex;

styleguide/source/assets/scss/03-organisms/_header.scss

@@ -25,10 +25,6 @@ body {
   padding-top: 43px; // height of the util nav
   position: relative;
 
-  @media print {
-    padding-top: 0;
-  }
-
   &__skip-nav {
     display: block;
     margin: 0 auto;
@@ -176,11 +172,6 @@ body {
     @media ($bp-header-toggle-min){
       display: none;
     }
-
-    @media print {
-      display: none;
-    }
-
   }
 
   &__back-button {

styleguide/source/assets/scss/03-organisms/_page-header.scss

@@ -258,23 +258,23 @@ $page-header-widget-width: 350px;
           content: "true";
         }
 
-        @media print, ($bp-small-min) {
+        @media ($bp-small-min) {
           &:before {
             content: "false";
           }
         }
       }
 
       & > .ma__contact-group:first-child {
-        @media print, ($bp-small-min) {
+        @media ($bp-small-min) {
           clear: both;
           padding-bottom: 20px;
         }
       }
 
       // more than two contacts
       .ma__contact-group:nth-child(2):nth-last-child(3) {
-        @media print, ($bp-small-min) {
+        @media ($bp-small-min) {
           border-right-width: 1px;
           border-right-style: solid;
           float: left;
@@ -286,7 +286,7 @@ $page-header-widget-width: 350px;
       }
 
       &__extra {
-        @media print, ($bp-small-min) {
+        @media ($bp-small-min) {
           border-left-width: 1px;
           border-left-style: solid;
           display: block;
@@ -302,7 +302,7 @@ $page-header-widget-width: 350px;
       &__expand {
         clear: both;
 
-        @media print, ($bp-small-min) {
+        @media ($bp-small-min) {
           display: none;
         }
       }

styleguide/source/assets/scss/03-organisms/_quick-actions.scss

@@ -9,14 +9,11 @@
       }
     }
 
-    @media print {
-      display: block;
-    }
   }
   .page-content & {
     margin-bottom: 40px;
 
-    @media print, ($bp-large-min) {
+    @media ($bp-large-min) {
       display: none;
 
       & + * {

styleguide/source/assets/scss/03-organisms/_stacked-row-section.scss

@@ -13,10 +13,6 @@
     }
   }
 
-  @media print {
-    padding-bottom: 0;
-  }
-
   &__container {
     @include ma-container();
   }
@@ -32,15 +28,15 @@
     content: "";
     padding-top: 45px;
 
-    @media print, ($bp-large-min) {
+    @media ($bp-large-min) {
       border-top-width: 1px;
       border-top-style: solid;
       padding-top: 90px;
     }
   }
 
   & ~ &--borderless &__container:before {
-    @media print, ($bp-large-min) {
+    @media ($bp-large-min) {
       border-top-width: 0;
     }
   }

styleguide/source/assets/scss/03-organisms/_top-actions.scss

@@ -16,7 +16,7 @@
   &__items {
     @include clearfix;
 
-    @media print, ($bp-small-min) {
+    @media ($bp-small-min) {
       display: flex;
         align-items: stretch;
         flex-wrap: wrap;
@@ -34,7 +34,7 @@
       display: flex;
     }
 
-    @media print, ($bp-x-large-min) {
+    @media ($bp-x-large-min) {
       @include span-columns(3);
       @include omega(4n);
       display: flex;

styleguide/source/assets/scss/04-templates/_stacked-row.scss

@@ -15,10 +15,6 @@
         border-top-width: 0;
       }
     }
-
-    @media print {
-      padding-bottom: 0;
-    }
   }
 
   &__container {
@@ -35,15 +31,15 @@
     display: block;
     padding-top: 45px;
 
-    @media print, ($bp-large-min) {
+    @media ($bp-large-min) {
       border-top-width: 1px;
       border-top-style: solid;
       padding-top: 90px;
     }
   }
 
   &__section ~ &__section--borderless &__container:before {
-    @media print, ($bp-large-min) {
+    @media ($bp-large-min) {
       border-top-width: 0;
     }
   }

styleguide/source/assets/scss/06-theme/03-organisms/_page-header.scss

@@ -16,7 +16,7 @@
   }
 
   &__optional-content {
-    @media print, ($bp-small-min) {
+    @media ($bp-small-min) {
       .ma__contact-us > .ma__contact-group:nth-child(2):nth-last-child(3),
       .ma__contact-us > .ma__contact-us__extra {
         border-color: $c-bd-divider;