PLATUI-3404: Updated index page for styling, updated timeout dialog, …

…correct focus style on timeout-dialog (#421)

Co-authored-by: Niall Molloy <[email protected]>

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [6.50.0] - 2025-01-08
+
+### Changed
+
+- Styled `timeout-dialog` call to action as button and other visual improvement (with thanks to [@gunjam](https://github.com/gunjam) for this contribution)
+- Added correct styling to links on app index page  (with thanks to [@gunjam](https://github.com/gunjam) for this contribution)
+
 ## [6.49.0] - 2025-01-06
 
 ### Changed

app/views/layouts/index.njk

@@ -11,7 +11,7 @@
       <p class="govuk-body">Follow the links under sub headings below to view examples of the components.</p>
       {% for componentName in componentsDirectory | sort %}
         <h3 class="govuk-heading-s">{{ componentName | replace("-", " ") | capitalize }}</h3>
-        <p class="govuk-body"><a href="/components/{{ componentName }}">View the readme</a>, or browse the examples:</p>
+        <p class="govuk-body"><a class="govuk-link" href="/components/{{ componentName }}">View the readme</a>, or browse the examples:</p>
         <ul class="govuk-list govuk-list--bullet">
           {% for exampleName in componentName | componentExamples %}
             <li><a href="/components/{{ componentName }}/{{ exampleName }}/preview" class="govuk-link">{{ exampleName | replace("-", " ") | capitalize }} example</a></li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "6.49.0",
+  "version": "6.50.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/components/timeout-dialog/_timeout-dialog.scss

@@ -38,6 +38,10 @@ html {
   @include govuk-media-query($from: tablet) {
     width: 435px;
   }
+
+  &:focus {
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+  }
 }
 
 .hmrc-timeout-dialog__message {
@@ -52,25 +56,13 @@ html {
   white-space: nowrap;
 }
 
-.hmrc-timeout-dialog__link-wrapper {
-  @include govuk-media-query($from: tablet) {
-    display: inline-block;
-    line-height: 2.5em;
-    vertical-align: baseline;
-  }
-}
-
 .hmrc-timeout-dialog__link {
   @include govuk-font($size: 24);
 
-  display: inline-block;
-
   @include govuk-media-query($from: tablet) {
     @include govuk-font($size: 19);
 
-    position: relative;
-    top: 2px;
-    padding: 0.526315em 0.789473em 0.263157em;
-    line-height: 1.5;
+    // Same padding as govuk-button
+    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($govuk-border-width-form-element / 2));
   }
 }

src/components/timeout-dialog/timeout-dialog.js

@@ -141,14 +141,6 @@ function TimeoutDialog($module, $sessionActivityService) {
     });
   };
 
-  const wrapLink = ($elem) => {
-    const $wrapper = document.createElement('div');
-    $wrapper.classList.add('hmrc-timeout-dialog__link-wrapper');
-    $wrapper.appendChild($elem);
-
-    return $wrapper;
-  };
-
   const setupDialog = (signoutTime) => {
     const $element = utils.generateDomElementFromString('<div>');
 
@@ -181,9 +173,12 @@ function TimeoutDialog($module, $sessionActivityService) {
       settings.keepAliveButtonText,
     );
 
+    const $wrapper = document.createElement('div');
+    $wrapper.classList.add('govuk-button-group');
+    $wrapper.appendChild($staySignedInButton);
+
     $element.appendChild($visualMessge);
     $element.appendChild($audibleMessage);
-    $element.appendChild($staySignedInButton);
     $staySignedInButton.addEventListener('click', keepAliveAndClose);
     $element.appendChild(document.createTextNode(' '));
 
@@ -195,9 +190,11 @@ function TimeoutDialog($module, $sessionActivityService) {
       $signOutButton.addEventListener('click', signOut);
       $signOutButton.setAttribute('href', settings.signOutUrl);
 
-      $element.appendChild(wrapLink($signOutButton));
+      $wrapper.appendChild($signOutButton);
     }
 
+    $element.appendChild($wrapper);
+
     const dialogControl = dialog.displayDialog($element);
 
     cleanupFunctions.push(() => {

src/components/timeout-dialog/timeout-dialog.jsdom.test.js

@@ -183,8 +183,10 @@ describe('/components/timeout-dialog', () => {
       expect(testScope.latestDialog$element.querySelector('#hmrc-timeout-sign-out-link').innerText).toEqual('Sign out');
     });
 
-    it('should separate the call-to-actions into different containers', () => {
-      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 add the call-to-actions into a shared button-group container', () => {
+      const group = testScope.latestDialog$element.querySelector('.govuk-button-group');
+      expect(testScope.latestDialog$element.querySelector('button#hmrc-timeout-keep-signin-btn.govuk-button').parentNode).toBe(group);
+      expect(testScope.latestDialog$element.querySelector('#hmrc-timeout-sign-out-link').parentNode).toBe(group);
     });
 
     it('should redirect to sign out url when sign out is clicked', () => {