@govuk-one-login/frontend-ui 4.2.1 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/build/cjs/frontend/index.cjs +8 -4
  2. package/build/cjs/frontend/progress-button/progress-button.d.ts +1 -1
  3. package/build/cjs/frontend/progress-button/progress-button.d.ts.map +1 -1
  4. package/build/components/progress-button/progress-button.yaml +5 -1
  5. package/build/components/progress-button/template.njk +3 -3
  6. package/build/esm/frontend/index.js +8 -4
  7. package/build/esm/frontend/progress-button/progress-button.d.ts +1 -1
  8. package/build/esm/frontend/progress-button/progress-button.d.ts.map +1 -1
  9. package/package.json +1 -1
package/build/cjs/frontend/index.cjs CHANGED
@@ -289,7 +289,8 @@ class Spinner {
289
289
  }
290
290
  }
291
291
 
292
- function initialiseProgressButtons(document = window.document) {
292
+ const DEFAULT_ERROR_TIMEOUT = 10000; // 10 seconds
293
+ function initialiseProgressButtons(document = window.document, customErrorTimeout) {
293
294
  // Create a single live region for button status announcements
294
295
  const statusRegion = document.createElement('div');
295
296
  statusRegion.setAttribute('aria-live', 'assertive');
@@ -324,6 +325,9 @@ function initialiseProgressButtons(document = window.document) {
324
325
  const waitingText = button.getAttribute('data-waiting-text');
325
326
  const longWaitingText = button.getAttribute('data-long-waiting-text');
326
327
  const errorPage = button.getAttribute('data-error-page');
328
+ if (button.hasAttribute('data-error-timeout')) {
329
+ customErrorTimeout = parseInt(button.getAttribute('data-error-timeout'));
330
+ }
327
331
  const isInput = button.tagName.toLowerCase() === 'input';
328
332
  if (!waitingText || !longWaitingText || !errorPage) {
329
333
  console.error('Progress button is missing required data attributes.');
@@ -331,7 +335,7 @@ function initialiseProgressButtons(document = window.document) {
331
335
  }
332
336
  isSubmitting = true;
333
337
  // Always handle the button click, regardless of form presence
334
- handleProgressButtonClick(button, waitingText, longWaitingText, errorPage, isInput);
338
+ handleProgressButtonClick(button, waitingText, longWaitingText, errorPage, isInput, customErrorTimeout || DEFAULT_ERROR_TIMEOUT);
335
339
  // If no form, we're done. If there is a form, the form submit handler will take over
336
340
  if (!form) {
337
341
  return;
@@ -356,7 +360,7 @@ function initialiseProgressButtons(document = window.document) {
356
360
  }
357
361
  });
358
362
  }
359
- function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput) {
363
+ function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput, errorTimeoutDuration = DEFAULT_ERROR_TIMEOUT) {
360
364
  var originalText = isInput && element instanceof HTMLInputElement ? element.value : element.innerText;
361
365
  const statusRegion = document.querySelector('.govuk-visually-hidden[role="status"]');
362
366
  if (typeof element.blur === 'function') {
@@ -404,7 +408,7 @@ function handleProgressButtonClick(element, waitingText, longWaitingText, errorP
404
408
  }, 5000);
405
409
  var errorTimeout = window.setTimeout(function () {
406
410
  window.location.href = errorPage;
407
- }, 10000);
411
+ }, errorTimeoutDuration);
408
412
  function resetButton() {
409
413
  var classes = element.className.split(' ');
410
414
  var loadingIndex = classes.indexOf('govuk-button--progress-loading');
package/build/cjs/frontend/progress-button/progress-button.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare function initialiseProgressButtons(document?: Document): void;
1
+ export declare function initialiseProgressButtons(document?: Document, customErrorTimeout?: number): void;
2
2
  //# sourceMappingURL=progress-button.d.ts.map
package/build/cjs/frontend/progress-button/progress-button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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,QAiF7E"}
1
+ {"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAEA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,EAAE,kBAAkB,CAAC,EAAE,MAAM,QAmF1G"}
package/build/components/progress-button/progress-button.yaml CHANGED
@@ -10,4 +10,8 @@ params:
10
10
  - name: errorPage
11
11
  type: string
12
12
  required: true
13
- description: URL for the error help page
13
+ description: URL for the error help page
14
+ - name: customDevErrorTimeout
15
+ type: string
16
+ required: false
17
+ description: Custom error timeout for development/testing purposes (in milliseconds) - to be used in dev/test only
package/build/components/progress-button/template.njk CHANGED
@@ -65,7 +65,7 @@ treat it as an interactive element - without this it will be
65
65
  </div>
66
66
  </noscript>
67
67
 
68
- <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
68
+ <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" {%- if params.customDevErrorTimeout %} data-error-timeout={{ params.customDevErrorTimeout }} {% endif %} >
69
69
  {% if params.html %}
70
70
  {{ params.html | safe }}
71
71
  {% elseif params.text %}
@@ -85,7 +85,7 @@ treat it as an interactive element - without this it will be
85
85
  </div>
86
86
  </noscript>
87
87
 
88
- <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
88
+ <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" {%- if params.customDevErrorTimeout %} data-error-timeout={{ params.customDevErrorTimeout }} {% endif %} >
89
89
  {% if params.html %}
90
90
  {{ params.html | safe }}
91
91
  {% elseif params.text %}
@@ -105,7 +105,7 @@ treat it as an interactive element - without this it will be
105
105
  {{ progressButton.noJavascriptMessage }}
106
106
  </div>
107
107
  </noscript>
108
- <input value="{{ params.value }}" type="{{ params.type if params.type else 'submit'}}"{{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
108
+ <input value="{{ params.value }}" type="{{ params.type if params.type else 'submit'}}"{{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" {%- if params.customDevErrorTimeout %} data-error-timeout={{ params.customDevErrorTimeout }} {% endif %} >
109
109
  {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
110
110
  </div>
111
111
 
package/build/esm/frontend/index.js CHANGED
@@ -287,7 +287,8 @@ class Spinner {
287
287
  }
288
288
  }
289
289
 
290
- function initialiseProgressButtons(document = window.document) {
290
+ const DEFAULT_ERROR_TIMEOUT = 10000; // 10 seconds
291
+ function initialiseProgressButtons(document = window.document, customErrorTimeout) {
291
292
  // Create a single live region for button status announcements
292
293
  const statusRegion = document.createElement('div');
293
294
  statusRegion.setAttribute('aria-live', 'assertive');
@@ -322,6 +323,9 @@ function initialiseProgressButtons(document = window.document) {
322
323
  const waitingText = button.getAttribute('data-waiting-text');
323
324
  const longWaitingText = button.getAttribute('data-long-waiting-text');
324
325
  const errorPage = button.getAttribute('data-error-page');
326
+ if (button.hasAttribute('data-error-timeout')) {
327
+ customErrorTimeout = parseInt(button.getAttribute('data-error-timeout'));
328
+ }
325
329
  const isInput = button.tagName.toLowerCase() === 'input';
326
330
  if (!waitingText || !longWaitingText || !errorPage) {
327
331
  console.error('Progress button is missing required data attributes.');
@@ -329,7 +333,7 @@ function initialiseProgressButtons(document = window.document) {
329
333
  }
330
334
  isSubmitting = true;
331
335
  // Always handle the button click, regardless of form presence
332
- handleProgressButtonClick(button, waitingText, longWaitingText, errorPage, isInput);
336
+ handleProgressButtonClick(button, waitingText, longWaitingText, errorPage, isInput, customErrorTimeout || DEFAULT_ERROR_TIMEOUT);
333
337
  // If no form, we're done. If there is a form, the form submit handler will take over
334
338
  if (!form) {
335
339
  return;
@@ -354,7 +358,7 @@ function initialiseProgressButtons(document = window.document) {
354
358
  }
355
359
  });
356
360
  }
357
- function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput) {
361
+ function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput, errorTimeoutDuration = DEFAULT_ERROR_TIMEOUT) {
358
362
  var originalText = isInput && element instanceof HTMLInputElement ? element.value : element.innerText;
359
363
  const statusRegion = document.querySelector('.govuk-visually-hidden[role="status"]');
360
364
  if (typeof element.blur === 'function') {
@@ -402,7 +406,7 @@ function handleProgressButtonClick(element, waitingText, longWaitingText, errorP
402
406
  }, 5000);
403
407
  var errorTimeout = window.setTimeout(function () {
404
408
  window.location.href = errorPage;
405
- }, 10000);
409
+ }, errorTimeoutDuration);
406
410
  function resetButton() {
407
411
  var classes = element.className.split(' ');
408
412
  var loadingIndex = classes.indexOf('govuk-button--progress-loading');
package/build/esm/frontend/progress-button/progress-button.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare function initialiseProgressButtons(document?: Document): void;
1
+ export declare function initialiseProgressButtons(document?: Document, customErrorTimeout?: number): void;
2
2
  //# sourceMappingURL=progress-button.d.ts.map
package/build/esm/frontend/progress-button/progress-button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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,QAiF7E"}
1
+ {"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAEA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,EAAE,kBAAkB,CAAC,EAAE,MAAM,QAmF1G"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@govuk-one-login/frontend-ui",
3
- "version": "4.2.1",
3
+ "version": "4.2.2",
4
4
  "description": "",
5
5
  "main": "build/cjs/backend/index.cjs",
6
6
  "module": "build/esm/backend/index.js",