merge in changes from master that include fix for failing tests

assets/hexagon-print.css

@@ -0,0 +1,130 @@
+.hx-print-only {
+  display: none;
+}
+
+@media print {
+  /* Fix layout and font size issues with root elements */
+  html,
+  body {
+    height: auto;
+    font-size: 12pt;
+    page-break-after: avoid;
+  }
+
+  /* Force body to display in print-friendly mode */
+  body {
+    background: transparent !important;
+    width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    color: black !important;
+  }
+
+  /* Hide elements that should not be shown when printing */
+  .hx-no-print,
+  .hx-spinner,
+  .hx-spinner-wide,
+  .hx-heading,
+  .hx-sidebar {
+    display: none !important;
+  }
+
+  /* Box shadows display badly when printing */
+  * {
+    box-shadow: none !important;
+  }
+
+  .hx-print-only {
+    display: initial;
+  }
+
+  .hx-footnote-ref {
+    font-size: 0.8em;
+    margin-top: -0.5em;
+    display: inline-block;
+    font-style: italic;
+  }
+
+  /* Attempt prevention of page breaks inside important elements */
+  h1, h2, h3, h4, h5, h6,
+  table,
+  ul,
+  svg,
+  img,
+  form,
+  input,
+  .hx-footnote-links,
+  .hx-data-table,
+  .hx-card,
+  .hx-form,
+  .hx-table,
+  .hx-graph,
+  .hx-meter {
+    page-break-inside: avoid;
+  }
+
+  /* Attempt prevention of page breaks after heading elements */
+  h1, h2, h3, h4, h5, h6,
+  .hx-footnote-links {
+    page-break-after: avoid;
+  }
+
+  /* Reset font sizes for print (relative to 12pt) */
+  h1 {
+    font-size: 250%;
+  }
+
+  h2 {
+    font-size: 175%;
+  }
+
+  h3 {
+    font-size: 135%;
+  }
+
+  h4 {
+    font-size: 100%;
+    font-variant: small-caps;
+  }
+
+  h5 {
+    font-size: 100%;
+  }
+
+  h6 {
+    font-size: 90%;
+    font-style: italic;
+  }
+
+  /* Prevent images flowing outside the printable area */
+  img {
+    max-width: 100% !important;
+  }
+
+  /* Remove the margin around content as this is handled by the print margin */
+  .hx-content {
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+  }
+
+  /* Style links to be bold so they are visible as links */
+  a:link:not(.hx-btn),
+  a:visited:not(.hx-btn) {
+    font-weight: bolder;
+    text-decoration: underline;
+  }
+
+  /* Set the page margin */
+  @page {
+    margin: 1.5cm;
+  }
+}
+
+/* Make most browsers show background colors etc. by default when printing */
+@media print and (color) {
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

assets/hexagon-print.js

@@ -0,0 +1,42 @@
+;(function () {
+  function beforePrint () {
+    var links = hx.detached('ol')
+    var refs = []
+    hx.select('body').selectAll('*').forEach(function (sel) {
+      if (sel.node().nodeName === 'A' && !sel.classed('.hx-btn')) {
+        var thisRef = sel.attr('href')
+        if (thisRef && thisRef.length && thisRef !== '#') {
+          if (!(refs.indexOf(thisRef) > -1))
+            refs.push(thisRef)
+          var itemIndex = refs.indexOf(thisRef)
+          sel.add(hx.detached('sup')['class']('hx-footnote-ref hx-print-only').text('[' + (itemIndex + 1) + ']'))
+        }
+      }
+    })
+    refs.forEach(function (ref) {
+      links.add(hx.detached('li').text(ref))
+    })
+    if (refs.length > 0) {
+      hx.select('body').add(hx.detached('div')['class']('hx-footnote-links hx-print-only').add('hr').add(hx.detached('h2').text('Links')).add(links))
+    }
+  }
+
+  function afterPrint () {
+    hx.selectAll('.hx-footnote-ref').remove()
+    hx.selectAll('.hx-footnote-links').remove()
+  }
+
+  if (window.matchMedia) {
+    var mediaQueryList = window.matchMedia('print')
+    mediaQueryList.addListener(function (mql) {
+      if (mql.matches) {
+        beforePrint()
+      } else {
+        afterPrint()
+      }
+    })
+  }
+
+  window.onbeforeprint = beforePrint
+  window.onafterprint = afterPrint
+}).call(this)

build/main/build.js

@@ -19,24 +19,32 @@ var path = require('path')
 var assetDir = path.join(__dirname, '../../' , 'assets')
 
 module.exports = (new Builder).assets({
-  'hexagon-icons.ttf': {
+  'assets/hexagon-icons.ttf': {
     filepath: path.join(assetDir, 'hexagon-icons.ttf'),
     allowEmbed: true
   },
-  'hexagon-icons.eot': {
+  'assets/hexagon-icons.eot': {
     filepath: path.join(assetDir, 'hexagon-icons.eot'),
     allowEmbed: true
   },
-  'hexagon-icons.woff': {
+  'assets/hexagon-icons.woff': {
     filepath: path.join(assetDir, 'hexagon-icons.woff'),
     allowEmbed: true
   },
-  'hexagon-icons.svg': {
+  'assets/hexagon-icons.svg': {
     filepath: path.join(assetDir, 'hexagon-icons.svg'),
     allowEmbed: true
   },
-  'logo.svg': {
+  'assets/logo.svg': {
     filepath: path.join(assetDir, 'hexagon-logo.svg'),
     allowEmbed: true
+  },
+  'hexagon.print.css': {
+    filepath: path.join(assetDir, 'hexagon-print.css'),
+    allowEmbed: false
+  },
+  'hexagon.print.js': {
+    filepath: path.join(assetDir, 'hexagon-print.js'),
+    allowEmbed: false
   }
 })

build/main/builder.js

@@ -144,6 +144,7 @@ function getEmbeddableAssets (options, assetFiles) {
       svg: 'image/svg+xml',
       eot: 'application/vnd.ms-fontobject',
       woff: 'application/font-woff',
+      woff2: 'application/font-woff2',
       jpeg: 'image/jpeg',
       jpg: 'image/jpeg',
       png: 'image/png'

demo/index.html

@@ -4,6 +4,7 @@
   <title>Demo | Hexagon.js</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="hexagon.css">
+  <link rel="stylesheet" media="print" type="text/css" href="hexagon.print.css">
   <link rel="stylesheet" type="text/css" href="index.css">
   <script type="text/javascript" src="hexagon.js"></script>
   <script>
@@ -1721,6 +1722,7 @@ <h3>Error Pages</h3>
 
 
 <script type="text/javascript" src="index.js"></script>
+<script type="text/javascript" src="hexagon.print.js"></script>
 </body>
 </html>
 

modules/button/main/index.scss

@@ -11,6 +11,10 @@
   text-decoration: none;
   border: 1px solid transparent;
 
+  > * {
+    line-height: normal;
+  }
+
   &:focus {
     outline: none;
     z-index: 1;