Merge pull request #303 from cfpb/meissadia/print-submission-page

Submission page Print view and button

src/common/Alert.css

@@ -12,6 +12,7 @@
 }
 .alert::before {
   background-color: #8b8b8b;
+  border-color: #8b8b8b;
   content: '';
   height: 100%;
   left: 0;
@@ -77,27 +78,31 @@
 
 .alert-success {
   background-color: #e7f4e4;
+  border-color: #2e8540;
 }
 .alert-success::before {
   background-color: #2e8540;
 }
 
 .alert-warning {
   background-color: #fff1d2;
+  border-color: #fdb81e;
 }
 .alert-warning::before {
   background-color: #fdb81e;
 }
 
 .alert-error {
   background-color: #f9dede;
+  border-color: #e31c3d;
 }
 .alert-error::before {
   background-color: #e31c3d;
 }
 
 .alert-info {
   background-color: #e1f3f8;
+  border-color: #02bfe7;
 }
 .alert-info::before {
   background-color: #02bfe7;

src/filing/submission/PrintPageButton.css

@@ -0,0 +1,46 @@
+.print-page-container {
+  position: absolute;
+  top: 0px;
+  right: 10px;
+  transform: translateY(calc(50% + 15px + .5rem - 2px)); /* transform = half container + half icon + half text - half bottom margin */
+}
+
+.print-page {
+  cursor: pointer;
+  background-color: transparent;
+  color: black;
+  font-size: 1.3rem;
+  text-align: center;
+  padding: 0;
+  letter-spacing: .5px;
+}
+
+.print-page .icon {
+  display: block;
+  width: 30px;
+  height: 30px;
+  margin: 0 auto;
+  margin-bottom: 4px;
+  font-weight: bold;
+}
+
+.print-page:hover {
+  color: #0071bc;
+  background-color: transparent;
+}
+
+.print-page:hover .icon {
+  fill: #0071bc;
+}
+
+@media screen and (max-width: 821px) {
+  .print-page-container {
+    position: relative;
+    display: block;
+    text-align: left;
+    top: auto;
+    right: auto;
+    transform: translateY(0);
+    margin-top: 2rem;
+  }
+}

src/filing/submission/PrintPageButton.jsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { ReactComponent as PrinterIcon } from "../images/printer.svg"
+import "./PrintPageButton.css"
+
+function clickHandler(e) {
+  e.preventDefault()
+  window.print()
+  document.activeElement.blur()
+}
+
+const PrintPageButton = () => {
+  return (
+    <div className="print-page-container">
+      <button className="print-page" onClick={clickHandler}>
+        <PrinterIcon className="icon" alt="printer" />
+        Print
+      </button>
+    </div>
+  )
+}
+
+export default PrintPageButton

src/filing/submission/Receipt.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Alert from '../../common/Alert.jsx'
+import PrintPageButton from './PrintPageButton'
 import { isBeta } from '../../common/Beta.jsx'
 import { ordinalHour } from '../utils/date.js'
 import { SIGNED } from '../constants/statusCodes.js'
@@ -45,6 +46,7 @@ const Receipt = ({
           <br />
           <br />
           A copy of this receipt has been sent to <strong>{email}</strong>.
+          <PrintPageButton />
         </div>
       </Alert>
     </section>

src/filing/submission/container.css

@@ -11,3 +11,58 @@
   margin-top: 0.5em;
   margin-bottom: 0;
 }
+
+@media print {
+  #header .logo {
+    width: auto;
+    display: block;
+    text-align: center;
+  }
+  #header .banner,
+  .nav-container .nav,
+  .IRSReport,
+  .print-page-container,
+  #summary hr,
+  #signature,
+  .usa-width-one-whole + .usa-width-one-whole .RefileWarning,
+  footer
+  {
+    display: none
+  }
+
+  .RefileWarning,
+  .RefileWarning .alert,
+  #summary {
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  .RefileWarning .alert {
+    border-width: 1px;
+    border-style: solid;
+    background-color: transparent;
+  }
+
+  #summary dl {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  #summary dt, 
+  #summary dd {
+    display: inline-block;
+    align-items: flex-start;
+    width: 50%;
+  }
+
+  #summary, 
+  #summary dd,
+  .SubmissionContainer .RefileWarning {
+    margin: 0;
+    margin-bottom: .5rem;
+  }
+
+  .Filing.App #main-content {
+    padding: 0;
+  }
+}