@govuk-one-login/frontend-ui 3.1.0 → 4.0.0

package/build/cjs/frontend/index.cjs

@@ -289,10 +289,23 @@ class Spinner {
     }
 }
 
-function initialiseProgressButtons() {
-    const progressButtons = document.querySelectorAll('[data-frontendui="di-progress-button"]');
-    progressButtons.forEach((button) => {
-        button.addEventListener('click', (event) => {
+function initialiseProgressButtons(document = window.document) {
+    const progressButtons = Array.prototype.slice.call(document.querySelectorAll('[data-frontendui="di-progress-button"]'));
+    function findClosestForm(element) {
+        let el = element;
+        while (el && el.nodeName !== 'FORM') {
+            el = el.parentElement;
+        }
+        return el;
+    }
+    progressButtons.forEach(function (button) {
+        const form = findClosestForm(button);
+        let isSubmitting = false;
+        button.addEventListener('click', function (event) {
+            if (isSubmitting) {
+                event.preventDefault();
+                return;
+            }
             const waitingText = button.getAttribute('data-waiting-text');
             const longWaitingText = button.getAttribute('data-long-waiting-text');
             const errorPage = button.getAttribute('data-error-page');
@@ -301,14 +314,44 @@ function initialiseProgressButtons() {
                 console.error('Progress button is missing required data attributes.');
                 return;
             }
+            isSubmitting = true;
+            // Always handle the button click, regardless of form presence
             handleProgressButtonClick(button, waitingText, longWaitingText, errorPage, isInput);
+            // If no form, we're done. If there is a form, the form submit handler will take over
+            if (!form) {
+                return;
+            }
+            // For form buttons, let the click propagate to trigger form submission
         });
+        if (form) {
+            form.addEventListener('submit', function (event) {
+                // The button click handler has already set isSubmitting and handled the button state
+                if (isSubmitting) {
+                    // Allow the first submission, prevent subsequent ones
+                    if (event.target === form && event.submitter === button) {
+                        return; // Allow the first submission to proceed
+                    }
+                    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
+                    return;
+                }
+                // If the form is submitted through another method (not our button),
+                // prevent double submission but don't show progress state
+                isSubmitting = true;
+            });
+        }
     });
 }
-const handleProgressButtonClick = (element, waitingText, longWaitingText, errorPage, isInput = false) => {
-    element.blur();
+function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput) {
+    var originalText = isInput && element instanceof HTMLInputElement ? element.value : element.innerText;
+    if (typeof element.blur === 'function') {
+        element.blur();
+    }
     element.setAttribute('data-prevent-double-click', 'true');
-    element.classList.add('govuk-button--progress-loading');
+    var classes = element.className.split(' ');
+    if (classes.indexOf('govuk-button--progress-loading') === -1) {
+        classes.push('govuk-button--progress-loading');
+        element.className = classes.join(' ');
+    }
     if (isInput && element instanceof HTMLInputElement) {
         element.value = waitingText;
     }
@@ -316,7 +359,7 @@ const handleProgressButtonClick = (element, waitingText, longWaitingText, errorP
         element.innerText = waitingText;
     }
     element.setAttribute('aria-label', waitingText);
-    setTimeout(() => {
+    var longWaitTimeout = window.setTimeout(function () {
         if (isInput && element instanceof HTMLInputElement) {
             element.value = longWaitingText;
         }
@@ -325,10 +368,30 @@ const handleProgressButtonClick = (element, waitingText, longWaitingText, errorP
         }
         element.setAttribute('aria-label', longWaitingText);
     }, 5000);
-    setTimeout(() => {
+    var errorTimeout = window.setTimeout(function () {
         window.location.href = errorPage;
     }, 10000);
-};
+    function resetButton() {
+        var classes = element.className.split(' ');
+        var loadingIndex = classes.indexOf('govuk-button--progress-loading');
+        if (loadingIndex !== -1) {
+            classes.splice(loadingIndex, 1);
+            element.className = classes.join(' ');
+        }
+        element.setAttribute('data-prevent-double-click', 'false');
+        if (isInput && element instanceof HTMLInputElement) {
+            element.value = originalText;
+        }
+        else {
+            element.innerText = originalText;
+        }
+        element.setAttribute('aria-label', originalText);
+        window.clearTimeout(errorTimeout);
+        window.clearTimeout(longWaitTimeout);
+    }
+    element.resetProgressButton = resetButton;
+    return resetButton;
+}
 
 exports.initialiseProgressButtons = initialiseProgressButtons;
 exports.useSpinner = useSpinner;

package/build/cjs/frontend/progress-button/progress-button.d.ts

@@ -1,2 +1,2 @@
-export declare function initialiseProgressButtons(): void;
+export declare function initialiseProgressButtons(document?: Document): void;
 //# sourceMappingURL=progress-button.d.ts.map

package/build/cjs/frontend/progress-button/progress-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,SAgBxC"}
+{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,QAgE7E"}

package/build/components/bases/mobile/mobile-base.njk

@@ -100,8 +100,8 @@
         translations: {
           footerNavItems: [
             {
-              href: "/accessibilitystatement",
-              text: 'general.base.footer.accessibility' | translate
+              href: 'general.base.footer.accessibility.link' | translate | safe,
+              text: 'general.base.footer.accessibility.linkText' | translate
             },
             {
               href: 'general.cookieBanner.viewCookiesLink' | translate,

package/build/esm/frontend/index.js

@@ -287,10 +287,23 @@ class Spinner {
     }
 }
 
-function initialiseProgressButtons() {
-    const progressButtons = document.querySelectorAll('[data-frontendui="di-progress-button"]');
-    progressButtons.forEach((button) => {
-        button.addEventListener('click', (event) => {
+function initialiseProgressButtons(document = window.document) {
+    const progressButtons = Array.prototype.slice.call(document.querySelectorAll('[data-frontendui="di-progress-button"]'));
+    function findClosestForm(element) {
+        let el = element;
+        while (el && el.nodeName !== 'FORM') {
+            el = el.parentElement;
+        }
+        return el;
+    }
+    progressButtons.forEach(function (button) {
+        const form = findClosestForm(button);
+        let isSubmitting = false;
+        button.addEventListener('click', function (event) {
+            if (isSubmitting) {
+                event.preventDefault();
+                return;
+            }
             const waitingText = button.getAttribute('data-waiting-text');
             const longWaitingText = button.getAttribute('data-long-waiting-text');
             const errorPage = button.getAttribute('data-error-page');
@@ -299,14 +312,44 @@ function initialiseProgressButtons() {
                 console.error('Progress button is missing required data attributes.');
                 return;
             }
+            isSubmitting = true;
+            // Always handle the button click, regardless of form presence
             handleProgressButtonClick(button, waitingText, longWaitingText, errorPage, isInput);
+            // If no form, we're done. If there is a form, the form submit handler will take over
+            if (!form) {
+                return;
+            }
+            // For form buttons, let the click propagate to trigger form submission
         });
+        if (form) {
+            form.addEventListener('submit', function (event) {
+                // The button click handler has already set isSubmitting and handled the button state
+                if (isSubmitting) {
+                    // Allow the first submission, prevent subsequent ones
+                    if (event.target === form && event.submitter === button) {
+                        return; // Allow the first submission to proceed
+                    }
+                    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
+                    return;
+                }
+                // If the form is submitted through another method (not our button),
+                // prevent double submission but don't show progress state
+                isSubmitting = true;
+            });
+        }
     });
 }
-const handleProgressButtonClick = (element, waitingText, longWaitingText, errorPage, isInput = false) => {
-    element.blur();
+function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput) {
+    var originalText = isInput && element instanceof HTMLInputElement ? element.value : element.innerText;
+    if (typeof element.blur === 'function') {
+        element.blur();
+    }
     element.setAttribute('data-prevent-double-click', 'true');
-    element.classList.add('govuk-button--progress-loading');
+    var classes = element.className.split(' ');
+    if (classes.indexOf('govuk-button--progress-loading') === -1) {
+        classes.push('govuk-button--progress-loading');
+        element.className = classes.join(' ');
+    }
     if (isInput && element instanceof HTMLInputElement) {
         element.value = waitingText;
     }
@@ -314,7 +357,7 @@ const handleProgressButtonClick = (element, waitingText, longWaitingText, errorP
         element.innerText = waitingText;
     }
     element.setAttribute('aria-label', waitingText);
-    setTimeout(() => {
+    var longWaitTimeout = window.setTimeout(function () {
         if (isInput && element instanceof HTMLInputElement) {
             element.value = longWaitingText;
         }
@@ -323,9 +366,29 @@ const handleProgressButtonClick = (element, waitingText, longWaitingText, errorP
         }
         element.setAttribute('aria-label', longWaitingText);
     }, 5000);
-    setTimeout(() => {
+    var errorTimeout = window.setTimeout(function () {
         window.location.href = errorPage;
     }, 10000);
-};
+    function resetButton() {
+        var classes = element.className.split(' ');
+        var loadingIndex = classes.indexOf('govuk-button--progress-loading');
+        if (loadingIndex !== -1) {
+            classes.splice(loadingIndex, 1);
+            element.className = classes.join(' ');
+        }
+        element.setAttribute('data-prevent-double-click', 'false');
+        if (isInput && element instanceof HTMLInputElement) {
+            element.value = originalText;
+        }
+        else {
+            element.innerText = originalText;
+        }
+        element.setAttribute('aria-label', originalText);
+        window.clearTimeout(errorTimeout);
+        window.clearTimeout(longWaitTimeout);
+    }
+    element.resetProgressButton = resetButton;
+    return resetButton;
+}
 
 export { PollResult, initialiseProgressButtons, useSpinner };

package/build/esm/frontend/progress-button/progress-button.d.ts

@@ -1,2 +1,2 @@
-export declare function initialiseProgressButtons(): void;
+export declare function initialiseProgressButtons(document?: Document): void;
 //# sourceMappingURL=progress-button.d.ts.map

package/build/esm/frontend/progress-button/progress-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,SAgBxC"}
+{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,QAgE7E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govuk-one-login/frontend-ui",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "",
   "main": "build/cjs/backend/index.cjs",
   "module": "build/esm/backend/index.js",