PLATUI-2588: Adding in hideSignOutButton functionality (#324)

PLATUI-2588: Adding in hideSignOutButton functionality for non-HMRC services
hmrc · Nov 1, 2023 · f90f58d · f90f58d
1 parent 7263780
commit f90f58d
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [5.52.0] - 2023-11-01
+
+### Changed
+
+- Modify the timeout dialog to take in an optional parameter to not display a sign out link. This feature was proposed by
+  DWP Access to Work as cross-Government request: https://github.com/hmrc/hmrc-frontend/issues/316 
+
 ## [5.51.0] - 2023-10-24
 
 ### Changed

diff --git a/...stop_default_timeout-dialog_hide-sign-out-button_example_0_document_0_phone.png b/...stop_default_timeout-dialog_hide-sign-out-button_example_0_document_0_phone.png
diff --git a/...top_default_timeout-dialog_hide-sign-out-button_example_0_document_1_tablet.png b/...top_default_timeout-dialog_hide-sign-out-button_example_0_document_1_tablet.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "5.51.0",
+  "version": "5.52.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

diff --git a/src/components/timeout-dialog/template.njk b/src/components/timeout-dialog/template.njk
@@ -12,4 +12,5 @@
       data-message-suffix="{{ params.messageSuffix }}"
       data-keep-alive-button-text="{{ params.keepAliveButtonText }}"
       data-sign-out-button-text="{{ params.signOutButtonText }}"
-      data-synchronise-tabs="{{ params.synchroniseTabs }}"/>
+      data-synchronise-tabs="{{ params.synchroniseTabs }}"
+      data-hide-sign-out-button="{{ params.hideSignOutButton }}"/>
diff --git a/src/components/timeout-dialog/timeout-dialog.js b/src/components/timeout-dialog/timeout-dialog.js
@@ -66,6 +66,9 @@ function TimeoutDialog($module, $sessionActivityService) {
       synchroniseTabs: validate.boolean(
         lookupData('data-synchronise-tabs') || false,
       ),
+      hideSignOutButton: validate.boolean(
+        lookupData('data-hide-sign-out-button') || false,
+      ),
     };
 
     // Default timeoutUrl to signOutUrl if not set
@@ -182,20 +185,23 @@ function TimeoutDialog($module, $sessionActivityService) {
       '<button id="hmrc-timeout-keep-signin-btn" class="govuk-button">',
       settings.keepAliveButtonText,
     );
-    const $signOutButton = utils.generateDomElementFromStringAndAppendText(
-      '<a id="hmrc-timeout-sign-out-link" class="govuk-link hmrc-timeout-dialog__link">',
-      settings.signOutButtonText,
-    );
-
-    $staySignedInButton.addEventListener('click', keepAliveAndClose);
-    $signOutButton.addEventListener('click', signOut);
-    $signOutButton.setAttribute('href', settings.signOutUrl);
 
     $element.appendChild($visualMessge);
     $element.appendChild($audibleMessage);
     $element.appendChild($staySignedInButton);
+    $staySignedInButton.addEventListener('click', keepAliveAndClose);
     $element.appendChild(document.createTextNode(' '));
-    $element.appendChild(wrapLink($signOutButton));
+
+    if (!settings.hideSignOutButton) {
+      const $signOutButton = utils.generateDomElementFromStringAndAppendText(
+        '<a id="hmrc-timeout-sign-out-link" class="govuk-link hmrc-timeout-dialog__link">',
+        settings.signOutButtonText,
+      );
+      $signOutButton.addEventListener('click', signOut);
+      $signOutButton.setAttribute('href', settings.signOutUrl);
+
+      $element.appendChild(wrapLink($signOutButton));
+    }
 
     const dialogControl = dialog.displayDialog($element);
 

diff --git a/src/components/timeout-dialog/timeout-dialog.test.js b/src/components/timeout-dialog/timeout-dialog.test.js
@@ -191,14 +191,14 @@ describe('/components/timeout-dialog', () => {
       expect(testScope.latestDialog$element.querySelector('button#hmrc-timeout-keep-signin-btn.govuk-button').parentNode).not.toBe(testScope.latestDialog$element.querySelector('#hmrc-timeout-sign-out-link').parentNode);
     });
 
-    it('should redirect to signout url when signout is clicked', () => {
+    it('should redirect to sign out url when sign out is clicked', () => {
       assume(redirectHelper.redirectToUrl).not.toHaveBeenCalled();
 
       clickElem(testScope.latestDialog$element.querySelector('#hmrc-timeout-sign-out-link'));
       expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('/sign-out');
     });
 
-    it('should use the signout url on the signout link', () => {
+    it('should use the sign out url on the sign out link', () => {
       const $signoutLink = testScope.latestDialog$element.querySelector('a#hmrc-timeout-sign-out-link');
       expect($signoutLink.attributes.getNamedItem('href').value).toEqual('/sign-out');
     });
@@ -326,7 +326,7 @@ describe('/components/timeout-dialog', () => {
       expect(getElemText(testScope.latestDialog$element.querySelector('a#hmrc-timeout-sign-out-link'))).toEqual('sign OUT');
     });
 
-    it('should redirect to default signout url when signout is clicked', () => {
+    it('should redirect to default sign out url when sign out is clicked', () => {
       assume(redirectHelper.redirectToUrl).not.toHaveBeenCalled();
 
       expect(testScope.latestDialog$element.querySelector('#hmrc-timeout-sign-out-link')).not.toBeNull();
@@ -336,6 +336,35 @@ describe('/components/timeout-dialog', () => {
     });
   });
 
+  describe('display the sign out button', () => {
+    it('should not show sign out button when data-hide-sign-out-button parameter is set', () => {
+      setupDialog({
+        'data-title': 'my custom TITLE',
+        'data-message': 'MY custom message',
+        'data-message-suffix': 'My message suffix.',
+        'data-keep-alive-button-text': 'KEEP alive',
+        'data-hide-sign-out-button': true,
+      });
+
+      pretendSecondsHavePassed(780);
+
+      expect(testScope.latestDialog$element.querySelector('a#hmrc-timeout-sign-out-link')).toBeNull();
+    });
+
+    it('should show sign out button by default', () => {
+      setupDialog({
+        'data-title': 'my custom TITLE',
+        'data-message': 'MY custom message',
+        'data-message-suffix': 'My message suffix.',
+        'data-keep-alive-button-text': 'KEEP alive',
+      });
+
+      pretendSecondsHavePassed(780);
+
+      expect(testScope.latestDialog$element.querySelector('a#hmrc-timeout-sign-out-link')).not.toBeNull();
+    });
+  });
+
   describe('Restarting countdown on close', () => {
     it('should restart with default settings', () => {
       setupDialog({ 'data-message': 'time:' });

diff --git a/src/components/timeout-dialog/timeout-dialog.yaml b/src/components/timeout-dialog/timeout-dialog.yaml
@@ -48,6 +48,8 @@ examples:
     keepAliveButtonText: "keepAliveButtonText"
     signOutButtonText: "signOutButtonText"
     synchroniseTabs: false
+    hideSignOutButton: false
+#   hideSignOutButton is experimental, please don't use in HMRC services without testing with your users. See Github issues/316
   visualRegressionTests:
     backstopScenarioOptions:
       delay: 10000
@@ -58,6 +60,13 @@ examples:
     keepAliveUrl: "?abc=def"
     signOutUrl: "?ghi=jkl"
     synchroniseTabs: true
+- name: hide-sign-out-button
+  data:
+    timeout: 75
+    countdown: 74
+    keepAliveUrl: "?abc=def"
+    signOutUrl: "?ghi=jkl"
+    hideSignOutButton: true
 
 visualRegressionTests:
   backstopScenarioOptions: