(feat) O3-3190: Add print support to FormEngine

package.json

@@ -35,6 +35,7 @@
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.0",
     "react-markdown": "^9.0.1",
+    "react-to-print": "^3.1.0",
     "react-waypoint": "^10.3.0",
     "react-webcam": "^7.2.0"
   },

src/components/field-label/field-label.scss

@@ -8,6 +8,10 @@
 .questionLabel {
   display: flex;
   align-items: center;
+  @media print {
+    page-break-after: avoid;
+    break-after: avoid;
+  }
 }
 
 .tooltipIcon {

src/components/group/obs-group.scss

@@ -14,3 +14,9 @@
 .boldLegend > legend {
   font-weight: bolder;
 }
+.groupContainer{
+  @media print {
+      page-break-inside: avoid;
+      break-inside: avoid;
+    }
+}

src/components/inputs/file/file.scss

@@ -5,7 +5,8 @@
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
-  line-height: 30px; /* 128.571% */
+  line-height: 30px;
+  /* 128.571% */
   letter-spacing: 0.16px;
   color: #000000;
 }
@@ -99,3 +100,9 @@
   width: 5rem;
   height: 5rem;
 }
+
+.selectorButton {
+  @media print {
+    display: none !important;
+  }
+}

src/components/inputs/multi-select/multi-select.scss

@@ -23,3 +23,9 @@ legend > span {
   color: colors.$black-100 !important;
   font-weight: 500 !important;
 }
+.boldedLabel {
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}

src/components/inputs/number/number.scss

@@ -13,3 +13,9 @@
 .controlWidthConstrained {
   max-width: 18rem;
 }
+.boldedLabel {
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}

src/components/inputs/radio/radio.scss

@@ -34,3 +34,9 @@
   color: colors.$red-60;
   font-size: 0.8rem;
 }
+.boldedLegend {
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}

src/components/inputs/select/dropdown.scss

@@ -9,3 +9,9 @@
   color: colors.$red-60;
   font-weight: 600;
 }
+.boldedLabel {
+  @media print {
+    page-break-inside: avoid;
+      break-inside: avoid;
+  }
+}

src/components/inputs/text-area/text-area.scss

@@ -9,3 +9,9 @@
   color: colors.$red-60;
   font-weight: 600;
 }
+.boldedLabel{
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}

src/components/inputs/text/text.scss

@@ -13,3 +13,10 @@
 :global(.cds--text-input__readonly-icon) {
   display: none;
 }
+
+.boldedLabel {
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}

src/components/inputs/ui-select-extended/ui-select-extended.scss

@@ -7,6 +7,11 @@
     font-weight: 600;
     color: colors.$black-100;
   }
+
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
 }
 
 .errorLabel label {
@@ -16,4 +21,4 @@
 
 .loader {
   padding: 0.25rem 0.5rem;
-}
+}

src/components/inputs/unspecified/unspecified.scss

@@ -5,3 +5,9 @@
   font-size: 12px;
   color: colors.$gray-70;
 }
+.unspecified{
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}

src/components/print-header/print-header-component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FormSchema } from 'src/types';
+
+interface PrintHeaderProps {
+    formJson: FormSchema;
+    sesssionDate: Date;
+}
+
+const PrintHeader = ({ formJson }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <h1>{t(formJson.name)}</h1>
+          <span>{t(formJson.description)}</span>
+    </div>
+  );
+};
+
+export default PrintHeader;

src/components/renderer/page/page.renderer.scss

@@ -2,7 +2,7 @@
 @use '@carbon/type';
 @use '@carbon/layout';
 
-.pageContent:last-child > hr {
+.pageContent:last-child>hr {
   display: none;
 }
 
@@ -13,9 +13,15 @@
   padding: 0.5rem 1rem;
   border-top: 1px solid colors.$gray-20;
   border-bottom: 1px solid colors.$gray-20;
+
   &:hover {
     background-color: colors.$gray-20;
   }
+
+  @media print {
+    page-break-after: avoid;
+    break-after: avoid;
+  }
 }
 
 .pageTitle {
@@ -36,7 +42,7 @@
   height: 1rem;
 }
 
-.sectionContainer > div {
+.sectionContainer>div {
   background-color: colors.$gray-10;
 }
 
@@ -64,11 +70,11 @@
   display: none;
 }
 
-.formSection > div > fieldset {
+.formSection>div>fieldset {
   margin-bottom: 0 !important;
 }
 
 // TODO: try removing this when upgrading @carbon/react. Added at 1.37
 :global(.cds--accordion__wrapper) {
   max-block-size: unset !important;
-}
+}

src/components/renderer/section/section-renderer.scss

@@ -3,6 +3,13 @@
 .section {
   margin-top: 1rem;
   width: 100%;
+
+  @media print {
+    page-break-inside: verso;
+    break-inside: verso;
+    page-break-before: avoid;
+    break-before: avoid;
+  }
 }
 
 .sectionBody {
@@ -16,4 +23,4 @@
 
 .questionInfoDefault {
   display: flex;
-}
+}

src/components/repeat/repeat-controls.scss

@@ -2,6 +2,10 @@
   margin: 0.5rem 0;
 }
 
-.actionButtons > button {
+.actionButtons>button {
   margin-right: 0.5rem;
-}
+
+  @media print {
+    display: none !important;
+  }
+}

src/components/sidebar/sidebar.component.tsx

@@ -8,6 +8,7 @@ import { useCurrentActivePage } from './useCurrentActivePage';
 import { usePageObserver } from './usePageObserver';
 import type { FormPage, SessionMode } from '../../types';
 import styles from './sidebar.scss';
+import { Printer } from '@carbon/react/icons';
 
 interface SidebarProps {
   defaultPage: string;
@@ -16,6 +17,7 @@ interface SidebarProps {
   onCancel: () => void;
   handleClose: () => void;
   hideFormCollapseToggle: () => void;
+  handlePrint: () => void;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -25,6 +27,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   onCancel,
   handleClose,
   hideFormCollapseToggle,
+  handlePrint,
 }) => {
   const { t } = useTranslation();
   const { pages, pagesWithErrors, activePages, evaluatedPagesVisibility } = usePageObserver();
@@ -78,6 +81,16 @@ const Sidebar: React.FC<SidebarProps> = ({
           size={responsiveSize}>
           {sessionMode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
         </Button>
+        <Button
+          className={classNames(styles.printButton, {
+            [styles.topMargin]: sessionMode === 'view',
+          })}
+          kind="tertiary"
+          onClick={() => handlePrint()}
+          size={responsiveSize}>
+          {t('printForm', 'Print form')}
+          <Printer />
+        </Button>
       </div>
     </div>
   );

src/components/sidebar/sidebar.scss

@@ -69,6 +69,9 @@
   min-height: 8rem;
   overscroll-behavior: contain;
   margin-right: 1rem;
+  @media print {
+    display: none !important;
+  }
 }
 
 .sideNavActions {
@@ -110,3 +113,7 @@
 .closeButton {
   @extend .button;
 }
+.printButton{
+  @extend .button;
+  margin-top: 0.625rem;
+}

src/components/value/value.component.tsx

@@ -6,7 +6,7 @@ export const ValueEmpty = () => {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <div className={styles.emptyContainer}>
       <span className={styles.empty}>({t('blank', 'Blank')})</span>
     </div>
   );

src/components/value/value.scss

@@ -4,14 +4,29 @@
   font-size: 0.875rem;
   font-weight: 500;
   color: colors.$gray-60;
+  @media print {
+      margin-top: 20px !important;
+    }
 }
 
 .empty {
   @extend .value;
   color: colors.$gray-30;
+  @media print {
+    display: none !important;
+  }
 }
 
 .item {
   @extend .value;
   margin-bottom: 0.5rem;
+  @media print {
+      margin-top: 20px !important;
+    }
+}
+
+.emptyContainer {
+  @media print {
+    margin-top: 20px !important;
+  }
 }

src/components/value/view/field-value-view.scss

@@ -4,16 +4,21 @@
   margin-top: 10px;
 }
 
-.formField > div > div > label {
+.formField>div>div>label {
   color: colors.$gray-70;
 }
 
 .readonly {
   border-bottom: 0.5px colors.$gray-30;
   border-style: solid;
+
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
 }
 
-.readonly > div {
+.readonly>div {
   padding-bottom: 7px !important;
 }
 
@@ -24,8 +29,13 @@
 .inlineFlexRow {
   display: flex;
   flex-wrap: wrap;
+
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
 }
 
 .inlineFlexColumn {
   width: 300px;
-}
+}