CDPS-177 add old header (#151)

* CDPS-177 - header in progress * CDPS-177-add-old-header * CDPS-177-add-old-header
ministryofjustice · Jun 9, 2023 · 09458b7 · 09458b7
1 parent 4aeec04
commit 09458b7
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 25 deletions.
diff --git a/assets/scss/components/_header-bar.scss b/assets/scss/components/_header-bar.scss
@@ -3,10 +3,6 @@
   @include govuk-responsive-padding(3, 'bottom');
   background-color: govuk-colour('black');
 
-  .hmpps-header__link__main-text {
-    color: govuk-colour('white');
-    margin-bottom: 0;
-  }
   &__container {
     @include govuk-width-container;
     display: flex;
@@ -112,6 +108,7 @@
         border-right: 0;
         padding-right: 0;
       }
+
     }
   }
 
@@ -120,27 +117,32 @@
   }
 }
 
-.location-bar {
+.hmpps-location-bar {
   @include govuk-width-container;
   @include govuk-responsive-margin(3, 'bottom');
   @include govuk-responsive-padding(3, 'top');
   @include govuk-responsive-padding(3, 'bottom');
+
   width: 100%;
-  display: flex;
+  display: flex!important;
   flex-wrap: wrap;
-  border-bottom: 1px solid $govuk-border-colour;
-
-  &__location {
+  .location-bar__location {
     @include govuk-font($size: 19, $weight: 'bold');
     @include govuk-responsive-margin(3, 'right');
+    @include govuk-responsive-margin(0, 'bottom');
   }
-
-  &__link {
+  a{
     @include govuk-link-common;
     @include govuk-link-style-default;
     @include govuk-font($size: 19, $weight: 'normal');
+    height: fit-content;
   }
 
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 1px solid $govuk-border-colour;
+
   @media print {
     display: none;
   }
@@ -330,4 +332,4 @@
       }
     }
   }
-}
+}
diff --git a/server/utils/nunjucksSetup.ts b/server/utils/nunjucksSetup.ts
@@ -12,6 +12,7 @@ import {
   userHasRoles,
   apostrophe,
   prependBaseUrl,
+  prependHmppsAuthBaseUrl,
 } from './utils'
 import { pluralise } from './pluralise'
 import { formatDate, formatDateTime } from './dateHelpers'
@@ -93,4 +94,5 @@ export default function nunjucksSetup(app: express.Express, path: pathModule.Pla
 
   njkEnv.addFilter('apostrophe', apostrophe)
   njkEnv.addFilter('prependBaseUrl', prependBaseUrl)
+  njkEnv.addFilter('prependHmppsAuthBaseUrl', prependHmppsAuthBaseUrl)
 }
diff --git a/server/utils/utils.test.ts b/server/utils/utils.test.ts
@@ -12,6 +12,7 @@ import {
   initialiseName,
   mapToQueryString,
   prependBaseUrl,
+  prependHmppsAuthBaseUrl,
   prisonerBelongsToUsersCaseLoad,
   properCaseName,
   summaryListOneHalfWidth,
@@ -344,4 +345,9 @@ describe('findError', () => {
     const route = '/prisoner'
     expect(prependBaseUrl(route)).toEqual(`${config.serviceUrls.digitalPrison}${route}`)
   })
+
+  describe('prependHmppsAuthBaseUrl', () => {
+    const route = '/account-details'
+    expect(prependHmppsAuthBaseUrl(route)).toEqual(`${config.apis.hmppsAuth.url}${route}`)
+  })
 })
diff --git a/server/utils/utils.ts b/server/utils/utils.ts
@@ -384,6 +384,11 @@ export const prependBaseUrl = (url: string): string => {
   return urlWithBaseUrl
 }
 
+export const prependHmppsAuthBaseUrl = (url: string): string => {
+  const urlWithHmppsAuthBaseUrl = `${config.apis.hmppsAuth.url}${url}`
+  return urlWithHmppsAuthBaseUrl
+}
+
 /**
  * Returns a description for specific category codes, otherwise just the code.
  *

diff --git a/server/views/partials/header.njk b/server/views/partials/header.njk
@@ -16,20 +16,9 @@
     <nav aria-label="Account navigation">
       <ul class="hmpps-header__navigation">
         {% if user %}
-            {% if user.caseLoads.length > 1 %}
-            <li class="hmpps-header__navigation__item">
-                <a class="hmpps-header__link" href="https://digital-dev.prison.service.justice.gov.uk/change-caseload">
-                    <span class="govuk-heading-s  hmpps-header__link__main-text" data-qa=header-location-name>
-                    {{ user.activeCaseLoad.description }}
-                    </span>
-                    <span data-qa=header-change-location class="hmpps-header__link__sub-text">Change location</span>
-                </a>
-            </li>
-            {% endif %}
-
           <li class="hmpps-header__navigation__item">
-            <a data-qa="manageDetails" class="hmpps-header__link" href="/account-details" data-test="manage-account-link" target="_blank" rel="noopener noreferrer">
-              <span data-qa=header-user-name class="govuk-heading-s hmpps-header__link__main-text">{{ user.displayName | initialiseName }}</span>
+            <a data-qa="manageDetails" class="hmpps-header__link" href="{{ "/account-details" | prependHmppsAuthBaseUrl}}" data-test="manage-account-link" target="_blank" rel="noopener noreferrer">
+              <span data-qa=header-user-name>{{ user.displayName | initialiseName }}</span>
               <span class="hmpps-header__link__sub-text">Manage your details</span>
             </a>
           </li>
@@ -42,3 +31,15 @@
     </nav>
   </div>
 </header>
+
+<div class="hmpps-header__container">
+  <div class="hmpps-location-bar location-bar">
+    <p class="location-bar__location govuk-!-font-size-19 govuk-!-font-weight-bold" data-test="active-location">{{ user.activeCaseLoad[0].description }}</p>
+    {% if user.caseLoads.length > 1 %}
+      <a className="location-bar__link " href="{{ "/change-caseload" | prependBaseUrl}}" data-test="change-location-link">
+        Change your location
+      </a>
+    {% endif %} 
+  </div>
+</div>
+