@ministryofjustice/hmpps-digital-prison-reporting-frontend 4.28.8 → 4.29.0

package/dpr/components/_reports/{report-data-table → report-page/report-template/report-section/report-data-table}/clientClass.js

@@ -22,15 +22,16 @@ __export(clientClass_exports, {
   default: () => clientClass_default
 });
 module.exports = __toCommonJS(clientClass_exports);
-var import_DprClientClass = require("../../../DprClientClass");
+var import_DprClientClass = require("../../../../../../DprClientClass");
 class DataTable extends import_DprClientClass.DprClientClass {
   static getModuleName() {
     return "data-table";
   }
   initialise() {
-    this.tableContainer = document.getElementById("dpr-table-wrapper");
-    this.table = document.getElementById("dpr-data-table");
-    this.overflowGradient = document.getElementById("dpr-overflow-gradient");
+    this.element = this.getElement();
+    this.tableContainer = this.element.querySelector(".dpr-table-wrapper");
+    this.table = this.element.querySelector(".dpr-data-table");
+    this.gradient = this.element.querySelector(".dpr-overflow-gradient");
     this.createTableHeaderAndFooter();
     this.initTableScrollListener();
   }
@@ -43,17 +44,23 @@ class DataTable extends import_DprClientClass.DprClientClass {
       const endOfScroll = this.table.offsetWidth;
       const currentScroll = event.target.offsetWidth + event.target.scrollLeft;
       if (endOfScroll === currentScroll) {
-        this.overflowGradient.style.display = "none";
+        this.removeGradient();
       } else {
-        this.overflowGradient.style.display = "block";
+        this.addGradient();
       }
     });
   }
+  removeGradient(gradient) {
+    this.gradient.style.display = "none";
+  }
+  addGradient(gradient) {
+    this.gradient.style.display = "block";
+  }
   checkOffsetWidths() {
     if (this.tableContainer.offsetWidth >= this.table.offsetWidth) {
-      this.overflowGradient.style.display = "none";
+      this.removeGradient();
     } else {
-      this.overflowGradient.style.display = "block";
+      this.addGradient();
     }
   }
   createTableHeaderAndFooter() {
@@ -64,11 +71,11 @@ class DataTable extends import_DprClientClass.DprClientClass {
       const header = this.table.createTHead();
       const classificationHeaderRow = header.insertRow(0);
       const classificationHeaderCell = classificationHeaderRow.insertCell(0);
-      classificationHeaderCell.outerHTML = `<th class="govuk-table__header govuk-table__cell--content print-header-footer" colspan=${headLength}>${classificationContent}</th>`;
+      classificationHeaderCell.outerHTML = `<th class="govuk-table__header govuk-table__cell--content print-header-footer print-header-footer--header" colspan=${headLength}>${classificationContent}</th>`;
       const footer = this.table.createTFoot();
       const classificationFooterRow = footer.insertRow(0);
       const classificationFooterCell = classificationFooterRow.insertCell(0);
-      classificationFooterCell.outerHTML = `<td class="govuk-table__cell govuk-table__cell--content print-header-footer table-row--no-border" colspan=${headLength}>${classificationContent}</td>`;
+      classificationFooterCell.outerHTML = `<td class="govuk-table__cell govuk-table__cell--content print-header-footer table-row--no-border print-header-footer--footer" colspan=${headLength}>${classificationContent}</td>`;
     }
   }
 }

package/dpr/components/_reports/report-page/report-template/report-section/report-data-table/clientClass.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../dpr/components/_reports/report-page/report-template/report-section/report-data-table/clientClass.ts"],
+  "sourcesContent": ["// @ts-nocheck\nimport { DprClientClass } from '../../../../../../DprClientClass'\n\nclass DataTable extends DprClientClass {\n  static getModuleName() {\n    return 'data-table'\n  }\n\n  initialise() {\n    this.element = this.getElement()\n    this.tableContainer = this.element.querySelector('.dpr-table-wrapper')\n    this.table = this.element.querySelector('.dpr-data-table')\n    this.gradient = this.element.querySelector('.dpr-overflow-gradient')\n\n    this.createTableHeaderAndFooter()\n    this.initTableScrollListener()\n  }\n\n  initTableScrollListener() {\n    this.checkOffsetWidths()\n\n    window.addEventListener('resize', () => {\n      this.checkOffsetWidths()\n    })\n\n    this.tableContainer.addEventListener('scroll', (event) => {\n      const endOfScroll = this.table.offsetWidth\n      const currentScroll = event.target.offsetWidth + event.target.scrollLeft\n      if (endOfScroll === currentScroll) {\n        this.removeGradient()\n      } else {\n        this.addGradient()\n      }\n    })\n  }\n\n  removeGradient(gradient) {\n    this.gradient.style.display = 'none'\n  }\n\n  addGradient(gradient) {\n    this.gradient.style.display = 'block'\n  }\n\n  checkOffsetWidths() {\n    if (this.tableContainer.offsetWidth >= this.table.offsetWidth) {\n      this.removeGradient()\n    } else {\n      this.addGradient()\n    }\n  }\n\n  createTableHeaderAndFooter() {\n    if (this.table) {\n      const classification = this.table.getAttribute('data-classification')\n      const headLength = Number(this.table.getAttribute('data-col-length'))\n      const classificationContent = `<b>${classification}</b>`\n\n      // Headers\n      const header = this.table.createTHead()\n\n      const classificationHeaderRow = header.insertRow(0)\n      const classificationHeaderCell = classificationHeaderRow.insertCell(0)\n      classificationHeaderCell.outerHTML = `<th class=\"govuk-table__header govuk-table__cell--content print-header-footer print-header-footer--header\" colspan=${headLength}>${classificationContent}</th>`\n\n      // Footers\n      const footer = this.table.createTFoot()\n\n      const classificationFooterRow = footer.insertRow(0)\n      const classificationFooterCell = classificationFooterRow.insertCell(0)\n      classificationFooterCell.outerHTML = `<td class=\"govuk-table__cell govuk-table__cell--content print-header-footer table-row--no-border print-header-footer--footer\" colspan=${headLength}>${classificationContent}</td>`\n    }\n  }\n}\n\nexport { DataTable }\nexport default DataTable\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,4BAA+B;AAE/B,MAAM,kBAAkB,qCAAe;AAAA,EACrC,OAAO,gBAAgB;AACrB,WAAO;AAAA,EACT;AAAA,EAEA,aAAa;AACX,SAAK,UAAU,KAAK,WAAW;AAC/B,SAAK,iBAAiB,KAAK,QAAQ,cAAc,oBAAoB;AACrE,SAAK,QAAQ,KAAK,QAAQ,cAAc,iBAAiB;AACzD,SAAK,WAAW,KAAK,QAAQ,cAAc,wBAAwB;AAEnE,SAAK,2BAA2B;AAChC,SAAK,wBAAwB;AAAA,EAC/B;AAAA,EAEA,0BAA0B;AACxB,SAAK,kBAAkB;AAEvB,WAAO,iBAAiB,UAAU,MAAM;AACtC,WAAK,kBAAkB;AAAA,IACzB,CAAC;AAED,SAAK,eAAe,iBAAiB,UAAU,CAAC,UAAU;AACxD,YAAM,cAAc,KAAK,MAAM;AAC/B,YAAM,gBAAgB,MAAM,OAAO,cAAc,MAAM,OAAO;AAC9D,UAAI,gBAAgB,eAAe;AACjC,aAAK,eAAe;AAAA,MACtB,OAAO;AACL,aAAK,YAAY;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,eAAe,UAAU;AACvB,SAAK,SAAS,MAAM,UAAU;AAAA,EAChC;AAAA,EAEA,YAAY,UAAU;AACpB,SAAK,SAAS,MAAM,UAAU;AAAA,EAChC;AAAA,EAEA,oBAAoB;AAClB,QAAI,KAAK,eAAe,eAAe,KAAK,MAAM,aAAa;AAC7D,WAAK,eAAe;AAAA,IACtB,OAAO;AACL,WAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,6BAA6B;AAC3B,QAAI,KAAK,OAAO;AACd,YAAM,iBAAiB,KAAK,MAAM,aAAa,qBAAqB;AACpE,YAAM,aAAa,OAAO,KAAK,MAAM,aAAa,iBAAiB,CAAC;AACpE,YAAM,wBAAwB,MAAM,cAAc;AAGlD,YAAM,SAAS,KAAK,MAAM,YAAY;AAEtC,YAAM,0BAA0B,OAAO,UAAU,CAAC;AAClD,YAAM,2BAA2B,wBAAwB,WAAW,CAAC;AACrE,+BAAyB,YAAY,sHAAsH,UAAU,IAAI,qBAAqB;AAG9L,YAAM,SAAS,KAAK,MAAM,YAAY;AAEtC,YAAM,0BAA0B,OAAO,UAAU,CAAC;AAClD,YAAM,2BAA2B,wBAAwB,WAAW,CAAC;AACrE,+BAAyB,YAAY,yIAAyI,UAAU,IAAI,qBAAqB;AAAA,IACnN;AAAA,EACF;AACF;AAGA,IAAO,sBAAQ;",
+  "names": []
+}

package/dpr/components/_reports/{report-data-table → report-page/report-template/report-section/report-data-table}/clientClass.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { DprClientClass } from '../../../DprClientClass'
+import { DprClientClass } from '../../../../../../DprClientClass'
 
 class DataTable extends DprClientClass {
   static getModuleName() {
@@ -7,9 +7,11 @@ class DataTable extends DprClientClass {
   }
 
   initialise() {
-    this.tableContainer = document.getElementById('dpr-table-wrapper')
-    this.table = document.getElementById('dpr-data-table')
-    this.overflowGradient = document.getElementById('dpr-overflow-gradient')
+    this.element = this.getElement()
+    this.tableContainer = this.element.querySelector('.dpr-table-wrapper')
+    this.table = this.element.querySelector('.dpr-data-table')
+    this.gradient = this.element.querySelector('.dpr-overflow-gradient')
+
     this.createTableHeaderAndFooter()
     this.initTableScrollListener()
   }
@@ -25,18 +27,26 @@ class DataTable extends DprClientClass {
       const endOfScroll = this.table.offsetWidth
       const currentScroll = event.target.offsetWidth + event.target.scrollLeft
       if (endOfScroll === currentScroll) {
-        this.overflowGradient.style.display = 'none'
+        this.removeGradient()
       } else {
-        this.overflowGradient.style.display = 'block'
+        this.addGradient()
       }
     })
   }
 
+  removeGradient(gradient) {
+    this.gradient.style.display = 'none'
+  }
+
+  addGradient(gradient) {
+    this.gradient.style.display = 'block'
+  }
+
   checkOffsetWidths() {
     if (this.tableContainer.offsetWidth >= this.table.offsetWidth) {
-      this.overflowGradient.style.display = 'none'
+      this.removeGradient()
     } else {
-      this.overflowGradient.style.display = 'block'
+      this.addGradient()
     }
   }
 
@@ -51,14 +61,14 @@ class DataTable extends DprClientClass {
 
       const classificationHeaderRow = header.insertRow(0)
       const classificationHeaderCell = classificationHeaderRow.insertCell(0)
-      classificationHeaderCell.outerHTML = `<th class="govuk-table__header govuk-table__cell--content print-header-footer" colspan=${headLength}>${classificationContent}</th>`
+      classificationHeaderCell.outerHTML = `<th class="govuk-table__header govuk-table__cell--content print-header-footer print-header-footer--header" colspan=${headLength}>${classificationContent}</th>`
 
       // Footers
       const footer = this.table.createTFoot()
 
       const classificationFooterRow = footer.insertRow(0)
       const classificationFooterCell = classificationFooterRow.insertCell(0)
-      classificationFooterCell.outerHTML = `<td class="govuk-table__cell govuk-table__cell--content print-header-footer table-row--no-border" colspan=${headLength}>${classificationContent}</td>`
+      classificationFooterCell.outerHTML = `<td class="govuk-table__cell govuk-table__cell--content print-header-footer table-row--no-border print-header-footer--footer" colspan=${headLength}>${classificationContent}</td>`
     }
   }
 }

package/dpr/components/_reports/{report-data-table → report-page/report-template/report-section/report-data-table}/style.scss

@@ -3,7 +3,6 @@
 .dpr-table-container {
   position: relative;
 
-
   .dpr-section-header {
     border-bottom: 0px;
     padding-left: govuk-spacing(0);
@@ -15,60 +14,13 @@
     }
   }
 
-  .dpr-section-header-spacer {
-    padding: govuk-spacing(4);
-    border-left: 0px !important;
-    border-right: 0px !important;
-    border-bottom: 0px !important;
-  }
-
-  .dpr-section-header-spacer-bottom {
-    padding: govuk-spacing(1);
-    border-bottom: 0px;
-  }
-
-  .dpr-summary-cell {
-    border-bottom: 0px;
-  }
-
-  .dpr-parent-cell, .dpr-child-report-cell {
-    border-bottom: 0px;
-  }
-
-  .dpr-child-report-cell {
-    padding-left: govuk-spacing(2);
-    padding-right: govuk-spacing(2);
-    padding-top: govuk-spacing(1);
-    background-color: white;
-  }
-
   .govuk-table__cell {
-    .dpr-child-report {
-      border: 1px solid govuk-colour("mid-grey");
-      margin-bottom: govuk-spacing(3);
-
-      h2 {
-        background-color: govuk-colour('light-grey');
-        padding: govuk-spacing(2);
-        padding-left: govuk-spacing(2);
-        margin-bottom: govuk-spacing(0);
-        margin-top: govuk-spacing(0);
-      }
-
-      .dpr-child-report_table {
-        padding: govuk-spacing(2);
-
-        table {
-          border: 0px;
-          margin-bottom: 0px;
-    
-          tr:last-child {
-            td {
-              border-bottom: 0px;
-            } 
-          }
-        }
-      }
+    h2 {
+      background-color: govuk-colour('light-grey');
+      padding: govuk-spacing(2);
+      padding-left: govuk-spacing(2);
+      margin-bottom: govuk-spacing(0);
+      margin-top: govuk-spacing(0);
     }
   }
 
@@ -109,7 +61,7 @@
   }
 
   .data-table-header-button-sort-none:before {
-    content: " \25bc";
+    content: ' \25bc';
     position: absolute;
     right: -1px;
     top: 9px;
@@ -117,7 +69,7 @@
   }
 
   .data-table-header-button-sort-none:after {
-    content: " \25b2";
+    content: ' \25b2';
     position: absolute;
     right: -1px;
     top: 1px;
@@ -125,16 +77,16 @@
   }
 
   .data-table-header-button-sort-ascending:after {
-    content: " \25b2";
-    font-size: .8em;
+    content: ' \25b2';
+    font-size: 0.8em;
     position: absolute;
     right: -5px;
     top: 2px;
   }
 
   .data-table-header-button-sort-descending:after {
-    content: " \25bc";
-    font-size: .8em;
+    content: ' \25bc';
+    font-size: 0.8em;
     position: absolute;
     right: -5px;
     top: 2px;
@@ -181,11 +133,11 @@
   .data-table-page-size {
     float: right;
 
-    @media(max-width: 640px) {
+    @media (max-width: 640px) {
       width: 100%;
     }
 
-    @media(max-width: 319px) {
+    @media (max-width: 319px) {
       .govuk-form-group {
         margin-bottom: 0;
       }
@@ -194,7 +146,7 @@
     }
   }
 
-  @media(max-width: 319px) {
+  @media (max-width: 319px) {
     #pageSize {
       width: 100%;
     }
@@ -209,55 +161,42 @@
     }
   }
 
-  .table-row-count {
-    color: govuk-colour("dark-grey");
-    font-weight: 100;
-    text-align: right;
-  }
-
   .table-row--no-border {
     border-bottom: none;
   }
 
-  .table-row-count--top {
-    padding-bottom: govuk-spacing(0);
-  }
-
-  .table-row-count--bottom {
-    padding-top: govuk-spacing(2);
-    padding-bottom: govuk-spacing(2);
-  }
-
   .govuk-table__cell h2 {
     margin-bottom: 0;
     margin-top: 40px;
   }
 
   .dpr-report-summary-cell {
-    background-color: govuk-colour("light-grey");
     font-weight: bold;
     padding-top: govuk-spacing(3);
     padding-bottom: govuk-spacing(3);
   }
 
   .dpr-report-summary-cell-table-header {
-    border-bottom: 0px;
+    border-bottom: solid 4px govuk-colour('mid-grey');
+    background-color: white;
   }
 
   .dpr-report-summary-cell-table-footer {
-    border-top: 0px;
+    border-top: solid 4px govuk-colour('mid-grey');
+    border-bottom: solid 2px govuk-colour('mid-grey');
+    background-color: white;
   }
 }
 
+.dpr-table-container--parent-child-section,
+.dpr-table-container--parent-child,
+.dpr-table-container--list-section,
 .dpr-table-container--list {
   .govuk-table {
     td {
-        padding-left: govuk-spacing(0);
-      }
+      padding-left: govuk-spacing(0);
+    }
   }
-}
-
-.dpr-table-container--list {
   .govuk-table__header {
     padding-right: govuk-spacing(4);
     white-space: nowrap;
@@ -266,62 +205,26 @@
   .govuk-table__cell {
     padding-right: govuk-spacing(4);
   }
+}
 
+// Zebra stripes
+.dpr-table-container--list-section,
+.dpr-table-container--list {
   .govuk-table__body {
-    tr.govuk-table__row:nth-child(odd) {
-      background-color: govuk-colour("light-grey");
+    tr.govuk-table__row:nth-child(even) {
+      background-color: govuk-colour('light-grey');
     }
   }
 }
 
-.dpr-table-container--row-section, .dpr-table-container--row-section-child {
-  th {
-    border-bottom: 0px;
-  }
-  th.dpr-row-section-header {
-    width: 33%;
-  }
-  th.pr-row-section-header-value {
-    width: 66%;
-  }
-
-  .dpr-section-header {
-    background-color: govuk-colour('light-grey');
-    border-top: 1px solid govuk-colour("mid-grey"); 
-    border-bottom: none;
-    padding: govuk-spacing(3);
-  }
-
-  .dpr-section-header-spacer {
-    padding: govuk-spacing(6);
-  }
-
-  .dpr-section-header-spacer-bottom {
-    // border-left: 1px solid govuk-colour("mid-grey");
-    // border-right: 1px solid govuk-colour("mid-grey");
-  }
-
-  .dpr-row-heading {
-    padding: govuk-spacing(2);
-    font-weight: 800;
-    // border-left: 1px solid govuk-colour("mid-grey");
-  }
-
-  .dpr-row-heading-data {
-    padding: govuk-spacing(2);
-    // border-right: 1px solid govuk-colour("mid-grey");
-  }
-}
-
-.data-table-empty-message {
-  text-align: center;
-  position: relative;
-}
-
 @media print {
   .dpr-table-container {
     .dpr-table-wrapper {
       overflow: visible;
+
+      .govuk-table__cell--content.print-header-footer {
+        font-size: 8px;
+      }
     }
     .dpr-overflow-gradient {
       display: none;
@@ -341,12 +244,6 @@
     padding: 0px;
   }
 
-  .dpr-reports-heading-container {
-    margin-top: govuk-spacing(1);
-    margin-bottom: 0px;
-    padding: 0px;
-  }
-
   .govuk-table__body {
     tr.govuk-table__row:nth-child(odd) {
       background-color: transparent !important;
@@ -357,51 +254,4 @@
     color: black;
     text-decoration: none;
   }
-
-  // Parent Child table
-  .dpr-table-container--parent-child-section,
-  .dpr-table-container--parent-child {
-    .dpr-section-header-spacer {
-        padding: 5px
-      }
-
-    .govuk-table__cell {
-      .dpr-child-report {
-        h2 {
-          font-size: 12px;
-          font-weight: 700;
-        }
-        .dpr-child-report_table {
-          padding: 0px;
-    
-          td, th {
-            padding: govuk-spacing(1);
-          }
-        }
-      }
-    }
-  }
-  
-  .dpr-section-header {
-    padding: govuk-spacing(1);
-    h2 { 
-      font-size: 14px; 
-      span.govuk-caption-m {
-        font-size: 12px;
-      }
-    }
-  }
-  .dpr-table-container--list-section {
-    .dpr-section-header-spacer {
-      padding: 5px
-    }
-
-    .dpr-report-summary-cell-table-footer,
-    .dpr-report-summary-cell-table-header {
-      background-color: transparent;
-      padding: govuk-spacing(2);
-      padding-left: 0px;
-      border-bottom: 1px solid #b1b4b6;
-    }
-  }
 }

package/dpr/components/_reports/report-page/report-template/report-section/report-data-table/types.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../dpr/components/_reports/report-page/report-template/report-section/report-data-table/types.d.ts"],
+  "sourcesContent": ["import { DataTable } from '../../../../../../utils/DataTableBuilder/types'\nimport { Pagination } from '../../report-pagination/types'\n\nexport interface DataTableOptions {\n  dataTable: DataTable\n  classification: string\n  printable?: boolean\n  pagination: Pagination\n  totals: string\n  count?: number\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dpr/components/_reports/{report-data-table → report-page/report-template/report-section/report-data-table}/types.d.ts

@@ -1,5 +1,5 @@
-import { DataTable } from '../../../utils/DataTableBuilder/types'
-import { Pagination } from '../report-pagination/types'
+import { DataTable } from '../../../../../../utils/DataTableBuilder/types'
+import { Pagination } from '../../report-pagination/types'
 
 export interface DataTableOptions {
   dataTable: DataTable

package/dpr/components/_reports/report-page/report-template/report-section/report-data-table/view.njk

@@ -0,0 +1,27 @@
+{% from "govuk/components/table/macro.njk" import govukTable %}
+
+{% macro dprDataTable(dataTable, classification, template, labelId, loopIndex=0) %}
+  {% set rows = dataTable.rows %}
+  {% set head = dataTable.head %}
+  {% set colCount = dataTable.colCount %}
+
+  {% if rows.length > 0 %}
+    <div id="table-container-{{ loopIndex }}" class='dpr-table-container dpr-table-container--{{ template }}' data-dpr-module="data-table" aria-labelledby="{{ labelId }}">
+      <div class="dpr-overflow-gradient" id="dpr-overflow-gradient-{{ loopIndex }}"></div>
+      <div class="dpr-table-wrapper" id="dpr-table-wrapper-{{ loopIndex }}">
+        <div class="dpr-table-content">
+          {{ govukTable({
+            head: head,
+            rows: rows,
+            classes: 'dpr-data-table',
+            attributes: { 
+              'id': 'dpr-data-table-' + loopIndex,
+              'data-classification': classification,
+              'data-col-length': colCount
+            }
+          }) }}
+        </div>
+      </div>
+    </div>
+  {% endif%}
+{% endmacro %}

package/dpr/components/_reports/report-page/report-template/report-section/styles.scss

@@ -0,0 +1,33 @@
+.dpr-report-section {
+  margin-bottom: govuk-spacing(6);
+
+  .dpr-report-section__title {
+    position: sticky;
+    top: 0;
+    background-color: white;
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(1);
+    z-index: 100;
+    border-bottom: solid 3px govuk-colour('light-blue');
+    margin-bottom: govuk-spacing(6);
+
+    h2.govuk-heading-m {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+}
+
+@media print {
+  .dpr-report-section {
+    .dpr-report-section__title {
+      border-bottom: solid 1px govuk-colour('mid-grey');
+
+      h2.govuk-heading-m {
+        font-size: 12px;
+        .govuk-caption-m {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}

package/dpr/components/_reports/report-page/report-template/report-section/view.njk

@@ -0,0 +1,58 @@
+{% from "govuk/components/table/macro.njk" import govukTable %}
+{% from "../report-summary-table/view.njk" import dprReportSummary %}
+
+{% from "./report-data-table/view.njk" import dprDataTable %}
+{% from "./parent-child-template/view.njk" import dprParentChildTemplate %}
+
+{% macro dprReportSection(renderData, template, classification) %}
+  {% set sections = renderData.sections %}
+
+  <div id="dpr-report-sections">
+    {% for section in sections %}
+      {% set sectionTitle = section.title %}
+      {% set sectionCount = section.count %}
+      {% set data = section.data %}
+      {% set summaries = section.summaries %}
+      {% if sectionTitle %}
+        {% set sectionLabelId = "section-title-" + loop.index %}
+      {% endif %}
+
+      <div 
+        id="dpr-{{ template }}-section-{{ loop.index }}" 
+        class="dpr-{{ template }}-section dpr-report-section"  
+        {% if sectionLabelId %} aria-labelledby="{{ sectionLabelId }}" {% endif %}
+      >
+      
+        {% if sectionTitle %}
+        <div class="dpr-report-section__title">
+          <h2 id="{{ sectionLabelId }}" class="govuk-heading-m">{{ sectionTitle }}
+            {% if template !== 'summary-section' %}
+            <span class="govuk-caption-m">{{ sectionCount }} results</span>
+            {% endif %}
+          </h2>
+        </div>
+        {% endif %}
+
+        {# section header summary tables #}
+        {{ dprReportSummary(summaries, 'section-header') }}
+
+        {# report template #}
+        {% if template === 'parent-child' or template === 'parent-child-section' %}
+
+          {{ dprParentChildTemplate(data, classification, template, sectionLabelId or 'dpr-report-name') }}
+
+        {% elif template !== 'summary-section' %}
+
+          <div id="dpr-{{ template }}-section-data-{{ loop.index }}" class="dpr-{{ template }}-section__data">
+            {{ dprDataTable(data, classification, template, sectionLabelId or 'dpr-report-name', loop.index) }}
+          </div>
+
+        {% endif %}
+
+        {# section footer summary tables #}
+        {{ dprReportSummary(summaries, 'section-footer') }} 
+
+      </div>
+    {% endfor %}
+  </div>
+{% endmacro %}

package/dpr/components/_reports/{report-summary-table → report-page/report-template/report-summary-table}/styles.scss

@@ -3,20 +3,22 @@
   position: relative;
   row-gap: 15px;
   flex-flow: column wrap;
+  margin-top: govuk-spacing(6);
 
   .dpr-summary-container {
     min-width: 200px;
     width: fit-content;
 
     .govuk-table {
-      border: solid 1px govuk-colour("mid-grey");
+      border: solid 1px govuk-colour('mid-grey');
       margin-bottom: 0;
 
-      th, td {
+      th,
+      td {
         padding: 10px;
       }
       th {
-        background-color: govuk-colour("light-grey");
+        background-color: govuk-colour('light-grey');
         border-bottom: 0px;
       }
     }
@@ -36,4 +38,19 @@
   margin-bottom: 30px;
 }
 
-
+@media print {
+  .dpr-summary-container-group {
+    .dpr-summary-container {
+      .govuk-table {
+        th,
+        td {
+          padding: govuk-spacing(1);
+        }
+        th {
+          background-color: govuk-colour('light-grey');
+          border-bottom: 0px;
+        }
+      }
+    }
+  }
+}

package/dpr/components/_reports/{report-totals → report-page/report-template/report-totals}/utils.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../dpr/components/_reports/report-totals/utils.ts"],
+  "sources": ["../../../../../../dpr/components/_reports/report-page/report-template/report-totals/utils.ts"],
   "sourcesContent": ["export const getTotals = (pageSize: number, currentPage: number, totalRows: number, rowCount: number): string => {\n  let totals = ''\n\n  const currentRangeStart = (currentPage - 1) * pageSize\n  const currentRangeEnd = currentRangeStart + rowCount\n\n  if (currentRangeStart === 0 && totalRows === currentRangeEnd) {\n    totals = totalRows === 1 ? `${totalRows} total result` : `${totalRows} total results`\n  } else {\n    totals =\n      totalRows > 0\n        ? `Showing <strong>${\n            currentRangeStart + 1\n          }</strong> to <strong>${currentRangeEnd}</strong> of <strong>${totalRows}</strong> results`\n        : `0-0 of 0`\n  }\n\n  return totals\n}\n\nexport default {\n  getTotals,\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,YAAY,CAAC,UAAkB,aAAqB,WAAmB,aAA6B;AAC/G,MAAI,SAAS;AAEb,QAAM,qBAAqB,cAAc,KAAK;AAC9C,QAAM,kBAAkB,oBAAoB;AAE5C,MAAI,sBAAsB,KAAK,cAAc,iBAAiB;AAC5D,aAAS,cAAc,IAAI,GAAG,SAAS,kBAAkB,GAAG,SAAS;AAAA,EACvE,OAAO;AACL,aACE,YAAY,IACR,mBACE,oBAAoB,CACtB,wBAAwB,eAAe,wBAAwB,SAAS,sBACxE;AAAA,EACR;AAEA,SAAO;AACT;AAEA,IAAO,gBAAQ;AAAA,EACb;AACF;",
   "names": []