Update account menu to allow defining active link

src/components/hmrc-account-header/account-header.yaml

@@ -25,20 +25,40 @@ examples:
           href: '/components/account-header/with-service-name/preview'
         cy:
           href: '/components/account-header/welsh-with-service-name/preview'
+- name: global-service-name
+  data:
+    serviceName: 'My Service'
+- name: overridden-global-service-name
+  data:
+    serviceName: 'My Global Service Name (unused)'
+    hmrcAccountHeader:
+      serviceName: 'My Actual Service Name'
+      abc: 'def'
 - name: all-available-options
   data:
     hmrcAccountHeader:
-      accountHomeHref: '#accountHomeHref'
-      messagesHref: '#messagesHref'
-      messageCount: '30'
-      checkProgressHref: '#checkProgress'
-      paperlessSettingsHref: '#paperlessSettingsHref'
-      personalDetailsHref: '#personalDetailsHref'
-      signOutHref: '#signOutHref'
+      serviceName: 'My Service'
+      accountHome:
+        href: '/account/home'
+      messages:
+        href: '/messages/href'
+        messageCount: '30'
+      checkProgress:
+        href: '/checkProgress'
+      paperlessSettings:
+        href: '/paperless/settings'
+      personalDetails:
+        href: '/personalDetails'
+      signOut:
+        href: '?signOut=true'
       language: 'en'
       languageToggle:
         en:
           href: '/components/account-header/with-service-name/preview'
         cy:
           href: '/components/account-header/welsh-with-service-name/preview'
-    serviceName: 'My service'
+      serviceName: 'My service'
+      homepageUrl: '/the-homepage'
+      serviceUrl: '/the-service'
+      containerClasses: 'the-header-container-classes govuk-width-container'
+      classes: 'the-header-classes'

src/components/hmrc-account-header/example.njk

@@ -1,9 +1,9 @@
 {% extends 'layout-hmrc-account-header.html' %}
 
 {% block content %}
-    <div style="min-height: 500px">
+  <div style="min-height: 500px">
     <h1 class="govuk-heading-xl">HMRC Account Menu</h1>
-    </div>
+  </div>
 {% endblock %}
 
 {% block bodyEnd %}

src/components/hmrc-account-menu/account-menu.yaml

@@ -1,50 +1,100 @@
 params:
-- name: accountHomeHref
-  type: string
+- name: accountHome
+  type: object
   required: false
-  description: "The url of the Account home menu item. Defaults to #"
-- name: messagesHref
-  type: string
+  description: The Account home menu item.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: "The url of the Account home item. Defaults to #."
+  - name: active
+    type: boolean
+    required: false
+    description: Flag to mark the Account home item as active or not.
+- name: messages
+  type: object
   required: false
-  description: The url of the Messages menu item. Defaults to /
-- name: messageCount
-  type: number
+  description: The Messages menu item.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: "The url of the Messages item. Defaults to #."
+  - name: active
+    type: string
+    required: false
+    description: Flag to mark the Messages item as active or not.
+  - name: messageCount
+    type: number
+    required: false
+    description: The number of messages to display in the notifacation badge next to Messages. Defaults to not being displayed.
+- name: checkProgress
+  type: object
   required: false
-  description: "The number of messages to display in the notifacation badge next to Messages. Defaults to not being displayed"
-- name: checkProgressHref
-  type: string
-  required: false
-  description: "The url of the Check progress menu item. Defaults to #"
-- name: paperlessSettingsHref
-  type: string
+  description: The Check progress menu item.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: "The url of the Check progress item. Defaults to #."
+  - name: active
+    type: string
+    required: false
+    description: Flag to mark the Check progress item as active or not.
+- name: paperlessSettings
+  type: object
   required: false
-  description: "The url of the Manage your paperless settings submenu item. Defaults to #"
-- name: personalDetailsHref
+  description: The Manage your paperless settings submenu item.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: "The url of the Manage your paperless settings submenu item. Defaults to #."
+- name: personalDetails
   type: string
   required: false
-  description: "The url of the Manage your personal details submenu item. Defaults to #"
-- name: signOutHref
+  description: The Manage your personal details submenu item.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: "The url of the Manage your personal details submenu item. Defaults to #."
+- name: signOut
   type: string
   required: false
-  description: "The url of the Sign out menu item. Defaults to #"
+  description: The Sign out menu item.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: "The url of the Sign out menu item. Defaults to #."
 
 examples:
 - name: default
-  description: The standard account menu as used on Personal Tax Account pages
+  description: The standard account menu as used on Personal Tax Account pages.
   data:
     {}
 
 - name: with-unread-messages
-  description: If you need to show the user they have unread messages
+  description: If you need to show the user they have unread messages.
   data:
-    messageCount: 2
+    messages:
+      messageCount: 2
 
 - name: with-navigaiton-urls
-  description: If you need to provide a custom urls for the menu items
+  description: If you need to provide a custom urls for the menu items.
   data:
-    accountHomeHref: "#account-home"
-    messagesHref: "#messages"
-    checkProgressHref: "#check-progress"
-    paperlessSettingsHref: "#paperless-settings"
-    personalDetailsHref: "#personal-details"
-    signOutHref: "#sign-out"
+    accountHome:
+      href: "#account-home"
+      active: true
+    messages:
+      href: "#messages"
+    checkProgress:
+      href: "#check-progress"
+    paperlessSettings:
+      href: "#paperless-settings"
+    personalDetails:
+      href: "#personal-details"
+    signOut:
+      href: "#sign-out"

src/components/hmrc-account-menu/template.njk

@@ -2,7 +2,7 @@
 
 <!-- ACCOUNT MENU -->
 <nav id="secondary-nav" class="hmrc-account-menu" aria-label="Account" data-module="hmrc-account-menu">
-  <a href="{{ params.accountHomeHref | default('#') }}" class="hmrc-account-menu__link hmrc-account-menu__link--home hmrc-account-menu__link--active">
+  <a href="{{ params.accountHome.href | default('#') }}" class="hmrc-account-menu__link hmrc-account-menu__link--home{% if params.accountHome.active %} hmrc-account-menu__link--active{% endif %}">
     <span class="hmrc-account-icon hmrc-account-icon--home">Account home</span>
   </a>
 
@@ -18,16 +18,16 @@
     </li>
 
     <li>
-      <a href="{{ params.messagesHref | default('#') }}" class="hmrc-account-menu__link">
+      <a href="{{ params.messages.href | default('#') }}" class="hmrc-account-menu__link{% if params.messages.active %} hmrc-account-menu__link--active{% endif %}">
         Messages
-        {% if params.messageCount -%}
-        {{ hmrcNotificationBadge({ text: params.messageCount }) }}
+        {% if params.messages.messageCount -%}
+        {{ hmrcNotificationBadge({ text: params.messages.messageCount }) }}
         {%- endif -%}
       </a>
     </li>
 
     <li>
-      <a href="{{ params.checkProgressHref | default('#') }}" class="hmrc-account-menu__link">
+      <a href="{{ params.checkProgress.href | default('#') }}" class="hmrc-account-menu__link{% if params.checkProgress.active %} hmrc-account-menu__link--active{% endif %}">
         Check progress
       </a>
     </li>
@@ -42,22 +42,22 @@
           <p class="hmrc-subnav__section__heading">Paperless settings</p>
 
           <div>
-            <a href="{{ params.paperlessSettingsHref | default('#') }}">Manage your paperless settings</a>
+            <a href="{{ params.paperlessSettings.href | default('#') }}">Manage your paperless settings</a>
           </div>
         </div>
 
         <div class="govuk-grid-column-one-third hmrc-subnav__section">
           <p class="hmrc-subnav__section__heading">Personal details</p>
 
           <div>
-            <a href="{{ params.personalDetailsHref | default('#') }}">Manage your personal details</a>
+            <a href="{{ params.personalDetails.href | default('#') }}">Manage your personal details</a>
           </div>
         </div>
       </div>
     </li>
 
     <li>
-      <a href="{{ params.signOutHref | default('#') }}" class="hmrc-account-menu__link">Sign out</a>
+      <a href="{{ params.signOut.href | default('#') }}" class="hmrc-account-menu__link">Sign out</a>
     </li>
   </ul>
 </nav>

src/components/hmrc-account-menu/template.test.js

@@ -47,12 +47,12 @@ describe('Account Menu', () => {
       const $detailsLink = $nav.find('a:contains("personal details")')
       const $signOutLink = $nav.find('a:contains("Sign out")')
 
-      expect($accountHomeLink.attr('href')).toEqual(example.accountHomeHref)
-      expect($messagesLink.attr('href')).toEqual(example.messagesHref)
-      expect($progressLink.attr('href')).toEqual(example.checkProgressHref)
-      expect($paperlessLink.attr('href')).toEqual(example.paperlessSettingsHref)
-      expect($detailsLink.attr('href')).toEqual(example.personalDetailsHref)
-      expect($signOutLink.attr('href')).toEqual(example.signOutHref)
+      expect($accountHomeLink.attr('href')).toEqual(example.accountHome.href)
+      expect($messagesLink.attr('href')).toEqual(example.messages.href)
+      expect($progressLink.attr('href')).toEqual(example.checkProgress.href)
+      expect($paperlessLink.attr('href')).toEqual(example.paperlessSettings.href)
+      expect($detailsLink.attr('href')).toEqual(example.personalDetails.href)
+      expect($signOutLink.attr('href')).toEqual(example.signOut.href)
     })
 
     it('renders a notification badge with a message count', () => {
@@ -62,7 +62,7 @@ describe('Account Menu', () => {
       const $messageCount = $('.hmrc-notification-badge')
 
       expect($messageCount).not.toBeNull()
-      expect($messageCount.text()).toEqual(example.messageCount.toString())
+      expect($messageCount.text()).toEqual(example.messages.messageCount.toString())
     })
   })
 })

src/govuk-prototype-kit.config.json

@@ -1,6 +1,6 @@
 {
   "assets": [
-    "/components/account-menu/images"
+    "/components/hmrc-account-menu/images"
   ],
   "nunjucksPaths": [
     "/layouts",

src/layouts/layout-hmrc-account-header.html

@@ -7,11 +7,14 @@
   {% include "includes/cookie-banner.html" %}
 
   {{ hmrcHeader({
-    homepageUrl: "/",
-    serviceName: serviceName,
-    serviceUrl: "/",
-    containerClasses: "govuk-width-container",
+    homepageUrl: hmrcAccountHeader.homepageUrl,
+    serviceName: hmrcAccountHeader.serviceName or serviceName,
+    serviceUrl: hmrcAccountHeader.serviceUrl,
+    containerClasses: hmrcAccountHeader.headerContainerClasses or "govuk-width-container",
     language: hmrcAccountHeader.language,
+    attributes: hmrcAccountHeader.attributes,
+    classes: hmrcAccountHeader.classes,
+    containerClasses: hmrcAccountHeader.containerClasses,
     languageToggle: {
       en: {
         href: hmrcAccountHeader.languageToggle.en.href