Merge branch 'main' of https://github.com/GSA/notifications-admin into 2489-clean-up-js-audit-and-cleanup

Bump phonenumbers from 9.0.2 to 9.0.3

app/assets/javascripts/colourPreview.js

@@ -1,29 +0,0 @@
-(function(Modules) {
-  "use strict";
-
-  let isSixDigitHex = value => value.match(/^#[0-9A-F]{6}$/i);
-  let colourOrWhite = value => isSixDigitHex(value) ? value : '#FFFFFF';
-
-  Modules.ColourPreview = function() {
-
-    this.start = component => {
-
-      this.$input = $(component);
-
-      this.$input.closest('.usa-form-group').append(
-        this.$preview = $('<span class="textbox-colour-preview"></span>')
-      );
-
-      this.$input
-        .on('input', this.update)
-        .trigger('input');
-
-    };
-
-    this.update = () => this.$preview.css(
-      'background', colourOrWhite(this.$input.val())
-    );
-
-  };
-
-})(window.GOVUK.Modules);

app/assets/javascripts/fullscreenTable.js

@@ -1,124 +1,41 @@
-(function(Modules) {
-  "use strict";
+(function () {
+  'use strict';
 
-  Modules.FullscreenTable = function() {
+  function initFullscreenTables() {
+    const tables = document.querySelectorAll('.fullscreen-table');
 
-    this.start = function(component) {
+    tables.forEach((component) => {
+      const table = component.querySelector('table');
+      const wrapper = component.querySelector('.table-wrapper');
+      const rightShadow = component.querySelector('.fullscreen-right-shadow');
 
-      this.$component = $(component);
-      this.$table = this.$component.find('table');
-      this.nativeHeight = this.$component.innerHeight() + 20; // 20px to allow room for scrollbar
-      this.topOffset = this.$component.offset().top;
+      if (!table || !wrapper) return;
 
-      this.insertShims();
-      this.maintainWidth();
-      this.maintainHeight();
-      this.toggleShadows();
+      const toggleShadows = () => {
+        const scrollLeft = wrapper.scrollLeft;
+        const maxScrollLeft = wrapper.scrollWidth - wrapper.clientWidth;
 
-      $(window)
-        .on('scroll resize', this.maintainHeight)
-        .on('resize', this.maintainWidth);
+        wrapper.classList.toggle('scrolled', scrollLeft > 0);
 
-      this.$scrollableTable
-        .on('scroll', this.toggleShadows)
-        .on('scroll', this.maintainHeight)
-        .on('focus blur', () => this.$component.toggleClass('js-focus-style'));
+        if (rightShadow) {
+          rightShadow.classList.toggle('visible', scrollLeft < maxScrollLeft);
+        }
+      };
 
-      if (
-        window.GOVUK.stickAtBottomWhenScrolling &&
-        window.GOVUK.stickAtBottomWhenScrolling.recalculate
-      ) {
-        window.GOVUK.stickAtBottomWhenScrolling.recalculate();
-      }
+      wrapper.addEventListener('scroll', toggleShadows);
+      toggleShadows(); // init state
+    });
+  }
 
-      this.maintainWidth();
+  // Auto-init on page load in browser
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFullscreenTables);
+  } else {
+    initFullscreenTables();
+  }
 
-    };
-
-    this.insertShims = () => {
-
-      const attributesForFocus = 'role aria-labelledby tabindex';
-      let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, '');
-
-      this.$table.find('caption').attr('id', captionId);
-      this.$table.wrap(`<div class="fullscreen-scrollable-table" role="region" aria-labelledby="${captionId}" tabindex="0"/>`);
-
-      this.$component
-        .append(
-          this.$component.find('.fullscreen-scrollable-table')
-            .clone()
-            .addClass('fullscreen-fixed-table')
-            .removeClass('fullscreen-scrollable-table')
-            .removeAttr(attributesForFocus)
-            .attr('aria-hidden', true)
-            .find('caption')
-            .removeAttr('id')
-            .closest('.fullscreen-fixed-table')
-        )
-        .append(
-          '<div class="fullscreen-right-shadow" />'
-        )
-        .after(
-          $("<div class='fullscreen-shim'/>").css({
-            'height': this.nativeHeight,
-            'top': this.topOffset
-          })
-        )
-        .css('position', 'absolute');
-
-      this.$scrollableTable = this.$component.find('.fullscreen-scrollable-table');
-      this.$fixedTable = this.$component.find('.fullscreen-fixed-table');
-
-    };
-
-    this.maintainHeight = () => {
-
-      let height = Math.min(
-        $(window).height() - this.topOffset + $(window).scrollTop(),
-        this.nativeHeight
-      );
-
-      this.$scrollableTable.outerHeight(height);
-      this.$fixedTable.outerHeight(height);
-
-    };
-
-    this.maintainWidth = () => {
-
-      let indexColumnWidth = this.$fixedTable.find('.table-field-index').outerWidth();
-
-      this.$scrollableTable
-        .css({
-            'width': this.$component.parent('main').width() - indexColumnWidth,
-            'margin-left': indexColumnWidth
-        });
-
-      this.$fixedTable
-        .width(indexColumnWidth + 4);
-
-    };
-
-    this.toggleShadows = () => {
-
-      this.$fixedTable
-        .toggleClass(
-          'fullscreen-scrolled-table',
-          this.$scrollableTable.scrollLeft() > 0
-        );
-
-      this.$component.find('.fullscreen-right-shadow')
-        .toggleClass(
-          'visible',
-          this.$scrollableTable.scrollLeft() < (this.$table.width() - this.$scrollableTable.width())
-        );
-
-      setTimeout(
-        () => this.$component.find('.fullscreen-right-shadow').addClass('with-transition'),
-        3000
-      );
-
-    };
-
-  };
-
-})(window.GOVUK.Modules);
+  // Expose it globally in test environments
+  if (typeof window !== 'undefined') {
+    window.initFullscreenTables = initFullscreenTables;
+  }
+})();

app/assets/javascripts/homepage.js

@@ -1,24 +0,0 @@
-(function(window) {
-  "use strict";
-
-  window.GOVUK.Modules.Homepage = function() {
-
-    this.start = function(component) {
-
-      let $component = $(component);
-      let iterations = 0;
-      let timeout = null;
-
-      $component.on('click', () => {
-        if (++iterations == 5) {
-          $component.toggleClass('product-page-intro-wrapper--alternative');
-        }
-        clearTimeout(timeout);
-        timeout = setTimeout(() => iterations = 0, 1500);
-      });
-
-    };
-
-  };
-
-})(window);

app/assets/javascripts/main.js

@@ -1,27 +1,38 @@
-window.GOVUK.Frontend.initAll();
-
-$(() => $("time.timeago").timeago());
+// Initialize GOV.UK Frontend components (modern init)
+window.GOVUKFrontend.initAll();
 
 var showHideContent = new GOVUK.ShowHideContent();
 showHideContent.init();
 
-$(() => GOVUK.modules.start());
-
-$(() => $('.error-message, .usa-error-message').eq(0).parent('label').next('input').trigger('focus'));
-
-$(() => $('.govuk-header__container').on('click', function() {
-  $(this).css('border-color', '#005ea5');
-}));
-
-// Applies our expanded focus style to the siblings of links when that link is wrapped in a heading.
-//
-// This will be possible in CSS in the future, using the :has pseudo-class. When :has is available
-// in the browsers we support, this code can be replaced with a CSS-only solution.
-$('.js-mark-focus-on-parent').on('focus blur', '*', e => {
-  $target = $(e.target);
-  if (e.type === 'focusin') {
-    $target.parent().addClass('js-child-has-focus');
-  } else {
-    $target.parent().removeClass('js-child-has-focus');
+document.addEventListener('DOMContentLoaded', () => {
+  // Autofocus the first error input
+  const errorEl = document.querySelector('.error-message, .usa-error-message');
+  if (errorEl) {
+    const label = errorEl.closest('label');
+    if (label) {
+      const input = label.nextElementSibling;
+      if (input && input.focus) {
+        input.focus();
+      }
+    }
   }
+
+  // Optional: highlight header on click
+  const header = document.querySelector('.govuk-header__container');
+  if (header) {
+    header.addEventListener('click', () => {
+      header.style.borderColor = '#005ea5';
+    });
+  }
+
+  // Focus styling for heading-wrapped links
+  const containers = document.querySelectorAll('.js-mark-focus-on-parent');
+  containers.forEach(container => {
+    container.addEventListener('focusin', e => {
+      e.target.parentElement.classList.add('js-child-has-focus');
+    });
+    container.addEventListener('focusout', e => {
+      e.target.parentElement.classList.remove('js-child-has-focus');
+    });
+  });
 });

app/assets/sass/uswds/_legacy-styles.scss

@@ -174,8 +174,10 @@ h2.recipient-list {
 }
 
 .spreadsheet {
-
-  margin-bottom: units (1);
+  margin-bottom: units(1);
+  overflow-x: auto;
+  position: relative;
+  padding-left: 0;
 
   .table {
     margin-bottom: 0;
@@ -186,27 +188,56 @@ h2.recipient-list {
   }
 
   th,
-  .table-field-index {
-    background: color('gray-cool-10');
+  td {
+    padding-inline: 10px;
     border: 1px solid color('gray-cool-10');
+    background: white;
+    z-index: 1;
+  }
+
+  td {
+    min-width: calc(194px - 11px);
+
+    &:first-child {
+      min-width: auto;
+    }
+  }
+
+  th.table-field-heading {
+    background: color('gray-cool-10');
     font-weight: bold;
     text-align: center;
   }
 
-  th, td {
-    padding-left: 10px;
-    padding-right: 10px;
-    border: 1px solid color('gray-cool-10');
-  }
+  .table-field-index,
+  .table-field-heading-first {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    background: white;
+    text-align: center;
+    width: units(2);
 
-  td {
-    border-top: 0;
-    // 194 is the width of the table * 1/3.5, so the overflow cuts off
-    // at 3.5 columns wide.
-    // 11 accounts for the padding of the table cell
-    min-width: 194px - 11px;
-    &:first-child {
-      min-width: auto;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 0px;
+      z-index: 11;
+      outline: 1px solid color('gray-cool-10');
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 1px;
+      background: color('gray-cool-10');
+      z-index: 11;
     }
   }
 

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -722,7 +722,6 @@ details form {
 .placeholder,
 .placeholder-conditional {
   background-color: #face00;
-  border: 1px solid #face00;
   border-radius: 7px;
 }
 

app/templates/views/api/index.html

@@ -57,7 +57,7 @@
                 {{notification.key_name}}
               </span>
               <span class="grid-col-6 api-notifications-item__meta-time">
-                <time class="timeago" datetime="{{ notification.created_at }}">
+                <time datetime="{{ notification.created_at }}">
                   {{ notification.created_at|format_delta }}
                 </time>
               </span>

app/templates/views/check/column-errors.html

@@ -1,7 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/radios.html" import radio_select %}
-{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
+{% from "components/table.html" import list_table, field, text_field, index_field, index_field_heading %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 
@@ -161,18 +161,15 @@ recipients.column_headers %}
 
 <h2 class="font-body-lg" id="file-preview">{{ original_file_name }}</h2>
 
-<div class="fullscreen-content" data-module="fullscreen-table">
+<div class="table-wrapper spreadsheet" data-module="fullscreen-table">
   {% call(item, row_number) list_table(
   recipients.displayed_rows,
   caption=original_file_name,
   caption_visible=False,
-  field_headings=[
-  '<span class="usa-sr-only">Row in file</span><span aria-hidden="true">1</span>'|safe
-  ] + column_headers
-  ) %}
+  field_headings=[''] + column_headers )%}
   {% call index_field() %}
   <span>
-    {% set displayed_index = item.index + 2 %}
+    {% set displayed_index = item.index + 1 %}
     {{ displayed_index }}
   </span>
   {% endcall %}

app/templates/views/check/row-errors.html

@@ -55,7 +55,7 @@
     </div>
   </div>
 
-  <div class="fullscreen-content" data-module="fullscreen-table">
+  <div class="table-wrapper spreadsheet" data-module="fullscreen-table">
     {% call(item, row_number) mapping_table(
       caption="Errors in " + original_file_name,
       caption_visible=False,

app/templates/views/find-users/user-information.html

@@ -60,7 +60,7 @@
       <p class="hint">This person has never logged in</p>
       {% else %}
       <p>Last logged in
-        <time class="timeago" datetime="{{ user.logged_in_at }}">
+        <time datetime="{{ user.logged_in_at }}">
           {{ user.logged_in_at|format_delta }}
         </time>
       </p>

app/templates/views/send.html

@@ -5,6 +5,7 @@
 {% from "components/table.html" import list_table, text_field, index_field, index_field_heading %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 <script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>
+import { FullscreenTable } from './fullscreenTable.js';
 
 {% block service_page_title %}
   Upload your bulk-sending spreadsheet
@@ -71,7 +72,7 @@
 
   <h2 class="font-body-lg">A spreadsheet is available to use</h2>
 
-  <div class="spreadsheet" data-module="fullscreen-table">
+  <div class="table-wrapper spreadsheet" data-module="fullscreen-table">
     {% call(item, row_number) list_table(
       example,
       caption="Example",

gulpfile.js

@@ -47,7 +47,6 @@ const javascripts = () => {
         paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
         paths.npm + 'jquery/dist/jquery.min.js',
         paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
-        paths.npm + 'timeago/jquery.timeago.js',
         paths.npm + 'textarea-caret/index.js',
         paths.npm + 'cbor-js/cbor.js',
         paths.npm + 'd3/dist/d3.min.js',
@@ -68,13 +67,11 @@ const javascripts = () => {
     paths.src + 'javascripts/errorTracking.js',
     paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
     paths.src + 'javascripts/fullscreenTable.js',
-    paths.src + 'javascripts/colourPreview.js',
     paths.src + 'javascripts/templateFolderForm.js',
     paths.src + 'javascripts/collapsibleCheckboxes.js',
     paths.src + 'javascripts/radioSlider.js',
     paths.src + 'javascripts/updateStatus.js',
     paths.src + 'javascripts/errorBanner.js',
-    paths.src + 'javascripts/homepage.js',
     paths.src + 'javascripts/timeoutPopup.js',
     paths.src + 'javascripts/date.js',
     paths.src + 'javascripts/loginAlert.js',

package-lock.json

@@ -26,7 +26,6 @@
         "query-command-supported": "1.0.0",
         "sass-embedded": "^1.86.3",
         "textarea-caret": "3.1.0",
-        "timeago": "1.6.7",
         "vinyl-buffer": "^1.0.1",
         "vinyl-source-stream": "^2.0.0"
       },
@@ -50,7 +49,7 @@
         "jest-environment-jsdom": "^29.2.2",
         "jshint": "2.13.6",
         "jshint-stylish": "2.2.1",
-        "rollup": "^4.39.0",
+        "rollup": "^4.40.0",
         "rollup-plugin-commonjs": "10.1.0",
         "rollup-plugin-node-resolve": "5.2.0"
       },
@@ -2307,9 +2306,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.39.0.tgz",
-      "integrity": "sha512-lGVys55Qb00Wvh8DMAocp5kIcaNzEFTmGhfFd88LfaogYTRKrdxgtlO5H6S49v2Nd8R2C6wLOal0qv6/kCkOwA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
+      "integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==",
       "cpu": [
         "arm"
       ],
@@ -2320,9 +2319,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.39.0.tgz",
-      "integrity": "sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.0.tgz",
+      "integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==",
       "cpu": [
         "arm64"
       ],
@@ -2333,9 +2332,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.39.0.tgz",
-      "integrity": "sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.0.tgz",
+      "integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==",
       "cpu": [
         "arm64"
       ],
@@ -2346,9 +2345,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.39.0.tgz",
-      "integrity": "sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.0.tgz",
+      "integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==",
       "cpu": [
         "x64"
       ],
@@ -2359,9 +2358,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.39.0.tgz",
-      "integrity": "sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.0.tgz",
+      "integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==",
       "cpu": [
         "arm64"
       ],
@@ -2372,9 +2371,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.39.0.tgz",
-      "integrity": "sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.0.tgz",
+      "integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==",
       "cpu": [
         "x64"
       ],
@@ -2385,9 +2384,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.39.0.tgz",
-      "integrity": "sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.0.tgz",
+      "integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==",
       "cpu": [
         "arm"
       ],
@@ -2398,9 +2397,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.39.0.tgz",
-      "integrity": "sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.0.tgz",
+      "integrity": "sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==",
       "cpu": [
         "arm"
       ],
@@ -2411,9 +2410,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.39.0.tgz",
-      "integrity": "sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.0.tgz",
+      "integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==",
       "cpu": [
         "arm64"
       ],
@@ -2424,9 +2423,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.39.0.tgz",
-      "integrity": "sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.0.tgz",
+      "integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==",
       "cpu": [
         "arm64"
       ],
@@ -2437,9 +2436,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.39.0.tgz",
-      "integrity": "sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.0.tgz",
+      "integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==",
       "cpu": [
         "loong64"
       ],
@@ -2450,9 +2449,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.39.0.tgz",
-      "integrity": "sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.0.tgz",
+      "integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==",
       "cpu": [
         "ppc64"
       ],
@@ -2463,9 +2462,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.39.0.tgz",
-      "integrity": "sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.0.tgz",
+      "integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==",
       "cpu": [
         "riscv64"
       ],
@@ -2476,9 +2475,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.39.0.tgz",
-      "integrity": "sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.0.tgz",
+      "integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==",
       "cpu": [
         "riscv64"
       ],
@@ -2489,9 +2488,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.39.0.tgz",
-      "integrity": "sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.0.tgz",
+      "integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==",
       "cpu": [
         "s390x"
       ],
@@ -2502,9 +2501,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.39.0.tgz",
-      "integrity": "sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.0.tgz",
+      "integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==",
       "cpu": [
         "x64"
       ],
@@ -2515,9 +2514,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.39.0.tgz",
-      "integrity": "sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.0.tgz",
+      "integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==",
       "cpu": [
         "x64"
       ],
@@ -2528,9 +2527,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.39.0.tgz",
-      "integrity": "sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.0.tgz",
+      "integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==",
       "cpu": [
         "arm64"
       ],
@@ -2541,9 +2540,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.39.0.tgz",
-      "integrity": "sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.0.tgz",
+      "integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==",
       "cpu": [
         "ia32"
       ],
@@ -2554,9 +2553,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.39.0.tgz",
-      "integrity": "sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.0.tgz",
+      "integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==",
       "cpu": [
         "x64"
       ],
@@ -11429,9 +11428,9 @@
       "license": "Unlicense"
     },
     "node_modules/rollup": {
-      "version": "4.39.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.39.0.tgz",
-      "integrity": "sha512-thI8kNc02yNvnmJp8dr3fNWJ9tCONDhp6TV35X6HkKGGs9E6q7YWCHbe5vKiTa7TAiNcFEmXKj3X/pG2b3ci0g==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
+      "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.7"
@@ -11444,26 +11443,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.39.0",
-        "@rollup/rollup-android-arm64": "4.39.0",
-        "@rollup/rollup-darwin-arm64": "4.39.0",
-        "@rollup/rollup-darwin-x64": "4.39.0",
-        "@rollup/rollup-freebsd-arm64": "4.39.0",
-        "@rollup/rollup-freebsd-x64": "4.39.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.39.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.39.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.39.0",
-        "@rollup/rollup-linux-arm64-musl": "4.39.0",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.39.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.39.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.39.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.39.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.39.0",
-        "@rollup/rollup-linux-x64-gnu": "4.39.0",
-        "@rollup/rollup-linux-x64-musl": "4.39.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.39.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.39.0",
-        "@rollup/rollup-win32-x64-msvc": "4.39.0",
+        "@rollup/rollup-android-arm-eabi": "4.40.0",
+        "@rollup/rollup-android-arm64": "4.40.0",
+        "@rollup/rollup-darwin-arm64": "4.40.0",
+        "@rollup/rollup-darwin-x64": "4.40.0",
+        "@rollup/rollup-freebsd-arm64": "4.40.0",
+        "@rollup/rollup-freebsd-x64": "4.40.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.40.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.40.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.40.0",
+        "@rollup/rollup-linux-arm64-musl": "4.40.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.40.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.40.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-musl": "4.40.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.40.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.40.0",
+        "@rollup/rollup-win32-x64-msvc": "4.40.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -12680,14 +12679,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/timeago": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/timeago/-/timeago-1.6.7.tgz",
-      "integrity": "sha512-FikcjN98+ij0siKH4VO4dZ358PR3oDDq4Vdl1+sN9gWz1/+JXGr3uZbUShYH/hL7bMhcTpPbplJU5Tej4b4jbQ==",
-      "dependencies": {
-        "jquery": ">=1.5.0 <4.0"
-      }
-    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

package.json

@@ -42,7 +42,6 @@
     "query-command-supported": "1.0.0",
     "sass-embedded": "^1.86.3",
     "textarea-caret": "3.1.0",
-    "timeago": "1.6.7",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0"
   },
@@ -66,7 +65,7 @@
     "jest-environment-jsdom": "^29.2.2",
     "jshint": "2.13.6",
     "jshint-stylish": "2.2.1",
-    "rollup": "^4.39.0",
+    "rollup": "^4.40.0",
     "rollup-plugin-commonjs": "10.1.0",
     "rollup-plugin-node-resolve": "5.2.0"
   }

poetry.lock

@@ -18,7 +18,6 @@ version = "5.0.1"
 description = "Timeout context manager for asyncio programs"
 optional = false
 python-versions = ">=3.8"
-groups = ["main"]
 files = [
     {file = "async_timeout-5.0.1-py3-none-any.whl", hash = "sha256:39e3809566ff85354557ec2398b55e096c8364bacac9405a7a1fa429e77fe76c"},
     {file = "async_timeout-5.0.1.tar.gz", hash = "sha256:d9321a7a3d5a6a5e187e824d2fa0793ce379a202935782d555d6e9d2735677d3"},
@@ -1551,7 +1550,6 @@ version = "3.0.2"
 description = "Safely add untrusted strings to HTML/XML markup."
 optional = false
 python-versions = ">=3.9"
-groups = ["main", "dev"]
 files = [
     {file = "MarkupSafe-3.0.2-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:7e94c425039cde14257288fd61dcfb01963e658efbc0ff54f5306b06054700f8"},
     {file = "MarkupSafe-3.0.2-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:9e2d922824181480953426608b81967de705c3cef4d1af983af849d7bd619158"},
@@ -2008,14 +2006,14 @@ setuptools = "*"
 
 [[package]]
 name = "phonenumbers"
-version = "9.0.2"
+version = "9.0.3"
 description = "Python version of Google's common library for parsing, formatting, storing and validating international phone numbers."
 optional = false
 python-versions = "*"
 groups = ["main"]
 files = [
-    {file = "phonenumbers-9.0.2-py2.py3-none-any.whl", hash = "sha256:dbcec6bdfdf3973f60b81dc0fcac3f7b1638f877ac42da4d7b46724ed413e2b9"},
-    {file = "phonenumbers-9.0.2.tar.gz", hash = "sha256:f590ee2b729bdd9873ca2d52989466add14c9953b48805c0aeb408348d4d6224"},
+    {file = "phonenumbers-9.0.3-py2.py3-none-any.whl", hash = "sha256:0509d9b70ef66c04a1538f0b31c3e0c0b023127dad0eb1199adef0bc1841ff34"},
+    {file = "phonenumbers-9.0.3.tar.gz", hash = "sha256:c5084e6c6a77e0e8d725086c7f69002ef8e39529155b8cd31cbf8c987f344a33"},
 ]
 
 [[package]]
@@ -3302,4 +3300,4 @@ files = [
 [metadata]
 lock-version = "2.1"
 python-versions = "^3.12.2"
-content-hash = "6fb8b2aff8efacb043ce44d878446aa63a77494280e1c227dab197609426e874"
+content-hash = "418596e226a87272f31ee6db71b26e45754dad12d29761c9cff83cd86363c0a5"

pyproject.toml

@@ -50,7 +50,7 @@ geojson = "^3.1.0"
 jmespath = "^1.0.1"
 numpy = "^2.2.4"
 ordered-set = "^4.1.0"
-phonenumbers = "^9.0.2"
+phonenumbers = "^9.0.3"
 pycparser = "^2.22"
 python-json-logger = "^3.3.0"
 redis = "^5.2.1"

tests/javascripts/activityChart.test.js

@@ -18,6 +18,12 @@ Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
 });
 
 // beforeAll hook to set up the DOM and load D3.js script
+beforeAll(() => {
+  jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => ({
+    resolvedOptions: () => ({ timeZone: 'UTC' })
+  }));
+});
+
 beforeAll(done => {
   // Set up the DOM with the D3 script included
   document.body.innerHTML = `

tests/javascripts/colourPreview.test.js

@@ -1,139 +0,0 @@
-const helpers = require('./support/helpers.js');
-
-beforeAll(() => {
-  require('../../app/assets/javascripts/colourPreview.js');
-});
-
-afterAll(() => {
-  require('./support/teardown.js');
-});
-
-describe('Colour preview', () => {
-
-  let field;
-  let textbox;
-  let swatchEl;
-
-  beforeEach(() => {
-
-    // set up DOM
-    document.body.innerHTML = `
-      <div class="usa-form-group">
-        <label class="govuk-form-label" for="colour">
-          Colour
-        </label>
-        <input class="govuk-input govuk-input--width-6" id="colour" name="colour" rows="8" type="text" value="" data-module="colour-preview">
-      </div>`;
-
-    field = document.querySelector('.usa-form-group');
-    textbox = document.querySelector('input[type=text]');
-
-  });
-
-  afterEach(() => {
-
-    document.body.innerHTML = '';
-
-  });
-
-  describe("When the page loads", () => {
-
-    test("It should add a swatch element for the preview", () => {
-
-      // start the module
-      window.GOVUK.modules.start();
-
-      swatchEl = document.querySelector('.textbox-colour-preview');
-
-      expect(swatchEl).not.toBeNull();
-
-    });
-
-    test("If the textbox is empty it should make the swatch white", () => {
-
-      // start the module
-      window.GOVUK.modules.start();
-
-      swatchEl = document.querySelector('.textbox-colour-preview');
-
-      // textbox defaults to empty
-      // colours are output in RGB
-      expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
-
-    });
-
-    test("If the textbox has a value which is a hex code it should add that colour to the swatch", () => {
-
-      textbox.setAttribute('value', '#00FF00');
-
-      // start the module
-      window.GOVUK.modules.start();
-
-      swatchEl = document.querySelector('.textbox-colour-preview');
-
-      // colours are output in RGB
-      expect(swatchEl.style.background).toEqual('rgb(0, 255, 0)');
-
-    });
-
-    test("If the textbox has a value which isn't a hex code it should make the swatch white", () => {
-
-      textbox.setAttribute('value', 'green');
-
-      // start the module
-      window.GOVUK.modules.start();
-
-      swatchEl = document.querySelector('.textbox-colour-preview');
-
-      // colours are output in RGB
-      expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
-
-    });
-
-  });
-
-  describe("When input is added to the textbox", () => {
-
-    beforeEach(() => {
-
-      // start the module
-      window.GOVUK.modules.start();
-
-      swatchEl = document.querySelector('.textbox-colour-preview');
-
-    });
-
-    test("If the textbox is empty it should make the swatch white", () => {
-
-      helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
-
-      // textbox defaults to empty
-      expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
-
-    });
-
-    test("If the textbox has a value which is a hex code it should add that colour to the swatch", () => {
-
-      textbox.setAttribute('value', '#00FF00');
-
-      helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
-
-      // textbox defaults to empty
-      expect(swatchEl.style.background).toEqual('rgb(0, 255, 0)');
-
-    });
-
-    test("If the textbox has a value which isn't a hex code it should make the swatch white", () => {
-
-      textbox.setAttribute('value', 'green');
-
-      helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
-
-      // textbox defaults to empty
-      expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
-
-    });
-
-  });
-
-});

tests/javascripts/fullscreenTable.test.js

@@ -1,370 +1,88 @@
-const helpers = require('./support/helpers');
+require('../../app/assets/javascripts/fullscreenTable.js');
 
-beforeAll(() => {
-  // TODO: remove this when tests for sticky JS are written
-  require('../../app/assets/javascripts/stick-to-window-when-scrolling.js');
+describe('fullscreenTable', () => {
+  let wrapper, rightShadow;
 
-  require('../../app/assets/javascripts/fullscreenTable.js');
-});
-
-afterAll(() => {
-  require('./support/teardown.js');
-});
-
-describe('FullscreenTable', () => {
-  let screenMock;
-  let container;
-  let tableFrame;
-  let table;
-  let numberColumnFrame;
-
-  beforeEach(() => {
-
-    const tableHeadings = () => {
-      let result = '';
-      const headings = ['1', 'name', 'email address', 'age', 'building number', 'address line 1', 'address line 2', 'postcode'];
-
-      headings.forEach((heading, idx) => {
-        if (idx === 0) {
-          result += `<th scope="col" class="table-field-heading-first">
-                        <span class="visually-hidden">Row in file</span><span aria-hidden="true" class="table-field-invisible-error">${heading}</span>
-                      </th>`;
-        } else {
-          result += `<th scope="col" class="table-field-heading">
-                      ${heading}
-                      </th>`;
-        }
-      });
-
-      return result;
-    }
-
-    const rowCells = (cells) => {
-      let result = '';
-
-      Object.keys(cells).forEach((key, idx) => {
-        if (idx === 0) {
-          result += `<td class="table-field-index">
-                      <span class="table-field-error">
-                        ${key}
-                      </span>
-                    </td>`;
-        } else {
-          result += `<td class="table-field-left-aligned ">
-                      <div class="table-field-status-default">
-                        ${key}
-                      </div>
-                    </td>`;
-        }
-      });
-
-      return result;
-    };
-
-    const tableRows = () => {
-      let result = '';
-
-      const rows = [
-        ['John Logie Baird', 'johnlbaird@gmail.com', '37', '22', 'Frith Street', 'Soho, London', 'W1D 4RF'],
-        ['Guglielmo Marconi', 'gmarconi@hotmail.com', '21', 'Pontecchio Marconi', 'Via Celestini 1', 'Bologna', ''],
-        ['Louis Braille', 'louisbraille@yahoo.co.uk', '', '56', 'Boulevard des Invalides', 'Paris', '75007'],
-        ['Ray Tomlinson', 'hedy.lamarr@msn.com', '25', '870', '870 Winter Street', 'Waltham', 'MA 02451']
-      ];
-
-      rows.forEach(row => {
-        result += `<tr class="table-row">${rowCells(row)}</tr>`;
-      });
-
-      return result;
-
-    }
-
-    screenMock = new helpers.ScreenMock(jest);
-    screenMock.setWindow({
-      width: 1990,
-      height: 940,
-      scrollTop: 0
-    });
-
-    // set up DOM
-    document.body.innerHTML =
-      `<main>
-        <div class="fullscreen-content" data-module="fullscreen-table">
-          <table class="table table-font-xsmall">
-            <caption class="heading-medium table-heading visuallyhidden">
-              people.csv
-            </caption>
-            <thead class="table-field-headings-visible">
-              <tr>
-                ${tableHeadings()}
-              </tr>
-            </thead>
-            <tbody>
-              ${tableRows()}
-            </tbody>
+  const setupDOM = (scrollLeft = 0, scrollWidth = 1000, clientWidth = 500) => {
+    document.body.innerHTML = `
+      <div class="fullscreen-table">
+        <div class="table-wrapper" style="overflow-x: scroll;">
+          <table>
+            <tr><td>Test</td></tr>
           </table>
         </div>
-       </main>`;
+        <div class="fullscreen-right-shadow"></div>
+      </div>
+    `;
 
-    container = document.querySelector('.fullscreen-content');
+    wrapper = document.querySelector('.table-wrapper');
+    rightShadow = document.querySelector('.fullscreen-right-shadow');
 
-  });
+    // Mock scroll values
+    Object.defineProperty(wrapper, 'scrollLeft', {
+      get: () => scrollLeft,
+      configurable: true
+    });
+    Object.defineProperty(wrapper, 'scrollWidth', {
+      get: () => scrollWidth,
+      configurable: true
+    });
+    Object.defineProperty(wrapper, 'clientWidth', {
+      get: () => clientWidth,
+      configurable: true
+    });
+
+    // 👇 Now that DOM is ready, initialize the logic
+    window.initFullscreenTables();
+
+    // Force trigger scroll event if needed
+    wrapper.dispatchEvent(new Event('scroll'));
+  };
 
   afterEach(() => {
-
     document.body.innerHTML = '';
-
   });
 
-  describe("when it loads", () => {
-
-    test("it fixes the number column for each row without changing the semantics", () => {
-
-      // start module
-      window.GOVUK.modules.start();
-
-      tableFrame = document.querySelector('.fullscreen-scrollable-table');
-      numberColumnFrame = document.querySelector('.fullscreen-fixed-table');
-
-      expect(tableFrame).not.toBeNull();
-      expect(numberColumnFrame).not.toBeNull();
-      expect(numberColumnFrame.getAttribute('aria-hidden')).toEqual('true');
-
-    });
-
-    test("it calls the sticky JS to update any cached dimensions", () => {
-
-      const stickyJSSpy = jest.spyOn(window.GOVUK.stickAtBottomWhenScrolling, 'recalculate');
-
-      // start module
-      window.GOVUK.modules.start();
-
-      expect(stickyJSSpy.mock.calls.length).toBe(1);
-
-      stickyJSSpy.mockClear();
-
-    });
-
-    test("the scrolling section is focusable and has an accessible name matching the table caption", () => {
-
-      // start module
-      window.GOVUK.modules.start();
-
-      tableFrame = document.querySelector('.fullscreen-scrollable-table');
-      caption = tableFrame.querySelector('caption');
-
-      expect(tableFrame.hasAttribute('role')).toBe(true);
-      expect(tableFrame.getAttribute('role')).toEqual('region');
-      expect(tableFrame.hasAttribute('aria-labelledby')).toBe(true);
-      expect(tableFrame.getAttribute('aria-labelledby')).toEqual(caption.getAttribute('id'));
-
-    });
-
-    test("the section providing the fixed row headers is not focusable and is hidden from assistive tech'", () => {
-
-      // start module
-      window.GOVUK.modules.start();
-
-      fixedRowHeaders = document.querySelector('.fullscreen-fixed-table');
-
-      expect(fixedRowHeaders.hasAttribute('role')).toBe(false);
-      expect(fixedRowHeaders.hasAttribute('aria-labelledby')).toBe(false);
-      expect(fixedRowHeaders.hasAttribute('tabindex')).toBe(false);
-      expect(fixedRowHeaders.hasAttribute('aria-hidden')).toBe(true);
-      expect(fixedRowHeaders.getAttribute('aria-hidden')).toEqual('true');
-
-    });
-
+  test('adds right shadow on initial load if scrollable', () => {
+    setupDOM(0, 1000, 500);
+    expect(wrapper.classList.contains('scrolled')).toBe(false);
+    expect(rightShadow.classList.contains('visible')).toBe(true);
   });
 
-  describe("the height of the table should fit the vertical space available to it", () => {
-
-    let containerBoundingClientRectSpy;
-    let containerClientRectsSpy;
-
-    beforeEach(() => {
-
-      // set the height and offset of the window and table container from the top of the document
-      // so just the top 268px of it appears on-screen
-      screenMock.window.setHeightTo(768);
-      screenMock.mockPositionAndDimension('container', container, {
-        'offsetHeight': 1000,
-        'offsetWidth': 641,
-        'offsetTop': 500
-      });
-
-      // start module
-      window.GOVUK.modules.start();
-
-      tableFrame = document.querySelector('.fullscreen-scrollable-table');
-      numberColumnFrame = document.querySelector('.fullscreen-fixed-table');
-
-    });
-
-    afterEach(() => {
-
-      screenMock.reset();
-
-    });
-
-    test("when the page has loaded", () => {
-
-      // the frames should crop to the top 268px of the table that is visible
-      expect(window.getComputedStyle(tableFrame)['height']).toEqual('268px');
-      expect(window.getComputedStyle(numberColumnFrame)['height']).toEqual('268px');
-
-    });
-
-    test("when the page has scrolled", () => {
-
-      // scroll the window so the table fills the height of the window (768px)
-      screenMock.window.scrollTo(500);
-
-      // the frames should crop to the window height
-      expect(window.getComputedStyle(tableFrame)['height']).toEqual('768px');
-      expect(window.getComputedStyle(numberColumnFrame)['height']).toEqual('768px');
-
-    });
-
-    test("when the page has resized", () => {
-
-      // resize the window by 232px (from 768px to 1000px)
-      screenMock.window.resizeTo({ height: 1000, width: 1024 });
-
-      // the frames should crop to the top 500px of the table now visible
-      expect(window.getComputedStyle(tableFrame)['height']).toEqual('500px');
-      expect(window.getComputedStyle(numberColumnFrame)['height']).toEqual('500px');
-
-    });
-
+  test('hides right shadow when scrolled to max', () => {
+    setupDOM(500, 1000, 500);
+    expect(wrapper.classList.contains('scrolled')).toBe(true);
+    expect(rightShadow.classList.contains('visible')).toBe(false);
   });
 
-  describe("the width of the table should fit the horizontal space available to it", () => {
-    let rowNumberColumnCell;
-
-    beforeEach(() => {
-
-      rowNumberColumnCell = container.querySelector('.table-field-index');
-
-      // set main content column width (used as module as gauge for table width)
-      screenMock.window.setWidthTo(1024);
-      document.querySelector('main').setAttribute('style', 'width: 742px');
-
-      // set total width of column for row numbers in table to 40px
-      rowNumberColumnCell.setAttribute('style', 'width: 40px');
-
-      // start module
-      window.GOVUK.modules.start();
-
-      tableFrame = document.querySelector('.fullscreen-scrollable-table');
-      numberColumnFrame = document.querySelector('.fullscreen-fixed-table');
-
-    });
-
-    afterEach(() => {
-
-      screenMock.reset();
-
-    });
-
-    test("when the page has loaded", () => {
-
-      // table should set its width to be that of `<main>`, minus margin-left for the row numbers column
-      expect(window.getComputedStyle(tableFrame)['width']).toEqual('702px'); // width of content column - numbers column
-      expect(window.getComputedStyle(tableFrame)['margin-left']).toEqual('40px'); // width of numbers column
-
-      // table for number column has 4px extra to allow space for drop shadow
-      expect(window.getComputedStyle(numberColumnFrame)['width']).toEqual('44px');
-
-    });
-
-    test("when the page has resized", () => {
-
-      // resize window and content column
-      document.querySelector('main').setAttribute('style', 'width: 720px');
-      screenMock.window.resizeTo({ height: 768, width: 960 });
-
-      // table should set its width to be that of `<main>`, minus margin-left for the row numbers column
-      expect(window.getComputedStyle(tableFrame)['width']).toEqual('680px'); // width of content column - numbers column
-      expect(window.getComputedStyle(tableFrame)['margin-left']).toEqual('40px'); // width of numbers column
-
-      // table for number column has 4px extra to allow space for drop shadow
-      expect(window.getComputedStyle(numberColumnFrame)['width']).toEqual('44px');
-
-    });
-
+  test('handles mid-scroll: left + right shadows active', () => {
+    setupDOM(250, 1000, 500);
+    expect(wrapper.classList.contains('scrolled')).toBe(true);
+    expect(rightShadow.classList.contains('visible')).toBe(true);
   });
 
-  describe("when the table scrolls horizontally", () => {
-    let rightEdgeShadow;
+  test('gracefully handles missing right shadow', () => {
+    document.body.innerHTML = `
+      <div class="fullscreen-table">
+        <div class="table-wrapper">
+          <table>
+            <tr><td>Only content</td></tr>
+          </table>
+        </div>
+      </div>
+    `;
 
-    beforeEach(() => {
+    wrapper = document.querySelector('.table-wrapper');
 
-      // start module
-      window.GOVUK.modules.start();
+    Object.defineProperty(wrapper, 'scrollLeft', { get: () => 100, configurable: true });
+    Object.defineProperty(wrapper, 'scrollWidth', { get: () => 500, configurable: true });
+    Object.defineProperty(wrapper, 'clientWidth', { get: () => 200, configurable: true });
 
-      tableFrame = document.querySelector('.fullscreen-scrollable-table');
-      table = tableFrame.querySelector('table');
-      numberColumnFrame = document.querySelector('.fullscreen-fixed-table');
-      rightEdgeShadow = container.querySelector('.fullscreen-right-shadow');
-
-      tableFrame.setAttribute('style', 'width: 742px');
-      table.setAttribute('style', 'width: 1000px');
-
-    });
-
-    test("the right edge of the table scroll area should have a drop-shadow if it isn't scrolled", () => {
-
-      tableFrame.scrollLeft = 0;
-      helpers.triggerEvent(tableFrame, 'scroll');
-
-      expect(numberColumnFrame.classList.contains('fullscreen-scrolled-table')).toBe(false);
-      expect(rightEdgeShadow.classList.contains('visible')).toBe(true);
-
-    });
-
-    test("the left edge of the table scroll area should have a drop-shadow if the table is scrolled to 100%", () => {
-
-      // scroll to end of table
-      tableFrame.scrollLeft = 258;
-      helpers.triggerEvent(tableFrame, 'scroll');
-
-      expect(numberColumnFrame.classList.contains('fullscreen-scrolled-table')).toBe(true);
-      expect(rightEdgeShadow.classList.contains('visible')).toBe(false);
-
-    });
-
-    test("both edges of the table scroll area should have a drop-shadow if the table is scrolled between 0% and 100%", () => {
-
-      // scroll to middle of table
-      tableFrame.scrollLeft = 129;
-      helpers.triggerEvent(tableFrame, 'scroll');
-
-      expect(numberColumnFrame.classList.contains('fullscreen-scrolled-table')).toBe(true);
-      expect(rightEdgeShadow.classList.contains('visible')).toBe(true);
-
-    });
+    // 👇 Call after building DOM
+    window.initFullscreenTables();
+    wrapper.dispatchEvent(new Event('scroll'));
 
+    expect(wrapper.classList.contains('scrolled')).toBe(true);
+    // No error thrown for missing .fullscreen-right-shadow
   });
-
-  describe("when the table is focused", () => {
-
-    beforeEach(() => {
-
-      // start module
-      window.GOVUK.modules.start();
-
-      tableFrame = document.querySelector('.fullscreen-scrollable-table');
-      tableFrame.focus();
-
-    });
-
-    test("it should make the parent frame a focus style", () => {
-
-      expect(container.classList.contains('js-focus-style')).toBe(true);
-
-    });
-
-  });
-
 });